#estilo h3{font-size:1.05rem;margin:28px 0 10px}
.etapas{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:9px 0;background:#101117f2;backdrop-filter:blur(12px)}
.etapas button{min-width:0;min-height:50px;border:1px solid #485044;border-radius:11px;background:#252a25;color:#dce4d4;font-weight:750;padding:7px 3px;font-size:clamp(.65rem,2.4vw,.95rem);white-space:nowrap}
.etapas button[aria-current=step]{background:#b7f454;color:#15200c;border-color:#b7f454}
section[hidden],.ajustes-quebra[hidden]{display:none!important}
#etapa-arquivo input[type=text],#editor input[type=text],#editor input[type=number]{width:100%;min-height:45px;border:1px solid #565b59;background:#111317;color:#f8f9f4;border-radius:10px;padding:10px}
#editor input[type=range]{width:100%;accent-color:#b7f454;min-height:40px}
#editor h3{font-size:1.05rem;margin:26px 0 9px}
.acao{background:#303725;color:#e4ffc0;border:1px solid #637641;border-radius:10px;min-height:44px;padding:9px 14px;font-weight:700;margin:10px 0}
.substituir,.nomes-exportacao,.ajustes-quebra{border-top:1px solid #3d443c;margin-top:22px;padding-top:12px}
.sem-legendas{color:#bfc2ba;margin-top:18px}
#editor .legenda{display:grid;grid-template-columns:94px minmax(0,1fr);gap:7px;margin:12px 0;padding:11px;border:1px solid #414840;border-radius:13px;background:#171a1d}
.legenda .tempo{grid-column:1}.legenda .texto-legenda{grid-column:2}
.legenda .acoes-legenda{grid-column:1/-1;display:flex;gap:7px;flex-wrap:wrap}
.legenda .acoes-legenda button{flex:1;min-height:40px;border-radius:9px;border:1px solid #515b4c;background:#262b28;color:#f4f8ec;padding:6px}
.legenda .tempos-legenda{grid-column:1/-1;display:flex;gap:8px;align-items:center;color:#bec8b8;font-size:.82rem}
.legenda .tempos-legenda label{display:flex;align-items:center;gap:5px;margin:0;flex:1;font-weight:500}
.legenda .tempos-legenda input{min-width:0}
#aviso-editor.erro{color:#ffd18d}
#editor .legenda.longa .texto-legenda{border-color:#ffd18d;background:#30281f}
#estilo input[type=text],#estilo input[type=search]{width:100%;min-height:48px;border:1px solid #565b59;background:#111317;color:#f8f9f4;border-radius:12px;padding:12px}
#estilo input[type=range]{width:100%;accent-color:#b7f454;min-height:40px}
#estilo input[type=color]{width:64px;height:48px;padding:4px;background:#111317;border:1px solid #565b59;border-radius:10px}
#estilo input[type=checkbox]{width:24px;height:24px;accent-color:#b7f454}
#estilo output{color:#b7f454;font-weight:700}
.quadro{position:relative;margin:20px auto 8px;overflow:hidden;border-radius:15px;border:1px solid #64715a;background:radial-gradient(circle at 70% 30%,#384d42,#202b37 48%,#141d25);box-shadow:inset 0 0 70px #1117;transition:width .2s,aspect-ratio .2s}
.quadro.vertical{width:min(100%,270px);aspect-ratio:9/16}
.quadro.horizontal{width:100%;aspect-ratio:16/9}
.quadro::before{content:"PRÉVIA";position:absolute;top:13px;left:15px;font-size:.65rem;font-weight:800;letter-spacing:.12em;color:#ffffff8c}
.area-segura{position:absolute;inset:8%;border:1px dashed #ffffff6b;border-radius:5px;pointer-events:none}
.legenda-previa{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);display:grid;width:max-content;color:white;text-align:center;line-height:1.12;overflow-wrap:normal;word-break:normal;touch-action:none;cursor:grab;user-select:none;min-width:24px;max-width:84%}
.legenda-previa span{grid-area:1/1;white-space:normal}
.previa-contorno{color:transparent;-webkit-text-stroke:var(--contorno-largura,0px) var(--contorno-cor,#000);paint-order:stroke fill;pointer-events:none}
.previa-texto{position:relative;color:var(--texto-cor,#fff);text-shadow:var(--sombra,none);pointer-events:none}
.legenda-previa:active{cursor:grabbing}
.fontes-opcoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px;max-height:230px;overflow:auto}
.fonte-opcao,.variacao,.posicoes button,.setas button{border:1px solid #515b4c;background:#262b28;color:#f4f8ec;border-radius:10px;padding:10px;min-height:44px}
.fonte-opcao{font-size:1rem;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fontes-variacoes{display:flex;gap:7px;overflow-x:auto;padding:3px 0 9px}
.variacao{white-space:nowrap;flex:none}
.variacao[aria-pressed=true]{border-color:#b7f454;background:#39492b;color:#eaffc9}
.controle{padding:7px 0;border-bottom:1px solid #343a36}
.controle>label{display:flex;align-items:center;justify-content:space-between;margin:10px 0 4px}
.controle:has(input[type=checkbox]){display:flex;align-items:center;justify-content:space-between;min-height:62px}
.controle:has(input[type=checkbox]) label{margin:0}
.posicoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0}
.setas{display:flex;align-items:center;justify-content:space-between;gap:4px;margin:12px 0}
.setas button{font-size:1.2rem;font-weight:700;min-width:42px;padding:7px}
.setas output{text-align:center;font-size:.85rem;white-space:nowrap}
@media(max-width:600px){.quadro{position:sticky;top:66px;z-index:4;box-shadow:0 12px 24px #0009}.quadro.vertical{width:min(100%,180px)}.quadro.horizontal{width:100%}}
@media(max-width:420px){.fontes-opcoes{grid-template-columns:1fr 1fr}.posicoes button{font-size:.78rem;padding:8px 4px}.setas button{min-width:38px}}
