/* base.css — o visual do Mesh Tools.
   ⚠️ Enxuto de propósito: o editor de vídeo vai trazer o grosso do CSS, e
   começar com um sistema de design inteiro antes da primeira tela seria
   decidir no escuro. Aqui ficam só as peças que já se repetem. */
:root {
  color-scheme: light dark;
  --fundo: #fff; --texto: #111; --fraco: #667; --linha: #e6e6ea;
  --caixa: #fafafb; --acento: #111; --acento-txt: #fff;
  --ok: #0a8a4a; --erro: #c02b2b; --erro-bg: #fdf1f1;
  --raio: 8px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #111214; --texto: #f2f2f4; --fraco: #9a9aa4; --linha: #2a2b30;
    --caixa: #17181c; --acento: #f2f2f4; --acento-txt: #111;
    --ok: #3ecf8e; --erro: #ff8080; --erro-bg: #2a1a1a;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: Inter, system-ui, sans-serif; font-size: 14px; line-height: 1.5;
}
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; border-bottom: 1px solid var(--linha);
}
.quem { color: var(--fraco); font-size: 13px; }
main { max-width: 760px; margin: 0 auto; padding: 32px 24px 64px; }
.meta { color: var(--fraco); font-size: 13px; }

/* A área de soltar. ⚠️ `tabindex` e `role` porque ela É um botão: quem anda
   de teclado não pode ficar sem a porta de entrada da ferramenta. */
.solta {
  border: 1.5px dashed var(--linha); border-radius: var(--raio);
  padding: 56px 24px; text-align: center; cursor: pointer;
  background: var(--caixa); transition: border-color .12s, background .12s;
}
.solta:hover, .solta:focus-visible, .solta.is-sobre { border-color: var(--acento); }
.solta.is-sobre { background: var(--fundo); }
.solta-texto { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.solta p:last-child { margin: 0; }

.andamento { margin-top: 24px; }
.barra { height: 4px; border-radius: 4px; background: var(--linha); overflow: hidden; }
.barra i { display: block; height: 100%; width: 0; background: var(--acento); transition: width .2s; }
.andamento .meta { margin: 10px 0 0; }

.aviso {
  margin-top: 24px; padding: 12px 14px; border-radius: var(--raio);
  background: var(--erro-bg); color: var(--erro); font-size: 13px;
}

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.btn {
  font: inherit; font-weight: 500; cursor: pointer; padding: 8px 14px;
  border-radius: 6px; border: 1px solid var(--acento);
  background: var(--acento); color: var(--acento-txt);
}
.btn.secundario { background: transparent; color: var(--texto); border-color: var(--linha); }
.btn:disabled { opacity: .5; cursor: default; }

.texto {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px; background: var(--caixa); max-height: 60vh; overflow: auto;
}
/* Cada bloco de legenda, com o tempo ao lado. ⚠️ Tabular nos números para as
   colunas de tempo não dançarem linha a linha. */
.bloco { display: flex; gap: 12px; padding: 5px 0; }
.bloco + .bloco { border-top: 1px solid var(--linha); }
.bloco time { color: var(--fraco); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 1px; }

.topo-dir { display: flex; align-items: center; gap: 16px; }
.cliente { display: flex; align-items: center; gap: 8px; }
.cliente select {
  font: inherit; padding: 5px 8px; border-radius: 6px;
  border: 1px solid var(--linha); background: var(--fundo); color: var(--texto);
}

/* A segunda porta, escrita na mesma caixa. ⚠️ Separada por uma linha para
   não virar um parágrafo só: quem vem transcrever vídeo não deve tropeçar
   nela, e quem vem subir o SRT precisa vê-la sem procurar. */
.solta-alt {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--linha);
  max-width: 460px; margin-left: auto; margin-right: auto;
}

/* --- As headlines sugeridas -------------------------------------------------
   ⚠️ Cada proposta é desenhada com o CSS do próprio cliente. É o mesmo CSS
   que vai desenhar o quadro no editor: aqui a prévia não aproxima, ela É. */
.headlines { margin: 0 0 24px; }
.titulo-bloco { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.hl-proposta {
  margin-top: 12px; border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden;
}
/* ⚠️ Fundo escuro: o padrão do cliente quase sempre é texto claro sobre
   vídeo. Em fundo branco, "color: #fff" some e parece defeito. */
.hl-arte {
  background: #1a1a1a; padding: 22px 20px;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
}
/* ⚠️ A headline do cliente vem com font-size grande (96px, feito para o
   quadro). Encolhe aqui sem mexer no CSS dele, senão uma linha ocuparia a
   tela inteira — e o CSS guardado tem de continuar sendo o do quadro. */
.hl-arte > * { zoom: 0.42; }
.hl-pe {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; background: var(--caixa); font-size: 12px; color: var(--fraco);
}
.hl-estilos { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* O campo da headline, fora do fluxo do vídeo. */
.bloco-headline { margin-top: 24px; }
.bloco-headline .acoes { margin: 10px 0 0; }
.bloco-headline textarea { width: 100%; resize: vertical; }
.field { display: flex; flex-direction: column; gap: 6px; }
.label-caps {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fraco);
}
.input {
  font: inherit; padding: 9px 11px; border-radius: 6px;
  border: 1px solid var(--linha); background: var(--fundo); color: var(--texto);
}
.input:focus-visible { outline: 2px solid var(--acento); outline-offset: -1px; }