/* =========================================================
   20NABET — CASINO CHINÊS (fidelidade visual da pasta 20nabet)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ---------- Tokens (iguais ao style.css original) ---------- */
html.theme-20nabet {
    --green-dark:   #0b4534;
    --green-mid:    #0e5e43;
    --green-light:  #146d4e;
    --green-border: #1a8060;
    --gold:         #f7d302;
    --gold-dark:    #d4a800;
    --gold-light:   #ffe54e;
    --red:          #e53935;
    --orange:       #ff9500;
    --white:        #ffffff;
    --muted:        #7fb89e;
    --text-sm:      #a0c4b8;
    --card:         #0d5038;
    --card-hover:   #136046;
    --app-width:    480px;
    --header-h:     56px;
    --topbar-h:     40px;
    --bottom-h:     64px;
    --radius:       12px;
    --radius-sm:    8px;
    --shadow:       0 4px 20px rgba(0,0,0,0.35);

    /* aliases modernos (cx / modern-casino) */
    --cx-bg: #0b4534 !important;
    --cx-surface: #0e5e43 !important;
    --cx-card: #0d5038 !important;
    --cx-border: #1a8060 !important;
    --cx-muted: #7fb89e !important;
    --cx-text: #ffffff !important;
    --cx-brand: #f7d302 !important;
    --cx-brand-hover: #ffe54e !important;
    --cx-brand-text: #000000 !important;
    --cx-brand-rgb: 247, 211, 2 !important;
    --cx-font: 'Outfit', 'Segoe UI', system-ui, sans-serif !important;
    --cx-header-h: 56px;
    --cx-nav-h: 64px;
    --player-topbar-height: 56px;

    color-scheme: dark;
    scroll-behavior: smooth;
    background: #1a9e70 !important;
    background-color: #1a9e70 !important;
}

/* ---------- Fonte + gutters verdes (PC) + shell app ---------- */
html.theme-20nabet,
html.theme-20nabet body,
html.theme-20nabet body.theme-20nabet {
    font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif !important;
    color: #fff !important;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* Body = app shell 20nabet (#app) */
html.theme-20nabet body,
html.theme-20nabet body.theme-20nabet {
    background: #0b4534 !important;
    background-color: #0b4534 !important;
    max-width: 480px !important;
    width: 100% !important;
    margin: 0 auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    box-shadow: 0 0 60px rgba(0,0,0,0.6) !important;
    position: relative !important;
    overflow-x: hidden !important;
    padding-bottom: calc(64px + 14px) !important;
}

/* Laterais verdes claras (fora do app) — html fica #1a9e70 */
html.theme-20nabet {
    background: #1a9e70 !important;
    background-color: #1a9e70 !important;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(247,211,2,0.08), transparent 55%),
        linear-gradient(180deg, #1a9e70 0%, #148a60 50%, #0f7a54 100%) !important;
}

/* reforço do shell (sombra do #app original) */
html.theme-20nabet body::before {
    content: "";
    position: fixed;
    inset: 0 auto 0 50%;
    transform: translateX(-50%);
    width: min(100vw, 480px);
    background: #0b4534;
    z-index: -1;
    box-shadow: 0 0 60px rgba(0,0,0,0.65);
    pointer-events: none;
}

/* scrollbars ocultas como no original */
html.theme-20nabet *,
html.theme-20nabet *::before,
html.theme-20nabet *::after {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
html.theme-20nabet *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* =========================================================
   TOPO / PROMO
   ========================================================= */
html.theme-20nabet .bonus-cadastro,
html.theme-20nabet .bonus-cadastro.cx-top-promo {
    position: relative !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    background: linear-gradient(90deg, #b8860b, #f7d302, #b8860b) !important;
    color: #000 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-bottom: 1px solid #d4a800 !important;
    box-shadow: none !important;
    animation: nabet-pulse-gold 2.4s ease-in-out infinite !important;
}
html.theme-20nabet .bonus-cadastro strong {
    color: #000 !important;
}
html.theme-20nabet .cx-top-promo-pulse { display: none !important; }
html.theme-20nabet .cx-top-promo-btn {
    border: none !important;
    border-radius: 999px !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    background: #0b4534 !important;
    color: #f7d302 !important;
}

/* =========================================================
   HEADER (estilo .header / .topbar 20nabet)
   ========================================================= */
html.theme-20nabet .top-bar,
html.theme-20nabet .top-bar.top-bar--rich,
html.theme-20nabet .top-bar.top-bar--home,
html.theme-20nabet .top-bar.top-bar--player {
    background: #0e5e43 !important;
    background-color: #0e5e43 !important;
    background-image: linear-gradient(90deg, #0d5e3a, #1a7a52) !important;
    border-bottom: 1px solid #1a8060 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    padding: 0 !important;
}
html.theme-20nabet .top-bar__main {
    min-height: 56px !important;
    padding: 6px 12px !important;
}
html.theme-20nabet .container {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
html.theme-20nabet .logo img,
html.theme-20nabet .top-brand__logo img {
    max-height: 36px !important;
    width: auto !important;
}

/* live pill dourada (topbar-badge original) */
html.theme-20nabet .cx-live-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #000 !important;
    background: #f7d302 !important;
    border: none !important;
}
html.theme-20nabet .cx-live-pill i {
    font-size: 7px !important;
    color: #c62828 !important;
}

/* botões utilidade */
html.theme-20nabet .top-smart-btn,
html.theme-20nabet .player-menu-btn {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid #1a8060 !important;
    color: #f7d302 !important;
    border-radius: 10px !important;
}
html.theme-20nabet .top-smart-btn:hover,
html.theme-20nabet .player-menu-btn:hover {
    border-color: #f7d302 !important;
    color: #ffe54e !important;
    background: rgba(247,211,2,0.1) !important;
}

/* Auth: Login outline gold + Registro solid gold (auth-buttons 20nabet) */
html.theme-20nabet .top-auth {
    display: flex !important;
    gap: 8px !important;
}
html.theme-20nabet .top-auth .button,
html.theme-20nabet .button {
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    box-shadow: none !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
}
html.theme-20nabet .top-auth .button--ghost,
html.theme-20nabet .button.button--ghost,
html.theme-20nabet .button.btn-login,
html.theme-20nabet .cx-btn-ghost {
    background: transparent !important;
    border: 1.5px solid #f7d302 !important;
    color: #f7d302 !important;
}
html.theme-20nabet .top-auth .button--ghost:hover,
html.theme-20nabet .cx-btn-ghost:hover {
    background: rgba(247,211,2,0.12) !important;
}
html.theme-20nabet .top-auth .button--primary,
html.theme-20nabet .button.button--primary,
html.theme-20nabet .button.btn-registro,
html.theme-20nabet .cx-btn-primary {
    background: #f7d302 !important;
    border: 1.5px solid #f7d302 !important;
    color: #000 !important;
    font-weight: 800 !important;
}
html.theme-20nabet .top-auth .button--primary:hover,
html.theme-20nabet .cx-btn-primary:hover {
    background: #ffe54e !important;
    border-color: #ffe54e !important;
}

html.theme-20nabet .top-meta,
html.theme-20nabet .top-lang,
html.theme-20nabet .top-clock {
    color: #a0c4b8 !important;
    font-size: 11px !important;
}

/* nav secundária no estilo game-tabs */
html.theme-20nabet .top-nav,
html.theme-20nabet .top-nav--home {
    display: flex !important;
    gap: 4px !important;
    overflow-x: auto !important;
    padding: 0 10px 8px !important;
    border-top: 1px solid rgba(26,128,96,0.5) !important;
    background: transparent !important;
}
html.theme-20nabet .top-nav-btn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    border: none !important;
    background: none !important;
    color: #7fb89e !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px 8px 0 0 !important;
    border-bottom: 3px solid transparent !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}
html.theme-20nabet .top-nav-btn i { color: inherit !important; }
html.theme-20nabet .top-nav-btn.is-active,
html.theme-20nabet .top-nav-btn:hover {
    color: #f7d302 !important;
    border-bottom-color: #f7d302 !important;
    background: rgba(247,211,2,0.06) !important;
}

/* Wallet / saldo (dashboard) */
html.theme-20nabet .header-wallet-btn {
    background: #f7d302 !important;
    color: #000 !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 10px rgba(247,211,2,0.35) !important;
}
html.theme-20nabet .header-wallet-btn i {
    color: #000 !important;
    background: rgba(0,0,0,0.14) !important;
}
html.theme-20nabet .header-wallet-btn span { color: #000 !important; }
html.theme-20nabet .header-balance {
    background: #0d5038 !important;
    border: 1px solid #1a8060 !important;
    border-radius: 12px !important;
    color: #fff !important;
}
html.theme-20nabet .header-balance span { color: #7fb89e !important; }
html.theme-20nabet .header-balance strong {
    color: #f7d302 !important;
    font-weight: 800 !important;
}
html.theme-20nabet .header-bonus-btn {
    background: #0d5038 !important;
    border: 1px solid #1a8060 !important;
    color: #f7d302 !important;
    border-radius: 12px !important;
}
html.theme-20nabet .header-profile summary {
    background: #0d5038 !important;
    border: 1px solid #1a8060 !important;
    color: #fff !important;
    border-radius: 999px !important;
}
html.theme-20nabet .header-balance-menu,
html.theme-20nabet .header-profile-menu {
    background: #0e5e43 !important;
    border: 1px solid #1a8060 !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important;
    border-radius: 14px !important;
}
html.theme-20nabet .header-balance-menu a,
html.theme-20nabet .header-balance-menu button,
html.theme-20nabet .header-profile-menu a,
html.theme-20nabet .header-profile-menu button {
    color: #a0c4b8 !important;
}
html.theme-20nabet .header-balance-menu a:hover,
html.theme-20nabet .header-balance-menu button:hover,
html.theme-20nabet .header-profile-menu a:hover,
html.theme-20nabet .header-profile-menu button:hover {
    background: rgba(247,211,2,0.1) !important;
    color: #f7d302 !important;
}
html.theme-20nabet .header-balance-menu a i,
html.theme-20nabet .header-balance-menu button i,
html.theme-20nabet .header-profile-menu a i,
html.theme-20nabet .header-profile-menu button i {
    color: #f7d302 !important;
}

/* =========================================================
   HOME LAYOUT (cx-*) — cores 20nabet
   ========================================================= */
html.theme-20nabet .cx-home {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 12px 24px !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

/* Hero principal */
html.theme-20nabet .cx-hero,
html.theme-20nabet .cx-hero--main {
    margin: 12px 0 !important;
    padding: 0 !important;
}
html.theme-20nabet .cx-hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}
html.theme-20nabet .cx-hero-card,
html.theme-20nabet .cx-hero-card--left {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    border: 1px solid #1a8060 !important;
    padding: 18px 14px !important;
    background: linear-gradient(145deg, #0d5038, #0b4534) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
}
html.theme-20nabet .cx-hero-card::before {
    content: "" !important;
    position: absolute !important;
    top: -40%;
    right: -20%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(247,211,2,0.18), transparent 70%) !important;
    pointer-events: none !important;
    display: block !important;
}
html.theme-20nabet .cx-hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #000 !important;
    background: #f7d302 !important;
    border: none !important;
    margin-bottom: 12px !important;
}
html.theme-20nabet .cx-hero-card h1 {
    margin: 0 0 8px !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
}
html.theme-20nabet .cx-hero-card h1 em {
    font-style: normal !important;
    color: #f7d302 !important;
}
html.theme-20nabet .cx-hero-card p {
    margin: 0 0 14px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #a0c4b8 !important;
}
html.theme-20nabet .cx-hero-cta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}
html.theme-20nabet .cx-hero-cta .button,
html.theme-20nabet .cx-hero-cta button {
    min-height: 42px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}
html.theme-20nabet .cx-hero-perks {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
html.theme-20nabet .cx-hero-perks span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #a0c4b8 !important;
    background: #0d5038 !important;
    border: 1px solid #1a8060 !important;
}
html.theme-20nabet .cx-hero-perks i { color: #f7d302 !important; }

html.theme-20nabet .cx-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 14px !important;
}
html.theme-20nabet .cx-stat {
    padding: 10px 6px !important;
    border-radius: 8px !important;
    border: 1px solid #1a8060 !important;
    background: #0d5038 !important;
    text-align: center !important;
}
html.theme-20nabet .cx-stat strong {
    display: block !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #f7d302 !important;
}
html.theme-20nabet .cx-stat span {
    display: block !important;
    margin-top: 2px !important;
    font-size: 10px !important;
    color: #7fb89e !important;
}

html.theme-20nabet .cx-hero-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
/* bonus-strip original (pulse gold) */
html.theme-20nabet .cx-bonus-card {
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    text-align: left !important;
    color: #000 !important;
    background: linear-gradient(135deg, #b8860b, #f7d302, #b8860b) !important;
    box-shadow: 0 0 0 0 rgba(247,211,2,0.4) !important;
    animation: nabet-pulse-gold 2s ease-in-out infinite !important;
}
html.theme-20nabet .cx-bonus-card-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #000 !important;
    margin-bottom: 4px !important;
    opacity: 0.85 !important;
}
html.theme-20nabet .cx-bonus-card-value {
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #000 !important;
}
html.theme-20nabet .cx-bonus-card-sub {
    margin-top: 4px !important;
    font-size: 12px !important;
    color: rgba(0,0,0,0.75) !important;
}
html.theme-20nabet .cx-bonus-card-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 10px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    background: #0b4534 !important;
    color: #f7d302 !important;
}

html.theme-20nabet .cx-hero-featured {
    border-radius: 12px !important;
    border: 1px solid #1a8060 !important;
    background: #0d5038 !important;
    padding: 12px !important;
}
html.theme-20nabet .cx-hero-featured-head strong {
    font-size: 13px !important;
    color: #fff !important;
}
html.theme-20nabet .cx-hero-featured-head strong i { color: #f7d302 !important; }
html.theme-20nabet .cx-link-btn {
    border: none !important;
    background: transparent !important;
    color: #f7d302 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}
html.theme-20nabet .cx-hero-featured-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}
html.theme-20nabet .cx-mini-game {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    border: 1px solid #1a8060 !important;
    background: #0b4534 !important;
    color: #fff !important;
    cursor: pointer !important;
    text-align: left !important;
}
html.theme-20nabet .cx-mini-game:hover {
    border-color: #f7d302 !important;
}
html.theme-20nabet .cx-mini-game img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
}
html.theme-20nabet .cx-mini-game span {
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* Promo / trust / action icons */
html.theme-20nabet .cx-promo-row,
html.theme-20nabet .cx-trust {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    max-width: none !important;
}
html.theme-20nabet .cx-promo-card,
html.theme-20nabet .cx-trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: 12px !important;
    border: 1px solid #1a8060 !important;
    background: #0d5038 !important;
    color: #fff !important;
    cursor: pointer !important;
    text-align: left !important;
    box-shadow: none !important;
}
html.theme-20nabet .cx-promo-card:hover,
html.theme-20nabet .cx-trust-item:hover {
    border-color: #f7d302 !important;
    background: #136046 !important;
}
html.theme-20nabet .cx-promo-ico,
html.theme-20nabet .cx-trust-item i {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0b4534 !important;
    color: #f7d302 !important;
    border: 1px solid #1a8060 !important;
    flex-shrink: 0 !important;
    font-size: 15px !important;
}
html.theme-20nabet .cx-promo-card strong,
html.theme-20nabet .cx-trust-item strong {
    display: block !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #fff !important;
}
html.theme-20nabet .cx-promo-card span,
html.theme-20nabet .cx-trust-item span {
    display: block !important;
    margin-top: 2px !important;
    font-size: 11px !important;
    color: #7fb89e !important;
}
html.theme-20nabet .cx-promo-arrow {
    margin-left: auto !important;
    color: #7fb89e !important;
}

/* Welcome VIP / QA */
html.theme-20nabet .cx-welcome {
    padding: 12px 0 6px !important;
    background: transparent !important;
}
html.theme-20nabet .cx-welcome-card {
    background: linear-gradient(145deg, #0d5038, #0b4534) !important;
    border: 1px solid #1a8060 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
}
html.theme-20nabet .cx-welcome-copy strong { color: #fff !important; }
html.theme-20nabet .cx-welcome-copy span { color: #a0c4b8 !important; }
html.theme-20nabet .cx-vip-dot {
    background: #f7d302 !important;
    color: #000 !important;
    border-color: #f7d302 !important;
}
html.theme-20nabet .cx-qa {
    background: #0d5038 !important;
    border: 1px solid #1a8060 !important;
    color: #a0c4b8 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}
html.theme-20nabet .cx-qa i { color: #f7d302 !important; }
html.theme-20nabet .cx-qa:hover {
    border-color: #f7d302 !important;
    color: #f7d302 !important;
    background: rgba(247,211,2,0.08) !important;
}
html.theme-20nabet .cx-qa--primary {
    background: #f7d302 !important;
    color: #000 !important;
    border-color: #f7d302 !important;
}
html.theme-20nabet .cx-qa--primary i { color: #000 !important; }
html.theme-20nabet .cx-qa--gold {
    background: linear-gradient(135deg, #b8860b, #f7d302, #b8860b) !important;
    color: #000 !important;
    border: none !important;
    animation: nabet-pulse-gold 2s ease-in-out infinite;
}
html.theme-20nabet .cx-qa--gold i { color: #000 !important; }

@keyframes nabet-pulse-gold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(247,211,2,0.4); }
    50% { box-shadow: 0 0 0 8px rgba(247,211,2,0); }
}

/* =========================================================
   SLIDER / TICKER / BUSCA
   ========================================================= */
html.theme-20nabet .slider-wrapper,
html.theme-20nabet .cx-slider-home {
    margin: 0 0 12px !important;
    padding: 0 !important;
    border-radius: 0 0 12px 12px !important;
    overflow: hidden !important;
    background: transparent !important;
    max-width: none !important;
}
html.theme-20nabet .slider-container {
    border-radius: 0 0 12px 12px !important;
    border: none !important;
    background: #0b4534 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
html.theme-20nabet .slides,
html.theme-20nabet .slide {
    background: #0b4534 !important;
}
html.theme-20nabet .slide img { border-radius: 0 !important; }
html.theme-20nabet .dots { padding: 8px 0 !important; margin-top: 8px !important; }
html.theme-20nabet .dot {
    width: 6px !important;
    height: 6px !important;
    margin: 0 3px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.3) !important;
}
html.theme-20nabet .dot.active {
    width: 18px !important;
    border-radius: 3px !important;
    background: #f7d302 !important;
    box-shadow: none !important;
}

/* ticker-bar style */
html.theme-20nabet .new-last-wins-container {
    margin: 0 0 12px !important;
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 64px !important;
    border-radius: 20px !important;
    border: none !important;
    background: rgba(0,0,0,0.25) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
html.theme-20nabet .new-last-wins-wrapper {
    background: transparent !important;
    border-right: 1px solid #1a8060 !important;
}
html.theme-20nabet .new-last-wins-wrapper-text {
    color: #f7d302 !important;
    font-weight: 700 !important;
}
html.theme-20nabet .new-last-wins-item-container {
    background: #0d5038 !important;
    border: 1px solid #1a8060 !important;
    border-radius: 10px !important;
}
html.theme-20nabet .winAmount { color: #f7d302 !important; }

html.theme-20nabet .busca-container {
    max-width: none !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}
html.theme-20nabet .busca-shell,
html.theme-20nabet .busca-container > form {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-radius: 20px !important;
    background: #146d4e !important;
    border: 1px solid #1a8060 !important;
    box-shadow: none !important;
}
html.theme-20nabet .busca-shell:focus-within,
html.theme-20nabet .busca-container > form:focus-within {
    border-color: #f7d302 !important;
}
html.theme-20nabet #input-busca {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    color: #fff !important;
    width: 100% !important;
    font-family: 'Outfit', sans-serif !important;
}
html.theme-20nabet #input-busca::placeholder { color: #7fb89e !important; }

/* =========================================================
   CATEGORIAS (game-tabs)
   ========================================================= */
html.theme-20nabet .cx-cats-wrap,
html.theme-20nabet .cx-cats-sticky {
    position: relative !important;
    top: auto !important;
    z-index: 2 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
html.theme-20nabet .cx-cats {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding: 2px 0 8px !important;
    border-bottom: 1px solid #1a8060 !important;
}
html.theme-20nabet .cx-cat {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    border-radius: 8px 8px 0 0 !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    background: none !important;
    color: #7fb89e !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}
html.theme-20nabet .cx-cat.active {
    color: #f7d302 !important;
    border-bottom-color: #f7d302 !important;
    background: rgba(247,211,2,0.06) !important;
    box-shadow: none !important;
}
html.theme-20nabet .cx-cat:hover { color: #fff !important; }

/* =========================================================
   JOGOS + PROVEDORES (home + dashboard — shell 480px)
   Viewport largo + body 480px NÃO pode usar grid de 6 colunas
   ========================================================= */
html.theme-20nabet .cx-home,
html.theme-20nabet #area-jogos,
html.theme-20nabet .busca-container {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
html.theme-20nabet .cx-home {
    padding: 0 12px 24px !important;
}
html.theme-20nabet .lista-jogos,
html.theme-20nabet .provider-section,
html.theme-20nabet .provider-section.lista-jogos,
html.theme-20nabet .aovivo-resultados,
html.theme-20nabet .cx-featured-rail,
html.theme-20nabet #jogosCarregaveis,
html.theme-20nabet #jogos-semana {
    background: transparent !important;
    background-color: transparent !important;
    padding: 4px 10px 16px !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
html.theme-20nabet .section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 4px 0 8px !important;
    padding: 0 2px !important;
}
html.theme-20nabet .titulo-lista-jogos,
html.theme-20nabet .aovivo-titulo,
html.theme-20nabet .lista-jogos .titulo-secao,
html.theme-20nabet h2.titulo-secao {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
    position: relative !important;
    padding-left: 10px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
html.theme-20nabet .titulo-lista-jogos::before,
html.theme-20nabet .aovivo-titulo::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 18% !important;
    bottom: 18% !important;
    width: 3px !important;
    border-radius: 99px !important;
    background: #f7d302 !important;
}
html.theme-20nabet .section-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #000 !important;
    background: #f7d302 !important;
    border: none !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Grid 3 colunas SEMPRE no shell (igual dashboard mobile / 20nabet original) */
html.theme-20nabet .lista-jogos .jogos-container,
html.theme-20nabet .provider-games .jogos-container,
html.theme-20nabet #jogosCarregaveis.jogos-container,
html.theme-20nabet #jogosCarregaveis,
html.theme-20nabet #containerPragmatic,
html.theme-20nabet #containerPG,
html.theme-20nabet #containerSpribe,
html.theme-20nabet #containerPopok,
html.theme-20nabet #containerWG,
html.theme-20nabet #containerG759,
html.theme-20nabet #containerPescaria,
html.theme-20nabet #containerTodos,
html.theme-20nabet .provider-games .jogos-container {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 4px 0 8px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    flex-wrap: unset !important;
    box-sizing: border-box !important;
}
html.theme-20nabet .lista-jogos .jogo-card,
html.theme-20nabet .provider-games .jogo-card,
html.theme-20nabet #jogosCarregaveis .jogo-card,
html.theme-20nabet #containerPragmatic .jogo-card,
html.theme-20nabet #containerPG .jogo-card,
html.theme-20nabet .jogo-card:not(.cx-rail-card),
html.theme-20nabet .lista-jogos .jogos-container .jogo-card,
html.theme-20nabet .provider-games .jogos-container .jogo-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 182 / 230 !important;
    flex: unset !important;
    flex-shrink: unset !important;
    background: #0d5038 !important;
    border: 1px solid #1a8060 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    position: relative !important;
    transform: none !important;
}
html.theme-20nabet .lista-jogos .jogo-card:hover,
html.theme-20nabet .provider-games .jogo-card:hover,
html.theme-20nabet .jogo-card:hover {
    transform: translateY(-3px) !important;
    border-color: #f7d302 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important;
    z-index: 2;
}
html.theme-20nabet .lista-jogos .jogo-img,
html.theme-20nabet .provider-games .jogo-img,
html.theme-20nabet .jogo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
}
/* Nome do jogo no topo — visual 20nabet */
html.theme-20nabet .jogo-name-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 6 !important;
    padding: 8px 7px 18px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
    font-family: 'Outfit', sans-serif !important;
    background: linear-gradient(180deg, rgba(11,69,52,0.95) 0%, rgba(11,69,52,0.55) 55%, transparent 100%) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55) !important;
    border-bottom: none !important;
}
html.theme-20nabet .jogo-card:hover .jogo-name-top {
    color: #f7d302 !important;
    background: linear-gradient(180deg, rgba(11,69,52,0.98) 0%, rgba(11,69,52,0.62) 60%, transparent 100%) !important;
}
html.theme-20nabet .jogo-provider-title {
    display: none !important;
}
html.theme-20nabet .lista-jogos .jogo-overlay,
html.theme-20nabet .provider-games .jogo-overlay,
html.theme-20nabet .jogo-overlay {
    background: linear-gradient(180deg, transparent 40%, rgba(11,69,52,0.75) 100%) !important;
    backdrop-filter: none !important;
}
html.theme-20nabet .lista-jogos .jogar-btn,
html.theme-20nabet .provider-games .jogar-btn,
html.theme-20nabet .jogar-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 28px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    border: none !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #000 !important;
    background: #f7d302 !important;
    font-family: 'Outfit', sans-serif !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    line-height: 1 !important;
}
html.theme-20nabet .lista-jogos .jogar-btn i,
html.theme-20nabet .jogar-btn i {
    color: #000 !important;
    font-size: 9px !important;
}
/* Touch: botão jogar sempre visível e discreto */
@media (hover: none) and (pointer: coarse) {
    html.theme-20nabet .lista-jogos .jogo-overlay,
    html.theme-20nabet .provider-games .jogo-overlay,
    html.theme-20nabet .jogo-overlay {
        opacity: 1 !important;
        background: linear-gradient(180deg, transparent 50%, rgba(11,69,52,0.72) 100%) !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 6px 8px !important;
    }
    html.theme-20nabet .lista-jogos .jogar-btn,
    html.theme-20nabet .jogar-btn {
        min-height: 26px !important;
        height: 26px !important;
        padding: 0 10px !important;
        font-size: 9px !important;
        background: #f7d302 !important;
        color: #000 !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
    }
    html.theme-20nabet .lista-jogos .jogar-btn i,
    html.theme-20nabet .jogar-btn i {
        color: #000 !important;
    }
}
html.theme-20nabet .btn-ver-mais {
    background: #f7d302 !important;
    color: #000 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    display: block !important;
    margin: 12px auto 0 !important;
    padding: 10px 18px !important;
}
html.theme-20nabet .btn-ver-mais:hover { background: #ffe54e !important; }

/* Rail destaques (horizontal) */
html.theme-20nabet .cx-featured-rail .cx-rail,
html.theme-20nabet .cx-rail {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 2px 0 10px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
}
html.theme-20nabet .cx-rail::-webkit-scrollbar { display: none !important; }
html.theme-20nabet .cx-rail-card,
html.theme-20nabet .jogo-card.cx-rail-card {
    flex: 0 0 128px !important;
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    aspect-ratio: 182 / 230 !important;
    height: auto !important;
    position: relative !important;
    background: #0d5038 !important;
    border: 1px solid #1a8060 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
html.theme-20nabet .cx-rail-name {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    z-index: 2 !important;
    padding: 14px 8px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: #fff !important;
    background: linear-gradient(transparent, rgba(11,69,52,0.95)) !important;
    pointer-events: none !important;
}

/* ---------- Provedores (carrossel chips) — verde/ouro, sem violeta ---------- */
html.theme-20nabet .provider-section {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
html.theme-20nabet .provider-carousel-wrapper {
    position: relative !important;
    width: 100% !important;
    margin: 6px auto 12px !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}
html.theme-20nabet .provider-carousel {
    display: flex !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 6px 2px 10px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
}
html.theme-20nabet .provider-carousel::-webkit-scrollbar {
    display: none !important;
}
html.theme-20nabet .provider-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 96px !important;
    height: 42px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    background: #0d5038 !important;
    border: 1.5px solid #1a8060 !important;
    box-shadow: none !important;
    color: #a0c4b8 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: border-color .2s, background .2s, color .2s !important;
}
html.theme-20nabet .provider-item::before {
    display: none !important; /* remove brilho violeta */
}
html.theme-20nabet .provider-item:hover {
    transform: translateY(-2px) !important;
    border-color: #f7d302 !important;
    background: rgba(247,211,2,0.1) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25) !important;
}
html.theme-20nabet .provider-item.active,
html.theme-20nabet .provider-item.special-item.active {
    background: rgba(247,211,2,0.14) !important;
    border-color: #f7d302 !important;
    box-shadow: 0 0 0 1px rgba(247,211,2,0.25) !important;
}
html.theme-20nabet .provider-item.special-item {
    background: #0b4534 !important;
    border-color: #1a8060 !important;
}
html.theme-20nabet .provider-item.special-item:hover {
    border-color: #f7d302 !important;
    background: rgba(247,211,2,0.1) !important;
}
html.theme-20nabet .provider-logo-img {
    max-height: 22px !important;
    max-width: 78px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 0.95 !important;
}
html.theme-20nabet .provider-item:hover .provider-logo-img,
html.theme-20nabet .provider-item.active .provider-logo-img {
    opacity: 1 !important;
}
html.theme-20nabet .provider-fallback-text {
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
}
html.theme-20nabet .provider-special-content {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: none !important;
}
html.theme-20nabet .provider-special-content i,
html.theme-20nabet .provider-special-title {
    background: none !important;
    -webkit-text-fill-color: unset !important;
    color: #a0c4b8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
html.theme-20nabet .provider-item.active .provider-special-title,
html.theme-20nabet .provider-item.active .provider-special-content i,
html.theme-20nabet .provider-item:hover .provider-special-title,
html.theme-20nabet .provider-item:hover .provider-special-content i {
    color: #f7d302 !important;
}
html.theme-20nabet .carousel-nav-btn {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid #1a8060 !important;
    background: #0d5038 !important;
    color: #f7d302 !important;
    display: none !important; /* mobile-first shell: scroll com o dedo */
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 2 !important;
}
@media (min-width: 481px) {
    html.theme-20nabet .carousel-nav-btn {
        display: inline-flex !important;
    }
}
html.theme-20nabet .carousel-nav-btn:hover {
    background: #f7d302 !important;
    color: #000 !important;
    border-color: #f7d302 !important;
}
html.theme-20nabet .provider-games {
    padding: 0 !important;
    margin: 0 0 8px !important;
    background: transparent !important;
}

/* Categorias em pílula (mais legível na home) */
html.theme-20nabet .cx-cats-wrap,
html.theme-20nabet .cx-cats-sticky {
    padding: 0 10px !important;
    margin: 0 0 8px !important;
}
html.theme-20nabet .cx-cats {
    border-bottom: none !important;
    gap: 8px !important;
    padding-bottom: 10px !important;
}
html.theme-20nabet .cx-cat {
    border-radius: 999px !important;
    border: 1px solid #1a8060 !important;
    border-bottom: 1px solid #1a8060 !important;
    background: #0d5038 !important;
    color: #a0c4b8 !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
html.theme-20nabet .cx-cat.active {
    color: #000 !important;
    background: #f7d302 !important;
    border-color: #f7d302 !important;
    border-bottom-color: #f7d302 !important;
}
html.theme-20nabet .cx-cat:hover {
    color: #f7d302 !important;
    border-color: #f7d302 !important;
}
html.theme-20nabet .cx-cat.active:hover {
    color: #000 !important;
}

/* =========================================================
   BOTTOM NAV (igual .bottom-nav 20nabet)
   ========================================================= */
html.theme-20nabet .bottom-nav,
html.theme-20nabet .mode-switch {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 480px !important;
    height: 64px !important;
    background: #0e5e43 !important;
    border-top: 1px solid #1a8060 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.35) !important;
    z-index: 1100 !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
}
html.theme-20nabet .mode-switch__track {
    display: flex !important;
    width: 100% !important;
    justify-content: space-around !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
html.theme-20nabet .bottom-nav a,
html.theme-20nabet .bottom-nav button,
html.theme-20nabet .bnav-btn,
html.theme-20nabet .mode-switch__btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    color: #7fb89e !important;
    font-size: 10px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
}
html.theme-20nabet .bottom-nav a i,
html.theme-20nabet .bnav-btn i,
html.theme-20nabet .mode-switch__btn i {
    font-size: 20px !important;
    color: inherit !important;
}
html.theme-20nabet .bottom-nav a.active,
html.theme-20nabet .bottom-nav a.ativo,
html.theme-20nabet .bnav-btn.active,
html.theme-20nabet .bnav-btn.ativo,
html.theme-20nabet .mode-switch__btn.active,
html.theme-20nabet .mode-switch__btn.ativo,
html.theme-20nabet .mode-switch__btn[aria-pressed="true"] {
    color: #f7d302 !important;
}
html.theme-20nabet .bottom-nav a:hover,
html.theme-20nabet .bnav-btn:hover {
    color: #fff !important;
}

/* =========================================================
   SIDEBAR / DRAWER (cores genéricas — sem mudar left/width)
   ========================================================= */
html.theme-20nabet .sidebartermo {
    background: #0e5e43 !important;
    border-color: #1a8060 !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
    box-shadow: 4px 0 30px rgba(0,0,0,0.5) !important;
}
html.theme-20nabet #mySidebar.sidebar a,
html.theme-20nabet #mySidebar a {
    color: #a0c4b8 !important;
}
html.theme-20nabet #mySidebar.sidebar a:hover,
html.theme-20nabet #mySidebar a:hover,
html.theme-20nabet #mySidebar.sidebar a.active {
    color: #f7d302 !important;
    background: rgba(247,211,2,0.08) !important;
}
html.theme-20nabet #mySidebar.sidebar a i,
html.theme-20nabet #mySidebar a i {
    color: #7fb89e !important;
}
html.theme-20nabet #mySidebar.sidebar a:hover i,
html.theme-20nabet #mySidebar a:hover i {
    color: #f7d302 !important;
}
html.theme-20nabet .overlay,
html.theme-20nabet #overlay {
    background: rgba(0,0,0,0.7) !important;
}

/* =========================================================
   MODAIS / AUTH (modal 20nabet)
   ========================================================= */
html.theme-20nabet .modal .modal-content,
html.theme-20nabet .modal-content,
html.theme-20nabet #modalDeposito .modal-content,
html.theme-20nabet #modalRetirada .modal-content,
html.theme-20nabet .modal.auth-modal,
html.theme-20nabet .modal--auth,
html.theme-20nabet .auth-card,
html.theme-20nabet .login-box,
html.theme-20nabet .form-box,
html.theme-20nabet .auth-panel {
    background: #0e5e43 !important;
    border: 1px solid #1a8060 !important;
    border-radius: 12px 12px 0 0 !important;
    color: #fff !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.55) !important;
    font-family: 'Outfit', sans-serif !important;
}
html.theme-20nabet .modal h2,
html.theme-20nabet .modal-content h2,
html.theme-20nabet .auth-header {
    color: #fff !important;
    font-weight: 700 !important;
    background: #0b4534 !important;
}
html.theme-20nabet .close-modal,
html.theme-20nabet .modal .close-modal {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-radius: 50% !important;
    border: none !important;
}
html.theme-20nabet .submit-button,
html.theme-20nabet .deposit-submit,
html.theme-20nabet input[type="submit"].submit-button,
html.theme-20nabet .btn-primary {
    background: #f7d302 !important;
    color: #000 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
}
html.theme-20nabet .submit-button:hover,
html.theme-20nabet .btn-primary:hover {
    background: #ffe54e !important;
}
html.theme-20nabet input,
html.theme-20nabet select,
html.theme-20nabet textarea,
html.theme-20nabet .input-icon,
html.theme-20nabet .input-icon input,
html.theme-20nabet .auth-input-shell,
html.theme-20nabet .auth-input-shell input {
    background: rgba(0,0,0,0.25) !important;
    border: 1px solid #1a8060 !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-family: 'Outfit', sans-serif !important;
}
html.theme-20nabet input::placeholder,
html.theme-20nabet textarea::placeholder {
    color: #7fb89e !important;
}
html.theme-20nabet .input-icon i { color: #7fb89e !important; }

html.theme-20nabet .auth-tabs {
    display: flex !important;
    gap: 4px !important;
    background: #0e5e43 !important;
    border-bottom: 1px solid #1a8060 !important;
}
html.theme-20nabet .auth-tab {
    flex: 1 !important;
    color: #7fb89e !important;
    background: rgba(255,255,255,0.07) !important;
    border-radius: 8px !important;
    border: none !important;
    font-weight: 600 !important;
}
html.theme-20nabet .auth-tab.active {
    background: #f7d302 !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-bottom-color: #f7d302 !important;
}
html.theme-20nabet .btn-outline {
    border: 1.5px solid #f7d302 !important;
    color: #f7d302 !important;
    background: transparent !important;
    border-radius: 8px !important;
}
html.theme-20nabet .auth-banner,
html.theme-20nabet .auth-content {
    background: #0b4534 !important;
}

/* =========================================================
   FOOTER / EXTRAS
   ========================================================= */
html.theme-20nabet .footer,
html.theme-20nabet .footer-line,
html.theme-20nabet .container-footer {
    background: transparent !important;
    color: #7fb89e !important;
    border-color: #1a8060 !important;
}
html.theme-20nabet .footer a { color: #a0c4b8 !important; }
html.theme-20nabet .footer a:hover { color: #f7d302 !important; }
html.theme-20nabet .footer-column h4 { color: #f7d302 !important; }
html.theme-20nabet .footer-line {
    border-top: 1px solid #1a8060 !important;
}

html.theme-20nabet .cx-skel,
html.theme-20nabet .cx-skeleton-grid .cx-skel {
    background: #0d5038 !important;
    border-color: #1a8060 !important;
}
html.theme-20nabet .download-app-banner {
    background: #0b4534 !important;
    color: #fff !important;
}
html.theme-20nabet .download-btn {
    background: #f7d302 !important;
    color: #000 !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
}

/* links ouro */
html.theme-20nabet .gold,
html.theme-20nabet .highlight,
html.theme-20nabet .text-gold {
    color: #f7d302 !important;
}

/* =========================================================
   GAME OPEN
   Desktop: mantém shell 480px (não estica a plataforma).
   Mobile (<=480px): max-width 100% do viewport já é o normal.
   ========================================================= */
html.theme-20nabet body.game-open {
    background: #062a1f !important;
    padding-bottom: 0 !important;
    /* NÃO usar max-width:100% — no PC a plataforma ficava grandona atrás do jogo */
    max-width: 480px !important;
    box-shadow: 0 0 60px rgba(0,0,0,0.6) !important;
}
html.theme-20nabet body.game-open::before {
    background: #062a1f;
    width: min(100vw, 480px);
    left: 50%;
    transform: translateX(-50%);
}
html.theme-20nabet body.game-open .top-bar.top-bar--player {
    position: fixed !important;
    left: 50% !important;
    width: min(100%, 480px) !important;
    max-width: 480px !important;
    transform: translateX(-50%) !important;
    background: #0e5e43 !important;
}
html.theme-20nabet body.game-open .modal-slots {
    max-width: 480px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
}

/* Botões desktop do jogo — flutuantes na lateral do shell (tema 20nabet) */
html.theme-20nabet .game-desk-btn {
    border-radius: 12px !important;
    font-family: 'Outfit', 'Segoe UI', sans-serif !important;
    font-weight: 700 !important;
}
html.theme-20nabet .game-desk-btn--fs {
    background: rgba(6, 42, 31, 0.92) !important;
    border-color: rgba(247, 211, 2, 0.55) !important;
    color: #f7d302 !important;
}
html.theme-20nabet .game-desk-btn--fs:hover,
html.theme-20nabet .game-desk-btn--fs.is-active {
    background: #f7d302 !important;
    border-color: #f7d302 !important;
    color: #000 !important;
}
html.theme-20nabet .game-desk-btn--close {
    background: rgba(6, 42, 31, 0.92) !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: #fff !important;
}
html.theme-20nabet .game-desk-btn--close:hover {
    background: #c0392b !important;
    border-color: #e74c3c !important;
    color: #fff !important;
}
@media (max-width: 480px) {
    html.theme-20nabet .game-desktop-controls,
    html.theme-20nabet body.game-open .game-desktop-controls {
        display: none !important;
    }
}

/* Desktop: tela cheia expande o shell 480px para a janela inteira */
@media (min-width: 481px) {
    html.theme-20nabet body.game-open.game-fs {
        max-width: 100% !important;
        box-shadow: none !important;
    }
    html.theme-20nabet body.game-open.game-fs::before {
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
        background: #062a1f;
    }
    html.theme-20nabet body.game-open.game-fs .top-bar.top-bar--player {
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
    }
    html.theme-20nabet body.game-open.game-fs .modal-slots {
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        top: var(--player-topbar-height, 56px) !important;
        height: calc(100dvh - var(--player-topbar-height, 56px)) !important;
    }
}

/* Mobile: shell full-bleed (igual ao resto do app) — sem barra desktop */
@media (max-width: 480px) {
    html.theme-20nabet body.game-open {
        max-width: 100% !important;
        box-shadow: none !important;
    }
    html.theme-20nabet body.game-open::before {
        width: 100%;
        left: 0;
        transform: none;
    }
    html.theme-20nabet body.game-open .top-bar.top-bar--player,
    html.theme-20nabet body.game-open .modal-slots {
        left: 0 !important;
        transform: none !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    html.theme-20nabet .game-desktop-controls {
        display: none !important;
    }
}

/* =========================================================
   OVERRIDE SUPERFÍCIES PRETAS DO estilos.php (base)
   ========================================================= */
html.theme-20nabet .app-wrapper,
html.theme-20nabet main,
html.theme-20nabet #area-jogos,
html.theme-20nabet .content,
html.theme-20nabet .main-content {
    background: transparent !important;
    background-color: transparent !important;
}

/* qualquer caixa cinza/preta residual → verde card */
html.theme-20nabet [class*="card"]:not(.jogo-card):not(.cx-bonus-card):not(.cx-hero-card):not(.cx-promo-card):not(.cx-mini-game),
html.theme-20nabet .box,
html.theme-20nabet .panel {
    /* só quando herdam preto genérico — não forçar em todos */
}

/* botões genéricos com cor do admin → ouro chinês */
html.theme-20nabet button.button:not(.button--ghost):not(.top-nav-btn):not(.bnav-btn):not(.mode-switch__btn):not(.top-smart-btn):not(.close-modal):not(.cx-link-btn):not(.cx-cat):not(.cx-mini-game):not(.cx-promo-card),
html.theme-20nabet .button.btn-registro {
    /* primary gold handled above */
}

/* =========================================================
   MOBILE / DESKTOP
   ========================================================= */
@media (max-width: 480px) {
    html.theme-20nabet body {
        max-width: 100% !important;
        box-shadow: none !important;
    }
    html.theme-20nabet body::before {
        width: 100%;
        left: 0;
        transform: none;
    }
    html.theme-20nabet .bottom-nav,
    html.theme-20nabet .mode-switch {
        max-width: 100% !important;
        left: 0 !important;
        transform: none !important;
    }
}

@media (min-width: 481px) {
    html.theme-20nabet .cx-promo-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* esconde elementos desktop largos no shell estreito */
html.theme-20nabet .top-meta {
    display: none !important;
}
@media (min-width: 400px) {
    html.theme-20nabet .cx-live-pill {
        display: inline-flex !important;
    }
}

/* =========================================================
   DASHBOARD — HEADER JOGADOR (avatar, saldo, depositar)
   ========================================================= */
html.theme-20nabet .top-bar.top-bar--player {
    padding: 6px 0 !important;
}
html.theme-20nabet .player-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 56px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
}
html.theme-20nabet .player-header__brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
}
html.theme-20nabet .player-logo img {
    height: 32px !important;
    width: auto !important;
    max-width: 110px !important;
    object-fit: contain !important;
}
html.theme-20nabet .player-menu-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    border: 1px solid #1a8060 !important;
    background: rgba(255,255,255,0.08) !important;
    color: #f7d302 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
html.theme-20nabet .player-menu-btn:hover {
    border-color: #f7d302 !important;
    background: rgba(247,211,2,0.12) !important;
}
html.theme-20nabet .player-header__actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
}

/* Depositar ouro pílula */
html.theme-20nabet .header-wallet-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    border-radius: 999px !important;
    background: #f7d302 !important;
    color: #000 !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 14px 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    font-family: 'Outfit', sans-serif !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 10px rgba(247,211,2,0.3) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
html.theme-20nabet .header-wallet-btn i {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    color: #000 !important;
    background: rgba(0,0,0,0.14) !important;
}
html.theme-20nabet .header-wallet-btn span {
    display: inline-block !important;
    color: #000 !important;
    font-weight: 800 !important;
}

/* Saldo card verde */
html.theme-20nabet .header-balance {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-width: 120px !important;
    min-height: 38px !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    background: #0d5038 !important;
    border: 1px solid #1a8060 !important;
    color: #fff !important;
    line-height: 1.1 !important;
    box-shadow: none !important;
    flex: 0 1 auto !important;
    overflow: hidden !important;
}
html.theme-20nabet .header-balance span {
    color: #7fb89e !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
html.theme-20nabet .header-balance strong {
    color: #f7d302 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Missões / gift */
html.theme-20nabet .header-bonus-btn {
    position: relative !important;
    width: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border: 1px solid #1a8060 !important;
    border-radius: 12px !important;
    background: #0d5038 !important;
    color: #f7d302 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
}
html.theme-20nabet .header-bonus-btn .count-odd-animation {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #e53935 !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    box-shadow: 0 0 0 2px #0e5e43 !important;
}

/* ---------- FOTO DE PERFIL (header) — clicável com menu de opções ---------- */
html.theme-20nabet .top-bar.top-bar--player,
html.theme-20nabet .player-header,
html.theme-20nabet .player-header__actions {
    overflow: visible !important;
}
html.theme-20nabet .header-profile {
    position: relative !important;
    flex-shrink: 0 !important;
    z-index: 1400 !important;
    overflow: visible !important;
}
html.theme-20nabet .header-profile summary {
    list-style: none !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 8px 3px 3px !important;
    min-height: 38px !important;
    border-radius: 999px !important;
    border: 1.5px solid #f7d302 !important;
    background: #0d5038 !important;
    color: #fff !important;
    cursor: pointer !important;
    box-shadow: 0 0 0 0 rgba(247,211,2,0.25) !important;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
html.theme-20nabet .header-profile summary::-webkit-details-marker { display: none !important; }
html.theme-20nabet .header-profile summary:hover,
html.theme-20nabet .header-profile[open] summary {
    border-color: #ffe54e !important;
    background: rgba(247,211,2,0.12) !important;
}
html.theme-20nabet .header-profile.is-vip summary {
    border-color: #f7d302 !important;
    background: linear-gradient(135deg, #0d5038, #0b4534) !important;
    box-shadow: 0 0 12px rgba(247,211,2,0.2) !important;
}
html.theme-20nabet .header-profile.is-vip summary::after {
    content: "VIP" !important;
    position: absolute !important;
    top: -7px !important;
    right: -2px !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    color: #000 !important;
    background: #f7d302 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.2 !important;
    pointer-events: none !important;
}
html.theme-20nabet .header-profile summary img,
html.theme-20nabet .header-profile-photo {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #f7d302 !important;
    background: #0b4534 !important;
    display: block !important;
    flex-shrink: 0 !important;
    pointer-events: none !important; /* clique vai no summary */
}
html.theme-20nabet .header-profile summary span {
    max-width: 72px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
    pointer-events: none !important;
}
html.theme-20nabet .header-profile summary i {
    color: #7fb89e !important;
    font-size: 9px !important;
    pointer-events: none !important;
}

/* Menus dropdown perfil / saldo — menu do perfil em fixed via JS (não corta no shell) */
html.theme-20nabet .header-balance-menu {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 8px) !important;
    min-width: 230px !important;
    padding: 8px !important;
    border-radius: 14px !important;
    background: #0e5e43 !important;
    border: 1px solid #1a8060 !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.55) !important;
    z-index: 1600 !important;
    font-family: 'Outfit', sans-serif !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
html.theme-20nabet .header-profile-menu {
    position: fixed !important;
    min-width: min(280px, calc(100vw - 16px)) !important;
    max-width: min(320px, calc(100vw - 16px)) !important;
    max-height: min(70vh, 480px) !important;
    overflow-y: auto !important;
    padding: 8px !important;
    border-radius: 14px !important;
    background: #0e5e43 !important;
    border: 1px solid #1a8060 !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.55) !important;
    z-index: 20000 !important;
    font-family: 'Outfit', sans-serif !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
html.theme-20nabet .header-balance:hover .header-balance-menu,
html.theme-20nabet .header-balance:focus-within .header-balance-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}
html.theme-20nabet .header-profile[open] .header-profile-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    display: block !important;
}
html.theme-20nabet .header-profile-menu .cx-profile-vip {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 12px !important;
    margin: 0 0 6px !important;
    border-radius: 10px !important;
    border-bottom: 1px solid #1a8060 !important;
    background: rgba(0,0,0,0.2) !important;
}
html.theme-20nabet .header-profile-menu .cx-profile-vip img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 2px solid #f7d302 !important;
    object-fit: cover !important;
    display: block !important;
    background: #0b4534 !important;
    flex-shrink: 0 !important;
}
html.theme-20nabet .header-profile-menu .cx-profile-vip strong {
    display: block !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}
html.theme-20nabet .header-profile-menu .cx-profile-vip span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 3px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #f7d302 !important;
}
html.theme-20nabet .header-balance-menu a,
html.theme-20nabet .header-balance-menu button,
html.theme-20nabet .header-profile-menu a,
html.theme-20nabet .header-profile-menu button {
    width: 100% !important;
    min-height: 38px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #a0c4b8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    text-align: left !important;
    font-family: 'Outfit', sans-serif !important;
}
html.theme-20nabet .header-balance-menu a i,
html.theme-20nabet .header-balance-menu button i,
html.theme-20nabet .header-profile-menu a i,
html.theme-20nabet .header-profile-menu button i {
    width: 20px !important;
    margin-right: 10px !important;
    text-align: center !important;
    flex: 0 0 20px !important;
    color: #f7d302 !important;
}
html.theme-20nabet .header-balance-menu a:hover,
html.theme-20nabet .header-balance-menu button:hover,
html.theme-20nabet .header-profile-menu a:hover,
html.theme-20nabet .header-profile-menu button:hover {
    background: rgba(247,211,2,0.1) !important;
    color: #f7d302 !important;
}
html.theme-20nabet .header-profile-menu .is-logout {
    color: #ff8a80 !important;
}
html.theme-20nabet .profile-bonus-row span {
    margin-left: auto !important;
    color: #000 !important;
    background: #f7d302 !important;
    border-radius: 999px !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

/* Mobile: só ícone depositar */
@media (max-width: 768px) {
    html.theme-20nabet .player-header__actions {
        max-width: 68% !important;
        gap: 5px !important;
        flex-wrap: nowrap !important;
    }
    html.theme-20nabet .header-wallet-btn {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    html.theme-20nabet .header-wallet-btn span { display: none !important; }
    html.theme-20nabet .header-wallet-btn i {
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        font-size: 13px !important;
    }
    html.theme-20nabet .header-balance {
        max-width: 100px !important;
        min-height: 34px !important;
        padding: 3px 8px !important;
    }
    html.theme-20nabet .header-balance strong { font-size: 11px !important; }
    html.theme-20nabet .header-bonus-btn {
        width: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }
    html.theme-20nabet .header-profile summary {
        min-height: 34px !important;
        padding: 2px 6px 2px 2px !important;
    }
    html.theme-20nabet .header-profile summary img {
        width: 28px !important;
        height: 28px !important;
    }
    html.theme-20nabet .header-profile summary span {
        max-width: 54px !important;
        font-size: 11px !important;
    }
}

/* =========================================================
   WELCOME VIP (avatar grande + ações)
   ========================================================= */
html.theme-20nabet .cx-welcome {
    max-width: 100% !important;
    margin: 10px auto 8px !important;
    padding: 0 12px !important;
}
html.theme-20nabet .cx-welcome-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid #1a8060 !important;
    background: linear-gradient(145deg, #0d5038, #0b4534) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
}
html.theme-20nabet .cx-welcome-user {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}
html.theme-20nabet .cx-welcome-avatar {
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    line-height: 0 !important;
}
html.theme-20nabet .cx-welcome-avatar:hover img,
html.theme-20nabet .cx-welcome-avatar:focus-visible img {
    box-shadow: 0 0 0 3px rgba(247,211,2,0.45) !important;
    border-color: #ffe54e !important;
}
html.theme-20nabet .cx-welcome-avatar img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #f7d302 !important;
    display: block !important;
    background: #0b4534 !important;
    box-shadow: 0 0 0 3px rgba(247,211,2,0.15) !important;
    pointer-events: none !important;
}
html.theme-20nabet .cx-welcome-name {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 2px !important;
    border: none !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    font-family: 'Outfit', sans-serif !important;
    cursor: pointer !important;
}
html.theme-20nabet .cx-welcome-name:hover {
    color: #f7d302 !important;
}
html.theme-20nabet .cx-welcome-avatar .cx-vip-dot {
    position: absolute !important;
    right: -3px !important;
    bottom: -3px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 8px !important;
    color: #000 !important;
    background: #f7d302 !important;
    border: 2px solid #0b4534 !important;
}
html.theme-20nabet .cx-welcome-copy strong {
    display: block !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    font-family: 'Outfit', sans-serif !important;
}
html.theme-20nabet .cx-welcome-copy span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 3px !important;
    font-size: 12px !important;
    color: #f7d302 !important;
    font-weight: 700 !important;
}
html.theme-20nabet .cx-welcome-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
html.theme-20nabet .cx-qa {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 8px 11px !important;
    border-radius: 999px !important;
    border: 1px solid #1a8060 !important;
    background: #0d5038 !important;
    color: #a0c4b8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-family: 'Outfit', sans-serif !important;
}
html.theme-20nabet .cx-qa i { color: #f7d302 !important; font-size: 11px !important; }
html.theme-20nabet .cx-qa--primary {
    border: none !important;
    background: #f7d302 !important;
    color: #000 !important;
}
html.theme-20nabet .cx-qa--primary i { color: #000 !important; }
html.theme-20nabet .cx-qa--gold {
    border-color: rgba(247,211,2,0.4) !important;
    color: #f7d302 !important;
    background: rgba(247,211,2,0.1) !important;
}
html.theme-20nabet .cx-qa--gold i { color: #f7d302 !important; }

/* Trust row dashboard */
html.theme-20nabet .cx-trust {
    max-width: 100% !important;
    margin: 0 auto 10px !important;
    padding: 0 12px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}
html.theme-20nabet .cx-trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid #1a8060 !important;
    background: #0d5038 !important;
}
html.theme-20nabet .cx-trust-item i {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0b4534 !important;
    color: #f7d302 !important;
    border: 1px solid #1a8060 !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
}
html.theme-20nabet .cx-trust-item strong {
    display: block !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #fff !important;
}
html.theme-20nabet .cx-trust-item span {
    display: block !important;
    font-size: 10px !important;
    color: #7fb89e !important;
}

/* =========================================================
   HOME — painel de termos (#sidebar) NÃO pode vazar
   (width 320 + left -300 deixava faixa feia na tela inicial)
   ========================================================= */
html.theme-20nabet body.theme-20nabet > #sidebar.sidebar,
html.theme-20nabet #sidebar.sidebar:not(#mySidebar) {
    position: fixed !important;
    top: 0 !important;
    left: -110vw !important; /* totalmente fora quando fechado */
    width: min(82vw, 320px) !important;
    max-width: 320px !important;
    height: 100% !important;
    background: #0e5e43 !important;
    border-right: 1px solid #1a8060 !important;
    box-shadow: 4px 0 30px rgba(0,0,0,0.5) !important;
    z-index: 10001 !important;
    transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    display: block !important;
    padding: 0 !important;
}
html.theme-20nabet body.theme-20nabet > #sidebar.sidebar.show,
html.theme-20nabet #sidebar.sidebar.show:not(#mySidebar) {
    left: 0 !important;
}
html.theme-20nabet #sidebar.sidebar .close-sidebar {
    color: #f7d302 !important;
}
html.theme-20nabet #sidebar.sidebar .sidebar-content {
    color: #a0c4b8 !important;
}

/* =========================================================
   DASHBOARD — drawer do menu (#mySidebar) apenas
   ========================================================= */
html.theme-20nabet #mySidebar.sidebar {
    /* NÃO forçar left — o JS controla open/close com left calculado */
    height: 100% !important;
    width: min(82vw, 320px) !important;
    max-width: 320px !important;
    position: fixed !important;
    top: 0 !important;
    background: #0e5e43 !important;
    border-right: 1px solid #1a8060 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 4px 0 30px rgba(0,0,0,0.5) !important;
    z-index: 10001 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    font-family: 'Outfit', sans-serif !important;
}
html.theme-20nabet body.sidebar-open .overlay,
html.theme-20nabet body.sidebar-open #overlay {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10000 !important;
    background: rgba(0,0,0,0.65) !important;
}

/* Header do drawer */
html.theme-20nabet .sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 16px 12px !important;
    border-bottom: 1px solid #1a8060 !important;
    background: #0b4534 !important;
    flex-shrink: 0 !important;
}
html.theme-20nabet .sidebar-logo-area img {
    height: 30px !important;
    max-width: 120px !important;
    object-fit: contain !important;
}
html.theme-20nabet .sidebar .close-btn {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 14px !important;
    cursor: pointer !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 50% !important;
    border: none !important;
    flex-shrink: 0 !important;
    transition: background .2s !important;
}
html.theme-20nabet .sidebar .close-btn:hover {
    background: rgba(247,211,2,0.2) !important;
    color: #f7d302 !important;
}

/* Card usuário + foto de perfil na sidebar */
html.theme-20nabet .cx-sidebar-user {
    margin: 12px 12px 0 !important;
    padding: 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(247,211,2,0.35) !important;
    background: linear-gradient(145deg, rgba(247,211,2,0.1), rgba(0,0,0,0.2)) !important;
    box-shadow: none !important;
}
html.theme-20nabet .cx-sidebar-user .cx-su-top {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
html.theme-20nabet .cx-sidebar-user .cx-su-avatar {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    line-height: 0 !important;
}
html.theme-20nabet .cx-sidebar-user .cx-su-avatar:hover img,
html.theme-20nabet .cx-sidebar-user .cx-su-avatar:focus-visible img {
    box-shadow: 0 0 0 3px rgba(247,211,2,0.45) !important;
    border-color: #ffe54e !important;
}
html.theme-20nabet .cx-sidebar-user .cx-su-avatar img,
html.theme-20nabet .cx-sidebar-user img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #f7d302 !important;
    display: block !important;
    background: #0b4534 !important;
    box-shadow: 0 0 0 3px rgba(247,211,2,0.12) !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}
html.theme-20nabet .cx-sidebar-user .cx-su-name {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
    cursor: pointer !important;
}
html.theme-20nabet .cx-sidebar-user .cx-su-name:hover {
    color: #f7d302 !important;
}
html.theme-20nabet .cx-sidebar-user .cx-su-vip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 4px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: #000 !important;
    background: #f7d302 !important;
}
html.theme-20nabet .cx-sidebar-user .cx-su-vip i {
    color: #000 !important;
    font-size: 9px !important;
}
html.theme-20nabet .cx-sidebar-user .cx-su-balance {
    margin-top: 12px !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #f7d302 !important;
    font-family: 'Outfit', sans-serif !important;
}
html.theme-20nabet .cx-sidebar-user .cx-su-balance small {
    display: block !important;
    margin-bottom: 2px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #7fb89e !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
html.theme-20nabet .cx-sidebar-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
}
html.theme-20nabet .cx-sidebar-actions button,
html.theme-20nabet .cx-sidebar-actions a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 10px 8px !important;
    border-radius: 8px !important;
    border: 1.5px solid #f7d302 !important;
    background: transparent !important;
    color: #f7d302 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-family: 'Outfit', sans-serif !important;
}
html.theme-20nabet .cx-sidebar-actions .is-primary {
    border: none !important;
    background: #f7d302 !important;
    color: #000 !important;
}
html.theme-20nabet .cx-sidebar-actions .is-primary i {
    color: #000 !important;
}

/* Promo cards laterais — grid estável (sem float bugado) */
html.theme-20nabet .sidebar .cx-side-promo {
    display: grid !important;
    grid-template-columns: 1fr 44px !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
        "sub ico"
        "title ico" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    margin: 10px 12px 0 !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid #1a8060 !important;
    background: #0d5038 !important;
    color: #fff !important;
    cursor: pointer !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    clear: both !important;
    float: none !important;
    width: auto !important;
    min-height: 64px !important;
}
html.theme-20nabet .sidebar .cx-side-promo:hover {
    border-color: #f7d302 !important;
    background: #136046 !important;
}
html.theme-20nabet .sidebar .cx-side-promo small {
    grid-area: sub !important;
    display: block !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    color: #7fb89e !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
}
html.theme-20nabet .sidebar .cx-side-promo strong {
    grid-area: title !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: #fff !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
}
html.theme-20nabet .sidebar .cx-side-promo .cx-side-promo-ico {
    grid-area: ico !important;
    float: none !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #0b4534 !important;
    border: 1px solid #1a8060 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: #f7d302 !important;
    flex-shrink: 0 !important;
    justify-self: end !important;
    align-self: center !important;
}
html.theme-20nabet .sidebar .cx-side-promo .cx-side-promo-ico i {
    color: #f7d302 !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* Section titles (drawer-section-title) */
html.theme-20nabet .sidebar-section-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: #7fb89e !important;
    text-transform: uppercase !important;
    padding: 14px 16px 4px !important;
    background: transparent !important;
}

/* Itens de menu (drawer-item) */
html.theme-20nabet .sidebar a,
html.theme-20nabet .sidebar-link,
html.theme-20nabet #mySidebar a,
html.theme-20nabet #mySidebar .sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 11px 16px !important;
    margin: 1px 8px !important;
    color: #a0c4b8 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: 0.2s !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: transparent !important;
    position: relative !important;
    border: none !important;
    font-family: 'Outfit', sans-serif !important;
}
html.theme-20nabet .sidebar a:hover,
html.theme-20nabet .sidebar-link:hover,
html.theme-20nabet #mySidebar a:hover {
    color: #fff !important;
    background: rgba(247,211,2,0.08) !important;
}
html.theme-20nabet .sidebar a.active-nav,
html.theme-20nabet .sidebar-link.active-nav {
    color: #f7d302 !important;
    background: rgba(247,211,2,0.1) !important;
}
html.theme-20nabet .sidebar a.active-nav::before,
html.theme-20nabet .sidebar-link.active-nav::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 20% !important;
    bottom: 20% !important;
    width: 3px !important;
    background: #f7d302 !important;
    border-radius: 0 4px 4px 0 !important;
}

/* Ícones da barra lateral (quadrados verdes) */
html.theme-20nabet .sidebar-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
    background: #0d5038 !important;
    border: 1px solid #1a8060 !important;
    color: #7fb89e !important;
    transition: all .2s !important;
}
html.theme-20nabet .sidebar a:hover .sidebar-icon,
html.theme-20nabet .sidebar-link:hover .sidebar-icon {
    border-color: #f7d302 !important;
    color: #f7d302 !important;
    background: rgba(247,211,2,0.1) !important;
}
html.theme-20nabet .sidebar a.active-nav .sidebar-icon,
html.theme-20nabet .sidebar-link.active-nav .sidebar-icon {
    background: rgba(247,211,2,0.15) !important;
    border-color: #f7d302 !important;
    color: #f7d302 !important;
}
html.theme-20nabet .sidebar-icon i {
    color: inherit !important;
    font-size: 15px !important;
}
html.theme-20nabet .sidebar-nav-text {
    flex: 1 !important;
    color: inherit !important;
}

/* Badges laterais */
html.theme-20nabet .sidebar-badge {
    background: #e53935 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    letter-spacing: 0.3px !important;
}
html.theme-20nabet .sidebar-badge.new {
    background: #f7d302 !important;
    color: #000 !important;
}
html.theme-20nabet .sidebar-badge.hot {
    background: linear-gradient(135deg, #e53935, #ff7043) !important;
    color: #fff !important;
}

html.theme-20nabet .sidebar-divider {
    height: 1px !important;
    background: #1a8060 !important;
    margin: 10px 16px !important;
    border: none !important;
}

/* Footer logout */
html.theme-20nabet .sidebar-footer {
    margin-top: auto !important;
    padding: 14px 16px 20px !important;
    border-top: 1px solid #1a8060 !important;
    background: #0b4534 !important;
    flex-shrink: 0 !important;
}
html.theme-20nabet .sidebar-logout {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 11px 16px !important;
    background: rgba(229,57,53,0.12) !important;
    border: 1px solid rgba(229,57,53,0.3) !important;
    border-radius: 12px !important;
    color: #ff8a80 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}
html.theme-20nabet .sidebar-logout:hover {
    background: rgba(229,57,53,0.2) !important;
    color: #ffcdd2 !important;
}
html.theme-20nabet .sidebar-logout i { color: inherit !important; }

/* Overlay do menu */
html.theme-20nabet .overlay,
html.theme-20nabet #overlay {
    background: rgba(0,0,0,0.65) !important;
}

/* =========================================================
   MODAL AVATAR + PERFIL
   ========================================================= */
html.theme-20nabet .modal-avatar-content,
html.theme-20nabet .modal-profile-content {
    background: #0e5e43 !important;
    border: 1px solid #1a8060 !important;
    border-radius: 16px !important;
    color: #fff !important;
    max-width: min(430px, 96vw) !important;
}
html.theme-20nabet .modal-avatar-content h2,
html.theme-20nabet .modal-profile-content h2 {
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
}
html.theme-20nabet .avatar-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 9px !important;
    max-height: min(430px, 62vh) !important;
    overflow-y: auto !important;
    padding: 2px 4px 4px !important;
    margin: 12px 0 16px !important;
}
html.theme-20nabet .avatar-option {
    position: relative !important;
    border-radius: 16px !important;
    border: 2px solid #1a8060 !important;
    background: #0d5038 !important;
    padding: 7px !important;
    cursor: pointer !important;
    transition: border-color .16s ease, transform .16s ease, background .16s ease !important;
}
html.theme-20nabet .avatar-option:hover,
html.theme-20nabet .avatar-option.is-active,
html.theme-20nabet .avatar-option:has(input:checked) {
    border-color: #f7d302 !important;
    background: rgba(247,211,2,0.12) !important;
    transform: translateY(-1px) !important;
}
html.theme-20nabet .avatar-option input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
html.theme-20nabet .avatar-option img {
    width: 100% !important;
    display: block !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    background: #0b4534 !important;
}
html.theme-20nabet .profile-card-mini {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: #0d5038 !important;
    border: 1px solid #1a8060 !important;
    margin-bottom: 12px !important;
}
html.theme-20nabet .profile-card-mini img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #f7d302 !important;
    display: block !important;
}
html.theme-20nabet .profile-field {
    display: block !important;
    margin-bottom: 10px !important;
    color: #a0c4b8 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
html.theme-20nabet .profile-field input,
html.theme-20nabet .profile-field select {
    width: 100% !important;
    margin-top: 4px !important;
    background: rgba(0,0,0,0.25) !important;
    border: 1px solid #1a8060 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
}

/* =========================================================
   MODE SWITCH (cassino/esportes) estilo bottom 20nabet
   ========================================================= */
html.theme-20nabet .mode-switch.bottom-nav,
html.theme-20nabet .bottom-nav.mode-switch {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: min(460px, 94vw) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 9000 !important;
    pointer-events: none !important;
}
html.theme-20nabet .mode-switch__track {
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px !important;
    border-radius: 999px !important;
    background: #0e5e43 !important;
    border: 1px solid #1a8060 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.45) !important;
}
html.theme-20nabet .mode-switch__btn,
html.theme-20nabet .mode-switch .bnav-btn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    border: none !important;
    background: transparent !important;
    color: #7fb89e !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    cursor: pointer !important;
}
html.theme-20nabet .mode-switch__btn.ativo,
html.theme-20nabet .mode-switch__btn.active,
html.theme-20nabet .mode-switch__btn[aria-pressed="true"],
html.theme-20nabet .mode-switch .bnav-btn.ativo {
    background: #f7d302 !important;
    color: #000 !important;
}
html.theme-20nabet .mode-switch__btn.ativo i,
html.theme-20nabet .mode-switch__btn[aria-pressed="true"] i,
html.theme-20nabet .mode-switch .bnav-btn.ativo i {
    color: #000 !important;
}
html.theme-20nabet .mode-switch__btn i {
    font-size: 14px !important;
    color: inherit !important;
}

/* Depósito quick buttons */
html.theme-20nabet .deposit-quick-grid button {
    border-radius: 10px !important;
    border: 1px solid #1a8060 !important;
    background: #0d5038 !important;
    color: #fff !important;
}
html.theme-20nabet .deposit-quick-grid button:hover,
html.theme-20nabet .deposit-quick-grid button.active {
    border-color: #f7d302 !important;
    color: #f7d302 !important;
}
html.theme-20nabet .deposit-sheet-head {
    background: #0b4534 !important;
    color: #fff !important;
    border-bottom: 1px solid #1a8060 !important;
}
html.theme-20nabet .aovivo-entry {
    border-radius: 12px !important;
    border: 1px solid #1a8060 !important;
    background: #0d5038 !important;
    box-shadow: none !important;
}
html.theme-20nabet .aovivo-amount { color: #f7d302 !important; }

/* Carrossel / nav */
html.theme-20nabet .carousel-nav-btn {
    background: #0d5038 !important;
    border: 1px solid #1a8060 !important;
    color: #f7d302 !important;
}
html.theme-20nabet .carousel-nav-btn:hover {
    background: #f7d302 !important;
    color: #000 !important;
}

/* Páginas internas (extrato, afiliado, vip, missões) */
html.theme-20nabet .page-card,
html.theme-20nabet .vip-card,
html.theme-20nabet .missao-card,
html.theme-20nabet .extrato-item,
html.theme-20nabet .afiliado-box,
html.theme-20nabet .dashboard-box {
    background: #0d5038 !important;
    border: 1px solid #1a8060 !important;
    border-radius: 12px !important;
    color: #fff !important;
}

/* Garante que imagens de avatar nunca fiquem “invisíveis” em fundo preto */
html.theme-20nabet img[src*="/assets/avatars/"] {
    background: #0b4534 !important;
    object-fit: cover !important;
}

/* =========================================================
   MODAIS: SACAR / PERFIL / AVATAR / DEPÓSITO (20nabet)
   ========================================================= */
html.theme-20nabet #modalRetirada .modal-content,
html.theme-20nabet .modal-retirada-content,
html.theme-20nabet #modalDados .modal-content,
html.theme-20nabet .modal-profile-content,
html.theme-20nabet #modalAvatar .modal-content,
html.theme-20nabet .modal-avatar-content,
html.theme-20nabet #modalDeposito .modal-content,
html.theme-20nabet .modal-deposito-content,
html.theme-20nabet #modalBonus .modal-content,
html.theme-20nabet .modal-bonus-content {
    background: linear-gradient(180deg, #0e5e43 0%, #0b4534 100%) !important;
    border: 1px solid #1a8060 !important;
    border-radius: 16px !important;
    color: #fff !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55) !important;
    font-family: 'Outfit', sans-serif !important;
    max-width: min(400px, calc(100vw - 20px)) !important;
    width: min(400px, calc(100vw - 20px)) !important;
    max-height: min(88dvh, 720px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html.theme-20nabet .withdraw-sheet-head,
html.theme-20nabet .profile-sheet-head,
html.theme-20nabet .deposit-sheet-head {
    background: #0b4534 !important;
    border-bottom: 1px solid #1a8060 !important;
    color: #fff !important;
}
html.theme-20nabet .withdraw-sheet-head span i,
html.theme-20nabet .profile-sheet-head span i,
html.theme-20nabet .deposit-sheet-head span {
    color: #f7d302 !important;
}
html.theme-20nabet .withdraw-close,
html.theme-20nabet .profile-close,
html.theme-20nabet .deposit-close,
html.theme-20nabet #modalRetirada .close-modal,
html.theme-20nabet #modalDados .close-modal,
html.theme-20nabet #modalAvatar .close-modal {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-radius: 50% !important;
    border: none !important;
}

html.theme-20nabet .withdraw-summary,
html.theme-20nabet .profile-card-mini,
html.theme-20nabet .bonus-freespin-card {
    background: #0d5038 !important;
    border: 1px solid #1a8060 !important;
    border-radius: 12px !important;
}
html.theme-20nabet .withdraw-summary-row small,
html.theme-20nabet .withdraw-hint,
html.theme-20nabet .pix-saque-box small,
html.theme-20nabet .saque-password-box small,
html.theme-20nabet .profile-field span,
html.theme-20nabet .profile-card-mini span {
    color: #7fb89e !important;
}
html.theme-20nabet .withdraw-summary-row strong,
html.theme-20nabet .profile-card-mini strong {
    color: #f7d302 !important;
}
html.theme-20nabet .withdraw-summary-note {
    color: #ffe54e !important;
    border-top-color: #1a8060 !important;
}
html.theme-20nabet .withdraw-label,
html.theme-20nabet .pix-saque-box label,
html.theme-20nabet .saque-password-box label {
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
}

html.theme-20nabet #modalRetirada input,
html.theme-20nabet #modalRetirada select,
html.theme-20nabet #modalRetirada textarea,
html.theme-20nabet #modalDados input,
html.theme-20nabet #modalAvatar input,
html.theme-20nabet .pix-saque-grid select,
html.theme-20nabet .pix-saque-grid input,
html.theme-20nabet .profile-field input,
html.theme-20nabet .deposit-input {
    background: rgba(0,0,0,0.28) !important;
    border: 1px solid #1a8060 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-radius: 10px !important;
    font-family: 'Outfit', sans-serif !important;
}
html.theme-20nabet #modalRetirada input:focus,
html.theme-20nabet #modalRetirada select:focus,
html.theme-20nabet #modalDados input:focus,
html.theme-20nabet .deposit-input:focus {
    border-color: #f7d302 !important;
    box-shadow: 0 0 0 2px rgba(247,211,2,0.15) !important;
    outline: none !important;
}
html.theme-20nabet .profile-field input[readonly] {
    background: rgba(0,0,0,0.18) !important;
    color: #a0c4b8 !important;
    -webkit-text-fill-color: #a0c4b8 !important;
}
html.theme-20nabet #modalRetirada .input-icon i,
html.theme-20nabet #modalDados .input-icon i {
    color: #f7d302 !important;
}

html.theme-20nabet #modalRetirada .submit-button,
html.theme-20nabet #modalDados .submit-button,
html.theme-20nabet #modalAvatar .submit-button,
html.theme-20nabet #modalDeposito .submit-button,
html.theme-20nabet .deposit-submit,
html.theme-20nabet #subRetirada,
html.theme-20nabet #subDados,
html.theme-20nabet #subAvatar {
    background: #f7d302 !important;
    color: #000 !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-family: 'Outfit', sans-serif !important;
    min-height: 48px !important;
}
html.theme-20nabet #modalRetirada .submit-button:hover,
html.theme-20nabet #modalDados .submit-button:hover,
html.theme-20nabet #modalAvatar .submit-button:hover {
    background: #ffe54e !important;
}

html.theme-20nabet .profile-card-avatar img {
    border-color: #f7d302 !important;
}
html.theme-20nabet .profile-card-avatar-edit {
    background: #f7d302 !important;
    color: #000 !important;
    border-color: #0b4534 !important;
}
html.theme-20nabet .profile-change-avatar {
    border-color: #1a8060 !important;
    background: rgba(247,211,2,0.1) !important;
    color: #f7d302 !important;
}
html.theme-20nabet .profile-change-avatar:hover {
    border-color: #f7d302 !important;
    background: rgba(247,211,2,0.18) !important;
}

html.theme-20nabet .avatar-option {
    background: #0d5038 !important;
    border-color: #1a8060 !important;
}
html.theme-20nabet .avatar-option:hover,
html.theme-20nabet .avatar-option.is-active,
html.theme-20nabet .avatar-option:has(input:checked) {
    border-color: #f7d302 !important;
    background: rgba(247,211,2,0.12) !important;
}

html.theme-20nabet .deposit-quick-grid button {
    background: #0d5038 !important;
    border: 1px solid #1a8060 !important;
    color: #fff !important;
    border-radius: 10px !important;
}
html.theme-20nabet .deposit-quick-grid button:hover,
html.theme-20nabet .deposit-quick-grid button.active {
    border-color: #f7d302 !important;
    color: #f7d302 !important;
    background: rgba(247,211,2,0.1) !important;
}
html.theme-20nabet .deposit-disclaimer {
    color: #7fb89e !important;
}

/* Extrato (página limpa) */
html.theme-20nabet .extrato-clean-page {
    max-width: 100% !important;
    padding: 8px 12px 90px !important;
    box-sizing: border-box !important;
}
html.theme-20nabet .extrato-titulo {
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
}
html.theme-20nabet .extrato-table tr,
html.theme-20nabet .extrato-table-container {
    background: #0d5038 !important;
    border-color: #1a8060 !important;
}
html.theme-20nabet .extrato-table td {
    color: #e8edf2 !important;
}
html.theme-20nabet .extrato-table td::before {
    color: #7fb89e !important;
}

/* Shell no modal mobile: centralizar no app 480 */
@media (max-width: 480px) {
    html.theme-20nabet #modalRetirada .modal-content,
    html.theme-20nabet #modalDados .modal-content,
    html.theme-20nabet #modalAvatar .modal-content,
    html.theme-20nabet #modalDeposito .modal-content {
        width: min(100%, calc(100vw - 16px)) !important;
        max-width: min(100%, calc(100vw - 16px)) !important;
        border-radius: 16px 16px 12px 12px !important;
    }
}