/* Studio de Reels (estudio.ecomsmart.com.br). Mesmo design system do Estúdio do PosteAí (admin/estudio.css): tokens,
   raios (botão 8, campo 10, cartão 16, modal 18), botões, selos e a fonte Plus Jakarta Sans/Figtree. A identidade das
   marcas dos clientes só aparece dentro do vídeo (camada), nunca na interface. Claro/escuro pelo sistema ou pela chave. */
:root{
  --painel:#FFFFFF; --linha:#EEF1F7; --fundo:#F6F8FC; --sup2:#F3F5FA; --borda:#E1E6F0; --borda-forte:#C9D3E6;
  --tinta:#0B1033; --tinta2:#4A5670; --tinta3:#6B7790; --tinta4:#97A1B6;
  --azul:#0A5BF0; --azul-h:#0849C4; --azul-s:#EEF4FF; --azul-l:#D3E2FF;
  --ok:#16A34A; --ok-t:#15803D; --ok-s:#E8F6EE; --aj:#D97706; --aj-t:#B45309; --aj-s:#FEF6E7; --erro:#DC2626; --erro-t:#B91C1C; --erro-s:#FDECEC;
  --roxo:#7C3AED; --roxo-s:#F3EEFF;
  --sombra:0 1px 2px rgba(11,16,51,.04),0 10px 30px -22px rgba(11,16,51,.35);
  --sombra-g:0 24px 64px rgba(11,16,51,.28);
  --fonte:"Figtree","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not(.claro){
    --painel:#101729; --linha:#162036; --fundo:#0C1323; --sup2:#152038; --borda:#1E2A44; --borda-forte:#2A3A5C;
    --tinta:#EEF2FA; --tinta2:#B7C1D9; --tinta3:#8A97B3; --tinta4:#64708C;
    --azul:#5A8CFA; --azul-h:#8DB0FF; --azul-s:#15264A; --azul-l:#2A4A8C;
    --ok:#4ADE80; --ok-t:#4ADE80; --ok-s:#10291B; --aj:#F0A62E; --aj-t:#F0A62E; --aj-s:#2C2312; --erro:#F87171; --erro-t:#FCA5A5; --erro-s:#2E1616;
    --roxo:#A78BFA; --roxo-s:#231A3D;
    --sombra:0 1px 2px rgba(0,0,0,.3),0 10px 30px -22px rgba(0,0,0,.8); --sombra-g:0 24px 64px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root.escuro{
  --painel:#101729; --linha:#162036; --fundo:#0C1323; --sup2:#152038; --borda:#1E2A44; --borda-forte:#2A3A5C;
  --tinta:#EEF2FA; --tinta2:#B7C1D9; --tinta3:#8A97B3; --tinta4:#64708C;
  --azul:#5A8CFA; --azul-h:#8DB0FF; --azul-s:#15264A; --azul-l:#2A4A8C;
  --ok:#4ADE80; --ok-t:#4ADE80; --ok-s:#10291B; --aj:#F0A62E; --aj-t:#F0A62E; --aj-s:#2C2312; --erro:#F87171; --erro-t:#FCA5A5; --erro-s:#2E1616;
  --roxo:#A78BFA; --roxo-s:#231A3D;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 10px 30px -22px rgba(0,0,0,.8); --sombra-g:0 24px 64px rgba(0,0,0,.6);
  color-scheme:dark;
}
@font-face{font-family:"Figtree";src:url(/conteudos/estudio/static/figtree-latin.woff2) format("woff2");font-weight:300 900;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--linha);color:var(--tinta);font:14px/1.5 var(--fonte);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--azul)}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
svg{flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ------------------------------------------------------------------ casca: topo com os 3 módulos + barra de contexto */
.st-app{display:flex;flex-direction:column;min-height:100vh}
.topo{position:sticky;top:0;z-index:40;background:var(--painel);border-bottom:1px solid var(--borda)}
.topo-linha{display:flex;align-items:center;gap:18px;height:60px;padding:0 20px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.logo img{width:28px;height:28px}
.logo small{font-weight:600;color:var(--tinta3);font-size:12.5px}
.modulos{display:flex;gap:4px;margin-left:12px}
.modulo{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:10px;border:0;background:none;color:var(--tinta2);
  font-weight:650;font-size:14px;cursor:pointer;text-decoration:none;white-space:nowrap}
.modulo svg{width:18px;height:18px}
.modulo:hover{background:var(--sup2);color:var(--tinta)}
.modulo.on{background:var(--azul-s);color:var(--azul)}
.modulo .n{font-size:11.5px;font-weight:800;color:var(--tinta4);margin-right:2px}
.modulo.on .n{color:var(--azul)}
.topo-dir{margin-left:auto;display:flex;align-items:center;gap:10px}
.icone-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--borda);background:var(--painel);display:grid;place-items:center;cursor:pointer;color:var(--tinta2)}
.icone-btn:hover{border-color:var(--azul);color:var(--azul)}
.icone-btn svg{width:17px;height:17px}
.voltar-app{font-size:13px;font-weight:600;color:var(--tinta2);text-decoration:none;display:flex;align-items:center;gap:6px;white-space:nowrap}
.voltar-app:hover{color:var(--azul)}
.voltar-app svg{width:16px;height:16px}
.usuario{font-size:12.5px;color:var(--tinta3);max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.contexto{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 20px;border-top:1px solid var(--linha);background:var(--fundo);font-size:13px}
.ctx{display:flex;align-items:center;gap:8px;color:var(--tinta3)}
.ctx label{font-weight:600}
.ctx select{height:32px;border:1px solid var(--borda);border-radius:8px;background:var(--painel);padding:0 28px 0 10px;font-weight:600;color:var(--tinta);max-width:260px}
.ctx b{color:var(--tinta);font-weight:650}
.ctx-proj{display:flex;align-items:center;gap:8px;min-width:0}
.ctx-proj a{font-weight:650;color:var(--tinta);text-decoration:none;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* etapa transversal: Roteiro → Materiais → Editor → Mockups → Aprovação → Exportar */
.etapas{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
.etapa{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--borda);background:var(--painel);
  font-size:12.5px;font-weight:650;color:var(--tinta3);cursor:pointer;text-decoration:none;white-space:nowrap}
.etapa i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;background:var(--sup2);color:var(--tinta3)}
.etapa.feita{color:var(--ok-t);border-color:color-mix(in srgb,var(--ok) 35%,var(--borda))}
.etapa.feita i{background:var(--ok-s);color:var(--ok-t)}
.etapa.on{border-color:var(--azul);color:var(--azul);background:var(--azul-s)}
.etapa.on i{background:var(--azul);color:#fff}
.etapa-seta{color:var(--tinta4);font-size:12px}

.conteudo{flex:1;min-height:0;position:relative}
.pagina{max-width:1280px;margin:0 auto;padding:28px 24px 80px}
.pagina.larga{max-width:none}
.cab{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.cab h1{font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:800}
.cab p{color:var(--tinta3);margin-top:4px;max-width:720px}
.cab .acoes{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ------------------------------------------------------------------ botões, selos, campos, blocos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:8px;border:1px solid transparent;font-weight:600;font-size:13.5px;
  cursor:pointer;white-space:nowrap;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s;background:none}
.btn svg{width:16px;height:16px}
.btn-pri{background:var(--azul);color:#fff}.btn-pri:hover{background:var(--azul-h)}
.btn-ok{background:var(--ok);color:#fff}.btn-ok:hover{background:var(--ok-t)}
:root.escuro .btn-ok{color:#06210F}
.btn-sec{background:var(--painel);border-color:var(--borda);color:var(--tinta)}.btn-sec:hover{border-color:var(--azul);color:var(--azul)}
.btn-fan{background:none;color:var(--tinta3);padding:0 10px}.btn-fan:hover{color:var(--erro-t);background:var(--erro-s)}
.btn-aj{background:none;border-color:var(--aj);color:var(--aj-t)}.btn-aj:hover{background:var(--aj-s)}
.btn-ia{background:var(--roxo-s);color:var(--roxo);border-color:color-mix(in srgb,var(--roxo) 30%,transparent)}.btn-ia:hover{border-color:var(--roxo)}
.btn:disabled{opacity:.55;cursor:default}
.btn.peq{height:34px;padding:0 12px;font-size:13px}
.btn.mini{height:28px;padding:0 10px;font-size:12px;border-radius:7px}
.btn.grande{height:52px;padding:0 24px;font-size:15px;border-radius:10px}
.custo{font-size:11.5px;font-weight:600;color:var(--tinta3);background:var(--sup2);padding:2px 7px;border-radius:999px;white-space:nowrap}
.selo{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--sup2);color:var(--tinta2)}
.selo i{width:6px;height:6px;border-radius:50%;background:currentColor}
.selo.aguardando,.selo.aguardando_aprovacao,.selo.aguardando_materiais{background:var(--aj-s);color:var(--aj-t)}
.selo.aprovado,.selo.exportado,.selo.pronto,.selo.feita{background:var(--ok-s);color:var(--ok-t)}
.selo.preview,.selo.em_edicao,.selo.publicado,.selo.roteirizado,.selo.pronto_para_edicao{background:var(--azul-s);color:var(--azul)}
.selo.rodando,.selo.fila,.selo.gerando,.selo.analisando{background:var(--sup2);color:var(--tinta2)}
.selo.rodando i,.selo.fila i,.selo.gerando i,.selo.analisando i{animation:pulsa 1.2s ease-in-out infinite}
.selo.erro{background:var(--erro-s);color:var(--erro-t)}
.selo.ia{background:var(--roxo-s);color:var(--roxo)}
@keyframes pulsa{50%{opacity:.25}}
.campo{display:grid;gap:6px}
.campo>span{font-size:12.5px;font-weight:650;color:var(--tinta2)}
.campo small{font-size:12px;color:var(--tinta3)}
input[type=text],input[type=url],input[type=search],input[type=number],textarea,select{width:100%;border:1px solid var(--borda);border-radius:10px;background:var(--painel);
  padding:9px 12px;min-height:40px;outline:none;transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;min-height:72px;line-height:1.45}
input:focus,textarea:focus,select:focus{border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-s)}
.bloco{background:var(--painel);border:1px solid var(--borda);border-radius:16px;box-shadow:var(--sombra)}
.bloco-cab{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--linha)}
.bloco-cab h2,.bloco-cab h3{font-size:15px;font-weight:750;letter-spacing:-.01em}
.bloco-cab .acoes{margin-left:auto;display:flex;gap:8px}
.bloco-corpo{padding:16px 18px}
.grade2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grade3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.grade2,.grade3{grid-template-columns:1fr}}
.vazio{padding:40px 20px;text-align:center;color:var(--tinta3);display:grid;gap:12px;justify-items:center}
.vazio b{color:var(--tinta);font-size:15px}
.aviso-c{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--sup2);color:var(--tinta2);font-size:13px}
.aviso-c svg{width:18px;height:18px;margin-top:1px}
.aviso-c.erro{background:var(--erro-s);color:var(--erro-t)}
.aviso-c.aj{background:var(--aj-s);color:var(--aj-t)}
.aviso-c.ok{background:var(--ok-s);color:var(--ok-t)}
.aviso-c.info{background:var(--azul-s);color:var(--azul)}
.esqueleto{background:linear-gradient(90deg,var(--sup2) 25%,var(--linha) 50%,var(--sup2) 75%);background-size:400% 100%;animation:brilho 1.4s ease infinite;border-radius:10px}
@keyframes brilho{0%{background-position:100% 0}100%{background-position:0 0}}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--tinta);color:var(--painel);
  padding:12px 18px;border-radius:12px;font-weight:600;box-shadow:var(--sombra-g);transition:.2s;z-index:90;max-width:min(92vw,560px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.erro{background:var(--erro);color:#fff}
.barra{height:6px;border-radius:999px;background:var(--sup2);overflow:hidden}
.barra i{display:block;height:100%;background:var(--azul);border-radius:999px;transition:width .4s}
.tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:6px;background:var(--sup2);color:var(--tinta2);font-size:11.5px;font-weight:600}
.tags{display:flex;gap:4px;flex-wrap:wrap}
.meta{font-size:12.5px;color:var(--tinta3)}
.chip-origem{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:6px}
.chip-origem.GRAVAR{background:var(--aj-s);color:var(--aj-t)}
.chip-origem.GERAR_COM_IA{background:var(--roxo-s);color:var(--roxo)}
.chip-origem.BIBLIOTECA{background:var(--ok-s);color:var(--ok-t)}
.chip-origem.LICENCIADO{background:var(--sup2);color:var(--tinta2)}

/* modal */
.modal-fundo{position:fixed;inset:0;background:rgba(11,16,51,.45);z-index:80;display:grid;place-items:center;padding:20px}
.modal{background:var(--painel);border-radius:18px;box-shadow:var(--sombra-g);width:min(640px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column}
.modal.largo{width:min(1080px,100%)}
.modal header{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid var(--linha)}
.modal header h2{font-size:17px;font-weight:750}
.modal header .icone-btn{margin-left:auto}
.modal .rol{padding:18px 20px;overflow:auto;display:grid;gap:14px}
.modal footer{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--linha)}

/* ------------------------------------------------------------------ início e módulo 1: Analisar */
.heroi{display:grid;gap:18px;padding:40px 32px;border-radius:20px;background:linear-gradient(135deg,var(--azul-s),var(--painel) 70%);border:1px solid var(--borda)}
.heroi h1{font-size:30px;letter-spacing:-.025em;line-height:1.15;font-weight:800;max-width:760px}
.heroi p{color:var(--tinta2);max-width:720px;font-size:15px}
.submodos{display:flex;gap:6px;flex-wrap:wrap}
.submodo{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--borda);background:var(--painel);font-weight:650;font-size:13px;color:var(--tinta2);cursor:pointer}
.submodo.on{background:var(--tinta);color:var(--painel);border-color:var(--tinta)}
.colar{display:flex;gap:10px;align-items:stretch}
.colar input{min-height:54px;font-size:16px;border-radius:12px;padding:0 18px}
.colar .btn{height:54px}
@media (max-width:700px){.colar{flex-direction:column}}
.direitos{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--tinta2)}
.direitos label{display:flex;gap:6px;align-items:center;cursor:pointer}
.amostra{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.amostra div{padding:14px;border-radius:12px;background:var(--painel);border:1px dashed var(--borda-forte);font-size:13px;color:var(--tinta2)}
.amostra b{display:block;color:var(--tinta);margin-bottom:4px}
@media (max-width:800px){.amostra{grid-template-columns:1fr}}

.soltar{border:2px dashed var(--borda-forte);border-radius:14px;padding:26px;text-align:center;display:grid;gap:8px;justify-items:center;color:var(--tinta3);cursor:pointer;background:var(--fundo)}
.soltar.sobre{border-color:var(--azul);background:var(--azul-s)}
.soltar b{color:var(--tinta)}
.subindo{display:grid;gap:8px}

.lista-proj>.vazio{grid-column:1/-1}
.lista-proj{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.cartao{background:var(--painel);border:1px solid var(--borda);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s}
.cartao:hover{border-color:var(--azul-l);box-shadow:var(--sombra)}
.cartao .mini916{aspect-ratio:9/12;background:var(--sup2) center/cover no-repeat;display:grid;place-items:center;color:var(--tinta4)}
.cartao .mini916 svg{width:36px;height:36px}
.cartao .c-corpo{padding:12px 14px;display:grid;gap:6px}
.cartao b{font-size:14px;line-height:1.3}

/* DNA do Reel */
.dna{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:20px;align-items:start}
@media (max-width:980px){.dna{grid-template-columns:1fr}}
.player916{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#000;box-shadow:var(--sombra)}
.player916 video,.player916 img{width:100%;height:100%;object-fit:cover;display:block}
.dna-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.kpi{padding:12px 14px;border-radius:12px;background:var(--fundo);border:1px solid var(--linha);display:grid;gap:2px}
.kpi span{font-size:11.5px;font-weight:700;color:var(--tinta3);text-transform:uppercase;letter-spacing:.04em}
.kpi b{font-size:14px;font-weight:700;line-height:1.35}
.score{display:flex;align-items:center;gap:14px}
.score-num{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:800;color:var(--azul);
  background:conic-gradient(var(--azul) calc(var(--v) * 1%),var(--sup2) 0);position:relative}
.score-num::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--painel)}
.score-num span{position:relative}
.criterios{display:grid;gap:8px;margin-top:12px}
.criterio{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:13px}
.criterio .barra{grid-column:1/-1;height:5px}
.criterio small{grid-column:1/-1;color:var(--tinta3)}
.timeline-ref{display:flex;gap:4px;overflow-x:auto;padding-bottom:6px}
.timeline-ref figure{flex:none;width:86px;display:grid;gap:4px;font-size:11px;color:var(--tinta3)}
.timeline-ref img{width:86px;aspect-ratio:9/16;object-fit:cover;border-radius:8px;background:var(--sup2)}
.lista-obs{display:grid;gap:8px;padding-left:18px}
.lista-obs li{font-size:13.5px}
.lista-obs small{display:block;color:var(--tinta3)}

/* "O que você precisa fazer?" */
.fazer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.fazer{grid-template-columns:1fr}}
.col{border-radius:16px;border:1px solid var(--borda);background:var(--painel);display:flex;flex-direction:column;min-width:0}
.col>header{padding:14px 16px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--linha)}
.col>header h3{font-size:14.5px;font-weight:750}
.col>header .n{margin-left:auto;font-weight:800;font-size:13px;color:var(--tinta3)}
.col.gravar>header{background:var(--aj-s);border-radius:16px 16px 0 0}
.col.ia>header{background:var(--roxo-s);border-radius:16px 16px 0 0}
.col.bib>header{background:var(--ok-s);border-radius:16px 16px 0 0}
.col .itens{padding:12px;display:grid;gap:10px}
.tarefa{border:1px solid var(--linha);border-radius:12px;padding:12px;display:grid;gap:8px;background:var(--fundo)}
.tarefa.feita{opacity:.75}
.tarefa h4{font-size:13.5px;font-weight:700;display:flex;gap:8px;align-items:center}
.tarefa p{font-size:13px;color:var(--tinta2)}
.tarefa .acoes{display:flex;gap:6px;flex-wrap:wrap}
.teleprompter{background:var(--tinta);color:#fff;border-radius:10px;padding:12px 14px;font-size:15px;line-height:1.5;font-weight:600}
.checklist{display:grid;gap:4px;font-size:12.5px;color:var(--tinta2)}
.checklist div{display:flex;gap:6px}
.checklist b{color:var(--tinta);min-width:96px}
.candidatos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.candidato{border:1px solid var(--borda);border-radius:10px;overflow:hidden;background:var(--painel);cursor:pointer;display:grid;text-align:left;padding:0}
.candidato.on{border-color:var(--ok);box-shadow:0 0 0 2px var(--ok-s)}
.candidato img,.candidato video{width:100%;aspect-ratio:9/12;object-fit:cover;background:var(--sup2);display:block}
.candidato span{font-size:11px;padding:4px 6px;color:var(--tinta2);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* roteiro / storyboard */
.roteiro{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
@media (max-width:1100px){.roteiro{grid-template-columns:1fr}}
.cenas{display:grid;gap:12px}
.cena{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:14px;border:1px solid var(--borda);border-radius:16px;background:var(--painel)}
@media (max-width:700px){.cena{grid-template-columns:1fr}}
.cena .thumb{aspect-ratio:9/16;border-radius:10px;background:var(--sup2) center/cover no-repeat;display:grid;place-items:center;color:var(--tinta4);font-size:12px;text-align:center;padding:6px;overflow:hidden}
.cena .thumb video{width:100%;height:100%;object-fit:cover}
.cena-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cena-cab .tempo{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--tinta3);font-weight:650}
.cena-cab .funcao{font-weight:750;text-transform:capitalize}
.cena-cab .acoes{margin-left:auto;display:flex;gap:6px}
.cena-campos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.cena-campos .largo{grid-column:1/-1}
@media (max-width:800px){.cena-campos{grid-template-columns:1fr}}
.cena-campos textarea{min-height:54px;font-size:13px}
.cena-campos input{font-size:13px;min-height:36px}
.lado{position:sticky;top:132px;display:grid;gap:14px}

/* ------------------------------------------------------------------ módulo 2: Copiloto */
.chat{display:grid;grid-template-columns:240px 1fr;gap:0;height:calc(100vh - 112px);background:var(--painel);border-top:1px solid var(--linha)}
@media (max-width:860px){.chat{grid-template-columns:1fr}.chat .conversas{display:none}}
.conversas{border-right:1px solid var(--linha);overflow:auto;padding:12px;display:grid;align-content:start;gap:4px}
.conversas button{border:0;background:none;text-align:left;padding:9px 10px;border-radius:10px;cursor:pointer;font-size:13px;color:var(--tinta2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conversas button.on,.conversas button:hover{background:var(--azul-s);color:var(--azul)}
.conversa{display:flex;flex-direction:column;min-height:0}
.mensagens{flex:1;overflow:auto;padding:24px clamp(16px,4vw,48px);display:grid;align-content:start;gap:16px}
.msg{max-width:760px;display:grid;gap:8px}
.msg.user{justify-self:end;background:var(--azul);color:#fff;padding:10px 14px;border-radius:16px 16px 4px 16px}
.msg.assistant{justify-self:start}
.msg.assistant .texto{background:var(--fundo);border:1px solid var(--linha);padding:14px 16px;border-radius:16px 16px 16px 4px;white-space:pre-wrap;font-size:14px;line-height:1.55}
.msg .ferr{font-size:11.5px;color:var(--tinta3)}
.msg .acoes{display:flex;gap:8px;flex-wrap:wrap}
.digitando{display:flex;gap:4px;padding:14px 16px}
.digitando i{width:7px;height:7px;border-radius:50%;background:var(--tinta4);animation:pulsa 1s infinite}
.digitando i:nth-child(2){animation-delay:.2s}.digitando i:nth-child(3){animation-delay:.4s}
.sugestoes{display:flex;gap:8px;flex-wrap:wrap}
.sugestoes button{border:1px solid var(--borda);background:var(--painel);border-radius:999px;padding:8px 14px;font-size:13px;cursor:pointer;color:var(--tinta2)}
.sugestoes button:hover{border-color:var(--azul);color:var(--azul)}
.escrever{display:flex;gap:10px;padding:14px clamp(16px,4vw,48px) 20px;border-top:1px solid var(--linha)}
.escrever textarea{min-height:48px;max-height:180px;border-radius:12px}

/* ------------------------------------------------------------------ módulo 3: Biblioteca */
.filtros-bib{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filtros-bib input[type=search]{max-width:380px}
.filtros-bib select{width:auto}
.grade-bib{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.item-bib{background:var(--painel);border:1px solid var(--borda);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.item-bib .mid{aspect-ratio:9/12;background:var(--sup2) center/cover no-repeat;position:relative}
.item-bib .mid video{width:100%;height:100%;object-fit:cover}
.item-bib .dur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;font-weight:700;padding:2px 6px;border-radius:6px}
.item-bib .fonte{position:absolute;left:6px;top:6px}
.item-bib .c{padding:10px;display:grid;gap:6px}
.item-bib b{font-size:12.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ------------------------------------------------------------------ mockups e aprovação */
.mockups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:1100px){.mockups{grid-template-columns:1fr}}
.mock{display:grid;gap:10px;align-content:start}
.mock h3{font-size:14px;font-weight:750;display:flex;gap:8px;align-items:center}
.mock h3 svg,.col>header svg,.vazio svg,.bloco-cab svg,.cab svg{width:18px;height:18px}
.celular{width:min(300px,100%);margin:0 auto;aspect-ratio:9/19.5;border-radius:40px;background:#000;padding:10px;box-shadow:0 0 0 2px #2b2f3a,var(--sombra-g);position:relative}
.celular .tela{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;background:#000}
.celular video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ig-ui{position:absolute;inset:0;pointer-events:none;color:#fff;font:600 12px/1.3 system-ui,sans-serif}
.ig-ui .topo-ig{position:absolute;left:12px;right:12px;top:16px;display:flex;justify-content:space-between;font-size:15px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.ig-ui .lado-ig{position:absolute;right:10px;bottom:84px;display:grid;gap:14px;justify-items:center;font-size:10.5px}
.ig-ui .lado-ig i{width:24px;height:24px;border-radius:50%;border:2px solid #fff;display:block}
.ig-ui .base-ig{position:absolute;left:12px;right:52px;bottom:16px;display:grid;gap:6px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.ig-ui .base-ig .perfil-ig{display:flex;gap:8px;align-items:center}
.ig-ui .base-ig .perfil-ig i{width:24px;height:24px;border-radius:50%;background:#fff;display:block}
.ig-ui .base-ig p{font-weight:500;font-size:11.5px;max-height:30px;overflow:hidden}
.zonas{position:absolute;inset:0;pointer-events:none}
.zonas .z{position:absolute;left:0;right:0;background:rgba(220,38,38,.22);border:1px dashed rgba(220,38,38,.85)}
.grade-perfil{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--painel);border-radius:14px;overflow:hidden;border:1px solid var(--borda)}
.grade-perfil div{aspect-ratio:3/4;background:var(--sup2) center/cover no-repeat;position:relative}
.grade-perfil div.nova{outline:3px solid var(--azul);outline-offset:-3px}
.grade-perfil div.exemplo{display:grid;place-items:center;font-size:10.5px;color:var(--tinta4);font-weight:700;text-transform:uppercase}
.grade-perfil div span{position:absolute;left:4px;bottom:4px;font-size:10px;background:rgba(0,0,0,.65);color:#fff;padding:1px 5px;border-radius:4px}
.capas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.capa-op{border:2px solid var(--borda);border-radius:12px;overflow:hidden;cursor:pointer;background:none;padding:0;display:grid;text-align:left}
.capa-op img{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.capa-op span{padding:6px 8px;font-size:12px;font-weight:700}
.capa-op.on{border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-s)}
.comentarios{display:grid;gap:8px}
.comentario{display:flex;gap:8px;align-items:flex-start;font-size:13px;padding:8px 10px;border-radius:10px;background:var(--fundo)}
.comentario .t{font-variant-numeric:tabular-nums;font-weight:700;color:var(--azul);cursor:pointer;white-space:nowrap}
.historico{display:grid;gap:6px;font-size:12.5px;color:var(--tinta2)}
.historico li{list-style:none;display:flex;gap:8px}

/* login */
.entrar{min-height:100vh;display:grid;place-items:center;padding:24px}
.entrar .bloco{max-width:440px;padding:32px;display:grid;gap:16px;text-align:center;justify-items:center}

@media (max-width:760px){
  .topo-linha{gap:8px;padding:0 12px;height:auto;min-height:56px;flex-wrap:wrap}
  .modulos{order:3;width:100%;margin:0 0 8px;overflow-x:auto}
  .modulo .rotulo-longo{display:none}
  .usuario,.voltar-app span{display:none}
  .pagina{padding:18px 14px 64px}
  .etapas{margin-left:0}
}