/* Legenda grátis: diálogo com a prévia ao vivo (a mesma conta do .ass, em cqmin) e os trechos editáveis. */
.dlg-legenda { width: min(980px, 96vw); max-height: 94vh; overflow: auto; }
.dlg-legenda .gerar { position: static; margin: 14px 0 0; border-radius: 14px; border: 1px solid var(--linha); }
.leg-gratis { font: 800 11px/1 "Manrope", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acento); border: 1px solid currentColor; border-radius: 999px; padding: 3px 8px; vertical-align: middle; margin-left: 6px; }
.leg-corpo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.leg-previa { position: relative; width: calc(60vh * var(--prop, 0.5625)); max-width: 46vw; aspect-ratio: var(--prop, 0.5625); container-type: size; border-radius: 14px; overflow: hidden; background: #000; }
.leg-previa video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.leg-sobre { position: absolute; left: 8%; right: 8%; text-align: center; pointer-events: none; font-family: "Montserrat", "Manrope", sans-serif; font-weight: 800; line-height: 1.15; font-size: 7.2cqmin; color: #fff; }
.leg-sobre.baixo { bottom: 27%; }
.leg-sobre.meio { top: 50%; transform: translateY(-50%); }
.leg-sobre.topo { top: 13%; }
.leg-sobre .w { display: inline-block; margin: 0 0.14em; transition: transform 0.08s; }
.leg-sobre.capcut, .leg-sobre.uma, .leg-sobre.simples { -webkit-text-stroke: 0.55cqmin #000; paint-order: stroke fill; text-shadow: 0 0.3cqmin 0 rgba(0, 0, 0, 0.6); }
.leg-sobre.capcut .w.on { color: #ffe626; transform: scale(1.08); }
.leg-sobre.uma { color: #ffe626; font-size: 9.6cqmin; }
.leg-sobre.nise { -webkit-text-stroke: 0.55cqmin #15112e; paint-order: stroke fill; }
.leg-sobre.nise .w.on { color: #b794ff; transform: scale(1.08); }
.leg-sobre.caixa span.linha { background: #fff; color: #141414; padding: 0.12em 0.4em; border-radius: 0.2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.leg-sobre.caixa .w.on { color: #5b3fe8; }
.leg-sobre.maiusculas { text-transform: uppercase; }
.leg-sobre .em { display: block; font-size: 1.8em; line-height: 1.05; margin: 0.1em 0; -webkit-text-stroke: 0; text-shadow: none; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; animation: leg-emoji 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes leg-emoji { from { transform: scale(0.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .leg-sobre .em { animation: none; } }
.leg-lado { min-width: 0; }
.leg-lado select { width: 100%; }
.leg-trechos { display: flex; flex-wrap: wrap; gap: 6px; max-height: 36vh; overflow: auto; padding: 8px; border: 1px solid var(--linha); border-radius: 12px; background: var(--fundo); }
.leg-trechos .vazio { color: var(--texto-2); font-size: 13px; padding: 6px; }
.leg-trecho { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--linha); border-radius: 10px; padding: 2px 4px 2px 8px; background: var(--fundo-2); }
.leg-trecho.agora { border-color: var(--acento); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 25%, transparent); }
.leg-trecho time { font: 600 11px/1 "Manrope", sans-serif; color: var(--texto-2); cursor: pointer; }
.leg-trecho input { border: 0; background: transparent; color: var(--texto); font: 600 14px/1.3 "Manrope", sans-serif; padding: 4px 2px; min-width: 3ch; field-sizing: content; }
.leg-trecho input:focus { outline: none; }
.leg-trecho input.leg-emoji { width: 2.4ch; min-width: 2.4ch; text-align: center; font-size: 16px; padding: 2px; border-radius: 6px; background: var(--fundo); field-sizing: fixed; }
.leg-carregando { display: flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: 13px; padding: 6px; }
@media (max-width: 720px) {
  .leg-corpo { grid-template-columns: 1fr; }
  .leg-previa { margin: 0 auto; width: calc(48vh * var(--prop, 0.5625)); max-width: 100%; }
}
.leg-carregando .girando { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linha); border-top-color: var(--acento); animation: leg-gira 0.8s linear infinite; }
@keyframes leg-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .leg-carregando .girando { animation: none; } }