.loading-screen{position:fixed;inset:0;background:#000;display:grid;place-items:center;z-index:80;opacity:0;pointer-events:none;transition:opacity .5s ease}.loading-screen.show{opacity:1;pointer-events:auto}.loading-screen.hide{opacity:0;pointer-events:none}.loading-logo,.brand-mark{display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--secondary));color:white;box-shadow:0 18px 45px rgba(0,87,178,.28)}.loading-logo{width:77px;height:77px;border-radius:22px;animation:pulseScale 2s ease-in-out infinite}.brand-mark{width:30px;height:30px;border-radius:12px;flex:none}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:rgba(0,0,0,.96);border-right:1px solid rgba(0,87,178,.12);z-index:30;transition:transform .3s ease}.brand-row{display:flex;align-items:center;gap:12px;padding:20px;border-bottom:1px solid rgba(255,255,255,.06)}.sidebar-nav{padding:14px 10px}.sidebar-link{width:100%;display:flex;align-items:center;gap:12px;border:0;background:transparent;color:var(--muted);padding:12px 14px;border-radius:14px;margin:3px 0;text-align:left;font-weight:600}.sidebar-link:hover,.sidebar-link.active{background:rgba(0,87,178,.14);color:#d8ecff}.main-content{margin-left:var(--sidebar);min-height:100vh}.app-main{max-width:1180px;margin:0 auto;padding:26px}.mobile-header{display:none;border-bottom:1px solid rgba(255,255,255,.06);padding:14px 18px;align-items:center;gap:12px}.sidebar-overlay{display:none}.tab-panel{animation:fadeSlideUp .35s ease}.page-header{margin-bottom:18px}.page-header h1{font-size:24px;margin:0 0 4px}.page-header p{margin:0;color:var(--muted)}

.brand-mark.has-logo{background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
.brand-logo-png{width:100%;height:100%;object-fit:contain;border-radius:0!important;background:transparent!important}

.loading-logo.has-logo,.brand-mark.has-logo{background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
.loading-logo-png{width:96px;max-width:40vw;max-height:96px;object-fit:contain;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.brand-logo-png{width:100%;height:100%;object-fit:contain;border-radius:0!important;background:transparent!important;border:0!important;box-shadow:none!important}

/* Menu lateral com rolagem quando houver muitas abas */
.sidebar{
  height:100vh;
  max-height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.sidebar-nav{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding-bottom:24px;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,87,178,.55) transparent;
}
.sidebar-nav::-webkit-scrollbar{width:6px}
.sidebar-nav::-webkit-scrollbar-track{background:transparent}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(0,87,178,.55);border-radius:999px}
.sidebar-nav::-webkit-scrollbar-thumb:hover{background:rgba(0,87,178,.85)}


/* UX/UI premium refinements */

:root{--sidebar-w:248px;--safe-gap:clamp(14px,2vw,24px)}
body{overflow-x:hidden;background:radial-gradient(circle at top left,rgba(0,87,178,.18),transparent 32%),#030712;color:#eef4ff}
.sidebar{width:var(--sidebar-w);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(0,87,178,.55) transparent;padding-bottom:18px}
.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:rgba(0,87,178,.55);border-radius:999px}
.main-content{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}
.main-content main{width:min(1180px,100%);padding:var(--safe-gap);margin-inline:auto}
.tab-panel{animation:panelIn .24s ease both;display:block!important;visibility:visible!important;opacity:1!important}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.app-page-head,.page-head,.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
@media(max-width:768px){.main-content{margin-left:0}.main-content main{padding:14px}.sidebar{width:min(86vw,300px)}}

/* FIX: conteúdo das abas visível no tema black premium */
body:not(.app-booting):not(.is-locked) .main-content,
body:not(.app-booting):not(.is-locked) .app-main,
body:not(.app-booting):not(.is-locked) #app-main{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
#app-main > *{
  visibility:visible!important;
  opacity:1!important;
}
.public-store-mode .main-content,
.public-store-mode .app-main,
.public-store-mode #app-main{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
.card,.grid,.list,.form-grid,.public-products-grid,.dashboard-grid,
.purchase-summary,.affiliate-card,.product-card,.panel-card{
  visibility:visible!important;
  opacity:1!important;
}

/* Correção: as abas renderizadas dinamicamente dentro do app-main devem permanecer visíveis. */
#app-main > .tab-panel{display:block!important;opacity:1!important;visibility:visible!important;}
#app-main > .tab-panel:not(.active){display:block!important;}


/* FIX FINAL: conteúdo das abas sempre visível dentro do painel */
#app-main,
#app-main > *,
#app-main section,
#app-main .tab-panel,
#app-main .card,
#app-main .grid,
#app-main .list,
#app-main .form-grid{
  display: revert;
  visibility: visible !important;
  opacity: 1 !important;
}
#app-main{display:block!important;min-height:320px!important;}
#app-main .grid{display:grid!important;}
#app-main .form-grid{display:grid!important;}
#app-main .row{display:flex!important;}
#app-main .card{display:block!important;}
body:not(.is-locked):not(.app-booting) .main-content{display:flex!important;visibility:visible!important;opacity:1!important;}
body:not(.is-locked):not(.app-booting) .sidebar{display:flex!important;visibility:visible!important;opacity:1!important;}

/* FIX DEFINITIVO: menu lateral clicável para usuários comuns */
body:not(.is-locked):not(.app-booting) .sidebar,
body:not(.is-locked):not(.app-booting) #sidebar,
body:not(.is-locked):not(.app-booting) #sidebar-nav,
body:not(.is-locked):not(.app-booting) .sidebar-link{
  pointer-events:auto!important;
  visibility:visible!important;
  opacity:1!important;
}
body:not(.is-locked):not(.app-booting) .sidebar-overlay:not(.show){
  display:none!important;
  pointer-events:none!important;
}
.sidebar-link{cursor:pointer!important;position:relative;z-index:2;user-select:none;}

/* FIX DEFINITIVO 2: menu do usuário sempre navegável */
body:not(.is-locked):not(.app-booting):not(.public-store-mode) #sidebar{
  pointer-events:auto!important;
  z-index:120!important;
}
body:not(.is-locked):not(.app-booting):not(.public-store-mode) #sidebar-nav,
body:not(.is-locked):not(.app-booting):not(.public-store-mode) #sidebar-nav *{
  pointer-events:auto!important;
}
body:not(.is-locked):not(.app-booting):not(.public-store-mode) .sidebar-link[data-tab]{
  cursor:pointer!important;
  user-select:none!important;
  position:relative!important;
  z-index:125!important;
}
body:not(.is-locked):not(.app-booting):not(.public-store-mode) .sidebar-overlay:not(.show){
  display:none!important;
  opacity:0!important;
  pointer-events:none!important;
}
@media (min-width:901px){
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) .sidebar{
    transform:none!important;
  }
}

/* FIX DEFINITIVO MENU USUÁRIO: sidebar sempre acima do conteúdo e links navegáveis */
body:not(.is-locked):not(.app-booting):not(.public-store-mode) #sidebar{
  z-index:900!important;
  pointer-events:auto!important;
}
body:not(.is-locked):not(.app-booting):not(.public-store-mode) #sidebar-nav{
  position:relative!important;
  z-index:901!important;
  pointer-events:auto!important;
}
body:not(.is-locked):not(.app-booting):not(.public-store-mode) #sidebar-nav .sidebar-link{
  display:flex!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  text-decoration:none!important;
  position:relative!important;
  z-index:902!important;
}
body:not(.is-locked):not(.app-booting):not(.public-store-mode) .main-content{
  position:relative!important;
  z-index:1!important;
}
body:not(.is-locked):not(.app-booting):not(.public-store-mode) #sidebar-overlay:not(.show),
body:not(.is-locked):not(.app-booting):not(.public-store-mode) .access-modal:not(.show),
body:not(.is-locked):not(.app-booting):not(.public-store-mode) .invite-modal:not(.show),
body:not(.is-locked):not(.app-booting):not(.public-store-mode) .purchase-modal:not(.show),
body:not(.is-locked):not(.app-booting):not(.public-store-mode) .modal-overlay:not(.show){
  display:none!important;
  pointer-events:none!important;
}


/* FIX VITRINE PÚBLICA: remover completamente o menu lateral no link do usuário */
body.public-store-mode #sidebar,
body.public-store-mode .sidebar,
body.public-store-mode #sidebar-nav,
body.public-store-mode .sidebar-overlay,
body.public-store-mode .mobile-header,
body.public-store-mode #logout-button,
body.public-store-mode .floating-logout{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.public-store-mode .main-content{
  margin-left:0!important;
  width:100%!important;
  max-width:none!important;
}
body.public-store-mode .app-main,
body.public-store-mode #app-main{
  margin:0 auto!important;
  width:min(1180px,100%)!important;
}


/* Remover título Comunidade Network do cabeçalho no mobile */
@media (max-width: 768px){
    .app-header-logo,
    .header-logo,
    .header-brand,
    .mobile-header-title,
    .mobile-brand,
    .sidebar-brand-mobile,
    .topbar-title,
    .navbar-brand,
    [class*="brand"],
    [class*="logo-text"]{
        display:none !important;
    }

    .app-header,
    .mobile-header{
        justify-content:space-between !important;
    }
}


/* Correção precisa: esconder somente o título do cabeçalho superior no mobile */
@media (max-width: 900px){
  .main-content > .mobile-header > strong,
  .main-content > header.mobile-header > strong,
  header.mobile-header strong:not(#app-title){
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .main-content > .mobile-header{
    justify-content: space-between !important;
    gap: 10px !important;
  }
}


/* Manter logo e título dentro do menu lateral mobile */
@media (max-width:900px){
  #sidebar .brand-row,
  .sidebar .brand-row,
  #sidebar #app-title,
  .sidebar #app-title,
  #sidebar .brand-mark,
  .sidebar .brand-mark{
      display:flex !important;
      visibility:visible !important;
      opacity:1 !important;
  }

  #sidebar #app-title{
      width:auto !important;
      max-width:none !important;
      overflow:visible !important;
  }
}


/* CORREÇÃO DEFINITIVA DE LAYOUT DO PAINEL
   Mantém o menu lateral fixo no desktop, evita que os botões virem menu horizontal
   e limita a marca/logo para não estourar o topo. */
@media (min-width: 901px){
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) .sidebar,
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) #sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:auto!important;
    bottom:0!important;
    width:var(--sidebar-w,248px)!important;
    height:100vh!important;
    max-height:100vh!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:#000!important;
    border-right:1px solid rgba(255,255,255,.07)!important;
    transform:none!important;
  }
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) .brand-row{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    padding:16px 18px!important;
    min-height:62px!important;
    max-height:72px!important;
    overflow:hidden!important;
    border-bottom:1px solid rgba(255,255,255,.06)!important;
  }
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) .brand-mark,
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) #brand-mark{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    flex:0 0 34px!important;
    overflow:hidden!important;
  }
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) .brand-logo-png,
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) #brand-mark img,
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) .brand-mark svg{
    width:34px!important;
    height:34px!important;
    max-width:34px!important;
    max-height:34px!important;
    object-fit:contain!important;
  }
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) #app-title{
    display:block!important;
    font-size:16px!important;
    line-height:1.2!important;
    color:#f4f7fb!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) #sidebar-nav,
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) .sidebar-nav{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:4px!important;
    padding:14px 10px 24px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) #sidebar-nav .sidebar-link,
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) .sidebar-link{
    appearance:none!important;
    -webkit-appearance:none!important;
    width:100%!important;
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:12px!important;
    margin:2px 0!important;
    padding:12px 14px!important;
    border:0!important;
    border-radius:14px!important;
    background:transparent!important;
    color:var(--muted,#9ca8bb)!important;
    text-align:left!important;
    font-weight:600!important;
    box-shadow:none!important;
  }
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) #sidebar-nav .sidebar-link.active,
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) .sidebar-link.active{
    background:rgba(0,87,178,.18)!important;
    color:#dbeafe!important;
  }
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) .main-content{
    margin-left:var(--sidebar-w,248px)!important;
    width:calc(100% - var(--sidebar-w,248px))!important;
    min-height:100vh!important;
    display:flex!important;
    flex-direction:column!important;
  }
  body:not(.is-locked):not(.app-booting):not(.public-store-mode) .mobile-header{
    display:none!important;
  }
}