/* ════════════════════════════════════════════════════════════════
   THEME DASHBOARD — Mikesonmikedad
   Override carregado DEPOIS de index-CKGH6hZ1.css
   Parte 1: Recolor (preto/cinza + gradientes roxos)
   Parte 2: Layout dashboard (sidebar fixa + topbar) em ≥1024px
   Não altera o bundle JS. Mobile mantém o layout original (recolorido).
   ════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 1. FUNDO BASE ───────────────────────── */
body{
  background:
    radial-gradient(900px 520px at 80% -10%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(700px 420px at 8% 35%, rgba(168,85,247,.07), transparent 60%),
    #0b0b11 !important;
}

/* Painéis de vidro → cinza escuro neutro */
.glass-card{
  background:#14141ff2 !important;
  border:1px solid #23232f !important;
  box-shadow:0 24px 60px #000000a6 !important;
}
.glass-card-soft{
  background:#1a1a28f2 !important;
  border:1px solid #2a2a3a !important;
}
.age-overlay{background:#08080ffa !important;}

/* ─────────────────── 2. RECOLOR DOS TOKENS bb-* ─────────────────
   accent1 #ff2f00 → #7c3aed (124 58 237)
   accent2 #8a2eff → #a855f7 (168 85 247)
   accent3 #ff7a00 → #c084fc (192 132 252)
   bg      #050816 → #0b0b11 (11 11 17)
   card    #0c0a20 → #15151f (21 21 31)
   muted   #b0b5d8 → #9b98ad (155 152 173)
   ────────────────────────────────────────────────────────────── */

/* text */
.text-bb-accent1{color:rgb(124 58 237 / var(--tw-text-opacity,1)) !important}
.text-bb-accent2{color:rgb(168 85 247 / var(--tw-text-opacity,1)) !important}
.text-bb-accent2\/30{color:rgb(168 85 247 / .3) !important}
.text-bb-accent3{color:rgb(192 132 252 / var(--tw-text-opacity,1)) !important}
.text-bb-muted{color:rgb(155 152 173 / var(--tw-text-opacity,1)) !important}
.text-bb-muted\/30{color:rgb(155 152 173 / .3) !important}
.hover\:text-bb-accent1:hover{color:rgb(124 58 237 / 1) !important}
.hover\:text-bb-accent2:hover{color:rgb(168 85 247 / 1) !important}
.group:hover .group-hover\:text-bb-accent1{color:rgb(124 58 237 / 1) !important}
.group:hover .group-hover\:text-bb-accent2{color:rgb(168 85 247 / 1) !important}
.group:hover .group-hover\:text-bb-accent3{color:rgb(192 132 252 / 1) !important}
.placeholder-bb-muted\/50::placeholder{color:rgb(155 152 173 / .5) !important}

/* backgrounds */
.bg-bb-bg{background-color:rgb(11 11 17 / var(--tw-bg-opacity,1)) !important}
.bg-bb-card{background-color:rgb(21 21 31 / var(--tw-bg-opacity,1)) !important}
.bg-bb-cardSoft{background-color:rgb(26 26 40 / var(--tw-bg-opacity,1)) !important}
.bg-bb-card\/30{background-color:rgb(21 21 31 / .3) !important}
.bg-bb-card\/50{background-color:rgb(21 21 31 / .5) !important}
.bg-bb-card\/60{background-color:rgb(21 21 31 / .6) !important}
.bg-bb-card\/80{background-color:rgb(21 21 31 / .8) !important}
.hover\:bg-bb-card:hover{background-color:rgb(21 21 31 / 1) !important}
.hover\:bg-bb-cardSoft:hover{background-color:rgb(26 26 40 / 1) !important}
.bg-bb-accent1\/10{background-color:rgb(124 58 237 / .1) !important}
.bg-bb-accent1\/90{background-color:rgb(124 58 237 / .9) !important}
.bg-bb-accent2{background-color:rgb(168 85 247 / var(--tw-bg-opacity,1)) !important}
.bg-bb-accent2\/10{background-color:rgb(168 85 247 / .1) !important}
.bg-bb-accent2\/20{background-color:rgb(168 85 247 / .2) !important}
.bg-bb-accent3{background-color:rgb(192 132 252 / var(--tw-bg-opacity,1)) !important}
.hover\:bg-bb-accent1\/20:hover{background-color:rgb(124 58 237 / .2) !important}
.hover\:bg-bb-accent2\/10:hover{background-color:rgb(168 85 247 / .1) !important}
.hover\:bg-bb-accent2\/30:hover{background-color:rgb(168 85 247 / .3) !important}
.group:hover .group-hover\:bg-bb-accent1\/90{background-color:rgb(124 58 237 / .9) !important}

/* borders */
.border-bb-accent1{border-color:rgb(124 58 237 / var(--tw-border-opacity,1)) !important}
.border-bb-accent1\/20{border-color:rgb(124 58 237 / .2) !important}
.border-bb-accent1\/30{border-color:rgb(124 58 237 / .3) !important}
.border-bb-accent2\/10{border-color:rgb(168 85 247 / .1) !important}
.border-bb-accent2\/20{border-color:rgb(168 85 247 / .2) !important}
.border-bb-accent2\/30{border-color:rgb(168 85 247 / .3) !important}
.border-bb-accent3\/20{border-color:rgb(192 132 252 / .2) !important}
.border-bb-muted\/30{border-color:rgb(155 152 173 / .3) !important}
.border-t-bb-accent1{border-top-color:rgb(124 58 237 / 1) !important}
.border-t-bb-accent2{border-top-color:rgb(168 85 247 / 1) !important}
.border-t-bb-accent3{border-top-color:rgb(192 132 252 / 1) !important}
.border-t-bb-muted{border-top-color:rgb(155 152 173 / 1) !important}
.focus\:border-bb-accent1\/30:focus{border-color:rgb(124 58 237 / .3) !important}
.focus\:border-bb-accent2:focus{border-color:rgb(168 85 247 / 1) !important}
.hover\:border-bb-accent3\/20:hover{border-color:rgb(192 132 252 / .2) !important}

/* gradients — from */
.from-bb-accent1{--tw-gradient-from:#7c3aed var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(124 58 237 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important}
.from-bb-accent1\/10{--tw-gradient-from:rgb(124 58 237 / .1) var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(124 58 237 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important}
.from-bb-accent1\/20{--tw-gradient-from:rgb(124 58 237 / .2) var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(124 58 237 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important}
.from-bb-accent1\/70{--tw-gradient-from:rgb(124 58 237 / .7) var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(124 58 237 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important}
.from-bb-accent2{--tw-gradient-from:#a855f7 var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important}
.from-bb-accent2\/10{--tw-gradient-from:rgb(168 85 247 / .1) var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important}
.from-bb-accent2\/20{--tw-gradient-from:rgb(168 85 247 / .2) var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important}
.from-bb-accent3{--tw-gradient-from:#c084fc var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(192 132 252 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important}
.from-bb-accent3\/20{--tw-gradient-from:rgb(192 132 252 / .2) var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(192 132 252 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important}
.from-bb-bg\/90{--tw-gradient-from:rgb(11 11 17 / .9) var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(11 11 17 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important}
.peer:checked ~ .peer-checked\:from-bb-accent1{--tw-gradient-from:#7c3aed var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(124 58 237 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important}

/* gradients — via */
.via-bb-accent2{--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to) !important}
.via-bb-accent2\/10{--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), rgb(168 85 247 / .1) var(--tw-gradient-via-position), var(--tw-gradient-to) !important}
.via-bb-bg\/40{--tw-gradient-to:rgb(11 11 17 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), rgb(11 11 17 / .4) var(--tw-gradient-via-position), var(--tw-gradient-to) !important}

/* gradients — to */
.to-bb-accent1{--tw-gradient-to:#9d5cf0 var(--tw-gradient-to-position) !important}
.to-bb-accent1\/20{--tw-gradient-to:rgb(124 58 237 / .2) var(--tw-gradient-to-position) !important}
.to-bb-accent2{--tw-gradient-to:#c084fc var(--tw-gradient-to-position) !important}
.to-bb-accent2\/10{--tw-gradient-to:rgb(168 85 247 / .1) var(--tw-gradient-to-position) !important}
.to-bb-accent2\/20{--tw-gradient-to:rgb(168 85 247 / .2) var(--tw-gradient-to-position) !important}
.to-bb-accent2\/80{--tw-gradient-to:rgb(168 85 247 / .8) var(--tw-gradient-to-position) !important}
.to-bb-accent3{--tw-gradient-to:#c084fc var(--tw-gradient-to-position) !important}
.to-bb-accent3\/10{--tw-gradient-to:rgb(192 132 252 / .1) var(--tw-gradient-to-position) !important}
.to-bb-accent3\/20{--tw-gradient-to:rgb(192 132 252 / .2) var(--tw-gradient-to-position) !important}
.hover\:to-bb-accent2:hover{--tw-gradient-to:#c084fc var(--tw-gradient-to-position) !important}
.peer:checked ~ .peer-checked\:to-bb-accent2{--tw-gradient-to:#c084fc var(--tw-gradient-to-position) !important}

/* shadows */
.shadow-bb-accent2\/50{--tw-shadow-color:rgb(168 85 247 / .5) !important;--tw-shadow:var(--tw-shadow-colored) !important}
.hover\:shadow-bb-accent1\/30:hover{--tw-shadow-color:rgb(124 58 237 / .3) !important;--tw-shadow:var(--tw-shadow-colored) !important}
.hover\:shadow-bb-accent2\/50:hover{--tw-shadow-color:rgb(168 85 247 / .5) !important;--tw-shadow:var(--tw-shadow-colored) !important}

/* ──────────────── 3. LAYOUT DASHBOARD (≥1024px) ────────────────
   header (único no DOM) → sidebar fixa à esquerda
   bloco direito do header (login/instagram) → topbar fixa
   container principal ocupa o resto, deslocado para a direita
   ────────────────────────────────────────────────────────────── */
@media (min-width:1024px){

  body{padding:0 !important}

  /* container principal */
  [class*="max-w-[1600px]"]{
    max-width:none !important;
    margin:0 0 0 252px !important;
    min-height:100vh;
    border-radius:0 !important;
    padding-top:64px;
    border-left:none !important;
    border-top:none !important;
    border-bottom:none !important;
    /* CRÍTICO: transform/backdrop-filter criam containing block
       e prendem a sidebar/topbar (position:fixed) ao container */
    animation:none !important;
    transform:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    filter:none !important;
  }

  /* ── SIDEBAR ── */
  [class*="max-w-[1600px]"] > header{
    position:fixed !important;
    left:0; top:0; bottom:0;
    width:252px;
    z-index:9999;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    padding:16px 12px 14px !important;
    background:#101019;
    border-right:1px solid #23232f;
    border-radius:0 18px 18px 0;
    overflow-y:auto;
    overflow-x:hidden;
  }
  [class*="max-w-[1600px]"] > header::-webkit-scrollbar{width:6px}
  [class*="max-w-[1600px]"] > header::-webkit-scrollbar-thumb{background:#2a2a3a;border-radius:6px}

  /* bloco logo + nav em coluna */
  [class*="max-w-[1600px]"] > header > [class*="slideInLeft"]{
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
    gap:10px !important;
  }
  /* logo mais pequeno e centrado */
  [class*="max-w-[1600px]"] > header > [class*="slideInLeft"] > div:first-child{
    height:96px !important;
    width:96px !important;
    margin:0 auto;
  }
  /* nav vertical */
  [class*="max-w-[1600px]"] > header nav{
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    gap:4px !important;
    justify-content:flex-start !important;
  }
  /* itens do menu: linhas completas */
  [class*="max-w-[1600px]"] > header nav > button,
  [class*="max-w-[1600px]"] > header nav > div > button{
    width:100%;
    justify-content:flex-start !important;
    gap:11px !important;
    border-radius:11px !important;
    padding:10px 14px !important;
    font-size:13px;
  }
  [class*="max-w-[1600px]"] > header nav > button i,
  [class*="max-w-[1600px]"] > header nav > div > button i{
    width:16px;text-align:center;
  }
  /* seta dos dropdowns alinhada à direita */
  [class*="max-w-[1600px]"] > header nav [class*="fa-chevron"]{
    margin-left:auto;
  }
  .livestream-menu-container,
  .community-menu-container{width:100%}

  /* dropdowns desktop → acordeão inline dentro da sidebar */
  [class*="max-w-[1600px]"] > header nav [class*="md:block"][class*="absolute"]{
    position:static !important;
    width:100% !important;
    margin-top:2px !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-radius:0 !important;
  }
  [class*="max-w-[1600px]"] > header nav [class*="md:block"][class*="absolute"] button{
    padding:8px 14px 8px 38px !important;
    border-radius:9px !important;
    font-size:12px !important;
  }

  /* ── TOPBAR (controlos da direita do header) ── */
  [class*="max-w-[1600px]"] > header > [class*="slideInRight"]{
    position:fixed !important;
    top:0; left:252px; right:0;
    height:64px;
    z-index:9998;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:12px !important;
    padding:0 24px;
    background:rgba(11,11,17,.85);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid #23232f;
  }

  /* menus do utilizador abrem por baixo da topbar */
  [class*="max-w-[1600px]"] > header > [class*="slideInRight"] [class*="absolute"]{
    top:56px !important;
  }
}

/* ─────────────── 4. AJUSTES MENORES GLOBAIS ─────────────── */
/* scrollbar geral */
::-webkit-scrollbar{width:10px;height:8px}
::-webkit-scrollbar-thumb{background:#2a2a3a;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ─────────────── 5. RESTOS DE LARANJA → ROXO ───────────────
   (títulos de secção, labels dos stats das ofertas, promo code)
   Amarelos/dourados mantêm-se (big wins, troféus). */
.title-gradient{background:linear-gradient(135deg,#c084fc,#a855f7,#7c3aed) !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:#fff0 !important}
.title-box{background:linear-gradient(135deg,#c084fc1a,#a855f71a,#7c3aed1a) !important;border:1px solid rgb(168 85 247 / .25) !important}
.text-\[\#ea580c\]{color:rgb(168 85 247 / var(--tw-text-opacity,1)) !important}
.from-\[\#ea580c\]{--tw-gradient-from:#a855f7 var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important}
.text-orange-400{color:rgb(192 132 252 / var(--tw-text-opacity,1)) !important}
.text-orange-500{color:rgb(168 85 247 / var(--tw-text-opacity,1)) !important}
.from-orange-400{--tw-gradient-from:#c084fc var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(192 132 252 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important}
.from-orange-500{--tw-gradient-from:#a855f7 var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important}
.from-orange-500\/20{--tw-gradient-from:rgb(168 85 247 / .2) var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important}
.to-orange-400{--tw-gradient-to:#c084fc var(--tw-gradient-to-position) !important}
.to-orange-400\/20{--tw-gradient-to:rgb(192 132 252 / .2) var(--tw-gradient-to-position) !important}
.to-orange-500{--tw-gradient-to:#a855f7 var(--tw-gradient-to-position) !important}
.to-orange-500\/10{--tw-gradient-to:rgb(168 85 247 / .1) var(--tw-gradient-to-position) !important}
.to-orange-500\/20{--tw-gradient-to:rgb(168 85 247 / .2) var(--tw-gradient-to-position) !important}
.bg-orange-500\/30{background-color:rgb(168 85 247 / .3) !important}
.border-orange-500\/30{border-color:rgb(168 85 247 / .3) !important}
.border-orange-500\/50{border-color:rgb(168 85 247 / .5) !important}


/* ════════════════════════════════════════════════════════════════
   PATCH SIDEBAR SAFE — cache-bump 20260610104500
   Move a sidebar para a direita e compensa o conteúdo/topbar.
   Não transforma a sidebar em topo e não deixa conteúdo por trás.
   ════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  :root {
    --safe-sidebar-left: 16px;
    --safe-sidebar-width: 252px;
    --safe-sidebar-gap: 18px;
    --safe-content-left: calc(var(--safe-sidebar-left) + var(--safe-sidebar-width) + var(--safe-sidebar-gap));
  }

  [class*="max-w-[1600px]"] {
    margin: 0 0 0 var(--safe-content-left) !important;
    max-width: none !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    padding-top: 64px !important;
  }

  [class*="max-w-[1600px]"] > header {
    left: var(--safe-sidebar-left) !important;
    top: 16px !important;
    bottom: 16px !important;
    width: var(--safe-sidebar-width) !important;
    border-radius: 18px !important;
    border: 1px solid #23232f !important;
    background: #101019 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  [class*="max-w-[1600px]"] > header > [class*="slideInRight"] {
    left: var(--safe-content-left) !important;
    right: 0 !important;
    top: 0 !important;
  }

  [class*="max-w-[1600px]"] > main {
    min-width: 0 !important;
  }
}

@media (max-width:1023px){
  [class*="max-w-[1600px]"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}