/* ==========================================================================
   Protótipo V3 · componentes corretos
   Todos os componentes vêm do design system (../design-system/tokens.css + components.css + components.js).
   Este CSS tem só o que NÃO é componente do DS e usa SOMENTE variáveis do tokens.css:
     · moldura do protótipo (faixa de cima e quadro de celular): não é produto
     · layout das telas (grades e colunas)
     · itens sem componente no DS (prefixo x-): estão listados no relatório
   Breakpoints (container query não aceita variável): 960 = --bp-desktop · 1280 = --bp-wide
   ========================================================================== */

/* Moldura do celular do protótipo: as únicas medidas literais do arquivo (não é produto) */
:root{--frame-w:390px;--frame-h:844px}
/* Fundo da comunidade: neutro 950 (16/out/2026). No DS o --bg-canvas segue em gray-900; só a comunidade escurece. */
:root{--bg-canvas:var(--gray-950);--bg-surface:var(--gray-900)}

*,::before,::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{height:100%}
body{display:flex;flex-direction:column;overflow:hidden;background:var(--bg-canvas);color:var(--text-primary);font-family:var(--font-corpo);font-size:var(--font-size-16);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);-webkit-font-smoothing:antialiased}
button{font-family:inherit;color:inherit}
a{color:inherit}
small{font-size:var(--font-size-12)}

/* ---------- moldura do protótipo ---------- */
#strip{flex:none;display:flex;align-items:center;gap:var(--space-4);padding:var(--space-1) var(--space-4);min-height:var(--size-control-sm);background:var(--gray-950);border-bottom:var(--stroke-hairline) solid var(--border-default);font-size:var(--font-size-14);color:var(--text-secondary);overflow-x:auto;white-space:nowrap;scrollbar-width:none;z-index:var(--z-sticky)}
#strip::-webkit-scrollbar{display:none}
.x-nostrip #strip{display:none}
#strip .x-strip__lb{font-weight:var(--font-weight-bold);color:var(--text-primary)}
#sc{color:var(--text-tertiary);font-size:var(--font-size-12)}
@media(max-width:960px){#dvw,#sc{display:none}}
/* barra única de admin (#strip): título, perfis, Controles (dropdown) e Voltar para o WordPress */
#strip .x-strip__lb--soft{font-weight:var(--font-weight-regular);color:var(--text-secondary)}
.x-strip__sep{align-self:stretch;width:var(--stroke-hairline);margin-block:var(--space-1);background:var(--border-default)}
.x-strip__fill{flex:1}
.x-admgrp{display:inline-flex;align-items:center;gap:var(--space-2)}
.x-admctl__btn{height:auto;min-height:0;padding:var(--space-1) var(--space-3);gap:var(--space-2);font-size:var(--font-size-14)}
.x-admctl__menu{display:none;min-width:320px}
.x-admctl__menu:popover-open,.bs-dropdown.is-open>.x-admctl__menu{display:flex;flex-direction:column;gap:var(--space-4)}
.x-admctl__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.x-admctl__lb{font-size:var(--font-size-14);color:var(--text-secondary)}
.x-admctl__btns{display:flex;gap:var(--space-2);flex-wrap:wrap}
.x-devwrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg-canvas)}
.x-phone{width:100%;height:100%;position:relative}
.x-stage{position:relative;width:100%;height:100%;display:flex;flex-direction:column;container-type:inline-size;container-name:stage;background:var(--bg-canvas);overflow:hidden}
.x-devwrap.is-mob{padding:var(--space-4);background:var(--gray-950)}
.x-devwrap.is-mob .x-phone{width:var(--frame-w);height:var(--frame-h);flex:none;transform-origin:center center;border-radius:var(--radius-2xl);box-shadow:0 0 0 var(--stroke-thick) var(--bg-surface-raised),var(--shadow-xl)}
.x-devwrap.is-mob .x-stage{border-radius:var(--radius-2xl)}
.bs-modal.x-in-frame{margin-inline:auto;border-radius:var(--radius-2xl) var(--radius-2xl) 0 0}
.bs-modal.x-in-frame.bs-modal--full{border-radius:var(--radius-2xl)}
/* modo Celular do protótipo: o menu do dropdown vira bottom sheet dentro do quadro (a janela tem mais de 960px, então o DS abriria ancorado) */
.bs-dropdown__menu.x-dd-frame:popover-open::backdrop{background:var(--bg-scrim);animation:bs-fade-in var(--duration-slow) var(--ease-enter)}
.bs-modal.x-in-frame[open]{animation-name:bs-sheet-in}

/* ---------- estrutura do app ---------- */
#app{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
#mainc{position:relative;flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.x-totop[hidden]{display:none}
.x-totop{position:absolute;right:var(--space-5);bottom:var(--space-5);z-index:var(--z-controls);box-shadow:var(--shadow-lg)}
#scroll{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none}
/* a barra de rolagem do DS ocupa espaço só do lado direito: reserva o mesmo espaço dos dois lados para as margens ficarem iguais */
#scroll:not(.x-scroll--fill){scrollbar-gutter:stable both-edges}
/* no celular o topo reserva o mesmo espaço, para o logo e o avatar alinharem com as margens do conteúdo */
#top{overflow:hidden;scrollbar-gutter:stable both-edges;transition:margin-top var(--duration-slow) var(--ease-standard)}
/* celular: o topo some ao rolar para baixo e volta ao rolar para cima */
#top.is-away{margin-top:calc(var(--layout-topbar) * -1)}   /* celular: some ao rolar para baixo e volta ao rolar para cima */
#top .bs-action-pill{padding:0;background:none;box-shadow:none}   /* a pílula só existe no desktop; no celular os ícones ficam soltos na barra */
@media (prefers-reduced-motion:reduce){#top{transition:none}}
#scroll.x-scroll--fill{overflow:hidden;display:flex;flex-direction:column}
#scroll.x-scroll--fill>#view{flex:1;min-height:0;display:flex;flex-direction:column}
#side{display:none}
#tabs{position:absolute;left:0;right:0;bottom:0;z-index:var(--z-sticky);padding:0 var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom,0px));pointer-events:none}
#tabs .bs-tabbar{pointer-events:auto}
.x-ler-tabs{margin-bottom:var(--space-5)}
#scroll{padding-bottom:calc(var(--size-tab-item) + var(--space-5) * 3)}
#top{flex:none;height:var(--layout-topbar);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-5);background:var(--bg-canvas);position:relative;z-index:var(--z-sticky)}
.x-top-title{display:none;font-size:var(--font-size-20);font-weight:var(--font-weight-bold)}
@container stage (min-width:960px){
  #app{flex-direction:row}
  #tabs{display:none}
  .x-ler-tabs{display:none}
  #top{padding:0 var(--space-7);overflow:visible;scrollbar-gutter:auto}
  #top.is-away{margin-top:0}
  .x-top-title{display:block;padding-left:var(--space-5);margin-left:var(--space-2);border-left:var(--stroke-hairline) solid var(--border-default);line-height:var(--size-icon-lg)}
  #side{display:block;flex:none;overflow-y:auto;padding:var(--space-4) 0 var(--space-4) var(--space-4)}
  #side .bs-sidebar{min-height:100%}
  #scroll{padding-bottom:0;padding-top:var(--layout-topbar)}
  #top .bs-action-pill{padding:var(--space-2);background:var(--bg-surface);box-shadow:var(--shadow-lg)}
  #top{position:absolute;top:var(--space-4);right:var(--space-7);height:auto;padding:0;background:none;pointer-events:none}
  #top>*{pointer-events:auto}
  #top .bs-logo,.x-top-title,#top .x-grow{display:none}
  .x-th-bk{display:none}
  .bs-toast-region{bottom:var(--space-5)}
}
.bs-toast-region{bottom:calc(var(--size-tab-item) + var(--space-5) * 3)}
[popover].bs-toast-region{inset:auto auto var(--space-5) 50%;margin:0;padding:0;border:0;background:transparent;overflow:visible;width:auto;height:auto;color:inherit}

/* ---------- utilitários (só tokens) ---------- */
.x-row{display:flex;align-items:center;gap:var(--space-4)}
.x-row--tight{gap:var(--space-3)}
.x-row--lg{gap:var(--space-5)}
.x-row--wrap{flex-wrap:wrap;gap:var(--space-3)}
.x-row--between{justify-content:space-between;flex-wrap:wrap}
.x-row--center{justify-content:center}
.x-col{display:flex;flex-direction:column;gap:var(--space-3)}
.x-col--start{align-items:flex-start}
.x-col-lg{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}
.x-grow{flex:1;min-width:0}
.x-block{display:block}
.x-center{text-align:center}
.x-ml-auto{margin-left:auto}
.x-muted{color:var(--text-secondary)}
.x-dim{color:var(--text-tertiary)}
.x-strong{color:var(--text-primary)}
.x-sm{font-size:var(--font-size-14)}
.x-lead{font-size:var(--font-size-18);font-weight:var(--font-weight-bold);color:var(--text-primary)}
.x-medium{font-weight:var(--font-weight-medium)}
.x-ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.x-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.x-link{color:var(--text-brand);text-decoration:none}
.x-reset{border:0;text-align:left;font:inherit;color:inherit;width:100%;cursor:pointer}
.x-static{cursor:default}
.x-mt-2{margin-top:var(--space-2)}.x-mt-3{margin-top:var(--space-3)}.x-mt-4{margin-top:var(--space-4)}.x-mt-5{margin-top:var(--space-5)}.x-mt-6{margin-top:var(--space-6)}
.x-mb-2{margin-bottom:var(--space-2)}.x-mb-3{margin-bottom:var(--space-3)}.x-mb-4{margin-bottom:var(--space-4)}.x-mb-5{margin-bottom:var(--space-5)}.x-mb-6{margin-bottom:var(--space-6)}
.x-my-3{margin-block:var(--space-3)}.x-my-4{margin-block:var(--space-4)}.x-my-5{margin-block:var(--space-5)}
.x-h1{font-size:var(--font-size-24);font-weight:var(--font-weight-black);line-height:var(--line-height-snug)}
.x-h2{font-size:var(--font-size-20);font-weight:var(--font-weight-bold);line-height:var(--line-height-snug)}
.x-h3{font-size:var(--font-size-16);font-weight:var(--font-weight-bold)}
.x-h4{font-size:var(--font-size-16);font-weight:var(--font-weight-bold)}
.x-over{font-size:var(--font-size-12);font-weight:var(--font-weight-bold);color:var(--text-tertiary);text-transform:uppercase}
.x-ul{margin-left:var(--space-5)}
.x-ul li{margin-block:var(--space-2)}
.x-tags{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.x-tags--center{justify-content:center}
.x-form{display:flex;flex-direction:column;gap:var(--space-5)}
.x-span-all,.x-span2{grid-column:1/-1}
.x-ic--xs{font-size:var(--size-icon-xs)}.x-ic--sm{font-size:var(--size-icon-sm)}.x-ic--lg{font-size:var(--size-icon-lg)}.x-ic--xl{font-size:var(--size-avatar-sm)}.x-ic--xxl{font-size:var(--size-avatar-md)}
.x-mx-auto{margin-inline:auto}
.x-logo-ic{width:var(--size-icon-md);height:var(--size-icon-md);flex:none}

/* ---------- textos de apoio, avisos e estados ---------- */
.x-note{background:var(--bg-surface-raised);border-radius:var(--radius-md);padding:var(--space-4);color:var(--text-secondary);font-size:var(--font-size-14);line-height:var(--line-height-normal)}
.x-notice{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-start;margin-top:var(--space-5);padding:var(--space-5);border-radius:var(--radius-lg);background:var(--status-warning-bg)}
.x-notice>.bs-icon{color:var(--text-warning)}
.x-notice p{flex:1;min-width:var(--size-profile-card-min)}
.x-notice--flush{margin-top:0;margin-bottom:var(--space-5)}
.x-lock{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.x-lock p{color:var(--text-secondary)}
.x-empty{padding:var(--space-9) var(--space-6);text-align:center;color:var(--text-secondary);display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.x-empty>.bs-icon{color:var(--text-tertiary)}
.x-gate{max-width:var(--layout-sheet);margin:0 auto;padding:var(--space-10) var(--space-7);text-align:center}
.x-gate p{margin-bottom:var(--space-6)}
.x-gate .x-h2{margin-bottom:var(--space-3)}
.x-gate__icon{--bs-avatar-bg:var(--interactive-primary-subtle);--bs-avatar-color:var(--text-brand);margin-bottom:var(--space-5)}
.x-code{font-size:var(--font-size-32);font-weight:var(--font-weight-black);text-align:center;background:var(--interactive-primary-subtle);border-radius:var(--radius-lg);padding:var(--space-4);margin-block:var(--space-4);color:var(--text-brand)}
.x-sel>.x-w-xs{flex:none;width:var(--size-avatar-3xl)}
.x-w-sm{max-width:var(--size-profile-card-min)}
.x-w-md{max-width:calc(var(--size-profile-card-min) + var(--size-avatar-xl))}
.x-sel{display:flex;gap:var(--space-3)}
.x-sel>.x-dd{flex:1;min-width:0}
.x-ta--sm{min-height:var(--size-avatar-2xl)}
.x-fake{text-overflow:ellipsis}
.x-cat-fetiche{--bs-cat:var(--fetiche)}

/* ---------- larguras de conteúdo ---------- */
.bs-container.x-wrap--top{padding-bottom:0}   /* largura e recuo vêm do Container do DS */

/* ---------- mural ---------- */
.x-mural{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-7)}
.x-widgets{display:none;flex-direction:column;gap:var(--space-5)}
@container stage (min-width:960px){.bs-container{--bs-rail-bleed:0px}}   /* no protótipo em moldura, a largura do palco decide (a media query do DS vale na página real) */
@container stage (min-width:1280px){.x-mural{grid-template-columns:minmax(0,2fr) minmax(0,1fr);justify-content:center}.x-widgets{display:flex}}
.x-feed{display:flex;flex-direction:column;gap:var(--space-6)}
/* vaga livre do Top 10: silhueta do anônimo apagada */
.x-vaga{cursor:default}
.x-vaga .bs-avatar{--bs-avatar-bg:var(--bg-surface);--bs-avatar-color:var(--bg-surface-overlay)}
.x-vaga .bs-rail__label{color:var(--text-tertiary)}
.x-compose{display:flex;align-items:center;gap:var(--space-4)}
.x-fake{flex:1;display:flex;align-items:center;min-width:0;white-space:nowrap;overflow:hidden;color:var(--text-tertiary);cursor:pointer}
.x-act{display:flex;align-items:flex-start;gap:var(--space-3);width:100%;padding:var(--space-3) 0;background:none;border:0;text-align:left;color:inherit;font-size:var(--font-size-14);cursor:pointer}
.x-act{padding-inline:var(--space-3);margin-inline:calc(var(--space-3)*-1);width:calc(100% + var(--space-3)*2);border-radius:var(--radius-md);transition:background var(--transition-default)}
.x-act:hover{background:var(--bg-surface-raised)}
.x-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-4)}
.x-stat{background:var(--bg-surface-raised);border-radius:var(--radius-md);padding:var(--space-4)}
.x-stat b{display:block;font-size:var(--font-size-24);font-weight:var(--font-weight-black);line-height:var(--line-height-tight)}
.x-stat span{font-size:var(--font-size-12);color:var(--text-secondary)}
.x-stat.is-brand b{color:var(--text-brand)}
.bs-post.is-flash,.bs-comment.is-flash{animation:x-flash var(--duration-ambient) var(--ease-enter)}
@keyframes x-flash{0%,65%{box-shadow:inset 0 0 0 100vmax color-mix(in srgb,var(--text-brand) 16%,transparent)}100%{box-shadow:inset 0 0 0 100vmax transparent}}   /* destaque ao chegar por link: preenchimento rosa bem transparente que some (13/nov/2026; antes era contorno grosso) */
.x-thumbs{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.x-thumb{width:var(--size-avatar-xl)}

/* ---------- perfis ---------- */
.x-pftop{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-6)}
.x-pc-initial{display:grid;place-items:center;width:100%;height:100%;font-size:var(--font-size-48);font-weight:var(--font-weight-black);color:var(--text-on-image)}
.x-vpv{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-5);background:var(--bg-surface);border-radius:var(--radius-lg);font-size:var(--font-size-14);color:var(--text-secondary)}
.x-vpv .x-dd{flex:1;min-width:var(--size-profile-card-min)}

/* ---------- perfil ---------- */
/* Perfil: o cabeçalho é o bs-profile-hero e os números são bs-stat (design system). Aqui só a ordem e a grade. */
.x-pf{container:pf / inline-size}
.x-pf-flow{display:flex;flex-direction:column;gap:var(--space-5)}
.x-pf-tabs{position:relative;z-index:var(--z-raised);margin-top:calc(var(--size-control-lg) * -1)}
.x-pf-body{display:flex;flex-direction:column;gap:var(--space-5)}
.x-pf-nums.is-off{display:none}
@container pf (min-width:640px){
  .x-pf-flow{margin-top:var(--space-5)}
  .x-pf-nums.is-off{display:block}
  .x-pf-nums{order:1}
  .x-pf-tabs{order:2;margin-top:0}
  .x-pf-body{order:3}
}
.x-actg.bs-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.x-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--layout-sheet) * 0.6),1fr));gap:var(--space-5)}
.x-arq{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--size-profile-card-min),1fr));gap:var(--space-5);align-items:center}
.x-qa{margin-bottom:var(--space-4)}
.x-qa small{display:block}
.x-ckg{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--size-profile-card-min),1fr));column-gap:var(--space-6)}
.x-chk{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0}
.x-chk .bs-icon{color:var(--text-success)}
.x-chk.is-no{color:var(--text-secondary)}
.x-chk.is-no .bs-icon{color:var(--text-tertiary)}
.x-li{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:var(--stroke-hairline) solid var(--border-default)}
.x-li:last-child{border-bottom:0}
.x-hpl{background:none;min-height:var(--size-avatar-xl)}
.x-hl{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:var(--stroke-hairline) solid var(--border-default)}
.x-hl:last-of-type{border-bottom:0}
.x-hl b{color:var(--text-success);flex:none}
.x-ptbig{font-size:var(--font-size-40);font-weight:var(--font-weight-black);line-height:var(--line-height-tight);color:var(--text-brand)}
.x-lvbig{display:flex;align-items:center;gap:var(--space-5)}
.x-lvn{font-size:var(--font-size-32)}
.x-bdg{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--size-avatar-3xl),1fr));gap:var(--space-3)}
.x-bg1 .bs-card__body{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-4);text-align:center;font-size:var(--font-size-14)}
.x-bg1 .bs-icon{color:var(--text-brand)}
.x-bg1.is-off{opacity:var(--opacity-disabled)}
.x-fgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);align-items:start}
@container stage (min-width:960px){.x-fgrid--two{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.x-pg{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.x-ph2w{position:relative;min-width:0}
.x-ph2{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;border:0;border-radius:var(--radius-md);overflow:hidden;isolation:isolate;transform:translateZ(0);cursor:pointer;color:var(--text-on-image)}
.x-ph2__oc{position:absolute;top:var(--space-2);left:var(--space-2)}
.x-ph2__lc{position:absolute;inset:0;border-radius:inherit;display:grid;place-items:center;backdrop-filter:blur(var(--blur-photo-locked));-webkit-backdrop-filter:blur(var(--blur-photo-locked));background:var(--bg-on-image);color:var(--white)}
.x-ph2__menu{position:absolute;top:var(--space-2);right:var(--space-2);z-index:var(--z-controls)}
.bs-modal.x-viewer{background:var(--black);position:relative}
.x-pv-h{position:absolute;top:0;left:0;right:0;z-index:var(--z-controls);display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4) var(--space-7) var(--space-5);background:linear-gradient(var(--bg-on-image),transparent)}
.x-pv-c{font-weight:var(--font-weight-bold)}
.x-pv-t{flex:1;min-height:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.x-pv-t::-webkit-scrollbar{display:none}
.x-pv-s{position:relative;flex:none;width:100%;height:100%;scroll-snap-align:center;display:grid;place-items:center;color:var(--text-on-image)}
.x-pv-n{position:absolute;top:50%;transform:translateY(-50%);z-index:var(--z-controls)}
.x-pv-n--l{left:var(--space-4)}.x-pv-n--r{right:var(--space-4)}
.x-pv-oc{position:absolute;top:var(--space-11);left:var(--space-5)}

/* ---------- editor ---------- */
.x-ed-h{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.x-ed-foot{display:flex;gap:var(--space-3);justify-content:flex-end;padding-top:var(--space-8)}   /* celular: 32px entre o conteúdo e os botões */
/* Criar/editar perfil: celular = abas + card; desktop = tela cheia (sem sidebar nem topo). O Stepper e a barra de ações ficam fora da rolagem (só o miolo rola, sem efeito de bounce nos fixos) */
.x-wiz-steps,.x-wiz-h,.x-wiz-prog{display:none}
.x-fld-row{display:flex;flex-wrap:wrap;gap:var(--space-5)}
.x-pigg--one{grid-template-columns:1fr;gap:var(--space-4)}
#app.x-wizard #tabs{display:none}   /* criar e editar perfil: sem a barra de abas do app, no celular */
#app.x-wizard #scroll{padding-bottom:0;padding-top:0}
#app.x-wizard #top{display:none}   /* criar perfil: sem o cabeçalho do app também no celular (só o X e o Voltar do próprio cadastro saem do fluxo) */
.x-wiz-split{display:flex;flex-direction:column;gap:var(--space-5)}
.x-ed-foot{flex-wrap:wrap}
.x-wiz-bar:has(.x-ed-foot:empty){display:none}
.x-ed-foot .bs-btn{flex:1}   /* celular: Voltar e Continuar lado a lado, cada um com metade da largura */
.x-wiz-legal{flex:1 0 100%;margin:0 0 var(--space-3);color:var(--text-secondary)}
.x-wiz-legal p{margin:0}
.x-wiz-tabs .bs-tabs{margin-inline:calc(var(--bs-rail-bleed,0px)*-1);padding-inline:var(--bs-rail-bleed,0px);scroll-padding-inline:var(--bs-rail-bleed,0px)}   /* as abas vão até a borda da tela */
@container stage (min-width:960px){
  #app.x-wizard #side,#app.x-wizard #top{display:none}
  #app.x-wizard #scroll{padding-top:0;overflow:hidden}
  #app.x-wizard #view{height:100%}
  .x-wiz.bs-container{max-width:none;padding:0;display:flex;flex-direction:column;height:100%}
  .x-wiz .x-ed-h{flex:none;margin:0;padding:var(--space-5) var(--space-9)}
  .x-wiz-sub,.x-wiz-tabs{display:none}
  .x-wiz-main{display:flex;flex:1;min-height:0}
  .x-wiz-steps{display:block;flex:none;width:var(--layout-sidebar);padding:var(--space-8) 0 0 var(--space-10)}
  .x-wiz-scroll{flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-5) var(--layout-sidebar) var(--space-8) 0}
  .x-wiz-col{max-width:var(--layout-form);margin:0 auto}
  .x-wiz--split .x-wiz-scroll{padding-right:var(--space-10)}
  .x-wiz--claim .x-wiz-scroll{padding-inline:var(--space-10)}
  .x-wiz--split .x-wiz-col{max-width:var(--layout-content)}
  .x-wiz-split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--space-9);align-items:start}
  .x-wiz-split__side--stick{position:sticky;top:0}
  .x-wiz-h{display:block;margin-bottom:var(--space-5)}
  .x-wiz-bar{flex:none;background:var(--bg-surface);border-top:var(--stroke-hairline) solid var(--border-default)}
  .x-wiz-prog{display:block}
  .x-wiz-bar .x-ed-foot{padding:var(--space-5) var(--space-10);flex-wrap:nowrap;align-items:center}
  .x-ed-foot .bs-btn{flex:none}
  .x-wiz-legal{flex:1;margin:0 var(--space-6) 0 0}
}
.x-av-blur>*{filter:blur(var(--space-3))}
.x-av-empty{--bs-avatar-bg:var(--bg-surface-raised);--bs-avatar-color:var(--text-tertiary)}
.x-pick{border:0;background:none;padding:0;display:flex;justify-content:center;cursor:pointer;border-radius:var(--radius-avatar-xl)}
.x-pick:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.x-pick.is-selected .bs-avatar{box-shadow:0 0 0 var(--stroke-thick) var(--border-focus)}
.x-up-lg{height:auto;flex-direction:column;padding:var(--space-8) var(--space-5);text-align:center}
.x-up-lg b{color:var(--text-primary);font-size:var(--font-size-16)}
.x-avg{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--size-avatar-xl),1fr));gap:var(--space-5)}
.x-prc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-3)}
.x-prc>.bs-filter{flex:1 1 auto}
.x-prc>.bs-filter:first-child{flex-grow:5}
.x-prc>.bs-filter:last-child{flex-grow:2}
.x-prc .bs-filter__item{flex:1 1 auto}
/* celular: as 5 opções de interesse ficam numa linha só, sem rolagem; desktop: opções à esquerda e "Já fiz" à direita */
@container stage (max-width:959.98px){.x-prc>.bs-filter:first-child{width:100%;overflow:visible}.x-prc .bs-filter__item{min-width:0;padding-inline:var(--space-3)}}
.x-est{display:flex;flex-direction:column;gap:var(--space-5)}
.x-est+.x-est{padding-top:var(--space-6);border-top:var(--stroke-hairline) solid var(--border-default)}
.x-arq-name{margin:var(--space-3) 0 var(--space-4);color:var(--text-brand);overflow-wrap:anywhere}
.x-prl{padding:var(--space-4) 0}
.x-pigg{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--layout-sheet) * 0.5),1fr));gap:var(--space-3)}

/* ---------- mensagens ---------- */
.x-dm{display:grid;grid-template-columns:minmax(0,1fr);height:100%;width:100%;max-width:var(--layout-content);margin:0 auto}
.x-dm-l{display:flex;flex-direction:column;gap:var(--space-4);overflow-y:auto;padding:var(--space-2) var(--space-5) var(--space-5)}
.x-dm.is-th .x-dm-l{display:none}
.x-dm:not(.is-th) .x-dm-r{display:none}
/* a conversa (bs-chat) só tem a moldura de contorno no desktop (exceção da regra 11, ver LEIA-ME); no celular é tela cheia, sem moldura */
.x-dm-r.bs-chat--framed{border:0;border-radius:0}
/* a dica de teclado segue a largura do palco (como o resto do layout), não a da janela: no modo Celular do protótipo a janela é larga */
@container stage (min-width:960px){.bs-chat__hint-desktop{display:inline}.bs-chat__hint-mobile{display:none}}
@container stage (max-width:959px){.bs-chat__hint-desktop{display:none}.bs-chat__hint-mobile{display:inline}}
@container stage (min-width:960px){
  .x-dm{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-7);padding:var(--space-2) var(--space-7) var(--space-7)}
  .x-dm.is-th .x-dm-l,.x-dm:not(.is-th) .x-dm-r{display:flex;flex-direction:column}
  .x-dm .x-dm-l{display:flex;padding:0}
  .x-dm-r.bs-chat--framed{border:var(--stroke-medium) solid var(--border-strong);border-radius:var(--radius-2xl)}
}
.x-nt{display:flex;align-items:flex-start;gap:var(--space-4);width:100%;padding:var(--space-4) 0;background:none;border:0;border-bottom:var(--stroke-hairline) solid var(--border-default);text-align:left;color:inherit;font:inherit;cursor:pointer}
.x-nt>.bs-icon{color:var(--text-brand)}
.x-nt.is-un{background:linear-gradient(90deg,var(--interactive-primary-subtle),transparent);margin-inline:calc(var(--space-6) * -1);padding-inline:var(--space-6);width:calc(100% + var(--space-6) * 2)}

/* ---------- match ---------- */
.x-mlock{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-8) 0;text-align:center}
.x-mlock__anim{display:grid;place-items:center;width:var(--size-avatar-2xl);height:var(--size-avatar-2xl);color:var(--text-brand)}
.x-mlock__anim svg{display:block;width:100%;height:100%}
.x-mlock__list{width:100%;margin-top:var(--space-4);text-align:left}
.x-mlock__title{font-size:var(--font-size-32);font-weight:var(--font-weight-black);line-height:var(--line-height-tight);text-wrap:balance}
.x-mlock__copy{font-size:var(--font-size-18);line-height:var(--line-height-normal);color:var(--text-secondary)}
.x-mlock__copy b{color:var(--text-primary);font-weight:var(--font-weight-bold)}
.x-mlock__q{width:100%;margin-top:var(--space-4);text-align:left}
.x-mc-ring{margin:0 auto}
.x-pct{font-size:var(--font-size-48);font-weight:var(--font-weight-black);line-height:var(--line-height-tight);margin-top:var(--space-5)}
.x-pct small{font-size:var(--font-size-18);font-weight:var(--font-weight-bold);color:var(--text-secondary)}
.x-why{margin-top:var(--space-6);text-align:left}
.x-why .x-h3{margin-bottom:var(--space-4)}
.x-timer{margin-top:var(--space-6);text-align:left}
.x-dg{font-size:var(--font-size-32);font-weight:var(--font-weight-black);font-variant-numeric:tabular-nums;margin-block:var(--space-2) var(--space-4)}
.x-blur{filter:blur(var(--blur-photo-locked));pointer-events:none;user-select:none}
.x-steps{text-align:left;margin:var(--space-6) 0}
.x-steps>div{display:flex;gap:var(--space-4);padding:var(--space-3) 0;align-items:center}

/* ---------- histórias ---------- */
.x-hhead{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:var(--page-head-gap);margin-bottom:var(--page-head-gap)}
/* Título de página padrão (Artigos, Histórias, Perfis, Hentais): mesmo tamanho, peso e posição */
/* Espaço padrão entre o título da página e o conteúdo (mesmo valor do Artigos: --space-5 no celular, --space-10 no desktop) */
.bs-container{--page-head-gap:var(--space-5)}   /* celular: igual ao espaço título→filtro do Artigos */
@container stage (min-width:960px){.bs-container{--page-head-gap:var(--space-10)}}
.x-page-title.x-page-gap{margin-bottom:var(--page-head-gap)}
.x-page-title{display:flex;align-items:center;min-height:var(--size-control-lg);margin:0;font-size:var(--font-size-32);line-height:var(--line-height-tight);font-weight:var(--font-weight-regular);letter-spacing:-.01em}
.x-hsub{margin:0}
@container stage (min-width:960px){
  .x-hhead{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t b" "s s";justify-items:stretch;align-items:center;column-gap:var(--space-4);row-gap:var(--space-2);margin-bottom:var(--page-head-gap)}
  .x-hh-t{grid-area:t}
  .x-page-title{font-size:var(--font-size-40)}
  .x-hh-b{grid-area:b}
  .x-hsub{grid-area:s}
}
/* botões que mudam de papel entre celular e desktop (ex.: compartilhar história) */
.bs-btn.x-desk-only{display:none}
@container stage (min-width:960px){.bs-btn.x-desk-only{display:inline-flex}.bs-btn.x-mob-only{display:none}}
/* no quadro do modo Celular o grupo de botões segue o layout de celular do DS */
.bs-modal.x-in-frame .bs-actions{flex-direction:column-reverse;align-items:stretch}
.bs-modal.x-in-frame .bs-actions>.bs-btn{width:100%}
/* celular: as duas tabs ocupam 50% cada */
@container stage (max-width:959.98px){.x-tabs-fill .bs-tabs__item{flex:1 1 0;min-width:0}}
.x-hfil{display:flex;flex-direction:column;gap:var(--space-4);margin:var(--space-6) 0 var(--space-5)}
.x-st-t{font-size:var(--font-size-32)}
.x-hqa{margin-top:var(--space-8)}
.x-hqa .x-h4{font-size:var(--font-size-18);color:var(--text-brand);margin-bottom:var(--space-2)}
.x-hqa p{line-height:var(--line-height-relaxed)}
.x-hact{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.x-hshare{background:linear-gradient(145deg,var(--purple-800),var(--purple-950));aspect-ratio:1;max-width:calc(var(--layout-sheet) * 0.62);margin:0 auto;border-radius:var(--radius-xl);padding:var(--space-7);display:flex;flex-direction:column;justify-content:space-between;color:var(--white)}
.x-hs-l{font-weight:var(--font-weight-black)}
.x-hs-l b{color:var(--text-brand)}
.x-hs-q{font-size:var(--font-size-20);font-weight:var(--font-weight-bold);line-height:var(--line-height-snug)}
.x-hsave{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-12);color:var(--text-success);margin:var(--space-3) var(--space-1)}
.x-hrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--layout-sheet) * 0.45),1fr));gap:var(--space-4)}
.x-hq-h{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
.x-hq-t{flex:1;min-width:var(--size-profile-card-min);font-weight:var(--font-weight-bold)}
.x-hq-t em{color:var(--text-brand);font-style:normal}
.x-swr{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:var(--space-4) 0;border-bottom:var(--stroke-hairline) solid var(--border-default)}
.x-swr>div{flex:1;min-width:0}
.x-swr:last-child{border-bottom:0}
.x-hbtns{margin-top:var(--space-5)}
.x-hf .bs-dropdown__trigger{cursor:pointer}

/* Perfil para visitante deslogado: só a metade de cima, borrada e sumindo em degradê; o convite fica nítido logo abaixo */
.x-pf--locked .bs-profile-hero__photo,.x-pf--locked .bs-profile-hero__avatar>.bs-avatar,.x-pf--locked .bs-profile-hero__meta,.x-pf--locked .bs-profile-hero__tags,.x-pf--locked .x-pf-nums,.x-pf--locked .x-pf-body{filter:blur(var(--blur-photo-locked));pointer-events:none;user-select:none}
.x-pf--locked .bs-profile-hero__photo{transform:scale(1.2)}
.x-pf--locked .x-pf-flow{max-height:calc(var(--size-avatar-3xl) * 4);overflow:hidden;-webkit-mask-image:linear-gradient(var(--black) 40%,transparent);mask-image:linear-gradient(var(--black) 40%,transparent)}
.x-pf-lockcta{position:relative;z-index:var(--z-overlap);margin-top:calc(var(--space-9) * -1);text-align:center}
.x-pf-lockcta .x-lock{align-items:center}
.x-pf-lockcta .x-row{justify-content:center}

/* título de card com ícone grande: ícone e texto na mesma linha, alinhados ao centro */
.x-ttl{display:flex;align-items:center;gap:var(--space-3)}
/* galeria de fotos do perfil: 2 por linha no celular */
@container stage (max-width:959.98px){.x-pg{grid-template-columns:repeat(2,1fr)}}
.x-li--now{background:var(--interactive-primary-subtle);border-radius:var(--radius-sm);border-bottom-color:transparent;padding-inline:var(--space-3);margin-inline:calc(var(--space-3) * -1)}
/* o DS zera a margem de p dentro do corpo do card (.bs-card__body > p); estas duas dão espaço de volta onde o texto precisa respirar */
.bs-card__body > p.x-gap-after,.bs-card__body > p.x-p-bot{margin-bottom:var(--space-6)}
.bs-card__body > p.x-p-top{margin-top:var(--space-4)}

/* Central de ajuda: card de categoria é um botão (Card interativo) */
.x-help-cat{border:0;font:inherit;text-align:left;width:100%;cursor:pointer}
.x-help-cat .bs-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);height:100%}
/* aviso de match na lista de Perfis: espaço até a grade */
.x-pfalert{margin-bottom:var(--space-6)}

/* Celular (a largura do quadro, não da janela): o Container do DS usa @media, então no modo Celular do protótipo dentro de uma janela larga ele zerava a sangria; aqui a sangria vale pela largura do quadro */
@container stage (max-width:959.98px){
  .bs-container{--bs-rail-bleed:var(--space-5)}
  /* foto do perfil de ponta a ponta: passa também pelo espaço que a barra de rolagem reserva (--sbw), mantendo o texto alinhado com o resto da página */
  .bs-profile-hero__frame{margin-inline:calc((var(--space-5) + var(--sbw,0px)) * -1);padding-inline:calc(var(--space-5) + var(--sbw,0px))}
  .bs-profile-hero__top{left:calc(var(--space-5) + var(--sbw,0px));right:calc(var(--space-5) + var(--sbw,0px))}
}

/* ===== Hentais (V6, 18/out/2026) =====
   Capas 3:4 do mesmo tamanho; a capa sob o mouse abre (2 larguras) e as páginas passam como slides.
   Celular: grade de 2 colunas, a primeira capa ocupa a linha toda. Candidata a virar componente do DS (Cover). */
.x-hent{display:flex;flex-direction:column;gap:var(--space-6)}
.x-hent-head{margin-bottom:calc(var(--page-head-gap) - var(--space-6));display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.x-hent-chip--novo{left:auto;right:var(--space-3);background:var(--interactive-primary);color:var(--text-on-brand-fill)}
.x-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.x-top-title:empty{display:none}
.x-hent-wait{display:flex;justify-content:center;padding:var(--space-11) 0}
.x-hent-card:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.x-hent-go{position:absolute;right:var(--space-5);bottom:var(--space-5);width:var(--size-control-lg);height:var(--size-control-lg);z-index:var(--z-raised);pointer-events:none}
.x-hent-bar{display:flex;gap:var(--space-3);flex-wrap:wrap}
.x-hent-dd{min-width:0;flex:1 1 0}
.x-hent-rows{container-type:inline-size;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.x-hent-row{display:contents}
.x-hent-card{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-surface);color:var(--text-primary)}
.x-hent-card.is-first{grid-column:span 2;aspect-ratio:auto;height:calc((100cqw - var(--space-4)) / 2 * 4 / 3)}
.x-hent-sl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--duration-slow) var(--ease-standard)}
.x-hent-sl.is-on{opacity:1}
.x-hent-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg-on-image) 0%,transparent 25%,transparent 60%,var(--bg-on-image) 100%);pointer-events:none}
.x-hent-chip{position:absolute;left:var(--space-3);top:var(--space-3);z-index:var(--z-raised);height:var(--size-badge-h);padding:0 var(--space-3);display:flex;align-items:center;border-radius:var(--radius-pill);background:var(--bg-on-image);color:var(--text-primary);font-size:var(--font-size-12);font-weight:var(--font-weight-bold);white-space:nowrap}
.x-hent-card .x-hent-go{right:var(--space-3);bottom:var(--space-3);opacity:0;transition:opacity var(--transition-default)}
.x-hent-card.is-first .x-hent-go,.x-hent-card:hover .x-hent-go,.x-hent-card:focus-visible .x-hent-go{opacity:1}
@media (prefers-reduced-motion:reduce){.x-hent-sl,.x-hent-card{transition:none}}
@container stage (min-width:960px){
    .x-hent-dd{flex:none;width:calc(var(--layout-sheet) / 2.4)}
  .x-hent-rows{display:flex;flex-direction:column}
  .x-hent-row{--w:calc((100cqw - 3 * var(--space-4)) / 5);display:flex;gap:var(--space-4);height:calc(var(--w) * 4 / 3)}
  .x-hent-card,.x-hent-card.is-first{flex:none;width:var(--w);height:100%;aspect-ratio:auto;grid-column:auto;transition:width var(--duration-slow) var(--ease-standard)}
  .x-hent-card.is-first,.x-hent-card:hover,.x-hent-card:focus-visible{width:calc(var(--w) * 2)}
  /* a primeira só fecha quando outra capa, de qualquer fileira, está aberta; sem nenhuma sob o mouse, ela volta a abrir */
  .x-hent-rows:has(.x-hent-card:hover,.x-hent-card:focus-visible) .x-hent-card.is-first:not(:hover):not(:focus-visible){width:var(--w)}
  .x-hent-rows:has(.x-hent-card:hover,.x-hent-card:focus-visible) .x-hent-card.is-first:not(:hover):not(:focus-visible) .x-hent-go{opacity:0}
}

/* mensagens: dentro da conversa, no celular, a tabbar some */
.x-stage.x-chat-open #tabs{display:none}
.x-stage.x-chat-open #scroll{padding-bottom:0}

/* Perfis: busca, ordenar e fetiches juntos numa barra só; as tags (Todos, Homem cis...) vêm embaixo.
   Celular: busca em cima e os dois filtros lado a lado. Desktop: os três na mesma linha. */
.x-pfbar{display:flex;flex-direction:column;gap:var(--space-3)}

/* ===== Hentai aberto (R3 capa e miniaturas + R2 leitor, 19/out/2026) ===== */
.x-hr{display:flex;flex-direction:column;gap:var(--space-7)}
.x-hr-cols{display:flex;flex-direction:column;gap:var(--space-7)}
.x-hr-info .bs-card__body{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--space-3) var(--space-5);align-content:start}
.x-hr-cover{grid-row:1 / span 4;aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-surface-raised)}
.x-hr-cover img{display:block;width:100%;height:100%;object-fit:cover}
.x-hr-title{margin:0;font-size:var(--font-size-20);line-height:var(--line-height-snug);font-weight:var(--font-weight-bold);align-self:end}
.x-hr-tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.x-hr-n{margin:0;font-size:var(--font-size-14)}
.x-hr-start{grid-column:1 / -1;display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-3);padding:0;border:0;background:transparent;color:var(--text-primary);font:inherit;font-size:var(--font-size-16);cursor:pointer;text-align:left}
.x-hr-start:focus-visible,.x-hr-th:focus-visible,.x-hr-rc:focus-visible,.x-rd-th:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.x-hr-go{width:var(--size-avatar-xl);height:var(--size-avatar-xl);flex:none;pointer-events:none}
.x-hr-ph{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap}
.x-hr-ph .x-h3{margin:0}
.x-hr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.x-hr-th{position:relative;display:block;padding:0;border:0;aspect-ratio:2/3;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-surface-raised);cursor:pointer}
.x-hr-th img{display:block;width:100%;height:100%;object-fit:cover}
.x-hr-thn{position:absolute;left:0;right:0;bottom:0;padding:var(--space-5) var(--space-2) var(--space-2);background:linear-gradient(180deg,transparent,var(--bg-on-image));color:var(--text-primary);font-size:var(--font-size-12);font-weight:var(--font-weight-bold);text-align:center}
.x-hr-rec .x-h3{margin:0 0 var(--space-4)}
.x-hr-recg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.x-hr-rc{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-surface)}
.x-hr-rc img{display:block;width:100%;height:100%;object-fit:cover}
.x-hr-rc .x-hent-chip{left:var(--space-3);top:var(--space-3)}
.x-hr-rc:nth-child(n+5){display:none}

/* leitor: por cima do app inteiro (dentro do palco) */
.x-rd{position:absolute;inset:0;z-index:var(--z-modal);display:flex;flex-direction:column;background:var(--bg-canvas);color:var(--text-primary)}
.x-rd-bar{flex:none;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4)}
.x-rd-tt{flex:1;min-width:0;display:flex;flex-direction:column}
.x-rd-tt b{font-size:var(--font-size-16);font-weight:var(--font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-rd-tt span{font-size:var(--font-size-12);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-rd-seg .bs-filter__item{display:inline-flex;align-items:center;gap:var(--space-2)}
.x-rd-seg .bs-filter__item span:not(.bs-icon){display:none}
.x-rd-cnt{font-size:var(--font-size-14);font-weight:var(--font-weight-bold);min-width:var(--size-control-lg);text-align:center}
.x-rd-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.x-rd-pg{flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;padding:0 var(--space-4);cursor:pointer;touch-action:pan-y}
.x-rd-pg img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius-xs);display:block;user-select:none}
.x-rd-nv{position:absolute;bottom:var(--space-4);z-index:var(--z-raised);width:var(--size-control-lg);height:var(--size-control-lg)}
.x-rd-prev{left:var(--space-4)}.x-rd-next{right:var(--space-4)}
.x-rd-cont{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.x-rd-cont img{display:block;width:100%;max-width:var(--layout-form);height:auto}
.x-rd-foot{flex:none;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3) var(--space-4) var(--space-5)}
.x-rd-foot .bs-progress{height:var(--stroke-thick)}
.x-rd-strip{display:none}
.x-rd-th{flex:none;width:var(--size-avatar-xl);aspect-ratio:2/3;padding:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-surface-raised);border:var(--stroke-thin) solid transparent;cursor:pointer}
.x-rd-th img{display:block;width:100%;height:100%;object-fit:cover}
.x-rd-th.is-on{border-color:var(--interactive-primary)}

/* leitura contínua: a barra flutua sobre as páginas e some ao rolar para baixo */
.x-rd--cont .x-rd-bar{position:absolute;top:0;left:0;right:0;z-index:var(--z-controls);background:var(--bg-canvas);transition:transform var(--duration-slow) var(--ease-standard)}
.x-rd--cont.is-away .x-rd-bar{transform:translateY(-100%)}
.x-rd--cont .x-rd-cont{padding-top:calc(var(--size-control-md) + 2 * var(--space-3))}
@media (prefers-reduced-motion:reduce){.x-rd--cont .x-rd-bar{transition:none}}
@container stage (min-width:960px){
  .x-rd--cont .x-rd-cont{padding-top:calc(var(--size-control-md) + 2 * var(--space-4))}
}
@container stage (min-width:960px){
  .x-hr-cols{flex-direction:row;align-items:flex-start}
  .x-hr-info{flex:0 0 calc(var(--layout-sheet) / 2);position:sticky;top:var(--space-5)}
  .x-hr-info .bs-card__body{display:flex;flex-direction:column;gap:var(--space-4)}
  .x-hr-cover{grid-row:auto}
  .x-hr-title{font-size:var(--font-size-24);align-self:auto}
  .x-hr-start{margin-top:var(--space-2)}
  .x-hr-pgs{flex:1;min-width:0}
  .x-hr-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .x-hr-recg{grid-template-columns:repeat(5,minmax(0,1fr))}
  .x-hr-rc:nth-child(n+5){display:block}
  .x-rd-bar{padding:var(--space-4) var(--space-6)}
  .x-rd-seg .bs-filter__item span:not(.bs-icon){display:inline}
  .x-rd-stage{gap:var(--space-7);padding:0 var(--space-6)}
  .x-rd-pg{padding:0}
  .x-rd-nv{position:static;width:var(--size-avatar-xl);height:var(--size-avatar-xl)}
  .x-rd-foot{padding:var(--space-4) var(--space-6) var(--space-6)}
  .x-rd-strip{display:flex;gap:var(--space-3);overflow-x:auto;scrollbar-width:none;padding:var(--space-2) 0}
  .x-rd-strip::-webkit-scrollbar{display:none}
}

/* Perfis, visitante deslogada: sem busca nem filtros. O botão Criar perfil: desktop = linha do título, à direita; celular = embaixo do título, largura total */
.x-pf--guest .x-pftop{display:none}
.x-hhead .x-pf-hbtn{justify-self:stretch;justify-content:center}
@container stage (min-width:960px){.x-hhead .x-pf-hbtn{justify-self:auto}}
/* três filtros: no celular, ordenar e fetiches lado a lado e o estado na linha de baixo (cabe em 335 px); no desktop os quatro ficam na mesma linha */
/* entrevista dentro de Histórias: capa do post */
.x-hwp-cover{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-xl)}
.x-help-cat-body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);height:100%}
/* espaço depois de um Alert que abre o conteúdo da tela (era o x-notice--flush) */
.x-al-gap{margin-bottom:var(--space-5)}

/* ---------- Glossário (20/out/2026): só encaixe; os cards, o artigo e o accordion são do DS ---------- */
.x-gl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.x-gl-grid .bs-story-card{padding:var(--space-4);gap:var(--space-3)}
.x-gl-grid .bs-story-card__title{font-size:var(--font-size-18)}
.x-gl-grid .bs-story-card__excerpt{font-size:var(--font-size-14);-webkit-line-clamp:3}
.x-hhead .x-gl-q{width:100%}
.x-gl-rel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.x-gl-rel .bs-card{text-decoration:none}
.x-gl-rel-n{font-size:var(--font-size-16);font-weight:var(--font-weight-medium);line-height:var(--line-height-snug)}
.x-gl-pills{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.x-gl-steps{display:flex;flex-direction:column;gap:var(--space-4)}
/* tela do fetiche: mesmo grid do Mensagens (menu à esquerda, texto à direita); no celular o texto vem primeiro */
.x-gl-cols{display:flex;flex-direction:column;gap:var(--space-7)}
.x-gl-menu{display:none}
@container stage (min-width:960px){
  .x-gl-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-7);align-items:start}
  .x-gl-chips{display:none}
  .x-gl-menu{display:block;position:sticky;top:var(--space-5)}
}
@container stage (min-width:960px){
  .x-gl-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}
  .x-gl-grid .bs-story-card{padding:var(--space-6);gap:var(--space-4)}
  .x-gl-grid .bs-story-card__title{font-size:var(--font-size-24)}
  .x-gl-grid .bs-story-card__excerpt{font-size:var(--font-size-16)}
  .x-gl-rel{grid-template-columns:repeat(3,minmax(0,1fr))}
  .x-gl-q{width:calc(var(--layout-sheet) * .6)}
}

/* ===== Ranking (21/out/2026): pódio + lista, versão A do Claude Design ===== */
.x-t10-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.x-t10-head .x-h3{margin:0}
.x-rk{display:flex;flex-direction:column;gap:var(--space-5)}
.x-rk .x-page-title{justify-content:center}
.x-rk-sub{margin:calc(var(--space-4) * -1) 0 0;text-align:center}
.x-rk-podium{display:flex;align-items:flex-end;gap:var(--space-3);padding-top:var(--space-4)}
.x-rk-pod{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:0;background:none;border:0;color:var(--text-primary);text-align:center;cursor:pointer}
.x-rk-avw{position:relative;display:flex;margin-bottom:var(--space-4)}
.x-rk-tag{position:absolute;bottom:0;left:50%;transform:translate(-50%,50%);z-index:var(--z-raised);width:var(--size-pill-h);height:var(--size-pill-h);padding:0;justify-content:center;border-radius:var(--radius-circle)}
.x-rk-nm{display:flex;align-items:center;justify-content:center;gap:var(--space-2);max-width:100%;min-width:0}
.x-rk-nick{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--font-weight-regular)}
.x-rk-lv{display:inline-flex;align-items:center;gap:var(--space-1);flex:none}
.x-rk-lv .bs-emblem{--bs-emblem-size:var(--size-icon-xs)}
.x-rk-lv b{font-size:var(--font-size-14);font-weight:var(--font-weight-bold);color:var(--bs-lv)}
.x-rk-pts{display:flex;flex-direction:column;align-items:flex-end;flex:none;line-height:var(--line-height-tight)}
.x-rk-pts b{font-size:var(--font-size-18);font-weight:var(--font-weight-black)}
.x-rk-pod .x-rk-pts{align-items:center}
.x-rk-pod--1 .x-rk-pts b{font-size:var(--font-size-24)}
.x-rk-list{padding:0;overflow:hidden}
.x-rk-row{display:flex;align-items:center;gap:var(--space-4);width:100%;min-height:var(--size-avatar-xl);padding:var(--space-3) var(--space-4);background:none;border:0;color:var(--text-primary);text-align:left;cursor:pointer}
.x-rk-list .x-rk-row:nth-child(even){background:var(--bg-surface-zebra)}
.x-rk-n{width:var(--space-8);flex:none;text-align:center;font-size:var(--font-size-18);font-weight:var(--font-weight-black);color:var(--text-secondary)}
.x-rk-who{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-3)}
.x-rk-row--me{background:var(--bg-surface)!important;box-shadow:inset 0 0 0 var(--stroke-thin) var(--interactive-primary)}
.x-rk-row--me .x-rk-n{color:var(--text-brand)}
.x-rk-dots{text-align:center;color:var(--text-secondary);font-weight:var(--font-weight-black);letter-spacing:var(--space-2)}
.x-rk-minha{display:flex;flex-direction:column;gap:var(--space-3)}
.x-rk-minha .x-h3{margin:0}
.x-rk-list--me{box-shadow:0 0 0 var(--stroke-thin) var(--interactive-primary)}
.x-rk-list--me .x-rk-row--me{box-shadow:none}
.x-rk-mais{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
@container stage (min-width:960px){
  .x-rk-podium{gap:var(--space-6)}
  .x-rk-pod .x-rk-av{--bs-avatar-size:var(--size-avatar-2xl);--bs-avatar-rsq:var(--radius-avatar-2xl)}
  .x-rk-pod--1 .x-rk-av{--bs-avatar-size:var(--size-avatar-3xl);--bs-avatar-rsq:var(--radius-avatar-3xl)}
  .x-rk-pod .x-rk-nick{font-size:var(--font-size-20)}
  .x-rk-row{padding-inline:var(--space-7)}
}

/* Adicionar foto: prévia da imagem escolhida */
.x-ap-prev{width:100%;height:min(200px,28vh);border-radius:var(--radius-md);background-color:var(--bg-field)}
.x-zoomable{cursor:zoom-in}
.x-ap-btns>*{flex:1 1 0}
.x-ap-wrap{position:relative}
.x-ap-ver{position:absolute;right:var(--space-3);bottom:var(--space-3)}

/* Rodapé de folha com 3 botões (ex.: Bloquear / Bloquear e denunciar): no celular os botões dividem a largura e a ação principal fica numa linha só dela, em vez de cair solta à direita */
@media(max-width:960px){.x-ft-split>*{flex:1 1 auto}}

/* Ranking: abas Top do mês | Top geral (26/out/2026) */
.x-rk-abas{display:flex;justify-content:center}
.x-rk-abas + .x-rk-sub{margin:0}

/* Sites (26/out/2026): um Card por categoria, linha com imagem, nome, endereço e seta (só tokens) */
.x-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.x-si-filtro{margin-bottom:var(--page-head-gap)}
.x-si-lista{display:flex;flex-direction:column;gap:var(--space-8)}
.x-si-sec{--bs-si:var(--text-secondary);display:flex;flex-direction:column;gap:var(--space-4)}
.x-si-c-scat{--bs-si:var(--bronze-400)}
.x-si-c-fart{--bs-si:var(--green-400)}
.x-si-c-golden-shower{--bs-si:var(--yellow-400)}
.x-si-c-abdl{--bs-si:var(--sky-400)}
.x-si-c-smoking{--bs-si:var(--purple-400)}
.x-si-head{display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-2)}
.x-si-dot{flex:none;width:var(--space-3);height:var(--space-3);border-radius:var(--radius-circle);background:var(--bs-si)}
.x-si-title{margin:0;font-weight:var(--font-weight-bold)}
.x-si-count{font-size:var(--font-size-14);color:var(--text-tertiary)}
.x-si-card{padding:0;overflow:hidden}
.x-si-row{display:flex;align-items:center;gap:var(--space-5);min-height:var(--size-control-md);padding:var(--space-4) var(--space-5);color:var(--text-primary);text-decoration:none}
.x-si-row + .x-si-row{border-top:var(--stroke-hairline) solid var(--border-subtle)}
.x-si-row:hover,.x-si-row:focus-visible{background:var(--bg-surface-zebra)}
.x-si-row:focus-visible{outline:var(--focus-ring);outline-offset:calc(var(--focus-offset) * -1)}
.x-si-thumb{flex:none;display:grid;place-items:center;overflow:hidden;width:var(--size-avatar-lg);height:var(--size-avatar-lg);border-radius:var(--radius-md);background:color-mix(in srgb,var(--bs-si) 16%,var(--bg-canvas));color:var(--bs-si);font-size:var(--font-size-20);font-weight:var(--font-weight-bold)}
.x-si-thumb img{width:100%;height:100%;object-fit:cover}
.x-si-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.x-si-name{font-size:var(--font-size-16);line-height:var(--line-height-snug);font-weight:var(--font-weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x-si-host{font-size:var(--font-size-14);line-height:var(--line-height-snug);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x-si-go{flex:none;color:var(--text-tertiary)}

/* Perfis: botão Filtros ao lado do Ordenar, chips dos filtros ativos e a folha de filtros (26/out/2026) */
.x-pfbar>.x-pf-fbtn{width:100%;justify-content:center}
@container stage (min-width:960px){.x-pfbar{flex-direction:row;align-items:center}.x-pfbar>.x-pf-row{flex:1;min-width:0}.x-pfbar>.x-pf-fbtn{width:auto;flex:none}}   /* desktop: busca e Filtros na mesma linha */
.x-pf-ativos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.x-pf-ativos:empty{display:none}
.x-pf-ativo{cursor:pointer;border:0}
.x-pf-limpar{background:none;border:0;padding:0;cursor:pointer}
.x-pff [hidden]{display:none!important}
.x-pff .x-pff-hint{margin:var(--space-3) 0 var(--space-5)}
.x-pff .x-pff-q{margin-bottom:var(--space-5)}
.x-pff .x-pff-g{margin:var(--space-6) 0 var(--space-4)}
.x-pff .x-pff-gl .bs-accordion__item+.bs-accordion__item{margin-top:0}
.x-pff-fetcard{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%;padding:var(--space-4) var(--space-5);border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.x-pff-fetcard__t{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}

/* ---------- barra de personas (só administrador real; personas.php) ---------- */
.x-pers{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);border:var(--stroke-hairline) solid var(--border-default);border-radius:var(--radius-pill);background:transparent;color:var(--text-secondary);font-size:var(--font-size-14);cursor:pointer}
.x-pers.is-on{border-color:var(--text-brand);color:var(--text-primary);background:var(--bg-field)}
.x-pers__av{display:inline-flex;align-items:center;justify-content:center;width:var(--size-avatar-sm);height:var(--size-avatar-sm);border-radius:var(--radius-circle);overflow:hidden;background:var(--bg-field);color:var(--text-primary);font-weight:var(--font-weight-bold)}
.x-pers__av img{width:100%;height:100%;object-fit:cover}
.x-pers--wp{margin-left:auto;padding:var(--space-2) var(--space-4);flex:none}

/* Folha de fetiches do editor (celular): a barra de rolagem fica sempre visível, para mostrar que há mais fetiches abaixo */
@media(max-width:959.98px){
  .x-fetcat .bs-modal__body::-webkit-scrollbar{width:var(--space-2)}
  .x-fetcat .bs-modal__body::-webkit-scrollbar-thumb{background-color:var(--interactive-accent)}
  @supports not selector(::-webkit-scrollbar){.x-fetcat .bs-modal__body{scrollbar-width:thin;scrollbar-color:var(--interactive-accent) transparent}}
}

.x-aval-modal{display:flex;flex-direction:column;gap:var(--space-5);align-items:center}
.x-aval-modal .bs-field,.x-aval-modal .bs-input,.x-aval-modal textarea{width:100%}

/* ============ Menu (09/nov/2026) ============ */
.x-mn-top{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-8)}
.x-mn-top .bs-cta-card__actions .bs-btn{justify-content:center}
.x-mn-conta{margin-top:var(--space-8)}
@media(min-width:960px){.x-mn-conta{display:none}}

/* Perfis: botões de visualização Grande | Pequeno (só celular; no desktop a grade já tem 4 colunas) */
.x-pf-row{display:flex;align-items:center;gap:var(--space-3)}
.x-pf-row>.bs-input-group{flex:1;min-width:0}
.x-pf-vis{flex:none}
@container stage (min-width:960px){.x-pf-vis{display:none}}
@container stage (min-width:960px){.bs-profile-grid--compact{grid-template-columns:repeat(auto-fill,minmax(var(--size-profile-card-min),1fr));gap:var(--space-8)}}   /* desktop: grade normal mesmo com Pequeno salvo */

/* Aviso (modal criado no painel, js/29-avisos.js) */
.x-aviso-img{display:block;width:100%;height:auto;border-radius:var(--radius-md);margin-bottom:var(--space-4)}

/* Mensagens (10/nov/2026): a 320px o texto de apoio do campo ("Escreva uma mensagem") passava 5px da largura útil e quebrava em 2 linhas, e o campo crescia. Nessa largura ele passa a 14px; o que a pessoa digita continua em 16px (o iOS dá zoom se o texto digitado for menor que 16px, mas o texto de apoio não conta). */
@container stage (max-width:340px){.bs-chat__footer .bs-input::placeholder{font-size:var(--font-size-14)}}
#strip .x-pers{padding-block:0}
#strip .x-pers__av{width:var(--space-7);height:var(--space-7)}
#strip .x-pers--wp{padding-block:var(--space-1)}
#strip .x-pers--vis .x-pers__av{background:var(--bg-field);color:var(--text-secondary)}
#strip .x-pers--vis .bs-icon{font-size:var(--size-icon-sm,14px)}
/* barra de admin: Controles e WordPress ficam fixos à direita; no celular só os perfis rolam */
.x-strip__right{display:flex;align-items:center;gap:var(--space-3);flex:none;position:sticky;right:0;background:var(--gray-950)}
@media(max-width:600px){#strip .x-strip__lb:first-child{display:none}
 .x-strip__right{box-shadow:calc(var(--space-4)*-1) 0 var(--space-4) var(--gray-950)}
 #strip .x-pers--wp .x-pers__nome{font-size:0}
 #strip .x-pers--wp .x-pers__nome::after{content:'WordPress';font-size:var(--font-size-14)}}
/* tag Oficial: 8px de distância do nome */
.x-oficial{margin-left:var(--space-3)}
.bs-post__name .x-oficial{margin-left:var(--space-2)}   /* no post o nome já tem 4px de gap (flex): 4 + 4 = 8 */

/* Busca nos posts da Comunidade (13/nov/2026): campo com lupa (bs-input-group) acima do Top 10; o X de limpar fica dentro do campo, à direita */
.x-mr-busca .bs-input-group .bs-input{padding-right:calc(var(--size-control-md) + var(--space-3))}
.x-mr-busca .x-mr-qx{position:absolute;right:var(--space-2);top:50%;transform:translateY(-50%)}
.x-mr-busca .x-mr-qx[hidden]{display:none}
.x-mr-top{display:contents}
.x-mr-top[hidden]{display:none}
/* Campo-armadilha dos comentarios (anti-spam): existe para robos, pessoas nao veem nem alcancam. Sem tamanho solto. */
.x-hp{position:absolute;inline-size:0;block-size:0;padding:0;border:0;opacity:0;overflow:hidden;pointer-events:none}
/* Lista de comentários que se atualiza sozinha: o invólucro não muda o layout (os itens seguem na coluna do .bs-comments). */
.x-cm-list{display:contents}

/* Como usar a comunidade (14/nov/2026): "imagens" = componentes reais do app com dados de exemplo, dentro de uma moldura sem clique.
   Só tokens. Ver js/30-como-usar.js. */
.x-tut-demo{display:flex;flex-direction:column;gap:var(--space-4);pointer-events:none;user-select:none}
.x-tut-demo--center{align-items:center}
.x-tut-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--size-menu-tile-icon) * 1.2),1fr));gap:var(--space-4) var(--space-3);justify-items:center}
.x-tut-tiles .bs-menu-tile{flex-direction:column;text-align:center;gap:var(--space-3)}
.x-tut-pills{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.x-tut-demo--center .x-tut-pills{justify-content:center}
.x-tut-card{width:100%}
.x-tut-duo{display:grid;grid-template-columns:repeat(2,minmax(0,var(--size-help-card-min)));gap:var(--space-5);justify-content:center}
.x-tut-fig{display:flex;flex-direction:column;gap:var(--space-3);margin:0;min-width:0}
.x-tut-fig figcaption{text-align:center;font-size:var(--font-size-14);color:var(--text-secondary)}
.x-tut-chat{display:flex;flex-direction:column;gap:var(--space-3);width:100%}
/* mais ar entre os tópicos do tutorial */
.x-tut-secs{display:flex;flex-direction:column;gap:var(--space-11)}
.x-tut-tiles--2l{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8) var(--space-4)}
.x-tut-tiles--2l .bs-menu-tile{width:100%;align-items:center}
.x-tut-tiles--2l .bs-menu-tile__icon{width:calc(var(--size-menu-tile-icon) * 1.25);height:calc(var(--size-menu-tile-icon) * 1.25)}
@media (max-width:480px){.x-tut-tiles--2l .bs-menu-tile__icon{width:var(--size-menu-tile-icon);height:var(--size-menu-tile-icon)}.x-tut-tiles--2l .bs-menu-tile__title{font-size:var(--font-size-14)}}