/* Central de configurações — isolada da navegação principal */
.cfg-screen[hidden]{display:none!important}
.cfg-screen{position:fixed;inset:0;z-index:65;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);color:var(--text);font-family:var(--display)}
.cfg-shell{max-width:680px;min-height:100dvh;margin:auto;background:var(--panel)}
.cfg-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--panel);border-bottom:1px solid var(--line)}
.cfg-back{width:38px;height:38px;border:0;background:transparent;color:var(--text);font-size:24px;cursor:pointer}
.cfg-head h1{margin:0;font-size:20px}
.cfg-profile{display:flex;align-items:center;gap:16px;padding:26px 22px;border-bottom:8px solid var(--bg)}
.cfg-avatar{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:#4a3fd6;color:white;font-size:27px;overflow:hidden;flex:none}
.cfg-avatar img{width:100%;height:100%;object-fit:cover}
.cfg-profile strong{display:block;font-size:19px;overflow-wrap:anywhere}
.cfg-profile small{display:block;margin-top:5px;color:var(--muted);font-size:14px}
.cfg-section{padding:22px;border-bottom:8px solid var(--bg)}
.cfg-section h2{font-size:15px;color:var(--violet);margin:0 0 18px}
.cfg-section h3{font-size:13px;margin:22px 0 10px;color:var(--muted)}
.cfg-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cfg-choices button{min-height:46px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);color:var(--text);font:inherit;cursor:pointer;text-align:left}
.cfg-choices button[aria-pressed="true"]{border-color:var(--violet);background:rgba(123,108,255,.15)}
.cfg-fonts button{display:flex;flex-direction:column;gap:5px}
.cfg-fonts small{color:var(--muted)}
.cfg-note{color:var(--muted);font-size:13px;line-height:1.5}
body.cfg-open{overflow:hidden}
@media(max-width:600px){.cfg-shell{max-width:none}.cfg-section{padding:20px 16px}.cfg-profile{padding:22px 16px}.cfg-head{padding:12px 14px}}

.cfg-entry{display:none;text-align:center;margin:12px auto 20px;max-width:820px}
body[data-aba="meus"] .cfg-entry{display:block}
.cfg-entry button{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:1px solid var(--line);border-radius:12px;cursor:pointer}

/* Navegação por seções compactas */
.cfg-page[hidden]{display:none!important}
.cfg-list{display:flex;flex-direction:column;padding:10px 12px;background:var(--panel)}
.cfg-list>button,.cfg-subrow{display:flex;align-items:center;gap:17px;width:100%;min-height:62px;padding:12px 14px;background:transparent;border:0;border-radius:12px;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.cfg-list>button:hover,.cfg-subrow:hover{background:rgba(123,108,255,.09)}
.cfg-list>button>i:first-child,.cfg-subrow>i:first-child{width:28px;font-size:19px;color:#8c83fa;text-align:center}
.cfg-list>button>span{display:flex;flex:1;flex-direction:column;gap:4px}
.cfg-list strong{font-size:15px;font-weight:600}
.cfg-list small,.cfg-subrow small{color:var(--muted);font-size:13px}
.cfg-list>button>i:last-child,.cfg-subrow>i:last-child{margin-left:auto;color:var(--muted);font-size:12px}
.cfg-select .cfg-check{display:none}
.cfg-select button[aria-pressed="true"] .cfg-check{display:inline-block;color:#8c83fa}
.cfg-section{padding:20px 12px;border-bottom:8px solid var(--bg)}
.cfg-section h2{padding:0 14px;margin:2px 0 6px;color:#8c83fa}
.cfg-fonts button{display:flex;flex-direction:row;align-items:center;gap:12px}
.cfg-fonts button>span{flex:1}
.cfg-fonts button>small{margin-right:auto}
.cfg-note{padding:0 14px}
.cfg-subrow>span{flex:1}

/* Configurações integra a navegação principal, sem botão no perfil */
.cfg-entry{display:none!important}
@media(max-width:899px){
  .bnav .bn-config span{font-size:clamp(7px,1.9vw,10px)}
  .bnav .bn-config svg{flex:none}
}
.bnav .bn-config.on{background:rgba(123,108,255,.22);color:#a99bff}

/* Barra inferior: quatro itens com a mesma escala visual */
@media(max-width:899px){
  .bnav{display:flex;gap:2px;padding:5px 6px}
  .bnav button,.bnav a{min-width:0;flex:1 1 0;padding:4px 1px;gap:4px;overflow:hidden}
  .bnav button>svg,.bnav a>svg,.bnav .bn-config svg{width:23px;height:23px;flex:none;stroke-width:2}
  .bnav button>span:not(.bn-av):not(.bn-n),.bnav .bn-config span{font-size:10px;line-height:1.15;letter-spacing:0;font-weight:600;white-space:nowrap}
  .bnav .bn-config{--nav-bg:#171826}
  html.claro .bnav .bn-config{--nav-bg:#f2f2fa}
  .bnav .bn-config.on svg{fill:none}
}
@media(max-width:380px){
  .bnav{left:6px;right:6px;padding:4px 3px;gap:0}
  .bnav button>span:not(.bn-av):not(.bn-n),.bnav .bn-config span{font-size:9px}
  .bnav button>svg,.bnav .bn-config svg{width:21px;height:21px}
}

/* Ajustes permanece selecionado e barra principal visível */
.top-actions .lang[hidden]{display:none!important}
.cfg-screen{z-index:30}
@media(max-width:899px){
  .cfg-screen{bottom:calc(76px + env(safe-area-inset-bottom));}
  body.cfg-open .bnav{z-index:40}
  body.cfg-open .bnav button.on:not(.bn-config){background:transparent;box-shadow:none;color:var(--muted)}
  body.cfg-open .bnav button.on:not(.bn-config) svg{fill:none;color:inherit}
  body.cfg-open .bnav .bn-config.on{background:rgba(123,108,255,.22);color:#a99bff}
}
@media(min-width:900px){
  .cfg-screen{left:84px;z-index:30}
  body.cfg-open .bnav{z-index:40}
  body.cfg-open .bnav button.on:not(.bn-config){background:transparent;box-shadow:none;color:#b9bedc}
  body.cfg-open .bnav button.on:not(.bn-config)::before{display:none}
}
.cfg-list>.cfg-link{display:flex;align-items:center;gap:17px;width:100%;min-height:62px;padding:12px 14px;border:0;border-radius:12px;color:var(--text);text-decoration:none;font:inherit}
.cfg-list>.cfg-link:hover{background:rgba(123,108,255,.09)}
.cfg-list>.cfg-link>i:first-child{width:28px;font-size:19px;color:#8c83fa;text-align:center}
.cfg-list>.cfg-link>span{display:flex;flex:1;flex-direction:column;gap:4px}
.cfg-list>.cfg-link>i:last-child{margin-left:auto;color:var(--muted);font-size:12px}
.cfg-shell{overflow:hidden}
.cfg-page{transform:translateX(0)}
.cfg-page.cfg-leave,.cfg-page.cfg-leave-back{position:absolute;left:0;right:0;top:0;pointer-events:none}
.cfg-shell{position:relative}
.cfg-page.cfg-enter{animation:cfg-slide-in .23s ease-out both}
.cfg-page.cfg-leave{animation:cfg-slide-out .23s ease-in both}
.cfg-page.cfg-enter-back{animation:cfg-slide-back-in .23s ease-out both}
.cfg-page.cfg-leave-back{animation:cfg-slide-back-out .23s ease-in both}
@keyframes cfg-slide-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes cfg-slide-out{from{transform:translateX(0)}to{transform:translateX(-35%)}}
@keyframes cfg-slide-back-in{from{transform:translateX(-35%)}to{transform:translateX(0)}}
@keyframes cfg-slide-back-out{from{transform:translateX(0)}to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.cfg-page{animation:none!important}}

.cfg-pages{position:relative;min-height:calc(100dvh - 160px)}

/* Transição lateral contínua: páginas sobrepostas, sem salto de layout */
.cfg-pages{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100dvh - 160px)}
.cfg-page.cfg-enter,.cfg-page.cfg-enter-back,.cfg-page.cfg-leave,.cfg-page.cfg-leave-back{position:absolute;inset:0 auto auto 0;width:100%;min-height:100%;will-change:transform,opacity;backface-visibility:hidden}
.cfg-page.cfg-enter,.cfg-page.cfg-enter-back{z-index:2;background:var(--panel);box-shadow:-12px 0 32px rgba(0,0,0,.12)}
.cfg-page.cfg-leave,.cfg-page.cfg-leave-back{z-index:1}
.cfg-page.cfg-enter{animation:cfg-slide-in .4s cubic-bezier(.22,1,.36,1) both}
.cfg-page.cfg-leave{animation:cfg-slide-out .4s cubic-bezier(.22,1,.36,1) both}
.cfg-page.cfg-enter-back{animation:cfg-slide-back-in .4s cubic-bezier(.22,1,.36,1) both}
.cfg-page.cfg-leave-back{animation:cfg-slide-back-out .4s cubic-bezier(.22,1,.36,1) both}
@keyframes cfg-slide-in{from{transform:translate3d(100%,0,0);opacity:.88}to{transform:translate3d(0,0,0);opacity:1}}
@keyframes cfg-slide-out{from{transform:translate3d(0,0,0);opacity:1}to{transform:translate3d(-28%,0,0);opacity:.75}}
@keyframes cfg-slide-back-in{from{transform:translate3d(-28%,0,0);opacity:.75}to{transform:translate3d(0,0,0);opacity:1}}
@keyframes cfg-slide-back-out{from{transform:translate3d(0,0,0);opacity:1}to{transform:translate3d(100%,0,0);opacity:.88}}
@media(prefers-reduced-motion:reduce){.cfg-page.cfg-enter,.cfg-page.cfg-enter-back,.cfg-page.cfg-leave,.cfg-page.cfg-leave-back{animation:none!important;will-change:auto}}

/* Navegação geral: páginas deslizam, barra permanece estável */
@supports (view-transition-name: none){
  #bnav{view-transition-name:bl-navigation}
  ::view-transition-old(bl-navigation),::view-transition-new(bl-navigation){animation:none}
  html[data-nav-direction="forward"]::view-transition-old(root){animation:bl-page-out-left .4s cubic-bezier(.32,.72,0,1) both}
  html[data-nav-direction="forward"]::view-transition-new(root){animation:bl-page-in-right .4s cubic-bezier(.32,.72,0,1) both}
  html[data-nav-direction="back"]::view-transition-old(root){animation:bl-page-out-right .4s cubic-bezier(.32,.72,0,1) both}
  html[data-nav-direction="back"]::view-transition-new(root){animation:bl-page-in-left .4s cubic-bezier(.32,.72,0,1) both}
}
@keyframes bl-page-out-left{to{transform:translate3d(-100%,0,0)}}
@keyframes bl-page-in-right{from{transform:translate3d(100%,0,0)}}
@keyframes bl-page-out-right{to{transform:translate3d(100%,0,0)}}
@keyframes bl-page-in-left{from{transform:translate3d(-100%,0,0)}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* Layout estrutural: Ajustes substitui o conteúdo, nunca cobre outra tela */
body.cfg-open{overflow:auto}
body.cfg-open>main,body.cfg-open>footer,body.cfg-open>.topbar{display:none!important}
.cfg-screen{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;z-index:auto!important;overflow:visible!important;min-height:100dvh;padding-bottom:calc(96px + env(safe-area-inset-bottom));background:#10111c}
html.claro .cfg-screen{background:#f4f5fa}
.cfg-shell{min-height:calc(100dvh - 96px);background:inherit}
.cfg-head{background:inherit}
.cfg-pages{background:inherit}
.cfg-page{background:inherit;opacity:1!important}
.cfg-page.cfg-enter,.cfg-page.cfg-enter-back{background:inherit;box-shadow:none}
@media(min-width:900px){.cfg-screen{padding-left:84px}}
/* Cinco posições estáveis: Mural, Usuários, Publicar, Ajustes, Conta */
@media(max-width:899px){
 .bnav{grid-template-columns:none!important}
}
.usr-screen-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px}
.usr-screen-head h1{font-size:21px;margin:0}
.usr-screen-head #msgBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 13px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font:600 13px var(--display);cursor:pointer}
.usr-screen-head #msgBtn[hidden]{display:none!important}
.usr-screen-head #msgBtn svg{width:19px;height:19px}
.usr-screen-head #msgBtn .bn-n{font-size:11px}
@media(max-width:400px){.usr-screen-head #msgBtn{padding:8px 10px;font-size:12px}}
/* Sem transparência entre páginas */
@keyframes bl-page-out-left{to{transform:translate3d(-100%,0,0)}}
@keyframes bl-page-in-right{from{transform:translate3d(100%,0,0)}}
@keyframes bl-page-out-right{to{transform:translate3d(100%,0,0)}}
@keyframes bl-page-in-left{from{transform:translate3d(-100%,0,0)}}

/* Estrutura de telas independentes: somente a tela ativa ocupa o documento */
.bl-page[hidden]{display:none!important}
.bl-page{display:block;position:relative;min-width:0;width:100%;min-height:calc(100dvh - 120px);background:var(--bg,#10111c)}
main[data-active-page="configuracoes"]{max-width:none!important;padding:0!important;width:100%!important}
body.cfg-open>main{display:block!important}
body.cfg-open main>.bl-page:not([data-page="configuracoes"]){display:none!important}
main>.cfg-screen.bl-page{width:100%;max-width:none!important;min-height:100dvh}
main>.cfg-screen.bl-page .cfg-shell{max-width:680px}
@media(min-width:900px){main>.cfg-screen.bl-page{padding-left:0}}
@media(prefers-reduced-motion:no-preference){
  html[data-nav-direction]::view-transition-old(root),
  html[data-nav-direction]::view-transition-new(root){opacity:1!important}
}

/* Ajustes: uma única subpágina por vez, sem conteúdo residual */
.cfg-pages{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100dvh - 170px)}
.cfg-pages>.cfg-page{position:relative!important;inset:auto!important;width:100%!important;transform:none;opacity:1;z-index:auto!important;min-height:100%;background:var(--panel)}
.cfg-pages>.cfg-page[hidden]{display:none!important}
.cfg-page.cfg-enter,.cfg-page.cfg-leave,.cfg-page.cfg-enter-back,.cfg-page.cfg-leave-back{animation:none!important}

/* Ajustes compacto: sem faixa clara no topo, cabeçalho só nas subpáginas */
.cfg-head[hidden],.cfg-back[hidden]{display:none!important}
main>.cfg-screen.bl-page{padding-top:0!important}
.cfg-shell{background:var(--bg)!important}
.cfg-head{position:relative;top:auto;min-height:54px;padding:7px 16px!important;background:var(--bg)!important;border-bottom:0!important}
.cfg-head h1{font-size:18px}
.cfg-pages{min-height:calc(100dvh - 110px)}
.cfg-pages>.cfg-page{background:var(--bg)!important}
.cfg-list{background:transparent}
.cfg-section{padding-top:12px}
.cfg-profile{padding-top:20px}
@media(max-width:600px){.cfg-head{padding:6px 12px!important}.cfg-section{padding-top:10px}}

/* Cabeçalho de perfil de Ajustes, centralizado como referência móvel */
#cfgHome .cfg-profile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px 18px 28px;border-bottom:0;background:transparent}
#cfgHome .cfg-avatar{width:112px;height:112px;font-size:42px;border-radius:50%;margin:0 auto;flex:none}
#cfgHome .cfg-profile>div:last-child{width:100%;min-width:0}
#cfgHome .cfg-profile strong{font-size:25px;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
#cfgHome .cfg-profile small{margin-top:7px;font-size:15px;line-height:1.4;overflow-wrap:anywhere}
#cfgHome .cfg-list{padding-top:0}
@media(min-width:601px){#cfgHome .cfg-profile{padding-top:32px;padding-bottom:32px}#cfgHome .cfg-avatar{width:124px;height:124px}}

/* O gradiente fixo global do topo cobria a foto e o botão Voltar. */
body.cfg-open::before{display:none!important;content:none!important}
#cfgScreen .cfg-head:not([hidden]){display:flex!important;visibility:visible;opacity:1;position:relative;z-index:3}
#cfgScreen .cfg-back:not([hidden]){display:inline-flex!important;align-items:center;justify-content:center;visibility:visible;opacity:1}
#cfgScreen .cfg-head[hidden],#cfgScreen .cfg-back[hidden]{display:none!important}

/* Cabeçalho persistente somente nas subpáginas de Ajustes.
   Fixed evita o corte causado pelos ancestrais com overflow:hidden. */
body.cfg-open #cfgScreen #cfgHeader:not([hidden]){
  position:fixed!important;
  top:0!important;
  left:0;
  right:0;
  width:100%;
  z-index:28!important;
  min-height:56px;
  background:var(--bg)!important;
  border-bottom:1px solid var(--line)!important;
  padding-top:env(safe-area-inset-top)!important;
}
body.cfg-open #cfgScreen:has(#cfgHeader:not([hidden])) #cfgPages{
  padding-top:calc(56px + env(safe-area-inset-top));
}
@media(min-width:900px){
  body.cfg-open #cfgScreen #cfgHeader:not([hidden]){
    left:84px;
    width:calc(100% - 84px);
  }
}

/* Desktop: restaurar o fluxo e a aparência anteriores à divisão das telas.
   Os wrappers não interferem no grid nem nos espaçamentos do main. */
@media(min-width:900px){
  main>.bl-page:not([hidden]):not(.cfg-screen){display:contents!important}
  main>.bl-page[hidden]{display:none!important}
  main[data-active-page="configuracoes"]>.bl-page:not(.cfg-screen){display:none!important}
  body.cfg-open main>.cfg-screen.bl-page{display:block!important;position:relative!important;background:var(--bg)!important}
  body.cfg-open main>.cfg-screen.bl-page .cfg-shell{margin:0 auto!important}
  body.cfg-open #cfgScreen #cfgHeader:not([hidden]){position:sticky!important;top:0!important;left:auto!important;width:100%!important}
  body.cfg-open #cfgScreen:has(#cfgHeader:not([hidden])) #cfgPages{padding-top:0!important}
  .cfg-screen,.cfg-page,.cfg-head{animation:none!important;transition:none!important}
  .cfg-page{transform:none!important}
  html[data-nav-direction]::view-transition-old(root),
  html[data-nav-direction]::view-transition-new(root){animation:none!important}
}
/* Sem animações entre opções de Ajustes em qualquer tamanho */
#cfgScreen .cfg-page,#cfgScreen .cfg-head{animation:none!important;transition:none!important}

/* Rolagem natural: somente quando o conteúdo ultrapassa a área disponível. */
body.cfg-open{overflow-y:auto}
body.cfg-open main>.cfg-screen.bl-page{min-height:0!important;height:auto!important}
body.cfg-open #cfgScreen .cfg-shell{min-height:0!important;height:auto!important}
body.cfg-open #cfgScreen #cfgPages{min-height:0!important;height:auto!important}
body.cfg-open #cfgScreen .cfg-page:not([hidden]){min-height:0!important;height:auto!important}
@media(min-width:900px){
  /* No PC, filtros do Mural acompanham a rolagem normal. */
  .toolbar.fixa{position:static!important;top:auto!important;z-index:auto!important;animation:none!important;transform:none!important;background:transparent!important;border-bottom:0!important}
  body.barra-fixa .toolbar{position:static!important}
  body.cfg-open #cfgScreen #cfgHeader:not([hidden]){position:sticky!important}
}

/* Ajustes: remover as duas reservas de rodapé somadas (body + tela).
   A barra de navegação é fixa e não precisa aumentar a altura do documento. */
body.cfg-open{padding-bottom:0!important;min-height:100dvh;overflow-y:auto!important}
body.cfg-open>main{flex:0 0 auto!important;min-height:0!important;padding-bottom:0!important}
body.cfg-open main>.cfg-screen.bl-page{
  padding-bottom:0!important;
  margin-bottom:0!important;
  min-height:0!important;
  height:auto!important;
}
body.cfg-open #cfgScreen .cfg-shell,
body.cfg-open #cfgScreen #cfgPages,
body.cfg-open #cfgScreen .cfg-page:not([hidden]){
  min-height:0!important;
  height:auto!important;
  padding-bottom:0;
}

/* Lista longa de Fontes: respiro mínimo no fim, sem rolagem vazia. */
@media(max-width:899px){
  body.cfg-open #cfgScreen #cfgFontPage:not([hidden]){
    padding-bottom:calc(20px + env(safe-area-inset-bottom))!important;
    scroll-margin-bottom:20px;
  }
  body.cfg-open #cfgScreen #cfgFontPage:not([hidden]) #cfgFontes{
    scroll-padding-bottom:20px;
  }
}

/* Seletor de fontes: rótulos e geometria não herdam a fonte escolhida. */
#cfgFontPage .cfg-section>h2,
#cfgFontes [data-cfg-fonte],
#cfgFontes [data-cfg-fonte]>span{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:15px;
  font-weight:500;
  letter-spacing:normal;
  line-height:1.4;
}
#cfgFontes [data-cfg-fonte]{
  min-height:62px;
  box-sizing:border-box;
}
#cfgFontes [data-cfg-fonte]>span{
  min-width:0;
}
#cfgFontes [data-cfg-fonte]>small{
  flex:0 0 auto;
  font-size:13px;
  line-height:1.4;
  white-space:nowrap;
}
#cfgFontes [data-cfg-fonte="padrao"]>small{
  font-family:Arial,Helvetica,sans-serif!important;
}