/* Login / cadastro local (demo) — paleta alinhada ao tema verde do site */
#local-auth-root {
  --al-bg-modal: #f4fce8;
  --al-bg-input: #e8f9c1;
  --al-text: #14532d;
  --al-text-muted: rgba(20, 83, 45, 0.72);
  --al-primary: #22a356;
  --al-primary-hover: #1b8f49;
  --al-link: #ea580c;
  --al-radius: 14px;
  --al-shadow: 0 18px 50px rgba(15, 80, 30, 0.18);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  pointer-events: auto;
}

#local-auth-root[hidden] {
  display: none !important;
}

.local-auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 55, 20, 0.45);
  backdrop-filter: blur(8px);
}

.local-auth-sheet {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: min(92vh, 640px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--al-bg-modal);
  border-radius: var(--al-radius) var(--al-radius) 0 0;
  box-shadow: var(--al-shadow);
  box-sizing: border-box;
  margin: 0 auto;
}

.local-auth-sheet-top {
  flex-shrink: 0;
  padding: 1.1rem 1.25rem 0;
  background: var(--al-bg-modal);
  border-radius: var(--al-radius) var(--al-radius) 0 0;
}

.local-auth-sheet-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.65rem 1.25rem 1.35rem;
}

.local-auth-sheet-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: -0.15rem 0 0.55rem;
  min-height: 2rem;
}

.local-auth-exit {
  border: none;
  background: transparent;
  color: var(--al-text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.4rem 0.65rem 0.4rem 0;
  border-radius: 8px;
  font-family: inherit;
}

.local-auth-exit:hover {
  color: var(--al-text);
  background: rgba(20, 83, 45, 0.07);
}

.local-auth-exit:focus-visible {
  outline: 2px solid rgba(34, 163, 86, 0.5);
  outline-offset: 2px;
}

.local-auth-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  padding: 3px;
  background: rgba(232, 249, 193, 0.65);
  border-radius: 12px;
}

.local-auth-tabs button {
  flex: 1;
  border: none;
  padding: 0.55rem 0.5rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  background: transparent;
  color: var(--al-text-muted);
}

.local-auth-tabs button[data-active="true"] {
  background: #fff;
  color: var(--al-text);
  box-shadow: 0 2px 8px rgba(20, 80, 40, 0.12);
}

.local-auth-title {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--al-text);
  text-align: center;
}

.local-auth-sub {
  text-align: center;
  font-size: 0.82rem;
  color: var(--al-text-muted);
  margin: 0 0 0.85rem;
}

.local-auth-sub a {
  color: var(--al-link);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.local-auth-fields {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.local-auth-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--al-text-muted);
}

.local-auth-fields input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(20, 83, 45, 0.12);
  background: var(--al-bg-input);
  color: var(--al-text);
  font-size: 0.95rem;
}

.local-auth-fields input:focus {
  outline: 2px solid rgba(34, 163, 86, 0.45);
  outline-offset: 0;
}

.local-auth-phone-field > span:first-child,
.local-auth-register-field > span:first-child {
  display: none;
}

.local-auth-phone-control {
  width: 100%;
  min-height: 2.85rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(20, 83, 45, 0.12);
  background: var(--al-bg-input);
}

.local-auth-phone-flag {
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #16a34a;
  font-size: 1.05rem;
  flex: 0 0 auto;
}

.local-auth-phone-code {
  color: var(--al-text);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  padding-right: 0.7rem;
  border-right: 2px solid rgba(20, 83, 45, 0.28);
  flex: 0 0 auto;
}

.local-auth-fields .local-auth-phone-control input {
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  outline: none;
}

.local-auth-fields .local-auth-phone-control:focus-within {
  outline: 2px solid rgba(34, 163, 86, 0.45);
  outline-offset: 0;
}

.local-auth-remember {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--al-text);
  margin-top: 0.15rem;
}

.local-auth-remember input {
  width: auto;
  accent-color: var(--al-primary);
}

.local-auth-submit {
  width: 100%;
  margin-top: 0.65rem;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 12px;
  background: var(--al-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  position: relative;
}

.local-auth-submit:hover {
  background: var(--al-primary-hover);
}

.local-auth-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.local-auth-err {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: #b91c1c;
  min-height: 1.1rem;
}

.local-auth-hint {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  color: var(--al-text-muted);
  text-align: center;
}

/* Barra logada — DEPOSITAR + saldo (avatar só no ion-img à esquerda; sem duplicata no chip) */
.local-auth-header-override {
  position: relative;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 0.45rem !important;
}

.local-auth-header-override > *:not(.local-header-chip) {
  display: none !important;
}

.local-header-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  border: none;
  box-shadow: none;
  gap: 0.45rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.local-header-chip__depositar {
  flex-shrink: 0;
  padding: 0.5rem 0.95rem;
  border-radius: 10px;
  border: none;
  background: #22c55e;
  color: #fff;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
}

.local-header-chip__depositar:hover {
  filter: brightness(1.08);
}

.local-header-chip__depositar:active {
  transform: translateY(1px);
}

.local-header-chip__balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  border: none;
  background: #3a3a3d;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.local-header-chip__balance-pill:hover {
  background: #454549;
}

.local-header-chip__coin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 32% 28%, #ffe082 0%, #ffc107 45%, #f59e0b 100%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22);
}

.local-header-chip__bal-text {
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.local-header-chip__plus {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  margin-left: 0.1rem;
  opacity: 0.92;
}

/* Removido do JS; regra de segurança se o DOM antigo ainda existir em cache */
.local-header-chip__user {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.local-header-chip__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  vertical-align: middle;
}

.local-header-chip__avatar-fallback {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.local-header-chip__chev {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid rgba(255, 255, 255, 0.9);
  margin-left: 1px;
  flex-shrink: 0;
}

/*
 * O `<img>` dentro do Shadow DOM do `<ion-img>` não é “duplicata” apagável — o Ionic usa esse nó interno.
 * Duplicação *visual*: o bundle ainda tem `ion-img.assets-img` (avatar Vue) e o chip injecta `.local-header-chip__avatar`.
 * Esconder só o ion-img do strip quando o chip irmão já está presente; mantém Saldo/Depósito no chip (não mexer no primaryBtn ao lado).
 */
#app .assets-box:has(> .local-header-chip) ion-img.assets-img {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  --width: 0 !important;
}

/*
 * Strip Saldo / header (Vue): ion-img.assets-img — círculo com recorte; sem isto a imagem ultrapassa o mask.
 * O bundle usa width:0 até .good-img; o auth-local.js adiciona .good-img ao injectar avatar.
 * Alguns temas desenham um círculo escuro em ::before/::after do inner — remover.
 */
#app .assets-box::before,
#app .assets-box::after,
#app .assets-box .assets-box-inner::before,
#app .assets-box .assets-box-inner::after,
#app .assets-box .assets-box-wrap::before,
#app .assets-box .assets-box-wrap::after {
  content: none !important;
  display: none !important;
}

#app ion-img.assets-img {
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  vertical-align: middle;
  --border-radius: 50%;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

#app ion-img.assets-img::part(image) {
  object-fit: cover !important;
  object-position: center !important;
}

#app .assets-box-inner ion-img.assets-img {
  width: 2.375rem !important;
  height: 2.375rem !important;
  min-width: 2.375rem;
  max-width: 2.375rem;
  min-height: 2.375rem;
  max-height: 2.375rem;
}

#app .assets-box > ion-img.assets-img {
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem;
  max-width: 1.25rem;
  min-height: 1.25rem;
  max-height: 1.25rem;
}

/*
 * Início (imgContentBox): `img.float-img` = decoração icon1 (irmão directo do content-box) — com asset em falta
 * vira um disco escuro junto ao avatar. O strip em layout1 usa `.log-in-box` + `account-icon`; em alguns estados
 * pode não haver `.assets-box` no mesmo bloco, por isso também escondemos com `:has(.log-in-box)`.
 */
#app .content-box:has(.assets-box) > img.float-img,
#app .content-box:has(.log-in-box) > img.float-img {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
}

/*
 * layout1 (início): o bundle não fixa `.float-img` em absolute — com skew + space-between o icon1
 * pode cair visualmente junto ao avatar e ler-se como segundo “círculo” escuro. Remover sempre.
 */
#app .content-box.layout1 img.float-img,
html body .content-box.layout1 img.float-img {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
}

/*
 * Nota: esconder `.assets-box ion-img.assets-img` quando há `account-icon` deixava o recorte na pílula
 * «Saldo» vazio (o ícone da conta nem sempre ocupa esse slot). Manter o avatar na pílula visível.
 */

/*
 * Início layout28 (user-info-box): fundo decorativo em `.bg-svg` — SVG inline (gradiente) + `::after` com
 * bg-header-28-*.svg. Só esconder `::after` deixa o path SVG visível (disco escuro à esquerda do avatar).
 */
#app .user-info-box .bg-svg {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

#app .user-info-box .bg-svg::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* Mesmo strip se o Vue não estiver aninhado sob #app (fallback) */
html body .layout28.user-info-box .bg-svg {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

html body .layout28.user-info-box .bg-svg::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/*
 * Drawer / topo do menu (user-info layout28): caixa «Saldo» — esconder icon2 (ion-img.assets-img)
 * e o float-img(icon1) que repetiam o círculo vazio ao lado do texto. Só .user-info-box, não o header da home.
 */
#app .user-info-box ion-img.assets-img,
#app .user-info-box .content-box img.float-img,
html body .layout28.user-info-box .content-box img.float-img {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: none !important;
  overflow: hidden !important;
  --width: 0 !important;
}

/* Avatar na zona user-info (DevTools: ion-img.account-icon), não só .assets-img */
#app ion-img.account-icon {
  flex-shrink: 0;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  vertical-align: middle;
  --border-radius: 50%;
  /* Ionic :host usa object-fit: contain; o <img> no shadow herda — gera “anel”/área escura; cover no host + na part. */
  object-fit: cover !important;
  object-position: center !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem;
  max-width: 2.5rem;
  min-height: 2.5rem;
  max-height: 2.5rem;
  position: relative;
  z-index: 2;
}

#app ion-img.account-icon::part(image) {
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  border-radius: 50% !important;
  display: block !important;
}

html body ion-img.account-icon {
  display: block;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  object-fit: cover !important;
  object-position: center !important;
  background: transparent !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem;
  max-width: 2.5rem;
  min-height: 2.5rem;
  max-height: 2.5rem;
  position: relative;
  z-index: 2;
}

html body ion-img.account-icon::part(image) {
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Raiz injectada: espelha o nó user-base-info do perfil Ionic (sem data-v do bundle) */
.user-base-info.local-profile-dashboard {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Painel perfil (/main/perfil) — fluxo em coluna como no print: cabeçalho → VIP → Suporte + lista */
.local-profile-dashboard {
  position: relative;
  z-index: 1;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Inter", sans-serif;
  padding: 0.55rem 0.7rem 1.25rem;
  box-sizing: border-box;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  background: transparent;
}

/* Empilha cartão verde + VIP + menu; sem segunda camada verde-clara (fundo = página) */
.local-profile-hero-stack {
  position: relative;
  background: transparent;
  border-radius: 0;
  padding-bottom: 0;
  overflow: visible;
}

.local-profile-top {
  position: relative;
  z-index: 2;
  border-radius: 24px 24px 32px 32px;
  margin-bottom: -10px;
  padding: 1.15rem 1rem 1.55rem;
  overflow: hidden;
  background: linear-gradient(155deg, #b8e84a 0%, #9ed836 38%, #7ec918 100%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 22px rgba(60, 100, 20, 0.22);
}

.local-profile-top__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
      circle at 12% 8%,
      rgba(255, 255, 255, 0.55) 0%,
      transparent 28%
    ),
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.28) 0%, transparent 22%),
    radial-gradient(circle at 40% 92%, rgba(255, 255, 255, 0.14) 0%, transparent 35%);
  opacity: 0.95;
}

/* Brilho em losango / faixas discretas (referência) */
.local-profile-top__pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 9px,
      rgba(255, 255, 255, 0.1) 9px,
      rgba(255, 255, 255, 0.1) 10px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 14px,
      rgba(255, 255, 255, 0.06) 14px,
      rgba(255, 255, 255, 0.06) 15px
    );
}

.local-profile-user-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  z-index: 1;
  -webkit-user-select: text;
  user-select: text;
}

/* Avatar: clique abre modal «Mudar avatar» (auth-local.js) */
.local-profile-avatar-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.local-profile-avatar-select:focus-visible {
  outline: 3px solid #1b5e20;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(27, 94, 32, 0.25);
}

.local-profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(40, 60, 20, 0.25);
  background: #e8e8e8;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.local-profile-user-meta {
  flex: 1;
  min-width: 0;
}

.local-profile-phone-line {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.local-profile-phone-line .local-profile-header-vip {
  flex-shrink: 0;
  font-size: 0.62rem;
  padding: 0.18rem 0.48rem 0.2rem;
}

.local-profile-phone {
  font-size: 1.12rem;
  font-weight: 800;
  color: #0d0d0d;
  letter-spacing: 0.02em;
}

.local-profile-vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.55rem 0.22rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #4a4a4a;
  background: linear-gradient(180deg, #f0f0f0 0%, #c0c0c0 45%, #a8a8a8 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.local-profile-vip-badge .local-profile-vip-trophy {
  display: inline-flex;
  color: #e8e8e8;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
}

.local-profile-id-line {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1b5e20;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.local-profile-id-num {
  font-weight: 700;
}

.local-profile-copy-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  border: none;
  border-radius: 6px;
  background: rgba(46, 160, 67, 0.2);
  color: #1b5e20;
  cursor: pointer;
  line-height: 0;
}

.local-profile-copy-id:active {
  opacity: 0.85;
}

.local-profile-stats {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.local-profile-stat {
  flex: 1;
  min-width: 0;
}

.local-profile-stat-label-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.local-profile-stat-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: #1b5e20;
}

.local-profile-stat-label--bonus {
  font-size: 0.66rem;
  line-height: 1.3;
  font-weight: 700;
  color: #1b5e20;
}

.local-profile-stat-value-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.2rem;
  flex-wrap: wrap;
}

.local-profile-balance {
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.local-profile-currency {
  color: #d32f2f;
  font-weight: 800;
}

.local-profile-amount {
  color: #0d0d0d;
  font-weight: 800;
}

.local-profile-refresh-bal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.06);
  color: #1a1a1a;
  cursor: pointer;
  line-height: 0;
  border-radius: 50%;
  flex-shrink: 0;
}

.local-profile-refresh-bal:active {
  opacity: 0.88;
}

.local-profile-stat-value {
  margin-top: 0.2rem;
  font-size: 1.05rem;
  font-weight: 800;
}

.local-profile-stat-value--dark {
  color: #111;
}

.local-profile-stat-value--bonus {
  margin-top: 0.2rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0d0d0d;
}

.local-profile-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.55rem;
  margin-top: 0.95rem;
}

.local-profile-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.72rem 0.55rem;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.local-profile-btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.local-profile-btn--dep {
  background: linear-gradient(180deg, #fffef5 0%, #f0ed5e 45%, #e6e338 100%);
  color: #0d280d;
  border: 1px solid rgba(200, 190, 50, 0.55);
}

.local-profile-btn--wd {
  background: linear-gradient(180deg, #fffef5 0%, #f0ed5e 45%, #e6e338 100%);
  color: #0d280d;
  border: 1px solid rgba(200, 190, 50, 0.55);
}

.local-profile-vip-card {
  position: relative;
  z-index: 1;
  margin: 0.5rem 0.55rem 0;
  padding: 1.35rem 1.05rem 1.2rem;
  padding-top: 2.35rem;
  border-radius: 20px;
  background: #2a2a2a;
  color: #e8e8e8;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.local-profile-vip-details {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  border: 1px solid #5a5a5a;
  background: linear-gradient(180deg, #4a4a4a 0%, #353535 55%, #2c2c2c 100%);
  color: #e8e8e8;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.local-profile-vip-details:active {
  opacity: 0.92;
}

.local-profile-vip-details-chev {
  font-size: 0.62rem;
  opacity: 0.85;
  margin-left: 0.05rem;
}

.local-profile-vip-head {
  margin-bottom: 0.15rem;
}

.local-profile-vip-current-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.local-profile-vip-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.34rem 0.62rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, #d8d8d8 0%, #9a9a9a 38%, #707070 100%);
  border: 1px solid #9e9e9e;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.25);
}

.local-profile-vip-pill-ico {
  display: inline-flex;
  color: #fff;
  opacity: 0.95;
  line-height: 0;
}

.local-profile-vip-card-title {
  display: block;
  font-size: 0.84rem;
  font-weight: 800;
  color: #d0d0d0;
  margin: 1rem 0 0.45rem;
  letter-spacing: 0.02em;
}

.local-profile-vip-badge--inline {
  font-size: 0.65rem;
  padding: 0.18rem 0.5rem;
}

.local-profile-nivel-txt {
  font-size: 0.78rem;
  color: #bdbdbd;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.local-profile-vip-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  margin-top: 0.2rem;
}

.local-profile-vip-track {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: #1f1f1f;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.local-profile-vip-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8a8a8a, #d0d0d0);
}

.local-profile-vip-next {
  flex-shrink: 0;
}

.local-profile-vip-shield {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.3rem 0.5rem 0.32rem;
  border-radius: 10px;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, #c4c4c4 0%, #7a7a7a 45%, #5e5e5e 100%);
  border: 1px solid #8a8a8a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.local-profile-vip-shield-ico {
  display: inline-flex;
  color: #fff;
  opacity: 0.95;
}

.local-profile-criteria-line {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #c8c8c8;
}

.local-profile-hl {
  color: #f5a623;
  font-weight: 800;
}

.local-profile-muted {
  color: #a8a8a8;
}

/* Menu: Suporte num cartão; Relatórios…Sair noutro — espaço claro após o VIP e antes do rodapé */
.local-profile-menu-wrap {
  margin-top: 1rem;
  padding: 0 0.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.local-profile-menu-card {
  background: #e8f6d0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(74, 124, 35, 0.15);
  box-shadow: 0 2px 8px rgba(60, 90, 30, 0.07);
}

.local-profile-menu-card--stack .local-profile-menu-item {
  border-bottom: 1px solid rgba(74, 124, 35, 0.12);
}

.local-profile-menu-card--stack .local-profile-menu-item:last-child {
  border-bottom: none;
}

.local-profile-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.88rem 1rem;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  gap: 0.75rem;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.local-profile-menu-item:active {
  background: rgba(74, 124, 35, 0.08);
}

.local-profile-menu-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

.local-profile-menu-ico svg {
  display: block;
}

.local-profile-menu-label {
  flex: 1;
  font-weight: 700;
  font-size: 0.88rem;
  color: #3d5220;
  letter-spacing: 0.01em;
}

.local-profile-menu-chev {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1rem;
  color: #3d5220;
  opacity: 0.75;
  line-height: 1;
}

.local-profile-menu-item--sair .local-profile-menu-label {
  color: #2e4a18;
}

@keyframes local-profile-spin-kf {
  to {
    transform: rotate(360deg);
  }
}

.local-profile-spin {
  animation: local-profile-spin-kf 0.55s linear;
}

/*
 * Rodapé (tab bar): fixo ao fundo da viewport em /main/* (body.local-main-tabbar-fix).
 * z-index alto mas abaixo de #local-auth-root (2147483000) e dos ecrãs fixos (2147483600+).
 * Em /main/perfil com zoom o painel passava por cima quando aqui era 50.
 */
#app .tab-bar-wrap {
  z-index: 2147482900 !important;
  pointer-events: auto;
  overflow: visible !important;
  --ep-color-background-fill-foot-bar: #f0ed5e;
}

#app .tab-bar-wrap .tab-bar {
  overflow: visible !important;
}

/* Traços /// no rodapé (âncora: .tab-bar-wrap com position:fixed do bundle/JS — evitar position:relative aqui). */
body.local-main-tabbar-fix #app .tab-bar-wrap::before,
body.local-main-tabbar-fix #app .tab-bar-wrap::after {
  content: "///";
  position: absolute;
  top: 5px;
  bottom: auto;
  font-size: 0.42rem;
  font-weight: 900;
  color: #2d4a22;
  letter-spacing: -0.12em;
  z-index: 12;
  pointer-events: none;
  font-family: system-ui, sans-serif;
  line-height: 1;
  transform: rotate(-14deg);
  opacity: 0.92;
}

body.local-main-tabbar-fix #app .tab-bar-wrap::before {
  left: 7px;
}

body.local-main-tabbar-fix #app .tab-bar-wrap::after {
  right: 7px;
}

/*
 * Fundo do rodapé com bossa central (layout30): SVG local — o clone não traz flexible-30.svg do bundle.
 */
#app .tab-bar-wrap .tab-bar .inner-wrap {
  background-color: transparent !important;
  background-image: url("/assets/local-tabbar-hump-bg.svg") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
}

/* Fallback quando .inner-wrap está directamente sob .tab-bar-wrap (ex.: /main/promo). */
#app .tab-bar-wrap > .inner-wrap {
  background-color: transparent !important;
  background-image: url("/assets/local-tabbar-hump-bg.svg") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
}

/* Botão central (anel): o bundle usa inline url(/assets/bg-flexible-…). */
#app .tab-bar-wrap .flexible-tab .flexible-tab-box {
  background-image: none !important;
  background: radial-gradient(
      ellipse 85% 75% at 50% 45%,
      #fffef8 0%,
      #f5f0a8 45%,
      #e6e338 100%
    )
    !important;
}

#app ion-tab-bar {
  --background: transparent;
  --border: none;
}

/* Só afinar inactivos: o destaque de aba activa (círculo + ícone) vem do tema no bundle, como no Perfil. */
#app ion-tab-button {
  --color: rgba(95, 72, 28, 0.78);
}

#app ion-tab-button:not(.local-tab-route-active)::part(native) {
  color: rgba(95, 72, 28, 0.78);
}

/*
 * Rodapé — estado activo (.bottom-nav-item + .nav-active): modelo com ícone em destaque
 * (escuro + sombra, escala), não só o rótulo. Presente central sem .bottom-nav-item.
 */
#app .tab-bar .tab-btn.bottom-nav-item {
  transition: color 0.25s ease, filter 0.25s ease;
  opacity: 1;
  transform: none;
  box-shadow: none;
}

/* Inactivos: esmorecer sobretudo o ícone; texto mantém-se legível sem roubar o foco */
#app .tab-bar .tab-btn.bottom-nav-item:not(.nav-active) .icon-wrap .ion-img,
#app .tab-bar .tab-btn.bottom-nav-item:not(.nav-active) .icon-wrap ion-img,
#app .tab-bar .tab-btn.bottom-nav-item:not(.nav-active) > ion-img,
#app .tab-bar .tab-btn.bottom-nav-item:not(.nav-active) img.tab-img {
  opacity: 0.5 !important;
  filter: brightness(0.78) saturate(0.88) !important;
  transform: scale(0.96);
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

#app .tab-bar .tab-btn.bottom-nav-item:not(.nav-active) .t_label,
#app .tab-bar .tab-btn.bottom-nav-item:not(.nav-active) ion-label.tab-label {
  font-weight: 600 !important;
  color: #7a6f4a !important;
  --color: #7a6f4a !important;
  opacity: 0.95;
  text-shadow: none;
}

/* Activo: destaque no ícone (referência: silhueta escura + relevo; o verde vem do asset) */
#app .tab-bar .tab-btn.bottom-nav-item.nav-active .icon-wrap .ion-img,
#app .tab-bar .tab-btn.bottom-nav-item.nav-active .icon-wrap ion-img,
#app .tab-bar .tab-btn.bottom-nav-item.nav-active > ion-img,
#app .tab-bar .tab-btn.bottom-nav-item.nav-active img.tab-img {
  opacity: 1 !important;
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.42)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.28))
    contrast(1.08) saturate(1.12) !important;
  transform: scale(1.08);
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

#app .tab-bar .tab-btn.bottom-nav-item.nav-active .ion-img img,
#app .tab-bar .tab-btn.bottom-nav-item.nav-active ion-img::part(image) {
  opacity: 1 !important;
}

#app .tab-bar .tab-btn.bottom-nav-item.nav-active .t_label,
#app .tab-bar .tab-btn.bottom-nav-item.nav-active ion-label.tab-label {
  font-weight: 800 !important;
  color: #1a1a1a !important;
  --color: #1a1a1a !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 5px rgba(255, 255, 255, 0.35);
}

#app ion-tab-button.bottom-nav-item {
  transition: color 0.25s ease, filter 0.25s ease;
  opacity: 1;
  transform: none;
  box-shadow: none;
}

#app ion-tab-button.bottom-nav-item:not(.nav-active)::part(native) ion-icon,
#app ion-tab-button.bottom-nav-item:not(.nav-active) ion-icon {
  opacity: 0.5 !important;
  filter: brightness(0.78) saturate(0.88);
  transform: scale(0.96);
}

#app ion-tab-button.bottom-nav-item.nav-active::part(native) ion-icon,
#app ion-tab-button.bottom-nav-item.nav-active ion-icon {
  opacity: 1 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.42)) contrast(1.08) saturate(1.12);
  transform: scale(1.08);
}

/* Sinc local do rodapé: div.tab-btn — destaque = active-tab + local-footer-route-active (JS).
 * active-block fora do fluxo (igual ao bundle) para o ícone não “descer” ao seleccionar. */
#app .tab-bar [tab] .icon-wrap,
#app .tab-btn[tab] .icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 2.125rem;
  min-height: 2.125rem;
}
/*
 * O bundle usa .active-block como máscara escura atrás do ícone; no DOM actual só há ion-img por cima,
 * o que deixa um círculo preto enorme. Esconder em todas as abas — o ícone vem só do ion-img.
 */
#app .tab-btn[tab] .active-block,
#app .local-footer .tab-btn[tab] .active-block {
  display: none !important;
}
#app .tab-btn.local-footer-route-active[tab] .icon-wrap .ion-img,
#app .local-footer .tab-btn.local-footer-route-active[tab] .icon-wrap .ion-img,
#app .tab-btn.active-tab[tab] .icon-wrap .ion-img,
#app .local-footer .tab-btn.active-tab[tab] .icon-wrap .ion-img,
#app .tab-btn.local-tab-route-active[tab] .icon-wrap .ion-img,
#app .local-footer .tab-btn.local-tab-route-active[tab] .icon-wrap .ion-img {
  position: relative;
  z-index: 1;
}
/* Bundle: muitas abas usam ion-img directo sob .tab-btn (ex. Depósito tab="entrar"), sem .icon-wrap. */
#app .tab-btn.local-footer-route-active[tab] > ion-img,
#app .local-footer .tab-btn.local-footer-route-active[tab] > ion-img,
#app .tab-btn.active-tab[tab] > ion-img,
#app .local-footer .tab-btn.active-tab[tab] > ion-img,
#app .tab-btn.local-tab-route-active[tab] > ion-img,
#app .local-footer .tab-btn.local-tab-route-active[tab] > ion-img {
  position: relative;
  z-index: 1;
}
#app .tab-btn.local-footer-route-active[tab] .ion-img img,
#app .local-footer .tab-btn.local-footer-route-active[tab] .ion-img img,
#app .tab-btn.active-tab[tab] .ion-img img,
#app .local-footer .tab-btn.active-tab[tab] .ion-img img,
#app .tab-btn.local-tab-route-active[tab] .ion-img img,
#app .local-footer .tab-btn.local-tab-route-active[tab] .ion-img img {
  position: relative;
  z-index: 1;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0.02rem 0.02rem rgba(0, 0, 0, 0.2));
}
#app .tab-btn.local-footer-route-active[tab] .t_label,
#app .local-footer .tab-btn.local-footer-route-active[tab] .t_label,
#app .tab-btn.active-tab[tab] .t_label,
#app .local-footer .tab-btn.active-tab[tab] .t_label,
#app .tab-btn.local-tab-route-active[tab] .t_label,
#app .local-footer .tab-btn.local-tab-route-active[tab] .t_label,
#app .tab-btn.local-footer-route-active[tab] ion-label.tab-label,
#app .local-footer .tab-btn.local-footer-route-active[tab] ion-label.tab-label,
#app .tab-btn.active-tab[tab] ion-label.tab-label,
#app .local-footer .tab-btn.active-tab[tab] ion-label.tab-label,
#app .tab-btn.local-tab-route-active[tab] ion-label.tab-label,
#app .local-footer .tab-btn.local-tab-route-active[tab] ion-label.tab-label {
  color: #1a3d0a;
  --color: #1a3d0a;
  font-weight: 700;
}
#app .tab-btn:not(.local-footer-route-active):not(.active-tab):not(.local-tab-route-active) .t_label,
#app .local-footer
  .tab-btn:not(.local-footer-route-active):not(.active-tab):not(.local-tab-route-active)
  .t_label,
#app .tab-btn:not(.local-footer-route-active):not(.active-tab):not(.local-tab-route-active)
  ion-label.tab-label,
#app .local-footer
  .tab-btn:not(.local-footer-route-active):not(.active-tab):not(.local-tab-route-active)
  ion-label.tab-label {
  color: #9c8458;
  --color: #9c8458;
  font-weight: 500;
  opacity: 0.9;
}
#app .local-footer
  .tab-btn:not([tab="agency"]):not(.active-tab):not(.local-footer-route-active)
  .t_label,
#app .tab-btn:not([tab="agency"]):not(.active-tab):not(.local-footer-route-active) .t_label,
#app .local-footer
  .tab-btn:not([tab="agency"]):not(.active-tab):not(.local-footer-route-active)
  ion-label.tab-label,
#app .tab-btn:not([tab="agency"]):not(.active-tab):not(.local-footer-route-active)
  ion-label.tab-label {
  color: #9c8458;
  --color: #9c8458;
  font-weight: 500;
}
#app .tab-btn:not(.local-footer-route-active) .ion-img,
#app .local-footer .tab-btn:not(.local-footer-route-active) .ion-img,
#app .tab-btn:not(.active-tab) .ion-img,
#app .local-footer .tab-btn:not(.active-tab) .ion-img {
  opacity: 0.9;
  filter: none;
}
#app .tab-btn.local-footer-route-active .ion-img,
#app .local-footer .tab-btn.local-footer-route-active .ion-img,
#app .tab-btn.active-tab .ion-img,
#app .local-footer .tab-btn.active-tab .ion-img {
  opacity: 1;
  filter: none;
}

/*
 * Aba «Perfil» activa — DOM do bundle: .tab-btn > .active-block + ion-img.tab-img + ion-label.tab-label
 * (sem .icon-wrap nem .t_label). Ícone correcto em ::before no .tab-btn; imagem do shadow do ion-img oculta.
 */
#app .tab-btn[tab="perfil"].active-tab,
#app .tab-btn[tab="perfil"].local-footer-route-active,
#app .local-footer .tab-btn[tab="perfil"].active-tab,
#app .local-footer .tab-btn[tab="perfil"].local-footer-route-active {
  position: relative;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  box-shadow: none;
}

#app .tab-btn[tab="perfil"].active-tab .t_label,
#app .tab-btn[tab="perfil"].local-footer-route-active .t_label,
#app .local-footer .tab-btn[tab="perfil"].active-tab .t_label,
#app .local-footer .tab-btn[tab="perfil"].local-footer-route-active .t_label,
#app .tab-btn[tab="perfil"].active-tab ion-label.tab-label,
#app .tab-btn[tab="perfil"].local-footer-route-active ion-label.tab-label,
#app .local-footer .tab-btn[tab="perfil"].active-tab ion-label.tab-label,
#app .local-footer .tab-btn[tab="perfil"].local-footer-route-active ion-label.tab-label {
  color: #3a4534 !important;
  --color: #3a4534;
  font-weight: 800 !important;
}

#app .tab-btn[tab="perfil"].active-tab .icon-wrap ion-icon,
#app .tab-btn[tab="perfil"].local-footer-route-active .icon-wrap ion-icon,
#app .local-footer .tab-btn[tab="perfil"].active-tab .icon-wrap ion-icon,
#app .local-footer .tab-btn[tab="perfil"].local-footer-route-active .icon-wrap ion-icon {
  display: none !important;
}

#app .tab-btn[tab="perfil"].active-tab ion-img::part(image),
#app .tab-btn[tab="perfil"].local-footer-route-active ion-img::part(image),
#app .local-footer .tab-btn[tab="perfil"].active-tab ion-img::part(image),
#app .local-footer .tab-btn[tab="perfil"].local-footer-route-active ion-img::part(image) {
  opacity: 0 !important;
}

#app .tab-btn[tab="perfil"].active-tab ion-img,
#app .tab-btn[tab="perfil"].local-footer-route-active ion-img,
#app .local-footer .tab-btn[tab="perfil"].active-tab ion-img,
#app .local-footer .tab-btn[tab="perfil"].local-footer-route-active ion-img {
  opacity: 0 !important;
}

#app .tab-btn[tab="perfil"].active-tab .icon-wrap .ion-img img,
#app .tab-btn[tab="perfil"].local-footer-route-active .icon-wrap .ion-img img,
#app .local-footer .tab-btn[tab="perfil"].active-tab .icon-wrap .ion-img img,
#app .local-footer .tab-btn[tab="perfil"].local-footer-route-active .icon-wrap .ion-img img {
  opacity: 0 !important;
  filter: none !important;
}

#app .tab-btn[tab="perfil"].active-tab::before,
#app .tab-btn[tab="perfil"].local-footer-route-active::before,
#app .local-footer .tab-btn[tab="perfil"].active-tab::before,
#app .local-footer .tab-btn[tab="perfil"].local-footer-route-active::before {
  content: "";
  position: absolute;
  width: 1.9rem;
  height: 1.9rem;
  left: 50%;
  transform: translateX(-50%);
  top: 0.1rem;
  background: url("/assets/local-tab-perfil-active.svg") center / contain no-repeat;
  z-index: 4;
  pointer-events: none;
}

/* Rodapé: destaque no ::before do Perfil (mesmo modelo que os outros ícones) */
#app .tab-bar .tab-btn.bottom-nav-item.nav-active[tab="perfil"].active-tab::before,
#app .tab-bar .tab-btn.bottom-nav-item.nav-active[tab="perfil"].local-footer-route-active::before {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.25));
  transform: translateX(-50%) scale(1.08);
}

#app .tab-bar .tab-btn.bottom-nav-item.nav-active[tab="perfil"] ion-label.tab-label,
#app .tab-bar .tab-btn.bottom-nav-item.nav-active[tab="perfil"] .t_label {
  color: #1a1a1a !important;
  --color: #1a1a1a !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 5px rgba(255, 255, 255, 0.35);
}

#app ion-tab-button.local-tab-route-active[href*="/perfil"] {
  --background: transparent;
  --color: #3a4534;
  border-radius: 0;
}

#app ion-tab-button.local-tab-route-active[href*="/perfil"]::part(native) {
  background: transparent !important;
  border-radius: 0;
  color: #3a4534 !important;
  font-weight: 800;
}

/*
 * Perfil local: fundo creme (igual ao resto da página) — #f0ed5e parecia “verde claro”
 * atrás do cartão nas margens; manter padding para o rodapé fixo.
 */
ion-content.local-profile-fake-active {
  --background: #fcfbe3;
  --padding-bottom: 7.5rem;
}

/* Garantir que o cabeçalho Vue (.user-base-info fixo) não reaparece por cima / por baixo do clone */
ion-content.local-profile-fake-active .user-base-info:not(.local-profile-dashboard) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * Rodapé some no perfil: o layout usa v-show (display:none inline) ou o bloco fica
 * atrás/cortado pelo scroll. !important ganha ao inline do Vue; fixed garante camada.
 */
body.local-main-tabbar-fix #main-content .b-tabs > div.absolute {
  display: block !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  z-index: 2147482900 !important;
  pointer-events: auto !important;
}

body.local-main-tabbar-fix #main-content .b-tabs > .outer-wrap {
  display: block !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  z-index: 2147482900 !important;
  pointer-events: auto !important;
}

body.local-main-tabbar-fix #main-content .b-tabs > div.deposit {
  display: flex !important;
  z-index: 2147482901 !important;
}

body.local-main-tabbar-fix #main-content .tab-bar-wrap {
  display: block !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  z-index: 2147482900 !important;
  pointer-events: auto !important;
}

body.local-main-tabbar-fix #main-content ion-tab-bar {
  display: flex !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  z-index: 2147482900 !important;
  pointer-events: auto !important;
}

/* Mesmas regras sem depender de #main-content (alguns skins montam o id noutro nó) */
body.local-main-tabbar-fix #app .b-tabs > div.absolute:not(.deposit) {
  display: block !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  z-index: 2147482900 !important;
  pointer-events: auto !important;
}

body.local-main-tabbar-fix #app .b-tabs > .outer-wrap {
  display: block !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  z-index: 2147482900 !important;
  pointer-events: auto !important;
}

body.local-main-tabbar-fix #app .b-tabs > div.deposit {
  display: flex !important;
  z-index: 2147482901 !important;
}

/*
 * Tab bar dentro de ion-content → ion-tabs (fica no .inner-scroll); fixar à viewport.
 * Estrutura viste no DevTools: ion-content … ion-tabs … .tab-bar-wrap … .inner-wrap
 */
body.local-main-tabbar-fix #app ion-content ion-tabs > .tab-bar-wrap,
body.local-main-tabbar-fix #app .ion-page:not(.ion-page-hidden) ion-tabs > .tab-bar-wrap,
body.local-main-tabbar-fix #app ion-content ion-tabs > .outer-wrap,
body.local-main-tabbar-fix #app .ion-page:not(.ion-page-hidden) ion-tabs > .outer-wrap {
  display: block !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  z-index: 2147482900 !important;
  pointer-events: auto !important;
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
}

body.local-main-tabbar-fix #app ion-content ion-tabs > ion-tab-bar,
body.local-main-tabbar-fix #app .ion-page:not(.ion-page-hidden) ion-tabs > ion-tab-bar {
  display: flex !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  z-index: 2147482900 !important;
  pointer-events: auto !important;
}

body.local-main-tabbar-fix #app ion-content ion-tabs > .deposit,
body.local-main-tabbar-fix #app .ion-page:not(.ion-page-hidden) ion-tabs > .deposit {
  display: flex !important;
  z-index: 2147482901 !important;
}

/* Modal «Mudar avatar» (perfil local) */
.local-avatar-modal-root {
  position: fixed;
  inset: 0;
  /* Acima do overlay de prémio (_wg_overlay) para cliques não ficarem “mortos” */
  z-index: 2147483650;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.local-avatar-modal-root--open {
  display: flex;
}

.local-avatar-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 25, 0.55);
  backdrop-filter: blur(2px);
}

.local-avatar-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  max-height: min(90vh, 620px);
  display: flex;
  flex-direction: column;
  background: #fcfbe3;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  border: 1px solid rgba(180, 170, 90, 0.35);
}

.local-avatar-modal-close {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #2e4a18;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.local-avatar-modal-close:hover {
  background: rgba(46, 74, 24, 0.08);
}

.local-avatar-modal-title {
  margin: 0;
  padding: 1rem 2.5rem 0.5rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1b5e20;
  letter-spacing: 0.02em;
}

.local-avatar-modal-tabs {
  display: flex;
  margin: 0 0.75rem;
  background: #f5f0a8;
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}

.local-avatar-modal-tab {
  flex: 1;
  border: none;
  background: transparent;
  color: #5d4e1a;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.55rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}

.local-avatar-modal-tab.is-active {
  background: #fffef0;
  border-bottom-color: #e65100;
  color: #2e4a18;
}

.local-avatar-modal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 12px 14px 14px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  background: linear-gradient(180deg, #f7f9e8 0%, #eef5d0 100%);
}

.local-avatar-modal-cell {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}

.local-avatar-modal-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  background: #f0f4f8;
}

.local-avatar-modal-cell.is-selected {
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.25);
  background: #fff;
}

.local-avatar-modal-cell:active {
  transform: scale(0.97);
}

.local-avatar-modal-confirm {
  margin: 0 14px 14px;
  border: none;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #43a047 0%, #2e7d32 100%);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.35);
}

.local-avatar-modal-confirm:active {
  transform: translateY(1px);
}

/* Centro de Mensagens (perfil → Suporte) — coluna estreita sobre fundo amarelo (mock) */
.local-msg-center {
  /* Mais estreito que 28rem do perfil; token da home (~390px em 16px) */
  --local-msg-col-max: min(24.375rem, calc(100vw - 1.4rem));
  --lmc-bg: var(--local-admin-bg, #071923);
  --lmc-surface: color-mix(in srgb, var(--local-admin-bg, #071923) 80%, var(--local-admin-primary, #22d3ee));
  --lmc-surface2: color-mix(in srgb, var(--local-admin-bg, #071923) 88%, var(--local-admin-primary, #22d3ee));
  --lmc-primary: var(--local-admin-primary, #22d3ee);
  --lmc-text: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 15%, #ffffff);
  --lmc-text-muted: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 25%, rgba(255,255,255,0.55));
  --lmc-border: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 20%, rgba(255,255,255,0.08));
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: none;
  flex-direction: column;
  align-items: center;
  background: var(--lmc-bg);
  font-family: var(--local-admin-fontFamily, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  box-sizing: border-box;
  padding-left: max(0.7rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.7rem, env(safe-area-inset-right, 0px));
}

.local-msg-center--open {
  display: flex;
}

.local-msg-center-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 3.25rem;
  padding: 0.5rem 2.75rem;
  padding-top: calc(0.5rem + env(safe-area-inset-top, 0));
  background: linear-gradient(180deg, var(--lmc-surface) 0%, var(--lmc-surface2) 100%);
  border-bottom: 1px solid var(--lmc-border);
  width: var(--local-msg-col-max);
  max-width: 100%;
  box-sizing: border-box;
}

.local-msg-center-back {
  position: absolute;
  left: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  background: transparent;
  color: var(--lmc-text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  margin-top: calc(env(safe-area-inset-top, 0) * 0.25);
}

.local-msg-center-back:hover {
  background: rgba(255, 255, 255, 0.08);
}

.local-msg-center-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--lmc-text);
  letter-spacing: 0.02em;
}

.local-msg-center-tabs {
  flex-shrink: 0;
  display: flex;
  background: var(--lmc-surface2);
  border-bottom: 1px solid var(--lmc-border);
  padding: 0 0.25rem;
  width: var(--local-msg-col-max);
  max-width: 100%;
  box-sizing: border-box;
}

.local-msg-center-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.75rem 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--lmc-text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}

.local-msg-center-tab.is-active {
  color: var(--lmc-primary);
  font-weight: 800;
  border-bottom-color: var(--lmc-primary);
}

.local-msg-center-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
  width: var(--local-msg-col-max);
  max-width: 100%;
  box-sizing: border-box;
  background: var(--lmc-bg);
}

.local-msg-center-panel[hidden] {
  display: none !important;
}

.local-msg-center-panel.is-visible {
  display: block;
}

.local-msg-center-hero {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.65rem;
  padding: 0.85rem 0.75rem 0.75rem;
  max-width: 100%;
  margin: 0.65rem 0.65rem 0;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--local-admin-primary, #22d3ee) 18%, var(--local-admin-bg, #071923)) 0%,
      color-mix(in srgb, var(--local-admin-primary, #22d3ee) 10%, var(--local-admin-bg, #071923)) 55%,
      var(--local-admin-bg, #071923) 100%
    ),
    repeating-linear-gradient(
      -18deg,
      transparent,
      transparent 11px,
      color-mix(in srgb, var(--local-admin-primary, #22d3ee) 6%, transparent) 11px,
      color-mix(in srgb, var(--local-admin-primary, #22d3ee) 6%, transparent) 12px
    );
  border: 1px solid var(--lmc-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Personagem à esquerda (PNG transparente; desvanesse no fundo — alinhar à base) */
.local-msg-center-hero-visual {
  flex-shrink: 0;
  width: 7.25rem;
  min-width: 7rem;
  max-width: 44%;
  align-self: stretch;
  min-height: 7rem;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: transparent;
}

.local-msg-center-hero-img {
  width: 100%;
  height: auto;
  max-height: 9.25rem;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

.local-msg-center-hero-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: center;
}

.local-msg-center-hero-title {
  margin: 0 0 0.45rem;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--lmc-text);
  line-height: 1.35;
}

.local-msg-center-hero-accent {
  color: var(--lmc-primary);
  font-weight: 900;
}

.local-msg-center-hero-desc {
  margin: 0 0 0.65rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--lmc-text-muted);
  opacity: 0.95;
}

.local-msg-center-btn {
  border: none;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--local-admin-primary, #22d3ee) 80%, #ffffff) 0%, var(--local-admin-primary, #22d3ee) 55%, color-mix(in srgb, var(--local-admin-primary, #22d3ee) 85%, #000000) 100%);
  color: color-mix(in srgb, var(--local-admin-bg, #071923) 90%, #000000);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--local-admin-primary, #22d3ee) 35%, transparent);
}

.local-msg-center-btn:active {
  transform: scale(0.98);
}

.local-msg-center-btn--wide {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0.65rem 1rem;
  font-size: 0.92rem;
  display: block;
  border-radius: 999px;
}

.local-msg-center-btn--sm {
  flex-shrink: 0;
  padding: 0.38rem 0.75rem;
  font-size: 0.72rem;
  border-radius: 8px;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--local-admin-primary, #22d3ee) 30%, transparent);
}

.local-msg-center-channel-list {
  list-style: none;
  margin: 0;
  padding: 0.65rem 0.65rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.local-msg-center-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.7rem;
  background: var(--lmc-surface);
  border-radius: 12px;
  border: 1px solid var(--lmc-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.local-msg-center-card-ico-wrap {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.local-msg-center-card-ico {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.local-msg-center-card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.local-msg-center-card-text strong {
  font-size: 0.86rem;
  color: var(--lmc-text);
}

.local-msg-center-card-text span {
  font-size: 0.72rem;
  color: var(--lmc-text-muted);
  line-height: 1.35;
  opacity: 0.88;
}

.local-msg-center-placeholder {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--lmc-text-muted);
}

.local-msg-center-placeholder-title {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: var(--lmc-text);
}

.local-msg-center-placeholder-desc {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Centro de Segurança (perfil → Centro de Segurança) */
.local-security-center {
  --local-security-col: min(24.375rem, calc(100vw - 1.4rem));
  --lsc-bg: var(--local-admin-bg, #071923);
  --lsc-surface: color-mix(in srgb, var(--local-admin-bg, #071923) 80%, var(--local-admin-primary, #22d3ee));
  --lsc-primary: var(--local-admin-primary, #22d3ee);
  --lsc-text: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 15%, #ffffff);
  --lsc-text-muted: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 20%, rgba(255,255,255,0.5));
  --lsc-border: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 20%, rgba(255,255,255,0.08));
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: none;
  flex-direction: column;
  align-items: center;
  background: var(--lsc-bg);
  font-family: var(--local-admin-fontFamily, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  box-sizing: border-box;
  padding-left: max(0.7rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.7rem, env(safe-area-inset-right, 0px));
}

.local-security-center--open {
  display: flex;
}

.local-security-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 3.25rem;
  padding: 0.5rem 2.75rem;
  padding-top: calc(0.5rem + env(safe-area-inset-top, 0));
  width: var(--local-security-col);
  max-width: 100%;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--local-admin-bg, #071923) 70%, var(--local-admin-primary, #22d3ee));
  border-bottom: 1px solid var(--lsc-border);
}

.local-security-back {
  position: absolute;
  left: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  background: transparent;
  color: var(--lsc-text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  margin-top: calc(env(safe-area-inset-top, 0) * 0.25);
}

.local-security-back:hover {
  background: rgba(255, 255, 255, 0.08);
}

.local-security-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--lsc-text);
  letter-spacing: 0.02em;
}

.local-security-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: var(--local-security-col);
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 0.65rem calc(1rem + env(safe-area-inset-bottom, 0));
}

.local-security-card {
  background: var(--lsc-surface);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 0.65rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--lsc-border);
}

.local-security-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.8rem 0.95rem;
  border-bottom: 1px solid var(--lsc-border);
  font-size: 0.92rem;
  color: var(--lsc-text);
}

.local-security-card .local-security-row:last-child {
  border-bottom: none;
}

.local-security-row-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-weight: 500;
}

.local-security-row-right {
  flex-shrink: 0;
  text-align: right;
  font-weight: 600;
  color: var(--lsc-text-muted);
  font-variant-numeric: tabular-nums;
}

.local-security-ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--lsc-primary);
}

.local-security-unlink {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0.25rem 0;
  font: inherit;
  font-weight: 600;
  color: var(--lsc-primary);
  cursor: pointer;
}

.local-security-unlink:active {
  opacity: 0.75;
}

.local-security-row--btn {
  width: 100%;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.local-security-row--btn:active {
  background: rgba(255, 255, 255, 0.05);
}

.local-security-row-chev {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 600;
  color: var(--lsc-text-muted);
}

.local-security-chev {
  font-size: 0.85rem;
  opacity: 0.65;
}

/* Validação de senha — e-mail (Centro de Segurança → Desvincular) */
.local-email-validate {
  --local-email-validate-col: min(24.375rem, calc(100vw - 1.4rem));
  --lev-bg: var(--local-admin-bg, #071923);
  --lev-surface: color-mix(in srgb, var(--local-admin-bg, #071923) 80%, var(--local-admin-primary, #22d3ee));
  --lev-primary: var(--local-admin-primary, #22d3ee);
  --lev-text: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 15%, #ffffff);
  --lev-text-muted: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 20%, rgba(255,255,255,0.5));
  --lev-border: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 25%, rgba(255,255,255,0.1));
  position: fixed;
  inset: 0;
  z-index: 2147483601;
  display: none;
  flex-direction: column;
  align-items: center;
  background: var(--lev-bg);
  font-family: var(--local-admin-fontFamily, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  box-sizing: border-box;
  padding-left: max(0.7rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.7rem, env(safe-area-inset-right, 0px));
}

.local-email-validate--open {
  display: flex;
}

.local-email-validate-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 3.25rem;
  padding: 0.5rem 2.75rem;
  padding-top: calc(0.5rem + env(safe-area-inset-top, 0));
  width: var(--local-email-validate-col);
  max-width: 100%;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--local-admin-bg, #071923) 70%, var(--local-admin-primary, #22d3ee));
  border-bottom: 1px solid var(--lev-border);
}

.local-email-validate-back {
  position: absolute;
  left: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  background: transparent;
  color: var(--lev-text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  margin-top: calc(env(safe-area-inset-top, 0) * 0.25);
}

.local-email-validate-back:hover {
  background: rgba(255, 255, 255, 0.08);
}

.local-email-validate-header-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--lev-text);
  letter-spacing: 0.02em;
}

.local-email-validate-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: var(--local-email-validate-col);
  max-width: 100%;
  box-sizing: border-box;
  background: var(--lev-bg);
  padding: 1rem 0.85rem calc(1.25rem + env(safe-area-inset-bottom, 0));
}

.local-email-validate-heading {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--lev-text);
  line-height: 1.3;
}

.local-email-validate-sub {
  margin: 0 0 1.1rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--lev-text-muted);
}

.local-email-validate-field {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.6rem;
  background: var(--lev-surface);
  border: 1px solid var(--lev-border);
  border-radius: 10px;
  margin-bottom: 1rem;
}

.local-email-validate-key {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  color: var(--lev-primary);
}

.local-email-validate-key .local-security-ico {
  width: 20px;
  height: 20px;
}

.local-email-validate-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--lev-text);
  outline: none;
}

.local-email-validate-input::placeholder {
  color: var(--lev-text-muted);
}

.local-email-validate-eye {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--lev-text-muted);
  cursor: pointer;
  border-radius: 8px;
}

.local-email-validate-eye:hover {
  background: rgba(255, 255, 255, 0.08);
}

.local-email-validate-eye-ico {
  width: 22px;
  height: 22px;
}

.local-email-validate-confirm {
  width: 100%;
  margin: 0;
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 10px;
  background: var(--lev-primary);
  color: color-mix(in srgb, var(--local-admin-bg, #071923) 90%, #000000);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(139, 195, 74, 0.4);
}

.local-email-validate-confirm:active {
  transform: translateY(1px);
}

/* Validação — Senha de Ativos (só campo + Confirmar, paleta do mock) */
.local-email-validate--assets .local-email-validate-header {
  background: #8ec641;
  border-bottom-color: rgba(60, 100, 25, 0.15);
}

.local-email-validate--assets .local-email-validate-body {
  background: #f0ffd1;
  padding-top: 1.15rem;
}

.local-email-validate--assets .local-email-validate-field {
  background: #e8f5c8;
  border-color: #9ccc65;
}

.local-email-validate--assets .local-email-validate-confirm {
  background: #76b100;
  box-shadow: 0 3px 10px rgba(118, 177, 0, 0.45);
}

/* Ecrã VIP completo (perfil → Detalhes VIP) */
.local-vip-details {
  --local-vip-col: min(24.375rem, calc(100vw - 1.4rem));
  position: fixed;
  inset: 0;
  z-index: 2147483602;
  display: none;
  flex-direction: column;
  align-items: center;
  background: #f0ed8a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
  padding-left: max(0.7rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.7rem, env(safe-area-inset-right, 0px));
}

.local-vip-details--open {
  display: flex;
}

.local-vip-details-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 3.15rem;
  padding: 0.45rem 2.6rem;
  padding-top: calc(0.45rem + env(safe-area-inset-top, 0));
  width: var(--local-vip-col);
  max-width: 100%;
  box-sizing: border-box;
  background: #66bb6a;
  border-bottom: 1px solid rgba(40, 90, 40, 0.2);
}

.local-vip-details--semanal-tab .local-vip-details-header {
  background: #a8d179;
  border-bottom-color: rgba(60, 100, 40, 0.18);
}

.local-vip-details-back {
  position: absolute;
  left: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  border: none;
  background: transparent;
  color: #1b3009;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  margin-top: calc(env(safe-area-inset-top, 0) * 0.2);
}

.local-vip-details-back:hover {
  background: rgba(0, 0, 0, 0.06);
}

.local-vip-details-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1b3009;
  letter-spacing: 0.04em;
}

.local-vip-details-clipboard {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: transparent;
  color: #1b3009;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(env(safe-area-inset-top, 0) * 0.2);
}

.local-vip-details-clipboard:hover {
  background: rgba(0, 0, 0, 0.06);
}

.local-vip-header-clip {
  width: 22px;
  height: 22px;
}

.local-vip-details-main {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: var(--local-vip-col);
  max-width: 100%;
  box-sizing: border-box;
  background: #f3f9e4;
  padding: 0.65rem 0.55rem 0.5rem;
  padding-bottom: 0.35rem;
}

.local-vip-details-card {
  position: relative;
  background: #2a2a2a;
  border-radius: 18px;
  padding: 1.15rem 0.85rem 1rem;
  padding-top: 2.15rem;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.local-vip-collect-all {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 1;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  border: 1px solid #7cb342;
  background: linear-gradient(180deg, #9ccc65 0%, #7cb342 100%);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.local-vip-collect-all:active {
  opacity: 0.92;
}

.local-vip-details-card-head {
  margin-bottom: 0.2rem;
}

.local-vip-details-current-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.local-vip-nivel-atual {
  font-size: 0.76rem;
  font-weight: 600;
  color: #bdbdbd;
}

.local-vip-details-progress {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.45rem 0 0.65rem;
}

.local-vip-details-track {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: #1a1a1a;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

.local-vip-details-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #9e9e9e, #e8e8e8);
}

.local-vip-details-next-wrap {
  flex-shrink: 0;
}

.local-vip-details-criteria-title {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  color: #c8c8c8;
  margin: 0 0 0.35rem;
}

.local-vip-details-criteria-line {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #b0b0b0;
}

.local-vip-details-hl {
  color: #f5a623;
  font-weight: 800;
}

.local-vip-details-muted {
  color: #888;
}

.local-vip-section-title {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: #2e4a18;
}

.local-vip-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0.45rem;
  padding: 0.35rem 0.2rem;
  background: #faf8e8;
  border-radius: 10px;
  border: 1px solid rgba(120, 160, 80, 0.2);
}

.local-vip-tab {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 0.42rem 0.38rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: #6d7d5a;
  cursor: pointer;
  font-family: inherit;
  border-radius: 8px;
  white-space: nowrap;
}

.local-vip-tab.is-active {
  background: rgba(255, 255, 255, 0.95);
  color: #1b3009;
  font-weight: 800;
  border: none;
  box-shadow: none;
}

/* Print: separador Bônus com sublinhado laranja */
.local-vip-tabs[data-active-tab="bonus"] .local-vip-tab.is-active {
  box-shadow: inset 0 -3px 0 #e65100;
  background: transparent;
}

.local-vip-tabs[data-active-tab="diario"] .local-vip-tab.is-active {
  box-shadow: inset 0 -3px 0 #43a047;
  background: transparent;
}

.local-vip-tabs[data-active-tab="instrucoes"] .local-vip-tab.is-active {
  box-shadow: inset 0 -3px 0 #c6762a;
  background: transparent;
}

.local-vip-tabs[data-active-tab="semanal"] .local-vip-tab.is-active {
  background: transparent;
  box-shadow: inset 0 -3px 0 #ff7f27;
}

.local-vip-panel[hidden] {
  display: none !important;
}

.local-vip-panel.is-visible {
  display: block;
}

.local-vip-table {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(120, 150, 80, 0.25);
  margin-bottom: 0.65rem;
}

.local-vip-table-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 0.25rem;
  padding: 0.5rem 0.4rem;
  background: #e8f2c8;
  font-size: 0.62rem;
  font-weight: 800;
  color: #2e4a18;
  text-align: center;
}

.local-vip-table-head span:first-child {
  text-align: left;
  padding-left: 0.2rem;
}

.local-vip-table-head--diario {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 0.9fr);
  font-size: 0.55rem;
  line-height: 1.25;
  hyphens: auto;
}

.local-vip-table--diario .local-vip-table-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 0.9fr);
}

.local-vip-table-head--semanal {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.92fr);
  font-size: 0.54rem;
  line-height: 1.25;
  background: #f7fcd1 !important;
}

.local-vip-table--semanal .local-vip-table-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.92fr);
}

.local-vip-table--semanal .local-vip-table-row--a {
  background: #fff;
}

.local-vip-table--semanal .local-vip-table-row--b {
  background: #ebf9c1;
}

.local-vip-table-body {
  font-size: 0.65rem;
}

.local-vip-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 0.25rem;
  align-items: center;
  padding: 0.45rem 0.4rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.local-vip-table-row--a {
  background: #f0f8e0;
}

.local-vip-table-row--b {
  background: #faf6d4;
}

.local-vip-col {
  min-width: 0;
  text-align: center;
  color: #2e4a18;
  font-weight: 600;
}

.local-vip-col--nivel {
  text-align: left;
}

.local-vip-col--aposta {
  font-size: 0.62rem;
  line-height: 1.35;
}

.local-vip-col--aposta > span:first-child {
  display: block;
}

.local-vip-mini-prog {
  margin-top: 0.2rem;
}

.local-vip-mini-prog-track {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: #d4e8b0;
  overflow: hidden;
  margin-bottom: 0.15rem;
}

.local-vip-mini-prog-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: #8bc34a;
  border-radius: 999px;
}

.local-vip-mini-prog-txt {
  font-size: 0.55rem;
  color: #6d7d5a;
  font-weight: 600;
}

.local-vip-bonus-val {
  color: #e65100;
  font-weight: 800;
}

.local-vip-bonus-val--diario {
  color: #d84315;
  font-weight: 800;
}

.local-vip-bonus-val--semanal {
  color: #d33d14;
  font-weight: 800;
}

.local-vip-crown-ico {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* Estrela 6 pontas + medalha + coroa (modal VIP e img sincronizada) */
.local-vip-medallion {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.local-vip-crown-img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.local-vip-lvl-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.local-vip-lvl-badge--current {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 1px rgba(255, 193, 7, 0.35);
}

.local-vip-lvl-badge--grey {
  background: linear-gradient(90deg, #b8b8b8 0%, #757575 50%, #4a4a4a 100%);
}

.local-vip-lvl-badge--silver {
  background: linear-gradient(90deg, #f5f5f5 0%, #cfd8dc 38%, #90a4ae 100%);
}

.local-vip-lvl-badge--bronze {
  background: linear-gradient(90deg, #e8c4a0 0%, #cd7f32 45%, #6d3410 100%);
}

.local-vip-lvl-badge--gold {
  background: linear-gradient(90deg, #ffe082 0%, #ffb300 42%, #e65100 100%);
}

.local-vip-lvl-badge--blue {
  background: linear-gradient(90deg, #bbdefb 0%, #42a5f5 50%, #0d47a1 100%);
}

.local-vip-rules-block {
  padding: 0.55rem 0.45rem;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  border: 1px solid rgba(120, 150, 80, 0.2);
  margin-bottom: 0.5rem;
}

.local-vip-rules-block--solo {
  margin-bottom: 0;
}

.local-vip-rules-title {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  color: #2e4a18;
  margin-bottom: 0.35rem;
}

.local-vip-rules-p {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.5;
  color: #4a5c38;
}

.local-vip-placeholder {
  margin: 0;
  padding: 1.5rem 0.75rem;
  text-align: center;
  font-size: 0.78rem;
  color: #6d7d5a;
}

.local-vip-details-footer {
  flex-shrink: 0;
  width: var(--local-vip-col);
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.55rem calc(0.65rem + env(safe-area-inset-bottom, 0));
  background: #f3f9e4;
  border-top: 1px solid rgba(120, 150, 80, 0.2);
}

.local-vip-claim-btn {
  width: 100%;
  margin: 0;
  padding: 0.78rem 1rem;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #9ccc65 0%, #7cb342 100%);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(100, 150, 50, 0.35);
}

.local-vip-claim-btn:active {
  transform: translateY(1px);
}

/* Relatórios (perfil → Relatórios) — coluna estreita, separadores e filtros por mockup */
.local-reports {
  --local-reports-col: min(24.375rem, calc(100vw - 1.4rem));
  --lrp-bg: var(--local-admin-bg, #071923);
  --lrp-surface: color-mix(in srgb, var(--local-admin-bg, #071923) 80%, var(--local-admin-primary, #22d3ee));
  --lrp-surface2: color-mix(in srgb, var(--local-admin-bg, #071923) 88%, var(--local-admin-primary, #22d3ee));
  --lrp-primary: var(--local-admin-primary, #22d3ee);
  --lrp-text: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 15%, #ffffff);
  --lrp-text-muted: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 20%, rgba(255,255,255,0.5));
  --lrp-border: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 20%, rgba(255,255,255,0.08));
  --lrp-opt-bg: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 22%, var(--local-admin-bg, #071923));
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: none;
  flex-direction: column;
  align-items: center;
  background: var(--lrp-bg);
  font-family: var(--local-admin-fontFamily, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  box-sizing: border-box;
  padding-left: max(0.7rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.7rem, env(safe-area-inset-right, 0px));
}

.local-reports--open {
  display: flex;
}

.local-reports-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 3.25rem;
  padding: 0.5rem 2.75rem;
  padding-top: calc(0.5rem + env(safe-area-inset-top, 0));
  width: var(--local-reports-col);
  max-width: 100%;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--local-admin-bg, #071923) 70%, var(--local-admin-primary, #22d3ee));
  border-bottom: 1px solid var(--lrp-border);
}

.local-reports-back {
  position: absolute;
  left: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  background: transparent;
  color: var(--lrp-text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  margin-top: calc(env(safe-area-inset-top, 0) * 0.25);
}

.local-reports-back:hover {
  background: rgba(255, 255, 255, 0.08);
}

.local-reports-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--lrp-text);
  letter-spacing: 0.02em;
}

.local-reports-subtabs-wrap {
  flex-shrink: 0;
  width: var(--local-reports-col);
  max-width: 100%;
  box-sizing: border-box;
  background: var(--lrp-surface2);
  border-bottom: 1px solid var(--lrp-border);
}

.local-reports-subtabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.15rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 0 0.35rem;
  box-sizing: border-box;
}

.local-reports-subtab {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 0.7rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lrp-text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.local-reports-subtab.is-active {
  color: var(--lrp-primary);
  font-weight: 800;
  border-bottom-color: var(--lrp-primary);
}

.local-reports-panels {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: var(--local-reports-col);
  max-width: 100%;
  box-sizing: border-box;
  background: var(--lrp-bg);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.local-reports-panel[hidden] {
  display: none !important;
}

.local-reports-panel.is-visible {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.local-reports-filters {
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.65rem 0.6rem;
  background: var(--lrp-surface2);
  border-bottom: 1px solid var(--lrp-border);
}

.local-reports-date-wrap {
  flex: 1 1 calc(33.333% - 0.45rem);
  min-width: 5rem;
  position: static;
}

.local-reports-panel[data-report-panel="outros"] .local-reports-date-wrap {
  flex: 1 1 calc(50% - 0.45rem);
}

.local-reports-date-toggle {
  width: 100%;
}

.local-reports-date-wrap.is-open .local-reports-date-chev {
  transform: rotate(180deg);
}

.local-reports-date-chev {
  display: inline-block;
  transition: transform 0.15s ease;
}

.local-reports-date-panel {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  top: 100%;
  margin-top: 0.25rem;
  z-index: 6;
  padding: 0.55rem;
  border-radius: 10px;
  background: var(--lrp-surface);
  border: 1px solid var(--lrp-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

.local-reports-date-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.45rem;
}

.local-reports-date-opt {
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--lrp-text);
  background: var(--lrp-opt-bg);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  text-align: center;
  line-height: 1.25;
}

.local-reports-date-opt.is-selected {
  box-shadow:
    inset 0 0 0 2px var(--lrp-primary),
    0 2px 6px color-mix(in srgb, var(--local-admin-primary, #22d3ee) 35%, transparent);
}

.local-reports-date-opt:active {
  transform: scale(0.98);
}

.local-reports-date-opt--full {
  grid-column: 1 / -1;
}

.local-reports-date-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.local-reports-tipos-wrap {
  flex: 1 1 calc(33.333% - 0.45rem);
  min-width: 5rem;
  position: static;
}

.local-reports-tipos-toggle {
  width: 100%;
}

.local-reports-tipos-wrap.is-open .local-reports-tipos-chev {
  transform: rotate(180deg);
}

.local-reports-tipos-chev {
  display: inline-block;
  transition: transform 0.15s ease;
}

.local-reports-tipos-panel {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  top: 100%;
  margin-top: 0.25rem;
  z-index: 7;
  padding: 0.55rem;
  border-radius: 10px;
  background: var(--lrp-surface);
  border: 1px solid var(--lrp-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

.local-reports-tipos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.45rem;
}

.local-reports-tipos-opt {
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.3rem;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--lrp-text);
  background: var(--lrp-opt-bg);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  text-align: center;
  line-height: 1.2;
}

.local-reports-tipos-opt.is-selected {
  box-shadow:
    inset 0 0 0 2px var(--lrp-primary),
    0 2px 6px color-mix(in srgb, var(--local-admin-primary, #22d3ee) 35%, transparent);
}

.local-reports-tipos-opt:active {
  transform: scale(0.98);
}

.local-reports-tipos-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.local-reports-detalhes-wrap {
  flex: 1 1 calc(33.333% - 0.45rem);
  min-width: 5rem;
  position: static;
}

.local-reports-panel[data-report-panel="outros"] .local-reports-detalhes-wrap {
  flex: 1 1 calc(50% - 0.45rem);
}

.local-reports-detalhes-toggle {
  width: 100%;
}

.local-reports-detalhes-wrap.is-open .local-reports-detalhes-chev {
  transform: rotate(180deg);
}

.local-reports-detalhes-chev {
  display: inline-block;
  transition: transform 0.15s ease;
}

.local-reports-detalhes-panel {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  top: 100%;
  margin-top: 0.25rem;
  z-index: 8;
  padding: 0.55rem;
  border-radius: 10px;
  background: var(--lrp-surface);
  border: 1px solid var(--lrp-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

.local-reports-detalhes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.45rem;
}

.local-reports-detalhes-opt {
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.3rem;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--lrp-text);
  background: var(--lrp-opt-bg);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  text-align: center;
  line-height: 1.2;
}

.local-reports-detalhes-opt.is-selected {
  box-shadow:
    inset 0 0 0 2px var(--lrp-primary),
    0 2px 6px color-mix(in srgb, var(--local-admin-primary, #22d3ee) 35%, transparent);
}

.local-reports-detalhes-opt:active {
  transform: scale(0.98);
}

.local-reports-detalhes-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.local-reports-filter {
  flex: 1 1 calc(33.333% - 0.45rem);
  min-width: 5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.45rem 0.4rem;
  border: 1px solid var(--lrp-border);
  border-radius: 8px;
  background: var(--lrp-opt-bg);
  color: var(--lrp-text);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
}

.local-reports-panel[data-report-panel="outros"] .local-reports-filter {
  flex: 1 1 calc(50% - 0.45rem);
}

.local-reports-filter-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.local-reports-filter-chev {
  flex-shrink: 0;
  font-size: 0.55rem;
  opacity: 0.65;
  line-height: 1;
}

.local-reports-panel-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: 1rem 0.75rem 1.5rem;
  box-sizing: border-box;
  background: var(--lrp-bg);
}

.local-reports-panel-body--plain {
  min-height: 18rem;
  align-items: stretch;
}

.local-reports-empty {
  text-align: center;
}

.local-reports-empty-ico {
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto 0.75rem;
}

.local-reports-empty-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

.local-reports-empty-txt {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: #9e9e9e;
}

.local-reports-footer {
  flex-shrink: 0;
  padding: 0.65rem 0.75rem calc(0.85rem + env(safe-area-inset-bottom, 0));
  background: var(--lrp-surface2);
  border-top: 1px solid var(--lrp-border);
}

.local-reports-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--lrp-text-muted);
  padding: 0.35rem 0;
}

.local-reports-footer-row span {
  font-weight: 500;
}

.local-reports-val {
  font-weight: 800;
}

.local-reports-val--ok {
  color: #4caf50;
}

.local-reports-val--bad {
  color: #ef5350;
}

.local-reports-val--warn {
  color: var(--lrp-primary);
}

.local-reports-val--dark {
  color: var(--lrp-text);
}

.local-reports-val--loss {
  color: #ef5350;
}

/* ConvidarCentro (perfil → Convidar) */
.local-invite {
  --local-invite-col: min(24.375rem, calc(100vw - 1.4rem));
  --liv-bg: var(--local-admin-bg, #071923);
  --liv-surface: color-mix(in srgb, var(--local-admin-bg, #071923) 80%, var(--local-admin-primary, #22d3ee));
  --liv-surface2: color-mix(in srgb, var(--local-admin-bg, #071923) 88%, var(--local-admin-primary, #22d3ee));
  --liv-primary: var(--local-admin-primary, #22d3ee);
  --liv-text: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 15%, #ffffff);
  --liv-text-muted: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 20%, rgba(255,255,255,0.5));
  --liv-border: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 20%, rgba(255,255,255,0.08));
  --liv-opt-bg: color-mix(in srgb, var(--local-admin-primary, #22d3ee) 22%, var(--local-admin-bg, #071923));
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: none;
  flex-direction: column;
  align-items: center;
  background: var(--liv-bg);
  font-family: var(--local-admin-fontFamily, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  box-sizing: border-box;
  padding-left: max(0.7rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.7rem, env(safe-area-inset-right, 0px));
}

.local-invite--open {
  display: flex;
}

.local-invite-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 3.25rem;
  padding: 0.5rem 2.75rem;
  padding-top: calc(0.5rem + env(safe-area-inset-top, 0));
  width: var(--local-invite-col);
  max-width: 100%;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--local-admin-bg, #071923) 70%, var(--local-admin-primary, #22d3ee));
  border-bottom: 1px solid var(--liv-border);
}

.local-invite-back {
  position: absolute;
  left: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  background: transparent;
  color: var(--liv-text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  margin-top: calc(env(safe-area-inset-top, 0) * 0.25);
}

.local-invite-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--liv-text);
}

.local-invite-tabs {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.1rem;
  overflow-x: auto;
  width: var(--local-invite-col);
  max-width: 100%;
  box-sizing: border-box;
  background: var(--liv-surface2);
  border-bottom: 1px solid var(--liv-border);
  padding: 0 0.25rem;
  -webkit-overflow-scrolling: touch;
}

.local-invite-tab {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 0.65rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--liv-text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.local-invite-tab.is-active {
  color: var(--liv-primary);
  font-weight: 800;
  border-bottom-color: var(--liv-primary);
}

.local-invite-panels {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  width: var(--local-invite-col);
  max-width: 100%;
  box-sizing: border-box;
  background: var(--liv-bg);
}

.local-invite-panel[hidden] {
  display: none !important;
}

.local-invite-panel.is-visible {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.local-invite-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.65rem 0.6rem calc(1rem + env(safe-area-inset-bottom, 0));
  box-sizing: border-box;
}

.local-invite-section-title {
  margin: 0.5rem 0 0.4rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--liv-text);
}

.local-invite-id-line {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  color: var(--liv-text-muted);
}

.local-invite-qr-row {
  display: flex;
  align-items: flex-end;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.local-invite-qr {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 10px;
  background: var(--liv-surface);
  border: 2px dashed var(--liv-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.local-invite-qr-inner {
  font-size: 0.75rem;
  font-weight: 800;
  color: #9e9e9e;
}

.local-invite-url-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
}

.local-invite-url {
  flex: 1;
  min-width: 0;
  font-size: 0.62rem;
  line-height: 1.35;
  color: var(--liv-text-muted);
  word-break: break-all;
}

.local-invite-btn {
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0.45rem 0.65rem;
}

.local-invite-btn--blue {
  background: var(--liv-primary);
  color: color-mix(in srgb, var(--local-admin-bg, #071923) 90%, #000000);
}

.local-invite-btn--yellow {
  background: linear-gradient(180deg, color-mix(in srgb, var(--local-admin-primary, #22d3ee) 80%, #fff) 0%, var(--local-admin-primary, #22d3ee) 55%, color-mix(in srgb, var(--local-admin-primary, #22d3ee) 80%, #000) 100%);
  color: color-mix(in srgb, var(--local-admin-bg, #071923) 90%, #000000);
}

.local-invite-btn--receive {
  background: var(--liv-opt-bg);
  color: var(--liv-text);
  padding: 0.35rem 0.85rem;
  font-size: 0.72rem;
}

.local-invite-btn--submit {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--liv-primary);
  color: color-mix(in srgb, var(--local-admin-bg, #071923) 90%, #000000);
  font-size: 0.95rem;
}

.local-invite-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.local-invite-soc {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: none;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
}

.local-invite-soc--fb {
  background: #1877f2;
}
.local-invite-soc--gm {
  background: #ea4335;
}
.local-invite-soc--yt {
  background: #ff0000;
}
.local-invite-soc--kw {
  background: #ff6a00;
}
.local-invite-soc--x {
  background: #111;
}
.local-invite-soc--wa {
  background: #25d366;
}
.local-invite-soc--sh {
  background: #689f38;
}

.local-invite-commission-card {
  background: var(--liv-surface);
  border-radius: 12px;
  padding: 0.55rem 0.6rem 0.65rem;
  margin-bottom: 1rem;
  border: 1px solid var(--liv-border);
}

.local-invite-commission-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.45rem;
  gap: 0.5rem;
}

.local-invite-commission-sec-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--liv-text);
}

.local-invite-commission-head-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.local-invite-help-i {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--liv-opt-bg);
  color: var(--liv-primary);
  font-size: 0.7rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.local-invite-link-sm {
  border: none;
  background: transparent;
  color: var(--liv-primary);
  font-weight: 700;
  font-size: 0.72rem;
  cursor: pointer;
  text-decoration: underline;
}

.local-invite-commission-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--local-admin-primary, #22d3ee) 15%, var(--local-admin-bg, #071923)) 0%, color-mix(in srgb, var(--local-admin-primary, #22d3ee) 30%, var(--local-admin-bg, #071923)) 50%, color-mix(in srgb, var(--local-admin-primary, #22d3ee) 20%, var(--local-admin-bg, #071923)) 100%);
  margin-bottom: 0.55rem;
}

.local-invite-trophy {
  font-size: 1.75rem;
  line-height: 1;
}

.local-invite-commission-lbl {
  display: block;
  font-size: 0.72rem;
  color: var(--liv-text-muted);
}

.local-invite-commission-amt {
  font-size: 1.05rem;
  color: var(--liv-text);
}

.local-invite-commission-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--liv-text-muted);
}

.local-invite-meus-filt {
  position: relative;
  margin-bottom: 0.65rem;
}

.local-invite-filter {
  flex: 1 1 auto;
  min-width: 5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.45rem 0.4rem;
  border: 1px solid var(--liv-border);
  border-radius: 8px;
  background: var(--liv-opt-bg);
  color: var(--liv-text);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
}

.local-invite-filter-chev {
  flex-shrink: 0;
  font-size: 0.55rem;
  opacity: 0.65;
}

.local-invite-date-wrap {
  max-width: 8.5rem;
  position: static;
}

.local-invite-date-toggle {
  width: 100%;
}

.local-invite-date-wrap.is-open .local-invite-date-chev {
  transform: rotate(180deg);
}

.local-invite-date-chev {
  display: inline-block;
  transition: transform 0.15s ease;
}

.local-invite-date-panel {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  top: 100%;
  margin-top: 0.25rem;
  z-index: 8;
  padding: 0.55rem;
  border-radius: 10px;
  background: var(--liv-surface);
  border: 1px solid var(--liv-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

.local-invite-date-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.45rem;
}

.local-invite-date-opt {
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--liv-text);
  background: var(--liv-opt-bg);
  cursor: pointer;
  line-height: 1.2;
}

.local-invite-date-opt.is-selected {
  box-shadow:
    inset 0 0 0 2px var(--liv-primary),
    0 2px 6px color-mix(in srgb, var(--local-admin-primary, #22d3ee) 35%, transparent);
}

.local-invite-date-opt--full {
  grid-column: 1 / -1;
}

.local-invite-date-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.local-invite-stat-block {
  margin-bottom: 0.85rem;
}

.local-invite-stat-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}

.local-invite-stat-block-head h4 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--liv-text);
}

.local-invite-stat-block-sum {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--liv-primary);
}

.local-invite-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.local-invite-stat-card {
  background: var(--liv-surface);
  border-radius: 10px;
  padding: 0.5rem 0.28rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  min-height: 3.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid var(--liv-border);
}

.local-invite-stat-label {
  display: block;
  font-size: 0.54rem;
  font-weight: 600;
  color: var(--liv-text-muted);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.local-invite-stat-val {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--liv-text);
  line-height: 1.1;
}

.local-invite-rede-chart {
  background: var(--liv-surface);
  border-radius: 12px;
  padding: 0.65rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--liv-border);
}

.local-invite-rede-root {
  display: flex;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
  align-items: flex-start;
}

.local-invite-av {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #90caf9, #42a5f5);
  flex-shrink: 0;
  position: relative;
}

.local-invite-av--a {
  border: 3px solid #ff9800;
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.35);
}

.local-invite-rede-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.local-invite-av.sm {
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto 0.25rem;
}

.local-invite-av.xs {
  width: 1.35rem;
  height: 1.35rem;
  margin: 0 auto 0.2rem;
  background: linear-gradient(145deg, #ce93d8, #ab47bc);
}

.local-invite-av--b2 {
  background: linear-gradient(145deg, #a5d6a7, #66bb6a);
}

.local-invite-rede-root-stats {
  flex: 1;
  font-size: 0.65rem;
  line-height: 1.45;
  color: #2e4a18;
}

.local-invite-rede-root-stats p {
  margin: 0.15rem 0;
}

.local-invite-rede-tree {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 0.25rem;
}

.local-invite-rede-b-col {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  align-items: stretch;
}

.local-invite-rede-node {
  background: rgba(255, 255, 255, 0.72);
  border-radius: 10px;
  padding: 0.45rem 0.35rem;
  font-size: 0.6rem;
  text-align: center;
  border: 1px solid rgba(140, 170, 100, 0.35);
  width: 100%;
  box-sizing: border-box;
}

.local-invite-rede-node--b {
  box-shadow: 0 2px 6px rgba(80, 120, 40, 0.08);
}

.local-invite-rede-node--c {
  font-size: 0.58rem;
}

.local-invite-rede-node p {
  margin: 0.2rem 0 0;
}

.local-invite-rede-contrib-top {
  margin: 0 0 0.3rem !important;
  font-size: 0.52rem !important;
  font-weight: 600;
  color: #2e4a18;
  line-height: 1.25;
  order: 0;
}

.local-invite-rede-apostas {
  margin: 0.25rem 0 0 !important;
  font-size: 0.58rem !important;
  color: #1b3009;
  font-weight: 600;
}

.local-invite-rede-node--b,
.local-invite-rede-node--c {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.local-invite-rede-node--b .local-invite-av,
.local-invite-rede-node--c .local-invite-av {
  order: 1;
}

.local-invite-rede-node--b strong,
.local-invite-rede-node--c strong {
  order: 2;
  margin-top: 0.15rem;
}

.local-invite-rede-node--b .local-invite-rede-apostas,
.local-invite-rede-node--c .local-invite-rede-apostas {
  order: 3;
}

.local-invite-rede-node--b .local-invite-rede-muted-sm,
.local-invite-rede-node--c .local-invite-rede-muted-sm {
  order: 4;
}

.local-invite-rede-contrib {
  margin: 0.25rem 0 0 !important;
  font-size: 0.58rem !important;
  font-weight: 600;
  color: #2e4a18;
  line-height: 1.3;
}

.local-invite-rede-val--red {
  color: #e53935;
  font-weight: 800;
}

.local-invite-rede-muted-sm {
  margin: 0.35rem 0 0 !important;
  font-size: 0.55rem !important;
  color: #7d8d6a;
  font-style: italic;
}

.local-invite-rede-c-branch {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-left: 0.4rem;
  margin-top: 0.15rem;
  border-left: 3px solid #8bc34a;
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
}

.local-invite-rede-diff {
  font-size: 0.52rem;
  line-height: 1.35;
  color: #1b3009;
  background: rgba(220, 240, 190, 0.95);
  border: 1px solid rgba(120, 160, 80, 0.35);
  border-left: 4px solid #33691e;
  border-radius: 6px;
  padding: 0.35rem 0.3rem;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.local-invite-rede-node .muted,
.local-invite-rede-text .muted {
  color: #6d7d5a;
  font-size: 0.62rem;
}

.local-invite-rede-arrow-note {
  font-size: 0.62rem;
  color: #558b2f;
  margin: 0;
}

.local-invite-rede-text {
  font-size: 0.72rem;
  line-height: 1.5;
  color: #2e4a18;
}

.local-invite-rede-text h4 {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
}

.local-invite-rede-text p {
  margin: 0 0 0.5rem;
}

.local-invite-rede-ol {
  margin: 0 0 0.65rem;
  padding-left: 1.15rem;
  font-size: 0.7rem;
  line-height: 1.55;
}

.local-invite-rede-ol li {
  margin-bottom: 0.35rem;
}

.local-invite-subtabs {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.1rem;
  overflow-x: auto;
  padding: 0.35rem 0.35rem 0;
  background: #f1fae1;
  border-bottom: 1px solid rgba(160, 190, 100, 0.35);
  -webkit-overflow-scrolling: touch;
}

.local-invite-subtab {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 0.55rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #4a6628;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.local-invite-subtab.is-active {
  color: #1b3009;
  font-weight: 800;
  border-bottom-color: #f57c00;
}

.local-invite-subpanels {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.local-invite-subpanel[hidden] {
  display: none !important;
}

.local-invite-subpanel.is-visible {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.55rem 0.6rem calc(0.75rem + env(safe-area-inset-bottom, 0));
  box-sizing: border-box;
}

.local-invite-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
  align-items: center;
}

.local-invite-pill {
  border: 1px solid rgba(160, 175, 120, 0.5);
  border-radius: 8px;
  background: #e9f4cd;
  color: #1b3009;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.4rem 0.55rem;
  cursor: pointer;
}

.local-invite-pill--wide {
  flex: 1;
  min-width: 0;
}

.local-invite-search {
  display: flex;
  flex: 1;
  min-width: 6rem;
  border: 1px solid rgba(160, 175, 120, 0.5);
  border-radius: 8px;
  overflow: hidden;
  background: #f5fae1;
}

.local-invite-search-input {
  flex: 1;
  border: none;
  padding: 0.4rem 0.5rem;
  font-size: 0.75rem;
  background: transparent;
  min-width: 0;
}

.local-invite-search-btn {
  border: none;
  background: #d4e8a8;
  padding: 0 0.5rem;
  cursor: pointer;
}

.local-invite-table {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(200, 190, 100, 0.45);
  background: #f5fae1;
}

.local-invite-table-head {
  display: grid;
  grid-template-columns: 0.7fr 1.1fr 0.7fr 0.85fr 0.85fr;
  gap: 0.15rem;
  background: linear-gradient(180deg, #fff176 0%, #ffeb3b 100%);
  padding: 0.45rem 0.35rem;
  font-size: 0.55rem;
  font-weight: 800;
  color: #1b3009;
  text-align: center;
  line-height: 1.2;
}

.local-invite-table-head--5 {
  grid-template-columns: 0.75fr 0.75fr 0.85fr 0.95fr 0.85fr;
}

.local-invite-table-head--3 {
  grid-template-columns: 0.6fr 1fr 1fr;
}

.local-invite-table-row {
  display: grid;
  grid-template-columns: 0.6fr 1fr 1fr;
  gap: 0.15rem;
  padding: 0.5rem 0.35rem;
  font-size: 0.68rem;
  text-align: center;
  background: #fafde8;
  border-top: 1px solid rgba(200, 190, 100, 0.35);
}

.local-invite-td-red {
  color: #e53935;
  font-weight: 800;
}

.local-invite-empty {
  padding: 1.5rem 0.75rem 2rem;
  text-align: center;
}

.local-invite-empty-ico {
  width: 6rem;
  height: 6rem;
  margin: 0 auto 0.5rem;
}

.local-invite-empty-ico svg {
  width: 100%;
  height: 100%;
}

.local-invite-empty-txt {
  margin: 0;
  font-size: 0.9rem;
  color: #9e9e9e;
}

.local-invite-form-intro {
  font-size: 0.78rem;
  color: #2e4a18;
  margin: 0 0 0.75rem;
  line-height: 1.45;
}

.local-invite-field {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(140, 170, 90, 0.45);
  border-radius: 8px;
  background: #e8f4d4;
  box-sizing: border-box;
}

.local-invite-field-ico {
  font-size: 1rem;
  flex-shrink: 0;
}

.local-invite-cc {
  font-weight: 700;
  font-size: 0.8rem;
  color: #1b3009;
}

.local-invite-field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  outline: none;
}

.local-invite-eye {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.2rem;
  flex-shrink: 0;
}

/* Aba VIP (/main/promo): critérios de promoção legíveis (evitar texto claro sobre fundo claro). */
html body .bet-info[data-v-fe305d60] {
  background-color: #dcecc4 !important;
  border: 1px solid rgba(20, 83, 45, 0.2);
}

html body .bet-info .bet-amount[data-v-fe305d60],
html body .bet-info .bet-text[data-v-fe305d60],
html body .bet-info strong[data-v-fe305d60],
html body .bet-info span[data-v-fe305d60] {
  color: #14532d !important;
}

html body .green-default .bet-info[data-v-fe305d60],
html body .forest-green .bet-info[data-v-fe305d60],
html body .yellow-dark .bet-info[data-v-fe305d60],
html body .auroral-yellow .bet-info[data-v-fe305d60] {
  background-color: #dcecc4 !important;
}

html body .green-default .bet-info .bet-amount[data-v-fe305d60],
html body .green-default .bet-info .bet-text[data-v-fe305d60],
html body .forest-green .bet-info .bet-amount[data-v-fe305d60],
html body .forest-green .bet-info .bet-text[data-v-fe305d60],
html body .yellow-dark .bet-info .bet-amount[data-v-fe305d60],
html body .yellow-dark .bet-info .bet-text[data-v-fe305d60],
html body .auroral-yellow .bet-info .bet-amount[data-v-fe305d60],
html body .auroral-yellow .bet-info .bet-text[data-v-fe305d60] {
  color: #14532d !important;
}

/*
 * Template VIP “first”: medalha via SVG em auth-local.js; esconder ion-icon da cápsula antiga.
 * Pílulas “VIP X” com gradiente horizontal (data-vip-tier). Sem depender do hash data-v do build.
 * list-wrap-img vinha com z-index alto — a coluna da pílula sobe para o gradiente ficar visível.
 */
#app .my-vip .info-icon,
#app .my-vip .wrap-mid-next-icon,
#app .my-vip .list-icon {
  display: none !important;
}

/* Cápsula verde vinha dos vipTextSvg no ion-icon (rect #14532d), por baixo do .list-vip-wrap. */
html body #app .my-vip ion-icon.list-icon,
html body #app .my-vip ion-icon.info-icon,
html body #app .my-vip ion-icon.wrap-mid-next-icon {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#app .my-vip .list-icon-wrap {
  position: relative !important;
  z-index: 40 !important;
  min-width: 4.5rem;
  min-height: 1.25rem;
  box-sizing: border-box;
}

#app .my-vip .list-vip-wrap {
  z-index: 1 !important;
}

#app .my-vip ion-list.ion-list-cls .list-wrap-img,
#app .my-vip .ion-list-cls .list-wrap-img {
  z-index: 0 !important;
}

#app .my-vip .topVipLevel,
#app .my-vip .list-vip-wrap,
#app .my-vip .mid-vip-wrap {
  border: none !important;
  border-radius: 2.5625rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.2) !important;
  color: #fff !important;
  background: linear-gradient(90deg, #f5f5f5 0%, #cfd8dc 38%, #90a4ae 100%) !important;
}

#app .my-vip .topVipLevel[data-vip-tier="bronze"],
#app .my-vip .list-vip-wrap[data-vip-tier="bronze"],
#app .my-vip .mid-vip-wrap[data-vip-tier="bronze"] {
  background: linear-gradient(90deg, #e8c4a0 0%, #cd7f32 45%, #6d3410 100%) !important;
}

#app .my-vip .topVipLevel[data-vip-tier="gold"],
#app .my-vip .list-vip-wrap[data-vip-tier="gold"],
#app .my-vip .mid-vip-wrap[data-vip-tier="gold"] {
  background: linear-gradient(90deg, #ffe082 0%, #ffb300 42%, #e65100 100%) !important;
}

#app .my-vip .topVipLevel[data-vip-tier="blue"],
#app .my-vip .list-vip-wrap[data-vip-tier="blue"],
#app .my-vip .mid-vip-wrap[data-vip-tier="blue"] {
  background: linear-gradient(90deg, #bbdefb 0%, #42a5f5 50%, #0d47a1 100%) !important;
}

#app .my-vip .topVipLevel .span-cls,
#app .my-vip .list-vip-wrap .span-cls,
#app .my-vip .mid-vip-wrap .span-cls {
  color: #fff !important;
}

/*
 * Cabeçalho “Nível atual”: medalha | pílula VIP | texto. Com ion-icon oculto, .info-wrap colapsava e
 * .topVipLevel (absolute) cobria o rótulo — voltar ao fluxo e reservar largura mínima.
 */
#app .my-vip .vip-info > .flexBox {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.35rem;
}

#app .my-vip .info-wrap.current-vip-level {
  margin-left: 0 !important;
  min-width: 4.6rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#app .my-vip .topVipLevel {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  min-width: 4.5rem;
  flex-shrink: 0;
}

#app .my-vip .info-mid.vipCardText,
#app .my-vip .vip-info > .flexBox > .info-mid {
  margin-left: 0 !important;
  flex: 1;
  min-width: 0;
}

/* Barra “Ver a data” + “Bonus” na aba VIP (igual ao Histórico em Promoções). */
.local-promo-vip-record-bar {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3rem 0 0.5rem;
  margin: 0;
}

.local-promo-vip-record-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.local-promo-vip-date-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 72%;
}

.local-promo-vip-date-toggle {
  width: 100%;
  margin: 0;
  border: none;
  border-radius: 8px;
  padding: 0.42rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
}

.local-promo-vip-report-selected {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.local-promo-vip-date-tips {
  font-weight: 600;
  color: #4a6628;
}

.local-promo-vip-date-label {
  font-weight: 800;
  color: #1b3009;
}

.local-promo-vip-chev {
  flex-shrink: 0;
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1;
  color: #5d7a3a;
  transition: transform 0.12s linear;
}

.local-promo-vip-date-wrap.is-open .local-promo-vip-chev {
  transform: rotate(180deg);
}

.local-promo-vip-date-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.2rem);
  z-index: 30;
  padding: 0.45rem;
  border-radius: 10px;
  background: #e8f4c8;
  border: 1px solid rgba(120, 150, 80, 0.35);
  box-shadow: 0 6px 18px rgba(40, 60, 20, 0.15);
  box-sizing: border-box;
}

.local-promo-vip-date-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.local-promo-vip-date-opt {
  border: none;
  border-radius: 8px;
  padding: 0.48rem 0.45rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: #1b3009;
  background: linear-gradient(180deg, #fff9c4 0%, #ffeb3b 55%, #fdd835 100%);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(180, 140, 0, 0.2);
}

.local-promo-vip-date-opt.is-selected {
  box-shadow:
    inset 0 0 0 2px #f57c00,
    0 2px 6px rgba(200, 130, 0, 0.2);
}

.local-promo-vip-date-opt:active {
  transform: scale(0.98);
}

.local-promo-vip-award {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

.local-promo-vip-reward-label {
  color: #2e4a18;
  font-weight: 600;
}

.local-promo-vip-reward-val {
  color: #e65100;
  font-weight: 800;
  margin-left: 0.12rem;
}

/*
 * Aba VIP em Promoções — cartão como referência (fundo #2b2b2b, botão #8db73b, meta #f0b90b).
 */
body.local-promo-vip-page #app ion-content {
  --background: #f9f9d6;
}

body.local-promo-vip-page #app .my-vip[data-v-367a77e7] {
  height: auto !important;
  min-height: 8.25rem;
  background: #2b2b2b !important;
  background-image: none !important;
  border-radius: 15px;
  margin-top: 0.45rem;
  margin-bottom: 0.55rem;
  padding: 1.25rem 1rem 1.1rem;
  box-sizing: border-box;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  color: #fff;
}

body.local-promo-vip-page #app .vip-top.vip-detail[data-v-367a77e7] {
  background: #8db73b !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 0.35rem 0.95rem !important;
  font-size: 0.65rem !important;
  font-weight: 700;
  top: 1rem;
  right: 1rem;
  letter-spacing: 0.02em;
}

body.local-promo-vip-page #app .vip-top.claimButtonDisabled[data-v-367a77e7] {
  filter: brightness(0.94) saturate(0.92);
}

body.local-promo-vip-page #app .progress-bar[data-v-367a77e7] {
  height: 6px !important;
  --background: #1a1a1a;
  border-radius: 999px;
}

body.local-promo-vip-page #app .info-mid[data-v-367a77e7] {
  opacity: 1 !important;
  color: #c8c8c8 !important;
  font-weight: 600;
}

body.local-promo-vip-page #app .bet-info-mid[data-v-367a77e7] {
  opacity: 1 !important;
  color: #fff !important;
  font-weight: 700;
}

body.local-promo-vip-page #app .need-bets .current-recharge[data-v-367a77e7],
body.local-promo-vip-page #app .need-recharge .current-recharge[data-v-367a77e7] {
  color: #f0b90b !important;
  font-weight: 800;
}

body.local-promo-vip-page #app .need-bets .vip-info-max[data-v-367a77e7],
body.local-promo-vip-page #app .need-recharge .vip-info-max[data-v-367a77e7] {
  color: rgba(255, 255, 255, 0.62) !important;
}

body.local-promo-vip-page #app .progressTextBottom[data-v-367a77e7] {
  color: rgba(255, 248, 220, 0.88) !important;
}

body.local-promo-vip-page #app .wrap-mid .mid-info[data-v-367a77e7] {
  color: #e0e0e0 !important;
}

body.local-promo-vip-page #app .vip-compare[data-v-367a77e7] {
  color: #1b3309 !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  padding-bottom: 0.4rem !important;
  width: 100%;
}

body.local-promo-vip-page #app .vipLevelListHead[data-v-367a77e7] {
  background: #faf8e8 !important;
  border-radius: 12px;
  padding: 0.4rem 0.3rem 0.45rem !important;
  border: 1px solid rgba(120, 150, 80, 0.28);
  box-sizing: border-box;
}

body.local-promo-vip-page #app .vipLevelListHead ion-segment[data-v-367a77e7] {
  width: 100%;
  --background: transparent;
  border: none !important;
  margin: 0 !important;
  padding-top: 0 !important;
}

body.local-promo-vip-page #app .vipLevelListHead ion-segment-button[data-v-367a77e7] {
  --background-checked: transparent;
  --color: #5d6e48;
  --color-checked: #1a1a1a;
  --indicator-color: transparent;
  font-size: 0.6rem !important;
  font-weight: 700;
  min-height: 1.85rem;
}

body.local-promo-vip-page #app .vipLevelListHead ion-segment-button.segment-button-checked::part(native) {
  border: 2px solid #1f1f1f;
  border-radius: 999px;
  box-shadow: inset 0 -3px 0 #e65100;
}

body.local-promo-vip-page #app .listTitle.sh-cls[data-v-367a77e7] {
  background: linear-gradient(180deg, #e8f2c8 0%, #dff0c2 100%) !important;
  color: #2e4a18 !important;
  border: 1px solid rgba(90, 130, 55, 0.28);
  font-weight: 800;
}

body.local-promo-vip-page #app .listTitle.sh-cls .span-1[data-v-367a77e7] {
  color: #2e4a18 !important;
}

body.local-promo-vip-page #app .listItemDeep[data-v-367a77e7] {
  background-color: #ecf6d8 !important;
}

body.local-promo-vip-page #app .listItemShallow[data-v-367a77e7] {
  background-color: #faf6d4 !important;
}

body.local-promo-vip-page #app .list-wrap-img[data-v-367a77e7] {
  object-fit: contain;
}

body.local-promo-vip-page #app .deposit-bot.progressTextRight[data-v-367a77e7] {
  color: #e53935 !important;
  font-weight: 800 !important;
  font-size: 0.64rem !important;
}

body.local-promo-vip-page #app .rule-content.act-info[data-v-367a77e7] {
  background: #fff !important;
  border: 1px solid rgba(102, 187, 106, 0.55) !important;
  border-radius: 12px !important;
  padding: 0.65rem 0.55rem 0.9rem !important;
  margin-top: 0.55rem !important;
  box-sizing: border-box;
}

body.local-promo-vip-page #app .rule-content.act-info .ruleTitle[data-v-367a77e7] {
  color: #1b3309 !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
}

body.local-promo-vip-page #app .rule-content.act-info p[data-v-367a77e7] {
  color: #5a6c46 !important;
  font-size: 0.66rem !important;
  line-height: 1.5 !important;
}

/*
 * Menu lateral (ion-menu): blocos promocionais nativos ocultos; conteúdo injetado em .local-drawer-extras-root.
 * Banners futuros: localStorage key localAdminDrawerBannersHtml → #local-drawer-admin-banners-mount
 */

/*
 * Topo do drawer injetado (.local-menu-top-chrome): faixa "Baixe Nosso APP" + barra verde com logo;
 * o .logo-box nativo (fechar + logo) fica oculto — fechar usa .local-menu-exit.
 */
#app ion-menu .local-menu-top-chrome ~ ion-header.menu-header .logo-box {
  display: none !important;
}

#app ion-menu .local-menu-top-chrome ~ ion-header.menu-header ion-toolbar {
  --padding-top: 0.55rem !important;
}

.local-menu-top-chrome {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.local-menu-promo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  padding: 0.45rem 0.4rem 0.45rem 1.35rem;
  background: #e8f5c8;
  box-sizing: border-box;
}

.local-menu-top-chrome.local-menu-promo-dismissed .local-menu-promo {
  display: none !important;
}

.local-menu-promo-dismiss {
  position: absolute;
  left: 0.15rem;
  top: 0.2rem;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1a1a1a;
  background: transparent;
}

.local-menu-promo-dismiss:active {
  opacity: 0.65;
}

.local-menu-promo-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.local-menu-promo-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  line-height: 1.15;
}

.local-menu-promo-line1,
.local-menu-promo-line2 {
  font-size: 0.62rem;
  font-weight: 800;
  color: #14532d;
}

.local-menu-promo-line2 {
  font-size: 0.58rem;
  font-weight: 700;
}

.local-menu-promo-cash {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0.95;
}

.local-menu-install {
  flex-shrink: 0;
  margin: 0;
  border: none;
  border-radius: 999px;
  padding: 0.32rem 0.55rem 0.32rem 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, #c2410c 0%, #ca8a04 45%, #84cc16 100%);
  box-shadow: 0 2px 6px rgba(120, 60, 0, 0.25);
}

.local-menu-install:active {
  transform: scale(0.98);
}

.local-menu-install-ico {
  flex-shrink: 0;
}

.local-menu-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  box-sizing: border-box;
  background-color: #65a30d;
  background-image: repeating-linear-gradient(
    -42deg,
    transparent,
    transparent 5px,
    rgba(0, 0, 0, 0.07) 5px,
    rgba(0, 0, 0, 0.07) 10px
  );
  border-bottom: 1px solid rgba(20, 83, 45, 0.25);
}

.local-menu-bar-brand {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.local-menu-bar-logo {
  height: 1.85rem;
  width: auto;
  max-width: 7.5rem;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

.local-menu-bar-mascot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.local-menu-exit {
  flex-shrink: 0;
  width: 2.15rem;
  height: 2.15rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #ecfccb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.local-menu-exit:active {
  transform: scale(0.96);
}

#app ion-menu ion-content.menu-content > .card-container,
#app ion-menu ion-content.menu-content .bonus-pool,
#app ion-menu ion-content.menu-content > .hot-game-box,
#app ion-menu ion-content > .card-container,
#app ion-menu ion-content .bonus-pool,
#app ion-menu ion-content > .hot-game-box {
  display: none !important;
}

#app ion-menu ion-content.menu-content > .btn-container,
#app ion-menu ion-content > .btn-container {
  display: none !important;
}

#app ion-menu ion-content.menu-content,
#app ion-menu ion-content {
  --background: #f9f7dc;
}

#app ion-menu ion-content.menu-content > .local-drawer-extras-root {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.55rem 0.5rem;
}

/* Rodapé do drawer (linha + redes + idioma): colado ao fundo da área de scroll ao fazer zoom/scroll. */
#app ion-menu ion-content .local-drawer-footer-dock {
  position: sticky;
  bottom: 0;
  z-index: 40;
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 0.4rem;
  background: linear-gradient(180deg, rgba(249, 247, 220, 0) 0%, #f9f7dc 14%, #f5f2c8 55%, #f0ed5e 100%);
  padding-bottom: calc(0.45rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 14px rgba(40, 50, 20, 0.08);
}

.local-drawer-extras {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #2c2c2c;
}

.local-drawer-admin-mount:empty {
  display: none;
}

.local-drawer-admin-mount:not(:empty) {
  margin-bottom: 0.65rem;
  border-radius: 12px;
  overflow: hidden;
}

.local-drawer-bonus-section {
  margin-bottom: 0.85rem;
}

.local-drawer-bonus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}

.local-drawer-bonus-title-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.local-drawer-bonus-chest {
  display: flex;
  align-items: center;
  justify-content: center;
}

.local-drawer-bonus-h {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}

.local-drawer-bonus-todos {
  margin: 0;
  border: none;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  background: linear-gradient(180deg, #ff9800 0%, #f57c00 100%);
  box-shadow: 0 1px 4px rgba(200, 100, 0, 0.35);
}

.local-drawer-bonus-todos:active {
  transform: scale(0.97);
}

.local-drawer-bonus-banner {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: none;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
  background: linear-gradient(135deg, #1565c0 0%, #0d47a1 55%, #0277bd 100%);
  box-shadow: 0 3px 10px rgba(13, 71, 161, 0.35);
}

.local-drawer-bonus-line1,
.local-drawer-bonus-line2 {
  display: block;
  color: #fff;
  font-weight: 800;
  line-height: 1.25;
}

.local-drawer-bonus-line1 {
  font-size: 0.72rem;
  opacity: 0.98;
}

.local-drawer-bonus-line2 {
  font-size: 0.88rem;
  margin-top: 0.15rem;
}

.local-drawer-bonus-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.local-drawer-bonus-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(30, 40, 80, 0.22);
}

.local-drawer-bonus-dots span.is-on {
  width: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff9800, #ffb74d);
}

.local-drawer-section {
  margin-bottom: 0.75rem;
}

.local-drawer-h2 {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}

.local-drawer-hot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.local-drawer-hot-card {
  position: relative;
  margin: 0;
  border: none;
  border-radius: 12px;
  min-height: 4.1rem;
  padding: 0.5rem 0.45rem 1.35rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  background: linear-gradient(180deg, #f5e6a8 0%, #edd97a 100%);
  box-shadow: 0 2px 6px rgba(80, 70, 20, 0.12);
  box-sizing: border-box;
}

.local-drawer-hot-card--vip {
  background: linear-gradient(180deg, #fff9e6 0%, #f0e68c 100%);
}

.local-drawer-hot-ico {
  display: block;
  margin-bottom: 0.2rem;
}

.local-drawer-hot-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: #1a1a1a;
}

.local-drawer-hot-go {
  position: absolute;
  right: 0.4rem;
  bottom: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #7cb342 0%, #558b2f 100%);
  box-shadow: 0 1px 3px rgba(40, 80, 20, 0.25);
}

.local-drawer-prov-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.local-drawer-prov-btn {
  margin: 0;
  border: 1px solid rgba(180, 170, 90, 0.45);
  border-radius: 10px;
  padding: 0.42rem 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: #2e4a18;
  background: #faf6d4;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.35rem;
}

.local-drawer-prov-img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  object-fit: contain;
}

.local-drawer-prov-lbl {
  flex: 1;
  text-align: center;
  line-height: 1.1;
}

.local-drawer-prov-btn:active {
  transform: scale(0.98);
}

.local-drawer-download-card {
  width: 100%;
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(160, 150, 80, 0.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-sizing: border-box;
  background: linear-gradient(180deg, #fffef5 0%, #f5f0c8 100%);
  box-shadow: 0 2px 6px rgba(80, 70, 20, 0.1);
}

.local-drawer-download-card:active {
  transform: scale(0.99);
}

.local-drawer-download-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.local-drawer-download-h {
  font-size: 0.78rem;
  font-weight: 800;
  color: #1b3308;
}

.local-drawer-download-sub {
  font-size: 0.58rem;
  font-weight: 600;
  color: #4a5c38;
  line-height: 1.2;
}

.local-drawer-download-phone {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
}

/*
 * /main/inicio: clones quando a API não monta RedPacketRain, quick-entry ou segmentos POPULAR+.
 * Mina: em fluxo no topo (--lobby-top) ou FAB canto direito se não existir .order-container (--float).
 * --local-float-inset-right: distância da borda da janela à coluna #app (auth-local.js).
 */
.local-clone-red-packet {
  box-sizing: border-box;
  pointer-events: auto;
}

/* Primeiro no scroll: imediatamente acima de .activity-c (como o cartão de destaque do bundle). */
.local-clone-red-packet--lobby-top {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Espaço claro entre roleta e Mina (evita “coladas” / sobreposição visual). */
  gap: clamp(2.25rem, 11vw, 4.5rem);
  padding: 0.35rem clamp(0.45rem, 3vw, 0.65rem) 0.65rem;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Roleta + legenda (referência); escalonamento com zoom / viewport estreita. */
.local-clone-wheel-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(28rem, calc(100vw - 1.3rem));
  box-sizing: border-box;
  flex-shrink: 0;
  /* Reserva para moeda / sombra na base da roleta — evita “subida” visual da Mina. */
  margin-bottom: clamp(0.85rem, 5.5vw, 2.25rem);
  padding-bottom: clamp(0.35rem, 3.5vw, 1.15rem);
}

.local-clone-wheel-card--dismissed {
  display: none !important;
}

.local-clone-wheel-close {
  position: absolute;
  top: clamp(0.15rem, 1.8vw, 0.55rem);
  right: clamp(0.15rem, 1.8vw, 0.55rem);
  z-index: 3;
  width: clamp(1.65rem, 7.5vw, 2.35rem);
  height: clamp(1.65rem, 7.5vw, 2.35rem);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #2a2a2a;
  font-size: clamp(1.15rem, 4.5vw, 1.45rem);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
  -webkit-tap-highlight-color: transparent;
}

.local-clone-wheel-close:active {
  transform: scale(0.96);
}

.local-clone-wheel-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(0.25rem, 2vw, 0.85rem) clamp(0.35rem, 3vw, 0.75rem);
  cursor: pointer;
  box-sizing: border-box;
}

.local-clone-wheel-img {
  width: clamp(10rem, 72vw, 22rem);
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.22));
}

.local-clone-wheel-caption {
  margin: 0 0 clamp(0.2rem, 1.2vw, 0.35rem);
  padding: clamp(0.28rem, 1.8vw, 0.42rem) clamp(0.45rem, 2.5vw, 0.65rem);
  text-align: center;
  font-weight: 900;
  font-size: clamp(0.74rem, 3.5vw, 1.08rem);
  line-height: 1.2;
  color: #fff;
  background: linear-gradient(180deg, #f06292 0%, #c2185b 100%);
  border-radius: 0.4rem;
  text-shadow:
    0 0 1px #4a148c,
    1px 0 0 #4a148c,
    -1px 0 0 #4a148c,
    0 1px 0 #4a148c,
    0 -1px 0 #4a148c;
  letter-spacing: 0.02em;
  box-sizing: border-box;
}

/*
 * Mina no lobby: círculo explícito (squircle + elipse do cartão base esticavam em “ovo”).
 * Margem superior extra além do gap — o PNG da roleta pode ultrapassar a caixa.
 */
.local-clone-red-packet--lobby-top .local-clone-mine-card {
  width: min(17.25rem, calc(100vw - 1.35rem));
  max-width: min(17.25rem, calc(100vw - 1.35rem));
  aspect-ratio: 1;
  height: auto;
  margin: clamp(0.35rem, 2.5vw, 1rem) auto 0;
  flex-shrink: 0;
  align-self: center;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, transparent 1.5px),
    radial-gradient(circle at 50% 42%, #b39ddb 0%, #7e57c2 28%, #5e35b1 55%, #4527a0 85%, #311b92 100%);
  background-size:
    5px 5px,
    100% 100%;
}

.local-clone-red-packet--lobby-top .local-clone-mine-visual {
  flex: 1;
  min-height: 0;
  width: 100%;
  align-self: stretch;
}

.local-clone-red-packet--lobby-top .local-clone-mine-visual .local-clone-packet-img {
  width: clamp(13.25rem, 74vw, 18.5rem) !important;
  height: clamp(13.25rem, 74vw, 18.5rem) !important;
  max-width: 100%;
}

.local-clone-red-packet--lobby-top .local-clone-time-num {
  font-size: clamp(1.02rem, 4.8vw, 1.85rem);
  margin: 0 0 clamp(0.28rem, 2vw, 0.48rem);
}

.local-clone-red-packet--lobby-top .local-clone-red-packet-inner {
  padding: 0.45rem 0.4rem 0.4rem;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  justify-content: flex-end;
}

/* Fallback: ícone flutuante quando ainda não há .order-container (carregamento). */
.local-clone-red-packet--float {
  position: fixed;
  right: calc(var(--local-float-inset-right, 0px) + 1rem) !important;
  z-index: 40;
  width: auto;
  min-width: 5.5rem;
  max-width: 7.35rem;
  height: auto;
  bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
}

/*
 * Mina + roleta em modo float: dois fixed à direita. O bottom da roleta (10.5rem) ficava
 * dentro da faixa vertical da Mina (5.25rem + ~7.5rem) — sobreposição. Empilhar: roleta acima.
 */
#app:has(.local-clone-red-packet--float):has(.local-clone-quick-entry) .local-clone-quick-entry {
  z-index: 41;
  bottom: calc(
    5.25rem + min(7.85rem, 28vw) + clamp(0.6rem, 2.2vw, 1.05rem) + env(safe-area-inset-bottom, 0px)
  );
}

/* Domo roxo: só a arte (PNG já traz o título) + cronómetro por cima. */
.local-clone-mine-card {
  width: 100%;
  box-sizing: border-box;
  border-radius: 52% 52% 48% 48% / 42% 42% 58% 58%;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, transparent 1.5px),
    radial-gradient(ellipse 130% 85% at 50% 0%, #b39ddb 0%, #7e57c2 28%, #5e35b1 55%, #4527a0 88%, #311b92 100%);
  background-size:
    5px 5px,
    100% 100%;
  box-shadow:
    0 4px 18px rgba(49, 27, 146, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  border: none;
}

.local-clone-red-packet-inner {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 0.4rem 0.4rem 0.35rem;
  cursor: pointer;
  box-sizing: border-box;
}

/* Área da arte: cronómetro sobreposto à imagem (como no template Vue original). */
.local-clone-mine-visual {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: end;
  width: 100%;
  min-height: 5.25rem;
  pointer-events: none;
  isolation: isolate;
  flex-shrink: 0;
}

/* Sem classes do bundle (.good-img / .timeNum10) — evita width:0 e position do RedPacketRain Vue. */
.local-clone-mine-visual .local-clone-packet-img {
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  z-index: 1;
  position: relative;
  width: 5.25rem !important;
  height: 5.25rem !important;
  max-width: 100%;
  object-fit: contain;
  display: block !important;
  flex-shrink: 0;
  opacity: 1 !important;
  visibility: visible !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}

.local-clone-time-num {
  grid-row: 1;
  grid-column: 1;
  z-index: 2;
  position: relative;
  align-self: end;
  justify-self: center;
  margin: 0 0 0.42rem;
  color: #ffeb3b;
  font-weight: 900;
  font-size: 1.08rem;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: center;
  background: none !important;
  text-shadow:
    0 1px 0 #7a5f1b,
    0 2px 4px rgba(0, 0, 0, 0.45);
}

.local-clone-quick-entry {
  position: fixed;
  right: calc(var(--local-float-inset-right, 0px) + 1.125rem) !important;
  z-index: 40;
  width: 4.625rem;
  height: 4.625rem;
  bottom: calc(10.5rem + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  cursor: pointer;
  pointer-events: auto;
}

/* Mesmo alinhamento para os widgets Vue (envelope, roleta rápida, etc.) quando a shell está centrada. */
#app .red-packet-rain {
  right: calc(var(--local-float-inset-right, 0px) + 1rem) !important;
}

/*
 * Mina misteriosa (Vue RedPacketRain): título na 1.ª linha; imagem + cronómetro na mesma célula
 * (cronómetro por cima da arte, como no bundle), não entre o título e a imagem.
 */
#app .red-packet-rain[data-v-2b9c44fc] {
  width: auto !important;
  min-width: 5.5rem !important;
  max-width: 7.35rem !important;
  height: auto !important;
}

#app .red-packet-rain[data-v-2b9c44fc] > div.flex.justify-center.items-center {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  justify-items: stretch !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
  row-gap: 0.28rem !important;
  column-gap: 0 !important;
  padding: 0.45rem 0.4rem 0.35rem !important;
  box-sizing: border-box !important;
  border-radius: 52% 52% 48% 48% / 42% 42% 58% 58% !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, transparent 1.5px),
    radial-gradient(ellipse 130% 85% at 50% 0%, #b39ddb 0%, #7e57c2 28%, #5e35b1 55%, #4527a0 88%, #311b92 100%) !important;
  background-size:
    5px 5px,
    100% 100% !important;
  box-shadow:
    0 4px 18px rgba(49, 27, 146, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  border: none !important;
}

/* O título já vai no PNG da mina — não mostrar texto Vue duplicado. */
#app .red-packet-rain[data-v-2b9c44fc] .minecart-text[data-v-2b9c44fc] {
  display: none !important;
}

#app .red-packet-rain[data-v-2b9c44fc] > div.flex.justify-center.items-center:has(ion-img.packet-img2) {
  grid-template-rows: minmax(5.25rem, auto) !important;
  row-gap: 0 !important;
}

#app .red-packet-rain[data-v-2b9c44fc] > div.flex.justify-center.items-center:has(ion-img.packet-img1) {
  grid-template-rows: minmax(5.25rem, auto) !important;
  row-gap: 0 !important;
}

#app .red-packet-rain[data-v-2b9c44fc] ion-img.packet-img2 {
  grid-row: 1 !important;
  grid-column: 1 !important;
  justify-self: center !important;
  align-self: end !important;
  width: 5.25rem !important;
  height: 5.25rem !important;
  max-width: 100% !important;
  flex-shrink: 0 !important;
  order: unset !important;
}

/* ion-img continua a ocupar célula; arte real no <img> nativo (auth-local.js). */
#app .red-packet-rain ion-img.packet-img1.local-mine-ion-hidden,
#app .red-packet-rain ion-img.packet-img2.local-mine-ion-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

#app .red-packet-rain[data-v-2b9c44fc] > div.flex.justify-center.items-center img.local-mine-native-fallback {
  grid-row: 1 !important;
  grid-column: 1 !important;
  justify-self: center !important;
  align-self: end !important;
  width: 5.25rem !important;
  height: 5.25rem !important;
  max-width: 100% !important;
  object-fit: contain !important;
  z-index: 1 !important;
  pointer-events: none !important;
  display: block !important;
}

#app .red-packet-rain[data-v-2b9c44fc]
  > div.flex.justify-center.items-center:has(ion-img.packet-img1)
  img.local-mine-native-fallback {
  grid-row: 1 !important;
  align-self: end !important;
  width: 5.25rem !important;
  height: 5.25rem !important;
}

#app .red-packet-rain[data-v-2b9c44fc] .minecart-time[data-v-2b9c44fc] {
  grid-row: 1 !important;
  grid-column: 1 !important;
  z-index: 2 !important;
  align-self: end !important;
  justify-self: center !important;
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  order: unset !important;
  color: #ffeb3b !important;
  font-weight: 900 !important;
  font-size: 1.08rem !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
  text-shadow:
    0 1px 0 #7a5f1b,
    0 2px 4px rgba(0, 0, 0, 0.45) !important;
  margin: 0 0 0.38rem !important;
}

#app .red-packet-rain[data-v-2b9c44fc] > div.flex.justify-center.items-center ion-img.packet-img1 {
  grid-row: 1 !important;
  grid-column: 1 !important;
  justify-self: center !important;
  /* Igual ao packet-img2 / clone: arte assente em baixo para o tempo coincidir com a zona do baú. */
  align-self: end !important;
  width: 5.25rem !important;
  height: 5.25rem !important;
  flex-shrink: 0 !important;
  order: unset !important;
}

/*
 * packet-img1 + timeNum: no bundle original o tempo era `absolute` com bottom/transform
 * pensado para o PNG do envelope; com a arte «mina» o sítio certo é a base (como .minecart-time).
 */
#app .red-packet-rain[data-v-2b9c44fc] > div.flex.justify-center.items-center > div[class*="timeNum"] {
  grid-row: 1 !important;
  grid-column: 1 !important;
  z-index: 2 !important;
  align-self: end !important;
  justify-self: center !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  transform: none !important;
  order: unset !important;
  margin: 0 0 0.38rem !important;
  color: #ffeb3b !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
  line-height: 1.1 !important;
  text-shadow:
    0 1px 0 #7a5f1b,
    0 2px 4px rgba(0, 0, 0, 0.45) !important;
}

#app .quick-entry {
  right: calc(var(--local-float-inset-right, 0px) + 1.125rem) !important;
}

/* Roleta já está na pilha do lobby — esconder o FAB duplicado do bundle. */
#app:has(.local-clone-wheel-card:not(.local-clone-wheel-card--dismissed)) .quick-entry {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * Mina Vue dentro do scroll (.order-container): largura e arte escalam com zoom (antes max ~7rem).
 */
#app .order-container .red-packet-rain[data-v-2b9c44fc] {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  max-width: min(17.25rem, calc(100vw - 1.35rem)) !important;
  min-width: 0 !important;
  margin: clamp(2rem, 10vw, 4rem) auto 0.35rem !important;
  align-self: center !important;
}

#app .order-container .red-packet-rain[data-v-2b9c44fc] > div.flex.justify-center.items-center {
  width: min(17.25rem, calc(100vw - 1.35rem)) !important;
  max-width: min(17.25rem, calc(100vw - 1.35rem)) !important;
  aspect-ratio: 1 !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, transparent 1.5px),
    radial-gradient(circle at 50% 42%, #b39ddb 0%, #7e57c2 28%, #5e35b1 55%, #4527a0 85%, #311b92 100%) !important;
  background-size:
    5px 5px,
    100% 100% !important;
}

#app .order-container .red-packet-rain[data-v-2b9c44fc] ion-img.packet-img2,
#app .order-container .red-packet-rain[data-v-2b9c44fc] ion-img.packet-img1 {
  width: clamp(13.25rem, 74vw, 18.5rem) !important;
  height: clamp(13.25rem, 74vw, 18.5rem) !important;
}

#app .order-container .red-packet-rain[data-v-2b9c44fc] > div.flex.justify-center.items-center img.local-mine-native-fallback {
  width: clamp(13.25rem, 74vw, 18.5rem) !important;
  height: clamp(13.25rem, 74vw, 18.5rem) !important;
}

#app .order-container .red-packet-rain[data-v-2b9c44fc] .minecart-time[data-v-2b9c44fc],
#app .order-container .red-packet-rain[data-v-2b9c44fc] > div.flex.justify-center.items-center > div[class*="timeNum"] {
  font-size: clamp(1.02rem, 4.8vw, 1.85rem) !important;
}

#app .order-container .red-packet-rain[data-v-2b9c44fc] > div.flex.justify-center.items-center:has(ion-img.packet-img2),
#app .order-container .red-packet-rain[data-v-2b9c44fc] > div.flex.justify-center.items-center:has(ion-img.packet-img1) {
  grid-template-rows: minmax(clamp(11rem, 58vw, 16rem), auto) !important;
}

/* Carrossel lobby: fallback quando não há slides — mesmas proporções que .swiper-poster[data-v-6072baa6] */
#app .local-inicio-banner-fallback {
  overflow: hidden;
  border-radius: 0.625rem;
  height: 7.5rem;
  margin: 0 0 0.35rem;
  flex-shrink: 0;
  cursor: pointer;
  box-sizing: border-box;
}

#app .local-inicio-banner-fallback .local-inicio-banner-img {
  object-fit: cover;
  object-position: left top;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Variáveis legadas — já não forçamos absolute no timeNum; a grelha acima define o layout. */
#app {
  --local-rp-time10-font: 1.08rem;
  --local-rp-time10-bottom: 36%;
  --local-rp-time10-scale: 0.74;
  --local-rp-time10-ty: 0;
}

.local-clone-quick-entry .single-wrap {
  max-width: 6.325rem;
  max-height: 6.325rem;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.local-clone-quick-entry .single-content {
  margin: 0 auto;
  font-size: 0;
  line-height: 0;
}

.local-clone-quick-entry .single-content-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.local-clone-inicio-segment {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem 0.55rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  align-items: flex-end;
  box-sizing: border-box;
}

.local-clone-seg-btn {
  flex: 0 0 auto;
  margin: 0;
  border: none;
  background: #fff;
  border-radius: 0.625rem;
  padding: 0.35rem 0.5rem 0.4rem;
  min-width: 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.local-clone-seg-btn--active {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--local-lobby-popular-accent, #81c500) 65%, transparent);
}

.local-clone-seg-ico {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  border: 0.0625rem solid color-mix(in srgb, var(--local-lobby-popular-accent, #5f588c) 45%, rgba(95, 88, 140, 0.45));
  background: color-mix(in srgb, var(--local-lobby-popular-accent, #3b3466) 35%, #3b3466);
  box-sizing: border-box;
}

.local-clone-seg-ico img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.local-clone-seg-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  color: #2d2d2d;
  text-align: center;
  line-height: 1.15;
  max-width: 5.5rem;
}

/* Faixa de provedores (clone visual do segmento) abaixo dos mini-banners no início */
#app #stickyElement.segment-c,
#app .segment-c#stickyElement,
#app #localProviderSegmentStatic.segment-c,
#app .local-provider-segment-static,
#app #inicio .main-content .order-container #stickyElement.segment-c,
#app #inicio .main-content .order-container #localProviderSegmentStatic.segment-c,
#app ion-content.main-content .order-container #stickyElement.segment-c,
#app ion-content.main-content .order-container #localProviderSegmentStatic.segment-c,
#app .main-content .order-container #stickyElement.segment-c {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
}

#app #stickyElement.segment-c ion-segment,
#app .segment-c#stickyElement ion-segment,
#app #localProviderSegmentStatic.segment-c ion-segment,
#app .local-provider-segment-static ion-segment {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

#app #localProviderSegmentStatic.segment-c .btn-wall,
#app .local-provider-segment-static .btn-wall {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-image: none !important;
  background-color: transparent !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--local-admin-primary, #ef4444) 18%, var(--local-admin-bg, #15090a)) 0%,
    color-mix(in srgb, var(--local-admin-primary, #ef4444) 12%, var(--local-admin-home-bg, #1f0c0e)) 62%,
    color-mix(in srgb, var(--local-admin-home-bg, #1f0c0e) 74%, #000) 100%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--local-admin-primary, #ef4444) 42%, transparent) !important;
  box-shadow:
    inset 0 0.0625rem 0 color-mix(in srgb, var(--local-admin-primary, #ef4444) 22%, transparent),
    0 0.25rem 0.65rem rgba(0, 0, 0, 0.22) !important;
  border-radius: var(--local-provider-flag-radius, 0.7rem 0.7rem 0.35rem 0.35rem) !important;
  clip-path: var(--local-provider-flag-shape, polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%)) !important;
}

#app #localProviderSegmentStatic.segment-c .btn-wall::before,
#app .local-provider-segment-static .btn-wall::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: none !important;
  opacity: 0 !important;
}

#app #localProviderSegmentStatic.segment-c .btn-wall::after,
#app .local-provider-segment-static .btn-wall::after {
  content: "" !important;
  position: absolute !important;
  left: 16% !important;
  right: 16% !important;
  bottom: 0.34rem !important;
  height: 0.12rem !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--local-admin-primary, #ef4444) 48%, transparent) !important;
  opacity: 0.45 !important;
}

#app #localProviderSegmentStatic.segment-c .btn-wall.hot-btn,
#app .local-provider-segment-static .btn-wall.hot-btn,
#app #localProviderSegmentStatic.segment-c ion-segment-button.segment-button-checked .btn-wall,
#app .local-provider-segment-static ion-segment-button.segment-button-checked .btn-wall {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--local-admin-primary, #ef4444) 42%, #fff) 0%,
    color-mix(in srgb, var(--local-admin-primary, #ef4444) 56%, var(--local-admin-bg, #15090a)) 58%,
    color-mix(in srgb, var(--local-admin-primary, #ef4444) 24%, #000) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--local-admin-primary, #ef4444) 56%, rgba(255, 255, 255, 0.22)) !important;
}

html[data-local-theme-layout="sports"] #app #localProviderSegmentStatic.segment-c .btn-wall,
html[data-local-theme-layout="sports"] #app .local-provider-segment-static .btn-wall {
  --local-provider-flag-shape: polygon(8% 0, 92% 0, 100% 16%, 100% 76%, 50% 100%, 0 76%, 0 16%);
  --local-provider-flag-radius: 0.5rem 0.5rem 0.2rem 0.2rem;
}

html[data-local-theme-layout="premium"] #app #localProviderSegmentStatic.segment-c .btn-wall,
html[data-local-theme-layout="premium"] #app .local-provider-segment-static .btn-wall {
  --local-provider-flag-shape: polygon(0 0, 100% 0, 100% 72%, 82% 86%, 50% 100%, 18% 86%, 0 72%);
  --local-provider-flag-radius: 0.85rem 0.85rem 0.25rem 0.25rem;
  --local-provider-flag-pattern-opacity: 0.9;
  box-shadow:
    inset 0 0 0 0.0625rem color-mix(in srgb, var(--local-admin-primary, #d4af37) 55%, rgba(255, 255, 255, 0.34)),
    inset 0 0.16rem 0 rgba(255, 255, 255, 0.15),
    0 0.36rem 0.8rem rgba(0, 0, 0, 0.26) !important;
}

html[data-local-theme-layout="showcase"] #app #localProviderSegmentStatic.segment-c .btn-wall,
html[data-local-theme-layout="showcase"] #app .local-provider-segment-static .btn-wall {
  --local-provider-flag-shape: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%);
  --local-provider-flag-radius: 0.45rem;
  box-shadow:
    inset 0 0 0 0.0625rem color-mix(in srgb, var(--local-admin-primary, #a855f7) 62%, rgba(255, 255, 255, 0.2)),
    0 0 0.7rem color-mix(in srgb, var(--local-admin-primary, #a855f7) 22%, transparent),
    0 0.25rem 0.65rem rgba(0, 0, 0, 0.24) !important;
}

html[data-local-theme-layout="compact"] #app #localProviderSegmentStatic.segment-c .btn-wall,
html[data-local-theme-layout="compact"] #app .local-provider-segment-static .btn-wall {
  --local-provider-flag-shape: polygon(0 0, 100% 0, 100% 84%, 64% 84%, 50% 100%, 36% 84%, 0 84%);
  --local-provider-flag-radius: 0.55rem 0.55rem 0.18rem 0.18rem;
}

html[data-local-theme-layout="clean"] #app #localProviderSegmentStatic.segment-c .btn-wall,
html[data-local-theme-layout="clean"] #app .local-provider-segment-static .btn-wall {
  --local-provider-flag-shape: polygon(0 0, 100% 0, 100% 88%, 58% 88%, 50% 96%, 42% 88%, 0 88%);
  --local-provider-flag-radius: 0.95rem;
  --local-provider-flag-pattern-opacity: 0.38;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--local-admin-primary, #cbd5e1) 14%, var(--local-admin-home-bg, #141e35)) 0%,
    color-mix(in srgb, var(--local-admin-bg, #0f172a) 78%, var(--local-admin-primary, #cbd5e1)) 100%
  ) !important;
}

#app #localProviderSegmentStatic.segment-c ion-label,
#app .local-provider-segment-static ion-label,
#app #localProviderSegmentStatic.segment-c .label,
#app .local-provider-segment-static .label {
  color: var(--local-provider-label-color, #f4f7ff) !important;
  -webkit-text-fill-color: var(--local-provider-label-color, #f4f7ff) !important;
  text-shadow: var(--local-provider-label-shadow, 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.35)) !important;
}

#app #localProviderSegmentStatic.segment-c ion-segment-button.segment-button-checked ion-label,
#app .local-provider-segment-static ion-segment-button.segment-button-checked ion-label,
#app #localProviderSegmentStatic.segment-c ion-segment-button.segment-button-checked .label,
#app .local-provider-segment-static ion-segment-button.segment-button-checked .label {
  color: var(--local-provider-label-active-color, #ffffff) !important;
  -webkit-text-fill-color: var(--local-provider-label-active-color, #ffffff) !important;
  text-shadow: var(--local-provider-label-active-shadow, 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.45)) !important;
}

#app .local-inicio-providers-strip {
  width: 100%;
  box-sizing: border-box;
  padding: 0.125rem 0.75rem 0.45rem;
  margin: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--local-admin-home-bg, #120606) 92%, var(--local-admin-primary, #ef4444)) 0%,
    color-mix(in srgb, var(--local-admin-home-bg, #120606) 82%, #000) 100%
  );
  box-shadow: 0 0.45rem 0.8rem rgba(0, 0, 0, 0.24);
}

#app .local-inicio-providers-strip.local-inicio-providers-strip--fixed {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

#app .local-inicio-providers-strip.local-inicio-providers-strip--fixed + * {
  margin-top: 0 !important;
}

.local-inicio-providers-strip-placeholder {
  display: block !important;
  width: 100%;
  height: var(--local-providers-placeholder-height, 6.6rem);
  flex: 0 0 auto;
}

body > .local-inicio-providers-strip {
  width: min(29rem, calc(100vw - 2.4rem)) !important;
  max-width: calc(100vw - 2.4rem) !important;
  box-sizing: border-box;
  padding: 0.125rem 0.75rem 0.45rem;
  margin: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--local-admin-home-bg, #120606) 92%, var(--local-admin-primary, #ef4444)) 0%,
    color-mix(in srgb, var(--local-admin-home-bg, #120606) 82%, #000) 100%
  );
  box-shadow: 0 0.45rem 0.8rem rgba(0, 0, 0, 0.24);
}

body > .local-inicio-providers-strip.local-inicio-providers-strip--fixed {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
}

body > .local-inicio-providers-strip .local-inicio-providers-strip-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start;
  scrollbar-width: none;
}

body > .local-inicio-providers-strip .local-inicio-prov-item {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

body > .local-inicio-providers-strip .local-inicio-prov-item--api {
  width: 4.95rem;
  margin-right: 0.35rem;
}

body > .local-inicio-providers-strip .local-api-prov-badge {
  display: flex;
  width: 4.95rem;
  height: 5.65rem;
  padding: 0.6rem 0.3rem 0.55rem;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.55rem 0.55rem 0.9rem 0.9rem;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--local-admin-bg, #1b0708) 88%, var(--local-admin-primary, #ef4444)) 0%,
    color-mix(in srgb, var(--local-admin-home-bg, #120606) 86%, var(--local-admin-primary, #ef4444)) 66%,
    color-mix(in srgb, var(--local-admin-home-bg, #120606) 72%, #000) 100%
  );
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  box-shadow: inset 0 0 0 0.125rem color-mix(in srgb, var(--local-admin-primary, #ef4444) 28%, rgba(255, 255, 255, 0.28)), 0 0.3rem 0 rgba(0, 0, 0, 0.18);
}

body > .local-inicio-providers-strip .local-api-prov-icon {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--local-admin-bg, #1b0708) 88%, var(--local-admin-primary, #ef4444)) center / contain no-repeat;
  color: #fff;
  font-size: 0.67rem;
  font-weight: 900;
  box-shadow:
    inset 0 0 0 0.48rem color-mix(in srgb, var(--local-admin-home-bg, #120606) 62%, transparent),
    0 0 0 0.063rem color-mix(in srgb, var(--local-admin-primary, #ef4444) 38%, #fff);
}

body > .local-inicio-providers-strip .local-api-prov-label {
  width: 100%;
  min-height: 1.7rem;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 0.063rem 0.125rem rgba(28, 58, 8, 0.35);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.local-inicio-providers-strip,
.local-inicio-providers-strip.local-inicio-providers-strip--fixed,
#app .local-inicio-providers-strip,
#app .local-inicio-providers-strip.local-inicio-providers-strip--fixed,
body > .local-inicio-providers-strip,
body > .local-inicio-providers-strip.local-inicio-providers-strip--fixed {
  position: static !important;
  position: initial !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Quando usamos a faixa clonada (.local-inicio-providers-strip), o segmento real fica dentro de
   .wrapper.layout30 — NÃO como filho directo do host. Esse .wrapper mantinha fundo amarelado (skin Vue). */
#app .local-api-provider-host {
  height: auto !important;
  min-height: 0 !important;
  padding: 0.15rem 0 0.25rem !important;
  background: transparent !important;
}

#app .local-api-provider-host:not(.local-inicio-providers-strip),
#app ion-segment.local-api-provider-host,
#app #stickyElement.local-api-provider-host {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#app .local-api-provider-host > .wrapper {
  display: none !important;
}

#app .local-api-provider-host ion-segment,
#app .local-api-provider-host .segment-scroll,
#app .local-api-provider-host .segment-wrapper {
  display: none !important;
}

#app .local-api-provider-host > .local-inicio-providers-strip {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#app .local-inicio-providers-strip-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start;
  scrollbar-width: none;
}

#app .local-inicio-providers-strip-inner::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

#app .local-inicio-prov-item {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

#app .local-inicio-prov-item .btn-wall {
  pointer-events: none;
}

#app .local-inicio-prov-item--active .icon-box {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--local-lobby-popular-accent, var(--color-theme-base, #81c500)) 85%, transparent);
}

#app .local-inicio-prov-fallback {
  width: 3.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

#app .local-inicio-prov-fallback-ico {
  width: 3rem;
  height: 3rem;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--dark-line-stroke-line, #5f588c);
  background: var(--Dark-BG-color-dark-purple-100, #3b3466);
  box-sizing: border-box;
}

#app .local-inicio-prov-fallback-lbl {
  font-size: 0.75rem;
  font-weight: var(--font-weight-regular, 400);
  color: var(--navigation-button-color, #e8e4ff);
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  line-height: 1.1;
}

#app .local-inicio-prov-item--api {
  width: 4.95rem;
  margin-right: 0.35rem;
}

#app .local-api-prov-badge {
  display: flex;
  width: 4.95rem;
  height: 5.65rem;
  padding: 0.6rem 0.3rem 0.55rem;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.55rem 0.55rem 0.9rem 0.9rem;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--local-admin-bg, #1b0708) 88%, var(--local-admin-primary, #ef4444)) 0%,
    color-mix(in srgb, var(--local-admin-home-bg, #120606) 86%, var(--local-admin-primary, #ef4444)) 66%,
    color-mix(in srgb, var(--local-admin-home-bg, #120606) 72%, #000) 100%
  );
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  box-shadow: inset 0 0 0 0.125rem color-mix(in srgb, var(--local-admin-primary, #ef4444) 28%, rgba(255, 255, 255, 0.28)), 0 0.3rem 0 rgba(0, 0, 0, 0.18);
}

#app .local-api-prov-icon {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--local-admin-bg, #1b0708) 88%, var(--local-admin-primary, #ef4444)) center / contain no-repeat;
  color: #fff;
  font-size: 0.67rem;
  font-weight: 900;
  box-shadow:
    inset 0 0 0 0.48rem color-mix(in srgb, var(--local-admin-home-bg, #120606) 62%, transparent),
    0 0 0 0.063rem color-mix(in srgb, var(--local-admin-primary, #ef4444) 38%, #fff);
}

#app .local-api-prov-label {
  width: 100%;
  min-height: 1.7rem;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 0.063rem 0.125rem rgba(28, 58, 8, 0.35);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/*
 * Marquee (`.marquee-c`): o bundle pinta `.label[data-v-PAI]` mas o root do Marquee é `div.marquee`
 * com `data-v-5ef6c35d` — a cor do tema pode não aplicar; z-index 0 deixa o texto por baixo dos
 * ::before/::after (fade) nalguns temas. Garantir texto visível e faixa flexível.
 */
#app .marquee-c .megaphone-wrapper .marquee {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

#app .marquee-c .megaphone-wrapper .marquee .marquee__content {
  position: relative !important;
  z-index: 1 !important;
}

#app .marquee-c .megaphone-wrapper .marquee label.marquee__item,
#app .marquee-c .megaphone-wrapper .marquee .marquee__item {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#app .marquee-container .marquee {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

#app .marquee-container .marquee label.marquee__item,
#app .marquee-container .marquee .marquee__item {
  color: #2b912e !important;
  -webkit-text-fill-color: #2b912e !important;
  font-weight: 700 !important;
}

/*
 * Bundle (DevTools): irmãos directos `.ranking-area.layout1` + `.game-wrapper` — flex no pai para
 * mostrar primeiro a grelha (`.game-wrapper`) e depois o ranking.
 */
#app #inicio *:has(> .ranking-area.layout1 + .game-wrapper),
#app ion-page#inicio *:has(> .ranking-area.layout1 + .game-wrapper) {
  display: flex !important;
  flex-direction: column !important;
}

#app #inicio *:has(> .ranking-area.layout1 + .game-wrapper) > .ranking-area.layout1:not(.local-clone-inicio-ranking),
#app ion-page#inicio *:has(> .ranking-area.layout1 + .game-wrapper) > .ranking-area.layout1:not(.local-clone-inicio-ranking) {
  order: 25 !important;
}

#app #inicio *:has(> .ranking-area.layout1 + .game-wrapper) > .ranking-area.layout1 + .game-wrapper,
#app ion-page#inicio *:has(> .ranking-area.layout1 + .game-wrapper) > .ranking-area.layout1 + .game-wrapper {
  order: 8 !important;
}

/*
 * Lobby flex: Popular antes de Provedores e Ranking.
 * Layout TRe: `.game-c > .platform-game-c` leva a grelha; ranking deve vir depois no DOM/ordem visual.
 */
#app #inicio .game-wrapper > .lazy-component {
  order: 45 !important;
}

#app #inicio .game-wrapper .game-list-box {
  order: 40 !important;
}

#app #inicio .game-wrapper .ranking-area.layout1 {
  order: 60 !important;
}

/*
 * Trocar de lugar Popular e Ranking: o ranking vem no 1.º filho (tabs) e a grelha em `.platform-game-c`.
 * `display: contents` no wrapper das tabs faz chips + ranking tornarem-se filhos flex de `.game-c` e o `order` aplica.
 */
#app #inicio .game-c,
#app ion-page#inicio .game-c {
  display: flex !important;
  flex-direction: column !important;
}

#app #inicio .game-c > *:first-child:not(.platform-game-c),
#app ion-page#inicio .game-c > *:first-child:not(.platform-game-c) {
  display: contents !important;
}

#app #inicio .game-c > .platform-game-c,
#app ion-page#inicio .game-c > .platform-game-c {
  order: 20 !important;
}

#app #inicio .game-c .ranking-area.layout1,
#app ion-page#inicio .game-c .ranking-area.layout1 {
  order: 50 !important;
}

/*
 * Ranking do Vue como filho de `.platform-game-c`: manter depois dos `.game-wrapper-c`.
 */
#app #inicio .platform-game-c,
#app ion-page#inicio .platform-game-c {
  display: flex !important;
  flex-direction: column !important;
}

#app #inicio .platform-game-c > .bonus-pool-c,
#app ion-page#inicio .platform-game-c > .bonus-pool-c {
  order: 12 !important;
}

#app #inicio .platform-game-c > .game-wrapper-c,
#app ion-page#inicio .platform-game-c > .game-wrapper-c {
  order: 20 !important;
}

#app #inicio .platform-game-c > .ranking-area.layout1,
#app ion-page#inicio .platform-game-c > .ranking-area.layout1 {
  order: 40 !important;
}

/*
 * Clone injetado após `.more`: manter no fim do bloco GameWrapper (flex).
 */
#app #inicio .tabbar-tabs-inicio-components-GameWrapper-index,
#app ion-page#inicio .tabbar-tabs-inicio-components-GameWrapper-index,
#app ion-content.main-content .tabbar-tabs-inicio-components-GameWrapper-index,
#app .main-content .tabbar-tabs-inicio-components-GameWrapper-index {
  display: flex !important;
  flex-direction: column !important;
}

/*
 * ETAPA 1 — apenas a faixa superior «Baixe Nosso APP, Ganhe Super Prêmios!» + Instalar (como no print).
 * Componentes: ion-toolbar #pwa-header-bar e/ou .pwa-header-wrap. Sem mexer no resto do lobby.
 */
#app #pwa-header-bar {
  --background: linear-gradient(180deg, #f5f9d4 0%, #e8f2a8 100%) !important;
  --color: #174006;
  border-bottom: 1px solid rgba(100, 140, 45, 0.18);
}

#app #pwa-header-bar .install {
  background: linear-gradient(180deg, #e65100 0%, #bf360c 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(191, 54, 12, 0.35);
}

#app #pwa-header-bar p,
#app #pwa-header-bar .flex.items-center {
  color: #174006 !important;
  -webkit-text-fill-color: #174006 !important;
  font-weight: 600 !important;
}

#app #pwa-header-bar .close-btn .close,
#app #pwa-header-bar ion-icon.close {
  color: #2d5010 !important;
}

/* Variante PwaHeader (theme-28 / new-skin) */
#app .pwa-header-wrap {
  background: linear-gradient(180deg, #f5f9d4 0%, #e8f2a8 100%) !important;
  border-bottom: 1px solid rgba(100, 140, 45, 0.18);
}

#app .pwa-header-wrap .left-area .pwa-name {
  color: #174006 !important;
  font-weight: 700 !important;
  -webkit-text-fill-color: #174006 !important;
}

/*
 * ETAPA 2 — só o header principal do lobby: faixa verde-lima, logo e botão menu (fundo creme no quadrado).
 * Limitado a #inicio / .main-page para não colorir toolbars .header de outras rotas.
 */
#app #inicio ion-toolbar.header,
#app ion-page.main-page ion-toolbar.header {
  --background: linear-gradient(180deg, #c4f042 0%, #9ad819 45%, #7fc916 100%) !important;
  --border-width: 0 !important;
  --min-height: 52px;
  box-shadow: 0 2px 8px rgba(46, 92, 12, 0.22);
}

#app #inicio ion-toolbar.header ion-buttons[data-v-577e539a],
#app ion-page.main-page ion-toolbar.header ion-buttons[data-v-577e539a] {
  --background: transparent;
  background: linear-gradient(180deg, #fff9e0 0%, #f3e8a8 100%) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(80, 60, 0, 0.18);
  margin-inline-start: 2px;
  padding: 2px 4px !important;
}

#app #inicio ion-toolbar.header ion-buttons[data-v-577e539a] ion-button,
#app ion-page.main-page ion-toolbar.header ion-buttons[data-v-577e539a] ion-button {
  --background: transparent !important;
  --box-shadow: none !important;
}

#app #inicio ion-toolbar.header ion-img[slot="secondary"],
#app ion-page.main-page ion-toolbar.header ion-img[slot="secondary"] {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

/*
 * ETAPA 3 — só o carrossel / banner VIP abaixo do header (.swiper-c = poster + swiper).
 * Moldura dourada suave, sombra e paginação (o CSS base esconde .swiper-pagination em .swiper-poster).
 * Sem mexer em .activity-c, marquee, escudos, grelha nem ranking.
 */
#app #inicio .swiper-c,
#app ion-page.main-page .swiper-c {
  box-sizing: border-box;
  border-radius: 0.625rem;
  box-shadow:
    0 4px 14px rgba(30, 60, 10, 0.22),
    0 0 0 1px rgba(255, 210, 77, 0.42);
}

#app #inicio .swiper-c .swiper,
#app ion-page.main-page .swiper-c .swiper {
  border-radius: 0.625rem;
  overflow: hidden;
}

#app #inicio .swiper-c .poster-img,
#app ion-page.main-page .swiper-c .poster-img {
  border-radius: 0.625rem;
}

#app #inicio .local-inicio-banner-fallback {
  box-shadow:
    0 4px 14px rgba(30, 60, 10, 0.22),
    0 0 0 1px rgba(255, 210, 77, 0.42);
}

#app #inicio .swiper-c .swiper-pagination,
#app ion-page.main-page .swiper-c .swiper-pagination {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0 0.15rem;
  margin: 0;
  position: relative !important;
  bottom: 0 !important;
}

#app #inicio .swiper-c .swiper-pagination-bullet,
#app ion-page.main-page .swiper-c .swiper-pagination-bullet {
  width: 0.375rem !important;
  height: 0.375rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  opacity: 1 !important;
  margin: 0 0.125rem !important;
}

#app #inicio .swiper-c .swiper-pagination-bullet-active,
#app ion-page.main-page .swiper-c .swiper-pagination-bullet-active {
  width: 1.125rem !important;
  height: 0.375rem !important;
  border-radius: 0.125rem !important;
  background: linear-gradient(90deg, #ffe082 0%, #ff9800 100%) !important;
}

/* Início: faixa «Saldo» — flex no wrap. .log-in-box e .assets-box são muitas vezes irmãos em .content-box. */
#app .log-in-box + .assets-box .assets-box-wrap,
#app .content-box:has(> .log-in-box) .assets-box .assets-box-wrap,
#app ion-page.main-page .log-in-box + .assets-box .assets-box-wrap,
#app ion-page.main-page .content-box:has(> .log-in-box) .assets-box .assets-box-wrap,
#app .log-in-box .assets-box .assets-box-wrap,
#app ion-page.main-page .log-in-box .assets-box .assets-box-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0.4rem !important;
}

/* Início: faixa «Saldo» — removido o ion-img (avatar) do bundle; auth-local.js tira o nó. */
#app .log-in-box + .assets-box ion-img.assets-img,
#app .content-box:has(> .log-in-box) .assets-box ion-img.assets-img,
#app .content-box .assets-box.layout25 ion-img.assets-img,
#app ion-page.main-page .log-in-box + .assets-box ion-img.assets-img,
#app .log-in-box .assets-box ion-img.assets-img,
#app ion-page.main-page .log-in-box .assets-box ion-img.assets-img {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  --width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Faixa «Saldo» no header: sem avatar (ion-img.assets-img) — só texto + botões. */
#app ion-toolbar.header .assets-box ion-img.assets-img,
#app ion-page.main-page ion-toolbar.header .assets-box ion-img.assets-img,
#app ion-toolbar .assets-box .assets-box-wrap > ion-img.assets-img,
#app ion-toolbar .assets-box .assets-box-inner > ion-img.assets-img,
#app ion-toolbar .assets-box > ion-img.assets-img,
#app ion-header .assets-box .assets-box-wrap > ion-img.assets-img,
#app ion-header .assets-box .assets-box-inner > ion-img.assets-img,
#app ion-header .assets-box > ion-img.assets-img,
#app ion-page.main-page ion-toolbar .assets-box .assets-box-wrap > ion-img.assets-img,
#app ion-page.main-page ion-toolbar .assets-box .assets-box-inner > ion-img.assets-img {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  --width: 0 !important;
}

/*
 * Strip Saldo dentro de tabbar_layout_contentBox (content-box.layout1): o icon2 (assets-img) não fica sob ion-toolbar.header,
 * mas duplica o círculo junto ao texto. Só layout1 na home — não afecta user-info layout28.
 */
#app #inicio .content-box.layout1 .assets-box ion-img.assets-img,
#app ion-page.main-page .content-box.layout1 .assets-box ion-img.assets-img {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  --width: 0 !important;
}

/*
 * Icon2 na faixa amarela (`tabbar_layout_contentBox`): pode estar em `ion-content` / `user-info`,
 * não só no `ion-toolbar` — `layout25` etc. sem `.content-box.layout1`. Irmãos: `.log-in-box` + `.assets-box` (não `.log-in-box .assets-box`).
 */
#app .log-in-box + .assets-box ion-img.assets-img,
#app .content-box:has(> .log-in-box) .assets-box ion-img.assets-img,
#inicio .assets-box ion-img.assets-img,
#app #inicio .assets-box ion-img.assets-img,
#app ion-page#inicio .assets-box ion-img.assets-img,
#app #inicio .content-box .assets-box ion-img.assets-img,
#app #inicio ion-content .content-box .assets-box ion-img.assets-img,
#app #inicio .user-info-box .assets-box ion-img.assets-img,
#app #inicio .user-info-box .content-box .assets-box ion-img.assets-img,
#app #inicio .log-in-box .assets-box ion-img.assets-img {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  --width: 0 !important;
}

/*
 * Após `display:none` no icon2, o Vue re-substitui o nó e fica círculo vazio com ícone partido
 * (host ion-img ainda a ocupar a grelha). Colapsar o 1.º <ion-img> de cada .assets-box-wrap, excepto account.
 */
#app .log-in-box + .assets-box .assets-box-wrap > ion-img:not(.account-icon),
#app .content-box:has(> .log-in-box) .assets-box .assets-box-wrap > ion-img:not(.account-icon),
#app .content-box .assets-box.layout25 .assets-box-wrap > ion-img:not(.account-icon),
#inicio .assets-box-wrap > ion-img:not(.account-icon),
#app #inicio .assets-box-wrap > ion-img:not(.account-icon) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  --width: 0 !important;
  flex: 0 0 0 !important;
}

#app .log-in-box + .assets-box .assets-box-wrap > ion-img:not(.account-icon)::part(image),
#app .content-box:has(> .log-in-box) .assets-box .assets-box-wrap > ion-img:not(.account-icon)::part(image),
#app .content-box .assets-box.layout25 .assets-box-wrap > ion-img:not(.account-icon)::part(image),
#inicio .assets-box-wrap > ion-img:not(.account-icon)::part(image),
#app #inicio .assets-box-wrap > ion-img:not(.account-icon)::part(image) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

/*
 * Início: dois irmãos no mesmo `content-box` (`.log-in-box` + `.assets-box`) — o bundle mostrava
 * avatares / placeholders em duplicado ao lado de Saldo. O `local-header-chip` fica no `ion-toolbar`, não nestes nós.
 */
#app #inicio .content-box > .log-in-box,
#app #inicio .content-box > .assets-box,
#app ion-page#inicio .content-box > .log-in-box,
#app ion-page#inicio .content-box > .assets-box,
#app ion-page.main-page#inicio .content-box > .log-in-box,
#app ion-page.main-page#inicio .content-box > .assets-box,
#app #inicio .user-info-box .content-box > .log-in-box,
#app #inicio .user-info-box .content-box > .assets-box,
#app ion-page#inicio .user-info-box .content-box > .log-in-box,
#app ion-page#inicio .user-info-box .content-box > .assets-box,
#app ion-page#inicio ion-toolbar .content-box > .log-in-box,
#app ion-page#inicio ion-toolbar .content-box > .assets-box,
#app ion-page#inicio ion-header .content-box > .log-in-box,
#app ion-page#inicio ion-header .content-box > .assets-box,
#app #inicio ion-toolbar .content-box > .log-in-box,
#app #inicio ion-toolbar .content-box > .assets-box {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  flex: 0 0 0 !important;
}

/*
 * Top 3 (bundle): o `img.avatar-img` está em `position:absolute` com `top/left/transform` e medidas fixas;
 * regras agressivas (width/height:100% sem o mesmo posicionamento) partiam a pilha e o `<img>Passava` a
 * empurrar o layout (segundo “avatar” fora do círculo). Só reforçar o recorte; não reaplicar tamanho.
 */
#app #inicio .top-three-area .ranking-avatar,
#app ion-page#inicio .top-three-area .ranking-avatar,
#app .ranking-area .top-three-area .ranking-avatar {
  overflow: visible !important;
  contain: none !important;
}

#app #inicio .top-three-area .ranking-avatar .avatar-border,
#app ion-page#inicio .top-three-area .ranking-avatar .avatar-border,
#app .ranking-area .top-three-area .ranking-avatar .avatar-border {
  overflow: visible !important;
}

#app #inicio .top-three-area .ranking-avatar img.avatar-img,
#app ion-page#inicio .top-three-area .ranking-avatar img.avatar-img,
#app .ranking-area .top-three-area .ranking-avatar img.avatar-img {
  object-fit: cover;
  object-position: center;
}

/*
 * Início — ranking (referência: pódio + tabela; fundo #EAFFCC; Posição laranja à esq.; Quantia negrita à dir.).
 * Com tema local (html[data-local-theme-visual]), cores vêm de theme-local-visual.js.
 */
html:not([data-local-theme-visual]) #app #inicio .ranking-area,
html:not([data-local-theme-visual]) #app ion-page#inicio .ranking-area {
  background: #eaffcc !important;
}

#app #inicio .ranking-area,
#app ion-page#inicio .ranking-area {
  border-radius: 0.75rem;
  box-sizing: border-box;
  padding: 0.35rem 0.45rem 0.55rem;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  box-shadow: 0 1px 0 rgba(60, 80, 20, 0.08);
  /* Evita que flex / pilhas do Ionic cortem o pódio + tabela (lista absoluta + clip). */
  overflow: visible !important;
  flex-shrink: 0;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
}

#app #inicio .platform-game-c > .ranking-area.layout1,
#app ion-page#inicio .platform-game-c > .ranking-area.layout1 {
  overflow: visible !important;
}

/*
 * Bloco único: cabeçalho «Ranking» + área do top 3 como um só cartão.
 * O bundle usa largura fixa no header, margens horizontais no pódio e `::after` (SVG ranking-header-line)
 * — ficam duas caixas desalinhadas, separador visível e faixa #EAFFCC à direita.
 */
#app #inicio .ranking-area .ranking-header,
#app ion-page#inicio .ranking-area .ranking-header {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 0.75rem 0.75rem 0 0 !important;
  border-bottom: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#app #inicio .ranking-area .ranking-header::after,
#app ion-page#inicio .ranking-area .ranking-header::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  background: none !important;
  background-image: none !important;
}

#app #inicio .ranking-area .top-three-bg,
#app ion-page#inicio .ranking-area .top-three-bg {
  filter: saturate(1.05) contrast(0.98);
  opacity: 0.95;
}

#app #inicio .ranking-area .top-three-area,
#app ion-page#inicio .ranking-area .top-three-area {
  overflow: visible !important;
  contain: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  /* Junta ao header: remove o «degrau» (border-top duplicado) entre as duas zonas. */
  border-top: none !important;
  border-radius: 0 0 0.75rem 0.75rem !important;
}

/*
 * Efeito decorativo do bundle: `img.ranking-aperture` (pos. absoluta + animação) — gera
 * barra/veio claro à direita do pódio. Removido no clone início.
 */
#app #inicio .ranking-area .top-three-area .ranking-aperture,
#app ion-page#inicio .ranking-area .top-three-area .ranking-aperture,
#app .ranking-area .top-three-area .ranking-aperture {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  animation: none !important;
}

/* Pódio fixo: imagem de referência (local-ranking-podium-top3.png) no lugar do top 3 do bundle. */
/* O bundle mete .top-three-area { display:flex; justify-content: space-between } — com 1 filho visível o bloco fica colado à esquerda. */
#app #inicio .ranking-area .top-three-area[data-local-podium-ref="1"],
#app ion-page#inicio .ranking-area .top-three-area[data-local-podium-ref="1"],
#app .ranking-area .top-three-area:has(> .local-podium-hero) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  text-align: center;
}

#app #inicio .ranking-area .local-podium-hero,
#app ion-page#inicio .ranking-area .local-podium-hero,
#app .ranking-area .local-podium-hero {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  /* Refaz margens do skin (ex. 2.5rem 0.75rem) — só alívio vertical + centro horizontal. */
  margin: 0.35rem auto 0.45rem !important;
  padding: 0.2rem 0.35rem 0.5rem;
  box-sizing: border-box;
  line-height: 0;
  text-align: center;
  flex: 0 0 auto;
  align-self: center;
}

#app #inicio .ranking-area .local-podium-hero__img,
#app ion-page#inicio .ranking-area .local-podium-hero__img,
#app .ranking-area .local-podium-hero__img {
  width: auto;
  max-width: 100%;
  min-width: 0;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

#app #inicio .ranking-area .top-three-area .ranking-item-1 .ranking-avatar .avatar-border-1,
#app ion-page#inicio .ranking-area .top-three-area .ranking-item-1 .ranking-avatar .avatar-border-1 {
  filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.65));
}
#app #inicio .ranking-area .top-three-area .ranking-item-2 .name,
#app ion-page#inicio .ranking-area .top-three-area .ranking-item-2 .name {
  color: #1565c0 !important;
  font-weight: 800;
}
#app #inicio .ranking-area .top-three-area .ranking-item-3 .name,
#app ion-page#inicio .ranking-area .top-three-area .ranking-item-3 .name {
  color: #5d4037 !important;
  font-weight: 800;
}
html:not([data-local-theme-visual]) #app #inicio .ranking-area .top-three-area .ranking-item .amount,
html:not([data-local-theme-visual]) #app ion-page#inicio .ranking-area .top-three-area .ranking-item .amount,
html:not([data-local-theme-visual]) #app #inicio .ranking-area .top-three-area .ranking-item .amount .merchant-cy,
html:not([data-local-theme-visual]) #app ion-page#inicio .ranking-area .top-three-area .ranking-item .amount .merchant-cy {
  color: #e65100 !important;
  font-weight: 800;
  -webkit-text-fill-color: #e65100 !important;
}

#app #inicio .ranking-area .top-three-area .ranking-item .amount,
#app ion-page#inicio .ranking-area .top-three-area .ranking-item .amount,
#app #inicio .ranking-area .top-three-area .ranking-item .amount .merchant-cy,
#app ion-page#inicio .ranking-area .top-three-area .ranking-item .amount .merchant-cy {
  font-weight: 800;
}

#app #inicio .ranking-area .ranking-list-container,
#app ion-page#inicio .ranking-area .ranking-list-container {
  background: transparent;
  /* O bundle fixa 15rem + overflow:hidden (marquee) — aperta demais e parece "vazio" abaixo do pódio. */
  height: 20rem !important;
  min-height: 20rem !important;
  max-height: none !important;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  border-radius: 0.35rem;
}

#app #inicio .ranking-area .ranking-list::after,
#app ion-page#inicio .ranking-area .ranking-list::after {
  height: 20rem !important;
}

html:not([data-local-theme-visual]) #app #inicio .ranking-area .ranking-header-list,
html:not([data-local-theme-visual]) #app ion-page#inicio .ranking-area .ranking-header-list {
  color: #3d4a2a !important;
  font-weight: 800;
  text-transform: none;
  margin-top: 0.4rem;
  padding: 0 0.1rem;
}

#app #inicio .ranking-area .ranking-header-list,
#app ion-page#inicio .ranking-area .ranking-header-list {
  font-weight: 800;
  text-transform: none;
  margin-top: 0.4rem;
  padding: 0 0.1rem;
}

#app #inicio .ranking-area .ranking-header-list .item:nth-child(1),
#app ion-page#inicio .ranking-area .ranking-header-list .item:nth-child(1) {
  text-align: left;
  display: block;
  padding-left: 0.1rem;
}
#app #inicio .ranking-area .ranking-header-list .item:nth-child(2),
#app ion-page#inicio .ranking-area .ranking-header-list .item:nth-child(2) {
  text-align: center;
}
#app #inicio .ranking-area .ranking-header-list .item:nth-child(3),
#app ion-page#inicio .ranking-area .ranking-header-list .item:nth-child(3) {
  text-align: right;
  padding-right: 0.1rem;
}

#app #inicio .ranking-area .ranking-list > li,
#app ion-page#inicio .ranking-area .ranking-list > li {
  min-height: 2.75rem;
  line-height: 1.3 !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(100, 120, 60, 0.12);
  padding: 0.2rem 0.1rem;
  box-sizing: border-box;
}
#app #inicio .ranking-area .ranking-list > li:last-child,
#app ion-page#inicio .ranking-area .ranking-list > li:last-child {
  border-bottom: none;
}

html:not([data-local-theme-visual]) #app #inicio .ranking-area .ranking-list > li > div.rank.item,
html:not([data-local-theme-visual]) #app ion-page#inicio .ranking-area .ranking-list > li > div.rank.item {
  text-align: left !important;
  display: block;
  font-weight: 800 !important;
  font-size: 0.8rem;
  line-height: 1.2;
  color: #ff6b00 !important;
  -webkit-text-fill-color: #ff6b00 !important;
  align-self: center;
}

#app #inicio .ranking-area .ranking-list > li > div.rank.item,
#app ion-page#inicio .ranking-area .ranking-list > li > div.rank.item {
  text-align: left !important;
  display: block;
  font-weight: 800 !important;
  font-size: 0.8rem;
  line-height: 1.2;
  align-self: center;
}

#app #inicio .ranking-area .ranking-list > li > .ranking-user-info,
#app ion-page#inicio .ranking-area .ranking-list > li > .ranking-user-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
html:not([data-local-theme-visual]) #app #inicio .ranking-area .ranking-list > li > .ranking-user-info > .rank.item,
html:not([data-local-theme-visual]) #app ion-page#inicio .ranking-area .ranking-list > li > .ranking-user-info > .rank.item {
  text-align: left !important;
  order: 0;
  color: #ff6b00 !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: #ff6b00 !important;
}

#app #inicio .ranking-area .ranking-list > li > .ranking-user-info > .rank.item,
#app ion-page#inicio .ranking-area .ranking-list > li > .ranking-user-info > .rank.item {
  text-align: left !important;
  order: 0;
  font-weight: 800 !important;
}

#app #inicio .ranking-area .ranking-list li .ranking-user-info .name,
#app ion-page#inicio .ranking-area .ranking-list li .ranking-user-info .name {
  color: #4a4a4a !important;
  font-weight: 600;
  font-size: 0.75rem;
}
html:not([data-local-theme-visual]) #app #inicio .ranking-area .ranking-list li .amount,
html:not([data-local-theme-visual]) #app ion-page#inicio .ranking-area .ranking-list li .amount {
  text-align: right !important;
  justify-content: flex-end;
  color: #1e1e1e !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: #1e1e1e !important;
  font-size: 0.78rem;
  padding-right: 0.1rem;
}
html:not([data-local-theme-visual]) #app #inicio .ranking-area .ranking-list li .amount .merchant-cy,
html:not([data-local-theme-visual]) #app ion-page#inicio .ranking-area .ranking-list li .amount .merchant-cy {
  color: #1e1e1e !important;
  font-weight: 800;
}

#app #inicio .ranking-area .ranking-list li .amount,
#app ion-page#inicio .ranking-area .ranking-list li .amount {
  text-align: right !important;
  justify-content: flex-end;
  font-size: 0.78rem;
  padding-right: 0.1rem;
  font-weight: 800 !important;
}

#app #inicio .ranking-area .ranking-list li .amount .merchant-cy,
#app ion-page#inicio .ranking-area .ranking-list li .amount .merchant-cy {
  font-weight: 800;
}

/* Exploração de jogos (/game/search, /game/category): sem corações de favorito na grelha; sem ícone/logo partido no primeiro item «Todos» da sidebar */
/* HorizontalGameCard usa `ion-icon.favorite` (SVG vermelho), não só ion-img */
body.local-game-explore-page #app #content .hall-wrapper > ion-icon.favorite,
body.local-game-explore-page #app #content ion-icon.favorite,
body.local-game-explore-page #app #content ion-img.favorite,
body.local-game-explore-page #app #content .hall-wrapper > ion-img,
body.local-game-explore-page #app #content ion-img[src*="favorite"],
body.local-game-explore-page #app #content ion-img[src*="/img_icons/favorite_"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

body.local-game-explore-page #app #content .side ion-segment-button:first-of-type ion-img,
body.local-game-explore-page #app #content .side ion-segment-button:first-of-type ion-icon {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  overflow: hidden !important;
}

/* Badges de bônus (R$ +…) do header Vue que flutuam por cima da folha de login/cadastro */
body:has(#local-auth-root) #app .rewardTag {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

#local-auth-root .local-auth-sheet-scroll {
  overflow-anchor: none;
  scroll-behavior: auto;
}

html[data-local-theme-visual] #local-auth-root {
  --al-bg-modal: color-mix(in srgb, var(--local-admin-bg) 88%, var(--local-admin-primary)) !important;
  --al-bg-input: color-mix(in srgb, var(--local-admin-bg) 78%, var(--local-admin-primary)) !important;
  --al-text: color-mix(in srgb, var(--local-admin-primary) 10%, #ffffff) !important;
  --al-text-muted: color-mix(in srgb, var(--local-admin-primary) 38%, #ffffff) !important;
  --al-primary: var(--local-admin-primary) !important;
  --al-primary-hover: color-mix(in srgb, var(--local-admin-primary) 72%, #000000) !important;
  --al-link: color-mix(in srgb, var(--local-admin-primary) 78%, #ffffff) !important;
  --al-shadow: 0 18px 50px color-mix(in srgb, #000000 48%, transparent) !important;
}

html[data-local-theme-visual] #local-auth-root .local-auth-backdrop {
  background: color-mix(in srgb, var(--local-admin-bg) 72%, transparent) !important;
}

html[data-local-theme-visual] #local-auth-root .local-auth-tabs {
  background: color-mix(in srgb, var(--local-admin-bg) 76%, var(--local-admin-primary)) !important;
}

html[data-local-theme-visual] #local-auth-root .local-auth-tabs button[data-active="true"] {
  background: linear-gradient(135deg, var(--local-admin-primary), color-mix(in srgb, var(--local-admin-primary) 72%, #000000)) !important;
  color: #ffffff !important;
}

html[data-local-theme-visual] #local-auth-root .local-auth-phone-flag {
  background: var(--local-admin-primary) !important;
}

/*
 * Baú de indicação (Vue /activity/agency/…): hero com banner `bau-do-tesouro.png` em vez do baú pequeno.
 * Fundo sólido = toolbar (#131F42); sem padding extra no content; imagem ancorada ao topo.
 */
#app ion-content:has(.agent-poster[data-v-06be2933]) {
  --padding-top: 0 !important;
}

#app ion-content .agent-poster[data-v-06be2933] {
  background: #131f42 !important;
  background-image: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

#app ion-content .agent-poster .agent-poster-gift[data-v-06be2933] {
  display: none !important;
}

/* Mesma proporção que bau-do-tesouro.png (1376×768): bloco encosta ao .agent-content-wrap */
#app ion-content .agent-poster .agent-poster-treasure[data-v-06be2933] {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1376 / 768 !important;
  min-height: 0 !important;
  height: auto !important;
  background-color: #131f42 !important;
  background-image: url("/assets/bau-do-tesouro.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  margin: 0 !important;
  padding: 0 !important;
}

#app ion-content .agent-content[data-v-06be2933] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Seções por provedor injetadas no lobby local */
#app .local-provider-sections {
  display: grid;
  gap: 0.875rem;
  margin: 0.75rem 0 1.25rem;
  padding: 0 0.75rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

#app .local-provider-section {
  overflow: hidden;
  border-radius: 0.875rem;
  background: linear-gradient(
    180deg,
    var(--local-lobby-prov-body-top, rgba(238, 255, 191, 0.98)),
    var(--local-lobby-prov-body-bottom, rgba(221, 252, 163, 0.98))
  );
  border: 1px solid rgba(88, 143, 18, 0.2);
  box-shadow: 0 0.25rem 1rem rgba(12, 31, 14, 0.16);
}

#app .local-provider-section-head {
  min-height: 3.25rem;
  padding: 0.625rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: linear-gradient(
    105deg,
    var(--local-lobby-prov-head-start, #fff83d) 0%,
    color-mix(in srgb, var(--local-lobby-prov-head-start, #fff83d) 50%, var(--local-lobby-prov-head-end, #d1df37)) 55%,
    var(--local-lobby-prov-head-end, #d1df37) 100%
  );
}

#app .local-provider-title {
  min-width: 0;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: center;
}

#app .local-provider-title span {
  width: 2rem;
  height: 2rem;
  grid-row: span 2;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--local-lobby-prov-title, #1f4f0b) 12%, transparent) center / contain no-repeat;
}

#app .local-provider-title strong {
  color: var(--local-lobby-prov-title, #1f4f0b);
  font-size: 1rem;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#app .local-provider-title small {
  color: color-mix(in srgb, var(--local-lobby-prov-title, #1f4f0b) 72%, transparent);
  font-size: 0.7rem;
  font-weight: 700;
}

#app .local-provider-section-head button {
  flex: 0 0 auto;
  height: 2rem;
  padding: 0 0.875rem;
  border: 0;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.74);
  color: color-mix(in srgb, var(--local-lobby-prov-title, #1f4f0b) 58%, #3d6404);
  font-size: 0.75rem;
  font-weight: 800;
}

#app .local-provider-game-grid {
  padding: 0.75rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.625rem;
}

#app .local-provider-game-card {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

#app .local-provider-game-cover {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--local-lobby-prov-title, #1d3016) 88%, #1d3016) center / cover no-repeat;
  box-shadow:
    0 0 0 0.2rem color-mix(in srgb, var(--local-lobby-prov-title, #122914) 92%, #122914),
    0 0.35rem 0.75rem rgba(0, 0, 0, 0.22);
}

#app .local-provider-game-card span {
  display: block;
  margin-top: 0.45rem;
  color: var(--local-lobby-prov-title, #214509);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Imagem de provedores dentro do card amarelo do rodape */
#app .footer-container.layout1 {
  overflow: hidden !important;
  padding: 0.75rem 0 0.9rem !important;
  height: auto !important;
  min-height: 0 !important;
}

#app .footer-container.layout1 .local-footer-provider-art {
  width: calc(100% - 2rem) !important;
  min-height: 10.25rem !important;
  margin: 0 auto 0.75rem !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  background: #111c2d !important;
  box-shadow: 0 0.35rem 1rem rgba(7, 17, 31, 0.16);
  box-sizing: border-box !important;
  padding: 0 !important;
  position: relative !important;
}

#app .footer-container.layout1 .local-footer-provider-art .partner-img-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#app .footer-container.layout1 .local-footer-provider-art .logo-box {
  padding: 0 0.875rem !important;
  height: 2.85rem !important;
}

#app .footer-container.layout1 .local-footer-provider-art .partner-img.good-img,
#app .footer-container.layout1 .local-footer-provider-art .partner-img {
  display: block !important;
  width: 100% !important;
  height: 6.75rem !important;
  max-width: 100% !important;
  padding: 0 0.65rem 0.65rem !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
  object-fit: contain !important;
}

#app .footer-container.layout1 .local-footer-provider-art ion-img::part(image) {
  object-fit: contain !important;
}

#app .footer-container.layout1 .badge-box {
  display: flex !important;
  width: calc(100% - 3.25rem) !important;
  margin: 0 auto !important;
}

#app .footer-container.layout1 .logo-container.layout1,
#app .footer-container.layout1 .version-box.layout1,
#app .footer-container.layout1 .content-box.layout1 {
  display: none !important;
}

#app ion-content.main-content > .content-box.layout2,
#app ion-content.main-content .content-box.layout2:has(> .content.layout1:empty) {
  display: none !important;
}

/*
 * Telas internas do perfil/conta (VIP, mensagens, relatórios, convite e segurança).
 * O bundle usa imagens e tokens verdes/amarelos nessas rotas; estes overrides
 * reaproveitam a paleta ativa do admin quando o tema local está aplicado.
 */
html[data-local-theme-visual],
html[data-local-theme-visual] body,
html[data-local-theme-visual] ion-app,
html[data-local-theme-visual] #app,
html[data-local-theme-visual] #app ion-router-outlet {
  --color-theme-base: var(--local-admin-primary) !important;
  --color-primary-800: var(--local-admin-primary) !important;
  --color-bg-100: var(--local-admin-home-bg, var(--local-admin-bg)) !important;
  --color-bg-200: color-mix(in srgb, var(--local-admin-bg) 86%, var(--local-admin-primary)) !important;
  --color-bg-300: color-mix(in srgb, var(--local-admin-bg) 74%, var(--local-admin-primary)) !important;
  --color-line: color-mix(in srgb, var(--local-admin-primary) 28%, transparent) !important;
  --color-text-40: color-mix(in srgb, var(--local-admin-primary) 46%, #ffffff) !important;
  --color-text-80: color-mix(in srgb, var(--local-admin-primary) 20%, #ffffff) !important;
  --ep-color-background-fill-body-default: var(--local-admin-home-bg, var(--local-admin-bg)) !important;
  --ep-color-background-fill-surface-raised-L1: color-mix(in srgb, var(--local-admin-bg) 86%, var(--local-admin-primary)) !important;
  --ep-color-background-fill-surface-raised-L2: color-mix(in srgb, var(--local-admin-bg) 78%, var(--local-admin-primary)) !important;
  --ep-color-text-default: color-mix(in srgb, var(--local-admin-primary) 16%, #ffffff) !important;
  --ep-color-text-selected: var(--local-admin-primary) !important;
  --ep-color-text-weaker: color-mix(in srgb, var(--local-admin-primary) 42%, #ffffff) !important;
  background-color: var(--local-admin-home-bg, var(--local-admin-bg)) !important;
}

html[data-local-theme-visual] body,
html[data-local-theme-visual] body.home-type-Platform,
html[data-local-theme-visual] #app ion-app,
html[data-local-theme-visual] #app ion-content,
html[data-local-theme-visual] #app .ion-page {
  background:
    radial-gradient(120% 76% at 50% -12%, color-mix(in srgb, var(--local-admin-primary) 20%, transparent) 0%, transparent 56%),
    linear-gradient(180deg, var(--local-admin-home-bg, var(--local-admin-bg)), color-mix(in srgb, var(--local-admin-bg) 88%, #000000)) !important;
  background-color: var(--local-admin-home-bg, var(--local-admin-bg)) !important;
}

html[data-local-theme-visual] #app ion-content::part(background) {
  background:
    radial-gradient(120% 76% at 50% -12%, color-mix(in srgb, var(--local-admin-primary) 20%, transparent) 0%, transparent 56%),
    linear-gradient(180deg, var(--local-admin-home-bg, var(--local-admin-bg)), color-mix(in srgb, var(--local-admin-bg) 88%, #000000)) !important;
}

html[data-local-theme-visual] #app ion-header,
html[data-local-theme-visual] #app ion-toolbar,
html[data-local-theme-visual] #app ion-toolbar.toolbar-title-default,
html[data-local-theme-visual] #app .toolbar-title-default,
html[data-local-theme-visual] #app [class*="toolbar"] {
  --background: linear-gradient(135deg, color-mix(in srgb, var(--local-admin-primary) 84%, #ffffff), color-mix(in srgb, var(--local-admin-primary) 52%, var(--local-admin-bg)), color-mix(in srgb, var(--local-admin-bg) 82%, #000000)) !important;
  --color: color-mix(in srgb, var(--local-admin-primary) 8%, #ffffff) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--local-admin-primary) 84%, #ffffff), color-mix(in srgb, var(--local-admin-primary) 52%, var(--local-admin-bg)), color-mix(in srgb, var(--local-admin-bg) 82%, #000000)) !important;
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--local-admin-primary) 84%, #ffffff), color-mix(in srgb, var(--local-admin-primary) 52%, var(--local-admin-bg)), color-mix(in srgb, var(--local-admin-bg) 82%, #000000)) !important;
  color: color-mix(in srgb, var(--local-admin-primary) 8%, #ffffff) !important;
  box-shadow: 0 0.25rem 1rem color-mix(in srgb, var(--local-admin-primary) 22%, transparent) !important;
}

html[data-local-theme-visual] #app ion-title,
html[data-local-theme-visual] #app ion-toolbar ion-title,
html[data-local-theme-visual] #app ion-toolbar ion-button,
html[data-local-theme-visual] #app ion-toolbar ion-icon,
html[data-local-theme-visual] #app ion-toolbar .title-default {
  color: color-mix(in srgb, var(--local-admin-primary) 8%, #ffffff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-primary) 8%, #ffffff) !important;
}

html[data-local-theme-visual] #app .tab-box,
html[data-local-theme-visual] #app ion-header .tab-box,
html[data-local-theme-visual] #app ion-segment {
  --background: linear-gradient(180deg, color-mix(in srgb, var(--local-admin-bg) 76%, var(--local-admin-primary)), color-mix(in srgb, var(--local-admin-bg) 90%, #000000)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--local-admin-bg) 76%, var(--local-admin-primary)), color-mix(in srgb, var(--local-admin-bg) 90%, #000000)) !important;
  border-color: color-mix(in srgb, var(--local-admin-primary) 28%, transparent) !important;
}

html[data-local-theme-visual] #app ion-segment-button {
  --color: color-mix(in srgb, var(--local-admin-primary) 34%, #ffffff) !important;
  --color-checked: var(--local-admin-primary) !important;
  --indicator-color: var(--local-admin-primary) !important;
  color: color-mix(in srgb, var(--local-admin-primary) 34%, #ffffff) !important;
}

html[data-local-theme-visual] #app ion-segment-button.segment-button-checked,
html[data-local-theme-visual] #app ion-segment-button.segment-button-checked ion-label {
  color: var(--local-admin-primary) !important;
  -webkit-text-fill-color: var(--local-admin-primary) !important;
}

html[data-local-theme-visual] #app .board,
html[data-local-theme-visual] #app [class*="service-bg"],
html[data-local-theme-visual] #app [style*="yellow"],
html[data-local-theme-visual] #app [style*="green"] {
  background-image: none !important;
}

html[data-local-theme-visual] #app .board {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--local-admin-primary) 24%, var(--local-admin-bg)), color-mix(in srgb, var(--local-admin-bg) 88%, #000000)) !important;
  border: 1px solid color-mix(in srgb, var(--local-admin-primary) 22%, transparent) !important;
  border-radius: 1rem !important;
  box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, #000 18%, transparent) !important;
}

html[data-local-theme-visual] #app [class*="card"],
html[data-local-theme-visual] #app [class*="item"],
html[data-local-theme-visual] #app [class*="wrap"],
html[data-local-theme-visual] #app [class*="rule"],
html[data-local-theme-visual] #app [class*="info"],
html[data-local-theme-visual] #app [class*="report"] {
  border-color: color-mix(in srgb, var(--local-admin-primary) 24%, transparent) !important;
}

html[data-local-theme-visual] #app .agent-content-wrap,
html[data-local-theme-visual] #app .agent-my-card,
html[data-local-theme-visual] #app .agent-rule,
html[data-local-theme-visual] #app .report-recoed-item,
html[data-local-theme-visual] #app .report-select-item,
html[data-local-theme-visual] #app .report-selected-item,
html[data-local-theme-visual] #app .default-report-recond-item,
html[data-local-theme-visual] #app .tab-pane,
html[data-local-theme-visual] #app .list,
html[data-local-theme-visual] #app .item,
html[data-local-theme-visual] #app .security-item,
html[data-local-theme-visual] #app ion-list,
html[data-local-theme-visual] #app ion-item {
  --background: linear-gradient(180deg, color-mix(in srgb, var(--local-admin-bg) 84%, var(--local-admin-primary)), color-mix(in srgb, var(--local-admin-bg) 92%, #000000)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--local-admin-bg) 84%, var(--local-admin-primary)), color-mix(in srgb, var(--local-admin-bg) 92%, #000000)) !important;
  color: color-mix(in srgb, var(--local-admin-primary) 12%, #ffffff) !important;
}

html[data-local-theme-visual] #app table,
html[data-local-theme-visual] #app thead,
html[data-local-theme-visual] #app tbody,
html[data-local-theme-visual] #app tr,
html[data-local-theme-visual] #app th,
html[data-local-theme-visual] #app td {
  background-color: color-mix(in srgb, var(--local-admin-bg) 86%, var(--local-admin-primary)) !important;
  border-color: color-mix(in srgb, var(--local-admin-primary) 22%, transparent) !important;
  color: color-mix(in srgb, var(--local-admin-primary) 10%, #ffffff) !important;
}

html[data-local-theme-visual] #app thead,
html[data-local-theme-visual] #app th,
html[data-local-theme-visual] #app [class*="table"] [class*="head"] {
  background: color-mix(in srgb, var(--local-admin-primary) 22%, var(--local-admin-bg)) !important;
  color: color-mix(in srgb, var(--local-admin-primary) 8%, #ffffff) !important;
}

html[data-local-theme-visual] #app button,
html[data-local-theme-visual] #app .btn,
html[data-local-theme-visual] #app [class*="btn"],
html[data-local-theme-visual] #app ion-button {
  --background: linear-gradient(135deg, var(--local-admin-primary), color-mix(in srgb, var(--local-admin-primary) 70%, #000000)) !important;
  --color: #ffffff !important;
  border-color: color-mix(in srgb, var(--local-admin-primary) 38%, transparent) !important;
}

html[data-local-theme-visual] #app button:not([class*="tab"]):not([class*="segment"]),
html[data-local-theme-visual] #app .btn:not([class*="tab"]):not([class*="segment"]),
html[data-local-theme-visual] #app [class*="btn"]:not(.btn-wall):not([class*="tab"]):not([class*="segment"]) {
  background: linear-gradient(135deg, var(--local-admin-primary), color-mix(in srgb, var(--local-admin-primary) 70%, #000000)) !important;
  color: #ffffff !important;
}

html[data-local-theme-visual] #app [class*="yellow"],
html[data-local-theme-visual] #app [class*="green"],
html[data-local-theme-visual] #app [class*="success"],
html[data-local-theme-visual] #app [class*="theme"] {
  border-color: color-mix(in srgb, var(--local-admin-primary) 28%, transparent) !important;
}

html[data-local-theme-visual] #app .notification-content,
html[data-local-theme-visual] #app .common-ion-content,
html[data-local-theme-visual] #app .vip-content,
html[data-local-theme-visual] #app .agency-content,
html[data-local-theme-visual] #app .report-content,
html[data-local-theme-visual] #app .security-content {
  --background: var(--local-admin-home-bg, var(--local-admin-bg)) !important;
  background: var(--local-admin-home-bg, var(--local-admin-bg)) !important;
}

html[data-local-theme-visual] #app .notification-content::part(background),
html[data-local-theme-visual] #app .common-ion-content::part(background),
html[data-local-theme-visual] #app .vip-content::part(background),
html[data-local-theme-visual] #app .agency-content::part(background),
html[data-local-theme-visual] #app .report-content::part(background),
html[data-local-theme-visual] #app .security-content::part(background) {
  background:
    radial-gradient(120% 76% at 50% -12%, color-mix(in srgb, var(--local-admin-primary) 20%, transparent) 0%, transparent 56%),
    linear-gradient(180deg, var(--local-admin-home-bg, var(--local-admin-bg)), color-mix(in srgb, var(--local-admin-bg) 90%, #000000)) !important;
}

html[data-local-theme-visual] #app .notification-content p,
html[data-local-theme-visual] #app .notification-content span,
html[data-local-theme-visual] #app .common-ion-content p,
html[data-local-theme-visual] #app .common-ion-content span,
html[data-local-theme-visual] #app .agent-content-wrap,
html[data-local-theme-visual] #app .agent-content-wrap p,
html[data-local-theme-visual] #app .agent-content-wrap span,
html[data-local-theme-visual] #app .report-content,
html[data-local-theme-visual] #app .security-content {
  color: color-mix(in srgb, var(--local-admin-primary) 12%, #ffffff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-primary) 12%, #ffffff) !important;
}

html[data-local-theme-visual] #app .notification-content .board,
html[data-local-theme-visual] #app .agent-content-wrap,
html[data-local-theme-visual] #app .agent-my-card,
html[data-local-theme-visual] #app .agent-rule,
html[data-local-theme-visual] #app .agent-reward-list,
html[data-local-theme-visual] #app .security-content ion-list,
html[data-local-theme-visual] #app .security-content ion-item {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--local-admin-bg) 82%, var(--local-admin-primary)), color-mix(in srgb, var(--local-admin-bg) 94%, #000000)) !important;
  box-shadow: 0 0.5rem 1.35rem color-mix(in srgb, #000000 28%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--local-admin-primary) 24%, transparent) !important;
}

html[data-local-theme-visual] #app .agent-content-wrap [class*="card"],
html[data-local-theme-visual] #app .agent-content-wrap [class*="box"],
html[data-local-theme-visual] #app .agent-content-wrap [class*="item"] {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--local-admin-primary) 18%, var(--local-admin-bg)), color-mix(in srgb, var(--local-admin-bg) 92%, #000000)) !important;
  color: color-mix(in srgb, var(--local-admin-primary) 10%, #ffffff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-primary) 10%, #ffffff) !important;
}

/* Fundo global do viewport: remove o amarelo lateral deixado pela skin golden-emerald. */
html,
body,
ion-app,
#app,
#app > ion-router-outlet,
#app ion-router-outlet.fade-in-loading-main-tree,
#app .fade-in-loading-main-tree,
#app > ion-router-outlet > .ion-page,
#app ion-router-outlet > .ion-page,
#app div.ion-page,
#app ion-page {
  background-color: var(--local-admin-home-bg, #1f0c0e) !important;
  background-image:
    radial-gradient(120% 76% at 50% -12%, color-mix(in srgb, var(--local-admin-primary, #ef4444) 18%, transparent) 0%, transparent 56%),
    linear-gradient(180deg, var(--local-admin-home-bg, #1f0c0e), color-mix(in srgb, var(--local-admin-bg, #15090a) 90%, #000000)) !important;
  background:
    radial-gradient(120% 76% at 50% -12%, color-mix(in srgb, var(--local-admin-primary, #ef4444) 18%, transparent) 0%, transparent 56%),
    linear-gradient(180deg, var(--local-admin-home-bg, #1f0c0e), color-mix(in srgb, var(--local-admin-bg, #15090a) 90%, #000000)) !important;
}

body.home-type-Platform,
body.first,
body.local-main-tabbar-fix,
html.golden-emerald,
html.yellow-dark,
html.auroral-yellow,
html.green-default,
html.forest-green {
  background-color: var(--local-admin-home-bg, #1f0c0e) !important;
  background-image:
    radial-gradient(120% 76% at 50% -12%, color-mix(in srgb, var(--local-admin-primary, #ef4444) 18%, transparent) 0%, transparent 56%),
    linear-gradient(180deg, var(--local-admin-home-bg, #1f0c0e), color-mix(in srgb, var(--local-admin-bg, #15090a) 90%, #000000)) !important;
}

/* VIP (/activity/vip): remove amarelos próprios da tabela/lista e dos botões de coleta. */
html[data-local-theme-visual] body.local-promo-vip-page,
html[data-local-theme-visual] body.local-promo-vip-page ion-app,
html[data-local-theme-visual] body.local-promo-vip-page ion-content,
html[data-local-theme-visual] body.local-promo-vip-page ion-content::part(background) {
  --background: var(--local-admin-home-bg, var(--local-admin-bg)) !important;
  background:
    radial-gradient(120% 76% at 50% -12%, color-mix(in srgb, var(--local-admin-primary) 18%, transparent) 0%, transparent 56%),
    linear-gradient(180deg, var(--local-admin-home-bg, var(--local-admin-bg)), color-mix(in srgb, var(--local-admin-bg) 90%, #000000)) !important;
}

html[data-local-theme-visual] body.local-promo-vip-page ion-toolbar,
html[data-local-theme-visual] body.local-promo-vip-page ion-header,
html[data-local-theme-visual] body.local-promo-vip-page .toolbar-title-default {
  --background: linear-gradient(135deg, var(--local-admin-primary), color-mix(in srgb, var(--local-admin-primary) 56%, var(--local-admin-bg)), color-mix(in srgb, var(--local-admin-bg) 88%, #000000)) !important;
  background: linear-gradient(135deg, var(--local-admin-primary), color-mix(in srgb, var(--local-admin-primary) 56%, var(--local-admin-bg)), color-mix(in srgb, var(--local-admin-bg) 88%, #000000)) !important;
  color: #ffffff !important;
}

html[data-local-theme-visual] body.local-promo-vip-page .vipLevelListHead,
html[data-local-theme-visual] body.local-promo-vip-page .vipLevelListHead.bg-300,
html[data-local-theme-visual] body.local-promo-vip-page .vipLevelListHead .listTitle,
html[data-local-theme-visual] body.local-promo-vip-page .bg-200.normal-text.sh-cls.listTitle,
html[data-local-theme-visual] body.local-promo-vip-page .sh-cls.listTitle,
html[data-local-theme-visual] body.local-promo-vip-page .bg-100,
html[data-local-theme-visual] body.local-promo-vip-page .bg-200,
html[data-local-theme-visual] body.local-promo-vip-page .bg-300,
html[data-local-theme-visual] body.local-promo-vip-page .bg-400,
html[data-local-theme-visual] body.local-promo-vip-page .list-md,
html[data-local-theme-visual] body.local-promo-vip-page .levelTable,
html[data-local-theme-visual] body.local-promo-vip-page table,
html[data-local-theme-visual] body.local-promo-vip-page thead,
html[data-local-theme-visual] body.local-promo-vip-page tbody,
html[data-local-theme-visual] body.local-promo-vip-page tr {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--local-admin-bg) 84%, var(--local-admin-primary)), color-mix(in srgb, var(--local-admin-bg) 94%, #000000)) !important;
  background-color: color-mix(in srgb, var(--local-admin-bg) 88%, var(--local-admin-primary)) !important;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--local-admin-bg) 84%, var(--local-admin-primary)), color-mix(in srgb, var(--local-admin-bg) 94%, #000000)) !important;
  color: color-mix(in srgb, var(--local-admin-primary) 12%, #ffffff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-primary) 12%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--local-admin-primary) 24%, transparent) !important;
}

html[data-local-theme-visual] body.local-promo-vip-page th,
html[data-local-theme-visual] body.local-promo-vip-page td,
html[data-local-theme-visual] body.local-promo-vip-page table th,
html[data-local-theme-visual] body.local-promo-vip-page table td {
  background-color: color-mix(in srgb, var(--local-admin-bg) 86%, var(--local-admin-primary)) !important;
  color: color-mix(in srgb, var(--local-admin-primary) 10%, #ffffff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-primary) 10%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--local-admin-primary) 24%, transparent) !important;
}

html[data-local-theme-visual] body.local-promo-vip-page table tbody tr:nth-child(even) td,
html[data-local-theme-visual] body.local-promo-vip-page .listItemShallow {
  background-color: color-mix(in srgb, var(--local-admin-bg) 82%, var(--local-admin-primary)) !important;
}

html[data-local-theme-visual] body.local-promo-vip-page table tbody tr:nth-child(odd) td,
html[data-local-theme-visual] body.local-promo-vip-page .listItemDeep {
  background-color: color-mix(in srgb, var(--local-admin-bg) 92%, #000000) !important;
}

html[data-local-theme-visual] body.local-promo-vip-page .claimButtonDisabled,
html[data-local-theme-visual] body.local-promo-vip-page .claimButtonEnabled,
html[data-local-theme-visual] body.local-promo-vip-page .vip-detail.claimButtonDisabled,
html[data-local-theme-visual] body.local-promo-vip-page .vip-detail.claimButtonEnabled,
html[data-local-theme-visual] body.local-promo-vip-page .footer,
html[data-local-theme-visual] body.local-promo-vip-page ion-button.sign-yellow-btn {
  --background: linear-gradient(135deg, var(--local-admin-primary), color-mix(in srgb, var(--local-admin-primary) 66%, #000000)) !important;
  background: linear-gradient(135deg, var(--local-admin-primary), color-mix(in srgb, var(--local-admin-primary) 66%, #000000)) !important;
  background-color: var(--local-admin-primary) !important;
  background-image: linear-gradient(135deg, var(--local-admin-primary), color-mix(in srgb, var(--local-admin-primary) 66%, #000000)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: color-mix(in srgb, var(--local-admin-primary) 38%, transparent) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   VIP PAGE — especificidade corrigida + elementos sem override
   Os estilos hardcoded usam "#app" (ID) → precisamos de "#app" aqui
   para vencer no tiebreaker de specificity entre dois !important.
   ══════════════════════════════════════════════════════════════════════ */

/* Fundo do ion-content */
html[data-local-theme-visual] body.local-promo-vip-page #app ion-content {
  --background: var(--local-admin-home-bg, var(--local-admin-bg)) !important;
}

/* Cartão principal .my-vip */
html[data-local-theme-visual] body.local-promo-vip-page #app .my-vip,
html[data-local-theme-visual] body.local-promo-vip-page #app .my-vip[data-v-367a77e7] {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--local-admin-bg) 76%, var(--local-admin-primary)),
    color-mix(in srgb, var(--local-admin-bg) 92%, #000000)
  ) !important;
  background-image: none !important;
  border: 1px solid color-mix(in srgb, var(--local-admin-primary) 28%, transparent) !important;
  color: #ffffff !important;
}

/* Botão "Ver detalhes" / claim */
html[data-local-theme-visual] body.local-promo-vip-page #app .vip-top.vip-detail,
html[data-local-theme-visual] body.local-promo-vip-page #app .vip-top.vip-detail[data-v-367a77e7] {
  background: linear-gradient(135deg, var(--local-admin-primary), color-mix(in srgb, var(--local-admin-primary) 66%, #000000)) !important;
  color: color-mix(in srgb, var(--local-admin-bg) 96%, #000) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-bg) 96%, #000) !important;
  border-color: color-mix(in srgb, var(--local-admin-primary) 38%, transparent) !important;
}

/* Barra de progresso */
html[data-local-theme-visual] body.local-promo-vip-page #app .progress-bar,
html[data-local-theme-visual] body.local-promo-vip-page #app .progress-bar[data-v-367a77e7] {
  --background: color-mix(in srgb, var(--local-admin-bg) 55%, #000000) !important;
}

/* Texto info muted */
html[data-local-theme-visual] body.local-promo-vip-page #app .info-mid,
html[data-local-theme-visual] body.local-promo-vip-page #app .info-mid[data-v-367a77e7] {
  color: color-mix(in srgb, var(--local-admin-primary) 50%, rgba(255,255,255,0.72)) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-primary) 50%, rgba(255,255,255,0.72)) !important;
}

/* Valor atual de depósito/aposta (destaque) */
html[data-local-theme-visual] body.local-promo-vip-page #app .need-bets .current-recharge,
html[data-local-theme-visual] body.local-promo-vip-page #app .need-bets .current-recharge[data-v-367a77e7],
html[data-local-theme-visual] body.local-promo-vip-page #app .need-recharge .current-recharge,
html[data-local-theme-visual] body.local-promo-vip-page #app .need-recharge .current-recharge[data-v-367a77e7] {
  color: var(--local-admin-primary) !important;
  -webkit-text-fill-color: var(--local-admin-primary) !important;
}

/* Texto comparação de nível */
html[data-local-theme-visual] body.local-promo-vip-page #app .vip-compare,
html[data-local-theme-visual] body.local-promo-vip-page #app .vip-compare[data-v-367a77e7] {
  color: color-mix(in srgb, var(--local-admin-primary) 22%, #ffffff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-primary) 22%, #ffffff) !important;
}

/* Cabeçalho da lista de níveis VIP (especificidade corrigida) */
html[data-local-theme-visual] body.local-promo-vip-page #app .vipLevelListHead,
html[data-local-theme-visual] body.local-promo-vip-page #app .vipLevelListHead[data-v-367a77e7] {
  background: color-mix(in srgb, var(--local-admin-bg) 80%, var(--local-admin-primary)) !important;
  background-image: none !important;
  border-color: color-mix(in srgb, var(--local-admin-primary) 28%, transparent) !important;
}

/* Botões de segmento */
html[data-local-theme-visual] body.local-promo-vip-page #app .vipLevelListHead ion-segment-button,
html[data-local-theme-visual] body.local-promo-vip-page #app .vipLevelListHead ion-segment-button[data-v-367a77e7] {
  --color: color-mix(in srgb, var(--local-admin-primary) 55%, rgba(255,255,255,0.6)) !important;
  --color-checked: #ffffff !important;
}

html[data-local-theme-visual] body.local-promo-vip-page #app .vipLevelListHead ion-segment-button.segment-button-checked::part(native) {
  border: 2px solid color-mix(in srgb, var(--local-admin-primary) 65%, #000000) !important;
  box-shadow: inset 0 -3px 0 var(--local-admin-primary) !important;
}

/* Cabeçalho da tabela (listTitle) — especificidade corrigida */
html[data-local-theme-visual] body.local-promo-vip-page #app .listTitle.sh-cls,
html[data-local-theme-visual] body.local-promo-vip-page #app .listTitle.sh-cls[data-v-367a77e7] {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--local-admin-bg) 74%, var(--local-admin-primary)),
    color-mix(in srgb, var(--local-admin-bg) 84%, var(--local-admin-primary))
  ) !important;
  color: color-mix(in srgb, var(--local-admin-primary) 22%, #ffffff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-primary) 22%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--local-admin-primary) 28%, transparent) !important;
}

html[data-local-theme-visual] body.local-promo-vip-page #app .listTitle.sh-cls .span-1,
html[data-local-theme-visual] body.local-promo-vip-page #app .listTitle.sh-cls .span-1[data-v-367a77e7] {
  color: color-mix(in srgb, var(--local-admin-primary) 22%, #ffffff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-primary) 22%, #ffffff) !important;
}

/* Linhas alternadas (especificidade corrigida) */
html[data-local-theme-visual] body.local-promo-vip-page #app .listItemDeep,
html[data-local-theme-visual] body.local-promo-vip-page #app .listItemDeep[data-v-367a77e7] {
  background-color: color-mix(in srgb, var(--local-admin-bg) 88%, var(--local-admin-primary)) !important;
}

html[data-local-theme-visual] body.local-promo-vip-page #app .listItemShallow,
html[data-local-theme-visual] body.local-promo-vip-page #app .listItemShallow[data-v-367a77e7] {
  background-color: color-mix(in srgb, var(--local-admin-bg) 80%, var(--local-admin-primary)) !important;
}

/* Texto de progresso de depósito */
html[data-local-theme-visual] body.local-promo-vip-page #app .deposit-bot.progressTextRight,
html[data-local-theme-visual] body.local-promo-vip-page #app .deposit-bot.progressTextRight[data-v-367a77e7] {
  color: color-mix(in srgb, var(--local-admin-primary) 65%, #ff8a80) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-primary) 65%, #ff8a80) !important;
}

/* Seção de regras */
html[data-local-theme-visual] body.local-promo-vip-page #app .rule-content.act-info,
html[data-local-theme-visual] body.local-promo-vip-page #app .rule-content.act-info[data-v-367a77e7] {
  background: color-mix(in srgb, var(--local-admin-bg) 82%, var(--local-admin-primary)) !important;
  border-color: color-mix(in srgb, var(--local-admin-primary) 28%, transparent) !important;
}

html[data-local-theme-visual] body.local-promo-vip-page #app .rule-content.act-info .ruleTitle,
html[data-local-theme-visual] body.local-promo-vip-page #app .rule-content.act-info .ruleTitle[data-v-367a77e7] {
  color: color-mix(in srgb, var(--local-admin-primary) 28%, #ffffff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-primary) 28%, #ffffff) !important;
}

html[data-local-theme-visual] body.local-promo-vip-page #app .rule-content.act-info p,
html[data-local-theme-visual] body.local-promo-vip-page #app .rule-content.act-info p[data-v-367a77e7] {
  color: color-mix(in srgb, var(--local-admin-primary) 20%, rgba(255,255,255,0.72)) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-primary) 20%, rgba(255,255,255,0.72)) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   VIP DETAILS OVERLAY (.local-vip-details) — sem override algum antes
   ══════════════════════════════════════════════════════════════════════ */

html[data-local-theme-visual] .local-vip-details {
  background: var(--local-admin-home-bg, var(--local-admin-bg)) !important;
}

html[data-local-theme-visual] .local-vip-details-header {
  background: linear-gradient(135deg, var(--local-admin-primary), color-mix(in srgb, var(--local-admin-primary) 56%, var(--local-admin-bg))) !important;
  border-bottom-color: color-mix(in srgb, var(--local-admin-primary) 32%, transparent) !important;
}

html[data-local-theme-visual] .local-vip-details--semanal-tab .local-vip-details-header {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--local-admin-primary) 72%, var(--local-admin-bg)),
    color-mix(in srgb, var(--local-admin-primary) 48%, var(--local-admin-bg))
  ) !important;
}

html[data-local-theme-visual] .local-vip-details-back,
html[data-local-theme-visual] .local-vip-details-title,
html[data-local-theme-visual] .local-vip-details-clipboard {
  color: color-mix(in srgb, var(--local-admin-bg) 92%, #000000) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-bg) 92%, #000000) !important;
}

html[data-local-theme-visual] .local-vip-details-main {
  background: color-mix(in srgb, var(--local-admin-home-bg, var(--local-admin-bg)) 94%, var(--local-admin-primary)) !important;
}

html[data-local-theme-visual] .local-vip-details-card {
  background: color-mix(in srgb, var(--local-admin-bg) 78%, var(--local-admin-primary)) !important;
  border-color: color-mix(in srgb, var(--local-admin-primary) 22%, transparent) !important;
}

html[data-local-theme-visual] .local-vip-collect-all {
  background: linear-gradient(180deg, var(--local-admin-primary), color-mix(in srgb, var(--local-admin-primary) 72%, #000000)) !important;
  border-color: color-mix(in srgb, var(--local-admin-primary) 55%, #000000) !important;
  color: color-mix(in srgb, var(--local-admin-bg) 94%, #000) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-bg) 94%, #000) !important;
}

html[data-local-theme-visual] .local-vip-nivel-atual,
html[data-local-theme-visual] .local-vip-details-criteria-title {
  color: color-mix(in srgb, var(--local-admin-primary) 45%, rgba(255,255,255,0.72)) !important;
}

html[data-local-theme-visual] .local-vip-details-track {
  background: color-mix(in srgb, var(--local-admin-bg) 55%, #000000) !important;
}

html[data-local-theme-visual] .local-vip-details-fill {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--local-admin-primary) 55%, rgba(255,255,255,0.4)),
    var(--local-admin-primary)
  ) !important;
}

html[data-local-theme-visual] .local-vip-details-criteria-line {
  color: color-mix(in srgb, var(--local-admin-primary) 30%, rgba(255,255,255,0.65)) !important;
}

html[data-local-theme-visual] .local-vip-details-hl {
  color: var(--local-admin-primary) !important;
  -webkit-text-fill-color: var(--local-admin-primary) !important;
}

html[data-local-theme-visual] .local-vip-details-muted {
  color: color-mix(in srgb, var(--local-admin-primary) 25%, rgba(255,255,255,0.5)) !important;
}

html[data-local-theme-visual] .local-vip-section-title {
  color: color-mix(in srgb, var(--local-admin-primary) 28%, #ffffff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-primary) 28%, #ffffff) !important;
}

html[data-local-theme-visual] .local-vip-tabs {
  background: color-mix(in srgb, var(--local-admin-bg) 80%, var(--local-admin-primary)) !important;
  border-color: color-mix(in srgb, var(--local-admin-primary) 28%, transparent) !important;
}

html[data-local-theme-visual] .local-vip-tab {
  color: color-mix(in srgb, var(--local-admin-primary) 55%, rgba(255,255,255,0.6)) !important;
}

html[data-local-theme-visual] .local-vip-tab.is-active {
  background: color-mix(in srgb, var(--local-admin-primary) 18%, rgba(255,255,255,0.12)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-local-theme-visual] .local-vip-tabs[data-active-tab="bonus"] .local-vip-tab.is-active,
html[data-local-theme-visual] .local-vip-tabs[data-active-tab="diario"] .local-vip-tab.is-active,
html[data-local-theme-visual] .local-vip-tabs[data-active-tab="instrucoes"] .local-vip-tab.is-active,
html[data-local-theme-visual] .local-vip-tabs[data-active-tab="semanal"] .local-vip-tab.is-active {
  box-shadow: inset 0 -3px 0 var(--local-admin-primary) !important;
  background: transparent !important;
}

html[data-local-theme-visual] .local-vip-table {
  border-color: color-mix(in srgb, var(--local-admin-primary) 25%, transparent) !important;
}

html[data-local-theme-visual] .local-vip-table-head,
html[data-local-theme-visual] .local-vip-table-head--semanal {
  background: color-mix(in srgb, var(--local-admin-bg) 74%, var(--local-admin-primary)) !important;
  color: color-mix(in srgb, var(--local-admin-primary) 22%, #ffffff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-primary) 22%, #ffffff) !important;
}

html[data-local-theme-visual] .local-vip-table-row--a,
html[data-local-theme-visual] .local-vip-table--semanal .local-vip-table-row--a {
  background: color-mix(in srgb, var(--local-admin-bg) 86%, var(--local-admin-primary)) !important;
}

html[data-local-theme-visual] .local-vip-table-row--b,
html[data-local-theme-visual] .local-vip-table--semanal .local-vip-table-row--b {
  background: color-mix(in srgb, var(--local-admin-bg) 78%, var(--local-admin-primary)) !important;
}

html[data-local-theme-visual] .local-vip-col {
  color: color-mix(in srgb, var(--local-admin-primary) 18%, #ffffff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--local-admin-primary) 18%, #ffffff) !important;
}

html[data-local-theme-visual] .local-vip-mini-prog-track {
  background: color-mix(in srgb, var(--local-admin-bg) 55%, #000000) !important;
}

html[data-local-theme-visual] .local-vip-mini-prog-fill {
  background: var(--local-admin-primary) !important;
}

html[data-local-theme-visual] .local-vip-mini-prog-txt {
  color: color-mix(in srgb, var(--local-admin-primary) 40%, rgba(255,255,255,0.6)) !important;
}

html[data-local-theme-visual] .local-vip-bonus-val,
html[data-local-theme-visual] .local-vip-bonus-val--diario,
html[data-local-theme-visual] .local-vip-bonus-val--semanal {
  color: var(--local-admin-primary) !important;
  -webkit-text-fill-color: var(--local-admin-primary) !important;
}