/* Gerado por viral/sync-ui.py a partir do viral_maker. Não edite à mão. */
.vm-scope {
  /* As variáveis dele, ligadas às do Cadence: claro e escuro seguem o painel. */
  --vm-ink: var(--ink);
  --vm-surface: var(--panel);
  --vm-raise: var(--panel);
  --vm-well: var(--panel-hi);
  --vm-line: var(--hairline);
  --vm-line-forte: var(--hairline-hi);
  --vm-fg: var(--text);
  --vm-dim: var(--text-dim);
  --vm-dim-forte: var(--text);
  --vm-acc: var(--accent);
  --vm-acc-suave: color-mix(in srgb, var(--accent) 14%, transparent);
  --vm-ok: var(--green);
  --vm-warn: var(--amber);
  --vm-r: var(--radius);
  --vm-r-g: var(--radius);
  --vm-ctrl: 38px;
  --vm-sans: var(--sans);
  --vm-mono: var(--code);


  /* ---------- sistema ---------- */
  500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

  
  *{box-sizing:border-box}
  &{margin:0;background:var(--vm-ink);color:var(--vm-fg);
    font:15px/1.55 var(--vm-sans);-webkit-font-smoothing:antialiased}
  ::selection{background:var(--vm-acc-suave)}
  :focus-visible{outline:2px solid var(--vm-acc);outline-offset:2px;border-radius:4px}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:var(--vm-line-forte);border-radius:99px;
    border:3px solid transparent;background-clip:padding-box}
  ::-webkit-scrollbar-track{background:transparent}
  @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

  /* ---------- cabeçalho ---------- */
  .vm-abas header{padding:0 24px;height:60px;border-bottom:1px solid var(--vm-line);
    display:flex;gap:16px;align-items:center;background:var(--vm-ink);
    position:sticky;top:0;z-index:20}
  h1{margin:0;font-size:16px;font-weight:700;letter-spacing:-.015em}
  .dim{color:var(--vm-dim);font-size:13px}
  .vm-abas nav{display:flex;gap:2px;margin-left:auto}
  .vm-abas nav u{text-decoration:none;font-size:13px;font-weight:500;color:var(--vm-dim);
    padding:7px 14px;border-radius:99px;cursor:pointer;transition:color .12s,background .12s}
  .vm-abas nav u:hover{color:var(--vm-fg)}
  .vm-abas nav u.on{background:var(--vm-surface);color:var(--vm-fg);box-shadow:inset 0 0 0 1px var(--vm-line)}

  .vm-main{display:grid;grid-template-columns:344px 1fr;gap:20px;padding:20px 24px 40px;
    align-items:start}
  .vm-main.largo{grid-template-columns:1fr}
  @media(max-width:860px){.vm-main{grid-template-columns:1fr;padding:16px}}
  .card{background:var(--vm-surface);border:1px solid var(--vm-line);border-radius:var(--vm-r-g);padding:20px}

  /* ---------- formulário ---------- */
  label{display:block;font:500 11px/1.4 var(--vm-sans);text-transform:uppercase;
    letter-spacing:.07em;color:var(--vm-dim);margin:0 0 6px}
  label span{font-weight:400;color:var(--vm-dim)}
  input,select,textarea{width:100%;background:var(--vm-raise);border:1px solid var(--vm-line);
    color:var(--vm-fg);border-radius:var(--vm-r);padding:0 11px;height:var(--vm-ctrl);
    font:15px/1 var(--vm-sans);transition:border-color .12s,background .12s}
  input:hover,select:hover,textarea:hover{border-color:var(--vm-line-forte)}
  input:focus,select:focus,textarea:focus{outline:0;border-color:var(--vm-acc);
    box-shadow:0 0 0 3px var(--vm-acc-suave)}
  input::placeholder,textarea::placeholder{color:#5d6373}
  textarea{resize:vertical;min-height:64px;height:auto;padding:10px 11px;line-height:1.5}
  select{appearance:none;cursor:pointer;padding-right:32px;
    background-image:linear-gradient(45deg,transparent 50%,var(--vm-dim) 50%),
                     linear-gradient(135deg,var(--vm-dim) 50%,transparent 50%);
    background-position:calc(100% - 17px) center,calc(100% - 12px) center;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  input[type=color]{padding:3px;cursor:pointer}
  input[type=checkbox]{width:auto;height:auto;accent-color:var(--vm-acc)}
  input[type=number]{font-variant-numeric:tabular-nums}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .ficha{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
  @media(max-width:700px){.ficha{grid-template-columns:1fr}}

  /* espaçamento vertical uniforme: o formulário respira igual em toda parte */
  .card > label,.passo > label,.row > div > label{margin-top:0}
  .card > *+label,.passo > *+label,details > *+label{margin-top:16px}

  /* ---------- botões e chips: uma linguagem só ---------- */
  button{width:100%;margin-top:18px;background:var(--vm-acc);border:0;color:#fff;
    font:600 14px/1 var(--vm-sans);height:44px;padding:0 16px;border-radius:10px;cursor:pointer;
    transition:filter .12s,opacity .12s}
  button:hover{filter:brightness(1.08)}
  button:active{filter:brightness(.95)}
  button:disabled{opacity:.45;cursor:default;filter:none}
  button.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--vm-line);color:var(--vm-dim-forte);
    margin-top:8px;height:var(--vm-ctrl);font-weight:500}
  button.ghost:hover{color:var(--vm-fg);box-shadow:inset 0 0 0 1px var(--vm-line-forte);filter:none}

  .saida u,.fixa u,.fixa-img u,.drop .btns u,.pcard .acoes u,.tira .tela u,.refs figcaption u,
  .grupo summary u{
    display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
    text-decoration:none;cursor:pointer;font:500 12px/1 var(--vm-sans);color:var(--vm-dim-forte);
    background:var(--vm-raise);box-shadow:inset 0 0 0 1px var(--vm-line);border-radius:7px;
    padding:0 10px;height:30px;transition:color .12s,box-shadow .12s}
  .saida u:hover,.fixa u:hover,.fixa-img u:hover,.drop .btns u:hover,.pcard .acoes u:hover,
  .refs figcaption u:hover,.grupo summary u:hover{color:var(--vm-fg);
    box-shadow:inset 0 0 0 1px var(--vm-line-forte)}
  .link{cursor:pointer;text-decoration:none;color:var(--vm-acc);margin-left:8px;font-weight:500}
  .link:hover{text-decoration:underline;text-underline-offset:3px}
  .alvo{color:var(--vm-dim);border-bottom:1px solid transparent;padding-bottom:1px;font-weight:500}
  .alvo.on{color:var(--vm-fg);border-bottom-color:var(--vm-acc)}

  /* ---------- seções numeradas (o fluxo é mesmo uma sequência) ---------- */
  .secao{margin:24px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--vm-line);
    font:600 11px/1.4 var(--vm-sans);text-transform:uppercase;letter-spacing:.1em;
    color:var(--vm-dim-forte)}
  .secao:first-child{margin-top:0}
  .secao.linha{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .secao.linha button{width:auto;margin:0;height:30px;padding:0 12px;
    font:600 11px/1 var(--vm-sans);text-transform:none;letter-spacing:0;border-radius:7px}

  .passos{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
    gap:4px 28px;align-items:start}
  /* sem isto o display:grid acima vence o [hidden] e a aba Imagens vaza nas outras */
  .passos[hidden],.vm-main > section[hidden]{display:none}
  .passos > .passo{min-width:0;padding-bottom:12px}
  .passos > .passo.duplo{grid-column:span 2}
  @media(max-width:900px){.passos > .passo.duplo{grid-column:auto}}
  .passos .contents{display:contents}
  .passos [hidden]{display:none !important}
  .passo .secao{margin-top:14px}

  /* ---------- aba Vídeos ---------- */
  .counts{display:flex;gap:14px;font-size:12px;color:var(--vm-dim);margin-top:6px}
  .counts b{color:var(--vm-fg);font-variant-numeric:tabular-nums}
  .drops{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
  @media(max-width:700px){.drops{grid-template-columns:1fr}}
  .drop{border:1px dashed var(--vm-line-forte);border-radius:12px;padding:16px;text-align:center;
    cursor:pointer;transition:.15s;background:var(--vm-surface)}
  .drop:hover,.drop.over{border-color:var(--vm-acc);border-style:solid;background:#1a1d25}
  .drop h3{margin:0 0 4px;font:600 11px/1 var(--vm-sans);letter-spacing:.09em;
    text-transform:uppercase;color:var(--vm-dim)}
  .drop .qtd{font:700 28px/1.1 var(--vm-sans);font-variant-numeric:tabular-nums;color:var(--vm-fg)}
  .drop small{color:var(--vm-dim);font-size:11px;display:block;margin-top:2px}
  .drop .btns{display:flex;gap:6px;margin-top:10px}
  .drop .btns u{flex:1}
  .lista{margin-top:10px;max-height:120px;overflow:auto;text-align:left}
  .lista div{display:flex;justify-content:space-between;gap:6px;font-size:11px;color:var(--vm-dim);
    padding:5px 0;border-top:1px solid var(--vm-line);align-items:center}
  .lista span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lista b{cursor:pointer;color:var(--vm-dim);font-weight:500}
  .lista b:hover{color:var(--vm-acc)}
  .preview{position:relative;aspect-ratio:9/16;max-height:340px;margin:0 auto;background:#1b1f27;
    border-radius:10px;overflow:hidden;cursor:grab;touch-action:none;
    box-shadow:inset 0 0 0 1px var(--vm-line)}
  .preview.arrastando{cursor:grabbing}
  .preview span{position:absolute;font:800 16px Arial,Helvetica,sans-serif;color:#fff;
    -webkit-text-stroke:2px #000;paint-order:stroke fill;white-space:pre;line-height:1.25;
    user-select:none}
  .bar{height:5px;background:var(--vm-well);border-radius:99px;overflow:hidden;margin:12px 0 6px}
  .bar i{display:block;height:100%;background:var(--vm-acc);width:0;transition:width .3s}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
  .grid figure{margin:0}
  .grid video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;border-radius:10px;
    border:1px solid var(--vm-line)}
  figcaption{font:400 11px/1.4 var(--vm-sans);color:var(--vm-dim);margin-top:6px;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .erro{color:var(--vm-acc);font-size:13px;white-space:pre-wrap;margin-top:10px}
  .saida{display:flex;gap:8px}
  .saida input{flex:1;min-width:0}
  .saida u{height:var(--vm-ctrl)}

  /* ---------- aba Carrossel ---------- */
  .slides{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .slides img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#000;border-radius:10px;
    border:1px solid var(--vm-line)}
  #roteiro{min-height:220px;height:auto;font:13px/1.65 var(--vm-mono)}
  #img-ficha{font:12px/1.6 var(--vm-mono);color:var(--vm-dim-forte)}
  .tira{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 16px}
  .tira .tela{position:relative;width:78px;height:98px;border-radius:9px;background:var(--vm-raise);
    box-shadow:inset 0 0 0 1px var(--vm-line);cursor:pointer;padding:8px;display:flex;
    flex-direction:column;gap:5px;overflow:hidden;transition:box-shadow .12s}
  .tira .tela:hover{box-shadow:inset 0 0 0 1px var(--vm-line-forte)}
  .tira .tela.sel{box-shadow:inset 0 0 0 2px var(--vm-acc)}
  .tira .tela b{font:600 10px/1 var(--vm-sans);letter-spacing:.09em;color:var(--vm-dim)}
  .tira .tela.cta b{color:var(--vm-acc)}
  .tira .tela i{font-style:normal;font-size:9px;line-height:1.35;color:var(--vm-dim-forte);overflow:hidden}
  .tira .tela u{position:absolute;top:3px;right:4px;height:18px;padding:0 5px;font-size:12px;
    background:var(--vm-surface);display:none}
  .tira .tela:hover u{display:inline-flex}
  .tira .mais{width:46px;height:98px;margin:0;border:1px dashed var(--vm-line-forte);border-radius:9px;
    background:none;color:var(--vm-dim);font:300 22px/1 inherit;cursor:pointer;padding:0}
  .tira .mais:hover{border-color:var(--vm-acc);color:var(--vm-acc);filter:none}
  .fixa,.fixa-img{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--vm-dim);
    min-width:0;flex-wrap:wrap}
  .fixa span,.fixa-img span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  details summary{cursor:pointer;color:var(--vm-dim);font-size:12px;margin:8px 0}
  details summary:hover{color:var(--vm-fg)}
  .formatos{display:flex;flex-wrap:wrap;gap:8px}
  .formatos button{width:auto;margin:0;height:34px;padding:0 13px;background:var(--vm-raise);
    box-shadow:inset 0 0 0 1px var(--vm-line);border-radius:9px;color:var(--vm-dim-forte);
    font:500 13px/1 var(--vm-sans);cursor:pointer}
  .formatos button:hover{box-shadow:inset 0 0 0 1px var(--vm-line-forte);color:var(--vm-fg);filter:none}
  .formatos button.on{box-shadow:inset 0 0 0 1px var(--vm-acc);color:var(--vm-fg);background:#20141a}
  .grupo{border-top:1px solid var(--vm-line);padding:12px 0}
  .grupo:first-child{border-top:0;padding-top:0}
  .grupo summary{cursor:pointer;display:flex;gap:10px;align-items:center;list-style:none;padding:4px 0}
  .grupo summary::-webkit-details-marker{display:none}
  .grupo summary::before{content:"▸";color:var(--vm-dim);font-size:10px}
  .grupo[open] summary::before{content:"▾"}
  .grupo summary u{margin-left:auto}
  .grupo .slides{margin-top:12px}

  /* ---------- aba Imagens: roteiro e prévia ---------- */
  .slidetxt{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  .slidetxt b{flex:none;width:26px;font:500 11px/1 var(--vm-mono);color:var(--vm-dim);text-align:right}
  .slidetxt input{flex:1;min-width:0;height:34px}
  .slidetxt small{flex:none;width:62px;font:400 10px/1.3 var(--vm-sans);color:var(--vm-dim);
    font-variant-numeric:tabular-nums}
  .slidetxt input:disabled{color:var(--vm-dim);background:var(--vm-well);font-style:italic}
  .slidetxt.ctalinha b{color:var(--vm-acc)}
  .previa{display:grid;grid-template-columns:repeat(auto-fill,minmax(336px,1fr));gap:20px}
  .previa.real{display:flex;flex-wrap:wrap;gap:22px;overflow:auto;max-height:78vh;padding-bottom:6px}
  .previa.real figure{flex:none}
  .previa figure{margin:0}
  .previa .quadro{position:relative;aspect-ratio:4/5;border-radius:11px;overflow:hidden;
    background:#181b22;box-shadow:inset 0 0 0 1px var(--vm-line);cursor:grab;touch-action:none}
  .previa .quadro.arrastando{cursor:grabbing}
  .previa .quadro.dividido::after{content:"";position:absolute;left:0;right:0;top:50%;
    height:1px;background:#ffffff59}
  .previa .quadro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .previa .quadro span{position:absolute;transform:translate(-50%,-50%);font-weight:800;
    line-height:1.22;text-align:center;color:#fff;word-break:break-word;user-select:none}
  .previa .quadro span.veu{text-shadow:0 0 18px #000,0 0 34px #000,0 2px 8px #000}
  .previa .quadro span.borda{-webkit-text-stroke:.09em #000;paint-order:stroke fill}
  .previa .quadro span.fundo{padding:.18em .36em;border-radius:.2em}
  .previa .quadro.vazio span{color:#6d7384;font-weight:400;font-style:italic}
  .previa .quadro.cta{box-shadow:inset 0 0 0 1px var(--vm-acc)}
  .previa figcaption{font:500 10px/1 var(--vm-mono);color:var(--vm-dim);margin-top:7px;display:flex;
    justify-content:space-between;gap:6px;letter-spacing:.04em}
  .previa figcaption b{color:var(--vm-dim);font-weight:500}
  .previa figcaption .tag{color:var(--vm-acc);text-transform:uppercase}

  /* ---------- aba Personagens ---------- */
  .banco{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
  .pcard{background:var(--vm-surface);border:1px solid var(--vm-line);border-radius:12px;overflow:hidden;
    transition:border-color .12s}
  .pcard:hover{border-color:var(--vm-line-forte)}
  .pcard .foto{aspect-ratio:1;background:var(--vm-well);display:flex;align-items:center;
    justify-content:center;color:var(--vm-dim);font-size:32px}
  .pcard .foto img{width:100%;height:100%;object-fit:cover}
  .pcard .corpo{padding:12px}
  .pcard h4{margin:0 0 3px;font:600 14px/1.3 var(--vm-sans)}
  .pcard .meta{font-size:11px;color:var(--vm-dim)}
  .pcard .acoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .pcard .acoes u{height:26px;padding:0 8px;font-size:11px}
  .pcard.off{opacity:.45}
  .refs{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
  .refs figure{margin:0;position:relative;width:84px}
  .refs img{width:84px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--vm-line)}
  .refs figure.pri img{border-color:var(--vm-acc)}
  .refs figcaption{font-size:10px;color:var(--vm-dim);display:flex;gap:6px;margin-top:5px;
    white-space:normal}
  .refs figcaption u{height:22px;padding:0 6px;font-size:10px}

}

/* ---- Ajustes do Cadence por cima do estilo dele ---- */
.vm-scope {
  .vm-topo { font-size: 12px; color: var(--text-dim); margin: -12px 0 14px; }
  .vm-topo b { color: var(--text); }
  .vm-main { padding: 0; }

  /* rótulo é texto, não enfeite: sem caixa alta espaçada */
  label, .secao, .drop h3, .previa figcaption .tag { text-transform: none; letter-spacing: 0; }
  label { font-size: 11.5px; }
  .secao { font-size: 13px; color: var(--text); border-bottom-color: var(--hairline-hi); }

  input::placeholder, textarea::placeholder { color: var(--text-faint); }
  input:focus, select:focus, textarea:focus { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }

  button { color: var(--accent-fg); font-size: 13.5px; height: 42px; }
  button:hover { filter: none; opacity: 0.88; }
  button.ghost { color: var(--text-dim); }
  .formatos button.on { background: var(--panel-hi); box-shadow: inset 0 0 0 1px var(--text); }
  .tira .mais:hover { border-color: var(--text); color: var(--text); }
  .drop:hover, .drop.over { border-color: var(--text); background: var(--panel-hi); }
  .drop .qtd { font-family: var(--cifra); font-weight: 600; }
  .bar i { background: var(--text); }
  .erro { color: var(--red); }

  /* Formatos do carrossel em cartões (não os personagens, que seguem como botões). */
  #formatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
  #formatos button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    height: auto; min-height: 62px; margin: 0; padding: 10px 11px; text-align: left; white-space: normal;
    color: var(--text); background: var(--panel); box-shadow: inset 0 0 0 1px var(--hairline-hi);
    border-radius: var(--radius); font: inherit; }
  #formatos button:hover { box-shadow: inset 0 0 0 1px var(--text); opacity: 1; }
  #formatos button.on { background: var(--panel-hi); box-shadow: inset 0 0 0 2px var(--text); }
  #formatos button b { font-size: 13px; font-weight: 600; line-height: 1.3; }
  #formatos button i { margin-top: auto; font-style: normal; font-size: 11px; color: var(--text-faint); }
  /* O que é o formato escolhido, em português (o prompt em inglês vai só para a IA). */
  #template-desc { margin: 10px 0 0 !important; padding: 10px 12px; font-size: 12.5px !important;
    line-height: 1.5; color: var(--text-dim); background: var(--panel-hi); border-left: 2px solid var(--text); }
  #template-desc:empty { display: none; }

  /* Campos lado a lado só quando cabem: na coluna estreita "Idioma" e
     "Estilo narrativo" cortavam o texto. E espaço entre as linhas. */
  .row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 14px 12px; margin-top: 14px; }
  .row > div > label { margin-top: 0; }
  [id^="fluxo-"] > .secao:first-child { margin-top: 24px; }

  /* "Salvar em" mostra caminho de pasta do servidor e o "escolher…" abre o
     Finder do Mac: para o cliente não significa nada. */
  #escolher-out, .saida:has(#out), .saida:has(#img-saida),
  label:has(+ .saida #out), label:has(+ .saida #img-saida) { display: none; }

  /* A grade dele (formulário de 344px + área que não encolhe) estoura entre o
     celular e o monitor largo, com a lateral do Cadence ocupando espaço. */
  .vm-main { grid-template-columns: minmax(280px, 344px) minmax(0, 1fr); }
  .vm-main > *, .passos > *, .drops > * { min-width: 0; }
  .drops { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .drop .btns { flex-wrap: wrap; }
  .drop .btns u { flex: 1 1 110px; }
  .saida { flex-wrap: wrap; }
  @media (max-width: 1180px) {
    .vm-main, .vm-main.largo { grid-template-columns: minmax(0, 1fr); }
  }

  /* Celular: as grades com coluna mínima larga (prévia 336px, passos 272px)
     passam a ocupar a largura que houver. */
  @media (max-width: 520px) {
    .previa, .passos { grid-template-columns: minmax(0, 1fr); }
    .previa.real figure { flex: 1 1 100%; }
    .card { padding: 16px; }
  }
}