/* Editor de arte estilo Instagram */
@keyframes ea-entra { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ea-sai { to { opacity: 0; transform: scale(.97); } }
@keyframes ea-ferr { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes ea-pop { 0% { transform: scale(.5); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

dialog.ea { width: min(980px, calc(100vw - 24px)); max-width: none; height: min(860px, calc(100vh - 24px)); max-height: none; margin: auto; padding: 0; border: 0; border-radius: 26px;
  display: flex; flex-direction: column; color: #fff; background: radial-gradient(80% 60% at 50% 0%, #1c2230, #0b0d12 70%); overflow: hidden;
  box-shadow: 0 40px 120px -30px #000; animation: ea-entra .3s cubic-bezier(.2, .8, .2, 1) both; }
dialog.ea:not([open]) { display: none; }
dialog.ea.saindo { animation: ea-sai .18s ease-in both; }
dialog.ea::backdrop { background: rgba(0, 0, 0, .8); backdrop-filter: blur(8px); }
.ea-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 6px; }
.ea-dica { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .55); text-align: center; }
.ea-redondo { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; cursor: pointer; color: #fff; border: 0; background: rgba(255, 255, 255, .1);
  box-shadow: none; filter: none; transition: background .2s, transform .2s; }
.ea-redondo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ea-redondo:hover { background: rgba(255, 255, 255, .18); transform: scale(1.05); }

.ea-palco-caixa { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: 8px 90px 8px 16px; }
.ea-palco { position: relative; container-type: inline-size; max-width: 100%; max-height: 100%; height: 100%; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
  background: #000; box-shadow: 0 30px 80px -30px #000, 0 0 0 1px rgba(255, 255, 255, .08); touch-action: none; }
.ea-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.ea-desenho { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ea-palco.desenhando .ea-desenho { pointer-events: auto; cursor: crosshair; }
.ea-palco.desenhando .ea-camadas { pointer-events: none; }
.ea-camadas { position: absolute; inset: 0; }
.ea-item { position: absolute; cursor: grab; user-select: none; line-height: 1.2; white-space: pre; text-align: center; animation: ea-pop .3s cubic-bezier(.3, 1.5, .5, 1) both; }
.ea-item.ativo { outline: 1.5px dashed rgba(255, 255, 255, .7); outline-offset: 6px; border-radius: 6px; }
.ea-palco.movendo .ea-item.ativo { cursor: grabbing; }
.ea-item-corpo { display: inline-block; padding: .1em .3em; border-radius: .25em; outline: none; white-space: pre-wrap; }
.ea-item.texto .ea-item-corpo { cursor: text; min-width: 1ch; }
.ea-item.figurinha .ea-item-corpo { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; padding: 0; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4)); }

/* ferramentas a direita, como no Instagram */
.ea-ferramentas { position: absolute; right: 16px; top: 12px; display: flex; flex-direction: column; gap: 14px; }
.ea-ferr { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; box-shadow: none; filter: none;
  font: inherit; font-size: 13.5px; font-weight: 700; animation: ea-ferr .35s calc(.1s + var(--i) * 60ms) both; }
.ea-ferr span { text-shadow: 0 1px 4px rgba(0, 0, 0, .6); opacity: .9; transition: opacity .2s; }
.ea-ferr i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 0, 0, .45); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .12);
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background .2s; }
.ea-ferr svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ea-ferr:hover i { transform: scale(1.08); background: rgba(0, 0, 0, .65); }
.ea-ferr.ativo i { background: #fff; color: #111; }
@media (max-width: 760px) { .ea-ferr span { display: none; } .ea-palco-caixa { padding-right: 76px; } }

/* painel de opcoes da ferramenta */
.ea-painel { display: flex; flex-direction: column; gap: 10px; margin: 0 16px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
  animation: ea-entra .2s both; }
.ea-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ea-fontes { display: flex; gap: 6px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.ea-fontes button { flex: none; height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer; color: #fff; border: 1px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .3); box-shadow: none; filter: none; }
.ea-fontes button.ativo { background: #fff; color: #111; }
.ea-cores { display: flex; gap: 8px; flex-wrap: wrap; }
.ea-cores button { width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer; background: var(--c); border: 2px solid rgba(255, 255, 255, .5); box-shadow: none; filter: none; transition: transform .2s; }
.ea-cores button:hover { transform: scale(1.12); }
.ea-cores button.ativo { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); transform: scale(1.12); }
.ea-mini { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 800; color: #fff;
  border: 1px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .3); box-shadow: none; filter: none; }
.ea-mini svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ea-mini.ativo { background: #fff; color: #111; }
.ea-mini.perigo:hover { background: rgba(239, 68, 68, .8); border-color: #ef4444; }
.ea-tam { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 140px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.ea-tam input { flex: 1; accent-color: #fff; }
.ea-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; max-height: 140px; overflow-y: auto; }
.ea-emojis button { height: 42px; padding: 0; border: 0; border-radius: 10px; cursor: pointer; font-size: 24px; background: none; box-shadow: none; filter: none; transition: transform .2s, background .2s;
  animation: ea-pop .3s calc(var(--i) * 12ms) both; }
.ea-emojis button:hover { transform: scale(1.2); background: rgba(255, 255, 255, .08); }

.ea-pe { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px 16px; }
.ea-pe button { height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; filter: none; transition: transform .2s; }
.ea-cancelar { color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); box-shadow: none; }
.ea-salvar { display: inline-flex; align-items: center; gap: 8px; color: #fff; border: 0; background: linear-gradient(135deg, #ff7a3d, #ff3d7f); box-shadow: 0 12px 26px -12px #ff5a1f; }
.ea-salvar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ea-salvar:hover { transform: translateY(-2px); }
.ea-salvar.indo { opacity: .6; pointer-events: none; }

/* botao "Editar arte" na caixa do arquivo e a musica no formulario */
.ea-abrir { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; height: 40px; padding: 0 14px 0 10px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  color: #fff; filter: none; border: 0; background: linear-gradient(135deg, #ff7a3d, #ff3d7f); box-shadow: 0 10px 22px -12px #ff3d7f; transition: transform .2s; }
.ea-abrir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ea-abrir small { font-size: 11px; font-weight: 500; opacity: .8; }
.ea-abrir:hover { transform: translateY(-2px); }
.musica-post { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid rgba(244, 114, 182, .22); background: linear-gradient(135deg, rgba(244, 114, 182, .07), rgba(167, 139, 250, .04)); }
.musica-titulo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.musica-titulo em { font-style: normal; font-weight: 500; opacity: .5; font-size: 11.5px; }
.musica-titulo i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #f472b6, #a78bfa); }
.musica-titulo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.musica-campos { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 8px; }
@media (max-width: 640px) { .musica-campos { grid-template-columns: 1fr; } }
.prod-musica { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #f9a8d4; background: rgba(244, 114, 182, .12); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- post em etapas: 1 formato, 2 arquivo, 3 texto, 4 data ---- */
@keyframes etp-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.etapas-post { display: flex !important; flex-direction: column; gap: 14px; }
.etapas-post > * { order: 9; }
.etapas-post > .etapa-formato { order: 1; } .etapas-post > .etapa-arquivo { order: 2; } .etapas-post > .etapa-texto { order: 3; } .etapas-post > .etapa-data { order: 4; }
.etapas-post > [data-etapa] { position: relative; animation: etp-entra .4s calc(var(--o, 0) * 70ms) both; }
.etapas-post > .etapa-arquivo { --o: 1; } .etapas-post > .etapa-texto { --o: 2; } .etapas-post > .etapa-data { --o: 3; }
.etapas-post > [data-etapa] > h2 { display: flex !important; align-items: center; gap: 10px; }
.etapas-post > [data-etapa] > h2::before { content: attr(data-n); display: none; }
.etapas-post > [data-etapa] > h2::after { flex: 1; }
.etapas-post > [data-etapa]::before { content: "Etapa " attr(data-etapa); position: absolute; top: 18px; right: 20px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 154, 107, .8); }
.etapas-post > [data-etapa] > h2 { counter-increment: none; }
.etapas-post > .etapa-formato > h2::before, .etapas-post > .etapa-arquivo > h2::before, .etapas-post > .etapa-texto > h2::before, .etapas-post > .etapa-data > h2::before {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(160deg, #ff8a4f, #e2460f);
  box-shadow: 0 6px 14px -6px #ff5a1f; }
.etapas-post > .etapa-formato > h2::before { content: "1"; } .etapas-post > .etapa-arquivo > h2::before { content: "2"; }
.etapas-post > .etapa-texto > h2::before { content: "3"; } .etapas-post > .etapa-data > h2::before { content: "4"; }
/* etapa concluida: arquivo escolhido fica com o numero verde */
.etapas-post > .etapa-arquivo:has(.solta-arquivo.com-arquivo) > h2::before { content: "✓"; background: linear-gradient(160deg, #6ee7a8, #22c55e); box-shadow: 0 6px 14px -6px #22c55e; }
.etapas-post > [data-etapa]:focus-within { border-color: rgba(255, 122, 61, .35) !important; }
.etapas-post > [data-etapa] > h2 { padding-right: 76px; }

/* ===== Etapa 1: cartoes de formato com miniatura da proporcao ===== */
:root body .formatos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { :root body .formatos { grid-template-columns: 1fr 1fr; } }
:root body .formato-cartao {
  position: relative; overflow: hidden; isolation: isolate;
  gap: 10px; padding: 18px 12px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--texto) 3%, transparent), transparent 70%), var(--painel);
  border: 1px solid var(--linha); border-radius: 16px; box-shadow: none;
  transition: border-color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .25s ease;
}
:root body .formato-cartao::before {
  content: ""; position: absolute; inset: -40% -20% auto; height: 120%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 90, 31, .22), transparent 70%);
  opacity: 0; transform: translateY(-20%); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
:root body .formato-cartao:hover { transform: translateY(-3px); border-color: var(--linha-forte); box-shadow: 0 10px 28px -14px rgba(0,0,0,.6); }
:root body .formato-cartao:hover::before { opacity: .45; transform: none; }
:root body .formato-cartao:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
:root body .formato-cartao.ativo {
  border-color: rgba(255, 90, 31, .75);
  background: linear-gradient(180deg, rgba(255, 90, 31, .09), rgba(255, 90, 31, .02) 70%), var(--painel);
  box-shadow: 0 0 0 1px rgba(255, 90, 31, .45), 0 14px 34px -16px rgba(255, 90, 31, .55);
}
:root body .formato-cartao.ativo::before { opacity: 1; transform: none; }
:root body .formato-cartao .formato-nome { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; color: var(--texto); }
:root body .formato-cartao.ativo .formato-nome { color: var(--destaque); }

/* selo de marcado */
.fmt-check {
  position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--destaque); color: #fff;
  transform: scale(0); opacity: 0; transition: transform .3s cubic-bezier(.3,1.6,.5,1), opacity .2s ease;
  box-shadow: 0 4px 12px -2px rgba(255, 90, 31, .6);
}
.fmt-check svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.formato-cartao.ativo .fmt-check { transform: scale(1); opacity: 1; }

/* miniatura: a proporcao real de cada formato */
.fmt-molde { height: 58px; display: grid; place-items: center; }
.fmt-tela {
  position: relative; display: block; width: 34px; height: 42px; border-radius: 6px;
  border: 1.5px solid color-mix(in srgb, var(--apagado) 70%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--texto) 10%, transparent), color-mix(in srgb, var(--texto) 3%, transparent));
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.fmt-tela i { position: absolute; display: block; }
.formato-cartao:hover .fmt-tela { transform: translateY(-2px) scale(1.04); }
.formato-cartao.ativo .fmt-tela {
  border-color: var(--destaque);
  background: linear-gradient(160deg, rgba(255, 90, 31, .45), rgba(255, 140, 60, .12));
  box-shadow: 0 6px 18px -6px rgba(255, 90, 31, .6);
}
.formato-cartao.ativo .fmt-tela i { --tinta: #fff; }
.fmt-tela i { --tinta: color-mix(in srgb, var(--apagado) 85%, transparent); }

/* Feed: 4:5 com sol e montanha */
.fmt-feed .fmt-tela i:nth-child(1) { width: 7px; height: 7px; border-radius: 50%; top: 8px; right: 7px; background: var(--tinta); }
.fmt-feed .fmt-tela i:nth-child(2) { left: 4px; right: 4px; bottom: 5px; height: 14px; background: var(--tinta); opacity: .7; clip-path: polygon(0 100%, 35% 25%, 55% 60%, 72% 40%, 100% 100%); }
.fmt-feed .fmt-tela i:nth-child(3) { display: none; }

/* Carrossel: cartoes empilhados e pontinhos */
.fmt-carrossel .fmt-tela { box-shadow: 5px 0 0 -1.5px color-mix(in srgb, var(--apagado) 35%, transparent), 10px 0 0 -3px color-mix(in srgb, var(--apagado) 18%, transparent); transform: translateX(-4px); }
.formato-cartao.fmt-carrossel:hover .fmt-tela { transform: translate(-6px, -2px); box-shadow: 8px 0 0 -1.5px color-mix(in srgb, var(--apagado) 35%, transparent), 15px 0 0 -3px color-mix(in srgb, var(--apagado) 18%, transparent); }
.formato-cartao.fmt-carrossel.ativo .fmt-tela { box-shadow: 6px 0 0 -1.5px rgba(255, 90, 31, .45), 12px 0 0 -3px rgba(255, 90, 31, .22); }
.fmt-carrossel .fmt-tela i { bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--tinta); opacity: .45; }
.fmt-carrossel .fmt-tela i:nth-child(1) { left: calc(50% - 8px); opacity: 1; }
.fmt-carrossel .fmt-tela i:nth-child(2) { left: calc(50% - 2px); }
.fmt-carrossel .fmt-tela i:nth-child(3) { left: calc(50% + 4px); }

/* Reels: 9:16 com play */
.fmt-reels .fmt-tela, .fmt-story .fmt-tela { width: 28px; height: 50px; border-radius: 7px; }
.fmt-reels .fmt-tela i:nth-child(1) { top: 50%; left: 50%; width: 0; height: 0; transform: translate(-35%, -50%); border-left: 9px solid var(--tinta); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.fmt-reels .fmt-tela i:nth-child(2) { left: 4px; right: 4px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--tinta); opacity: .35; }
.fmt-reels .fmt-tela i:nth-child(3) { left: 4px; width: 40%; bottom: 5px; height: 2px; border-radius: 2px; background: var(--tinta); }
.formato-cartao.fmt-reels.ativo .fmt-tela i:nth-child(3) { animation: fmt-progresso 2.4s linear infinite; }

/* Stories: 9:16 com barrinhas no topo */
.fmt-story .fmt-tela i { top: 4px; height: 2px; width: 5px; border-radius: 2px; background: var(--tinta); opacity: .4; }
.fmt-story .fmt-tela i:nth-child(1) { left: 4px; opacity: 1; }
.fmt-story .fmt-tela i:nth-child(2) { left: 11px; }
.fmt-story .fmt-tela i:nth-child(3) { left: 18px; }
.fmt-story .fmt-tela::after { content: ""; position: absolute; left: 50%; top: 52%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); border: 1.5px solid color-mix(in srgb, var(--apagado) 85%, transparent); }
.formato-cartao.fmt-story.ativo .fmt-tela::after { border-color: #fff; }
.formato-cartao.fmt-story.ativo .fmt-tela i:nth-child(2) { animation: fmt-acende 2.4s ease-in-out infinite; }

@keyframes fmt-progresso { from { width: 0; } to { width: calc(100% - 8px); } }
@keyframes fmt-acende { 0%, 40% { opacity: .4; } 55%, 100% { opacity: 1; } }

/* regras em chips */
.fmt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.fmt-chips em {
  font-style: normal; font-size: 10.5px; line-height: 1; white-space: nowrap; padding: 4px 7px; border-radius: 999px;
  color: var(--apagado); background: color-mix(in srgb, var(--texto) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--texto) 7%, transparent);
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.formato-cartao.ativo .fmt-chips em { color: color-mix(in srgb, var(--destaque) 80%, var(--texto)); background: rgba(255, 90, 31, .08); border-color: rgba(255, 90, 31, .22); }

@media (prefers-reduced-motion: reduce) {
  .formato-cartao .fmt-tela i { animation: none !important; }
}

/* ===== Etapa 2: caixa do arquivo ===== */
:root body .solta-arquivo.sa2 {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center; gap: 22px;
  min-height: 190px; padding: 26px; border-radius: 16px; cursor: pointer; transform: none;
  border: 1.5px dashed color-mix(in srgb, var(--texto) 14%, transparent);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 90, 31, .05), transparent 60%),
    color-mix(in srgb, var(--texto) 2%, transparent);
  transition: border-color .25s ease, background .3s ease, box-shadow .3s ease;
}
/* grade fina de fundo */
:root body .solta-arquivo.sa2::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(color-mix(in srgb, var(--texto) 9%, transparent) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent);
          mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent);
}
:root body .solta-arquivo.sa2:hover { border-color: rgba(255, 90, 31, .55); background: radial-gradient(120% 90% at 50% 0%, rgba(255, 90, 31, .09), transparent 60%), color-mix(in srgb, var(--texto) 2.5%, transparent); }
:root body .solta-arquivo.sa2:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; }
:root body .solta-arquivo.sa2.sobre {
  border-style: solid; border-color: var(--destaque); transform: none;
  background: radial-gradient(120% 100% at 50% 50%, rgba(255, 90, 31, .16), rgba(255, 90, 31, .04) 70%);
  box-shadow: inset 0 0 0 4px rgba(255, 90, 31, .08), 0 0 0 4px rgba(255, 90, 31, .1);
}
:root body .solta-arquivo.sa2.sobre > * { pointer-events: none; }

/* icone vazio: anel girando e seta que respira */
.sa2-icone {
  position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; color: var(--destaque);
  background: radial-gradient(circle at 50% 35%, rgba(255, 90, 31, .22), rgba(255, 90, 31, .06));
  box-shadow: inset 0 0 0 1px rgba(255, 90, 31, .3), 0 10px 26px -12px rgba(255, 90, 31, .7);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.sa2-icone i {
  position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 90, 31, .8) 85%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  animation: sa2-gira 3.2s linear infinite;
}
.sa2-icone svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: sa2-sobe 2.2s ease-in-out infinite; }
.solta-arquivo.sa2:hover .sa2-icone { transform: translateY(-3px) scale(1.05); }
.solta-arquivo.sa2.sobre .sa2-icone { transform: scale(1.12); }
.solta-arquivo.sa2.sobre .sa2-icone svg { animation-duration: .8s; }
@keyframes sa2-gira { to { transform: rotate(360deg); } }
@keyframes sa2-sobe { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-3px); } }

.sa2-vazio { display: grid; gap: 4px; text-align: left; }
.sa2-vazio > strong { font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--texto); }
.sa2-vazio > span { font-size: 12.5px; color: var(--apagado); }
.sa2-soltar { display: none; color: var(--destaque); }
.solta-arquivo.sa2.sobre .sa2-normal { display: none; }
.solta-arquivo.sa2.sobre .sa2-soltar { display: inline; }
:root body .sa2-vazio .ligacao { color: var(--destaque); font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px solid rgba(255, 90, 31, .4); }
:root body .sa2-vazio .ligacao:hover { border-bottom-color: var(--destaque); }
.sa2-tipos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.sa2-tipos em, .sa2-meta em {
  font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .04em; line-height: 1; padding: 4px 7px; border-radius: 6px;
  color: var(--apagado); background: color-mix(in srgb, var(--texto) 5%, transparent); border: 1px solid color-mix(in srgb, var(--texto) 8%, transparent);
}
.sa2-tipos .sa2-ideal { flex-basis: 100%; width: fit-content; max-width: 100%; letter-spacing: 0; font-weight: 500; color: color-mix(in srgb, var(--destaque) 75%, var(--texto)); background: rgba(255, 90, 31, .07); border-color: rgba(255, 90, 31, .2); }
.sa2-tipos .sa2-ideal::before { content: "Ideal · "; font-weight: 650; }

/* com arquivo: previa grande + dados + acoes */
:root body .solta-arquivo.sa2.com-arquivo {
  justify-content: flex-start; border-style: solid; border-color: rgba(34, 197, 94, .28);
  background: radial-gradient(120% 120% at 0% 0%, rgba(34, 197, 94, .08), transparent 55%), color-mix(in srgb, var(--texto) 2%, transparent);
  animation: sa2-chega .45s cubic-bezier(.2,.8,.2,1);
}
:root body .solta-arquivo.sa2.com-arquivo:hover { border-color: rgba(34, 197, 94, .45); }
@keyframes sa2-chega { from { opacity: .4; transform: scale(.985); } to { opacity: 1; transform: none; } }
.sa2-previa { position: relative; flex: none; }
:root body .sa2 .solta-miniatura, .sa2-doc {
  display: block; width: 128px; height: 128px; object-fit: cover; border-radius: 12px; background: #000;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--texto) 10%, transparent), 0 14px 30px -14px rgba(0,0,0,.8);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.solta-arquivo.sa2:hover .solta-miniatura { transform: rotate(-1.5deg) scale(1.02); }
.sa2-doc { display: grid; place-items: center; font-size: 18px; font-weight: 750; letter-spacing: .06em; color: var(--destaque); background: linear-gradient(160deg, rgba(255, 90, 31, .18), rgba(255, 90, 31, .04)); }
.sa2-play { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }
.sa2-play::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.sa2-ok {
  position: absolute; right: -7px; bottom: -7px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #6ee7a8, #22c55e);
  box-shadow: 0 0 0 3px var(--painel), 0 6px 14px -4px rgba(34, 197, 94, .7);
  animation: sa2-selo .5s .15s cubic-bezier(.3,1.6,.5,1) both;
}
.sa2-ok svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes sa2-selo { from { transform: scale(0); } to { transform: scale(1); } }

.sa2-info { display: grid; gap: 6px; min-width: 0; text-align: left; }
.sa2-rotulo { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #22c55e; }
.sa2-info > strong { font-size: 15px; font-weight: 650; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sa2-meta { display: flex; gap: 5px; }
.sa2-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
:root body .sa2-botao {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; margin: 0; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--texto);
  background: color-mix(in srgb, var(--texto) 5%, transparent); border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  box-shadow: none; transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
:root body .sa2-botao:hover { background: color-mix(in srgb, var(--texto) 9%, transparent); transform: translateY(-1px); }
:root body .sa2-botao svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root body .sa2-botao.sa2-forte { color: #fff; border-color: transparent; background: linear-gradient(160deg, #ff7a3d, #ff5a1f); box-shadow: 0 8px 20px -10px rgba(255, 90, 31, .9); }
:root body .sa2-botao.sa2-forte:hover { background: linear-gradient(160deg, #ff8a52, #ff6a2f); }
:root body .sa2-botao.sa2-forte small { font-weight: 500; opacity: .8; font-size: 11px; }

@media (max-width: 620px) {
  :root body .solta-arquivo.sa2 { flex-direction: column; text-align: center; }
  .sa2-vazio, .sa2-info { text-align: center; justify-items: center; }
  .sa2-tipos, .sa2-acoes { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .sa2-icone i, .sa2-icone svg { animation: none; } }

/* ===== Etapa 3: o que vai escrito ===== */
:root body .etapa-texto > h2 .selo {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  color: color-mix(in srgb, var(--destaque) 80%, var(--texto)); background: rgba(255, 90, 31, .08); border: 1px solid rgba(255, 90, 31, .25);
}
:root body .etapa-texto .tx-aviso {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; padding: 10px 14px; border-radius: 12px;
  font-size: 12.5px; color: var(--texto); line-height: 1.4;
  background: linear-gradient(90deg, rgba(255, 90, 31, .1), rgba(255, 90, 31, .02));
  border: 1px solid rgba(255, 90, 31, .18); border-left: 3px solid var(--destaque);
}
.tx-aviso i {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font: italic 700 12px Georgia, serif; color: #fff; background: var(--destaque);
}
:root body .tx-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
:root body .tx-grade > .campo-longo { grid-column: 1 / -1; }
@media (max-width: 700px) { :root body .tx-grade { grid-template-columns: 1fr; } }

/* cada campo vira um painel pequeno */
:root body .tx-campo {
  display: flex; flex-direction: column; gap: 0; margin: 0; padding: 14px 14px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--texto) 2.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--texto) 7%, transparent);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
:root body .tx-campo:hover { border-color: color-mix(in srgb, var(--texto) 12%, transparent); }
:root body .tx-campo:focus-within {
  border-color: rgba(255, 90, 31, .45);
  background: linear-gradient(180deg, rgba(255, 90, 31, .05), transparent 60%), color-mix(in srgb, var(--texto) 2.5%, transparent);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, .08);
}
:root body .tx-rotulo { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 650; color: var(--texto); }
.tx-rotulo i {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  color: var(--apagado); background: color-mix(in srgb, var(--texto) 6%, transparent);
  transition: color .25s ease, background .25s ease, transform .3s cubic-bezier(.3,1.6,.5,1);
}
.tx-rotulo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tx-campo:focus-within .tx-rotulo i { color: #fff; background: linear-gradient(160deg, #ff7a3d, #ff5a1f); transform: scale(1.08); box-shadow: 0 6px 14px -6px rgba(255, 90, 31, .8); }
:root body .tx-campo .ficha-dica { margin: 4px 0 10px 35px; font-size: 11.5px; color: var(--apagado); }
:root body .tx-campo input, :root body .tx-campo textarea {
  width: 100%; margin: 0; padding: 11px 13px; border-radius: 10px; font-size: 14px; line-height: 1.5; color: var(--texto);
  background: color-mix(in srgb, #000 22%, var(--painel)); border: 1px solid color-mix(in srgb, var(--texto) 9%, transparent);
  box-shadow: none; outline: none; transition: border-color .2s ease, background .2s ease;
}
:root body .tx-campo input::placeholder, :root body .tx-campo textarea::placeholder { color: color-mix(in srgb, var(--apagado) 60%, transparent); }
:root body .tx-campo input:focus, :root body .tx-campo textarea:focus { border-color: rgba(255, 90, 31, .6); box-shadow: none; }
:root body .tx-campo textarea { resize: vertical; min-height: 64px; }

/* legenda: caixa de compor com barra de limite */
.tx-caixa {
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: color-mix(in srgb, #000 22%, var(--painel)); border: 1px solid color-mix(in srgb, var(--texto) 9%, transparent);
  transition: border-color .2s ease;
}
.tx-compositor:focus-within .tx-caixa { border-color: rgba(255, 90, 31, .6); }
:root body .tx-caixa textarea { border: 0; border-radius: 0; background: transparent; min-height: 140px; padding: 14px 15px; font-size: 14.5px; line-height: 1.6; }
:root body .tx-caixa textarea:focus { border: 0; }
.tx-rodape {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  border-top: 1px solid color-mix(in srgb, var(--texto) 7%, transparent);
  background: color-mix(in srgb, var(--texto) 2%, transparent);
}
.tx-barra { flex: 1; height: 4px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--texto) 8%, transparent); }
.tx-barra b {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #ff9a5a, #ff5a1f);
  transition: width .3s cubic-bezier(.2,.8,.2,1), background .3s ease;
}
.tx-barra b.quase { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.tx-barra b.ruim { background: linear-gradient(90deg, #f87171, #ef4444); animation: tx-pisca 1.2s ease-in-out infinite; }
@keyframes tx-pisca { 50% { opacity: .55; } }
:root body .tx-rodape .contador { flex: none; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--apagado); }
:root body .tx-rodape .contador.ruim { color: #f87171; }

/* musica no mesmo padrao */
:root body .etapa-texto .musica-post {
  padding: 14px; border-radius: 14px; gap: 10px;
  border: 1px solid rgba(244, 114, 182, .2);
  background: radial-gradient(120% 140% at 0% 0%, rgba(244, 114, 182, .09), transparent 55%), color-mix(in srgb, var(--texto) 2.5%, transparent);
  transition: border-color .25s ease, box-shadow .25s ease;
}
:root body .etapa-texto .musica-post:focus-within { border-color: rgba(244, 114, 182, .5); box-shadow: 0 0 0 3px rgba(244, 114, 182, .08); }
:root body .etapa-texto .musica-titulo i { animation: tx-nota 2.6s ease-in-out infinite; }
@keyframes tx-nota { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
:root body .etapa-texto .musica-campos input {
  margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px;
  background: color-mix(in srgb, #000 22%, var(--painel)); border: 1px solid color-mix(in srgb, var(--texto) 9%, transparent); box-shadow: none;
}
:root body .etapa-texto .musica-campos input:focus { border-color: rgba(244, 114, 182, .6); outline: none; }
:root body .etapa-texto .musica-post .ficha-dica { margin: 0; line-height: 1.45; }

/* mandar para aprovacao: interruptor em cartao */
:root body .etapas-post > .linha-interruptor {
  order: 5; display: flex; align-items: center; gap: 14px; margin: 0 !important; padding: 14px 16px; border-radius: 14px; cursor: pointer;
  background: color-mix(in srgb, var(--texto) 2.5%, transparent); border: 1px solid color-mix(in srgb, var(--texto) 8%, transparent);
  transition: border-color .25s ease, background .25s ease;
}
:root body .etapas-post > .linha-interruptor:hover { border-color: color-mix(in srgb, var(--texto) 14%, transparent); }
:root body .etapas-post > .linha-interruptor:has(input:checked) { border-color: rgba(34, 197, 94, .4); background: radial-gradient(120% 140% at 0% 0%, rgba(34, 197, 94, .09), transparent 55%), color-mix(in srgb, var(--texto) 2.5%, transparent); }
:root body .etapas-post > .linha-interruptor input {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 40px; height: 22px; margin: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--texto) 14%, transparent); border: 0; box-shadow: none; transition: background .25s ease;
}
:root body .etapas-post > .linha-interruptor input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .3s cubic-bezier(.3,1.5,.5,1);
}
:root body .etapas-post > .linha-interruptor input:checked { background: linear-gradient(160deg, #6ee7a8, #22c55e); }
:root body .etapas-post > .linha-interruptor input:checked::after { transform: translateX(18px); }
:root body .etapas-post > .linha-interruptor strong { font-size: 13.5px; }
:root body .etapas-post > .linha-interruptor small { margin-top: 2px; font-size: 11.5px; }
:root body .etapas-post > .acoes, :root body .etapas-post > .erro { order: 6; }

/* ===== Etapa 4: quando vai sair ===== */
/* resumo em cima: folhinha de calendario + frase */
.qd-resumo {
  display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(255, 90, 31, .25);
  background: radial-gradient(120% 160% at 0% 0%, rgba(255, 90, 31, .12), transparent 55%), color-mix(in srgb, var(--texto) 2.5%, transparent);
  transition: border-color .3s ease, background .3s ease;
}
.qd-resumo.vazio { border-color: color-mix(in srgb, var(--texto) 9%, transparent); border-style: dashed; background: color-mix(in srgb, var(--texto) 2%, transparent); }
.qd-resumo.passado { border-color: rgba(248, 113, 113, .35); background: radial-gradient(120% 160% at 0% 0%, rgba(248, 113, 113, .1), transparent 55%), color-mix(in srgb, var(--texto) 2.5%, transparent); }
.qd-folha {
  flex: none; display: flex; flex-direction: column; width: 52px; overflow: hidden; border-radius: 12px; text-align: center;
  background: var(--painel); box-shadow: 0 0 0 1px color-mix(in srgb, var(--texto) 10%, transparent), 0 10px 22px -12px rgba(0,0,0,.8);
  animation: qd-folha .45s cubic-bezier(.3,1.5,.5,1);
}
.qd-folha small { display: block; padding: 3px 0 2px; font-size: 9.5px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: linear-gradient(160deg, #ff7a3d, #ff5a1f); }
.qd-folha b { display: block; padding: 4px 0 6px; font-size: 21px; font-weight: 750; line-height: 1.1; color: var(--texto); font-variant-numeric: tabular-nums; }
.qd-resumo.vazio .qd-folha small { background: color-mix(in srgb, var(--texto) 18%, transparent); }
.qd-resumo.vazio .qd-folha b { color: var(--apagado); }
.qd-resumo.passado .qd-folha small { background: linear-gradient(160deg, #f87171, #ef4444); }
@keyframes qd-folha { from { transform: rotateX(70deg) translateY(-4px); opacity: .3; } to { transform: none; opacity: 1; } }
.qd-texto { display: grid; gap: 3px; min-width: 0; flex: 1; }
.qd-texto strong { font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--texto); }
.qd-texto strong::first-letter { text-transform: uppercase; }
.qd-texto small { font-size: 12.5px; color: var(--apagado); }
.qd-resumo:not(.vazio):not(.passado) .qd-texto small { color: color-mix(in srgb, var(--destaque) 70%, var(--texto)); }
.qd-acoes { display: flex; align-items: center; gap: 12px; margin-left: auto; }
:root body .qd-acoes .quando-limpar { height: auto; padding: 0; font-size: 12.5px; color: var(--apagado); text-decoration: none; background: none; border: 0; cursor: pointer; }
:root body .qd-acoes .quando-limpar:hover { color: #f87171; }
:root body .qd-acoes .postar-agora {
  margin: 0; height: 38px; padding: 0 15px; border-radius: 11px; font-size: 13px; color: #fff; border: 0;
  background: linear-gradient(160deg, #ff7a3d, #ff5a1f); box-shadow: 0 8px 20px -10px rgba(255, 90, 31, .9);
  transition: transform .2s ease, box-shadow .2s ease;
}
:root body .qd-acoes .postar-agora:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(255, 90, 31, 1); }
:root body .qd-acoes .postar-agora svg { width: 16px; height: 16px; }

/* linhas de atalhos */
:root body .qd-post { display: grid; gap: 16px; align-items: stretch; }
:root body .qd-linha { display: grid; gap: 8px; }
:root body .qd-linha .quando-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }
.qd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qd-dia, .qd-hora {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin: 0; cursor: pointer;
  border-radius: 12px; color: var(--texto); box-shadow: none;
  background: color-mix(in srgb, var(--texto) 3%, transparent); border: 1px solid color-mix(in srgb, var(--texto) 9%, transparent);
  transition: border-color .2s ease, background .2s ease, transform .25s cubic-bezier(.3,1.5,.5,1), box-shadow .25s ease, color .2s ease;
  animation: qd-entra .35s calc(var(--i, 0) * 35ms) both;
}
@keyframes qd-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.qd-dia { width: 58px; height: 58px; }
.qd-dia small { font-size: 10.5px; font-weight: 600; text-transform: capitalize; color: var(--apagado); }
.qd-dia b { font-size: 18px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.qd-hora { height: 58px; padding: 0 16px; min-width: 84px; }
.qd-hora b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qd-hora small { font-size: 10.5px; color: var(--apagado); }
.qd-dia:hover, .qd-hora:hover { transform: translateY(-2px); border-color: rgba(255, 90, 31, .45); background: rgba(255, 90, 31, .06); }
.qd-dia.ativo, .qd-hora.ativo {
  color: #fff; border-color: transparent;
  background: linear-gradient(160deg, #ff7a3d, #ff5a1f);
  box-shadow: 0 10px 22px -10px rgba(255, 90, 31, .9);
}
.qd-dia.ativo small, .qd-hora.ativo small { color: rgba(255, 255, 255, .85); }

/* "Outro dia" / "Outro horario": o seletor completo continua ali */
:root body .quando-botao.qd-outro {
  min-width: 0; height: 58px; padding: 0 16px; gap: 9px; border-radius: 12px; font-size: 14px;
  border: 1px dashed color-mix(in srgb, var(--texto) 16%, transparent); background: transparent;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
:root body .quando-botao.qd-outro:hover, :root body .quando-botao.qd-outro.aberto { border-color: rgba(255, 90, 31, .6); background: rgba(255, 90, 31, .05); }
:root body .quando-botao.qd-outro em { font-size: 13px; }
:root body .quando-botao.qd-outro.ativo {
  border-style: solid; border-color: transparent; color: #fff;
  background: linear-gradient(160deg, #ff7a3d, #ff5a1f); box-shadow: 0 10px 22px -10px rgba(255, 90, 31, .9);
}
:root body .quando-botao.qd-outro.ativo svg { color: #fff; }

@media (max-width: 640px) {
  .qd-resumo { flex-wrap: wrap; }
  .qd-acoes { width: 100%; justify-content: flex-end; }
  .qd-dia { width: 52px; height: 54px; }
}

/* ===== Etapa 4: vida e horario digitado ===== */
/* brilho que passeia pelo resumo */
.qd-resumo { position: relative; overflow: hidden; isolation: isolate; }
.qd-resumo::before {
  content: ""; position: absolute; inset: -60% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(30% 50% at 50% 50%, rgba(255, 90, 31, .16), transparent 70%);
  animation: qd-passeia 9s ease-in-out infinite alternate;
}
.qd-resumo.vazio::before { opacity: .25; }
@keyframes qd-passeia { from { transform: translateX(-35%); } to { transform: translateX(45%); } }
/* folhinha respira; ao trocar, vira */
.qd-folha { animation: qd-flutua 4s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes qd-flutua { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-3px) rotate(1deg); } }
.qd-resumo.troca .qd-folha { animation: qd-vira .55s cubic-bezier(.3,1.4,.5,1), qd-flutua 4s .55s ease-in-out infinite; }
@keyframes qd-vira { 0% { transform: perspective(300px) rotateX(0); } 45% { transform: perspective(300px) rotateX(-90deg); } 100% { transform: perspective(300px) rotateX(0); } }
.qd-resumo.troca .qd-folha b { animation: qd-numero .55s ease both; }
@keyframes qd-numero { 0%, 45% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
.qd-resumo.troca .qd-texto strong { animation: qd-frase .45s .08s cubic-bezier(.2,.8,.2,1) both; }
.qd-resumo.troca .qd-texto small { animation: qd-frase .45s .16s cubic-bezier(.2,.8,.2,1) both; }
@keyframes qd-frase { from { opacity: 0; transform: translateX(-8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
/* pontinho vivo antes do "daqui a" */
.qd-resumo:not(.vazio):not(.passado) .qd-texto small { display: inline-flex; align-items: center; gap: 7px; }
.qd-resumo:not(.vazio):not(.passado) .qd-texto small::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--destaque);
  box-shadow: 0 0 0 0 rgba(255, 90, 31, .6); animation: qd-ponto 1.8s ease-out infinite;
}
@keyframes qd-ponto { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 31, .6); } 100% { box-shadow: 0 0 0 7px rgba(255, 90, 31, 0); } }
/* aviaozinho decola no hover */
:root body .qd-acoes .postar-agora svg { transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
:root body .qd-acoes .postar-agora:hover svg { transform: translate(3px, -3px) rotate(-8deg); }

/* atalho escolhido: pula e ganha um reflexo que passa */
.qd-dia, .qd-hora, :root body .quando-botao.qd-outro { position: relative; overflow: hidden; }
.qd-dia.ativo, .qd-hora.ativo, :root body .quando-botao.qd-outro.ativo { animation: qd-pula .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes qd-pula { 0% { transform: scale(.9); } 60% { transform: scale(1.07); } 100% { transform: scale(1); } }
.qd-dia.ativo::after, .qd-hora.ativo::after, :root body .quando-botao.qd-outro.ativo::after, .qd-digitar.ativo::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: qd-reflexo 3.2s 0.4s ease-in-out infinite;
}
@keyframes qd-reflexo { 0% { left: -60%; } 35%, 100% { left: 130%; } }
.qd-dia:active, .qd-hora:active { transform: scale(.94); }
/* "Hoje" ganha um pontinho embaixo */
.qd-dias .qd-dia:first-child::before { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--destaque); }
.qd-dias .qd-dia.ativo:first-child::before { background: #fff; }

/* horario digitado */
.qd-digitar {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 4px; height: 58px; padding: 0 12px 0 6px; border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--texto) 16%, transparent); background: transparent; cursor: text;
  transition: border-color .2s ease, background .2s ease, box-shadow .25s ease;
  animation: qd-entra .35s calc(4 * 35ms) both;
}
.qd-digitar:hover { border-color: rgba(255, 90, 31, .5); }
.qd-digitar:focus-within { border-style: solid; border-color: var(--destaque); background: rgba(255, 90, 31, .06); box-shadow: 0 0 0 3px rgba(255, 90, 31, .12); }
.qd-digitar.ativo:not(:focus-within) {
  border-style: solid; border-color: transparent; color: #fff;
  background: linear-gradient(160deg, #ff7a3d, #ff5a1f); box-shadow: 0 10px 22px -10px rgba(255, 90, 31, .9);
  animation: qd-pula .45s cubic-bezier(.3,1.6,.5,1);
}
:root body .qd-relogio {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 10px; cursor: pointer;
  color: var(--apagado); background: transparent; border: 0; box-shadow: none; transition: color .2s ease, background .2s ease;
}
:root body .qd-relogio:hover { color: var(--destaque); background: rgba(255, 90, 31, .1); }
:root body .qd-relogio svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: transform .6s cubic-bezier(.3,1.4,.5,1); }
:root body .qd-relogio:hover svg { transform: rotate(360deg); }
.qd-digitar.ativo:not(:focus-within) .qd-relogio { color: #fff; }
.qd-digitar-campo { display: grid; gap: 1px; cursor: text; }
.qd-digitar-campo small { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.qd-digitar.ativo:not(:focus-within) .qd-digitar-campo small { color: rgba(255, 255, 255, .8); }
:root body .qd-digitar-campo input {
  width: 64px; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
  font-size: 17px; font-weight: 700; letter-spacing: .02em; color: inherit; font-variant-numeric: tabular-nums; caret-color: var(--destaque);
}
:root body .qd-digitar-campo input::placeholder { color: color-mix(in srgb, var(--apagado) 70%, transparent); }
.qd-digitar.erro { border-style: solid; border-color: #ef4444; background: rgba(239, 68, 68, .08); animation: qd-treme .4s ease; }
.qd-digitar.erro .qd-digitar-campo small::after { content: " · hora inválida"; color: #f87171; text-transform: none; letter-spacing: 0; }
@keyframes qd-treme { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

@media (prefers-reduced-motion: reduce) {
  .qd-resumo::before, .qd-folha, .qd-texto small::before, .qd-dia::after, .qd-hora::after, .qd-digitar::after { animation: none !important; }
}

/* ===== Etapa 4: campo de digitar a hora, acabamento ===== */
/* o tema escuro pinta todo input com fundo e cor cinza: aqui o campo e so texto */
:root body .qd-digitar .qd-digitar-campo input {
  width: 62px !important; height: 24px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important;
  font-size: 18px !important; font-weight: 750 !important; line-height: 24px !important; letter-spacing: .02em;
  color: var(--texto) !important; -webkit-text-fill-color: currentColor !important; font-variant-numeric: tabular-nums;
}
:root body .qd-digitar .qd-digitar-campo input::placeholder { color: color-mix(in srgb, var(--apagado) 60%, transparent) !important; -webkit-text-fill-color: color-mix(in srgb, var(--apagado) 60%, transparent) !important; }
.qd-digitar { gap: 10px; padding: 0 16px 0 9px; min-width: 132px; }
:root body .qd-digitar .qd-relogio {
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--destaque); background: rgba(255, 90, 31, .1);
}
:root body .qd-digitar .qd-relogio:hover { background: rgba(255, 90, 31, .18); }
.qd-digitar-campo { gap: 2px; }
.qd-digitar-campo small { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; }
/* marcado (hora fora dos atalhos): laranja com texto branco legivel */
.qd-digitar.ativo:not(:focus-within) .qd-digitar-campo input { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
:root body .qd-digitar.ativo:not(:focus-within) .qd-relogio { color: #fff; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.qd-digitar.ativo:not(:focus-within) .qd-digitar-campo small { color: rgba(255, 255, 255, .85); }
/* digitando: borda laranja e o campo pede o numero */
.qd-digitar:focus-within .qd-digitar-campo small { color: var(--destaque); }

/* ===== Etapa 4: relogio e hora centralizados ===== */
.qd-digitar { justify-content: center; }
:root body .qd-digitar .qd-relogio { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; min-width: 0 !important; line-height: 0 !important; gap: 0 !important; }
:root body .qd-digitar .qd-relogio svg { display: block; margin: 0 !important; flex: none; }
.qd-digitar-campo { justify-items: center; text-align: center; }
:root body .qd-digitar .qd-digitar-campo input { text-align: center !important; }

/* ===== Previa: o Instagram de verdade, num iPhone ===== */
:root body .previa-cartao { padding: 18px 16px 16px; }
:root body .previa-cartao > h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; font-size: 14px; }
:root body .previa-cartao > h2 .selo { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: color-mix(in srgb, var(--destaque) 80%, var(--texto)); background: rgba(255, 90, 31, .08); border: 1px solid rgba(255, 90, 31, .25); }
:root body .previa-cartao .previa-nota { text-align: center; margin: 14px 4px 0; font-size: 11px; opacity: .8; }
:root body .previa-celular { border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; padding: 0 !important; aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; }

.ig-aparelho {
  --ig-fundo: #000; --ig-texto: #f5f5f5; --ig-cinza: #a8a8a8; --ig-linha: #262626; --ig-azul: #0095f6;
  position: relative; width: 282px; margin: 0 auto; padding: 9px; border-radius: 46px;
  background: linear-gradient(145deg, #3a3a3e, #1a1a1d 40%, #2a2a2e);
  box-shadow: inset 0 0 0 1.5px #4a4a50, inset 0 0 0 3px #111, 0 30px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04);
}
/* botoes laterais do aparelho */
.ig-aparelho::before, .ig-aparelho::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2c2c30; }
.ig-aparelho::before { left: -2px; top: 110px; height: 52px; box-shadow: 0 -38px 0 -12px #2c2c30; }
.ig-aparelho::after { right: -2px; top: 140px; height: 70px; }

.ig-tela {
  position: relative; overflow: hidden; display: flex; flex-direction: column; height: 560px; border-radius: 38px;
  background: var(--ig-fundo); color: var(--ig-texto);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px; line-height: 1.35; -webkit-font-smoothing: antialiased;
}
.ig-ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ig-ic.mini { width: 13px; height: 13px; }
.ig-pontos { fill: currentColor; stroke: none; width: 18px; height: 18px; }
.ig-empurra { flex: 1; }

/* barra de status e ilha */
.ig-status { position: relative; z-index: 3; flex: none; display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 4px 22px 0 28px; }
.ig-status b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.ig-ilha { position: absolute; left: 50%; top: 9px; width: 84px; height: 24px; margin-left: -42px; border-radius: 20px; background: #000; box-shadow: inset 0 0 0 1px #111; }
.ig-ilha::after { content: ""; position: absolute; right: 12px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3a55, #0a0a12 70%); }
.ig-status-dir { display: flex; align-items: center; gap: 5px; }
.ig-status-dir svg { height: 10px; width: auto; fill: currentColor; }
.ig-bateria { position: relative; width: 22px; height: 11px; border-radius: 3.5px; border: 1px solid rgba(255,255,255,.45); padding: 1px; }
.ig-bateria::after { content: ""; position: absolute; right: -3px; top: 3px; width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(255,255,255,.45); }
.ig-bateria i { display: block; height: 100%; width: 80%; border-radius: 2px; background: currentColor; }

/* avatar */
.ig-avatar { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #555, #333); color: #fff; font-size: 12px; font-weight: 700; }
.ig-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ig-avatar.anel { box-shadow: 0 0 0 2px var(--ig-fundo), 0 0 0 3.5px #e1306c; }
.ig-avatar.mini { width: 22px; height: 22px; font-size: 9px; box-shadow: 0 0 0 1.5px var(--ig-texto); }

/* ---------- Feed / Carrossel ---------- */
.ig-nav { flex: none; display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; padding: 2px 12px 8px; }
.ig-nav .ig-ic { width: 24px; height: 24px; stroke-width: 2.2; }
.ig-nav span { display: grid; text-align: center; line-height: 1.15; }
.ig-nav small { font-size: 9.5px; font-weight: 600; color: var(--ig-cinza); letter-spacing: .02em; }
.ig-nav b { font-size: 14px; font-weight: 700; }
.ig-rolagem { flex: 1; overflow-y: auto; scrollbar-width: none; }
.ig-rolagem::-webkit-scrollbar { display: none; }
.ig-post-topo { display: flex; align-items: center; gap: 9px; padding: 8px 10px 8px 12px; }
.ig-post-quem strong { font-size: 12.5px; font-weight: 600; }
.ig-post-quem { flex: 1; min-width: 0; }
.ig-post-midia { position: relative; background: #121212; }
.ig-post-midia img, .ig-post-midia video { display: block; width: 100%; max-height: 330px; object-fit: cover; }
.ig-post-midia.sem-arquivo { aspect-ratio: 4 / 5; }
.ig-contador { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; background: rgba(18,18,18,.75); color: #fff; }
.ig-post-acoes { position: relative; display: flex; align-items: center; gap: 13px; padding: 9px 12px 6px; }
.ig-post-acoes .ig-ic { width: 23px; height: 23px; transition: transform .2s ease; }
.ig-post-acoes .ig-ic:first-child { animation: ig-bate 2.8s ease-in-out infinite; transform-origin: center; }
@keyframes ig-bate { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.18); } 86% { transform: scale(.94); } }
.ig-pontos-carrossel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -30%); display: flex; gap: 4px; }
.ig-pontos-carrossel i { width: 6px; height: 6px; border-radius: 50%; background: #555; }
.ig-pontos-carrossel i.ativo { background: var(--ig-azul); }
.ig-curtidas, .ig-legenda, .ig-comentario, .ig-ver-comentarios, .ig-quando { margin: 0; padding: 0 12px; }
.ig-curtidas { font-size: 12px; margin-bottom: 4px; }
.ig-curtidas b, .ig-legenda strong, .ig-comentario strong { font-weight: 600; }
.ig-legenda { font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.ig-mais, .ig-fantasma, .ig-ver-comentarios, .ig-quando { color: var(--ig-cinza); }
.ig-fantasma { font-style: italic; }
.ig-ver-comentarios { margin-top: 4px; font-size: 12px; }
.ig-comentario { margin-top: 2px; font-size: 12px; }
.ig-quando { margin: 6px 0 14px; font-size: 10px; }
.ig-proximo { display: flex; align-items: center; gap: 9px; padding: 6px 12px 80px; }
.ig-proximo i { width: 28px; height: 28px; border-radius: 50%; background: #1c1c1c; }
.ig-proximo b { width: 90px; height: 9px; border-radius: 5px; background: #1c1c1c; }

/* vazio: a medida que falta */
.ig-vazio { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 20px; text-align: center; color: #8e8e8e; background: radial-gradient(120% 90% at 50% 0%, #1d1d1f, #0d0d0d); }
.ig-vazio svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .8; animation: ig-respira 2.6s ease-in-out infinite; }
@keyframes ig-respira { 50% { transform: scale(1.08); opacity: 1; } }
.ig-vazio b { font-size: 13px; font-weight: 700; color: #d4d4d4; letter-spacing: .02em; }
.ig-vazio small { font-size: 10.5px; line-height: 1.4; max-width: 190px; }

/* barra de abas */
.ig-abas { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-around; height: 58px; padding-bottom: 12px; background: var(--ig-fundo); border-top: 1px solid var(--ig-linha); }
.ig-abas .ig-ic { width: 23px; height: 23px; }
.ig-abas .ig-ic.vazado path { fill: none; }
.ig-abas::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 96px; height: 4px; margin-left: -48px; border-radius: 3px; background: #fff; }
.ig-escura .ig-abas { background: rgba(0,0,0,.92); border-top-color: rgba(255,255,255,.08); }

/* ---------- Reels e Stories: a tela inteira ---------- */
.ig-cheia { position: absolute; inset: 0; background: #0b0b0b; }
.ig-cheia img, .ig-cheia video { width: 100%; height: 100%; object-fit: cover; }
.ig-escura { color: #fff; }
.ig-reels-sombra, .ig-story-sombra { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 22%, transparent 58%, rgba(0,0,0,.65)); }
.ig-escura .ig-status { text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.ig-escura .ig-vazio { padding-bottom: 80px; }

.ig-reels-topo { position: relative; z-index: 2; display: flex; align-items: center; padding: 4px 14px; }
.ig-reels-topo strong { display: flex; align-items: center; gap: 3px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.ig-reels-topo .ig-ic { width: 24px; height: 24px; }
.ig-trilho { position: absolute; z-index: 2; right: 9px; bottom: 74px; display: grid; justify-items: center; gap: 16px; }
.ig-trilho span { display: grid; place-items: center; }
.ig-trilho .ig-ic { width: 25px; height: 25px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.ig-trilho span:first-child .ig-ic { animation: ig-bate 2.8s ease-in-out infinite; }
.ig-avatar.audio { width: 24px; height: 24px; border-radius: 6px; border: 2px solid #fff; font-size: 9px; animation: ig-gira-disco 5s linear infinite; }
@keyframes ig-gira-disco { to { transform: rotate(360deg); } }
.ig-reels-info { position: absolute; z-index: 2; left: 12px; right: 52px; bottom: 70px; display: grid; gap: 7px; }
.ig-reels-perfil { display: flex; align-items: center; gap: 8px; }
.ig-reels-perfil .ig-avatar { width: 30px; height: 30px; box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
.ig-reels-perfil strong { font-size: 12.5px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.ig-seguir { padding: 3px 9px; border-radius: 7px; border: 1px solid rgba(255,255,255,.7); font-size: 11.5px; font-weight: 600; }
.ig-reels-legenda { margin: 0; font-size: 12px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.ig-reels-legenda .ig-fantasma, .ig-reels-legenda .ig-mais { color: rgba(255,255,255,.75); }
.ig-audio { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 11px; overflow: hidden; white-space: nowrap; }
.ig-audio span { display: inline-block; animation: ig-letreiro 9s linear infinite; }
.ig-audio b { font-weight: 600; }
@keyframes ig-letreiro { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(-30%); } }

.ig-story-barras { position: relative; z-index: 2; display: flex; gap: 3px; padding: 2px 10px 0; }
.ig-story-barras i { flex: 1; height: 2.5px; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,.35); }
.ig-story-barras b { display: block; height: 100%; width: 0; background: #fff; animation: ig-progresso 5s linear infinite; }
@keyframes ig-progresso { to { width: 100%; } }
.ig-story-topo { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.ig-story-topo .ig-avatar { width: 30px; height: 30px; }
.ig-story-topo strong { font-size: 12.5px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.ig-story-topo small { font-size: 12px; color: rgba(255,255,255,.75); }
.ig-story-topo .ig-ic { width: 22px; height: 22px; }
.ig-story-texto { position: absolute; z-index: 2; left: 18px; right: 18px; top: 44%; transform: translateY(-50%); text-align: center; }
.ig-story-texto span { display: inline; padding: 3px 7px; border-radius: 5px; background: #fff; color: #000; font-size: 15px; font-weight: 700; line-height: 1.6; -webkit-box-decoration-break: clone; box-decoration-break: clone; white-space: pre-wrap; }
.ig-story-texto.vazio span { background: rgba(255,255,255,.14); color: rgba(255,255,255,.75); font-weight: 500; font-size: 12px; }
.ig-story-pe { position: absolute; z-index: 2; left: 10px; right: 12px; bottom: 22px; display: flex; align-items: center; gap: 14px; }
.ig-responder { flex: 1; padding: 9px 14px; border-radius: 22px; border: 1px solid rgba(255,255,255,.55); font-size: 12px; color: rgba(255,255,255,.9); }
.ig-story-pe .ig-ic { width: 24px; height: 24px; }
.ig-story::after { content: ""; position: absolute; z-index: 3; bottom: 6px; left: 50%; width: 96px; height: 4px; margin-left: -48px; border-radius: 3px; background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .ig-aparelho *, .ig-aparelho { animation: none !important; }
}

/* ===== Barra do post: minimalista e viva ===== */
:root body .barra.pb-barra {
  --pb-cor: #a1a1aa;
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  min-height: 0; padding: 10px 10px 10px 10px; border-radius: 16px;
  background: color-mix(in srgb, var(--texto) 2.5%, var(--painel));
  border: 1px solid color-mix(in srgb, var(--texto) 7%, transparent); box-shadow: none;
}
/* linha fina na base, na cor do estado, que corre devagar */
:root body .barra.pb-barra::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--pb-cor), transparent);
  background-size: 40% 100%; background-repeat: no-repeat; opacity: .8;
  animation: pb-corre 5s ease-in-out infinite;
}
@keyframes pb-corre { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.pb-barra[data-estado="pauta"], .pb-barra[data-estado="novo"] { --pb-cor: #a1a1aa; }
.pb-barra[data-estado="em_producao"], .pb-barra[data-estado="em_revisao"], .pb-barra[data-estado="ajuste"] { --pb-cor: #fbbf24; }
.pb-barra[data-estado="aguardando_aprovacao"] { --pb-cor: #a78bfa; }
.pb-barra[data-estado="aprovado"], .pb-barra[data-estado="agendado"] { --pb-cor: #60a5fa; }
.pb-barra[data-estado="publicado"] { --pb-cor: #22c55e; }
.pb-barra[data-estado="falhou"] { --pb-cor: #ef4444; }

/* voltar */
:root body .pb-voltar {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border-radius: 11px; cursor: pointer;
  color: var(--apagado); background: transparent; border: 1px solid color-mix(in srgb, var(--texto) 9%, transparent); box-shadow: none;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
:root body .pb-voltar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.3,1.5,.5,1); }
:root body .pb-voltar:hover { color: var(--texto); background: color-mix(in srgb, var(--texto) 6%, transparent); }
:root body .pb-voltar:hover svg { transform: translateX(-3px); }

/* titulo em duas linhas: cliente pequeno em cima */
.pb-titulo { display: grid; gap: 1px; min-width: 0; line-height: 1.2; }
.pb-titulo small { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-titulo strong { font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* estado: pilula com ponto que pulsa */
.pb-estado {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: color-mix(in srgb, var(--pb-cor) 85%, var(--texto));
  background: color-mix(in srgb, var(--pb-cor) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--pb-cor) 25%, transparent);
}
.pb-estado i { width: 6px; height: 6px; border-radius: 50%; background: var(--pb-cor); animation: pb-pulso 1.8s ease-out infinite; }
@keyframes pb-pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pb-cor) 60%, transparent); } 100% { box-shadow: 0 0 0 6px transparent; } }
.pb-estado.pb-neutro { color: var(--apagado); background: color-mix(in srgb, var(--texto) 5%, transparent); border-color: color-mix(in srgb, var(--texto) 9%, transparent); }

/* acoes discretas */
:root body .pb-fantasma {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; margin: 0; padding: 0 12px; border-radius: 11px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--apagado); background: transparent; border: 1px solid transparent; box-shadow: none;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
:root body .pb-fantasma svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
:root body .pb-fantasma:hover { color: var(--texto); background: color-mix(in srgb, var(--texto) 6%, transparent); }
:root body .pb-fantasma:hover svg { transform: translateY(-1px) rotate(-6deg); }
:root body .pb-fantasma.pb-perigo { width: 36px; padding: 0; justify-content: center; }
:root body .pb-fantasma.pb-perigo:hover { color: #f87171; background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .25); }
:root body .pb-fantasma.pb-perigo:hover svg { animation: pb-lixo .45s ease; transform: none; }
@keyframes pb-lixo { 25% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } }
.pb-sep { flex: none; width: 1px; height: 22px; background: color-mix(in srgb, var(--texto) 10%, transparent); }

/* salvar */
:root body .pb-salvar {
  position: relative; overflow: hidden; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; margin: 0; padding: 0 16px 0 13px; border-radius: 11px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #fff; border: 0;
  background: linear-gradient(160deg, #ff7a3d, #ff5a1f); box-shadow: 0 8px 20px -10px rgba(255, 90, 31, .9);
  transition: transform .2s ease, box-shadow .2s ease;
}
:root body .pb-salvar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
:root body .pb-salvar:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(255, 90, 31, 1); }
:root body .pb-salvar:active { transform: scale(.97); }
:root body .pb-salvar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  animation: qd-reflexo 4s 1s ease-in-out infinite;
}

@media (max-width: 700px) {
  .pb-fantasma span { display: none; }
  :root body .pb-fantasma { padding: 0; width: 36px; justify-content: center; }
  .pb-estado { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pb-barra, .pb-barra *, .pb-barra::after { animation: none !important; } }

/* ===== Barra do post: vence o botao laranja generico de ".barra > button" ===== */
:root body .barra.pb-barra[data-estado] { --pb-cor: #a1a1aa; }
:root body .barra.pb-barra[data-estado="em_producao"], :root body .barra.pb-barra[data-estado="em_revisao"], :root body .barra.pb-barra[data-estado="ajuste"] { --pb-cor: #fbbf24; }
:root body .barra.pb-barra[data-estado="aguardando_aprovacao"] { --pb-cor: #a78bfa; }
:root body .barra.pb-barra[data-estado="aprovado"], :root body .barra.pb-barra[data-estado="agendado"] { --pb-cor: #60a5fa; }
:root body .barra.pb-barra[data-estado="publicado"] { --pb-cor: #22c55e; }
:root body .barra.pb-barra[data-estado="falhou"] { --pb-cor: #ef4444; }

:root body .barra.pb-barra > button.pb-voltar,
:root body .barra.pb-barra > button.pb-fantasma {
  display: inline-flex !important; align-items: center; justify-content: center;
  height: 36px !important; min-height: 36px !important; border-radius: 11px !important;
  color: var(--apagado) !important; background: transparent !important; box-shadow: none !important;
  border: 1px solid transparent !important; transform: none;
}
:root body .barra.pb-barra > button.pb-voltar { width: 36px !important; padding: 0 !important; border-color: color-mix(in srgb, var(--texto) 10%, transparent) !important; }
:root body .barra.pb-barra > button.pb-fantasma { padding: 0 12px !important; }
:root body .barra.pb-barra > button.pb-fantasma.pb-perigo { width: 36px !important; padding: 0 !important; }
:root body .barra.pb-barra > button.pb-voltar:hover,
:root body .barra.pb-barra > button.pb-fantasma:hover { color: var(--texto) !important; background: color-mix(in srgb, var(--texto) 6%, transparent) !important; transform: none; box-shadow: none !important; }
:root body .barra.pb-barra > button.pb-fantasma.pb-perigo:hover { color: #f87171 !important; background: rgba(239, 68, 68, .1) !important; border-color: rgba(239, 68, 68, .28) !important; }
:root body .barra.pb-barra > button.pb-salvar { height: 36px !important; min-height: 36px !important; padding: 0 16px 0 13px !important; border-radius: 11px !important; gap: 7px; }