/* ============================================================================
   Tema SUPER BET BR
   Cores MEDIDAS no arquivo da logomarca (nao escolhidas a olho):
     dourado #D6AF24 · azul neon #1691E6 · prata #F6FBFF · fundo preto (pedido do dono)
   Derivado do tema ACM10 e TOKENIZADO: as cores vivem no bloco abaixo, não
   espalhadas pelo arquivo. Trocar a marca de novo = editar só esse bloco.
   ============================================================================ */
.brand-superbetbr {
  /* ---- superfícies ----
     Preto puro, igual ao ACM10, por escolha do dono. Registro o efeito colateral
     para quem mexer depois: em painel OLED o #000 desliga o pixel, e ligar de
     novo tem latencia — por isso lista rolando "arrasta" um rastro. Se um dia
     incomodar, subir --bg para #0A0A0A resolve sem mudar a aparencia. */
  --bg: #000000;
  --surface: #111111;
  --surface-2: #1A1A1A;
  --border: #2A2A2A;
  --text: #F5F5F5;
  --muted: #9CA3AF;
  --muted-2: #7F868F;

  /* ---- marca: cores MEDIDAS no arquivo da logo, nao escolhidas a olho ----
     Amostrei os pixels de superbet-nova.jpg por pico de saturacao:
       dourado da palavra  #D6AF24   (3.665 px)
       azul do neon        #1691E6   (9.714 px)
       prata da moldura    #F6FBFF   (6.429 px)
       fundo do escudo     #020308 / #0C1424
     O dourado da propria logo ja da 8.99:1 sobre o fundo (AAA) e 8.99:1 com
     tinta preta em cima — nao precisei "melhorar" a cor da marca para caber na
     acessibilidade, entao ela entra fiel. A versao mais clara fica so no hover. */
  --accent: #D6AF24;
  --accent-rgb: 214, 175, 36;
  --accent-ink: #000000;
  --accent-hover: #EBC128;
  --accent2: #1691E6;
  --accent2-rgb: 22, 145, 230;
  /* Azul da logo como FUNDO de botao com texto branco da 3.21:1 — reprova.
     Escurecido 18% (mesmo matiz) chega a 4.58:1. O azul claro continua sendo o
     de texto/borda/icone sobre o escuro, onde ele ja da 6.06:1. */
  --accent2-600: #137BC4;

  /* ---- dinheiro: SEMÂNTICA, não marca ----
     Verde entra, vermelho sai. Isto não acompanha rebrand nenhum — o dono lê
     esses relatórios pela cor antes de ler o número. */
  --success: #22C55E;
  --danger: #EF4444;
  --dash-entrada: #22C55E;
  --dash-saida: #EF4444;
  --dash-barra: #D6AF24;
  --dash-accent: #1691E6;

  /* ---- odds ---- */
  --odd-bg: #1A1A1A;
  --odd-bg-hover: #262626;
  --odd-on: #D6AF24;

  /* ---- header / sidebar ---- */
  --primary: #000000;
  --primary-600: #111111;
  --primary-700: #000000;
}

/* ---- Base ---- */
.brand-superbetbr body,
.brand-superbetbr .guest,
.brand-superbetbr .shell {
  background: var(--bg);
  color: var(--text);
}

.brand-superbetbr .sidebar {
  background: #000000;
  border-color: #2A2A2A;
}

.brand-superbetbr .sidebar__brand {
  background: #000000;
  border-bottom-color: #2A2A2A;
}

.brand-superbetbr .navlink {
  color: #9CA3AF;
}

.brand-superbetbr .navlink:hover {
  background: #1A1A1A;
  color: #fff;
}

.brand-superbetbr .navlink.active,
.brand-superbetbr .navgroup.open > .navgroup__head {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}

.brand-superbetbr .topbar,
.brand-superbetbr .guest__top {
  background: #000000;
  border-bottom: 1px solid #2A2A2A;
}

.brand-superbetbr .topbar__title {
  color: #fff;
  font-weight: 700;
}

.brand-superbetbr .hamburger {
  color: #fff;
}

.brand-superbetbr .main,
.brand-superbetbr .content {
  background: var(--bg);
  color: var(--text);
}

/* ---- Cards / cupom ---- */
.brand-superbetbr .card,
.brand-superbetbr .betslip__card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.brand-superbetbr .betslip__head {
  background: #000000;
  border-bottom: 2px solid var(--accent);
}

.brand-superbetbr .betslip__combohead,
.brand-superbetbr .betslip__sel {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

/* Etiqueta esporte no cupom — cinza (não azul) */
.brand-superbetbr .bs-sport {
  background: #262626 !important;
  color: #9CA3AF !important;
}

/* ---- Grade de jogos ---- */
.brand-superbetbr .league-bar {
  background: #000000;
  color: #fff;
  border-left: 3px solid var(--accent);
  border-radius: 8px 8px 0 0;
}

.brand-superbetbr .game-row {
  background: #111111;
  border-bottom-color: #2A2A2A;
  color: #fff;
}

.brand-superbetbr .game-row .teams .t {
  color: #fff;
}

/* Placar ao vivo: no tema escuro o --primary é preto → placar preto no fundo preto (invisível). Branco, centrado e estático. */
.brand-superbetbr .game-row .teams .t .g-score {
  color: #fff;
  text-align: center;
  min-width: 22px;
}

.brand-superbetbr .game-row .when,
.brand-superbetbr .g-meta {
  color: var(--muted);
}

.brand-superbetbr .g-more {
  background: #2A2A2A;
  color: #9CA3AF;
}

/* Odds — cinza escuro; selecionada = verde */
.brand-superbetbr .odd-cell:not(.locked):not(:disabled) {
  background: var(--odd-bg) !important;
  color: #fff !important;
  border: 1px solid #262626;
}

.brand-superbetbr .odd-cell:not(.locked):not(:disabled):hover {
  background: var(--odd-bg-hover) !important;
}

.brand-superbetbr .odd-cell.on:not(.locked):not(:disabled) {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.brand-superbetbr .odd-cell.locked,
.brand-superbetbr .odd-cell.bk-noodd {
  background: #1A1A1A !important;
  color: var(--muted-2) !important;
  border: 1px solid #2A2A2A;
}

.brand-superbetbr .odd-cell:disabled:not(.locked) {
  background: linear-gradient(100deg, #2A2A2A 30%, #262626 50%, #2A2A2A 70%) !important;
  background-size: 200% 100%;
  animation: oddshimmer 1.1s linear infinite;
}

.brand-superbetbr .feat__odd:not(.locked) {
  background: rgba(38, 48, 65, 0.85) !important;
  color: #fff;
}

.brand-superbetbr .feat__odd.on {
  background: var(--accent) !important;
}

.brand-superbetbr .feat__odd.locked {
  background: rgba(26, 33, 48, 0.6) !important;
}

.brand-superbetbr .market__row .odd-badge:not(.locked) {
  background: var(--odd-bg) !important;
  color: #fff !important;
}

.brand-superbetbr .market__row .odd-badge.on {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}

/* ---- Abas de data (Hoje / Amanhã) ---- */
.brand-superbetbr .day-tab {
  background: #1A1A1A;
  border-color: #2A2A2A;
  color: #fff;
}

.brand-superbetbr .day-tab:hover {
  background: #1A1A1A;
  border-color: var(--border);
}

.brand-superbetbr .day-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.brand-superbetbr .day-tab__d {
  opacity: 0.85;
}

/* ---- Cards de data na sidebar (Jogos do Dia) ---- */
.brand-superbetbr .diacard {
  background: #2A2A2A;
  border-color: #262626;
  color: #fff;
}

.brand-superbetbr .diacard:hover {
  background: #262626;
  border-color: var(--accent);
}

.brand-superbetbr .diacard__m {
  color: #9CA3AF;
}

.brand-superbetbr .diacard__d {
  color: #F5F5F5;
}

/* ---- Campeonatos (Futebol) ---- */
.brand-superbetbr .champ-grid {
  background: #111111;
  border-color: #2A2A2A;
}

.brand-superbetbr .champ-link {
  background: #1A1A1A;
  color: #9CA3AF;
  border: 1px solid #2A2A2A;
}

.brand-superbetbr .champ-link:hover {
  background: #1A1A1A;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.brand-superbetbr .champ-count {
  color: var(--muted);
}

.brand-superbetbr .champ-back {
  color: var(--accent);
}

.brand-superbetbr .bk-champ {
  background: #1A1A1A;
  border-color: #2A2A2A;
  color: #fff;
}

.brand-superbetbr .bk-champ:hover {
  border-color: var(--accent);
  background: #2A2A2A;
}

.brand-superbetbr .bk-champ small {
  background: #262626;
  color: #fff;
}

/* ---- Inputs / busca ---- */
.brand-superbetbr .input,
.brand-superbetbr .select,
.brand-superbetbr .games-search .input {
  background: #1A1A1A;
  border-color: #2A2A2A;
  color: #fff;
}

.brand-superbetbr .games-search {
  background: transparent;
}

/* ---- Botões de ação ---- */
.brand-superbetbr .btn--primary {
  background: var(--accent);
  border-color: var(--accent);
}

.brand-superbetbr #bs-go,
.brand-superbetbr .mega__cta {
  background: var(--accent2-600) !important;
  border-color: var(--accent2) !important;
  color: #fff !important;
}

.brand-superbetbr #bs-pin,
.brand-superbetbr .btn--success {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.brand-superbetbr #g-entrar {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: none;
}

.brand-superbetbr .tab.active {
  background: var(--accent);
}

/* ---- Textos ---- */
.brand-superbetbr .page-title,
.brand-superbetbr .section-label {
  color: var(--text);
}

.brand-superbetbr .sub,
.brand-superbetbr .page-eyebrow {
  color: var(--muted);
}

.brand-superbetbr .empty {
  color: var(--muted);
}

/* ---- Banner home — desktop 30% mais baixo, sem cortar conteúdo ---- */
@media (min-width: 901px) {
  .brand-superbetbr .home-banner {
    aspect-ratio: 2.73 / 1;
    overflow: hidden;
    background: #000000;
    line-height: 0;
  }

  .brand-superbetbr .home-banner img,
  .brand-superbetbr .home-banner .bslide,
  .brand-superbetbr .home-banner .bslide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
  }

  .brand-superbetbr .home-banner.bcar .bcar__track {
    height: 100%;
  }

  .brand-superbetbr .home-banner.bcar .bslide {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
  }
}

/* ---- Banner ---- */
.brand-superbetbr .home-banner {
  border: 1px solid #2A2A2A;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.brand-superbetbr .bcar__dots .bdot.on {
  background: var(--accent);
}

.brand-superbetbr .feat__card,
.brand-superbetbr .mega__card {
  border: 1px solid #2A2A2A;
}

.brand-superbetbr .feat {
  border: 1px solid #2A2A2A;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

.brand-superbetbr .feat__card {
  background-color: #000000 !important;
  background-size: cover !important;
  background-position: center !important;
}

.brand-superbetbr .feat__card::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.88));
}

.brand-superbetbr .feat__card + .feat__card {
  border-left-color: #2A2A2A;
}

.brand-superbetbr .feat__nav {
  background: rgba(var(--accent-rgb), 0.92);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.brand-superbetbr .feat__nav:hover {
  background: var(--accent);
}

.brand-superbetbr .mega__card {
  background: var(--surface);
}

/* ---- Loader: logo PARADA, só o anel gira ---- */
.brand-superbetbr #route-loader {
  background: rgba(0, 0, 0, 0.92);
}

.brand-superbetbr .rl-brand .rl-ring {
  background: conic-gradient(from 0deg, var(--accent), #fff, var(--accent2), #fff, var(--accent), #fff, var(--accent));
  animation: rl-spin 0.9s linear infinite;
}

.brand-superbetbr .rl-brand .rl-logo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: contain;
  animation: none;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.35));
}

.brand-superbetbr .rl-txt {
  color: #fff;
}

.brand-superbetbr .boot,
.brand-superbetbr .boot-brand {
  background: #000000;
  color: #fff;
}

/* ---- Login / Canais (estádio premium visível) ---- */
.brand-superbetbr .login {
  background-color: #000000;
  background-size: cover !important;
  background-position: center !important;
}

.brand-superbetbr .login::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.52));
}

.brand-superbetbr .login__card {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
}

.brand-superbetbr .login__card::before {
  background: linear-gradient(90deg, var(--accent), #fff, var(--danger));
}

.brand-superbetbr .login__card #login-btn {
  background: var(--danger) !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}

.brand-superbetbr .login__card #login-home {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.brand-superbetbr .auth {
  background-color: #000000;
  background-size: cover !important;
  background-position: center !important;
}

.brand-superbetbr .auth__brand-txt {
  color: #fff;
}

.brand-superbetbr .auth__card {
  background: rgba(10, 10, 10, 0.92);
  border-color: #2A2A2A;
}

.brand-superbetbr .auth__tab {
  background: #1A1A1A;
  color: #9CA3AF;
}

.brand-superbetbr .auth__tab.is-on {
  background: #fff;
  color: #000000;
}

.brand-superbetbr .auth__go {
  background: var(--accent2) !important;
}

.brand-superbetbr .auth__back {
  background: #1A1A1A;
  color: #9CA3AF;
  border-color: #2A2A2A;
}

/* Canais — ícones cinza em vez de azul */
.brand-superbetbr .auth__feats li span:first-child,
.brand-superbetbr .auth__rights-ico {
  filter: grayscale(1) brightness(1.4);
}

.brand-superbetbr .tvc__spin {
  border-top-color: var(--accent);
}

.brand-superbetbr .tvc__search:focus {
  border-color: var(--accent);
}

.brand-superbetbr .tvc__card:hover {
  border-color: var(--accent);
}

.brand-superbetbr .tvc__bet {
  background: var(--accent2);
}

/* ---- Relatórios verde/vermelho ---- */
.brand-superbetbr .card.pad .section-label[style*="color"] {
  color: var(--accent) !important;
}

.brand-superbetbr #dash-root {
  --dash-entrada: var(--accent);
  --dash-saida: var(--danger);
  --dash-barra: var(--accent);
  --dash-accent: var(--accent);
}

.brand-superbetbr .dash-eyebrow {
  color: var(--accent) !important;
}

/* ---- Live tabs ---- */
.brand-superbetbr .live-tab {
  background: #1A1A1A;
  border-color: #2A2A2A;
  color: #fff;
}

.brand-superbetbr .live-tab.active {
  background: var(--accent);
  border-color: var(--accent);
}

/* ---- Fixture / mercados ---- */
.brand-superbetbr .market__head {
  background: #111111;
  border-left: 3px solid var(--accent);
}

.brand-superbetbr .market__row {
  background: #111111;
  border-color: #2A2A2A;
  color: #fff;
}

.brand-superbetbr .fixture-banner {
  background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.72)), url('/assets/images/bg-soccer.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #111111 !important;
  border: 1px solid #2A2A2A;
  box-shadow: inset 0 0 60px rgba(var(--accent-rgb), 0.12);
}

.brand-superbetbr .fixture-banner__half {
  color: #9CA3AF;
}

.brand-superbetbr .fb-strip {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}

.brand-superbetbr .fb-strip__h {
  background: #111111;
}

.brand-superbetbr .fb-strip__h span {
  color: #9CA3AF;
}

/* ---- Cupom: Mega Impulso / combo escuro ---- */
.brand-superbetbr .betslip__combo {
  background: #1A1A1A !important;
  border-color: #2A2A2A;
  color: #fff;
}

.brand-superbetbr .betslip__combo .betslip__sel {
  color: #fff;
  border-top-color: #2A2A2A;
}

.brand-superbetbr .betslip__combohead .cb-tag {
  color: #ffb347;
}

.brand-superbetbr .betslip__row {
  color: #9CA3AF;
}

.brand-superbetbr .betslip__row b {
  color: #fff;
}

.brand-superbetbr .betslip__body {
  background: #111111;
}

/* ---- Modais e dropdown usuário ---- */
.brand-superbetbr .modal {
  background: #111111;
  color: #F5F5F5;
  border: 1px solid #2A2A2A;
}

.brand-superbetbr .modal__head {
  border-bottom-color: #2A2A2A;
}

.brand-superbetbr .modal__head h3 {
  color: #fff;
}

.brand-superbetbr .modal__foot {
  border-top-color: #2A2A2A;
  background: #111111;
}

.brand-superbetbr .modal__head .x {
  color: #9CA3AF;
}

.brand-superbetbr .usermenu__pop {
  background: #1A1A1A;
  color: #fff;
  border-color: #2A2A2A;
}

.brand-superbetbr .usermenu__pop a,
.brand-superbetbr .usermenu__pop button {
  color: #F5F5F5;
}

.brand-superbetbr .usermenu__pop a:hover,
.brand-superbetbr .usermenu__pop button:hover {
  background: #1A1A1A;
  color: #fff;
}

/* ---- Admin: tabelas legíveis (sem branco estourado) ---- */
.brand-superbetbr table.tbl th {
  background: #1A1A1A !important;
  color: #9CA3AF !important;
  border-bottom-color: #2A2A2A !important;
}

.brand-superbetbr table.tbl td {
  color: #F5F5F5 !important;
  border-color: #2A2A2A !important;
  background: #111111;
}

.brand-superbetbr table.tbl tbody tr:hover td {
  background: #111111 !important;
}

.brand-superbetbr .tablewrap {
  background: #111111;
  border-color: #2A2A2A;
}

.brand-superbetbr .shell.theme-cyber .card,
.brand-superbetbr .shell.theme-cyber .tablewrap {
  background: #111111;
  border-color: #2A2A2A;
  color: #F5F5F5;
}

.brand-superbetbr .shell.theme-cyber .input,
.brand-superbetbr .shell.theme-cyber .select {
  background: #1A1A1A;
  color: #fff;
  border-color: #2A2A2A;
}

.brand-superbetbr .shell.theme-cyber .page-title {
  color: #fff;
}

.brand-superbetbr .shell.theme-cyber .page-eyebrow,
.brand-superbetbr .shell.theme-cyber .page-sub,
.brand-superbetbr .shell.theme-cyber .section-label {
  color: #9CA3AF;
}

/* Admin cyber: verde/vermelho nos relatórios e dashboard */
.brand-superbetbr .shell.theme-cyber #dash-root {
  --dash-bg: #000000;
  --dash-card-bg: #111111;
  --dash-text: #F5F5F5;
  --dash-heading: #fff;
  --dash-muted: #9CA3AF;
  --dash-muted-strong: #9CA3AF;
  --dash-border: #2A2A2A;
  --dash-primary: var(--accent);
  --dash-accent: var(--accent);
  --dash-success: var(--accent);
  --dash-danger: var(--danger);
  --dash-entrada: var(--accent);
  --dash-saida: var(--danger);
  --dash-barra: var(--accent);
  --dash-pos: var(--accent);
  --dash-neg: var(--danger);
}

.brand-superbetbr .shell.theme-cyber .navlink.active {
  background: rgba(var(--accent-rgb), 0.18);
  box-shadow: inset 2px 0 0 var(--accent);
}

.brand-superbetbr .shell.theme-cyber .navlink.active .ico {
  color: var(--accent);
}

.brand-superbetbr .shell.theme-cyber .theme-toggle {
  border-color: #2A2A2A;
  background: rgba(var(--accent-rgb), 0.15);
}

.brand-superbetbr .pixmodal__head {
  background: linear-gradient(120deg, #000000, #1A1A1A);
}

.brand-superbetbr .toast {
  background: #1A1A1A;
  color: #fff;
  border: 1px solid #2A2A2A;
}

/* ---- Admin ACM10: elimina azul do theme-cyber (preto + verde) ---- */
.brand-superbetbr .shell.theme-cyber {
  --primary: var(--accent);
  --primary-600: var(--accent);
  --primary-700: #A8891C;
  --accent: #D6AF24;
  --bg: #000000;
  --surface: #111111;
  --border: #2A2A2A;
  --text: #F5F5F5;
  --muted: #9CA3AF;
  --muted-2: #7F868F;
  --info: var(--accent);
  --info-bg: rgba(var(--accent-rgb), 0.13);
  background: #000000;
}

.brand-superbetbr .shell.theme-cyber .topbar {
  background: #000000;
  border-bottom-color: #2A2A2A;
}

.brand-superbetbr .shell.theme-cyber .sidebar {
  background: #000000;
  border-right-color: #2A2A2A;
}

.brand-superbetbr .shell.theme-cyber .btn {
  background: #1A1A1A;
  color: #9CA3AF;
}

.brand-superbetbr .shell.theme-cyber .btn--primary {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
}

.brand-superbetbr .shell.theme-cyber .btn--primary:hover {
  filter: brightness(1.08);
}

.brand-superbetbr .shell.theme-cyber .btn--ghost {
  color: #9CA3AF;
  border-color: #2A2A2A;
}

.brand-superbetbr .shell.theme-cyber .btn--danger {
  background: var(--danger);
}

.brand-superbetbr .shell.theme-cyber .btn--success {
  background: var(--accent);
}

.brand-superbetbr .shell.theme-cyber .input:focus,
.brand-superbetbr .shell.theme-cyber .select:focus,
.brand-superbetbr .shell.theme-cyber textarea.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22);
}

.brand-superbetbr .shell.theme-cyber .field label {
  color: #9CA3AF;
}

.brand-superbetbr .shell.theme-cyber table.tbl th {
  background: #1A1A1A !important;
  color: #9CA3AF !important;
}

.brand-superbetbr .shell.theme-cyber table.tbl td {
  color: #F5F5F5 !important;
  background: #111111;
}

.brand-superbetbr .shell.theme-cyber .pager button {
  background: #1A1A1A;
  color: #fff;
}

.brand-superbetbr .shell.theme-cyber .kpi-card,
.brand-superbetbr .shell.theme-cyber .lm-sport-row,
.brand-superbetbr .shell.theme-cyber .lm-market-list,
.brand-superbetbr .shell.theme-cyber .lm-market-row {
  background: #111111;
  border-color: #2A2A2A;
  color: #F5F5F5;
}

.brand-superbetbr .shell.theme-cyber .lm-market-row:nth-child(even) {
  background: #111111;
}

.brand-superbetbr .shell.theme-cyber .lm-sport-head {
  background: #1A1A1A;
  color: #fff;
  border-color: #2A2A2A;
}

.brand-superbetbr .shell.theme-cyber .toolbar {
  background: #111111;
  border-color: #2A2A2A;
}

/* Dashboard escuro ACM10 (sem azul) */
.brand-superbetbr #dash-root,
.brand-superbetbr #dash-root.dash-dark {
  --dash-bg: #000000;
  --dash-card-bg: #111111;
  --dash-border: #2A2A2A;
  --dash-text: #F5F5F5;
  --dash-muted: #9CA3AF;
  --dash-muted-strong: #9CA3AF;
  --dash-heading: #fff;
  --dash-accent: var(--accent);
  --dash-accent2: var(--danger);
  --dash-primary: var(--accent);
  --dash-kpi-accent: var(--accent);
  --dash-entrada: var(--accent);
  --dash-saida: var(--danger);
  --dash-barra: var(--accent);
  --dash-pos: var(--accent);
  --dash-neg: var(--danger);
  background: #000000;
  color: #F5F5F5;
}

.brand-superbetbr #dash-root .dash-kpi2 {
  background: #111111;
  border-color: #2A2A2A;
  color: #fff;
}

.brand-superbetbr #dash-root .dash-kpi2-label,
.brand-superbetbr #dash-root .dash-kpi2-sublabel {
  color: #9CA3AF;
}

.brand-superbetbr #dash-root .dash-kpi2-value {
  color: #fff;
}

.brand-superbetbr #dash-root .dash-chart-card,
.brand-superbetbr #dash-root .dash-card {
  background: #111111;
  border-color: #2A2A2A;
}

/* Login / canais — overlay leve para o estádio aparecer */
.brand-superbetbr .auth::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
}

.brand-superbetbr .auth__card::before {
  background: linear-gradient(90deg, var(--accent), var(--muted-2), var(--danger));
}

/* Modal Pix legível no escuro */
.brand-superbetbr .pixmodal {
  color: #F5F5F5;
}

.brand-superbetbr .pixmodal__steps > div {
  color: #9CA3AF;
}

.brand-superbetbr .pixmodal__steps .pixstep-n {
  background: var(--accent);
}

.brand-superbetbr .pixmodal__code {
  background: #1A1A1A;
  border-color: #2A2A2A;
}

.brand-superbetbr .pixmodal__code code {
  color: #9CA3AF;
}

.brand-superbetbr .pixmodal__note {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--success);
}

.brand-superbetbr .pixmodal__warn {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--danger);
}

.brand-superbetbr .pixmodal__close {
  background: #1A1A1A;
  color: #fff;
  border-color: #2A2A2A;
}

.brand-superbetbr .modal .pixmodal__qr img {
  background: #fff;
}

/* Caixas de pré-visualização no admin (logomarca, banner, OG) */
.brand-superbetbr .brand-preview-box,
.brand-superbetbr.admin-cyber .brand-preview-box {
  background: #111111 !important;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-superbetbr input[type="checkbox"] {
  accent-color: var(--accent);
}

/* Mercados — hover escuro (não branco) */
.brand-superbetbr .market__row:hover {
  background: #1A1A1A !important;
}

/* Criar Aposta: mercado bloqueado — cinza escuro (não branco) */
.brand-superbetbr #fx-markets.combo-on .market__row--locked {
  opacity: 1 !important;
  pointer-events: none;
  cursor: not-allowed;
  background: #111111 !important;
  border-top-color: #2A2A2A !important;
}

.brand-superbetbr #fx-markets.combo-on .market__row--locked > span:first-child {
  color: #262626 !important;
}

.brand-superbetbr #fx-markets.combo-on .market__row--locked .odd-badge {
  background: #1A1A1A !important;
  color: var(--muted-2) !important;
  border: 1px solid #2A2A2A;
}

/* Odd reduzida — visível sobre fundo escuro */
.brand-superbetbr #fx-markets.combo-on .market__row--reduce {
  opacity: 1 !important;
  background: #111111 !important;
}

.brand-superbetbr #fx-markets.combo-on .market__row--reduce .reduce-label {
  color: #ffb347 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.brand-superbetbr .reduce-label {
  color: #ffb347;
}

/* Criar Aposta ON — glass iOS (translúcido + blur) */
.brand-superbetbr #fx-markets.combo-on {
  background: rgba(18, 18, 18, 0.42);
  backdrop-filter: blur(28px) saturate(1.75);
  -webkit-backdrop-filter: blur(28px) saturate(1.75);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 10px 10px 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.brand-superbetbr #fx-markets.combo-on .market {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
}

.brand-superbetbr #fx-markets.combo-on .market__head {
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.brand-superbetbr #fx-markets.combo-on .market__row {
  background: rgba(255, 255, 255, 0.02);
  border-top-color: rgba(255, 255, 255, 0.06);
}

.brand-superbetbr #fx-markets.combo-on .market__row:hover:not(.market__row--locked) {
  background: rgba(255, 255, 255, 0.06) !important;
}

.brand-superbetbr .criar-toggle {
  background: rgba(26, 33, 48, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-superbetbr .criar-toggle input:checked + .criar-slider {
  background: var(--accent);
}

/* ---- Painel ao vivo (fixture API-Football) — verde/vermelho, sem roxo ---- */
.brand-superbetbr .livepanel {
  background: #111111;
  border-color: #2A2A2A;
  color: #F5F5F5;
}

.brand-superbetbr .livepanel__head {
  background: linear-gradient(120deg, #1A1A1A, #1A1A1A);
  border-bottom: 2px solid var(--accent);
}

.brand-superbetbr .livepanel__tabs {
  border-bottom-color: #2A2A2A;
  background: #111111;
}

.brand-superbetbr .lp-tab {
  color: #9CA3AF;
}

.brand-superbetbr .lp-tab:hover {
  color: #9CA3AF;
}

.brand-superbetbr .lp-tab.active {
  color: #fff;
  border-bottom-color: var(--accent);
}

.brand-superbetbr .lp-empty {
  color: #9CA3AF;
}

.brand-superbetbr .lp-stat__row span {
  color: #9CA3AF;
}

.brand-superbetbr .lp-stat__bar {
  background: #1A1A1A;
}

.brand-superbetbr .lp-stat__bar i:first-child {
  background: linear-gradient(90deg, var(--accent), var(--accent));
}

.brand-superbetbr .lp-stat__bar i:last-child {
  background: linear-gradient(90deg, var(--danger), var(--danger));
}

.brand-superbetbr .lp-ev {
  background: #1A1A1A;
}

.brand-superbetbr .lp-ev__min {
  background: #2A2A2A;
  color: #9CA3AF;
}

.brand-superbetbr .lp-ev__txt small {
  color: #9CA3AF;
}

.brand-superbetbr .lp-field {
  background: repeating-linear-gradient(90deg, var(--accent) 0 10%, var(--accent) 10% 20%);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
}

.brand-superbetbr .lp-player--away .lp-player__n {
  background: var(--danger);
  color: #fff;
}

.brand-superbetbr .lp-form {
  color: #9CA3AF;
}

/* ---- Partida ao vivo (liveMatch.js) — tema escuro + campo visível ---- */
.brand-superbetbr .lm-page {
  --lm-pri: var(--accent);
  --lm-navy: #111111;
  --lm-away: var(--danger);
  --lm-home-bar: var(--accent);
  --lm-text: #F5F5F5;
  --lm-muted: #9CA3AF;
  --lm-dim: #7F868F;
  --lm-hair: rgba(255, 255, 255, 0.06);
  --lm-hair-lt: rgba(255, 255, 255, 0.12);
  --lm-surf: #111111;
  color: #F5F5F5;
}

.brand-superbetbr .lm-page .lm-mast {
  background: #111111;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.brand-superbetbr .lm-page .lm-mast__bg {
  opacity: 0.7;
  filter: blur(0.8px) saturate(1.15);
}

.brand-superbetbr .lm-page .lm-mastov {
  background: linear-gradient(180deg, rgba(10, 35, 18, 0.4) 0%, rgba(0, 0, 0, 0.78) 100%);
}

.brand-superbetbr .lm-page .lm-tabsbar {
  border-bottom-color: #2A2A2A;
}

.brand-superbetbr .lm-page .lm-tb.on {
  border-bottom-color: var(--accent);
}

.brand-superbetbr .lm-page .lm-panel {
  background: #111111;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.brand-superbetbr .lm-page .lm-strow {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.brand-superbetbr .lm-page .lm-sfA {
  background: var(--accent);
  opacity: 0.55;
}

.brand-superbetbr .lm-page .lm-sfB {
  background: var(--danger);
  opacity: 0.55;
}

.brand-superbetbr .lm-page .lm-segA {
  background: var(--accent);
}

.brand-superbetbr .lm-page .lm-pitch {
  background: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.25);
}

.brand-superbetbr .lm-page .lm-pzl {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.25), transparent);
}

.brand-superbetbr .lm-page .lm-pzr {
  background: linear-gradient(270deg, rgba(239, 68, 68, 0.25), transparent);
}

.brand-superbetbr .lm-page .lm-field-pulse {
  background: rgba(var(--accent-rgb), 0.1);
}

.brand-superbetbr .lm-page .market__head {
  background: #1A1A1A !important;
  border-left: 3px solid var(--accent);
}

.brand-superbetbr .lm-page .market__row {
  color: #F5F5F5;
  border-top-color: rgba(255, 255, 255, 0.06);
}

.brand-superbetbr .lm-page .market__row:hover {
  background: #1A1A1A !important;
}

.brand-superbetbr .lm-page .odd-badge {
  background: #2A2A2A !important;
}

.brand-superbetbr .lm-page .odd-badge.on {
  background: var(--accent) !important;
}

.brand-superbetbr .lm-page .lm-odds-filter {
  background: #1A1A1A;
  border-color: #2A2A2A;
  color: #fff;
}

.brand-superbetbr .lm-page .fx-iconbtn {
  background: #1A1A1A;
  border-color: #2A2A2A;
  color: #fff;
}

.brand-superbetbr .lm-page .fx-iconbtn:hover {
  background: #1A1A1A;
  border-color: var(--accent);
}

.brand-superbetbr .lm-page .lm-fic,
.brand-superbetbr .lm-page .lm-nico {
  background: #1A1A1A;
}

.brand-superbetbr .lm-page .lm-taxis {
  background: rgba(255, 255, 255, 0.08);
}

/* ---- Cupom mobile (bottom sheet) — tema escuro ---- */
@media (max-width: 1100px) {
  .brand-superbetbr .betslip-col {
    background: #111111 !important;
    border-top: 1px solid #2A2A2A !important;
    color: #F5F5F5;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.65) !important;
  }

  .brand-superbetbr .betslip-col .betslip__card {
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .brand-superbetbr .betslip-col .betslip__body {
    background: transparent;
  }

  .brand-superbetbr .betslip-col .field label {
    color: #9CA3AF !important;
  }

  .brand-superbetbr .betslip-col .input,
  .brand-superbetbr .betslip-col .input-icon .input,
  .brand-superbetbr .betslip-col select.input {
    background: #1A1A1A !important;
    border-color: #2A2A2A !important;
    color: #fff !important;
  }

  .brand-superbetbr .betslip-col .input-icon span {
    color: #9CA3AF;
  }

  .brand-superbetbr .betslip-col .checkrow,
  .brand-superbetbr .betslip-col .pix-check {
    color: #9CA3AF !important;
  }

  .brand-superbetbr .betslip-col #bs-started-banner {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: var(--danger) !important;
  }

  .brand-superbetbr .cupom-fab {
    background: var(--accent) !important;
    color: var(--accent-ink);
  }
}

.brand-superbetbr .cupom-fab {
  background: var(--accent) !important;
  color: var(--accent-ink);
}

.brand-superbetbr .to-top {
  background: linear-gradient(160deg, var(--accent), var(--accent)) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

/* ---- Loteria (Quininha / Seninha) ---- */
.brand-superbetbr .lot {
  max-width: 860px;
  margin: 0 auto;
  padding: 4px 8px 32px;
}

.brand-superbetbr .lot__head {
  margin-bottom: 18px;
}

.brand-superbetbr .lot__back {
  background: #1A1A1A;
  border-color: #2A2A2A;
  color: #F5F5F5;
}

.brand-superbetbr .lot__back:hover {
  border-color: var(--accent);
  color: #fff;
}

.brand-superbetbr .lot__title {
  color: #fff;
}

.brand-superbetbr .lot__sub {
  color: #9CA3AF;
}

.brand-superbetbr .lot-step {
  color: var(--accent);
}

.brand-superbetbr .lot-card {
  background: #111111;
  border-color: #2A2A2A;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.brand-superbetbr .lot-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.brand-superbetbr .lot-card__name {
  color: #fff;
}

.brand-superbetbr .lot-card__desc,
.brand-superbetbr .lot-card__foot {
  color: #9CA3AF;
}

.brand-superbetbr .lot-card__foot b {
  color: #F5F5F5;
}

.brand-superbetbr .lot-card__go {
  color: var(--accent);
}

.brand-superbetbr .lot-card__badge {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--success);
}

.brand-superbetbr .lot-qtd {
  background: #1A1A1A;
  border-color: #2A2A2A;
  color: #F5F5F5;
}

.brand-superbetbr .lot-qtd:hover {
  border-color: var(--accent);
}

.brand-superbetbr .lot-qtd.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.brand-superbetbr .lot-prcol {
  background: #1A1A1A;
  border-color: #2A2A2A;
}

.brand-superbetbr .lot-prhead {
  color: #9CA3AF;
}

.brand-superbetbr .lot-pr {
  color: #9CA3AF;
}

.brand-superbetbr .lot-pr.is-on {
  color: #F5F5F5;
}

.brand-superbetbr .lot-pr b {
  color: var(--success);
}

.brand-superbetbr .lot-tipo {
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
}

.brand-superbetbr .lot-tipo__b {
  color: #9CA3AF;
}

.brand-superbetbr .lot-tipo__b.is-on {
  background: var(--accent);
  color: var(--accent-ink);
}

.brand-superbetbr .lot-count span {
  color: var(--accent);
}

.brand-superbetbr .lot-num {
  background: #111111;
  border-color: #2A2A2A;
  color: #F5F5F5;
}

.brand-superbetbr .lot-num:hover:not(:disabled) {
  border-color: var(--accent);
}

.brand-superbetbr .lot-num.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.brand-superbetbr .lot-resumo {
  background: #1A1A1A;
  border-color: #2A2A2A;
}

.brand-superbetbr .lot-resumo span {
  color: #9CA3AF;
}

.brand-superbetbr .lot-resumo b {
  color: #F5F5F5;
}

.brand-superbetbr .lot-ticket-nums span {
  background: var(--accent);
  color: var(--accent-ink);
}

.brand-superbetbr .lot .card.pad .field label {
  color: #9CA3AF;
}

.brand-superbetbr .lot .input,
.brand-superbetbr .lot .select {
  background: #111111;
  border-color: #2A2A2A;
  color: #fff;
}

.brand-superbetbr .lot .input-icon span {
  color: #9CA3AF;
}

.brand-superbetbr .lot #lot-pin {
  background: var(--accent) !important;
  border: none;
}

.brand-superbetbr .lot-empty {
  color: #9CA3AF;
}

.brand-superbetbr .lot .card.pad div[style*="letter-spacing:.12em"] {
  color: #fff !important;
}

/* ---- Acompanhar aposta (#/bilhete) ---- */
.brand-superbetbr .tk-head {
  background: linear-gradient(160deg, #000000 0%, #111111 45%, #1A1A1A 100%);
  border: 1px solid #2A2A2A;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.brand-superbetbr .tk-head__row {
  color: #9CA3AF;
}

.brand-superbetbr .tk-summary span {
  color: #9CA3AF;
}

.brand-superbetbr .tk-summary b {
  color: #fff;
}

.brand-superbetbr .tk-status {
  background: #ffd84d;
  color: #1a1400;
}

.brand-superbetbr .tk-game {
  background: #111111;
  border-color: #2A2A2A;
}

.brand-superbetbr .tk-game__top {
  background: #1A1A1A;
  color: #9CA3AF;
  border-bottom-color: #2A2A2A;
}

.brand-superbetbr .tk-game__teams {
  background: #111111;
}

.brand-superbetbr .tk-team b {
  color: #F5F5F5;
  font-weight: 700;
}

.brand-superbetbr .tk-badge {
  background: linear-gradient(160deg, var(--accent), #1A1A1A);
  color: #fff;
}

.brand-superbetbr .tk-score div {
  color: #fff;
}

.brand-superbetbr .tk-pick {
  color: #9CA3AF;
}

.brand-superbetbr .tk-game__pick {
  border-top-color: #2A2A2A;
  background: #111111;
}

.brand-superbetbr .tk-game__pick b {
  color: #fff;
}

.brand-superbetbr .tk-game__pick small[data-sit] {
  color: #9CA3AF;
}

.brand-superbetbr .tk-odd {
  color: var(--accent);
}

.brand-superbetbr .tk-combo-odd {
  color: var(--accent);
}

.brand-superbetbr .tk-combo-group .tk-combo-picks .tk-cpick {
  border-left-color: var(--accent);
}

.brand-superbetbr .tk-combo-group .tk-combo-picks .tk-cpick:first-child {
  border-top-color: #2A2A2A;
}

.brand-superbetbr .tk-badge--img {
  background: #1A1A1A;
  border-color: #2A2A2A;
}

/* ==== CASSINO (inicio) ==== */
/* ---------------------------------------------------------------------------
   Cassino (FiversCan) — cliente (.cas-*) e painel do admin (.casadm-*).

   Este bloco é anexado no FIM de app/brand-acm10.css. Três decisões que valem
   comentário, porque errar qualquer uma quebra a tela em silêncio:

   1) Os tokens --cas-* são declarados em .cas-wrap/.casadm-root, NÃO em :root.
      No ACM10 as variáveis do tema (--bg/--surface/--accent/...) moram em
      .brand-superbetbr e nas variações (.shell.theme-cyber) — nunca em :root. Se os
      tokens fossem declarados em :root, var(--accent) cairia sempre no fallback
      e o cassino ficaria verde mesmo com o tema trocado (o dono pediu o
      contrário: trocou o tema, troca o cassino junto).

   2) Nada de `body{}` nem de `*{}` solto: este arquivo vale para o site TODO.
      box-sizing e tipografia ficam escopados nos dois contêineres do cassino.

   3) NUNCA color:var(--primary) aqui. No ACM10 --primary é #000000 e o fundo
      também é preto — texto invisível. Cor de texto é --cas-text/--cas-muted e
      destaque é --cas-accent, sempre com fallback.

   Tipografia: as declarações originais usavam a forma `font:600 13px/1 inherit`.
   Isso é CSS inválido (palavra-chave global dentro do atalho) e o navegador
   DESCARTA a declaração inteira — medido no Chrome: saía 15px/400 em vez de
   13px/600, e em <button>/<input>, que não herdam fonte, saía a fonte do
   agente. Aqui viraram longhands, que é o que o desenho sempre quis dizer.
   --------------------------------------------------------------------------- */

.cas-wrap,
.casadm-root {
  --cas-bg:        var(--bg, #000000);
  --cas-surface:   var(--surface, #111111);
  --cas-surface-2: var(--surface-2, #111111);
  --cas-border:    var(--border, #1A1A1A);
  --cas-text:      var(--text, #F5F5F5);
  --cas-muted:     var(--muted, #9CA3AF);
  --cas-accent:    var(--accent, var(--accent));
  --cas-danger:    var(--accent2, var(--danger));
  --cas-ease: cubic-bezier(.16,1,.3,1);
  --cas-fast: 180ms; --cas-mid: 280ms;
  --cas-r: 14px; --cas-r-sm: 10px;
  /* sombra em 3 camadas: contato + ambiente + profundidade */
  --cas-shadow: 0 1px 1px rgba(0,0,0,.55), 0 4px 10px -4px rgba(0,0,0,.6), 0 16px 34px -14px rgba(0,0,0,.85);
  --cas-glow: 0 0 0 1px color-mix(in srgb, var(--cas-accent) 50%, transparent),
              0 10px 34px -8px color-mix(in srgb, var(--cas-accent) 42%, transparent);
}
.cas-wrap, .cas-wrap *, .casadm-root, .casadm-root *{box-sizing:border-box}

/* ===========================================================================
   CLIENTE — #/casino
   =========================================================================== */
.cas-wrap{position:relative;padding:18px 16px 72px;max-width:1560px;margin:0 auto;
  color:var(--cas-text);
  font-family:Montserrat,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.cas-wrap::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(780px 400px at 10% -8%, color-mix(in srgb,var(--cas-accent) 14%,transparent), transparent 68%),
    radial-gradient(600px 340px at 94% 2%, color-mix(in srgb,var(--cas-accent) 8%,transparent), transparent 70%)}
.cas-wrap > *{position:relative;z-index:1}

/* ---------- barra sticky em vidro ---------- */
.cas-bar{position:sticky;top:0;z-index:30;margin:-18px -16px 22px;padding:14px 16px 12px;
  background:color-mix(in srgb, var(--cas-bg) 78%, transparent);
  backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid color-mix(in srgb,var(--cas-border) 80%,transparent)}
.cas-search{position:relative;display:block}
.cas-search > svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--cas-muted);pointer-events:none;transition:color var(--cas-fast)}
.cas-search input{width:100%;height:48px;padding:0 46px;color:var(--cas-text);
  background:var(--cas-surface-2);border:1px solid var(--cas-border);border-radius:999px;
  font-family:inherit;font-size:14px;font-weight:500;line-height:1;outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color var(--cas-fast) var(--cas-ease),box-shadow var(--cas-fast) var(--cas-ease)}
.cas-search input::placeholder{color:var(--cas-muted);font-weight:400}
.cas-search input:focus{border-color:color-mix(in srgb,var(--cas-accent) 62%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 4px color-mix(in srgb,var(--cas-accent) 15%,transparent)}
.cas-search input:focus ~ svg,.cas-search:focus-within > svg{color:var(--cas-accent)}

.cas-chips{display:flex;gap:8px;margin-top:12px;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.cas-chips::-webkit-scrollbar{display:none}
.cas-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;
  border:1px solid var(--cas-border);border-radius:999px;background:var(--cas-surface);
  color:var(--cas-muted);font-family:inherit;font-size:13px;font-weight:600;line-height:1;
  cursor:pointer;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);scroll-snap-align:start;
  transition:color var(--cas-fast) var(--cas-ease),border-color var(--cas-fast) var(--cas-ease),
             transform var(--cas-fast) var(--cas-ease)}
.cas-chip svg{width:15px;height:15px;flex:0 0 auto}
.cas-chip:hover{color:var(--cas-text);border-color:color-mix(in srgb,var(--cas-accent) 42%,transparent);transform:translateY(-1px)}
.cas-chip.is-on{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--cas-accent),color-mix(in srgb,var(--cas-accent) 68%,#000000));
  box-shadow:0 6px 18px -6px color-mix(in srgb,var(--cas-accent) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
.cas-chip__n{padding:2px 7px;border-radius:999px;font-size:11px;font-weight:700;
  background:color-mix(in srgb,var(--cas-text) 11%,transparent)}
.cas-chip.is-on .cas-chip__n{background:rgba(0,0,0,.25)}

/* ---------- cabeçalho de faixa ---------- */
.cas-row{margin:30px 0 0}
.cas-row__head{display:flex;align-items:center;gap:11px;margin-bottom:13px}
/* barrinha de acento com glow: âncora visual que dá o ar premium */
.cas-row__head::before{content:'';width:3px;height:20px;border-radius:3px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--cas-accent),color-mix(in srgb,var(--cas-accent) 35%,transparent));
  box-shadow:0 0 12px color-mix(in srgb,var(--cas-accent) 65%,transparent)}
.cas-row__title{display:flex;align-items:center;gap:9px;margin:0;
  font-family:inherit;font-size:18px;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.cas-row__title svg{width:18px;height:18px;color:var(--cas-accent);flex:0 0 auto}
.cas-row__n{color:var(--cas-muted);font-family:inherit;font-size:12px;font-weight:600;line-height:1;
  padding:3px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--cas-text) 7%,transparent)}
.cas-row__spacer{flex:1}
.cas-row__all{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;
  color:var(--cas-accent);cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;line-height:1;
  padding:8px 6px;border-radius:8px;
  transition:gap var(--cas-fast) var(--cas-ease),opacity var(--cas-fast)}
.cas-row__all svg{width:14px;height:14px}
.cas-row__all:hover{gap:8px;opacity:.82}
.cas-row__nav{display:flex;gap:6px}
.cas-row__nav button{display:grid;place-items:center;width:34px;height:34px;cursor:pointer;
  border:1px solid var(--cas-border);border-radius:50%;background:var(--cas-surface);color:var(--cas-text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:all var(--cas-fast) var(--cas-ease)}
.cas-row__nav button:hover:not(:disabled){border-color:color-mix(in srgb,var(--cas-accent) 55%,transparent);
  color:var(--cas-accent);transform:scale(1.08)}
.cas-row__nav button:active:not(:disabled){transform:scale(.96)}
.cas-row__nav button:disabled{opacity:.3;cursor:default}
.cas-row__nav svg{width:16px;height:16px}

/* ---------- trilho (carrossel) e grade (busca / "ver todos") ----------
   O tamanho do card mora AQUI, não no JS: .cas-track e .cas-grid definem
   largura, gap e os pontos de quebra. O JS só troca a classe do contêiner —
   faixa vira grade sem passar style inline. */
.cas-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(158px,1fr);gap:13px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 12px;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000000 16px,#000000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000000 16px,#000000 calc(100% - 26px),transparent)}
.cas-track::-webkit-scrollbar{display:none}
.cas-track > *{scroll-snap-align:start}
/* a grade não rola, não recorta e não gruda: precisa desfazer tudo isso
   explicitamente porque o mesmo card vive nos dois contêineres */
.cas-grid{display:grid;gap:13px;padding:4px 2px 12px;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  overflow:visible;scroll-snap-type:none;
  -webkit-mask-image:none;mask-image:none}

/* ---------- card ---------- */
.cas-card{position:relative;display:block;width:100%;padding:0;cursor:pointer;text-align:left;
  border:0;border-radius:var(--cas-r);background:var(--cas-surface);overflow:hidden;
  box-shadow:var(--cas-shadow);color:inherit;font:inherit;isolation:isolate;
  transition:transform var(--cas-mid) var(--cas-ease),box-shadow var(--cas-mid) var(--cas-ease)}
/* borda interna 1px: o "fio de luz" que separa o card do fundo sem parecer contorno */
.cas-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:box-shadow var(--cas-mid) var(--cas-ease)}
.cas-card:hover{transform:translateY(-5px);box-shadow:var(--cas-glow),var(--cas-shadow)}
.cas-card:hover::after{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cas-accent) 55%,transparent)}
.cas-card:focus-visible{outline:none;transform:translateY(-5px);box-shadow:var(--cas-glow),var(--cas-shadow)}
.cas-card:active{transform:translateY(-2px) scale(.985)}

.cas-card__thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--cas-surface-2)}
.cas-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 620ms var(--cas-ease)}
.cas-card:hover .cas-card__img{transform:scale(1.08)}
/* varredura de luz no hover — assinatura premium (a referência usa o mesmo truque) */
.cas-card__thumb::before{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;z-index:3;
  pointer-events:none;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.cas-card:hover .cas-card__thumb::before{animation:casShine .85s var(--cas-ease)}
@keyframes casShine{to{left:130%}}
/* scrim: contraste garantido do nome sobre qualquer arte */
.cas-card__thumb::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.46) 0%,transparent 32%,transparent 44%,rgba(0,0,0,.9) 100%)}
.cas-card__ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--cas-muted);z-index:1}
.cas-card__ph svg{width:34px;height:34px;opacity:.45}

/* ---------- placeholder do thumb ----------
   O CDN do provedor cai (e adblock/DNS bloqueiam o domínio dele com frequência):
   no onerror da <img> o JS esconde a imagem e marca --ph no .cas-card__thumb.
   A inicial do jogo vem do data-i, então não há mais requisição nenhuma.
   Reaproveita o ::before da varredura de luz — por isso precisa desfazer o skew,
   a animação e a largura de 50% que aquele ::before carrega. */
.cas-card__thumb--ph::before{content:attr(data-i);position:absolute;inset:0;left:0;width:100%;
  display:grid;place-items:center;z-index:1;
  font-family:inherit;font-size:34px;font-weight:800;line-height:1;
  color:color-mix(in srgb,var(--cas-accent) 55%,transparent);
  background:radial-gradient(120% 90% at 50% 0%,var(--cas-surface-2),var(--cas-surface));
  transform:none;animation:none}

.cas-card__meta{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:9px 11px 11px;
  transition:opacity var(--cas-fast) var(--cas-ease)}
.cas-card__name{margin:0;font-size:12.5px;font-weight:600;line-height:1.28;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 4px rgba(0,0,0,.9)}
.cas-card__prov{margin:3px 0 0;font-size:9.5px;font-weight:600;line-height:1;color:rgba(255,255,255,.58);
  text-transform:uppercase;letter-spacing:.06em}

/* selos */
.cas-card__live{position:absolute;top:8px;right:8px;z-index:4;display:inline-flex;align-items:center;
  gap:5px;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:700;line-height:1;color:#fff;
  background:rgba(0,0,0,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.cas-card__live i{width:6px;height:6px;border-radius:50%;background:var(--cas-accent);animation:casPulse 2.4s infinite}
@keyframes casPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cas-accent) 65%,transparent)}
  70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.cas-card__tag{position:absolute;top:8px;left:8px;z-index:4;padding:4px 8px;border-radius:7px;
  font-size:9.5px;font-weight:800;line-height:1;letter-spacing:.07em;color:#fff;text-transform:uppercase;
  background:linear-gradient(135deg,var(--cas-accent),color-mix(in srgb,var(--cas-accent) 62%,#000000));
  box-shadow:0 4px 12px -4px color-mix(in srgb,var(--cas-accent) 75%,transparent)}
.cas-card__tag--hot{background:linear-gradient(135deg,#f0631f,var(--danger));
  box-shadow:0 4px 12px -4px rgba(240,99,31,.75)}

.cas-card__fav{position:absolute;bottom:9px;right:9px;z-index:6;display:grid;place-items:center;
  width:28px;height:28px;border:0;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(0,0,0,.46);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  opacity:0;transform:scale(.84);transition:all var(--cas-fast) var(--cas-ease)}
.cas-card:hover .cas-card__fav,.cas-card__fav.is-on{opacity:1;transform:scale(1)}
.cas-card__fav:hover{background:rgba(0,0,0,.7)}
.cas-card__fav svg{width:14px;height:14px}
.cas-card__fav.is-on{color:var(--cas-danger)}
.cas-card__fav.is-on svg{fill:currentColor}

/* CTA que sobe no hover */
.cas-card__play{position:absolute;left:11px;right:11px;bottom:11px;z-index:5;
  display:flex;align-items:center;justify-content:center;gap:6px;height:34px;
  border-radius:var(--cas-r-sm);font-size:12px;font-weight:800;line-height:1;letter-spacing:.04em;color:#fff;
  background:linear-gradient(135deg,var(--cas-accent),color-mix(in srgb,var(--cas-accent) 66%,#000000));
  box-shadow:0 8px 20px -7px color-mix(in srgb,var(--cas-accent) 85%,transparent),inset 0 1px 0 rgba(255,255,255,.22);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity var(--cas-mid) var(--cas-ease),transform var(--cas-mid) var(--cas-ease)}
.cas-card__play svg{width:12px;height:12px}
.cas-card:hover .cas-card__play,.cas-card:focus-visible .cas-card__play{opacity:1;transform:translateY(0)}
.cas-card:hover .cas-card__meta,.cas-card:focus-visible .cas-card__meta{opacity:0}
@media (hover:none){ .cas-card__play{display:none} .cas-card__fav{opacity:1;transform:scale(1)} }

/* skeleton */
.cas-sk{border-radius:var(--cas-r);aspect-ratio:4/3;
  background:linear-gradient(100deg,var(--cas-surface) 30%,var(--cas-surface-2) 50%,var(--cas-surface) 70%);
  background-size:220% 100%;animation:casSk 1.25s linear infinite}
@keyframes casSk{to{background-position:-220% 0}}

.cas-empty{display:grid;place-items:center;gap:10px;padding:60px 20px;text-align:center;
  color:var(--cas-muted);border:1px dashed var(--cas-border);border-radius:var(--cas-r);
  background:color-mix(in srgb,var(--cas-surface) 55%,transparent)}
.cas-empty svg{width:38px;height:38px;opacity:.4}
.cas-empty b{color:var(--cas-text);font-size:15px}

@media (prefers-reduced-motion:no-preference){
  .cas-rise{opacity:0;transform:translateY(12px);animation:casRise .46s var(--cas-ease) forwards}
  @keyframes casRise{to{opacity:1;transform:none}}
}

@media (max-width:640px){
  .cas-wrap{padding:14px 12px 52px}
  /* a barra sangra ate a borda: a margem negativa tem que casar com o padding do wrap,
     senao sobra 4px de rolagem horizontal no celular (12px de padding x 16px de margem). */
  .cas-bar{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
  .cas-track{grid-auto-columns:minmax(134px,1fr);gap:10px}
  .cas-grid{grid-template-columns:repeat(auto-fill,minmax(134px,1fr));gap:10px}
  .cas-row__title{font-size:15.5px}
  .cas-row__head::before{height:17px}
}
@media (min-width:1280px){ .cas-track{grid-auto-columns:minmax(182px,1fr)}
  .cas-grid{grid-template-columns:repeat(auto-fill,minmax(182px,1fr))} }

/* ===========================================================================
   ADMIN — Admin › Jogos de Cassino (.casadm-*)
   Mesmo vocabulário visual do cliente (sombra em camadas, acento com glow),
   mas em densidade de painel. Botões continuam sendo os da casa (.btn /
   .btn--primary) para a tela não destoar do resto do admin.
   =========================================================================== */
.casadm-root{color:var(--cas-text)}

.casadm-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px solid var(--cas-border)}
.casadm-tab{padding:8px 14px;border-radius:9px;cursor:pointer;
  border:1px solid var(--cas-border);background:transparent;color:var(--cas-text);
  font-family:inherit;font-size:13px;font-weight:600;line-height:1.2;
  transition:color var(--cas-fast) var(--cas-ease),border-color var(--cas-fast) var(--cas-ease),
             background-color var(--cas-fast) var(--cas-ease)}
.casadm-tab:hover{border-color:color-mix(in srgb,var(--cas-accent) 45%,transparent)}
.casadm-tab.is-on{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--cas-accent),color-mix(in srgb,var(--cas-accent) 68%,#000000));
  box-shadow:0 6px 16px -8px color-mix(in srgb,var(--cas-accent) 70%,transparent)}

.casadm-status{font-size:12.5px;margin:2px 0 12px;color:var(--cas-muted)}
.casadm-status b{color:var(--cas-accent)}
.casadm-status .casadm-err{color:var(--cas-danger)}

/* ---------- formulário ---------- */
.casadm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.casadm-full{grid-column:1 / -1}
@media(max-width:760px){.casadm-grid{grid-template-columns:1fr}}
.casadm-lbl{display:block;margin:0 0 4px;font-size:12px;font-weight:700;opacity:.85}
.casadm-in,.casadm-sel{width:100%;padding:10px 12px;border-radius:9px;
  border:1px solid var(--cas-border);background:var(--cas-surface-2);color:var(--cas-text);
  font-family:inherit;font-size:14px;line-height:1.2;outline:none;
  transition:border-color var(--cas-fast) var(--cas-ease),box-shadow var(--cas-fast) var(--cas-ease)}
.casadm-in:focus,.casadm-sel:focus{border-color:color-mix(in srgb,var(--cas-accent) 62%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cas-accent) 15%,transparent)}
.casadm-in:disabled,.casadm-sel:disabled{opacity:.6}
.casadm-key{display:flex;gap:6px}
.casadm-key .casadm-in{flex:1;min-width:0}
.casadm-hint{margin-top:3px;font-size:11.5px;line-height:1.45;color:var(--cas-muted)}
.casadm-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.casadm-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:space-between;margin-top:6px}

.casadm-badge{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:20px;
  font-size:11px;font-weight:700;line-height:1.5;
  background:color-mix(in srgb,var(--cas-accent) 18%,transparent);color:var(--cas-accent)}
.casadm-badge--off{background:color-mix(in srgb,var(--cas-muted) 20%,transparent);color:var(--cas-muted)}
.casadm-badge--err{background:color-mix(in srgb,var(--cas-danger) 18%,transparent);color:var(--cas-danger)}

.casadm-out{display:none;margin-top:12px;padding:12px;border-radius:10px;
  border:1px solid var(--cas-border);background:var(--cas-surface);
  font-size:13px;line-height:1.55}
.casadm-out.is-on{display:block}
.casadm-out b{color:var(--cas-accent)}
.casadm-out .casadm-err{color:var(--cas-danger)}
.casadm-errlist{margin:6px 0 0 18px;padding:0}

/* ---------- lista de jogos ---------- */
.casadm-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.casadm-toolbar .casadm-in,.casadm-toolbar .casadm-sel{width:auto}
.casadm-search{flex:1;min-width:200px}
.casadm-count{margin:2px 0 8px;font-size:12.5px;color:var(--cas-muted)}
.casadm-count b{color:var(--cas-text)}
/* enquanto a próxima página não chega a lista só esmaece — repintar do zero
   fazia a tela piscar a cada clique na paginação */
.casadm-scroll{overflow-x:auto;transition:opacity var(--cas-fast) var(--cas-ease)}
.casadm-scroll.is-dim{opacity:.45}

.casadm-tbl{width:100%;border-collapse:collapse;font-size:13px}
.casadm-tbl th{padding:8px;text-align:left;white-space:nowrap;
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--cas-muted);border-bottom:1px solid var(--cas-border)}
.casadm-tbl td{padding:8px;vertical-align:middle;border-bottom:1px solid var(--cas-border)}
.casadm-tbl tr.is-chg{background:color-mix(in srgb,var(--cas-accent) 8%,transparent)}
.casadm-tbl tr.is-chg td:first-child{box-shadow:inset 3px 0 0 var(--cas-accent)}

/* thumb do admin: a inicial (data-i) fica no fundo e a <img> por cima. Banner
   bloqueado/quebrado → o JS só remove a <img> e a inicial aparece sozinha. */
.casadm-thumb{position:relative;width:46px;height:58px;border-radius:6px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,var(--cas-surface-2),var(--cas-surface))}
.casadm-thumb::before{content:attr(data-i);position:absolute;inset:0;display:grid;place-items:center;
  font-family:inherit;font-size:18px;font-weight:800;line-height:1;
  color:color-mix(in srgb,var(--cas-accent) 55%,transparent)}
.casadm-thumb__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.casadm-gname{font-weight:600;line-height:1.25}
.casadm-gcode{font-size:11px;color:var(--cas-muted);
  font-family:ui-monospace,Menlo,Consolas,monospace}
.casadm-ord{width:74px;padding:6px 8px}
.casadm-mini{padding:6px 8px;font-size:12.5px}

/* liga/desliga */
.casadm-sw{position:relative;display:inline-block;width:42px;height:23px;flex:none;vertical-align:middle}
.casadm-sw input{position:absolute;width:0;height:0;opacity:0}
.casadm-sw i{position:absolute;inset:0;border-radius:999px;cursor:pointer;
  border:1px solid var(--cas-border);background:var(--cas-surface-2);transition:.18s}
.casadm-sw i:before{content:'';position:absolute;width:17px;height:17px;left:2px;top:2px;
  border-radius:50%;background:var(--cas-muted);transition:.18s}
.casadm-sw input:checked + i{background:var(--cas-accent);border-color:var(--cas-accent)}
.casadm-sw input:checked + i:before{transform:translateX(19px);background:#fff}
.casadm-sw input:focus-visible + i{box-shadow:0 0 0 3px color-mix(in srgb,var(--cas-accent) 25%,transparent)}
.casadm-chk{width:17px;height:17px;accent-color:var(--cas-accent);cursor:pointer}

/* paginação */
.casadm-pager{display:flex;gap:5px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:14px}
.casadm-pg{min-width:34px;padding:6px 10px;border-radius:8px;cursor:pointer;
  border:1px solid var(--cas-border);background:transparent;color:var(--cas-text);
  font-family:inherit;font-size:13px;font-weight:600;line-height:1.2}
.casadm-pg:hover:not(:disabled):not(.is-on){border-color:color-mix(in srgb,var(--cas-accent) 45%,transparent)}
.casadm-pg.is-on{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--cas-accent),color-mix(in srgb,var(--cas-accent) 68%,#000000))}
.casadm-pg:disabled{opacity:.35;cursor:default}
.casadm-gap{padding:0 4px;color:var(--cas-muted)}

/* provedores */
.casadm-prov{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:8px;padding:11px 12px;border-radius:10px;
  border:1px solid var(--cas-border);background:var(--cas-surface)}
.casadm-prov__ttl{font-weight:700}
.casadm-prov__sub{margin:2px 0 0;font-size:11.5px;color:var(--cas-muted)}
.casadm-prov__acts{display:flex;gap:6px;flex-wrap:wrap}

/* estados vazios */
.casadm-stub{padding:44px 18px;text-align:center;color:var(--cas-muted)}
.casadm-stub__ico{font-size:40px;line-height:1;margin-bottom:10px}
.casadm-stub b{color:var(--cas-text)}
.casadm-err{color:var(--cas-danger)}

/* Um respiro só no fim: acessibilidade sem tocar no resto do site — por isso
   escopado nos contêineres do cassino, e não num `*` global. */
@media (prefers-reduced-motion:reduce){
  .cas-wrap *,.cas-wrap *::before,.cas-wrap *::after,
  .casadm-root *,.casadm-root *::before,.casadm-root *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
/* ==== CASSINO (fim) ==== */

/* Cassino ocupa a largura toda: sem a coluna do cupom de aposta esportiva. */
.casino-sem-cupom .betslip-col { display: none !important; }
.casino-sem-cupom > .main { max-width: none; }

/* ---- Jogo aberto DENTRO do site (barra propria com Voltar) ---------------- */
/* Overlay fixo: no celular ocupa tudo, inclusive area segura do notch. */
.cas-play{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;
  background:var(--bg,#000000);
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
body.cas-jogando{overflow:hidden}
.cas-play__bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;height:52px;padding:0 10px;
  background:var(--surface,#111111);border-bottom:1px solid var(--border,#2A2A2A);
  box-shadow:0 2px 12px -4px rgba(0,0,0,.7)}
.cas-play__back,.cas-play__full{display:inline-flex;align-items:center;gap:6px;
  min-height:44px;min-width:44px;padding:0 12px;cursor:pointer;   /* 44px: alvo de toque */
  border:1px solid var(--border,#2A2A2A);border-radius:10px;
  background:var(--surface-2,#1A1A1A);color:var(--text,#F5F5F5);
  font:700 13px/1 inherit;transition:border-color 180ms cubic-bezier(.16,1,.3,1),
    background 180ms cubic-bezier(.16,1,.3,1),transform 180ms cubic-bezier(.16,1,.3,1)}
.cas-play__back svg,.cas-play__full svg{width:16px;height:16px}
.cas-play__back:hover,.cas-play__full:hover{border-color:color-mix(in srgb,var(--accent,var(--accent)) 55%,transparent);
  color:var(--accent,var(--accent))}
.cas-play__back:active,.cas-play__full:active{transform:scale(.96)}
.cas-play__back:focus-visible,.cas-play__full:focus-visible{outline:2px solid var(--accent,var(--accent));outline-offset:2px}
.cas-play__nome{flex:1;min-width:0;text-align:center;font:700 14px/1.2 inherit;
  color:var(--text,#F5F5F5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cas-play__full{padding:0 10px}
.cas-play__frame{flex:1;min-height:0;background:#000000}
.cas-play__frame iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:640px){
  .cas-play__bar{height:48px}
  .cas-play__back span{display:none}     /* no celular so o icone: sobra espaco pro nome */
  .cas-play__nome{font-size:13px}
}

/* ==== PERFIL (inicio) ==== */
/* ---------------------------------------------------------------------------
   Perfil / Minha Conta do cliente (.perf-*).

   Bloco anexado no FIM de app/brand-acm10.css. Mesma familia visual do cassino
   (.cas-*): sombra em camadas, borda interna de 1px como "fio de luz", acento
   com glow — mas em densidade de dashboard, nao de vitrine.

   Quatro decisoes que valem comentario porque errar qualquer uma quebra a tela
   em silencio:

   1) Os tokens --pf-* sao declarados em .perf-wrap, NAO em :root. No ACM10 as
      variaveis do tema (--bg/--surface/--accent/...) moram em .brand-superbetbr e
      nas variacoes (.shell.theme-cyber) — nunca em :root. Declarados em :root,
      var(--accent) cairia sempre no fallback e o perfil ficaria verde mesmo com
      o tema trocado. Aqui: trocou o tema, troca o perfil junto.

   2) NUNCA color:var(--primary). No ACM10 --primary e #000000 e o fundo tambem
      e preto — texto invisivel. Cor de texto e --pf-text/--pf-muted; destaque e
      --pf-accent. Nao ha uma unica ocorrencia de --primary neste bloco.

   3) ZERO margem negativa / faixa sangrando. O .content do app tem padding
      26px 28px no desktop e 10px 8px no mobile (app.css:507 e app.css:1435) —
      uma faixa com margin:-16px casaria com um breakpoint e sobraria rolagem
      horizontal no outro. Ja aconteceu. Aqui nenhuma regra tem margem
      negativa: o que precisa de largura total ganha fundo proprio e cantos
      arredondados em vez de sangrar. As tabs rolam DENTRO do proprio trilho.

   4) Tipografia sempre em longhands. A forma `font:700 13px/1 inherit` e CSS
      invalido (palavra-chave global dentro do atalho) e o navegador DESCARTA a
      declaracao inteira. Pior em <button>/<input>/<select>, que nao herdam
      fonte do pai: sem font-family:inherit explicito sai a fonte do agente.
   --------------------------------------------------------------------------- */

.perf-wrap {
  --pf-bg:        var(--bg, #000000);
  --pf-surface:   var(--surface, #111111);
  --pf-surface-2: var(--surface-2, #1A1A1A);
  --pf-border:    var(--border, #2A2A2A);
  --pf-text:      var(--text, #F5F5F5);
  --pf-muted:     var(--muted, #9CA3AF);
  --pf-accent:    var(--accent, var(--accent));
  --pf-danger:    var(--accent2, var(--danger));

  --pf-ease: cubic-bezier(.16, 1, .3, 1);
  --pf-fast: 160ms;
  --pf-mid:  260ms;

  --pf-r:    16px;
  --pf-r-sm: 11px;

  /* sombra em 3 camadas: contato + ambiente + profundidade */
  --pf-shadow: 0 1px 1px rgba(0, 0, 0, .55),
               0 4px 10px -4px rgba(0, 0, 0, .6),
               0 16px 34px -14px rgba(0, 0, 0, .85);
  --pf-ring: 0 0 0 3px color-mix(in srgb, var(--pf-accent) 22%, transparent);
}

.perf-wrap,
.perf-wrap *,
.perf-wrap *::before,
.perf-wrap *::after { box-sizing: border-box }

.perf-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
  color: var(--pf-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===========================================================================
   CABECALHO — avatar + identidade
   =========================================================================== */
.perf-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r);
  background:
    radial-gradient(680px 200px at 0% 0%,
      color-mix(in srgb, var(--pf-accent) 9%, transparent), transparent 70%),
    var(--pf-surface);
  box-shadow: var(--pf-shadow);
}

/* Avatar: funciona tanto como <img class="perf-avatar"> quanto como
   <div class="perf-avatar"> com <img>/inicial/SVG dentro — o botao de editar e
   filho BEM, entao a forma canonica e o div com o botao dentro.
   overflow fica VISIVEL de proposito: o botao de editar precisa transbordar. */
.perf-avatar {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: visible;
  background: var(--pf-surface-2);
  color: var(--pf-muted);
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
  object-fit: cover;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--pf-accent) 62%, transparent),
    0 0 0 5px color-mix(in srgb, var(--pf-accent) 12%, transparent),
    0 8px 20px -8px rgba(0, 0, 0, .8);
}
.perf-avatar > img,
.perf-avatar > svg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.perf-avatar > svg { padding: 22%; opacity: .5 }

/* Botao de editar: 30px visuais, 44px de alvo de toque via ::after (30+7+7). */
.perf-avatar__edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--pf-accent),
    color-mix(in srgb, var(--pf-accent) 66%, #000000));
  box-shadow:
    0 0 0 2px var(--pf-surface),
    0 4px 12px -4px color-mix(in srgb, var(--pf-accent) 80%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  transition: transform var(--pf-fast) var(--pf-ease),
              box-shadow var(--pf-fast) var(--pf-ease);
}
.perf-avatar__edit::after { content: ''; position: absolute; inset: -7px; border-radius: 50% }
.perf-avatar__edit svg { width: 14px; height: 14px; pointer-events: none }
.perf-avatar__edit:hover { transform: scale(1.09) }
.perf-avatar__edit:active { transform: scale(.94) }
.perf-avatar__edit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--pf-surface), var(--pf-ring);
}

.perf-id { flex: 1 1 220px; min-width: 0 }
.perf-nome {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--pf-text);
  overflow-wrap: anywhere;
}
.perf-mail {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--pf-muted);
  overflow-wrap: anywhere;
}
.perf-desde {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 9px 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pf-text) 7%, transparent);
  color: var(--pf-muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
}
.perf-desde svg { width: 13px; height: 13px; flex: 0 0 auto }

/* ===========================================================================
   CARTAO DE SALDO
   Gradiente sutil do accent + sombra em camadas. O numero e tabular pra nao
   "dancar" de largura a cada atualizacao do saldo.
   =========================================================================== */
.perf-saldo {
  position: relative;
  overflow: hidden;
  padding: 22px 20px;
  border: 1px solid color-mix(in srgb, var(--pf-accent) 26%, var(--pf-border));
  border-radius: var(--pf-r);
  background: var(--pf-surface);
  background:
    radial-gradient(520px 260px at 88% -30%,
      color-mix(in srgb, var(--pf-accent) 20%, transparent), transparent 72%),
    linear-gradient(150deg,
      color-mix(in srgb, var(--pf-accent) 13%, var(--pf-surface)) 0%,
      var(--pf-surface) 58%);
  box-shadow: var(--pf-shadow);
}
/* fio de luz interno: separa o cartao do fundo sem virar contorno */
.perf-saldo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
/* barrinha de acento com glow — mesma ancora visual das faixas do cassino */
.perf-saldo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--pf-accent),
    color-mix(in srgb, var(--pf-accent) 30%, transparent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--pf-accent) 60%, transparent);
}
.perf-saldo > * { position: relative; z-index: 1 }

.perf-saldo__val {
  display: block;
  margin: 0;
  color: var(--pf-text);
  font-size: 38px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-shadow: 0 2px 18px color-mix(in srgb, var(--pf-accent) 22%, transparent);
}
/* rotulo dentro do cartao: qualquer <small>/<span> irmao do valor */
.perf-saldo small,
.perf-saldo__val + span,
.perf-saldo__val + p {
  display: block;
  margin: 6px 0 0;
  color: var(--pf-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.perf-saldo__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.perf-saldo__acoes > * { flex: 1 1 150px }

/* ===========================================================================
   KPIs
   =========================================================================== */
.perf-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
/* Faixa com DOIS indicadores (ex.: cashback). Sem isto ela herda o grid de 4
   colunas do desktop, cada caixa fica com 1/4 da largura e "R$ 0,00" quebra no
   meio do numero ("R$ 0,0 / 0"). Dinheiro partido em duas linhas nao se le. */
.perf-kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
.perf-kpi {
  min-width: 0;
  padding: 14px 12px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  text-align: center;
  transition: border-color var(--pf-fast) var(--pf-ease),
              transform var(--pf-fast) var(--pf-ease);
}
/* Valor e uma unidade: ou cabe inteiro, ou encolhe a fonte — nunca quebra linha. */
.perf-kpi__v { white-space: nowrap; overflow-wrap: normal; font-size: clamp(15px, 4.4vw, 19px) }
.perf-kpi:hover {
  border-color: color-mix(in srgb, var(--pf-accent) 40%, transparent);
  transform: translateY(-1px);
}
.perf-kpi__v {
  display: block;
  color: var(--pf-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  overflow-wrap: anywhere;
}
.perf-kpi__v--pos { color: var(--pf-accent) }
.perf-kpi__v--neg { color: color-mix(in srgb, var(--pf-danger) 72%, #fff) }
.perf-kpi__l {
  display: block;
  margin-top: 4px;
  color: var(--pf-muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
}

/* ===========================================================================
   ABAS — pilulas com rolagem horizontal no celular
   O trilho rola DENTRO de si (sem sangrar), scrollbar escondida e scroll-snap.
   =========================================================================== */
.perf-tabs {
  display: flex;
  gap: 8px;
  max-width: 100%;
  padding: 4px 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.perf-tabs::-webkit-scrollbar { display: none }

.perf-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--pf-border);
  border-radius: 999px;
  cursor: pointer;
  background: var(--pf-surface);
  color: var(--pf-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  scroll-snap-align: start;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  transition: color var(--pf-fast) var(--pf-ease),
              border-color var(--pf-fast) var(--pf-ease),
              transform var(--pf-fast) var(--pf-ease);
}
.perf-tab svg { width: 15px; height: 15px; flex: 0 0 auto }
.perf-tab:hover {
  color: var(--pf-text);
  border-color: color-mix(in srgb, var(--pf-accent) 42%, transparent);
  transform: translateY(-1px);
}
.perf-tab:active { transform: translateY(0) }
.perf-tab:focus-visible { outline: none; box-shadow: var(--pf-ring) }
.perf-tab.is-on {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--pf-accent),
    color-mix(in srgb, var(--pf-accent) 68%, #000000));
  box-shadow:
    0 6px 18px -6px color-mix(in srgb, var(--pf-accent) 65%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}
.perf-tab.is-on:hover { color: #fff; transform: translateY(-1px) }

.perf-tab__badge {
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pf-text) 11%, transparent);
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.perf-tab.is-on .perf-tab__badge { background: rgba(0, 0, 0, .25); color: #fff }

/* ===========================================================================
   PAINEL
   =========================================================================== */
.perf-pane {
  padding: 18px 16px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r);
  background: var(--pf-surface);
  box-shadow: var(--pf-shadow);
}
/* display explicito venceria o atributo hidden — precisa desfazer na mao */
.perf-pane[hidden] { display: none }
.perf-pane > h3,
.perf-pane > h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--pf-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.perf-pane > h3 svg,
.perf-pane > h4 svg { width: 16px; height: 16px; color: var(--pf-accent); flex: 0 0 auto }

@media (prefers-reduced-motion: no-preference) {
  .perf-pane { animation: pfFade var(--pf-mid) var(--pf-ease) both }
  @keyframes pfFade { from { opacity: 0; transform: translateY(6px) } }
}

/* ===========================================================================
   LISTAS / HISTORICO
   Separador de 1px, valor a direita, tabular-nums.

   O layout usa order + flex-wrap justamente pra funcionar com os DOIS formatos
   de marcacao: irmaos planos (main/sub/val no mesmo nivel) ou o sub aninhado
   dentro do main. No caso aninhado order/flex-basis sao simplesmente ignorados
   e o sub cai como bloco embaixo — que e o desenho pretendido de qualquer jeito.
   =========================================================================== */
.perf-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  /* TETO DE ALTURA. Sem isto a lista desenha os 100 bilhetes de uma vez e o celular
     engasga — a tela antiga já limitava em 280px. O scroll fica DENTRO da lista, e
     overscroll-behavior impede que o dedo, ao bater no fim, arraste a página junto. */
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--pf-text) 22%, transparent) transparent;
}
.perf-list::-webkit-scrollbar { width: 8px }
.perf-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--pf-text) 20%, transparent);
  border-radius: 8px;
}
.perf-list::-webkit-scrollbar-track { background: transparent }
/* Lista curta não deve ganhar barra nem "buraco" de altura: o teto só age quando estoura. */
@media (max-width: 640px) { .perf-list { max-height: 60vh } }
.perf-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  min-width: 0;
  padding: 13px 2px;
  border-bottom: 1px solid var(--pf-border);
  transition: background-color var(--pf-fast) var(--pf-ease);
}
.perf-item:last-child { border-bottom: 0 }
.perf-item:hover { background: color-mix(in srgb, var(--pf-text) 4%, transparent) }

/* A linha de NOTIFICAÇÃO é um <button> (dá pra marcar como lida no clique). Sem este
   reset o navegador desenha o botão nativo: fundo cinza, texto centralizado e fonte
   do sistema — a lista virava um paredão de botões ilegíveis no tema escuro.
   O <button> continua botão pro teclado e pro leitor de tela; só o visual é zerado. */
button.perf-item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pf-border);
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.perf-item:last-child { border-bottom: 0 }
button.perf-item:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: -2px }
/* Não lida: faixa de destaque na borda esquerda (o JS aplica inline; aqui garantimos o espaço). */
button.perf-item[data-notif] { padding-left: 11px }

.perf-item__main {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--pf-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.perf-item > .perf-badge { order: 1; flex: 0 0 auto }
.perf-item__val {
  order: 2;
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  color: var(--pf-text);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.perf-item__val--pos { color: var(--pf-accent) }
.perf-item__val--neg { color: color-mix(in srgb, var(--pf-danger) 72%, #fff) }
.perf-item__sub {
  order: 3;
  flex: 1 1 100%;
  min-width: 0;
  margin-top: 2px;
  color: var(--pf-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ===========================================================================
   BADGE DE STATUS
   Padrao do dono: ganha=verde, perdida=vermelho, aberta=amarelo,
   devolvida=roxo, cancelada=laranja, pendente=cinza. Os tons aqui sao as
   versoes CLARAS dos hex de ui.js (BET_STATUS_COLOR) — var(--success) e #a16207 sao
   escuros demais no fundo preto do ACM10; sobre o tint de 16% eles ficavam
   perto de 2:1. Os tons abaixo passam de 4.5:1 sobre a superficie escura.
   =========================================================================== */
.perf-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pf-muted) 18%, transparent);
  color: var(--pf-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: middle;
}
.perf-badge svg { width: 11px; height: 11px; flex: 0 0 auto }
.perf-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: currentColor;
}

.perf-badge--ganha     { background: rgba(34, 197, 94, .15); border-color: rgba(34, 197, 94, .32); color: var(--success) }
.perf-badge--perdida   { background: rgba(248, 113, 113, .15); border-color: rgba(248, 113, 113, .32); color: var(--danger) }
.perf-badge--aberta    { background: rgba(251, 191, 36, .15);  border-color: rgba(251, 191, 36, .32);  color: #fbbf24 }
.perf-badge--devolvida { background: rgba(192, 132, 252, .15); border-color: rgba(192, 132, 252, .32); color: #c084fc }
.perf-badge--cancelada { background: rgba(251, 146, 60, .15);  border-color: rgba(251, 146, 60, .32);  color: #fb923c }
.perf-badge--pendente  { background: rgba(156, 163, 175, .15); border-color: rgba(156, 163, 175, .3);  color: #9CA3AF }

/* ===========================================================================
   FORMULARIOS
   =========================================================================== */
.perf-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
}
.perf-form > .perf-btn,
.perf-form > .perf-btn--pri { justify-self: start }

/* .perf-campo e o CONTROLE (input/select/textarea). Se a marcacao usar
   .perf-campo como INVOLUCRO (rotulo + controle), o :has() abaixo o despe e
   passa o desenho pro controle interno — funciona nos dois formatos. */
.perf-campo {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-surface-2);
  color: var(--pf-text);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: border-color var(--pf-fast) var(--pf-ease),
              box-shadow var(--pf-fast) var(--pf-ease);
}
.perf-campo::placeholder { color: var(--pf-muted); font-weight: 400; opacity: 1 }
.perf-campo:focus,
.perf-campo:focus-visible {
  border-color: color-mix(in srgb, var(--pf-accent) 62%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), var(--pf-ring);
}
.perf-campo:disabled { opacity: .55; cursor: not-allowed }
.perf-campo:is(textarea) { min-height: 92px; resize: vertical }
.perf-campo:is(select) {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--pf-muted) 50%),
                    linear-gradient(135deg, var(--pf-muted) 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.perf-campo:is(select) option { background: var(--pf-surface-2); color: var(--pf-text) }

/* invólucro: sem caixa propria, so empilha rotulo + controle */
.perf-campo:has(> input, > select, > textarea) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.perf-campo:has(> input, > select, > textarea) > :is(span, label, small) {
  color: var(--pf-muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.perf-campo > :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-surface-2);
  color: var(--pf-text);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: border-color var(--pf-fast) var(--pf-ease),
              box-shadow var(--pf-fast) var(--pf-ease);
}
.perf-campo > :is(input, select, textarea)::placeholder { color: var(--pf-muted); font-weight: 400; opacity: 1 }
.perf-campo > :is(input, select, textarea):focus {
  border-color: color-mix(in srgb, var(--pf-accent) 62%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), var(--pf-ring);
}

/* ===========================================================================
   BOTOES — alvo de toque de 44px, fonte herdada na marra (<button> nao herda)
   =========================================================================== */
.perf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--pf-border);
  border-radius: 999px;
  cursor: pointer;
  background: var(--pf-surface-2);
  color: var(--pf-text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color var(--pf-fast) var(--pf-ease),
              color var(--pf-fast) var(--pf-ease),
              transform var(--pf-fast) var(--pf-ease),
              box-shadow var(--pf-fast) var(--pf-ease);
}
.perf-btn svg { width: 16px; height: 16px; flex: 0 0 auto }
.perf-btn:hover {
  border-color: color-mix(in srgb, var(--pf-accent) 48%, transparent);
  color: var(--pf-text);
  transform: translateY(-1px);
}
.perf-btn:active { transform: translateY(0) scale(.985) }
.perf-btn:focus-visible { outline: none; box-shadow: var(--pf-ring) }
.perf-btn:disabled,
.perf-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none }

.perf-btn--pri {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, var(--pf-accent),
    color-mix(in srgb, var(--pf-accent) 66%, #000000));
  box-shadow:
    0 8px 20px -8px color-mix(in srgb, var(--pf-accent) 80%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .2);
}
.perf-btn--pri:hover {
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 10px 26px -8px color-mix(in srgb, var(--pf-accent) 90%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}
.perf-btn--pri:focus-visible {
  box-shadow: 0 0 0 2px var(--pf-surface),
              0 0 0 5px color-mix(in srgb, var(--pf-accent) 45%, transparent);
}

/* ===========================================================================
   VAZIO / CARREGANDO / ERRO
   =========================================================================== */
.perf-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 44px 20px;
  border: 1px dashed var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: color-mix(in srgb, var(--pf-surface-2) 45%, transparent);
  color: var(--pf-muted);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}
.perf-empty svg { width: 36px; height: 36px; opacity: .38 }
.perf-empty b { color: var(--pf-text); font-size: 14.5px; font-weight: 700 }

/* Skeleton shimmer. Altura padrao de linha; um bloco maior e so sobrescrever
   height (ou usar varias .perf-sk empilhadas). */
.perf-sk {
  display: block;
  width: 100%;
  height: 15px;
  border-radius: 8px;
  background: linear-gradient(100deg,
    var(--pf-surface-2) 30%,
    color-mix(in srgb, var(--pf-text) 8%, var(--pf-surface-2)) 50%,
    var(--pf-surface-2) 70%);
  background-size: 220% 100%;
  animation: pfSk 1.25s linear infinite;
}
.perf-sk + .perf-sk { margin-top: 10px }
.perf-sk:nth-child(even) { width: 72% }
@keyframes pfSk { to { background-position: -220% 0 } }

.perf-erro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--pf-danger) 40%, transparent);
  border-left-width: 3px;
  border-radius: var(--pf-r-sm);
  background: color-mix(in srgb, var(--pf-danger) 13%, transparent);
  color: color-mix(in srgb, var(--pf-danger) 60%, #FFFFFF);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.perf-erro svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px }
.perf-erro b { color: #FFFFFF; font-weight: 800 }

/* ===========================================================================
   BREAKPOINTS — mobile-first. Nenhuma faixa sangra, entao nao ha margem
   negativa pra casar com o padding do .content em nenhum breakpoint.
   =========================================================================== */
@media (min-width: 640px) {
  .perf-wrap        { gap: 18px }
  .perf-head        { padding: 24px; gap: 18px }
  .perf-avatar      { width: 88px; height: 88px; font-size: 31px }
  .perf-nome        { font-size: 22px }
  .perf-saldo       { padding: 26px 24px }
  .perf-saldo__val  { font-size: 44px }
  .perf-saldo__acoes > * { flex: 0 1 auto }
  .perf-kpis        { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
  .perf-kpi         { padding: 16px 14px }
  .perf-kpi__v      { font-size: 22px }
  .perf-pane        { padding: 22px 20px }
  .perf-item        { padding: 14px 4px }
  .perf-form        { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .perf-form > .perf-campo--full,
  .perf-form > .perf-btn,
  .perf-form > .perf-btn--pri { grid-column: 1 / -1 }
  .perf-form > .perf-btn,
  .perf-form > .perf-btn--pri { justify-self: start }
}

@media (min-width: 1024px) {
  .perf-wrap        { gap: 20px }
  .perf-head        { padding: 28px }
  .perf-saldo       { padding: 30px 28px }
  .perf-saldo__val  { font-size: 50px }
  .perf-pane        { padding: 26px 24px }
  .perf-form        { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
}

/* Um respiro so no fim. Escopado em .perf-wrap — este arquivo vale pro site
   inteiro, entao nada de `*` global aqui. */
@media (prefers-reduced-motion: reduce) {
  .perf-wrap,
  .perf-wrap *,
  .perf-wrap *::before,
  .perf-wrap *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .perf-sk { animation: none; background: var(--pf-surface-2) }
}
/* ===========================================================================
   QR do Pix. Fundo BRANCO e fixo: leitor de QR precisa de contraste alto e o
   padrao e escuro-sobre-claro — num card preto o codigo simplesmente nao le.
   Por isso esta e a unica caixa do perfil que NAO segue o tema.
   =========================================================================== */
.perf-qr { display: flex; justify-content: center }
.perf-qr img {
  width: 240px;
  height: 240px;
  max-width: 100%;
  padding: 10px;
  border-radius: var(--pf-r-sm);
  background: #fff;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .9);
  image-rendering: pixelated;   /* QR e grade de pixels: suavizar borra os modulos */
}
@media (max-width: 480px) { .perf-qr img { width: 200px; height: 200px; padding: 8px } }


/* ===========================================================================
   POLIMENTO — casa internacional
   Passe final sobre o bloco acima. Nada aqui muda MARCAÇÃO: são só refinamentos
   que separam "dashboard funcional" de "casa de aposta grande". Vem depois de
   propósito, então sobrepõe o que precisar sem eu ter que caçar cada regra.

   As quatro decisões que mais mudam a percepção, e o porquê de cada uma:

   1) NUMERAL TABULAR em tudo que é dinheiro. Na fonte proporcional o "1" é mais
      estreito que o "8": a cada atualização do saldo os dígitos mudam de largura
      e o número "dança". Casa grande nenhuma tem isso. tabular-nums trava a
      largura do dígito — o valor troca sem a linha se mexer.

   2) DENSIDADE de painel, não de página de marketing. O conteúdo aqui é tabela
      de dinheiro: o cliente quer VER MAIS linhas por tela, não respirar. Escala
      apertada (8–32px) em vez da folgada.

   3) ESTADO DE BOTÃO completo. hover/active/focus-visible/disabled, todos com
      transição de 160ms. Botão que muda de estado instantaneamente (0ms) parece
      quebrado; botão sem :disabled visível deixa o cliente clicando em Sacar já
      desabilitado e achando que o site travou.

   4) HAIRLINE em vez de sombra borrada. Em tela retina, sombra grande e difusa
      vira "borrão cinza"; o que lê como caro é a borda de 1px com um fio de luz
      interno. As sombras continuam, mas mais curtas e escuras.

   A COR não vem daqui: --pf-accent herda o --accent do tema, então trocar o
   tema do sistema continua trocando o perfil junto. Um white-label não pode ter
   a cor da marca escrita na folha de estilo.
   =========================================================================== */

/* --- 1. numeral tabular em todo valor -------------------------------------- */
.perf-saldo__val,
.perf-kpi__v,
.perf-item__val,
.perf-badge,
.perf-qr + .perf-campo input,
.perf-list .perf-item__sub {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
/* Saldo: o número principal da tela. Peso alto, tracking negativo e altura de
   linha travada pra não empurrar o cartão quando passa de 4 dígitos. */
.perf-saldo__val {
  letter-spacing: -.025em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

/* --- 2. densidade de painel ------------------------------------------------ */
.perf-wrap { gap: 12px }
.perf-kpis { gap: 8px }
.perf-kpi  { padding: 12px 10px }
.perf-kpi__l {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pf-muted);
}
.perf-item { padding: 11px 2px }
.perf-list { gap: 0 }
@media (min-width: 900px) {
  .perf-wrap { gap: 14px }
  .perf-item { padding: 10px 2px }
}

/* --- 3. estados de botao --------------------------------------------------- */
.perf-btn,
.perf-btn--pri {
  min-height: 44px;                      /* alvo de toque: nao encolher */
  cursor: pointer;
  transition: background-color 160ms var(--pf-ease),
              border-color 160ms var(--pf-ease),
              box-shadow 160ms var(--pf-ease),
              transform 160ms var(--pf-ease),
              opacity 160ms var(--pf-ease);
}
.perf-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--pf-accent) 46%, transparent) }
.perf-btn--pri:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--pf-accent) 65%, transparent);
}
.perf-btn:active:not(:disabled),
.perf-btn--pri:active:not(:disabled) { transform: scale(.975) }
.perf-btn:focus-visible,
.perf-btn--pri:focus-visible { outline: none; box-shadow: var(--pf-ring) }
/* Desabilitado tem que PARECER desabilitado: sem isso o cliente clica em Sacar
   travado e conclui que o site quebrou. */
.perf-btn:disabled,
.perf-btn--pri:disabled {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(.35);
  box-shadow: none;
  transform: none;
}

/* --- 4. hairline no lugar de sombra borrada -------------------------------- */
.perf-head,
.perf-saldo,
.perf-form,
.perf-kpi {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 1px 2px rgba(0, 0, 0, .5),
    0 8px 20px -12px rgba(0, 0, 0, .8);
}
.perf-saldo {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 1px 2px rgba(0, 0, 0, .55),
    0 14px 32px -16px color-mix(in srgb, var(--pf-accent) 40%, rgba(0,0,0,.9));
}

/* --- tabs: trilho segmentado, nao pilulas soltas --------------------------- */
.perf-tabs {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--pf-border);
  border-radius: 12px;
  background: var(--pf-surface);
}
.perf-tab { border-radius: 9px; border-color: transparent; background: transparent }
.perf-tab:hover:not(.is-on) {
  transform: none;
  background: color-mix(in srgb, var(--pf-text) 6%, transparent);
}
.perf-tab.is-on:hover { transform: none }

/* --- alta densidade de pixel ----------------------------------------------- */
/* Em retina a borda de 1px vira 0.5px fisico e some. O anel por box-shadow
   sobrevive ao arredondamento; a borda sozinha nao. */
@media (min-resolution: 2dppx) {
  .perf-kpi, .perf-form, .perf-head { border-color: color-mix(in srgb, var(--pf-border) 82%, transparent) }
}

@media (prefers-reduced-motion: reduce) {
  .perf-btn, .perf-btn--pri, .perf-tab { transition: none }
  .perf-btn:active, .perf-btn--pri:active { transform: none }
}

/* ==== PERFIL (fim) ==== */

/* ==== CASSINO: faixa de provedores (inicio) ==== */
.cas-provs{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin:0 0 14px;padding:12px;
  border:1px solid var(--border,#2A2A2A);border-radius:14px;
  background:var(--surface,#111111);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
/* Reaproveita .cas-chip (mesma familia visual dos filtros de categoria) — nada
   de um segundo desenho de chip pro cliente ter que aprender duas vezes. */
.cas-provs .cas-chip{font-size:12.5px;padding:8px 13px;min-height:38px}
@media(max-width:640px){
  /* No celular a faixa rola na horizontal em vez de virar um paredao de 6 linhas. */
  .cas-provs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cas-provs::-webkit-scrollbar{display:none}
  .cas-provs .cas-chip{flex:0 0 auto}
}
/* ==== CASSINO: faixa de provedores (fim) ==== */


/* ---- tinta legivel sobre a cor da marca (GERADO) --------------------------
   Uma regra por seletor que pinta o fundo de lima, mais os descendentes dele.
   Lista extraida do proprio CSS acima — se amanha alguem pintar mais um botao
   de lima, basta regerar e a tinta acompanha. */
.brand-superbetbr .navlink.active,
.brand-superbetbr .navlink.active *,
.brand-superbetbr .navgroup.open > .navgroup__head,
.brand-superbetbr .navgroup.open > .navgroup__head *,
.brand-superbetbr .odd-cell.on:not(.locked):not(:disabled),
.brand-superbetbr .odd-cell.on:not(.locked):not(:disabled) *,
.brand-superbetbr .feat__odd.on,
.brand-superbetbr .feat__odd.on *,
.brand-superbetbr .market__row .odd-badge.on,
.brand-superbetbr .market__row .odd-badge.on *,
.brand-superbetbr .day-tab.active,
.brand-superbetbr .day-tab.active *,
.brand-superbetbr #bs-pin,
.brand-superbetbr #bs-pin *,
.brand-superbetbr .btn--success,
.brand-superbetbr .btn--success *,
.brand-superbetbr #g-entrar,
.brand-superbetbr #g-entrar *,
.brand-superbetbr .tab.active,
.brand-superbetbr .tab.active *,
.brand-superbetbr .bcar__dots .bdot.on,
.brand-superbetbr .bcar__dots .bdot.on *,
.brand-superbetbr .feat__nav,
.brand-superbetbr .feat__nav *,
.brand-superbetbr .feat__nav:hover,
.brand-superbetbr .feat__nav:hover *,
.brand-superbetbr .live-tab.active,
.brand-superbetbr .live-tab.active *,
.brand-superbetbr .shell.theme-cyber .btn--primary,
.brand-superbetbr .shell.theme-cyber .btn--primary *,
.brand-superbetbr .shell.theme-cyber .btn--success,
.brand-superbetbr .shell.theme-cyber .btn--success *,
.brand-superbetbr .pixmodal__steps .pixstep-n,
.brand-superbetbr .pixmodal__steps .pixstep-n *,
.brand-superbetbr .criar-toggle input:checked + .criar-slider,
.brand-superbetbr .criar-toggle input:checked + .criar-slider *,
.brand-superbetbr .lm-page .lm-sfA,
.brand-superbetbr .lm-page .lm-sfA *,
.brand-superbetbr .lm-page .lm-segA,
.brand-superbetbr .lm-page .lm-segA *,
.brand-superbetbr .lm-page .lm-pitch,
.brand-superbetbr .lm-page .lm-pitch *,
.brand-superbetbr .lm-page .odd-badge.on,
.brand-superbetbr .lm-page .odd-badge.on *,
.brand-superbetbr .cupom-fab,
.brand-superbetbr .cupom-fab *,
.brand-superbetbr .lot-qtd.is-on,
.brand-superbetbr .lot-qtd.is-on *,
.brand-superbetbr .lot-tipo__b.is-on,
.brand-superbetbr .lot-tipo__b.is-on *,
.brand-superbetbr .lot-num.is-on,
.brand-superbetbr .lot-num.is-on *,
.brand-superbetbr .lot-ticket-nums span,
.brand-superbetbr .lot-ticket-nums span *,
.brand-superbetbr .lot #lot-pin,
.brand-superbetbr .lot #lot-pin * {
  color: var(--accent-ink) !important;
}

/* ---- icones/chevrons: 3.15:1 -> 9.26:1 (GERADO) --------------------------- */
.brand-superbetbr .ico,
.brand-superbetbr .chev { color: var(--muted); }

/* ---- tela de boot no tema escuro (GERADO) --------------------------------- */
.brand-superbetbr .boot-brand { background: var(--bg); }
.brand-superbetbr .rl-txt { color: var(--text); }
.brand-superbetbr #route-loader:has(.rl-brand) {
  background: rgba(0, 0, 0, .82);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* ============================================================================
   POLIMENTO SUPER BET BR
   Escrito em cima das classes REAIS do app (medidas no DOM em producao, nao
   inventadas): .odd-cell .feat__odd .game-row .mega__card .day-tab .topbar
   .navlink .btn .input .league-bar
   Cada bloco abaixo resolve um problema que eu MEDI, e diz qual.
   ============================================================================ */

/* ---- 1. Alvo de toque -----------------------------------------------------
   MEDIDO: .btn 35px de altura, button 38px, .g-more 17px. O minimo confortavel
   e 44px. Aumentar a altura de todos quebraria a densidade da grade de odds —
   entao a area CLICAVEL cresce sem a caixa crescer: um ::after invisivel
   estende o alvo para fora. O layout nao muda um pixel; o dedo acerta. */
.brand-superbetbr .btn,
.brand-superbetbr .g-more,
.brand-superbetbr .odd-cell { position: relative; }

.brand-superbetbr .btn::after,
.brand-superbetbr .g-more::after,
.brand-superbetbr .odd-cell::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  min-width: 44px;
  height: 100%;
  min-height: 44px;
  z-index: 0;
}
/* O conteudo real fica ACIMA do alvo invisivel, senao o texto some. */
.brand-superbetbr .odd-cell > *,
.brand-superbetbr .btn > * { position: relative; z-index: 1; }

/* ---- 2. transition: all --------------------------------------------------
   MEDIDO: .odd-cell, .day-tab, .g-more e .topbar usam `transition: all`. O
   `all` manda o navegador vigiar TODA propriedade animavel — inclusive as que
   causam layout. Numa tela com 45 odds isso e trabalho puro por quadro. Aqui a
   lista e explicita, e so com propriedades baratas (transform/opacidade/cor). */
.brand-superbetbr .odd-cell,
.brand-superbetbr .day-tab,
.brand-superbetbr .g-more,
.brand-superbetbr .feat__odd,
.brand-superbetbr .mega__cta {
  transition:
    background-color .16s cubic-bezier(.16,1,.3,1),
    border-color     .16s cubic-bezier(.16,1,.3,1),
    color            .16s cubic-bezier(.16,1,.3,1),
    transform        .12s cubic-bezier(.16,1,.3,1),
    box-shadow       .16s cubic-bezier(.16,1,.3,1);
}
.brand-superbetbr .topbar {
  transition: background-color .2s cubic-bezier(.16,1,.3,1),
              box-shadow      .2s cubic-bezier(.16,1,.3,1);
}

/* ---- 3. Resposta ao toque -------------------------------------------------
   Apostar e apertar botao o dia inteiro. Sem confirmacao tatil o cambista
   aperta duas vezes na duvida — e aposta duplicada e problema de dinheiro, nao
   de estetica. 120ms fica abaixo do limiar de "travou". */
.brand-superbetbr .odd-cell:active,
.brand-superbetbr .feat__odd:active,
.brand-superbetbr .btn:active,
.brand-superbetbr .mega__cta:active,
.brand-superbetbr .day-tab:active { transform: scale(.97); }

/* ---- 4. Odd selecionada ---------------------------------------------------
   A classe e `.on` — CONFERIDA clicando numa odd em producao e lendo o
   classList antes/depois, nao chutada.
   O dourado pede tinta ESCURA: texto preto sobre dourado da 10.02:1 (AAA); texto
   branco daria 2.1:1, ilegivel. O anel externo marca a selecao sem depender so
   da cor — quem nao distingue dourado de cinza ainda ve o anel. */
.brand-superbetbr .odd-cell.on,
.brand-superbetbr .feat__odd.on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .28),
              0 2px 10px rgba(var(--accent-rgb), .22);
  font-weight: 800;
}
.brand-superbetbr .odd-cell.on *,
.brand-superbetbr .feat__odd.on * { color: var(--accent-ink); }

/* ---- 5. Foco de teclado ---------------------------------------------------
   Anel dourado sobre preto: 10.02:1. `:focus-visible` so aparece para quem
   navega por teclado — nao polui o clique de mouse. */
.brand-superbetbr :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---- 6. Topbar de vidro ---------------------------------------------------
   O conteudo passa POR BAIXO ao rolar, em vez de bater numa faixa opaca. O
   fallback solido vem primeiro: onde nao ha backdrop-filter fica opaco mesmo —
   nunca translucido ilegivel. */
.brand-superbetbr .topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .brand-superbetbr .topbar {
    background: rgba(0, 0, 0, .82);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

/* ---- 7. Barra de liga -----------------------------------------------------
   Um fio dourado na borda esquerda ancora a leitura sem pintar a faixa inteira —
   faixa cheia de cor forte cansa numa lista longa. */
.brand-superbetbr .league-bar {
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .10), transparent 42%);
}

/* ---- 8. Cartoes -----------------------------------------------------------
   MEDIDO: o cartao separa do fundo por 1.09:1 — praticamente nada. Sem
   escurecer o fundo (ja esta no minimo saudavel), a separacao vem de uma linha
   clara no topo: e assim que profundidade se le em tema escuro. */
.brand-superbetbr .card,
.brand-superbetbr .feat__card,
.brand-superbetbr .mega__card {
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.5);
}
.brand-superbetbr .mega__card:hover,
.brand-superbetbr .feat__card:hover {
  border-color: rgba(var(--accent-rgb), .45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 20px rgba(0,0,0,.55);
}

/* ---- 9. Entrada da lista de jogos ----------------------------------------
   MEDIDO: `.game-row` NAO sao irmaos entre si — vem de 2 em 2 dentro de cada
   `.tablewrap`. Escalonar por :nth-child neles daria so 0ms e 25ms para a
   pagina inteira, ou seja, nao seria escalonamento nenhum. Quem e irmao de
   verdade e `.league-block` (7 na home): a cascata acontece por LIGA, que
   inclusive e a leitura natural da tela.
   Teto em 210ms: sem teto, 20 ligas levariam 600ms so para terminar de
   aparecer — ai a animacao deixa de ser acabamento e vira espera. */
@media (prefers-reduced-motion: no-preference) {
  .brand-superbetbr .league-block { animation: sbb-in .3s cubic-bezier(.16,1,.3,1) both; }
  .brand-superbetbr .league-block:nth-child(1) { animation-delay: 0ms; }
  .brand-superbetbr .league-block:nth-child(2) { animation-delay: 30ms; }
  .brand-superbetbr .league-block:nth-child(3) { animation-delay: 60ms; }
  .brand-superbetbr .league-block:nth-child(4) { animation-delay: 90ms; }
  .brand-superbetbr .league-block:nth-child(5) { animation-delay: 120ms; }
  .brand-superbetbr .league-block:nth-child(6) { animation-delay: 150ms; }
  .brand-superbetbr .league-block:nth-child(7) { animation-delay: 180ms; }
  .brand-superbetbr .league-block:nth-child(n+8) { animation-delay: 210ms; }
}
@keyframes sbb-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 10. Cupom ------------------------------------------------------------
   A classe e `.cupom-fab` — achada varrendo os elementos `position:fixed` da
   tela, nao adivinhada (`.cupom` e `.betslip-fab`, que eu tinha escrito antes,
   nao existem no app).
   O cupom e a acao que fecha dinheiro: leva a cor da marca, tinta escura para
   o numero ficar legivel, e um pulso quando entra selecao (a classe
   `.has-count` o app ja aplica sozinho). */
.brand-superbetbr .cupom-fab {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 6px 22px rgba(var(--accent-rgb), .28), 0 2px 6px rgba(0,0,0,.5);
}
.brand-superbetbr .cupom-fab * { color: var(--accent-ink); }
.brand-superbetbr .cupom-fab:active,
.brand-superbetbr .to-top:active { transform: scale(.94); }
@media (prefers-reduced-motion: no-preference) {
  .brand-superbetbr .has-count { animation: sbb-pulse .32s cubic-bezier(.16,1,.3,1); }
}
@keyframes sbb-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* ---- 11. Campos ----------------------------------------------------------- */
.brand-superbetbr .input:focus,
.brand-superbetbr input:focus,
.brand-superbetbr select:focus,
.brand-superbetbr textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
  outline: none;
}

/* ---- 12. Respeito a quem desliga animacao --------------------------------
   Regra guarda-chuva: qualquer coisa que eu animei acima morre aqui. Quem
   marca "reduzir movimento" no sistema costuma ter motivo vestibular. */
@media (prefers-reduced-motion: reduce) {
  .brand-superbetbr *,
  .brand-superbetbr *::before,
  .brand-superbetbr *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 13. Anel de carregamento ---------------------------------------------
   O gradiente do anel vinha do tema base como dourado + BRANCO + VERMELHO —
   o vermelho ali era o `--danger`, herdado de um tema onde ele era cor de
   marca. Aqui vermelho significa dinheiro saindo, entao nao pode aparecer
   girando na tela de carregamento: as duas cores do anel passam a ser as duas
   cores da logo (dourado e azul neon).
   O `::after` do app.css desenha ainda um aro vermelho de 1px por fora — e
   pequeno, mas e exatamente a borda que aparece na foto. Vai para o azul. */
.brand-superbetbr .rl-brand .rl-ring {
  background: conic-gradient(from 0deg,
    var(--accent)  0%,
    #FFFFFF       14%,
    var(--accent2) 28%,
    #FFFFFF       42%,
    var(--accent) 56%,
    #FFFFFF       70%,
    var(--accent2) 84%,
    var(--accent) 100%);
}
.brand-superbetbr .rl-ring::after { border-color: rgba(var(--accent2-rgb), .22); }
.brand-superbetbr .rl-ring::before { border-color: rgba(255, 255, 255, .30); }

/* ---- 14. Botao ENTRAR do login --------------------------------------------
   Vinha `background: var(--danger)` do tema base — vermelho na acao PRINCIPAL
   de entrar, enquanto vermelho nesta interface significa dinheiro saindo. Vai
   para o verde, que e o "siga" universal e nao colide com a leitura do
   relatorio (la o verde aparece em coluna de numero, nao em botao). */
.brand-superbetbr .login__card #login-btn {
  background: var(--success) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(34, 197, 94, .30);
}
.brand-superbetbr .login__card #login-btn:hover { filter: brightness(1.08); }

/* ---- 15. Faixa "poucos jogos hoje" ----------------------------------------
   O padrao do app.css e um gradiente roxo/indigo (#2b2a76 -> #3a39a0), que nao
   tem relacao com esta marca. Passa a usar as cores da logo: fundo preto com um
   veu dourado e o fio da marca na borda. */
.brand-superbetbr .few-games {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .04));
  border: 1px solid rgba(var(--accent-rgb), .34);
  border-left: 3px solid var(--accent);
  color: var(--text);
}
.brand-superbetbr .few-games__btn {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
}

/* ---- 16. GERAR BILHETE: azul -> dourado ------------------------------------
   O CTA da Super Dica vinha azul (--accent2-600) porque o gerador escureceu o
   azul da logo para o texto branco passar em AA. Mas azul aqui competia com o
   dourado das odds selecionadas e do CUPOM: numa mesma tela, DUAS cores
   disputando "aperte aqui". Passa a ser dourado, com tinta escura (10.02:1 AAA)
   — e o azul volta ao papel de link/borda, que e onde ele nao briga. */
.brand-superbetbr .mega__cta {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
}
.brand-superbetbr .mega__cta * { color: var(--accent-ink); }
.brand-superbetbr .mega__cta:hover { background: var(--accent-hover); }