:root{
  --bib-bg:#000000;
  --bib-bg-raised:#0a0a0a;
  --bib-glass:rgba(255,255,255,.045);
  --bib-glass-2:rgba(255,255,255,.02);
  --bib-border:rgba(255,255,255,.10);
  --bib-border-strong:rgba(255,255,255,.18);
  --bib-text:#f5f6fa;
  --bib-muted:#8a8d99;
  --bib-accent:#D5FF40;
  --bib-accent-ink:#0c1400;
  --bib-danger:#ff6b6b;
  --bib-danger-bg:rgba(255,107,107,.12);
  --bib-radius:16px;
  --bib-radius-sm:10px;
  --font-display:'Space Grotesk',ui-sans-serif,sans-serif;
  --font-body:'Inter',ui-sans-serif,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body.bib-app{
  background:var(--bib-bg);
  color:var(--bib-text);
  font-family:var(--font-body);
  line-height:1.5;
  min-height:100vh;
}
.bib-app *{ box-sizing:border-box; }
.bib-app button{ font-family:inherit; cursor:pointer; }
.bib-app a{ color:inherit; text-decoration:none; }

.bib-shell{
  display:flex;
  min-height:100vh;
}

/* ---------------- sidebar ---------------- */
.bib-sidebar{
  flex:0 0 250px;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  padding:1.6rem 1.1rem;
  background:var(--bib-bg-raised);
  border-right:1px solid var(--bib-border);
  position:sticky;
  top:0;
  height:100vh;
}
.bib-brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.bib-brand-mark{ font-size:1.3rem; }
.bib-badge-privado{
  align-self:flex-start;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--bib-accent);
  border:1px solid var(--bib-accent);
  border-radius:999px;
  padding:.25rem .65rem;
}
.bib-nav{ display:flex; flex-direction:column; gap:.2rem; flex:1; }
.bib-nav-item{
  display:flex; align-items:center; gap:.75rem;
  background:none; border:none; color:var(--bib-muted);
  font-size:.92rem; font-weight:500;
  padding:.65rem .75rem; border-radius:var(--bib-radius-sm);
  text-align:left; width:100%;
  transition:background .15s ease, color .15s ease;
}
.bib-nav-item:hover{ background:var(--bib-glass); color:var(--bib-text); }
.bib-nav-item.is-ativo{ background:var(--bib-glass); color:var(--bib-accent); }
.bib-nav-ic{ font-size:1.05rem; width:1.4rem; text-align:center; }
.bib-nav-ic{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.bib-nav-svg{ width:18px; height:18px; flex:0 0 auto; }
.bib-nav-grupo{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--bib-muted);
  opacity:.6; padding:.9rem .75rem .3rem;
}
.bib-nav-grupo:first-child{ padding-top:.1rem; }
.bib-sidebar-footer{ border-top:1px solid var(--bib-border); padding-top:1rem; }
.bib-sidebar-legal{ display:flex; align-items:center; gap:.4rem; font-size:.7rem; color:var(--bib-muted); margin-bottom:.7rem; flex-wrap:wrap; }
.bib-sidebar-legal a{ color:var(--bib-muted); text-decoration:none; }
.bib-sidebar-legal a:hover{ color:var(--bib-accent); text-decoration:underline; }
.bib-saldo-mini{ display:flex; flex-direction:column; gap:.15rem; }
.bib-saldo-mini-label{ font-size:.72rem; color:var(--bib-muted); text-transform:uppercase; letter-spacing:.05em; }
.bib-saldo-mini-valor{ font-family:var(--font-mono); font-weight:600; color:var(--bib-accent); font-variant-numeric:tabular-nums; }

/* ---------------- main ---------------- */
.bib-main{ flex:1; min-width:0; padding:2.2rem 2.6rem 5rem; overflow-x:hidden; }
.bib-view-head{ margin-bottom:1.6rem; display:flex; flex-direction:column; gap:.5rem; }
.bib-view-head h1{ font-family:var(--font-display); font-weight:600; font-size:1.7rem; margin:0; text-wrap:balance; }
.bib-view-sub{ color:var(--bib-muted); margin:0; }
.bib-saldo-pill{
  align-self:flex-start;
  font-family:var(--font-mono); font-size:.85rem;
  background:var(--bib-glass); border:1px solid var(--bib-border);
  border-radius:999px; padding:.4rem .9rem;
}
.bib-saldo-pill strong{ color:var(--bib-accent); font-variant-numeric:tabular-nums; }

/* dashboard */
.bib-dash-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem; margin-bottom:1.6rem;
}
.bib-dash-card{
  display:flex; flex-direction:column; gap:.5rem;
  background:var(--bib-glass); border:1px solid var(--bib-border);
  border-radius:var(--bib-radius); padding:1.4rem;
  text-align:left; transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.bib-dash-card:hover{ transform:translateY(-2px); border-color:var(--bib-border-strong); background:var(--bib-glass-2); }
.bib-dash-card-ic{ font-size:1.6rem; }
.bib-dash-card-title{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; }
.bib-dash-card-desc{ color:var(--bib-muted); font-size:.85rem; }
.bib-dash-card--principal{ border-color:var(--bib-accent); }
.bib-dash-card--moedas .bib-dash-card-desc{ font-family:var(--font-mono); color:var(--bib-accent); font-size:1.3rem; font-weight:600; }

.bib-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border-radius:999px; border:1px solid transparent;
  padding:.7rem 1.3rem; font-weight:600; font-size:.9rem;
  transition:filter .15s ease, opacity .15s ease;
}
.bib-btn.bib-btn-primary{ background:var(--bib-accent); color:var(--bib-accent-ink); }
.bib-btn-primary:hover{ filter:brightness(1.08); }
.bib-btn-primary:disabled{ opacity:.4; cursor:not-allowed; }
.bib-btn-sm{ padding:.4rem .85rem; font-size:.78rem; }
.bib-btn.bib-btn-secundario{ background:var(--bib-glass); color:var(--bib-text); border-color:var(--bib-border); }
.bib-btn-secundario:hover{ background:var(--bib-glass-2); }
.bib-btn-secundario:disabled{ opacity:.4; cursor:not-allowed; }
.bib-btn-lg{ padding:.9rem 1.8rem; font-size:1rem; }
.bib-btn-block{ width:100%; }

/* criar imagem */
.bib-criar-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:1.3rem; align-items:start; }
@media (max-width:920px){ .bib-criar-grid{ grid-template-columns:1fr; } }
.bib-card{
  background:var(--bib-glass); border:1px solid var(--bib-border);
  border-radius:var(--bib-radius); padding:1.4rem;
}
.bib-card-compacto{ padding:1rem; }
#bib-colab-material-preview{ display:flex; align-items:center; gap:.7rem; margin-top:.7rem; }
#bib-colab-material-preview[hidden]{ display:none; }
.bib-colab-escolher-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:.6rem;
  max-height:360px; overflow-y:auto; margin:0;
}
.bib-colab-escolher-item{
  cursor:pointer; border-radius:8px; overflow:hidden; aspect-ratio:4/5; border:1px solid var(--bib-border);
  background:var(--bib-bg);
}
.bib-colab-escolher-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.bib-label{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--bib-muted); margin-bottom:.5rem; }
.bib-label-opcional{ text-transform:none; letter-spacing:0; }
.bib-textarea{
  width:100%; min-height:160px; resize:vertical;
  background:var(--bib-bg); border:1px solid var(--bib-border);
  border-radius:var(--bib-radius-sm); color:var(--bib-text);
  padding:.9rem; font-family:var(--font-body); font-size:.89rem;
  margin-bottom:1.2rem;
}
.bib-textarea:focus{ outline:none; border-color:var(--bib-accent); }
.bib-refs{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:.7rem; }
.bib-ref-thumb{ position:relative; width:64px; height:64px; border-radius:var(--bib-radius-sm); overflow:hidden; border:1px solid var(--bib-border); }
.bib-ref-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.bib-ref-remover{
  position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%;
  background:rgba(0,0,0,.75); color:#fff; border:none; font-size:.7rem; line-height:1;
}
.bib-upload-btn{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  background:var(--bib-glass-2); border:1px dashed var(--bib-border-strong);
  border-radius:var(--bib-radius-sm); padding:.55rem 1rem; font-size:.85rem; color:var(--bib-muted);
}
.bib-upload-btn:hover{ color:var(--bib-text); border-color:var(--bib-accent); }

.bib-modelos{ display:flex; flex-direction:column; gap:.7rem; margin-bottom:1rem; }
.bib-modelo-card{
  position:relative; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  background:var(--bib-bg); border:1px solid var(--bib-border);
  border-radius:var(--bib-radius-sm); padding:.85rem 1rem; text-align:left;
}
.bib-modelo-card:hover{ border-color:var(--bib-border-strong); }
.bib-modelo-card.is-selecionado{ border-color:var(--bib-accent); background:rgba(213,255,64,.06); }
.bib-modelo-emoji{ font-size:1.3rem; }
.bib-modelo-label{ font-family:var(--font-display); font-weight:600; }
.bib-modelo-nome{ color:var(--bib-muted); font-size:.82rem; flex:1; }
.bib-modelo-custo{ font-family:var(--font-mono); font-weight:600; color:var(--bib-accent); }
.bib-modelo-flag{
  position:absolute; top:-.6rem; left:1rem;
  background:var(--bib-accent); color:var(--bib-accent-ink);
  font-size:.65rem; font-weight:700; letter-spacing:.03em;
  padding:.15rem .5rem; border-radius:999px;
}
.bib-confirmacao{
  font-size:.79rem; color:var(--bib-muted); background:var(--bib-glass-2);
  border-radius:var(--bib-radius-sm); padding:.6rem .8rem; margin-bottom:1rem;
}
.bib-confirmacao strong{ color:var(--bib-accent); font-family:var(--font-mono); }
.bib-erro{ color:var(--bib-danger); background:var(--bib-danger-bg); border-radius:var(--bib-radius-sm); padding:.6rem .8rem; font-size:.85rem; margin-top:.8rem; }

.bib-resultado{ margin-top:2rem; }
.bib-resultado h2{ font-family:var(--font-display); font-size:1.2rem; margin-bottom:.8rem; }
.bib-resultado-card{ background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius); padding:1.2rem; max-width:520px; }
.bib-resultado-card img{ width:100%; border-radius:var(--bib-radius-sm); display:block; margin-bottom:1rem; }
.bib-resultado-acoes{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* galeria */
.bib-filtros{ display:flex; gap:.5rem; flex-wrap:wrap; }
.bib-filtro{
  background:var(--bib-glass); border:1px solid var(--bib-border); color:var(--bib-muted);
  border-radius:999px; padding:.4rem .9rem; font-size:.82rem;
}
.bib-filtro.is-ativo{ color:var(--bib-accent-ink); background:var(--bib-accent); border-color:var(--bib-accent); }
.bib-galeria-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1.2rem; margin-top:1.4rem; }
.bib-galeria-carregar-mais{ display:flex; justify-content:center; margin-top:1.8rem; }
.bib-galeria-carregar-mais[hidden]{ display:none; }
.bib-galeria-item{ background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius); overflow:hidden; }
.bib-galeria-item img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.bib-galeria-item-img.bib-galeria-item-video{ position:relative; }
.bib-galeria-item-img.bib-galeria-item-video video{ width:100%; aspect-ratio:1; object-fit:cover; display:block; pointer-events:none; }
.bib-galeria-item-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:2.3rem; height:2.3rem; border-radius:50%; background:rgba(0,0,0,.55); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.85rem; pointer-events:none;
}

.bib-vazio{ color:var(--bib-muted); font-size:.9rem; }

/* moedas */
.bib-saldo-card{ display:flex; flex-direction:column; gap:.4rem; max-width:320px; margin-bottom:1.6rem; }
.bib-saldo-grande{ font-family:var(--font-mono); font-size:2.2rem; font-weight:600; color:var(--bib-accent); }
.bib-subtitulo{ font-family:var(--font-display); font-size:1.1rem; margin:0 0 .8rem; }
.bib-historico{ display:flex; flex-direction:column; gap:.4rem; }
.bib-hist-item{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:var(--bib-glass); border:1px solid var(--bib-border);
  border-radius:var(--bib-radius-sm); padding:.7rem 1rem; font-size:.85rem;
}
.bib-hist-desc{ color:var(--bib-muted); }
.bib-hist-data{ font-family:var(--font-mono); font-size:.72rem; color:var(--bib-muted); }
.bib-hist-valor{ font-family:var(--font-mono); font-weight:600; font-variant-numeric:tabular-nums; }
.bib-hist-valor.is-credito{ color:var(--bib-accent); }
.bib-hist-valor.is-debito{ color:var(--bib-danger); }

/* planos */
.bib-planos-cobranca{ display:flex; justify-content:center; gap:.6rem; margin:0 auto 2rem; max-width:340px; }
.bib-planos-cobranca-opcao{
  font-family:var(--font-display); font-weight:600; font-size:.85rem; padding:.55rem 1.3rem;
  border-radius:999px; border:1px solid var(--bib-border);
}
.bib-planos-cobranca-opcao.is-ativa{ background:var(--bib-accent); color:var(--bib-accent-ink); border-color:var(--bib-accent); }
.bib-planos-cobranca-opcao.is-em-breve{ color:var(--bib-muted); }
.bib-planos-cobranca-opcao.is-em-breve em{ font-style:normal; font-size:.68rem; opacity:.7; margin-left:.3rem; }
.bib-planos-cobranca-opcao{ background:none; cursor:pointer; font-family:var(--font-display); color:var(--bib-text); }
.bib-planos-cobranca-opcao:not(.is-ativa):hover{ border-color:var(--bib-border-strong); }
.bib-plano-anual-aviso{ font-size:.72rem; color:var(--bib-muted); margin:.1rem 0 .5rem; line-height:1.4; }
.bib-plano-anual-aviso strong{ color:var(--bib-text); }
.bib-plano-anual-economia{ font-size:.8rem; color:var(--bib-accent); font-weight:700; margin:0 0 .9rem; }
.bib-plano-anual-parcelamento{ font-size:.74rem; color:var(--bib-muted); margin:-.5rem 0 .9rem; }
.bib-plano-moedas-info{ font-size:.72rem; color:var(--bib-muted); margin:.3rem 0 0; text-align:center; }

.bib-planos-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.1rem; align-items:stretch; max-width:1360px; margin:5.2rem auto 2rem; }
.bib-planos-grid[hidden]{ display:none; }
.bib-planos-grid > :nth-child(1){ --plano-cor:#F5C84C; }
.bib-planos-grid > :nth-child(2){ --plano-cor:#7DD3FC; }
.bib-planos-grid > :nth-child(3){ --plano-cor:#D5FF40; }
.bib-planos-grid > :nth-child(4){ --plano-cor:#C792EA; }
.bib-plano-card{
  position:relative; background:var(--bib-glass); border:1px solid var(--plano-cor,var(--bib-border));
  border-radius:var(--bib-radius); padding:1.5rem 1.3rem; display:flex; flex-direction:column; gap:0;
  transition:transform .15s ease;
}
.bib-plano-card::before{
  content:''; position:absolute; inset:0; z-index:0; opacity:.14; pointer-events:none;
  border-radius:inherit; background:radial-gradient(circle at 25% -10%, var(--plano-cor,transparent), transparent 65%);
}
.bib-plano-card.is-destaque{ z-index:2; }
.bib-plano-card > *{ position:relative; z-index:1; }
.bib-plano-card .bib-plano-cta{ background:var(--plano-cor,var(--bib-accent)); color:#0c0f06; border:none; }
.bib-plano-card.is-destaque{
  border-color:var(--bib-accent); box-shadow:0 0 0 1px var(--bib-accent), 0 0 40px rgba(213,255,64,.15);
}
.bib-plano-flag{
  position:absolute; top:-.7rem; left:1.4rem; background:var(--bib-accent); color:var(--bib-accent-ink);
  font-size:.68rem; font-weight:700; padding:.25rem .7rem; border-radius:999px; letter-spacing:.03em;
}
.bib-plano-cabecalho{ display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; }
.bib-plano-icone{ font-size:1.1rem; }
.bib-plano-nome{ font-family:var(--font-display); font-weight:700; letter-spacing:.05em; font-size:.85rem; text-transform:uppercase; }

.bib-plano-preco-linha{ display:flex; align-items:baseline; gap:.4rem; }
.bib-plano-preco{ font-family:var(--font-display); font-size:2rem; font-weight:800; }
.bib-plano-preco-periodo{ color:var(--bib-muted); font-size:.85rem; }
.bib-plano-desc{ color:var(--bib-muted); font-size:.85rem; margin:.4rem 0 1.2rem; line-height:1.4; }

.bib-plano-divisor{ height:1px; background:var(--bib-border); margin:1.2rem 0; }

.bib-plano-moedas-bloco{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.bib-plano-moedas-ic{ font-size:1.3rem; }
.bib-plano-moedas-valor{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; }
.bib-plano-moedas-label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bib-muted); }

.bib-plano-secao-titulo{
  display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bib-muted); margin-bottom:.7rem;
}
.bib-plano-modelos-secao{ border:1px solid var(--bib-border); border-radius:var(--bib-radius-sm); padding:.8rem .85rem; margin-bottom:.8rem; }
.bib-plano-modelos-secao .bib-plano-secao-titulo{ margin-bottom:.55rem; }
.bib-plano-modelos-grid{ display:flex; flex-wrap:wrap; gap:.4rem; }
.bib-plano-modelo-item{
  font-size:.66rem; color:var(--bib-text); white-space:nowrap;
  border:1px solid var(--bib-border-strong); border-radius:999px; padding:.28rem .7rem; background:var(--bib-glass-2);
}

.bib-plano-recursos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.bib-plano-recurso{ display:flex; align-items:flex-start; gap:.55rem; font-size:.85rem; }
.bib-plano-recurso-ic{ color:var(--bib-accent); font-weight:700; flex:0 0 auto; }
.bib-plano-recurso.is-bloqueado{ opacity:.4; }
.bib-plano-recurso.is-bloqueado .bib-plano-recurso-ic{ color:var(--bib-muted); }

.bib-plano-cta{ margin-top:1.4rem; text-align:center; display:flex; align-items:center; justify-content:center; gap:.4rem; }
.bib-plano-cta:disabled{ opacity:1; cursor:not-allowed; }
.bib-plano-cta-nota{
  display:block; text-align:center; margin-top:.6rem; font-size:.72rem; color:var(--bib-muted);
  font-family:var(--font-mono); letter-spacing:.03em;
}

.bib-planos-rodape{
  display:flex; flex-wrap:wrap; gap:1.4rem; background:var(--bib-glass); border:1px solid var(--bib-border);
  border-radius:var(--bib-radius); padding:1.4rem 1.6rem; margin:2.4rem 0 1.6rem;
}
.bib-planos-rodape-item{ display:flex; align-items:flex-start; gap:.6rem; flex:1 1 200px; }
.bib-planos-rodape-ic{ font-size:1.2rem; flex:0 0 auto; }
.bib-planos-rodape-item div{ display:flex; flex-direction:column; gap:.1rem; }
.bib-planos-rodape-item strong{ font-family:var(--font-display); font-weight:600; font-size:.88rem; }
.bib-planos-rodape-item span{ color:var(--bib-muted); font-size:.78rem; }

.bib-planos-nota{ text-align:center; color:var(--bib-muted); font-size:.78rem; margin:0 0 1rem; }

@media (max-width:640px){
  .bib-plano-modelos-grid{ grid-template-columns:1fr; }
  .bib-planos-cobranca{ flex-wrap:wrap; }
}

/* conta */
.bib-conta-card{ max-width:420px; display:flex; flex-direction:column; gap:.9rem; }
.bib-conta-card p{ margin:0; display:flex; flex-direction:column; gap:.2rem; }
.bib-conta-card .bib-btn{ align-self:flex-start; margin-top:.6rem; }

/* prompts - hero */
.bib-prompts-hero{ max-width:640px; margin:0 auto 1.6rem; text-align:center; }
.bib-eyebrow{
  display:inline-block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bib-muted); margin-bottom:.6rem;
}
.bib-prompts-hero-titulo{
  font-family:var(--font-display); font-weight:700; font-size:2rem; line-height:1.15;
  margin:0 0 .6rem; text-wrap:balance;
}
.bib-destaque{ color:var(--bib-accent); }

/* prompts - mini editor */
.bib-mini-editor{
  background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius);
  padding:1.3rem; margin:0 auto 1.8rem; max-width:720px;
}
.bib-mini-editor .bib-textarea{ min-height:90px; margin-bottom:1rem; }
.bib-mini-refs{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.bib-mini-ref-wrap{ position:relative; display:inline-flex; flex:0 0 auto; }
.bib-mini-ref-slot{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  width:76px; height:76px; border-radius:var(--bib-radius-sm); cursor:pointer;
  border:1px dashed var(--bib-border-strong); background:var(--bib-glass-2) center/cover no-repeat;
  color:var(--bib-muted);
}
.bib-mini-ref-slot:hover{ border-color:var(--bib-accent); color:var(--bib-text); }
.bib-mini-ref-slot.tem-imagem{ border-style:solid; border-color:var(--bib-accent); color:transparent; }
.bib-mini-ref-slot.tem-imagem .bib-mini-ref-plus,
.bib-mini-ref-slot.tem-imagem .bib-mini-ref-label{ display:none; }
.bib-mini-ref-plus{ font-size:1.2rem; line-height:1; }
.bib-mini-ref-label{ font-size:.68rem; text-align:center; line-height:1.25; }
.bib-mini-ref-dica{ font-size:.8rem; color:var(--bib-muted); }
.bib-mini-ref-slot[hidden]{ display:none; }
.bib-mini-ref-remover{
  display:none; position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%;
  background:var(--bib-bg-raised); border:1px solid var(--bib-border-strong); color:var(--bib-text);
  font-size:.85rem; line-height:1; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.bib-mini-ref-remover:hover{ background:var(--bib-accent); border-color:var(--bib-accent); color:#000; }
.bib-mini-ref-wrap:hover .bib-mini-ref-slot.tem-imagem ~ .bib-mini-ref-remover{ display:flex; }

/* Planos -- tabela comparativa "quantas geracoes cada plano da", no
   rodape da tela. Reaproveita a paleta padrao (lima pra imagem, azul pra
   video) so pra diferenciar visualmente as duas categorias nas linhas. */
.bib-comparativo-secao{ margin-top:5.2rem; }
.bib-comparativo-secao .bib-subtitulo-biblioteca, .bib-comparativo-secao .bib-view-sub{ text-align:center; }
.bib-comparativo-secao .bib-subtitulo-biblioteca{ text-transform:uppercase; letter-spacing:.02em; }
.bib-comparativo-secao .bib-titulo-destaque{ font-style:italic; }
.bib-comparativo-tabela-wrap{ overflow-x:auto; margin:1.6rem 0 1rem; border:1px solid var(--bib-border); border-radius:var(--bib-radius); }
.bib-comparativo-tabela{ width:100%; border-collapse:collapse; font-size:.85rem; white-space:nowrap; }
.bib-comparativo-tabela th, .bib-comparativo-tabela td{ padding:.5rem 1.1rem; text-align:left; border-bottom:1px solid var(--bib-border); }
.bib-comparativo-tabela thead th{ color:var(--bib-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; background:var(--bib-glass); }
.bib-comparativo-tabela tbody tr:last-child td{ border-bottom:none; }
.bib-comparativo-modelo{ font-weight:600; }
.bib-comparativo-tipo-selo{
  display:inline-block; margin-left:.5rem; padding:.15rem .5rem; border-radius:999px; font-size:.62rem;
  text-transform:uppercase; letter-spacing:.03em; font-weight:700; vertical-align:middle;
}
.bib-comparativo-tipo-selo.is-imagem{ background:rgba(213,255,64,.12); color:var(--bib-accent); }
.bib-comparativo-tipo-selo.is-video{ background:rgba(96,165,250,.14); color:#60A5FA; }
.bib-comparativo-valor{ font-family:var(--font-mono); font-weight:600; color:var(--bib-text); }
.bib-comparativo-nota{ font-size:.78rem; color:var(--bib-muted); }

/* Galeria de videos de exemplo na Inicio -- os videos ficam parados por
   padrao (sem autoplay) pra nao pesar a pagina; so tocam com o mouse em
   cima, e voltam ao inicio pausados quando o mouse sai. */
.bib-video-galeria-secao{ margin-top:calc(3rem + 50px); }
.bib-video-galeria-modelos{ display:flex; gap:.6rem; flex-wrap:wrap; margin:.9rem 0 1.7rem; }
.bib-video-galeria-modelo-badge{
  padding:.4rem 1.05rem; border-radius:999px; background:var(--bib-glass); border:1px solid var(--bib-border);
  font-size:.78rem; font-weight:700; color:var(--bib-accent); text-transform:uppercase; letter-spacing:.04em;
}
.bib-video-galeria-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:1.3rem; margin-bottom:1.8rem; }
.bib-video-galeria-item{
  position:relative; border-radius:var(--bib-radius); overflow:hidden; border:1px solid var(--bib-border);
  background:#000; aspect-ratio:16/9; cursor:pointer;
}
.bib-video-galeria-item video{ width:100%; height:100%; object-fit:cover; display:block; }

/* Minhas Criacoes -- alterna entre ver tudo junto, so imagens ou so
   videos. Usa um tom quente (creme) pro estado ativo de proposito, pra
   destacar desse controle do resto da interface (que e toda em lima/preto)
   e deixar claro que e um filtro de visualizacao, nao uma acao. */
.bib-tipo-toggle{ display:flex; gap:.5rem; margin:0 0 1.2rem; flex-wrap:wrap; }
.bib-tipo-toggle-btn{
  padding:.5rem 1.15rem; border-radius:999px; font-size:.74rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; background:var(--bib-bg); border:1px solid var(--bib-border); color:var(--bib-text);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.bib-tipo-toggle-btn:hover{ border-color:var(--bib-border-strong); }
.bib-tipo-toggle-btn.is-ativo{ background:#EEDFB6; border-color:#EEDFB6; color:#211a08; }

/* Gerar Video -- diferencia visualmente qual slot e o quadro inicial e
   qual e o final (last_frame), com uma cor propria pra cada, pra nao
   confundir quando os dois estao vazios lado a lado. */
.bib-mini-ref-slot-inicial{ border-color:rgba(56,189,248,.35); }
.bib-mini-ref-slot-inicial .bib-mini-ref-plus,
.bib-mini-ref-slot-inicial .bib-mini-ref-label{ color:#38BDF8; }
.bib-mini-ref-slot-inicial:hover{ border-color:#38BDF8; }
.bib-mini-ref-slot-inicial.tem-imagem{ border-color:#38BDF8; }

.bib-mini-ref-slot-final{ border-color:rgba(192,132,252,.35); }
.bib-mini-ref-slot-final .bib-mini-ref-plus,
.bib-mini-ref-slot-final .bib-mini-ref-label{ color:#C084FC; }
.bib-mini-ref-slot-final:hover{ border-color:#C084FC; }
.bib-mini-ref-slot-final.tem-imagem{ border-color:#C084FC; }
.bib-mini-editor-rodape{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.bib-mini-tabs{ display:flex; gap:.4rem; }
.bib-mini-tab{
  background:var(--bib-bg); border:1px solid var(--bib-border); color:var(--bib-muted);
  border-radius:999px; padding:.45rem .9rem; font-size:.8rem; display:inline-flex; align-items:center; gap:.4rem;
}
.bib-mini-tab.is-ativo{ border-color:var(--bib-accent); color:var(--bib-text); }
.bib-mini-tab:disabled{ cursor:not-allowed; opacity:.6; }
.bib-mini-tab-em-breve{ font-family:var(--font-mono); font-size:.62rem; color:var(--bib-muted); }

/* prompts - pills de categoria */
.bib-prompts-pills{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.bib-prompt-pill{
  background:var(--bib-glass); border:1px solid var(--bib-border); color:var(--bib-muted);
  border-radius:999px; padding:.5rem 1.1rem; font-size:.8rem; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase;
}
.bib-prompt-pill:hover{ border-color:var(--bib-border-strong); color:var(--bib-text); }
.bib-prompt-pill.is-ativo{ background:var(--bib-accent); border-color:var(--bib-accent); color:var(--bib-accent-ink); }
.bib-prompt-pill-todos{ border-style:dashed; }

/* prompts - grade de categorias */
.bib-prompts-cat-grid[hidden]{ display:none; }
.bib-prompts-cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; }
.bib-prompt-cat-card{
  position:relative; display:block; padding:0; border:1px solid var(--bib-border);
  border-radius:var(--bib-radius); overflow:hidden; aspect-ratio:1; background:var(--bib-glass);
  transition:border-color .15s ease, transform .15s ease;
}
.bib-prompt-cat-card:hover{ border-color:var(--bib-accent); transform:translateY(-2px); }
.bib-prompt-cat-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.bib-prompt-cat-card:hover img{ transform:scale(1.06); }
.bib-prompt-cat-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:.15rem;
  padding:.9rem .8rem; background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,.88) 100%);
  text-align:left;
}
.bib-prompt-cat-titulo{ font-family:var(--font-display); font-weight:600; color:#fff; font-size:.92rem; line-height:1.25; }
.bib-prompt-cat-total{ font-family:var(--font-mono); font-size:.7rem; color:var(--bib-accent); }

/* prompts - categoria aberta */
.bib-prompts-categoria-head{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.3rem; }
.bib-prompts-categoria-head[hidden]{ display:none; }
.bib-prompts-categoria-head h2{ font-family:var(--font-display); font-weight:600; font-size:1.25rem; margin:0; }
.bib-voltar-btn{
  background:var(--bib-glass); border:1px solid var(--bib-border); color:var(--bib-text);
  border-radius:999px; padding:.45rem .95rem; font-size:.82rem; flex:0 0 auto;
}
.bib-voltar-btn:hover{ border-color:var(--bib-border-strong); }
.bib-prompts-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.1rem; }
.bib-prompt-card{
  background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.bib-prompt-card img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.bib-prompt-card-corpo{ padding:.85rem .9rem 1rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.bib-prompt-texto{
  font-size:.78rem; color:var(--bib-muted); line-height:1.5; margin:0;
  max-height:4.6em; overflow:hidden; text-overflow:ellipsis;
}
.bib-prompt-acoes{ display:flex; gap:.5rem; margin-top:auto; }
.bib-prompt-acoes .bib-btn{ flex:1; padding:.5rem .6rem; font-size:.78rem; }

.bib-explorar-grid .bib-prompt-card img{ aspect-ratio:4/5; }
.bib-explorar-instagram{
  font-size:.68rem; color:var(--bib-muted); opacity:.6; letter-spacing:.01em;
}

/* biblioteca de prompts no mobile -- 2 cartoes lado a lado por fileira em vez
   de 1 so, pra aproveitar melhor a tela. Cartao fica menor, entao texto e
   botoes encolhem junto; botoes empilham (senao "Replicar Referencia" nao
   cabe ao lado de "Copiar Prompt" num cartao de metade da largura). */
@media (max-width:640px){
  .bib-prompts-grid{ grid-template-columns:repeat(2,1fr); gap:.6rem; }
  .bib-prompt-card-corpo{ padding:.6rem .6rem .75rem; gap:.5rem; }
  .bib-prompt-texto{ font-size:.7rem; max-height:3.2em; }
  .bib-prompt-acoes{ flex-direction:column; gap:.4rem; }
  .bib-prompt-acoes .bib-btn{ font-size:.7rem; padding:.5rem .4rem; }
}

/* criar imagem - barra superior (estilo gerador de video) */
/* sem linha divisoria e sem o respiro extra que sobrava antes dela --
   a barra fica leve, encostada no conteudo abaixo. */
.bib-criar-topbar{
  display:flex; align-items:center; justify-content:flex-end; gap:1rem;
  margin-bottom:1.4rem;
}
.bib-topbar-home{
  width:36px; height:36px; border-radius:50%; background:var(--bib-glass); border:1px solid var(--bib-border);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.bib-topbar-home:hover{ border-color:var(--bib-accent); }
.bib-topbar-nav{ display:flex; align-items:center; gap:1rem; font-size:.85rem; }
.bib-topbar-link{ background:none; border:none; color:var(--bib-text); font-weight:600; }
.bib-topbar-link:hover{ color:var(--bib-accent); }
.bib-topbar-sep{ color:var(--bib-border-strong); }
.bib-topbar-saldo{ font-family:var(--font-mono); color:var(--bib-accent); font-weight:600; font-variant-numeric:tabular-nums; }
.bib-topbar-conta{
  display:inline-flex; align-items:center; gap:.4rem; background:var(--bib-glass); border:1px solid var(--bib-border);
  border-radius:999px; padding:.4rem .9rem; color:var(--bib-text); font-weight:600;
}
.bib-topbar-conta:hover{ border-color:var(--bib-accent); }

/* criar imagem - dropdown customizado de modelo de IA */
.bib-modelo-dropdown{ position:relative; }
.bib-modelo-dropdown-atual{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:var(--bib-bg); border:1px solid var(--bib-border); border-radius:var(--bib-radius-sm);
  padding:.7rem .9rem; text-align:left;
}
.bib-modelo-dropdown.is-aberto .bib-modelo-dropdown-atual{ border-color:var(--bib-accent); }
.bib-modelo-dropdown-atual-texto{ display:flex; flex-direction:column; gap:.15rem; }
.bib-modelo-dropdown-atual-texto strong{ font-family:var(--font-display); font-size:.86rem; color:var(--bib-text); }
.bib-modelo-atual-selo{ font-family:var(--font-mono); font-size:.59rem; letter-spacing:.05em; color:var(--bib-accent); text-transform:uppercase; }
.bib-modelo-dropdown-seta{ color:var(--bib-muted); transition:transform .15s ease; }
.bib-modelo-dropdown.is-aberto .bib-modelo-dropdown-seta{ transform:rotate(180deg); }
.bib-modelo-dropdown-lista{
  position:absolute; top:calc(100% + .4rem); left:0; right:0; z-index:20;
  background:var(--bib-bg-raised); border:1px solid var(--bib-border-strong); border-radius:var(--bib-radius-sm);
  overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.bib-modelo-opcao{
  display:flex; flex-direction:column; gap:.2rem; width:100%; text-align:left;
  background:none; border:none; border-bottom:1px solid var(--bib-border); padding:.75rem .9rem;
}
.bib-modelo-opcao:last-child{ border-bottom:none; }
.bib-modelo-opcao:hover{ background:var(--bib-glass); }
.bib-modelo-opcao-nome{ font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--bib-text); }
.bib-modelo-opcao-desc{ font-size:.78rem; color:var(--bib-muted); }
.bib-modelo-opcao.is-bloqueado{ opacity:.5; cursor:not-allowed; }
.bib-modelo-opcao.is-bloqueado:hover{ background:none; }
.bib-modelo-opcao.is-bloqueado .bib-modelo-opcao-desc{ color:var(--bib-danger); }
.bib-modelo-opcao-selo{ font-family:var(--font-mono); font-size:.65rem; letter-spacing:.05em; color:var(--bib-accent); text-transform:uppercase; }

.bib-criar-galeria-embutida{ margin:2.2rem 0 0; }

/* criar imagem - novo layout 2 colunas (estilo gerador de video) */
.bib-criar-shell{ display:grid; grid-template-columns:360px 1fr; gap:1.4rem; align-items:start; min-height:70vh; }
@media (max-width:1024px){ .bib-criar-shell{ grid-template-columns:1fr; } }
.bib-criar-painel{
  background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius);
  padding:1.4rem; display:flex; flex-direction:column; gap:0;
}
.bib-criar-titulo{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; margin:0 0 1.2rem; }
.bib-label-sec{ display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--bib-muted); margin:1.1rem 0 .5rem; }
.bib-label-sec:first-of-type{ margin-top:0; }
.bib-criar-painel .bib-textarea{ min-height:110px; margin-bottom:0; }
.bib-refs-dica{ font-size:.72rem; color:var(--bib-muted); margin:.5rem 0 0; }
.bib-select{
  width:100%; background:var(--bib-bg); border:1px solid var(--bib-border); color:var(--bib-text);
  border-radius:var(--bib-radius-sm); padding:.7rem .8rem; font-family:var(--font-body); font-size:.88rem;
  appearance:none; cursor:pointer;
}
.bib-select:focus{ outline:none; border-color:var(--bib-accent); }
.bib-config-bloco{ margin-bottom:.9rem; }
.bib-config-rotulo{ display:block; font-size:.72rem; color:var(--bib-muted); margin-bottom:.5rem; }
.bib-pill-row{ display:flex; gap:.5rem; }
.bib-config-pill{
  flex:1; background:var(--bib-bg); border:1px solid var(--bib-border); color:var(--bib-muted);
  border-radius:var(--bib-radius-sm); padding:.55rem .5rem; font-size:.76rem; font-weight:600;
}
.bib-config-pill{ display:inline-flex; align-items:center; justify-content:center; gap:.35rem; }

/* iconezinhos de retangulo mostrando a proporcao de cada formato, do lado
   do numero -- ajuda quem nao sabe de cabeca o que 4:5/9:16/16:9 significam. */
.bib-formato-ic{
  display:inline-block; flex:0 0 auto; border:1.4px solid currentColor; border-radius:2px;
  opacity:.85; box-sizing:border-box;
}
.bib-formato-ic-11{ width:11px; height:11px; }
.bib-formato-ic-45{ width:9px; height:11px; }
.bib-formato-ic-916{ width:7px; height:12px; }
.bib-formato-ic-169{ width:15px; height:8px; }
.bib-config-pill.is-ativo{ border-color:var(--bib-accent); color:var(--bib-accent); background:rgba(213,255,64,.06); }

.bib-criar-preview{
  background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius);
  height:80vh; min-height:560px; display:flex; align-items:center; justify-content:center; padding:1.5rem; text-align:center;
  overflow:hidden;
}
.bib-preview-vazio[hidden]{ display:none; }
.bib-preview-vazio{ display:flex; flex-direction:column; align-items:center; gap:.7rem; max-width:340px; color:var(--bib-muted); }
.bib-preview-ic{ font-size:2.6rem; opacity:.6; }
#bib-demo-masc-inicio-caixa{ border:1px solid rgba(213,255,64,.35); box-shadow:inset 0 0 30px rgba(213,255,64,.07); }
#bib-demo-masc-inicio-vazio{ position:relative; }
#bib-demo-masc-inicio-vazio .bib-preview-ic{ color:var(--bib-accent); opacity:1; filter:drop-shadow(0 0 12px rgba(213,255,64,.55)); }
#bib-demo-masc-suporte-caixa{ border:1px solid rgba(213,255,64,.35); box-shadow:inset 0 0 30px rgba(213,255,64,.07); }
#bib-demo-masc-suporte-vazio{ position:relative; }
#bib-demo-masc-suporte-vazio .bib-preview-ic{ color:var(--bib-accent); opacity:1; filter:drop-shadow(0 0 12px rgba(213,255,64,.55)); }
#bib-demo-masc-pratica-caixa{ border:1px solid rgba(213,255,64,.35); box-shadow:inset 0 0 30px rgba(213,255,64,.07); }
#bib-demo-masc-pratica-vazio{ position:relative; }
#bib-demo-masc-pratica-vazio .bib-preview-ic{ color:var(--bib-accent); opacity:1; filter:drop-shadow(0 0 12px rgba(213,255,64,.55)); }
.bib-demo-brilho{ position:absolute; color:var(--bib-accent); font-size:.8rem; line-height:1; animation:bib-piscar-devagar 2.4s ease-in-out infinite; pointer-events:none; }
.bib-demo-brilho-1{ top:20%; left:20%; animation-delay:0s; }
.bib-demo-brilho-2{ top:18%; right:18%; font-size:.6rem; animation-delay:.6s; }
.bib-demo-brilho-3{ bottom:22%; left:16%; font-size:.55rem; animation-delay:1.2s; }
.bib-demo-brilho-4{ bottom:18%; right:22%; animation-delay:1.8s; }
@media (prefers-reduced-motion: reduce){ .bib-demo-brilho{ animation:none; } }
.bib-preview-vazio h2{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--bib-text); margin:0; }
.bib-preview-vazio p{ margin:0; font-size:.85rem; }
.bib-preview-resultado[hidden]{ display:none; }
.bib-preview-resultado{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.bib-preview-resultado img{
  flex:1; min-height:0; max-width:100%; width:auto; object-fit:contain; border-radius:var(--bib-radius-sm); display:block;
  cursor:zoom-in; transition:transform .15s ease;
}
.bib-preview-resultado img:hover{ transform:scale(1.015); }

/* video gerado (Gerar Video) nao tinha regra propria -- ficava no tamanho nativo,
   estourava o container (que tem overflow:hidden) e empurrava o botao Baixar pra fora
   da area visivel. Mesma logica de enquadramento do resultado de imagem. */
.bib-preview-resultado video{
  flex:1; min-height:0; max-width:100%; max-height:100%; width:auto; object-fit:contain; border-radius:var(--bib-radius-sm); display:block; background:#000;
}

/* minhas criacoes - card com prompt/data/acoes sempre visiveis */
.bib-galeria-item{
  display:flex; flex-direction:column; background:var(--bib-glass); border:1px solid var(--bib-border);
  border-radius:var(--bib-radius); overflow:hidden;
}
.bib-galeria-item-img{ cursor:pointer; }
.bib-galeria-item-img img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.bib-galeria-item-corpo{ padding:.9rem 1rem 1.1rem; display:flex; flex-direction:column; gap:.5rem; }
.bib-galeria-item-meta{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.05em; text-transform:uppercase; color:var(--bib-muted); }
.bib-galeria-item-prompt{
  font-size:.78rem; color:var(--bib-muted); line-height:1.5; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.bib-galeria-item-acoes{ display:flex; gap:.4rem; margin-top:.3rem; }
.bib-galeria-item-acoes .bib-btn{ flex:1; padding:.45rem .3rem; font-size:.7rem; white-space:nowrap; }

/* minhas criacoes - modal de detalhe (fechar + navegar entre imagens) */
.bib-galeria-detalhe[hidden]{ display:none; }
.bib-galeria-detalhe{
  position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.78);
  display:flex; align-items:center; justify-content:center; padding:2rem; overflow:auto;
}
.bib-galeria-detalhe-card{
  position:relative; background:var(--bib-bg-raised); border:1px solid var(--bib-border-strong);
  border-radius:var(--bib-radius); max-width:1100px; width:100%; max-height:calc(100vh - 4rem);
  overflow:auto; padding:2rem; box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.bib-galeria-detalhe-fechar{
  position:absolute; top:1rem; right:1rem; width:34px; height:34px; border-radius:50%; z-index:5;
  background:var(--bib-glass); border:1px solid var(--bib-border); color:var(--bib-text); font-size:1.2rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.bib-galeria-detalhe-fechar:hover{ border-color:var(--bib-accent); }
.bib-galeria-detalhe-corpo{ display:grid; grid-template-columns:3fr 2fr; gap:1.8rem; align-items:start; }
@media (max-width:860px){ .bib-galeria-detalhe-corpo{ grid-template-columns:1fr; } .bib-galeria-detalhe{ padding:1rem; } .bib-galeria-detalhe-card{ padding:1.2rem; } }
.bib-galeria-detalhe-imagem{ position:relative; }
.bib-galeria-detalhe-imagem img{ width:100%; border-radius:var(--bib-radius); display:block; border:1px solid var(--bib-border); }
.bib-galeria-detalhe-imagem video{ width:100%; border-radius:var(--bib-radius); display:block; border:1px solid var(--bib-border); background:#000; }
.bib-galeria-detalhe-imagem video[hidden]{ display:none; }
.bib-galeria-detalhe-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
  background:rgba(10,10,10,.75); border:1px solid var(--bib-border-strong); color:var(--bib-text); font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
}
.bib-galeria-detalhe-anterior{ left:.8rem; }
.bib-galeria-detalhe-proximo{ right:.8rem; }
.bib-galeria-detalhe-nav:hover{ border-color:var(--bib-accent); }
.bib-galeria-detalhe-info{ display:flex; flex-direction:column; gap:.9rem; padding-top:.4rem; }
.bib-galeria-detalhe-meta{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--bib-muted); }
.bib-galeria-detalhe-info p{ color:var(--bib-text); font-size:.92rem; line-height:1.6; margin:0; }
#bib-galeria-detalhe-prompt{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden;
}
.bib-galeria-detalhe-links{ display:flex; justify-content:center; gap:1.4rem; margin-top:.2rem; }
.bib-link-sutil{ background:none; border:none; color:var(--bib-muted); font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.2rem; }
.bib-link-sutil:hover{ color:var(--bib-accent); }

/* sidebar - botoes de suporte */
.bib-sidebar-suporte{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.bib-suporte-btn{
  display:flex; align-items:center; gap:.6rem; background:var(--bib-glass); border:1px solid var(--bib-border);
  color:var(--bib-text); border-radius:var(--bib-radius-sm); padding:.55rem .75rem; font-size:.85rem; font-weight:500;
}
.bib-suporte-btn:hover{ border-color:var(--bib-border-strong); }
.bib-suporte-btn-whatsapp{ border-color:rgba(37,211,102,.35); color:#25D366; }
.bib-suporte-btn-whatsapp:hover{ border-color:#25D366; }
.bib-suporte-btn-ic{ font-size:1rem; }

/* modal generico (usado pelo Suporte / FAQ) */
.bib-modal-overlay[hidden]{ display:none; }
.bib-modal-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.78);
  display:flex; align-items:center; justify-content:center; padding:2rem; overflow:auto;
}
.bib-modal-card{
  position:relative; background:var(--bib-bg-raised); border:1px solid var(--bib-border-strong);
  border-radius:var(--bib-radius); max-width:640px; width:100%; max-height:calc(100vh - 4rem);
  overflow:auto; padding:2rem; box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.bib-modal-titulo{ font-family:var(--font-display); font-weight:700; font-size:1.35rem; margin:.3rem 0 1.4rem; }

/* caixa "voce ja tem acesso?" (login) -- variante compacta e centralizada
   do modal generico, com botoes empilhados e um X pra fechar sem responder. */
.bib-modal-overlay{ opacity:0; transition:opacity .25s ease; pointer-events:none; z-index:500000; }
.bib-modal-overlay.is-visivel{ opacity:1; pointer-events:auto; }
.bib-modal-acesso{
  max-width:400px; text-align:center; padding:2.2rem 1.8rem 1.8rem;
  transform:translateY(10px); transition:transform .25s ease;
}
.bib-modal-overlay.is-visivel .bib-modal-acesso{ transform:translateY(0); }
.bib-modal-acesso .bib-modal-titulo{
  text-align:center; text-transform:uppercase; font-size:1.05rem; line-height:1.45; margin:.6rem 0 1.7rem;
}
.bib-modal-acesso .bib-btn{ display:block; width:100%; margin-bottom:.7rem; }
.bib-modal-acesso .bib-btn:last-child{ margin-bottom:0; }
.bib-modal-fechar{
  position:absolute; top:.8rem; right:.9rem; background:none; border:none; color:var(--bib-muted);
  font-size:1.3rem; line-height:1; cursor:pointer; padding:.3rem;
}
.bib-modal-fechar:hover{ color:var(--bib-text); }
.bib-faq-lista{ display:flex; flex-direction:column; gap:.6rem; }
.bib-faq-lista details{
  background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius-sm); padding:.9rem 1rem;
}
.bib-faq-lista summary{
  cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--bib-text);
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:.6rem;
}
.bib-faq-lista summary::-webkit-details-marker{ display:none; }
.bib-faq-lista summary::after{ content:'+'; color:var(--bib-accent); font-size:1.1rem; flex:0 0 auto; }
.bib-faq-lista details[open] summary::after{ content:'−'; }
.bib-faq-lista p{ margin:.7rem 0 0; font-size:.85rem; color:var(--bib-muted); line-height:1.6; }

/* criar imagem - biblioteca de prompts embutida embaixo */
.bib-criar-prompts-biblioteca{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--bib-border); }

/* Inicio: 'Prompts em destaque' estava com titulo, pilulas de filtro e
   imagens muito colados uns nos outros -- respiro maior entre os tres. */
[data-view="inicio"] .bib-subtitulo-biblioteca{ margin-bottom:1.1rem; }
[data-view="inicio"] .bib-prompts-pills{ margin-bottom:2rem; }
.bib-subtitulo-biblioteca{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; margin:0 0 .4rem; }
[data-view="suporte"] .bib-subtitulo-biblioteca{ text-align:center; }

/* inicio - badge + titulo em destaque + ctas */
.bib-inicio-badge{
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--bib-accent); border:1px solid var(--bib-accent);
  border-radius:999px; padding:.3rem .8rem; margin-bottom:.9rem;
}
.bib-inicio-badge-dot{
  display:inline-block; width:.5em; height:.5em; border-radius:50%; background:var(--bib-accent);
  animation:bib-piscar-devagar 2.2s ease-in-out infinite;
}
@keyframes bib-piscar-devagar{ 0%,100%{ opacity:1; } 50%{ opacity:.2; } }
@media (prefers-reduced-motion: reduce){ .bib-inicio-badge-dot{ animation:none; } }
.bib-inicio-titulo{
  font-family:var(--font-display); font-weight:800; font-size:2.1rem; line-height:1.15; text-transform:uppercase;
  margin:0 0 .7rem; text-wrap:balance;
}
/* so no titulo da tela Inicio (nao mexe no mesmo h1 reaproveitado em Extrair/Suporte/Planos) */
[data-view="inicio"] .bib-inicio-titulo{ font-size:2.5rem; }
.bib-titulo-destaque{ color:var(--bib-accent); }
.bib-inicio-ctas{ display:flex; justify-content:center; flex-wrap:wrap; gap:.8rem; margin:0 0 2.4rem; }

/* como funciona - demonstracao com 2 imagens */
.bib-como-demo{
  display:flex; align-items:center; justify-content:center; gap:1.4rem; flex-wrap:wrap; margin:0 auto 1rem; max-width:760px;
}
.bib-como-demo-item{ display:flex; flex-direction:column; align-items:center; gap:.6rem; flex:1; min-width:110px; max-width:150px; }
.bib-como-demo-label{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--bib-muted);
}
.bib-como-demo-item img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--bib-radius); border:1px solid var(--bib-border);
}
.bib-como-demo-seta{ font-size:1.6rem; color:var(--bib-accent); flex:0 0 auto; }
.bib-como-demo-grupo{ display:flex; flex-direction:column; gap:2.4rem; margin:0 auto 1rem; max-width:900px; }
.bib-como-demo-set{ display:flex; align-items:center; justify-content:center; gap:.9rem; flex-wrap:wrap; }
.bib-como-demo-conector{ font-size:1.3rem; color:var(--bib-accent); font-weight:700; flex:0 0 auto; }
.bib-como-demo-legenda{
  text-align:center; color:var(--bib-muted); font-size:.85rem; max-width:560px; margin:0 auto 1.6rem;
}

.bib-como-extrai-resultado{ display:flex; flex-direction:column; align-items:center; gap:.6rem; flex:1; min-width:220px; max-width:340px; }
.bib-como-extrai-resultado-caixa{
  width:100%; background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius); padding:1rem 1.2rem;
}
.bib-como-extrai-resultado-caixa p{ margin:0; font-size:.85rem; line-height:1.6; color:var(--bib-text); font-style:italic; }
.bib-como-extrai-cta{ display:flex; justify-content:center; margin:0 0 1.6rem; }

/* espacamento entre as sessoes do Como Funciona (Vantagens / Extrair Prompt /
   Planos ficavam praticamente coladas uma na outra) e titulos um pouco maiores,
   so nessa tela -- as outras telas que usam .bib-subtitulo-biblioteca continuam iguais. */
.bib-view[data-view="como-funciona"]{ max-width:1180px; margin:0 auto; }
[data-view="como-funciona"] .bib-subtitulo-biblioteca{ font-size:1.7rem; margin-top:0; }

/* planos - creditos extras (pacotes avulsos). Visual de proposito diferente
   do .bib-plano-card (cartao vertical, preco grande, lista de recursos) --
   aqui e uma faixa horizontal compacta com o coin em destaque, pra nunca
   parecer "mais um tier de plano" e sim uma compra avulsa separada. */
.bib-creditos-secao{ max-width:900px; margin:60px auto 0; text-align:center; }
.bib-creditos-secao .bib-view-sub{ max-width:56ch; margin:0 auto 1.8rem; }
.bib-creditos-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; text-align:left; }
.bib-creditos-grid > :nth-child(1){ --cred-cor:#4ADE80; }
.bib-creditos-grid > :nth-child(2){ --cred-cor:#60A5FA; }
.bib-creditos-grid > :nth-child(3){ --cred-cor:#C792EA; }
.bib-creditos-grid > :nth-child(4){ --cred-cor:#FF8A3D; }
.bib-creditos-card{
  position:relative; overflow:hidden; transition:transform .15s ease, border-color .15s ease;
  background:var(--bib-glass); border:1px solid var(--cred-cor); border-radius:var(--bib-radius);
  padding:1.3rem 1.1rem; display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
}
.bib-creditos-card::before{
  content:''; position:absolute; inset:0; z-index:0; opacity:.18; pointer-events:none;
  background:radial-gradient(circle at 25% -10%, var(--cred-cor), transparent 65%);
}
.bib-creditos-card > *{ position:relative; z-index:1; }
.bib-creditos-card:hover{ transform:translateY(-3px); }
.bib-creditos-card .bib-btn{ background:var(--cred-cor); color:#0c0f06; border:none; font-weight:700; }
.bib-creditos-card .bib-btn:hover{ filter:brightness(1.08); }
.bib-creditos-emoji{ font-size:1.6rem; line-height:1; }
.bib-creditos-nome{ font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--bib-text); }
.bib-creditos-moedas{ font-family:var(--font-mono); font-weight:600; font-size:1.1rem; color:var(--bib-accent); }
.bib-creditos-moedas small{ font-family:var(--font-body); font-weight:400; font-size:.68rem; color:var(--bib-muted); text-transform:uppercase; letter-spacing:.04em; }
.bib-creditos-preco{ font-family:var(--font-mono); font-size:.85rem; color:var(--bib-muted); margin-bottom:.3rem; }
.bib-creditos-card .bib-btn{ width:100%; margin-top:.2rem; }
.bib-creditos-nota{ font-size:.78rem; color:var(--bib-muted); margin:1.6rem 0 0; }
@media (max-width:520px){ .bib-creditos-grid{ grid-template-columns:1fr 1fr; } }

/* como funciona - todos os titulos da pagina em caixa alta, consistente com
   o titulo do hero e do card do Extrair Prompt (que ja nasceram maiusculos). */
[data-view="como-funciona"] .bib-subtitulo-biblioteca{ text-transform:uppercase; }

/* como funciona - destaque do curso Forja Visual IA. Cor propria (ambar),
   de proposito diferente do verde do resto do app -- remete ao nome "Forja"
   (calor/fogo) e faz esse CTA de venda do curso parar de se confundir com o
   resto da pagina, que e toda sobre a Biblioteca em si. */
.bib-forja-destaque{
  position:relative; overflow:hidden; text-align:center; max-width:720px; margin:0 auto;
  padding:3rem 2.2rem; border-radius:calc(var(--bib-radius) + 6px);
  background:radial-gradient(circle at 50% 0%, rgba(255,138,61,.16), rgba(255,138,61,.03) 60%), var(--bib-glass);
  border:1px solid rgba(255,138,61,.35);
  box-shadow:0 0 60px rgba(255,138,61,.08);
}
.bib-forja-badge{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:#FFB86B; border:1px solid #FFB86B;
  border-radius:999px; padding:.3rem .8rem; margin-bottom:1.1rem;
}
.bib-forja-titulo{
  position:relative; z-index:1; font-family:var(--font-display); font-weight:800; font-size:1.9rem; line-height:1.22;
  text-transform:uppercase; margin:0 0 1rem; text-wrap:balance;
}
.bib-forja-titulo em{ display:block; font-style:italic; color:#FFB86B; margin-top:.3rem; }
.bib-forja-texto{ position:relative; z-index:1; color:var(--bib-muted); font-size:.95rem; line-height:1.6; max-width:52ch; margin:0 auto 1.8rem; }
.bib-forja-cta{ position:relative; z-index:1; }
.bib-forja-btn{ background:#FFB86B; color:#241304; border:none; }
.bib-forja-btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.bib-forja-brilho{ position:absolute; color:#FFB86B; opacity:.6; font-size:.85rem; animation:bib-piscar-devagar 2.4s ease-in-out infinite; }
.bib-forja-brilho-1{ top:12%; left:8%; animation-delay:0s; }
.bib-forja-brilho-2{ top:20%; right:10%; animation-delay:.8s; }
.bib-forja-brilho-3{ bottom:16%; left:16%; animation-delay:1.6s; }
@media (prefers-reduced-motion: reduce){ .bib-forja-brilho{ animation:none; } }
@media (max-width:560px){ .bib-forja-destaque{ padding:2.2rem 1.4rem; } .bib-forja-titulo{ font-size:1.5rem; } }

/* landing page: cada bloco (hero, vantagens, extrair-prompt, planos) recebe
   100px de respiro em cima e embaixo, sem acumular com o padding da propria
   .bib-main no topo/rodape da pagina. O banner (1o bloco) fica de fora --
   :first-child abaixo zera o topo dele, entao esse respiro maior so entra
   a partir do espaco ANTES da 2a secao (Vantagens) em diante. */
[data-view="como-funciona"] .bib-landing-secao{ margin:150px 0; }
[data-view="como-funciona"] .bib-landing-secao:first-child{ margin-top:0; }
[data-view="como-funciona"] .bib-landing-secao:last-child{ margin-bottom:0; }

/* cards de Vantagens maiores, com mais informacao (lista de destaques) e uma
   cor de identidade propria por card -- so na tela Como Funciona, pra nao
   mudar os cards identicos que aparecem em Inicio/Suporte. */
[data-view="como-funciona"] .bib-como-vantagens{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.4rem; }
@media (max-width:760px){
  [data-view="como-funciona"] .bib-como-vantagens{ grid-template-columns:repeat(2, 1fr); gap:.9rem; }
}
[data-view="como-funciona"] .bib-vantagem-card{
  padding:1.8rem 1.6rem; gap:.7rem; border-top:3px solid var(--vc-forte,var(--bib-accent));
  background:linear-gradient(180deg, var(--vc-fraca,transparent), transparent 45%), var(--bib-glass);
}
[data-view="como-funciona"] .bib-como-vantagens .bib-vantagem-card:nth-child(1){ --vc-fraca:rgba(213,255,64,.16); --vc-forte:#D5FF40; }
[data-view="como-funciona"] .bib-como-vantagens .bib-vantagem-card:nth-child(2){ --vc-fraca:rgba(94,234,212,.16); --vc-forte:#5EEAD4; }
[data-view="como-funciona"] .bib-como-vantagens .bib-vantagem-card:nth-child(3){ --vc-fraca:rgba(255,184,107,.16); --vc-forte:#FFB86B; }
[data-view="como-funciona"] .bib-como-vantagens .bib-vantagem-card:nth-child(4){ --vc-fraca:rgba(199,146,234,.16); --vc-forte:#C792EA; }
[data-view="como-funciona"] .bib-como-vantagens .bib-vantagem-card:nth-child(5){ --vc-fraca:rgba(255,107,157,.16); --vc-forte:#FF6B9D; }
.bib-como-vantagens .bib-vantagem-card:nth-child(6){ --vc-fraca:rgba(56,189,248,.16); --vc-forte:#38BDF8; }
[data-view="como-funciona"] .bib-como-vantagens .bib-vantagem-card:nth-child(6){ --vc-fraca:rgba(56,189,248,.16); --vc-forte:#38BDF8; }
[data-view="como-funciona"] .bib-vantagem-ic{
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:14px; font-size:1.6rem; background:var(--vc-fraca,var(--bib-glass-2));
}
[data-view="como-funciona"] .bib-vantagem-card h3{ font-size:1.1rem; }
[data-view="como-funciona"] .bib-vantagem-lista{ list-style:none; margin:.3rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
[data-view="como-funciona"] .bib-vantagem-lista li{
  font-size:.78rem; color:var(--bib-muted); line-height:1.4; display:flex; align-items:flex-start; gap:.45rem;
}
[data-view="como-funciona"] .bib-vantagem-lista li::before{ content:'✓'; color:var(--vc-forte,var(--bib-accent)); font-weight:700; flex:0 0 auto; }

/* imagem de exemplo do Extrair Prompt maior e com mais respiro, sem mexer nos
   outros usos de .bib-como-demo-item/.bib-como-demo-set (demo do homem/mulher). */
.bib-como-extrai-sub{ margin-bottom:2.2rem; }
.bib-como-extrai-demo{ gap:2rem; margin-bottom:1.8rem; }
.bib-como-extrai-demo .bib-como-demo-item{ max-width:260px; }
.bib-como-extrai-demo .bib-como-demo-item{ gap:1rem; }
.bib-como-extrai-demo .bib-como-extrai-resultado{ max-width:380px; gap:1rem; }

.bib-como-divisor{
  display:flex; align-items:center; gap:1rem; max-width:460px; margin:0 auto 2rem; color:var(--bib-muted);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
}
.bib-como-divisor::before, .bib-como-divisor::after{ content:''; flex:1; height:1px; background:var(--bib-border-strong); }

.bib-como-aviso{
  max-width:760px; margin:0 auto 2.4rem; background:rgba(213,255,64,.06); border:1px solid var(--bib-accent);
  border-radius:var(--bib-radius); padding:1.2rem 1.4rem; font-size:.88rem; color:var(--bib-text); line-height:1.6;
  display:flex; align-items:center; gap:1.1rem; text-align:left;
}
.bib-como-aviso strong{ color:var(--bib-accent); }
.bib-como-aviso-ic{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; background:rgba(213,255,64,.1); border:1px solid var(--bib-accent);
}
.bib-como-aviso-texto{ margin:0; flex:1; }
.bib-como-aviso-cta{
  flex:0 0 auto; background:var(--bib-accent); color:var(--bib-accent-ink); border:none; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:.76rem; padding:.5rem 1rem; border-radius:999px;
  white-space:nowrap; transition:transform .15s ease;
}
.bib-como-aviso-cta:hover{ transform:translateY(-1px); }
@media (max-width:560px){ .bib-como-aviso{ flex-direction:column; text-align:center; } }

/* como funciona - grade de vantagens */
.bib-como-vantagens{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-bottom:2.4rem; }
.bib-vantagem-card{
  background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius); padding:1.3rem;
  display:flex; flex-direction:column; gap:.4rem; cursor:pointer; transition:border-color .15s ease, transform .15s ease; text-align:left;
}
.bib-vantagem-card:hover{ border-color:var(--bib-accent); transform:translateY(-2px); }
.bib-vantagem-ic{ font-size:1.5rem; }
.bib-vantagem-card h3{ font-family:var(--font-display); font-weight:600; font-size:.98rem; margin:0; }
.bib-vantagem-card p{ color:var(--bib-muted); font-size:.83rem; margin:0; line-height:1.5; }

/* como funciona - card de destaque do Extrair Prompt (imagem + texto) */
.bib-extrair-destaque{ display:grid; grid-template-columns:minmax(260px,420px) 1fr; gap:2.6rem; align-items:center; margin:1.5rem auto 1rem; max-width:1100px; }
[data-view="inicio"] .bib-extrair-destaque{ margin-top:0; margin-bottom:154px; }
/* variante com texto a esquerda e imagem a direita (secao de Restaurar
   Imagem em Como Funciona) -- inverte as colunas do grid mantendo a mesma
   largura de cada uma, so troca de lado. */
.bib-extrair-destaque-invertido{ grid-template-columns:1fr minmax(260px,420px); }
.bib-extrair-destaque-img img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border-radius:var(--bib-radius); }
.bib-extrair-destaque-img video{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border-radius:var(--bib-radius); background:#000; cursor:pointer; }

/* como funciona - destaque do Restaurar Imagem: comparador antes/depois
   estatico (mesma logica visual da tela de Restaurar Imagem, mas aqui o
   container tem tamanho fixo via aspect-ratio -- nao ha irmaos disputando
   altura como na tela real, entao nao precisa da estrutura flex/quadro). */
.bib-restaurar-destaque-comparador{
  position:relative; width:100%; aspect-ratio:4/5; border-radius:var(--bib-radius);
  overflow:hidden; background:var(--bib-glass-2); touch-action:none; user-select:none;
}
.bib-restaurar-destaque-depois{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.bib-restaurar-destaque-antes-wrap{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  clip-path:inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.bib-restaurar-destaque-antes-wrap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.bib-extrair-destaque-texto{ text-align:left; }
.bib-extrair-destaque-titulo{
  font-family:var(--font-display); font-weight:800; font-size:2rem; line-height:1.2; text-transform:uppercase;
  margin:0 0 1rem; text-wrap:balance;
}
.bib-extrair-destaque-titulo em{ display:block; font-style:italic; color:var(--bib-accent); margin-top:.25rem; }
.bib-extrair-destaque-texto .bib-view-sub{ text-align:left; margin:0 0 1.2rem; max-width:46ch; }
.bib-extrair-destaque-fluxo{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--bib-accent);
  margin:0 0 1.6rem;
}
@media (max-width:760px){
  .bib-extrair-destaque{ grid-template-columns:1fr; gap:1.6rem; text-align:center; }
  .bib-extrair-destaque-texto{ text-align:center; }
  .bib-extrair-destaque-texto .bib-view-sub{ margin-left:auto; margin-right:auto; text-align:center; }
  .bib-extrair-destaque-titulo em{ display:inline; }

  /* so no Extrair Prompt (secao 'Viu uma imagem...'), no mobile: titulo e
     descricao vem antes da imagem, pra leitura ficar mais organizada.
     A secao de Restaurar Imagem (.bib-extrair-destaque-invertido) ja tem
     o texto primeiro no HTML, entao nao precisa (e nao deve) dessa regra. */
  .bib-extrair-destaque:not(.bib-extrair-destaque-invertido) .bib-extrair-destaque-texto{ order:1; }
  .bib-extrair-destaque:not(.bib-extrair-destaque-invertido) .bib-extrair-destaque-img{ order:2; }
}

/* como funciona - mini tutorial "quer uma replicacao mais fiel" */
.bib-fidelidade-passos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.1rem; margin:1.8rem 0 2rem; }
.bib-fidelidade-passo{
  background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius); padding:1.4rem;
  display:flex; flex-direction:column; gap:.6rem; text-align:left;
}
.bib-fidelidade-passo-num{
  font-family:var(--font-mono); font-weight:700; font-size:.78rem; color:var(--bib-accent-ink); background:var(--bib-accent);
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.bib-fidelidade-passo h3{ font-family:var(--font-display); font-weight:600; font-size:1rem; margin:0; color:var(--bib-text); }
.bib-fidelidade-passo p{ color:var(--bib-muted); font-size:.85rem; margin:0; line-height:1.55; }
.bib-fidelidade-dica{
  margin-top:.3rem; display:flex; gap:.5rem; align-items:flex-start; font-size:.8rem; color:var(--bib-text);
  background:rgba(213,255,64,.06); border:1px solid rgba(213,255,64,.25); border-radius:var(--bib-radius-sm); padding:.7rem .9rem;
}
.bib-fidelidade-lista{ list-style:none; margin:.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.bib-fidelidade-lista li{ font-size:.84rem; color:var(--bib-text); display:flex; gap:.5rem; align-items:center; }
.bib-fidelidade-final{
  max-width:640px; margin:.4rem auto 1.8rem; text-align:center; font-family:var(--font-display); font-weight:600;
  font-size:1.05rem; line-height:1.5; color:var(--bib-text);
}

/* suporte - cards de contato */
.bib-suporte-contatos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; max-width:640px; margin:0 auto 2.4rem; }
.bib-contato-card{
  display:flex; align-items:flex-start; gap:.8rem; background:var(--bib-glass); border:1px solid var(--bib-border);
  border-radius:var(--bib-radius); padding:1.1rem; text-align:left;
}
.bib-contato-card:hover{ border-color:var(--bib-accent); }
.bib-contato-ic{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:var(--bib-glass-2); border:1px solid var(--bib-border);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.bib-contato-corpo{ display:flex; flex-direction:column; gap:.2rem; }
.bib-contato-corpo strong{ font-family:var(--font-display); font-size:.92rem; }
.bib-contato-corpo span{ font-size:.8rem; color:var(--bib-muted); line-height:1.4; }

/* suporte - faq + cta final */
#bib-faq-lista{ max-width:760px; margin:0 auto 2rem; }
.bib-suporte-cta-final{
  max-width:640px; margin:0 auto 3rem; text-align:center; border:1px dashed var(--bib-border-strong);
  border-radius:var(--bib-radius); padding:1.6rem;
}
.bib-suporte-cta-final p{ color:var(--bib-muted); font-size:.9rem; margin:0 0 1rem; }
.bib-suporte-cta-botoes{ display:flex; justify-content:center; flex-wrap:wrap; gap:.7rem; }
.bib-suporte-como-funciona{ padding-top:2.4rem; border-top:1px solid var(--bib-border); }

/* minha conta - novo layout */
.bib-conta-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:1.2rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.bib-conta-nome{ font-family:var(--font-display); font-weight:700; font-size:1.7rem; margin:.3rem 0 .2rem; }
.bib-conta-email{ color:var(--bib-muted); font-size:.88rem; margin:0; }
.bib-conta-header-acoes{ display:flex; gap:.7rem; flex-wrap:wrap; }

.bib-conta-cards-topo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-bottom:1.4rem; }
.bib-conta-mini-card{ display:flex; flex-direction:column; gap:.5rem; }
.bib-conta-mini-rotulo{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bib-muted); }
.bib-conta-mini-valor{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; }
.bib-conta-mini-sub{ font-size:.78rem; color:var(--bib-muted); }
.bib-conta-mini-card .bib-btn{ margin-top:.3rem; }
.bib-conta-mini-card .bib-link-sutil{ align-self:center; }

.bib-conta-secao{ margin-bottom:1.2rem; display:flex; flex-direction:column; gap:.8rem; align-items:flex-start; }
.bib-conta-secao h2{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; margin:0; }
.bib-conta-secao-botoes{ display:flex; gap:.7rem; flex-wrap:wrap; }

.bib-form-senha{ display:flex; flex-direction:column; gap:0; width:100%; max-width:360px; }
.bib-form-senha .bib-label-sec:first-child{ margin-top:0; }
.bib-form-senha button[type="submit"]{ margin-top:.8rem; align-self:flex-start; }
.bib-senha-sucesso{
  color:var(--bib-accent); background:rgba(213,255,64,.08); border-radius:var(--bib-radius-sm);
  padding:.6rem .8rem; font-size:.85rem; margin:.4rem 0 0;
}

/* como funciona - demo interativo (fictício, sem chamada real) */
.bib-demo-interativo{
  display:flex; flex-direction:column; align-items:center; gap:1.2rem;
  margin:0 auto; padding:1.6rem; max-width:820px;
  background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius);
}
.bib-demo-interativo-fluxo{
  display:flex; align-items:center; justify-content:center; gap:.8rem; flex-wrap:nowrap; width:100%;
}
.bib-demo-interativo-fluxo .bib-como-demo-item, .bib-demo-interativo-fluxo .bib-demo-interativo-item-resultado{ min-width:0; max-width:190px; flex:1 1 190px; }
.bib-demo-interativo-item-resultado{ display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.bib-demo-interativo-dica{ font-size:.72rem; color:var(--bib-muted); font-family:var(--font-mono); letter-spacing:.03em; }
.bib-demo-interativo-btn{ min-width:200px; }
.bib-demo-interativo-seta{ font-size:1.4rem; flex:0 0 auto; }
.bib-demo-interativo-controles{ display:flex; flex-direction:column; align-items:center; gap:.8rem; }

.bib-demo-interativo-resultado-box{
  position:relative; width:190px; aspect-ratio:4/5; border-radius:var(--bib-radius); overflow:hidden;
  border:1px dashed var(--bib-border-strong); background:var(--bib-glass-2); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; transition:border-color .2s ease;
}

@media (max-width:700px){
  /* imagens 1 e 2 lado a lado; o botao fica logo abaixo; o resultado so
     aparece depois, numa faixa propria maior -- deixa claro que "replicou
     igual", em vez de empilhar tudo (referencia, +, foto, seta, resultado)
     numa coluna so, que ficava confuso e a foto de resultado saia pequena. */
  .bib-demo-interativo{
    display:grid; grid-template-columns:1fr auto 1fr;
    grid-template-areas:
      "ref plus foto"
      "controles controles controles"
      "seta seta seta"
      "resultado resultado resultado";
    row-gap:1rem; column-gap:.5rem;
  }
  .bib-demo-interativo-fluxo{ display:contents; }
  .bib-demo-interativo-fluxo .bib-como-demo-item:not(.bib-demo-interativo-item-foto):not(.bib-demo-interativo-item-resultado){
    grid-area:ref; max-width:none; width:100%;
  }
  .bib-demo-interativo-fluxo .bib-demo-interativo-item-foto{ grid-area:foto; max-width:none; width:100%; }
  .bib-demo-interativo-fluxo .bib-como-demo-conector:not(.bib-demo-interativo-seta){ grid-area:plus; justify-self:center; }
  .bib-demo-interativo-seta{ grid-area:seta; justify-self:center; transform:rotate(90deg); }
  .bib-demo-interativo-fluxo .bib-demo-interativo-item-resultado{ grid-area:resultado; justify-self:center; width:100%; max-width:260px; }
  .bib-demo-interativo-controles{ grid-area:controles; }
  .bib-demo-interativo-resultado-box{ width:100%; max-width:260px; }
}
.bib-demo-interativo-resultado-box.is-pronto{ border-style:solid; border-color:var(--bib-accent); }
.bib-demo-interativo-estado[hidden]{ display:none; }
.bib-demo-interativo-estado{ display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--bib-muted); text-align:center; padding:1rem; }
.bib-demo-carregando-texto{ font-size:.76rem; }
.bib-demo-interativo-img[hidden]{ display:none; }
.bib-demo-interativo-img{ width:100%; height:100%; object-fit:cover; display:block; }
.bib-demo-interativo-img.is-revelando{ animation:bibRevelarResultado .6s ease; }

.bib-demo-spinner{
  width:30px; height:30px; border-radius:50%; border:3px solid var(--bib-border);
  border-top-color:var(--bib-accent); animation:bibGirar .8s linear infinite;
}

@keyframes bibRevelarResultado{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:scale(1); } }
@keyframes bibGirar{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .bib-demo-spinner{ animation-duration:1.6s; }
  .bib-demo-interativo-img.is-revelando{ animation:none; }
}

/* responsividade */
.bib-mobile-header{ display:none; }
.bib-drawer-overlay{ display:none; }
.bib-tabbar{ display:none; }

@media (max-width:860px){
  .bib-shell{ flex-direction:column; }

  .bib-mobile-header{
    display:flex; align-items:center; gap:.8rem; padding:.85rem 1rem;
    position:sticky; top:0; z-index:60; background:var(--bib-bg); border-bottom:1px solid var(--bib-border);
  }
  .bib-mobile-menu-btn{
    background:var(--bib-glass); border:1px solid var(--bib-border); color:var(--bib-text);
    font-size:1.15rem; width:38px; height:38px; border-radius:var(--bib-radius-sm); flex:0 0 auto; cursor:pointer;
  }
  .bib-mobile-header-titulo{ font-family:var(--font-display); font-weight:700; font-size:.95rem; }
	.bib-mobile-header-acoes{ display:flex; align-items:center; gap:.5rem; margin-left:auto; }
	.bib-criar-topbar{ display:none; }

  .bib-sidebar{
    position:fixed; top:0; left:-280px; height:100vh; width:280px; max-width:82vw; z-index:100;
    flex-direction:column; align-items:stretch; padding:1.3rem 1.1rem; overflow-y:auto; overflow-x:hidden;
    border-right:1px solid var(--bib-border); border-bottom:none;
    transition:left .25s ease;
  }
  .bib-sidebar.is-aberta{ left:0; }
  .bib-nav{ margin-top:1rem; }
  .bib-nav-item{ flex-direction:row; justify-content:flex-start; gap:.7rem; font-size:.85rem; padding:.65rem .5rem; white-space:normal; width:100%; }
  .bib-nav-item span:last-child{ font-size:.85rem; }
  .bib-sidebar-footer{ border-top:1px solid var(--bib-border); padding-top:1rem; margin-top:1.2rem; }

  .bib-drawer-overlay{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:90; }
  .bib-drawer-overlay[hidden]{ display:none; }

  .bib-tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:80;
    background:var(--bib-bg-raised); border-top:1px solid var(--bib-border);
    padding:.45rem .2rem calc(.45rem + env(safe-area-inset-bottom));
  }
  .bib-tabbar-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem;
    background:none; border:none; color:var(--bib-muted); font-size:.62rem; padding:.2rem; cursor:pointer;
  }
  .bib-tabbar-item.is-ativo{ color:var(--bib-accent); }
  .bib-tabbar-ic{ font-size:1.3rem; line-height:1; }

  .bib-main{ padding:1.2rem 1.1rem calc(5.4rem + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce){
  .bib-dash-card, .bib-btn{ transition:none; }
}

/* extrair prompt (imagem -> prompt via IA) */
.bib-extrair-shell{ max-width:640px; margin:0 auto; }

.bib-extrair-bloqueado{
  text-align:center; background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius);
  padding:2.4rem 1.6rem; display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.bib-extrair-bloqueado[hidden]{ display:none; }
.bib-extrair-bloqueado-ic{ font-size:2rem; margin-bottom:.4rem; }
.bib-extrair-bloqueado h2{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; margin:0; }
.bib-extrair-bloqueado p{ color:var(--bib-muted); font-size:.88rem; max-width:380px; margin:0 0 .6rem; }

#bib-extrair-conteudo{ display:flex; flex-direction:column; gap:1.2rem; }
#bib-extrair-conteudo[hidden]{ display:none; }

.bib-extrair-custo-aviso{
  text-align:center; font-size:.85rem; color:var(--bib-muted); background:var(--bib-glass); border:1px solid var(--bib-border);
  border-radius:var(--bib-radius-sm); padding:.6rem .9rem;
}
.bib-extrair-custo-aviso.is-gratis{ color:var(--bib-accent); border-color:var(--bib-accent); background:rgba(213,255,64,.06); }

.bib-extrair-dropzone{
  display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center;
  border:1px dashed var(--bib-border-strong); border-radius:var(--bib-radius); padding:2.6rem 1.6rem;
  cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.bib-extrair-dropzone[hidden]{ display:none; }
.bib-extrair-dropzone:hover, .bib-extrair-dropzone.is-arrastando{ border-color:var(--bib-accent); background:rgba(213,255,64,.04); }
.bib-extrair-dropzone-ic{ font-size:2.2rem; }
.bib-extrair-dropzone-titulo{ font-family:var(--font-display); font-weight:600; font-size:1rem; margin:.2rem 0 0; }
.bib-extrair-dropzone-ou{ color:var(--bib-muted); font-size:.78rem; }
.bib-extrair-dropzone-dica{ color:var(--bib-muted); font-size:.72rem; font-family:var(--font-mono); margin-top:.4rem; }

.bib-extrair-preview{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.bib-extrair-preview[hidden]{ display:none; }
.bib-extrair-preview-img{ max-width:100%; max-height:360px; border-radius:var(--bib-radius); border:1px solid var(--bib-border); display:block; }
.bib-extrair-preview-acoes{ display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; }

.bib-extrair-carregando{ display:flex; align-items:center; justify-content:center; gap:.7rem; color:var(--bib-muted); font-size:.88rem; padding:1.4rem 0; }
.bib-extrair-carregando[hidden]{ display:none; }

.bib-extrair-resultado{ display:flex; flex-direction:column; gap:.8rem; background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius); padding:1.4rem; }
.bib-extrair-resultado[hidden]{ display:none; }
.bib-extrair-resultado-texto{ margin:0; font-size:.92rem; line-height:1.6; white-space:pre-wrap; }
.bib-extrair-resultado-acoes{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
/* saldo de Moedas -- pulso visual sempre que o valor muda de verdade (gasto real) */
.bib-saldo-pulso{ display:inline-block; animation:bibSaldoPulso .7s ease; }
@keyframes bibSaldoPulso{
  0%{ color:var(--bib-accent); transform:scale(1.22); }
  100%{ color:inherit; transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .bib-saldo-pulso{ animation:none; }
}

/* extrair prompt -- linha de custo real mostrada ao administrador (uso liberado, mas com nocao do gasto de um cliente) */
.bib-extrair-custo-real{ display:block; color:var(--bib-text); font-size:.78rem; margin-top:.3rem; opacity:.85; }
/* paginacao da grade de prompts (categorias com mais de 70 itens) */
.bib-prompts-paginacao{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:1.6rem; }
.bib-prompts-pagina-btn{
  background:var(--bib-glass); border:1px solid var(--bib-border); color:var(--bib-muted);
  border-radius:999px; padding:.5rem 1rem; font-size:.8rem; font-weight:600; cursor:pointer;
}
.bib-prompts-pagina-btn.is-ativa{ background:var(--bib-accent); border-color:var(--bib-accent); color:var(--bib-accent-ink); }

/* pilha: fixa a posicao uma unica vez; cada toast dentro dela e so um item
   de flex column, entao dois aparecendo quase juntos (prova social em par)
   empilham em vez de se sobrepor -- ver mostrarNotificacaoCompra em app.js. */
.bib-toast-social-pilha{
  position:fixed; top:84px; right:20px; z-index:400000;
  display:flex; flex-direction:column; gap:.6rem; pointer-events:none;
}
.bib-toast-social{
  max-width:270px;
  display:flex; align-items:center; gap:.6rem;
  background:var(--bib-bg-raised); border:1px solid var(--bib-border); border-radius:var(--bib-radius-sm);
  padding:.7rem .9rem; box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0; transform:translateY(-10px); transition:opacity .35s ease, transform .35s ease; pointer-events:none;
}
.bib-toast-social.is-visivel{ opacity:1; transform:translateY(0); pointer-events:auto; }
.bib-toast-social-avatar{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--bib-accent); color:var(--bib-accent-ink);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.76rem; font-family:var(--font-display);
}
.bib-toast-social-texto{ font-size:.8rem; line-height:1.35; color:var(--bib-text); }
.bib-toast-social{ position:relative; }
/* X pra fechar o toast de prova social antes dele expirar sozinho -- so no
   mobile, onde o espaco de tela e mais disputado e a pessoa pode querer
   tirar o aviso da frente mais rapido. No desktop o botao fica escondido. */
.bib-toast-social-fechar{
  display:none; position:absolute; top:.4rem; right:.5rem; width:20px; height:20px;
  align-items:center; justify-content:center; background:none; border:none; color:var(--bib-muted);
  font-size:1rem; line-height:1; cursor:pointer; padding:0;
}
@media (max-width:860px){
  .bib-toast-social-fechar{ display:flex; }
  .bib-toast-social{ padding-right:1.9rem; }
}
.bib-toast-social-texto strong{ font-weight:700; }

.bib-toast-novidade{
  position:fixed; top:150px; right:20px; z-index:400000; max-width:270px;
  background:var(--bib-bg-raised); border:1px solid var(--bib-border-strong); border-radius:var(--bib-radius);
  padding:1rem 1.1rem; box-shadow:0 12px 32px rgba(0,0,0,.45);
  opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .35s ease; pointer-events:none;
}
.bib-toast-novidade.is-visivel{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* no mobile o topo fica muito perto do hero (header sticky mais baixo, menos
   espaco antes do titulo) -- em cima fica em cima do texto. Movido pro canto
   inferior direito, acima da tabbar, so nessa largura; desktop fica como era.
   --bib-cookie-banner-altura e medida de verdade em JS (0px quando o banner
   de cookies nao esta visivel) -- os toasts sempre sobem o suficiente pra
   nunca ficar atras do banner, em qualquer altura real que ele tenha. */
:root{ --bib-cookie-banner-altura: 0px; }
@media (max-width:860px){
  .bib-toast-social-pilha{ top:auto; bottom:calc(76px + var(--bib-cookie-banner-altura) + env(safe-area-inset-bottom)); right:16px; }
  .bib-toast-novidade{ top:auto; bottom:calc(142px + var(--bib-cookie-banner-altura) + env(safe-area-inset-bottom)); right:16px; }
}
.bib-toast-novidade p{ margin:0 0 .7rem; font-size:.82rem; line-height:1.4; color:var(--bib-text); padding-right:1rem; }
.bib-toast-fechar{
  position:absolute; top:.5rem; right:.6rem; background:none; border:none; color:var(--bib-muted);
  font-size:1.05rem; line-height:1; cursor:pointer; padding:.2rem;
}
.bib-toast-novidade{ position:fixed; }
@media (max-width:520px){
  .bib-toast-social-pilha, .bib-toast-novidade{ left:16px; right:16px; }
  .bib-toast-social{ max-width:none; }
}

.bib-preview-carregando[hidden]{ display:none; }
.bib-preview-carregando{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
}
.bib-preview-spinner{ width:46px; height:46px; border-width:4px; }
.bib-preview-carregando-texto{ font-size:1rem; color:var(--bib-muted); }

.bib-view-sub + .bib-prompts-pills{ margin-top:1.2rem; }

.bib-view[data-view="inicio"]{ position:relative; }
.bib-view[data-view="inicio"]::before{
  content:''; position:absolute; top:0; left:0; right:0; height:420px; z-index:0; opacity:.16; pointer-events:none;
  background:radial-gradient(ellipse at top, var(--bib-accent), transparent 65%);
}
.bib-view[data-view="inicio"] > *{ position:relative; z-index:1; }

/* 'o que voce vai encontrar por aqui' -- 5 cards, sempre na mesma linha,
   nunca quebra (encolhe cada coluna em vez de ir pra 2a linha). */
[data-view="inicio"] .bib-como-vantagens{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width:760px){
  [data-view="inicio"] .bib-como-vantagens{ grid-template-columns:repeat(2, 1fr); gap:.8rem; }
}

/* Inicio no mobile: blocos ficavam colados um no outro -- pelo menos +30px
   de respiro entre cada secao (demo, vantagens, botoes, destaques de
   conversao quando aparecem, prompts em destaque). */
@media (max-width:760px){
  [data-view="inicio"] .bib-como-demo-grupo{ margin-bottom:60px; }
  [data-view="inicio"] .bib-como-vantagens{ margin-bottom:calc(2.4rem + 30px); }
  [data-view="inicio"] .bib-inicio-ctas{ margin-bottom:calc(2.4rem + 30px); }
  [data-view="inicio"] .bib-extrair-destaque{ margin-top:0; margin-bottom:84px; }
  [data-view="inicio"] .bib-criar-prompts-biblioteca{ margin-top:calc(3rem + 30px); }
}

/* Inicio no desktop: mesmo respiro extra entre secoes, agora tambem fora do mobile. */
[data-view="inicio"] .bib-prompts-hero{ margin-bottom:calc(1.6rem + 50px); }
[data-view="inicio"] .bib-como-demo-grupo{ margin-bottom:calc(30px + 50px); }
[data-view="inicio"] .bib-como-vantagens{ margin-bottom:calc(2.4rem + 50px); }
[data-view="inicio"] .bib-criar-prompts-biblioteca{ margin-top:calc(3rem + 50px); }

/* vantagens coloridas (fix final) */
.bib-como-vantagens .bib-vantagem-card:nth-child(1){ --vc-fraca:rgba(74,222,128,.16); --vc-forte:#4ADE80; }
.bib-como-vantagens .bib-vantagem-card:nth-child(2){ --vc-fraca:rgba(96,165,250,.16); --vc-forte:#60A5FA; }
.bib-como-vantagens .bib-vantagem-card:nth-child(3){ --vc-fraca:rgba(199,146,234,.16); --vc-forte:#C792EA; }
.bib-como-vantagens .bib-vantagem-card:nth-child(4){ --vc-fraca:rgba(255,138,61,.16); --vc-forte:#FF8A3D; }
.bib-como-vantagens .bib-vantagem-card:nth-child(5){ --vc-fraca:rgba(255,107,157,.16); --vc-forte:#FF6B9D; }
.bib-vantagem-card{ position:relative; overflow:hidden; border-top-width:3px; border-top-style:solid; border-top-color:var(--vc-forte,var(--bib-accent)); }
.bib-vantagem-card::before{
  content:''; position:absolute; inset:0; z-index:0; opacity:.16; pointer-events:none;
  background:radial-gradient(circle at 25% -10%, var(--vc-forte,transparent), transparent 65%);
}
.bib-vantagem-card > *{ position:relative; z-index:1; }
.bib-vantagem-card:hover{ border-color:var(--vc-forte,var(--bib-accent)); }

.bib-vantagem-card .bib-vantagem-ic{ background:var(--vc-fraca,var(--bib-glass-2)); }

/* glow do Inicio sobe ate o topo de verdade da pagina -- antes so subia
   ate quase encostar na topbar, deixando uma faixa preta dura entre o topo
   da pagina e onde o brilho comecava. Agora o topo do brilho (o ponto mais
   forte do radial-gradient) fica ACIMA da viewport, entao so a parte que ja
   estava esmaecendo aparece -- sem borda visivel, parece luz vindo de cima
   mesmo, nao uma faixa colada. */
.bib-view[data-view="inicio"]::before{ top:-140px; }
@media (max-width:860px){
  .bib-view[data-view="inicio"]::before{ top:-100px; }
}

/* vantagens: bolha do icone + grid mais estreito */
.bib-vantagem-card .bib-vantagem-ic{
  display:inline-flex; align-items:center; justify-content:center; align-self:flex-start; flex-shrink:0;
  width:52px; height:52px; border-radius:14px; font-size:1.5rem;
}
.bib-como-vantagens{ max-width:960px; margin-left:auto; margin-right:auto; }

.bib-vantagens-titulo{ text-align:center; }

/* vantagens: volta a largura antiga (sem teto) */
.bib-como-vantagens{ max-width:none; }

/* vantagens: espacamentos ajustados */
.bib-como-demo-grupo{ margin-bottom:30px; }
.bib-vantagens-titulo{ margin-bottom:26px; }

/* restaurar imagem - dropzone de upload */
.bib-restaurar-dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.3rem;
  min-height:220px; border:2px dashed var(--bib-border-strong); border-radius:var(--bib-radius);
  background:var(--bib-glass-2); cursor:pointer; padding:1.4rem; margin-bottom:1rem; transition:border-color .15s ease, background .15s ease;
  position:relative; overflow:hidden;
}
.bib-restaurar-dropzone:hover{ border-color:var(--bib-accent); }
.bib-restaurar-dropzone.is-arrastando{ border-color:var(--bib-accent); background:rgba(213,255,64,.08); }
.bib-restaurar-dropzone-vazio{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem; }
.bib-restaurar-dropzone-ic{ font-size:2.2rem; opacity:.7; }
.bib-restaurar-dropzone strong{ font-family:var(--font-display); font-size:.95rem; }
.bib-restaurar-dropzone-sub{ color:var(--bib-muted); font-size:.8rem; }
.bib-restaurar-dropzone-preview{
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; border-radius:var(--bib-radius);
}
.bib-restaurar-dropzone-preview[hidden]{ display:none; }
.bib-restaurar-dropzone-vazio[hidden]{ display:none; }

/* restaurar imagem - comparador antes/depois (arraste pra comparar) */
.bib-comparador{
  position:relative; width:100%; flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  touch-action:none; user-select:none;
}
.bib-comparador-quadro{
  position:relative; width:100%; height:100%; max-width:100%; max-height:100%;
  border-radius:var(--bib-radius-sm); overflow:hidden; background:var(--bib-glass-2);
}
.bib-comparador-depois{
  position:absolute; top:0; left:0; width:100%; height:100%; min-width:100%; min-height:100%; object-fit:contain; display:block;
}
.bib-comparador-antes-wrap{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  clip-path:inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.bib-comparador-antes-wrap img{
  position:absolute; top:0; left:0; width:100%; height:100%; min-width:100%; min-height:100%; object-fit:contain; display:block;
}
.bib-comparador-linha{
  position:absolute; top:0; bottom:0; left:var(--pos, 50%); width:2px; background:#fff;
  transform:translateX(-1px); pointer-events:none; box-shadow:0 0 10px rgba(0,0,0,.5);
}
.bib-comparador-linha::after{
  content:'\2194'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:50%; background:var(--bib-accent); color:var(--bib-accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:700;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.bib-comparador-slider{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.bib-comparador-etiqueta{
  position:absolute; top:.7rem; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:.25rem .6rem; border-radius:999px; background:rgba(0,0,0,.6); color:#fff; pointer-events:none; z-index:1;
}
.bib-comparador-etiqueta-antes{ left:.7rem; }
.bib-comparador-etiqueta-depois{ right:.7rem; }

.bib-restaurar-dropzone{ margin-top:1.2rem; }

/* restaurar imagem - mostruario de exemplos (estado vazio, antes do upload) */
#bib-restaurar-preview-vazio:not([hidden]), #bib-upscale-preview-vazio:not([hidden]){ display:flex; flex-direction:column; align-self:stretch; width:100%; height:100%; max-width:680px; max-height:520px; padding:0; }
.bib-restaurar-exemplo{
  width:100%; height:100%; display:flex; flex-direction:column; gap:.8rem; text-align:center;
}
.bib-restaurar-exemplo .bib-comparador{ flex:1; min-height:0; }
.bib-restaurar-exemplo-legenda{ color:var(--bib-muted); font-size:.8rem; margin:0; }
.bib-restaurar-exemplo-miniaturas{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.bib-restaurar-exemplo-thumb{
  width:56px; height:56px; border-radius:var(--bib-radius-sm); overflow:hidden; padding:0;
  border:2px solid transparent; cursor:pointer; background:var(--bib-glass-2); transition:border-color .15s ease, transform .15s ease;
}
.bib-restaurar-exemplo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.bib-restaurar-exemplo-thumb:hover{ transform:translateY(-2px); }
.bib-restaurar-exemplo-thumb.is-ativo{ border-color:var(--bib-accent); }

/* restaurar imagem - os dois containers (upload e exemplo/resultado) do mesmo tamanho */
.bib-view[data-view="restaurar"] .bib-criar-shell{ align-items:stretch; }
.bib-view[data-view="restaurar"] .bib-criar-painel{ display:flex; flex-direction:column; }
.bib-restaurar-dropzone{ flex:1; }

.bib-restaurar-titulo-topo{ margin-bottom:1.4rem; text-transform:uppercase; letter-spacing:.02em; }
.bib-view[data-view="restaurar"] .bib-restaurar-cabecalho,
.bib-view[data-view="upscale"] .bib-restaurar-cabecalho{ margin-top:-1.2rem; }

/* restaurar imagem - layout v2: um unico card contendo as duas colunas do
   mesmo tamanho, espelhando a referencia visual (upload a esquerda, foto
   de exemplo/resultado a direita, ambas com a mesma caixa arredondada). */
.bib-restaurar-card{
  background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:calc(var(--bib-radius) + 8px);
  padding:2.4rem; max-width:1440px; margin:0 auto;
}
.bib-restaurar-colunas{ display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; align-items:stretch; }
.bib-restaurar-coluna{ display:flex; flex-direction:column; min-width:0; }

/* coluna esquerda: uma unica caixa (borda+radius) com o dropzone, custo e
   botao dentro, tudo centralizado e o botao fixado no rodape da caixa. */
.bib-restaurar-upload-caixa{
  flex:1; display:flex; flex-direction:column; gap:.8rem; min-height:300px;
  background:var(--bib-glass-2); border:1px solid var(--bib-border); border-radius:var(--bib-radius);
  padding:1.6rem; transition:border-color .15s ease;
}
/* Upscale tem uma fileira a mais (Formato) que Restaurar nao tem --
   sem esse reforco, os 300px do min-height base sobravam pouco espaco
   pra foto/dropzone, que encolhia bem pequena. */
[data-view="upscale"] .bib-restaurar-upload-caixa, [data-view="restaurar"] .bib-restaurar-upload-caixa{ min-height:510px; }
.bib-restaurar-upload-caixa:has(.bib-restaurar-dropzone.is-arrastando){ border-color:var(--bib-accent); }
.bib-restaurar-dropzone{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.3rem;
  min-height:0; border:none; background:none; padding:0; margin:0; cursor:pointer; position:relative; overflow:hidden;
}

/* coluna direita: a caixa da foto (exemplo ou resultado) usa o MESMO
   border-radius da caixa de upload, preenchendo toda a largura/altura
   disponivel; miniaturas ficam abaixo, fora da caixa da foto. */
#bib-restaurar-preview-vazio:not([hidden]),
#bib-restaurar-preview-carregando:not([hidden]),
#bib-restaurar-resultado:not([hidden]){ flex:1; display:flex; flex-direction:column; min-height:0; }

/* mesmo fix de altura igual entre as colunas, agora pro Upscale de Imagem
   (mesma estrutura visual do Restaurar Imagem, ids proprios). */
#bib-upscale-preview-vazio:not([hidden]),
#bib-upscale-preview-carregando:not([hidden]),
#bib-upscale-resultado:not([hidden]){ flex:1; display:flex; flex-direction:column; min-height:0; }
#bib-upscale-resultado .bib-resultado-acoes{ justify-content:center; }
.bib-restaurar-exemplo{ flex:1; display:flex; flex-direction:column; gap:.6rem; min-height:0; }
.bib-restaurar-caixa-foto{ border-radius:var(--bib-radius); }
#bib-restaurar-preview-carregando{ align-items:center; justify-content:center; gap:1rem; background:var(--bib-glass-2); border:1px solid var(--bib-border); border-radius:var(--bib-radius); }

@media (max-width:1024px){
  .bib-restaurar-colunas{ grid-template-columns:1fr; }
  /* em coluna unica cada coluna vira sua propria linha do grid -- perde o
     align-items:stretch que dava altura pra coluna da foto (ela nao tem
     conteudo proprio que garanta altura, so height:100%/flex:1 em cadeia).
     Sem esse minimo, a coluna da foto colapsava pra 0px de altura. */
  .bib-restaurar-coluna{ min-height:380px; }
}

#bib-restaurar-resultado{ max-width:none; align-items:stretch; width:100%; }

.bib-restaurar-cabecalho{ text-align:center; max-width:640px; margin:0 auto 1.6rem; }
.bib-restaurar-subtitulo{ color:var(--bib-muted); font-size:.92rem; margin:.4rem 0 0; }

#bib-restaurar-resultado .bib-resultado-acoes{ justify-content:center; }

#bib-restaurar-preview-vazio{ max-width:none; align-items:stretch; }

.bib-restaurar-modelo-info{
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.04em; color:var(--bib-accent); text-transform:uppercase; margin-bottom:.6rem;
}


/* ---------------- painel do colaborador (Etapa 5) ---------------- */
.bib-colab-resumo{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:.8rem;
  margin-bottom:1.6rem;
}
.bib-colab-stat{
  background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius-sm);
  padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.3rem;
}
.bib-colab-stat-numero{ font-family:var(--font-mono); font-size:1.3rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--bib-text); }
.bib-colab-stat-rotulo{ font-size:.72rem; color:var(--bib-muted); text-transform:uppercase; letter-spacing:.04em; }
.bib-colab-stat.is-destaque{ border-color:var(--bib-accent); }
.bib-colab-stat.is-destaque .bib-colab-stat-numero{ color:var(--bib-accent); }
.bib-colab-stat.is-total{ background:rgba(213,255,64,.06); }
.bib-colab-stat.is-total .bib-colab-stat-numero{ color:var(--bib-accent); }

.bib-comissao-item{
  display:flex; flex-wrap:wrap; gap:.9rem 1.4rem; align-items:center;
  background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius-sm);
  padding:.85rem 1rem; font-size:.82rem;
}
.bib-comissao-campo{ display:flex; flex-direction:column; gap:.15rem; min-width:64px; }
.bib-comissao-rotulo{ font-size:.64rem; text-transform:uppercase; letter-spacing:.04em; color:var(--bib-muted); }
.bib-comissao-valor{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--bib-text); }
.bib-comissao-valor.is-destaque{ font-weight:700; color:var(--bib-accent); }
.bib-comissao-status{
  margin-left:auto; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:.32rem .7rem; border-radius:999px; white-space:nowrap;
}
.bib-comissao-status.is-pendente{ background:rgba(255,193,7,.15); color:#ffc107; }
.bib-comissao-status.is-disponivel{ background:rgba(213,255,64,.14); color:var(--bib-accent); }
.bib-comissao-status.is-pago{ background:rgba(255,255,255,.09); color:var(--bib-text); }
.bib-comissao-status.is-estornado{ background:rgba(255,107,107,.14); color:var(--bib-danger); }
.bib-campo-label{ display:block; font-size:.85rem; color:var(--bib-muted); }
.bib-campo-label input[type=text], .bib-campo-label textarea{ font-family:inherit; font-size:.95rem; color:var(--bib-text); background:var(--bib-bg); border:1px solid var(--bib-border); border-radius:var(--bib-radius-sm); padding:.6rem .8rem; }


/* MCP (conectar a Biblioteca IA ao Claude Code) */
.bib-mcp-header{ max-width:640px; margin-bottom:1.6rem; }
.bib-mcp-header .bib-conta-nome{ font-size:1.6rem; margin:.3rem 0; }

.bib-mcp-status-card, .bib-mcp-token-card, .bib-mcp-como-conectar, .bib-mcp-faq{ margin-bottom:1.4rem; }

.bib-mcp-status-linha{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.bib-mcp-status-rotulo{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bib-muted); }
.bib-mcp-status-badge{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:.32rem .8rem; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,.09); color:var(--bib-muted);
}
.bib-mcp-status-badge.is-conectado{ background:rgba(213,255,64,.14); color:var(--bib-accent); }
.bib-mcp-status-detalhe{ color:var(--bib-muted); font-size:.82rem; margin:.6rem 0 0; }
.bib-mcp-status-acoes{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1rem; }

.bib-mcp-aviso-token{
  background:rgba(255,193,7,.1); border:1px solid rgba(255,193,7,.35); color:#ffc107;
  border-radius:var(--bib-radius-sm); padding:.8rem 1rem; font-size:.85rem; line-height:1.5; margin:0 0 1.2rem;
}
.bib-mcp-secao-titulo{
  display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bib-muted); margin:1.1rem 0 .6rem;
}
.bib-mcp-secao-titulo:first-of-type{ margin-top:0; }
.bib-mcp-config{
  background:var(--bib-bg); border:1px solid var(--bib-border); border-radius:var(--bib-radius-sm);
  padding:1rem 1.1rem; font-family:var(--font-mono); font-size:.8rem; color:var(--bib-text);
  white-space:pre-wrap; word-break:break-all; overflow-x:auto; margin:0 0 .7rem;
}

.bib-mcp-passos{ margin:.8rem 0 0; padding-left:1.3rem; color:var(--bib-text); font-size:.9rem; line-height:1.8; }

.bib-mcp-faq{ display:flex; flex-direction:column; gap:1.1rem; }
.bib-mcp-faq-pergunta{ display:block; font-family:var(--font-display); font-weight:700; font-size:.92rem; margin-bottom:.3rem; }
.bib-mcp-faq-resposta{ color:var(--bib-muted); font-size:.85rem; line-height:1.5; margin:0; }


/* MCP -- abas Claude / Claude Code e novos cards */
.bib-mcp-tabs{ display:flex; gap:.6rem; margin:.6rem 0 1.6rem; flex-wrap:wrap; }
.bib-mcp-tab{
  display:flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem; border-radius:999px;
  background:var(--bib-glass); border:1px solid var(--bib-border); color:var(--bib-muted);
  font-family:var(--font-display); font-weight:600; font-size:.85rem; cursor:pointer;
}
.bib-mcp-tab.is-ativa{ background:var(--bib-accent); border-color:var(--bib-accent); color:var(--bib-accent-ink); }
.bib-mcp-tab-ic{ font-size:.95em; }

.bib-mcp-metodo-card, .bib-mcp-passos-card{ margin-bottom:1.2rem; }
.bib-mcp-metodo-cabecalho{ display:flex; align-items:flex-start; gap:.8rem; margin-bottom:1.2rem; }
.bib-mcp-metodo-ic{ font-size:1.4rem; flex:0 0 auto; line-height:1.2; }
.bib-mcp-metodo-titulo{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.bib-mcp-metodo-desc{ color:var(--bib-muted); font-size:.85rem; margin:.25rem 0 0; }
.bib-mcp-metodo-nota{ color:var(--bib-muted); font-size:.78rem; margin:.7rem 0 0; text-align:center; }

.bib-mcp-passos-numerados{ list-style:none; margin:.8rem 0 0; padding:0; display:flex; flex-direction:column; gap:1.1rem; }
.bib-mcp-passos-numerados li{ display:flex; gap:.9rem; align-items:flex-start; }
.bib-mcp-passo-num{
  flex:0 0 auto; width:1.8rem; height:1.8rem; border-radius:50%; background:var(--bib-glass);
  border:1px solid var(--bib-border); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.85rem; color:var(--bib-accent); font-weight:700;
}
.bib-mcp-passos-numerados strong{ display:block; font-size:.9rem; margin-bottom:.2rem; }
.bib-mcp-passos-numerados p{ margin:0; color:var(--bib-muted); font-size:.82rem; line-height:1.4; }

.bib-mcp-avancado{ margin:0 0 1.4rem; }
.bib-mcp-avancado summary{
  cursor:pointer; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bib-muted); padding:.3rem 0;
}
.bib-mcp-avancado-conteudo{ margin-top:.9rem; }


/* MCP -- grid de passos (estilo Higgsfield) e caixa de URL do conector */
.bib-mcp-passos-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1rem; margin-bottom:1.4rem; }
.bib-mcp-passo-card{ display:flex; flex-direction:column; gap:.5rem; }
.bib-mcp-passo-card .bib-mcp-passo-num{ margin-bottom:.3rem; }
.bib-mcp-passo-card strong{ font-size:.92rem; }
.bib-mcp-passo-card p{ color:var(--bib-muted); font-size:.82rem; line-height:1.4; margin:0 0 .3rem; flex:1; }
.bib-mcp-passo-card .bib-btn{ align-self:flex-start; }

.bib-mcp-url-box{
  display:flex; align-items:center; gap:.5rem; background:var(--bib-bg); border:1px solid var(--bib-border);
  border-radius:var(--bib-radius-sm); padding:.6rem .7rem;
}
.bib-mcp-url-box code{
  flex:1; min-width:0; overflow-x:auto; white-space:nowrap; font-family:var(--font-mono); font-size:.72rem;
  color:var(--bib-text); background:none; padding:0;
}
.bib-mcp-copiar-icone{
  flex:0 0 auto; width:2rem; height:2rem; border-radius:var(--bib-radius-sm); border:1px solid var(--bib-border);
  background:var(--bib-glass); color:var(--bib-text); font-size:1rem; cursor:pointer; line-height:1;
}


/* lightbox: clique na imagem gerada pra ver ampliada */
.bib-lightbox{
  position:fixed; inset:0; z-index:9999; background:rgba(6,6,6,.92); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:3rem; cursor:zoom-out;
}
.bib-lightbox[hidden]{ display:none; }
.bib-lightbox-img{
  max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--bib-radius-sm);
  box-shadow:0 20px 60px rgba(0,0,0,.55); cursor:default;
}
.bib-lightbox-fechar{
  position:absolute; top:1.4rem; right:1.6rem; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid var(--bib-border); color:var(--bib-text);
  font-size:1.5rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.bib-lightbox-fechar:hover{ background:rgba(255,255,255,.16); }
@media (max-width:640px){
  .bib-lightbox{ padding:1.2rem; }
  .bib-lightbox-fechar{ top:.8rem; right:.8rem; }
}

/* Editar Imagem (Filtro / Remover Fundo / Angulos) -- fase de testes, admin-only */
.bib-nav-badge-admin{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.05em; color:var(--bib-accent);
  border:1px solid rgba(213,255,64,.4); border-radius:999px; padding:.1rem .4rem; margin-left:auto;
}
.bib-editor-shell{ display:flex; gap:1.6rem; align-items:flex-start; }
.bib-editor-servicos{
  flex:0 0 220px; background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius);
  padding:1rem; display:flex; flex-direction:column; gap:.3rem; position:sticky; top:1.5rem;
}
.bib-editor-servicos-titulo{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bib-muted);
  padding:.3rem .6rem .6rem;
}
.bib-editor-servico-item{
  display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; padding:.65rem .6rem;
  background:none; border:none; border-radius:var(--bib-radius-sm); color:var(--bib-muted); font-size:.88rem;
}
.bib-editor-servico-item:hover{ background:var(--bib-glass-2); color:var(--bib-text); }
.bib-editor-servico-item.is-ativo{ background:var(--bib-bg-raised); color:var(--bib-text); box-shadow:inset 2px 0 0 var(--bib-accent); }
.bib-editor-servico-ic{ flex:0 0 auto; width:1.1rem; height:1.1rem; display:flex; }
.bib-editor-servico-ic svg{ width:100%; height:100%; }
.bib-editor-servico-item.is-ativo .bib-editor-servico-ic{ color:var(--bib-accent); }
.bib-editor-corpo{ flex:1; min-width:0; }
.bib-editor-painel[hidden]{ display:none; }
.bib-editor-painel{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.6rem; align-items:start; }
.bib-editor-painel-simples{ grid-template-columns:minmax(0,1fr); }
.bib-editor-coluna-principal{ min-width:0; }

.bib-editor-dropzone{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem; cursor:pointer; min-width:0; box-sizing:border-box;
  border:1.5px dashed var(--bib-border-strong); border-radius:var(--bib-radius); background:var(--bib-glass-2);
  padding:3rem 2rem; margin:0 0 1rem; transition:border-color .15s ease,background .15s ease; overflow:hidden;
}
.bib-editor-dropzone:hover, .bib-editor-dropzone.is-arraste-sobre{ border-color:var(--bib-accent); background:var(--bib-glass); }
.bib-editor-dropzone-vazio{ display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.bib-editor-dropzone-ic{ width:2.4rem; height:2.4rem; color:var(--bib-accent); margin-bottom:.4rem; }
.bib-editor-dropzone-ic svg{ width:100%; height:100%; }
.bib-editor-dropzone h2{ margin:.1rem 0; font-family:var(--font-display); font-size:1.05rem; font-weight:600; }
.bib-editor-dropzone-vazio p{ margin:0; color:var(--bib-muted); font-size:.85rem; }
.bib-editor-dropzone-btn{ display:inline-flex; align-items:center; margin:.9rem 0 .3rem; }
.bib-editor-dropzone-divisor{
  display:flex; align-items:center; gap:.7rem; width:100%; max-width:280px; color:var(--bib-muted);
  font-size:.72rem; margin:.3rem 0;
}
.bib-editor-dropzone-divisor::before, .bib-editor-dropzone-divisor::after{ content:''; flex:1; height:1px; background:var(--bib-border); }
.bib-editor-dropzone-hint{ font-size:.72rem !important; color:var(--bib-muted); }
.bib-editor-dropzone-preview{ display:none; max-width:100%; max-height:46vh; min-height:260px; object-fit:contain; border-radius:var(--bib-radius-sm); }
.bib-editor-dropzone.tem-imagem{ padding:1rem; cursor:default; }
.bib-editor-dropzone.tem-imagem .bib-editor-dropzone-vazio{ display:none; }
.bib-editor-dropzone.tem-imagem .bib-editor-dropzone-preview{ display:block; }
.bib-editor-dropzone-transparente .bib-editor-dropzone-preview{
  background-image:linear-gradient(45deg,#2a2a2a 25%,transparent 25%),linear-gradient(-45deg,#2a2a2a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a2a2a 75%),linear-gradient(-45deg,transparent 75%,#2a2a2a 75%);
  background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0px; background-color:#1c1c1c;
}

.bib-editor-dropzone-trocar{
  display:none; position:absolute; top:.7rem; right:.7rem; width:2.2rem; height:2.2rem; border-radius:50%;
  align-items:center; justify-content:center; background:var(--bib-bg); border:1px solid var(--bib-border-strong);
  color:var(--bib-text); cursor:pointer; padding:0; transition:border-color .15s ease,color .15s ease;
}
.bib-editor-dropzone-trocar:hover{ border-color:var(--bib-accent); color:var(--bib-accent); }
.bib-editor-dropzone-trocar svg{ width:1rem; height:1rem; }
.bib-editor-dropzone.tem-imagem .bib-editor-dropzone-trocar{ display:flex; }

.bib-editor-dropzone-carregando{
  display:none; position:absolute; inset:0; flex-direction:column; align-items:center; justify-content:center;
  gap:.7rem; background:rgba(10,10,10,.72); backdrop-filter:blur(2px);
}
.bib-editor-dropzone-carregando p{ margin:0; color:#fff; font-size:.85rem; }
.bib-editor-dropzone.esta-carregando .bib-editor-dropzone-carregando{ display:flex; }
.bib-editor-dropzone.esta-carregando .bib-editor-dropzone-trocar{ display:none; }

.bib-editor-acoes-linha{ display:flex; align-items:stretch; gap:.7rem; margin:0 0 .6rem; }
.bib-editor-custo{ margin:.55rem 0 .6rem; font-size:.78rem; color:var(--bib-muted); text-align:center; }
.bib-editor-custo strong{ color:var(--bib-accent); font-weight:600; }
.bib-editor-acoes-linha .bib-btn-block{ flex:1; }
.bib-editor-acoes-linha .bib-btn-secundario{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.bib-editor-acoes-linha .bib-btn-secundario[hidden]{ display:none; }

.bib-editor-filtros-painel{
  background:var(--bib-glass); border:1px solid var(--bib-border); border-radius:var(--bib-radius);
  padding:1.1rem; position:sticky; top:1.5rem;
}
.bib-editor-filtros-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none;
  color:var(--bib-text); font-family:var(--font-display); font-weight:600; font-size:.92rem; padding:0 0 1rem;
}
.bib-editor-filtros-chevron{ font-size:.7rem; color:var(--bib-muted); transition:transform .15s ease; }
.bib-editor-filtros-painel.is-fechado .bib-editor-filtros-chevron{ transform:rotate(180deg); }
.bib-editor-filtros-painel.is-fechado .bib-editor-filtros-grid{ display:none; }
.bib-editor-filtros-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }

.bib-editor-preset-card{
  display:flex; flex-direction:column; gap:.35rem; background:none; border:none; padding:0; color:var(--bib-muted); text-align:left; min-width:0;
}
.bib-editor-preset-thumb{
  width:100%; aspect-ratio:1; border-radius:var(--bib-radius-sm); border:1px solid var(--bib-border-strong);
  background:var(--bib-glass-2) center/cover no-repeat; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; opacity:.7;
}
.bib-editor-preset-card.is-ativo .bib-editor-preset-thumb{
  border-color:var(--bib-accent); box-shadow:0 0 0 1px var(--bib-accent), 0 0 24px rgba(213,255,64,.18); opacity:1;
}
.bib-editor-preset-nome{ font-size:.7rem; color:var(--bib-muted); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.bib-editor-preset-card.is-ativo .bib-editor-preset-nome{ color:var(--bib-text); font-weight:600; }

.bib-editor-filtro-categoria{ margin:0 0 1.2rem; }
.bib-editor-filtro-categoria:last-child{ margin-bottom:0; }
.bib-editor-filtro-categoria-titulo{
  margin:0 0 .8rem; font-family:var(--font-display); font-size:.92rem; font-weight:700;
  color:var(--bib-text); padding-bottom:.5rem; border-bottom:1px solid var(--bib-border);
}
.bib-editor-filtro-subcategoria{ margin:0 0 1rem; }
.bib-editor-filtro-subcategoria:last-child{ margin-bottom:0; }
.bib-editor-filtro-subcategoria-titulo{
  margin:0 0 .55rem; font-family:var(--font-mono); font-size:.64rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--bib-muted);
}
.bib-editor-slider-linha{
  display:flex; align-items:center; gap:.8rem; width:100%; margin:0 0 1rem; padding:0 .2rem;
}
.bib-editor-slider-linha[hidden]{ display:none; }
.bib-editor-slider-linha label{ font-size:.78rem; color:var(--bib-muted); flex:0 0 auto; white-space:nowrap; }
.bib-editor-slider-linha input[type=range]{
  flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:999px; background:var(--bib-border-strong); outline:none;
}
.bib-editor-slider-linha input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--bib-accent); cursor:pointer;
  box-shadow:0 0 0 3px rgba(213,255,64,.18);
}
.bib-editor-slider-linha input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--bib-accent); border:none; cursor:pointer;
  box-shadow:0 0 0 3px rgba(213,255,64,.18);
}
.bib-editor-slider-valor{ font-family:var(--font-mono); font-size:.75rem; color:var(--bib-text); flex:0 0 auto; width:3.2em; text-align:right; }

@media (max-width:860px){
  .bib-editor-shell{ flex-direction:column; gap:1rem; }
  .bib-editor-servicos{
    flex:0 0 auto; width:auto; margin:0 -1rem; padding:0 1rem .3rem; flex-direction:row; gap:.5rem;
    overflow-x:auto; position:static; scroll-snap-type:x proximity;
  }
  .bib-editor-servico-item{
    flex:0 0 auto; width:auto; scroll-snap-align:start; flex-direction:column; gap:.35rem; text-align:center;
    padding:.6rem .8rem; min-width:84px; box-shadow:none; border:1px solid var(--bib-border);
  }
  .bib-editor-servico-item.is-ativo{ box-shadow:none; border-color:var(--bib-accent); background:var(--bib-glass); }
  .bib-editor-servico-item span:last-child{ font-size:.68rem; line-height:1.25; }
  .bib-editor-servicos-titulo{ display:none; }
  .bib-editor-painel{ grid-template-columns:1fr; }
  .bib-editor-filtros-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .bib-editor-dropzone{ padding:2rem 1.2rem; }
  .bib-editor-dropzone.tem-imagem{ padding:.6rem; }
  .bib-editor-dropzone-preview{ max-height:auto; min-height:220px; }
  .bib-editor-acoes-linha{ flex-direction:column; }
}

@media (min-width:861px) and (max-width:1120px){
  .bib-editor-painel{ grid-template-columns:minmax(0,1fr) 220px; gap:1rem; }
  .bib-editor-filtros-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
  .bib-editor-filtros-painel{ padding:.8rem; }
  .bib-editor-dropzone{ padding:2rem 1.2rem; }
}

/* Trocar Personagem (Viggle-Animate) -- ajustes proprios da tela */
.bib-viggle-desc{ margin-bottom:1.1rem; }
.bib-viggle-precos-linha{
  display:flex; justify-content:space-between; gap:.5rem; margin:.6rem 0 1.1rem;
  font-size:.72rem; color:var(--bib-muted);
}
.bib-viggle-precos-linha strong{ display:block; font-family:var(--font-mono); font-size:.85rem; color:var(--bib-accent); font-weight:600; margin-top:.1rem; }