:root{
  --bg:#fafafa; --fg:#111; --muted:#737373; --line:#e3e3e3; --card:#fff;
  --ok:#1f7a4d; --warn:#a15c00; --acc:#001F3B;
  --font:"Poppins",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ig:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--ig);font-size:15px;line-height:1.45}
button{font:inherit;cursor:pointer}
button:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.topo{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line)}
.topo-in{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,env(safe-area-inset-right))}
.quem{display:flex;align-items:center;gap:10px;min-width:0}
.quem strong{display:block}
.sub{display:block;color:var(--muted);font-size:13px}
.av{width:40px;height:40px;border-radius:50%;object-fit:contain;background:var(--av,var(--acc));padding:6px;border:1px solid var(--line)}
.modo{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex-shrink:0}
.modo button{border:0;background:transparent;padding:7px 12px;font-size:13px;color:var(--muted)}
.modo button[aria-pressed="true"]{background:var(--fg);color:var(--card)}

.feed{display:flex;flex-direction:column;gap:28px;padding:24px max(16px,env(safe-area-inset-left)) 32px;margin:0 auto}
.aviso{text-align:center;color:var(--muted);font-size:13px;margin:0 16px 8px}
.rodape{text-align:center;color:var(--muted);font-size:12px;padding:8px 16px 32px}

/* post base */
.post{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.ph{display:flex;align-items:center;gap:10px;padding:10px 12px}
.av-p{width:32px;height:32px;border-radius:50%;object-fit:contain;background:var(--av,var(--acc));padding:5px}
.ph strong{font-size:14px}
.midia{position:relative;overflow:hidden;background:#000}
.trilho{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.trilho::-webkit-scrollbar{display:none}
.item{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:4/5;position:relative}
.item.reels{aspect-ratio:9/16}
.item img,.item video{width:100%;height:100%;object-fit:cover;display:block}
.seta{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#111;font-size:22px;line-height:28px;padding:0}
.seta.esq{left:8px}.seta.dir{right:8px}
.seta[hidden]{display:none}
.cont{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:2px 8px;border-radius:12px}
.acoes{display:flex;align-items:center;gap:14px;padding:10px 12px 4px}
.acoes svg{width:24px;height:24px;fill:none;stroke:var(--fg);stroke-width:1.8;stroke-linejoin:round}
.acoes .salvar{margin-left:auto}
.pontos{display:flex;gap:4px;margin:0 auto}
.pontos i{width:6px;height:6px;border-radius:50%;background:#c7c7c7}
.pontos i.on{background:#0095f6}
.legenda{padding:4px 12px 12px}
.leg{margin:0;white-space:pre-line;word-wrap:break-word}
.leg.curta .leg-txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.leg:not(.curta) .mais{display:none}
.mais{border:0;background:none;color:var(--muted);padding:0}
.ph-web{display:none}

/* slide de texto (arte provisoria) */
.arte{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:9% 8%;font-family:var(--font);position:relative}
.arte p{margin:0;white-space:pre-line;font-size:clamp(13px,3.6cqw,19px);line-height:1.45}
.arte.capa p:first-child{font-weight:600;font-size:clamp(20px,6.4cqw,32px);line-height:1.2}
.arte.capa p+p{font-weight:300;font-style:italic}
.arte .btn{align-self:flex-start;font-weight:600;padding:8px 16px;border-radius:4px;font-size:clamp(12px,3.2cqw,15px)}
.arte .marca{position:absolute;left:8%;bottom:5%;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.item{container-type:inline-size}

/* aprovacao */
.aprova{border-top:1px solid var(--line);padding:14px 12px 16px;display:flex;flex-direction:column;gap:10px;font-family:var(--font)}
.post-nome{margin:0;font-size:15px;font-weight:600}
.estado:empty{display:none}
.estado{font-size:14px;padding:8px 10px;border-radius:6px}
.estado.aprovado{background:#e7f4ec;color:var(--ok)}
.estado.ajuste{background:#fbf0df;color:var(--warn)}
.botoes{display:flex;gap:8px;flex-wrap:wrap}
.botoes button{flex:1 1 140px;padding:11px 14px;border-radius:8px;font-weight:600;font-size:14px}
.ok{background:var(--ok);color:#fff;border:0}
.ajuste,.cancelar{background:var(--card);color:var(--fg);border:1px solid var(--line)}
.enviar{background:var(--fg);color:var(--card);border:0}
.form-ajuste{display:flex;flex-direction:column;gap:10px}
.form-ajuste label{display:flex;flex-direction:column;gap:6px;font-size:14px}
textarea{font:inherit;font-size:15px;padding:10px;border:1px solid var(--line);border-radius:8px;resize:vertical;background:var(--card);color:var(--fg)}
button:disabled{opacity:.5;cursor:default}

/* modo celular */
body.cel .feed{max-width:470px}

/* modo computador: midia a esquerda, texto a direita */
body.web .feed{max-width:1000px}
body.web .post{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
body.web .midia-col>.ph{display:none}
body.web .ph-web{display:flex;border-bottom:1px solid var(--line)}
body.web .texto-col{display:flex;flex-direction:column;min-width:0;border-left:1px solid var(--line)}
body.web .legenda{flex:1;overflow-y:auto;max-height:520px;padding:14px 16px}
body.web .leg.curta .leg-txt{display:inline;-webkit-line-clamp:unset}
body.web .leg .mais{display:none}
@media (max-width:760px){
  body.web .post{display:block}
  body.web .midia-col>.ph{display:flex}
  body.web .ph-web{display:none}
  body.web .texto-col{border-left:0}
}
@media (prefers-reduced-motion:reduce){.trilho{scroll-behavior:auto}}
[hidden]{display:none!important}
@media (max-width:560px){.modo{display:none}}
