/* Visual da ferramenta Bio Cristã (classes começam com bc-, bg-, be-, bp-, bn-, bk-) */

/* ---------- Topo da página ---------- */
.bc-selo { display: inline-flex; align-items: center; gap: .35rem; margin: .6rem 0 0; padding: .28rem .75rem; border-radius: 999px; background: var(--dourado-suave); color: var(--dourado); font-size: .76rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.bc-cat-topo { margin: .6rem 0 0; font-size: .8rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--dourado); }

/* ---------- Bio recebida por link ---------- */
.bc-recebido { margin: .4rem 0 1.2rem; padding: 1.2rem 1.2rem 1.1rem; border-radius: 20px; background: linear-gradient(140deg, var(--dourado-suave), var(--superficie)); border: 1.5px solid var(--dourado); box-shadow: var(--sombra); text-align: center; animation: bc-surgir .5s ease-out; }
.bc-rec-topo { margin: 0 0 .5rem; font-weight: 750; font-size: .95rem; }
.bc-rec-txt { white-space: normal; font-size: 1.12rem; line-height: 1.55; margin: 0 auto 1rem; max-width: 34ch; }
.bc-rec-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

/* ---------- Bio do dia ---------- */
.bc-hoje { position: relative; overflow: hidden; margin: .4rem 0 1.3rem; padding: 1.1rem 1.2rem 1rem; border-radius: 20px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(226,194,126,.38), transparent 55%), linear-gradient(150deg, #1f5b51, #12352f 70%); box-shadow: 0 10px 28px rgba(18, 53, 47, .25); }
.bc-hoje::before { content: "✝"; position: absolute; right: -6px; bottom: -34px; font-size: 9rem; line-height: 1; color: rgba(255,255,255,.06); pointer-events: none; }
.bc-hoje-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .55rem; }
.bc-hoje h2 { margin: 0; font-family: var(--fonte); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #f2dfb4; }
.bc-hoje-tema { font-size: .78rem; font-weight: 700; color: #fff; text-decoration: none; background: rgba(255,255,255,.14); padding: .22rem .65rem; border-radius: 999px; white-space: nowrap; }
.bc-hoje-txt { position: relative; font-size: 1.08rem; line-height: 1.55; margin: 0 0 .9rem; }
.bc-hoje-txt a, .bc-rec-txt a { color: inherit; }
.bc-hoje-acoes { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.bc-hoje .btn { background: #fff; color: #12352f; }
.bc-hoje .btn-sec { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.bc-hoje-volta { margin-left: auto; font-size: .8rem; color: rgba(255,255,255,.75); }

/* ---------- Gerador ---------- */
.bg-gerador {
  position: relative; margin: 0 0 1.5rem; padding: 1.2rem 1.1rem 1.3rem; border-radius: 24px; border: 2px solid transparent;
  background: linear-gradient(var(--superficie), var(--superficie)) padding-box, linear-gradient(135deg, var(--dourado), var(--primaria) 55%, var(--dourado)) border-box;
  box-shadow: var(--sombra);
}
.bg-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.bg-cab h2 { margin: 0; font-size: clamp(1.3rem, 4vw, 1.65rem); }
.bg-surpresa { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: var(--dourado-suave); color: var(--dourado); font-weight: 700; font-size: .84rem; padding: .45rem .8rem; border-radius: 999px; cursor: pointer; }
.bg-surpresa .ico { width: 17px; height: 17px; }
.bg-passo { margin-top: 1.15rem; }
.bg-passo-tit { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-family: var(--fonte); font-size: .98rem; font-weight: 750; }
.bg-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primaria); color: var(--sobre-primaria); font-size: .82rem; font-weight: 800; flex: none; }
.bg-plats .chip small { font-weight: 600; opacity: .85; margin-left: .15rem; font-size: .72rem; }

.bg-perfis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30%, 96px), 1fr)); gap: .45rem; }
.bg-perfil { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 72px; padding: .5rem .3rem; border: 1.5px solid var(--borda); border-radius: 16px; background: var(--superficie); color: var(--texto); font-size: .8rem; font-weight: 700; line-height: 1.15; text-align: center; cursor: pointer; transition: transform .12s, border-color .2s, background .2s; }
.bg-perfil span { font-size: 1.55rem; line-height: 1; }
.bg-perfil:hover { border-color: var(--dourado); }
.bg-perfil:active { transform: scale(.96); }
.bg-perfil[aria-pressed="true"] { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 10%, var(--superficie)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 18%, transparent); }

.bg-genero { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; font-size: .88rem; font-weight: 650; color: var(--texto-2); }
.bg-genero[hidden] { display: none; }
.bg-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borda); }
.bg-seg button { border: 0; background: none; padding: .38rem 1rem; border-radius: 999px; font-weight: 700; font-size: .86rem; color: var(--texto-2); cursor: pointer; }
.bg-seg button[aria-pressed="true"] { background: var(--superficie); color: var(--primaria); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.bg-seg-largo { display: flex; }
.bg-seg-largo button { flex: 1; }

.bg-estilos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 640px) { .bg-estilos { grid-template-columns: repeat(3, 1fr); } }
.bg-estilo { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: .7rem .8rem; min-height: 74px; border: 1.5px solid var(--borda); border-radius: 16px; background: var(--superficie); color: var(--texto); text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.bg-estilo strong { font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.bg-estilo span { font-size: .95rem; line-height: 1.3; }
.bg-estilo:hover { border-color: var(--dourado); }
.bg-estilo[aria-pressed="true"] { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 9%, var(--superficie)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 18%, transparent); }
.bg-estilo[aria-pressed="true"] strong { color: var(--primaria); }
.bg-estilo-forte span { font-weight: 800; }
.bg-estilo-minimalista span { letter-spacing: .05em; font-weight: 500; }
.bg-estilo-aesthetic span { color: #95566f; letter-spacing: .02em; }
:root[data-tema="escuro"] .bg-estilo-aesthetic span { color: #e6a8c0; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .bg-estilo-aesthetic span { color: #e6a8c0; } }
.bg-estilo-divertido span { font-weight: 650; }
.bg-estilo-poetico span { font-family: var(--fonte-titulo); font-style: italic; font-size: 1.02rem; }

.bg-mais { margin-top: 1.1rem; border: 1px dashed var(--borda); border-radius: 16px; background: var(--fundo); }
.bg-mais summary { display: flex; align-items: center; gap: .45rem; padding: .8rem .95rem; cursor: pointer; font-weight: 700; font-size: .92rem; list-style: none; }
.bg-mais summary::-webkit-details-marker { display: none; }
.bg-mais summary::after { content: "+"; margin-left: auto; color: var(--dourado); font-size: 1.3rem; line-height: 1; }
.bg-mais[open] summary::after { content: "–"; }
.bg-mais summary small { font-weight: 500; color: var(--texto-2); }
.bg-mais summary .ico { width: 18px; height: 18px; color: var(--dourado); }
.bg-campos { display: grid; gap: .75rem; padding: 0 .95rem 1rem; }
@media (min-width: 600px) { .bg-campos { grid-template-columns: 1fr 1fr; } }
.bg-campo-largo { grid-column: 1 / -1; }

.bg-criar { position: relative; overflow: hidden; width: 100%; margin-top: 1.15rem; min-height: 56px; font-size: 1.06rem; border-radius: 18px;
  background: linear-gradient(120deg, var(--primaria), var(--primaria-forte) 60%, var(--primaria)); box-shadow: 0 8px 22px color-mix(in srgb, var(--primaria) 35%, transparent); }
.bg-criar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-100%); }
.bg-criar:hover::after, .bg-criando::after { animation: bg-brilhar 1s ease-out; }
.bg-brilho { display: inline-block; transition: transform .4s; }
.bg-criando .bg-brilho { animation: bg-girar .5s ease-in-out infinite; }
@keyframes bg-brilhar { to { transform: translateX(100%); } }
@keyframes bg-girar { 50% { transform: scale(1.35) rotate(25deg); } }

.bg-res { margin-top: 1.3rem; scroll-margin-top: calc(var(--topo-h) + 12px); }
.bg-res-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.bg-res-cab h3 { margin: 0; font-family: var(--fonte); font-size: 1rem; font-weight: 750; }
.bg-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.bg-card { display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; padding: .95rem 1rem .7rem; border-radius: 18px; background: var(--fundo); border: 1px solid var(--borda); transition: border-color .2s, transform .15s; }
.bg-card:hover { border-color: var(--dourado); }
.bg-txt { margin: 0; font-size: 1rem; line-height: 1.55; }
.bg-card-pe { display: flex; align-items: center; gap: .3rem; }
.bg-tam { margin-right: auto; font-size: .76rem; font-weight: 700; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.bg-vazio { padding: 1rem; text-align: center; color: var(--texto-2); }
.bg-surgir { animation: bc-surgir .45s ease-out both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes bc-surgir { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Botões pequenos dos cartões ---------- */
.bc-acao { display: inline-flex; align-items: center; gap: .3rem; min-height: 38px; padding: .35rem .7rem; border: 0; border-radius: 999px; background: var(--superficie-2); color: var(--texto); font-size: .82rem; font-weight: 650; cursor: pointer; text-decoration: none; }
.bc-acao:hover { filter: brightness(.96); }
.bc-acao .ico { width: 17px; height: 17px; }
.bc-acao-pri { background: var(--primaria); color: var(--sobre-primaria); }
.bc-acao-ico { width: 38px; padding: 0; justify-content: center; }
.bc-fav[aria-pressed="true"] { color: #d6456a; }
.bc-fav[aria-pressed="true"] .ico { fill: currentColor; }
.bg-card .bc-acao:not(.bc-acao-pri) { background: var(--superficie); }

/* ---------- Editor + prévia ---------- */
.be-estudio { margin: 2rem 0 1rem; scroll-margin-top: calc(var(--topo-h) + 8px); }
.be-estudio > h2 { margin-top: 0; }
.be-grade { display: grid; gap: 1.4rem; align-items: start; }
@media (min-width: 860px) { .be-grade { grid-template-columns: 330px 1fr; gap: 2rem; } .bp-lado { position: sticky; top: calc(var(--topo-h) + 14px); } }

.bp-lado { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.bp-plats { max-width: 100%; margin-bottom: .8rem; }
.bp-plats .chip { padding: .32rem .7rem; font-size: .78rem; }
.bp-dica { margin: .6rem 0 0; font-size: .78rem; color: var(--texto-2); text-align: center; }

.bp-cel { width: min(290px, 100%); height: 560px; padding: 9px; border-radius: 46px; background: linear-gradient(145deg, #2b2f33, #0b0c0e); box-shadow: 0 0 0 1.5px #4a4f55 inset, 0 24px 50px rgba(15, 25, 22, .28), 0 4px 10px rgba(0,0,0,.15); }
@media (min-width: 860px) { .bp-cel { width: 310px; height: 620px; } }
.bp-pulsar { animation: bp-pulsar .7s ease-out; }
@keyframes bp-pulsar { 30% { transform: scale(1.025); box-shadow: 0 0 0 1.5px #4a4f55 inset, 0 0 0 8px color-mix(in srgb, var(--dourado) 35%, transparent), 0 24px 50px rgba(15,25,22,.28); } }

.bp-tela {
  --cf: #ffffff; --ct: #0f1419; --cm: #737373; --cb: #ececec; --cbtn: #efefef; --acc: #0095f6; --link: #00376b; --capa: linear-gradient(120deg, #c9d8cf, #e8dcc4);
  position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: var(--cf); color: var(--ct);
  font: 12.5px/1.38 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; display: flex; flex-direction: column; text-align: left;
}
:root[data-tema="escuro"] .bp-tela { --cf: #000; --ct: #f5f5f5; --cm: #a8a8a8; --cb: #262626; --cbtn: #262626; --link: #e0f1ff; --capa: linear-gradient(120deg, #1f3a35, #3a3222); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .bp-tela { --cf: #000; --ct: #f5f5f5; --cm: #a8a8a8; --cb: #262626; --cbtn: #262626; --link: #e0f1ff; --capa: linear-gradient(120deg, #1f3a35, #3a3222); } }
.bp-tela[data-plat="tiktok"] { --acc: #fe2c55; }
.bp-tela[data-plat="whatsapp"] { --acc: #25d366; }
.bp-tela[data-plat="threads"] { --acc: var(--ct); }
.bp-tela[data-plat="x"] { --acc: var(--ct); --link: #1d9bf0; }
.bp-tela[data-plat="facebook"] { --acc: #0866ff; }

.bp-status { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 22px 0 28px; font-weight: 700; font-size: 12px; flex: none; }
.bp-ilha { width: 82px; height: 22px; border-radius: 20px; background: #000; }
.bp-sinais { display: flex; gap: 2px; align-items: flex-end; }
.bp-sinais i { width: 3px; background: currentColor; border-radius: 1px; }
.bp-sinais i:nth-child(1) { height: 5px; } .bp-sinais i:nth-child(2) { height: 7px; } .bp-sinais i:nth-child(3) { height: 9px; }
.bp-barra { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 14px; flex: none; font-weight: 750; font-size: 14.5px; }
.bp-barra-user { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-barra-ico { display: flex; gap: 12px; }
.bp-barra-ico i { width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 5px; opacity: .85; }
.bp-barra-ico i:last-child { border-radius: 50%; width: 4px; height: 4px; border-width: 2px; box-shadow: 0 -6px 0 -0px currentColor, 0 6px 0 currentColor; border: 0; background: currentColor; align-self: center; }

.bp-rolagem { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: 4px 14px 16px; display: grid; grid-template-columns: 82px minmax(0, 1fr); grid-template-rows: repeat(8, max-content); align-content: start; column-gap: 10px;
  grid-template-areas: "av nums" "nome nome" "bio bio" "bot bot" "dest dest" "grade grade"; }
.bp-rolagem::-webkit-scrollbar { display: none; }
.bp-topo, .bp-info { display: contents; }
.bp-capa { grid-area: capa; display: none; height: 84px; margin: -4px -14px 0; background: var(--capa); }
.bp-avatar { grid-area: av; position: relative; display: block; width: 76px; height: 76px; border-radius: 50%; padding: 3px; cursor: pointer; background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.bp-avatar-in { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 2.5px solid var(--cf); background: linear-gradient(140deg, #2c7a6b, #1f5b51); color: #f2dfb4; }
.bp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bp-avatar b { font: 600 28px/1 var(--fonte-titulo); }
.bp-avatar img[hidden], .bp-avatar b[hidden] { display: none; }
.bp-nums { grid-area: nums; display: flex; gap: 6px; justify-content: space-around; align-items: center; text-align: center; }
.bp-nums span { display: flex; flex-direction: column; font-size: 10px; color: var(--ct); min-width: 0; }
.bp-nums b { font-size: 14px; line-height: 1.2; }
.bp-nome { grid-area: nome; margin: 10px 0 0; font-weight: 700; }
.bp-user { grid-area: user; margin: 0; color: var(--cm); display: none; }
.bp-recado-rot { grid-area: rot; display: none; margin: 14px 0 2px; font-size: 11px; color: var(--cm); }
.bp-bio { grid-area: bio; margin: 1px 0 0; white-space: pre-line; overflow-wrap: anywhere; min-height: 2.6em; }
.bp-vazio { color: var(--cm); font-style: italic; }
.bp-link { color: var(--link); }
.bp-fora { background: rgba(239, 68, 68, .2); color: #ef4444; border-radius: 3px; text-decoration: line-through; text-decoration-color: rgba(239, 68, 68, .6); }
.bp-nums-linha { grid-area: numsl; display: none; gap: 12px; margin: 8px 0 0; font-size: 12px; color: var(--cm); }
.bp-nums-linha b { color: var(--ct); font-weight: 700; margin-right: 2px; }
.bp-botoes { grid-area: bot; display: flex; gap: 6px; margin-top: 12px; }
.bp-botoes span { flex: 1; text-align: center; padding: 7px 0; border-radius: 8px; background: var(--cbtn); font-weight: 650; font-size: 12.5px; }
.bp-botoes .bp-seguir { background: var(--acc); color: #fff; }
.bp-destaques { grid-area: dest; min-height: 82px; display: flex; gap: 12px; margin: 14px -14px 0; padding: 0 14px 4px; overflow-x: auto; scrollbar-width: none; }
.bp-destaques::-webkit-scrollbar { display: none; }
.bp-dest { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; width: 60px; }
.bp-dest canvas { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 1px var(--cf), 0 0 0 2.5px var(--cb); }
.bp-dest small { font-size: 10.5px; max-width: 62px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-grade { grid-area: grade; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 14px -14px 0; }
.bp-grade i { aspect-ratio: 1; background: linear-gradient(150deg, #e9dfcb, #c9b48c); }
.bp-grade i:nth-child(3n+2) { background: linear-gradient(150deg, #cfe0d8, #7fa597); }
.bp-grade i:nth-child(4n+1) { background: linear-gradient(150deg, #f1d6cf, #d49a91); }
.bp-grade i:nth-child(5n) { background: linear-gradient(150deg, #23463f, #102923); }
.bp-grade i:nth-child(7) { background: linear-gradient(150deg, #e2daf0, #9f8fca); }

/* TikTok */
.bp-tela[data-plat="tiktok"] .bp-barra { justify-content: center; }
.bp-tela[data-plat="tiktok"] .bp-barra-ico, .bp-tela[data-plat="whatsapp"] .bp-barra-ico, .bp-tela[data-plat="facebook"] .bp-barra-ico { display: none; }
.bp-tela[data-plat="tiktok"] .bp-rolagem { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; grid-template-areas: "av" "user" "numsl" "bot" "bio" "grade"; }
.bp-tela[data-plat="tiktok"] .bp-avatar { width: 88px; height: 88px; background: none; padding: 0; }
.bp-tela[data-plat="tiktok"] .bp-user { display: block; margin-top: 8px; color: var(--ct); font-weight: 650; font-size: 13.5px; }
.bp-tela[data-plat="tiktok"] .bp-nums-linha { display: flex; }
.bp-tela[data-plat="tiktok"] .bp-botoes { width: 72%; margin-top: 10px; }
.bp-tela[data-plat="tiktok"] .bp-botoes span { border-radius: 4px; }
.bp-tela[data-plat="tiktok"] .bp-bio { margin-top: 10px; }
.bp-tela[data-plat="tiktok"] .bp-grade i { aspect-ratio: 3 / 4; }
.bp-tela[data-plat="tiktok"] :is(.bp-nums, .bp-nome, .bp-destaques) { display: none; }

/* WhatsApp */
.bp-tela[data-plat="whatsapp"] .bp-rolagem { grid-template-columns: minmax(0, 1fr); justify-items: center; grid-template-areas: "av" "nome" "user" "rot" "bio"; }
.bp-tela[data-plat="whatsapp"] .bp-avatar { width: 118px; height: 118px; margin-top: 10px; background: none; padding: 0; }
.bp-tela[data-plat="whatsapp"] .bp-avatar b { font-size: 44px; }
.bp-tela[data-plat="whatsapp"] .bp-nome { font-size: 19px; font-weight: 600; margin-top: 12px; }
.bp-tela[data-plat="whatsapp"] .bp-user { display: block; }
.bp-tela[data-plat="whatsapp"] .bp-recado-rot { display: block; justify-self: stretch; padding: 0 2px; }
.bp-tela[data-plat="whatsapp"] .bp-bio { justify-self: stretch; padding: 10px 12px; border-radius: 12px; background: var(--cbtn); font-size: 13.5px; }
.bp-tela[data-plat="whatsapp"] :is(.bp-nums, .bp-botoes, .bp-destaques, .bp-grade, .bp-nums-linha) { display: none; }

/* Threads */
.bp-tela[data-plat="threads"] .bp-rolagem { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome av" "user av" "bio bio" "numsl numsl" "bot bot"; }
.bp-tela[data-plat="threads"] .bp-avatar { width: 64px; height: 64px; background: none; padding: 0; margin-top: 8px; }
.bp-tela[data-plat="threads"] .bp-nome { font-size: 20px; font-weight: 750; margin-top: 12px; }
.bp-tela[data-plat="threads"] .bp-user { display: block; color: var(--ct); font-size: 13px; }
.bp-tela[data-plat="threads"] .bp-bio { margin-top: 12px; }
.bp-tela[data-plat="threads"] .bp-nums-linha { display: flex; }
.bp-tela[data-plat="threads"] .bp-nums-linha span:first-child, .bp-tela[data-plat="threads"] .bp-curtidas { display: none; }
.bp-tela[data-plat="threads"] .bp-seguir { color: var(--cf) !important; }
.bp-tela[data-plat="threads"] :is(.bp-nums, .bp-destaques, .bp-grade) { display: none; }

/* X */
.bp-tela[data-plat="x"] .bp-rolagem { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "capa capa" "av bot" "nome nome" "user user" "bio bio" "numsl numsl"; }
.bp-tela[data-plat="x"] .bp-capa, .bp-tela[data-plat="facebook"] .bp-capa { display: block; }
.bp-tela[data-plat="x"] .bp-avatar { width: 70px; height: 70px; margin-top: -30px; background: var(--cf); padding: 3px; }
.bp-tela[data-plat="x"] .bp-botoes { justify-self: end; align-self: start; margin-top: 10px; }
.bp-tela[data-plat="x"] .bp-botoes span { flex: none; padding: 6px 16px; border-radius: 999px; }
.bp-tela[data-plat="x"] .bp-botoes span:last-child { display: none; }
.bp-tela[data-plat="x"] .bp-seguir { color: var(--cf) !important; }
.bp-tela[data-plat="x"] .bp-nome { font-size: 17px; font-weight: 800; margin-top: 8px; }
.bp-tela[data-plat="x"] .bp-user { display: block; }
.bp-tela[data-plat="x"] .bp-bio { margin-top: 10px; }
.bp-tela[data-plat="x"] .bp-nums-linha { display: flex; }
.bp-tela[data-plat="x"] .bp-curtidas { display: none; }
.bp-tela[data-plat="x"] :is(.bp-nums, .bp-destaques, .bp-grade) { display: none; }

/* Facebook */
.bp-tela[data-plat="facebook"] .bp-rolagem { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; grid-template-areas: "capa" "av" "nome" "numsl" "bot" "rot" "bio"; }
.bp-tela[data-plat="facebook"] .bp-capa { justify-self: stretch; height: 96px; }
.bp-tela[data-plat="facebook"] .bp-avatar { width: 92px; height: 92px; margin-top: -46px; background: var(--cf); padding: 3px; }
.bp-tela[data-plat="facebook"] .bp-nome { font-size: 19px; font-weight: 750; margin-top: 6px; }
.bp-tela[data-plat="facebook"] .bp-nums-linha { display: flex; margin-top: 2px; }
.bp-tela[data-plat="facebook"] .bp-nums-linha span:first-child, .bp-tela[data-plat="facebook"] .bp-curtidas { display: none; }
.bp-tela[data-plat="facebook"] .bp-botoes { justify-self: stretch; }
.bp-tela[data-plat="facebook"] .bp-botoes span { border-radius: 6px; }
.bp-tela[data-plat="facebook"] .bp-recado-rot { display: block; justify-self: start; font-size: 14px; font-weight: 700; color: var(--ct); margin-top: 16px; }
.bp-tela[data-plat="facebook"] .bp-bio { justify-self: stretch; text-align: center; padding-bottom: 6px; }
.bp-tela[data-plat="facebook"] :is(.bp-nums, .bp-destaques, .bp-grade) { display: none; }

/* Editor */
.be-lado { min-width: 0; }
.be-campos-perfil { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .8rem; }
.be-caixa { border: 1.5px solid var(--borda); border-radius: 18px; background: var(--superficie); box-shadow: var(--sombra); overflow: hidden; transition: border-color .2s; }
.be-caixa:focus-within { border-color: var(--primaria); }
.be-caixa-cab { display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem 0; }
.be-caixa-cab label { font-size: .85rem; font-weight: 750; color: var(--texto-2); }
.be-contador { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.be-contador svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.be-anel-fundo { fill: none; stroke: var(--borda); stroke-width: 4; }
.be-anel { fill: none; stroke: var(--primaria); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .25s, stroke .2s; }
.be-perto .be-anel { stroke: var(--dourado); } .be-perto { color: var(--dourado); }
.be-passou .be-anel { stroke: var(--perigo); } .be-passou { color: var(--perigo); }
#be-texto { display: block; width: 100%; min-height: 130px; resize: vertical; border: 0; outline: 0; padding: .55rem .9rem .7rem; background: transparent; color: var(--texto); font: 1.02rem/1.6 var(--fonte); }
.be-ferramentas { display: flex; gap: .3rem; padding: .5rem .6rem; border-top: 1px solid var(--borda); background: var(--fundo); overflow-x: auto; scrollbar-width: none; }
.be-ferramentas::-webkit-scrollbar { display: none; }
.be-fer { display: inline-flex; align-items: center; gap: .35rem; flex: none; min-height: 36px; padding: .3rem .7rem; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--texto); font-size: .82rem; font-weight: 700; cursor: pointer; }
.be-fer:disabled { opacity: .45; cursor: default; }
.be-fer[aria-expanded="true"] { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }
.be-fer-ico { font-size: 1rem; line-height: 1; font-weight: 700; }
.be-fer .ico { width: 17px; height: 17px; }
.be-fer-dir { margin-left: auto; width: 36px; padding: 0; justify-content: center; }
.be-painel { border-top: 1px solid var(--borda); padding: .8rem .9rem; background: var(--fundo); animation: bc-surgir .25s ease-out; }
.be-painel-campo { display: grid; gap: .3rem; font-size: .8rem; font-weight: 700; color: var(--texto-2); margin-bottom: .6rem; }
.be-painel-campo input { font: inherit; font-size: 1rem; font-weight: 500; color: var(--texto); padding: .55rem .75rem; border: 1.5px solid var(--borda); border-radius: 12px; background: var(--superficie); }
.be-letras-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; max-height: 330px; overflow-y: auto; }
.be-letras-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "nome nome nome" "prev ins cop"; align-items: center; gap: .1rem .35rem; padding: .45rem .4rem .4rem .75rem; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borda); }
.be-l-nome { grid-area: nome; font-size: .66rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); line-height: 1.2; }
.be-letras-lista [data-letra] { grid-area: ins; } .be-letras-lista [data-letra-copiar] { grid-area: cop; }
.be-l-prev { grid-area: prev; min-width: 0; font-size: 1.12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-letras-lista .bc-acao { min-height: 34px; }
.be-letras-lista .bc-acao-ico { width: 34px; }
.be-aviso { margin: .6rem 0 0; font-size: .78rem; color: var(--texto-2); }
.be-simb-grupos { display: grid; gap: .7rem; }
.be-simb-grupo > span { display: block; font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); margin-bottom: .3rem; }
.be-simb-grupo > div { display: flex; flex-wrap: wrap; gap: .3rem; }
.be-simb-grupo button { min-width: 40px; height: 40px; padding: 0 .5rem; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); color: var(--texto); font-size: 1.05rem; cursor: pointer; }
.be-simb-grupo button:active { transform: scale(.92); background: var(--dourado-suave); }

.be-raiox { margin-top: .9rem; padding: .85rem .95rem; border-radius: 18px; background: var(--superficie); border: 1px solid var(--borda); }
.be-nota { display: flex; align-items: center; gap: .75rem; }
.be-nota-num { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 50%; font-weight: 800; font-size: 1.05rem; color: #fff; background: var(--perigo); transition: background .3s; }
.be-raiox[data-nivel="medio"] .be-nota-num { background: var(--dourado); }
.be-raiox[data-nivel="bom"] .be-nota-num { background: #3f8f6b; }
.be-raiox[data-nivel="top"] .be-nota-num { background: #2f7a5a; box-shadow: 0 0 0 3px var(--superficie), 0 0 0 5px var(--dourado); }
.be-nota div { display: flex; flex-direction: column; line-height: 1.3; }
.be-nota strong { font-size: 1rem; }
.be-nota span { font-size: .82rem; color: var(--texto-2); }
.be-checks { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .35rem; }
.be-checks li { display: flex; gap: .5rem; align-items: flex-start; font-size: .86rem; line-height: 1.4; }
.be-checks li span { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; font-size: .72rem; font-weight: 800; margin-top: .05rem; }
.be-checks .ok span { background: color-mix(in srgb, var(--sucesso) 18%, transparent); color: var(--sucesso); }
.be-checks .falta { color: var(--texto); }
.be-checks .falta span { background: var(--dourado-suave); color: var(--dourado); }
.be-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.be-copiar { flex: 1 1 100%; min-height: 52px; font-size: 1.02rem; }
.be-acoes .btn-sec { flex: 1; }
@media (min-width: 520px) { .be-copiar { flex: 2 1 0; } }
.be-como { margin: .6rem 0 0; font-size: .88rem; color: var(--texto-2); min-height: 1.4em; }

/* ---------- Seções ---------- */
.bc-sec-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.bc-sec-cab h2 { margin: 0; display: flex; align-items: center; gap: .4rem; }
.bc-sec-cab h2 .ico { color: #d6456a; }
.bc-sec-sub { display: block; margin: .3rem 0 .9rem; font-size: .9rem; color: var(--texto-2); }
.bc-minhas { margin: 2.2rem 0 0; }
.bc-minhas .bc-sec-cab { margin-bottom: .2rem; }

.bn-nomes { margin: 2.2rem 0 0; }
.bn-campo { max-width: 360px; margin-bottom: 1rem; }
.bn-colunas { display: grid; gap: 1rem; }
@media (min-width: 700px) { .bn-colunas { grid-template-columns: 1fr 1fr; } }
.bn-colunas h3 { margin: 0 0 .45rem; font-family: var(--fonte); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.bn-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.bn-lista button { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 44px; padding: .45rem .8rem; border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo); color: var(--texto); font-size: .95rem; font-weight: 600; text-align: left; cursor: pointer; }
.bn-lista button:hover { border-color: var(--dourado); }
.bn-lista button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-lista .ico { width: 17px; height: 17px; color: var(--texto-2); flex: none; }
.bn-vazio { padding: .7rem .8rem; border-radius: 12px; background: var(--fundo); color: var(--texto-2); font-size: .9rem; }

.bk-capas { margin: 2.2rem 0 0; }
.bk-controles { display: grid; gap: .7rem; margin-bottom: 1rem; }
.bk-paletas { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: -4px; }
.bk-paletas::-webkit-scrollbar { display: none; }
.bk-paleta { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.bk-paleta i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--f); box-shadow: 0 0 0 1.5px rgba(0,0,0,.08); }
.bk-paleta[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--superficie), 0 0 0 4.5px var(--primaria); }
.bk-grade { list-style: none; margin: 0; padding: 6px 4px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .75rem .5rem; }
.bk-capa { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 100%; padding: 0; border: 0; background: none; color: var(--texto); font-size: .76rem; font-weight: 650; line-height: 1.2; text-align: center; cursor: pointer; }
.bk-capa canvas { width: min(100%, 76px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1px var(--borda), 0 3px 10px rgba(0,0,0,.08); transition: transform .15s, box-shadow .2s; }
.bk-capa:active canvas { transform: scale(.94); }
.bk-capa[aria-pressed="true"] canvas { box-shadow: 0 0 0 3px var(--superficie), 0 0 0 5.5px var(--primaria); }
.bk-capa[aria-pressed="true"]::after { content: "✓"; position: absolute; top: -2px; right: calc(50% - 40px); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primaria); color: var(--sobre-primaria); font-size: .75rem; font-weight: 800; box-shadow: 0 0 0 2px var(--superficie); }
.bk-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.bk-acoes .btn:first-child { flex: 1 1 220px; }
.bk-como { margin-top: 1rem; border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); }
.bk-como summary { padding: .8rem 1rem; cursor: pointer; font-weight: 700; font-size: .92rem; }
.bk-como ol { margin: 0; padding: 0 1rem 1rem 2.2rem; font-size: .92rem; }
.bk-como li { margin: .3rem 0; }

/* ---------- Temas e bios prontas ---------- */
.bc-temas { margin-top: 2.4rem; }
.bc-grade-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr)); gap: .5rem; }
.bc-tema { display: flex; flex-direction: column; gap: .1rem; padding: .8rem .9rem; border-radius: 16px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); text-decoration: none; box-shadow: var(--sombra); transition: border-color .2s, transform .15s; }
.bc-tema:hover { border-color: var(--dourado); }
.bc-tema:active { transform: scale(.97); }
.bc-tema-emoji { font-size: 1.5rem; line-height: 1.2; }
.bc-tema strong { font-size: .97rem; line-height: 1.25; }
.bc-tema small { font-size: .78rem; color: var(--texto-2); }

.bc-lista { list-style: none; padding: 0; margin: .6rem 0 1.2rem; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.bc-card { container: bccard / inline-size; display: flex; flex-direction: column; justify-content: space-between; gap: .7rem; padding: 1rem 1.05rem .7rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); transition: border-color .2s; }
.bc-card:hover { border-color: var(--dourado); }
.bc-txt { margin: 0; font-size: 1.04rem; line-height: 1.58; }
.bc-rodape { display: flex; flex-direction: column; gap: .45rem; border-top: 1px solid var(--borda); padding-top: .55rem; }
.bc-tam { font-size: .74rem; font-weight: 700; color: var(--texto-2); }
.bc-tt { color: var(--sucesso); }
.bc-acoes { display: flex; gap: .3rem; flex-wrap: wrap; }
.bc-acoes .bc-acao-ico:first-of-type { margin-left: auto; }
@container bccard (max-width: 330px) {
  .bc-acoes .bc-acao:not(.bc-acao-pri) span { display: none; }
  .bc-acoes .bc-acao:not(.bc-acao-pri) { width: 36px; padding: 0; justify-content: center; }
}
.ref-biblia { text-decoration-thickness: 1px; }

.bc-chips { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: .2rem -2px 1.2rem; }
.bc-chips::-webkit-scrollbar { display: none; }
.bc-chip { flex: none; display: inline-flex; align-items: center; gap: .3rem; padding: .42rem .85rem; border-radius: 999px; border: 1.5px solid var(--borda); background: var(--superficie); color: var(--texto); font-size: .86rem; font-weight: 650; text-decoration: none; }
.bc-chip[aria-current="page"] { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }

/* Chamada para o gerador (páginas de tema) */
.bc-cta { display: flex; align-items: center; gap: .9rem; margin: 0 0 1.4rem; padding: 1rem 1.1rem; border-radius: 20px; text-decoration: none; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(226,194,126,.4), transparent 55%), linear-gradient(150deg, #1f5b51, #12352f 75%); box-shadow: 0 10px 26px rgba(18,53,47,.22); }
.bc-cta-ico { flex: none; font-size: 2rem; line-height: 1; }
.bc-cta > span:not(.bc-cta-ico) { display: flex; flex-direction: column; flex: 1; line-height: 1.35; }
.bc-cta strong { font-size: 1.05rem; }
.bc-cta small { font-size: .86rem; color: rgba(255,255,255,.8); }
.bc-cta .ico { width: 22px; height: 22px; color: #f2dfb4; }
.bc-lista-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.bc-lista-cab h2 { margin-bottom: .2rem; }
.bc-dica { margin: 1.4rem 0; }
.bc-dica p { margin: 0; }
.bc-passos li { margin-bottom: .5rem; }
.bc-mais { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.bc-mais [hidden] { display: none; }
.bc-sorteada { border-color: var(--dourado); box-shadow: 0 0 0 3px var(--dourado-suave), var(--sombra); animation: bc-surgir .4s ease-out; }

@media print { .bg-gerador, .be-estudio, .bk-capas, .bn-nomes, .bc-hoje, .bc-acoes, .bc-cta { display: none !important; } }
