/* ------------------------------------------------------------------ *
 * Tightcut — tema estúdio
 *
 * Escuro sempre, não por moda: numa sala de edição a única coisa que
 * deve estar clara na tela é a imagem do vídeo. Interface clara em volta
 * de um quadro de vídeo falseia o julgamento de exposição e contraste —
 * é por isso que Premiere, Resolve e Avid são todos escuros.
 *
 * Como consequência, aqui não há tema claro. Um `prefers-color-scheme:
 * light` que clareasse o fundo destruiria justamente essa propriedade.
 *
 * Sombra quase não se enxerga sobre fundo escuro, então a profundidade
 * vem de outro lugar: uma borda de 1px mais clara que a superfície e um
 * fio de luz interno no topo de cada cartão, como se a luz da sala
 * batesse de cima. É o que dá o volume sem nenhum blur pesado.
 * ------------------------------------------------------------------ */

:root {
  color-scheme: dark;

  /* Profundidades. Cada degrau sobe pouco: numa interface escura, saltos
     grandes de luminância viram listras. */
  --fundo: #0b0b0e;
  --superficie: #131317;
  --superficie-2: #1a1a20;
  --superficie-3: #232329;
  --poco: #000000; /* onde o vídeo mora */

  --tinta: #eceaef;
  --tinta-media: #a3a1ab;
  --tinta-fraca: #6d6b77;

  --linha: #26262d;
  --linha-forte: #34343d;

  /* Âmbar: sobrevive por cima de qualquer cena. Azul some em céu, verde
     some em vegetação, vermelho conflita com o marcador de corte. */
  --acento: #eba13c;
  --acento-claro: #f6b962;
  --acento-tinta: #14100a;
  --acento-vidro: rgba(235, 161, 60, 0.13);
  --acento-fio: rgba(235, 161, 60, 0.4);

  --corte: #d8503e;
  --voz-principal: #47c39b;
  --voz-bastidor: #9a8bf2;

  --ok: #47c39b;
  --erro: #ef6b57;

  --raio: 12px;
  --raio-p: 8px;
  --raio-g: 16px;

  /* O fio de luz no topo das superfícies. */
  --relevo: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px -16px rgba(0, 0, 0, 0.8);

  --transicao: 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 15px/1.55 ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

::selection { background: var(--acento-vidro); }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

.hidden { display: none !important; }
.sussurro { color: var(--tinta-fraca); font-size: 0.8rem; margin: 0; }
.erro { color: var(--erro); font-size: 0.85rem; white-space: pre-wrap; }

/* Rótulo de seção: versalete espaçado. Dá hierarquia sem precisar de
   corpo grande, que roubaria atenção do vídeo. */
.cartao-topo h2,
.panel h2 {
  font-size: 0.68rem;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--tinta-media);
}

/* Aviso de erro: fica acima de tudo, porque o problema que ele reporta
   costuma deixar o resto da tela sem reagir. */
.alarme {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: color-mix(in srgb, var(--erro) 22%, var(--fundo));
  border-bottom: 1px solid var(--erro);
  color: var(--tinta);
  font-size: 0.83rem;
}
.alarme button {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 560;
  border: 1px solid var(--erro);
  background: transparent;
  color: var(--tinta);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  cursor: pointer;
  flex-shrink: 0;
}
.alarme button:hover { background: var(--erro); color: var(--fundo); }

/* ---------------------------------------------------------------- *
 * Topo
 * ---------------------------------------------------------------- */

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 52px;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--linha);
  background: rgba(11, 11, 14, 0.72);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.marca { display: flex; align-items: center; gap: 0.65rem; }

/* O símbolo da marca: play cortado ao meio e reencaixado fora de registro.
   Arquivo em public/marca.svg, fonte em marca/simbolo.svg. */
.marca-icone {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: url("/marca.svg") center / contain no-repeat;
}

.topo h1 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.topo .sussurro { font-size: 0.72rem; margin-top: 1px; }

.conta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--tinta-fraca);
}
.conta a {
  color: var(--tinta-media);
  text-decoration: none;
  transition: color var(--transicao);
}
.conta a:hover { color: var(--acento); }

/* ---------------------------------------------------------------- *
 * Palco
 * ---------------------------------------------------------------- */

/*
 * Duas colunas com papéis distintos: a obra e os ajustes.
 *
 * A coluna dos ajustes tem largura FIXA, não proporcional. Ela é uma coluna
 * de formulário: passar de ~420 px não melhora nada — só estica rótulo e
 * afasta o campo do seu nome. Toda a largura extra de uma tela grande vai
 * para a obra, que é onde o vídeo e a sequência ganham em ser maiores.
 */
.palco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 396px;
  gap: 1.1rem;
  align-items: start;
  max-width: 1760px;
  margin: 0 auto;
  padding: 1.1rem 1.35rem 5rem;
}

.obra {
  display: grid;
  gap: 1.1rem;
  align-content: start;
  min-width: 0;
}

@media (max-width: 1180px) {
  .palco { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- *
 * Visor
 * ---------------------------------------------------------------- */

.visor {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--relevo), var(--sombra);
  overflow: hidden;
}

.visor-vazio {
  display: grid;
  place-items: center;
  gap: 0.4rem;
  padding: 5rem 1.5rem;
  cursor: pointer;
  text-align: center;
  transition: background var(--transicao);
}
.visor-vazio:hover { background: var(--superficie-2); }
.visor-vazio strong { font-weight: 560; font-size: 0.95rem; }

.visor-icone {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  border: 1.5px dashed var(--linha-forte);
  position: relative;
  margin-bottom: 0.5rem;
  transition: border-color var(--transicao);
}
.visor-vazio:hover .visor-icone { border-color: var(--acento); }
/* Um "play" desenhado com bordas. */
.visor-icone::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 14px;
  border-left: 13px solid var(--tinta-fraca);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  transition: border-left-color var(--transicao);
}
.visor-vazio:hover .visor-icone::after { border-left-color: var(--acento); }

#player {
  display: block;
  width: 100%;
  max-height: 62vh;
  background: var(--poco);
}

/* ---------------------------------------------------------------- *
 * Linha do tempo
 * ---------------------------------------------------------------- */

.linha {
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--linha);
  background: var(--superficie-2);
}

.linha-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--tinta-media);
}
.linha-cabecalho .sussurro {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.78rem;
  color: var(--tinta);
}

/* Régua: marcas de tempo por cima das faixas. Sem ela, um bloco no meio
   da barra não diz em que minuto está. */
.regua {
  position: relative;
  height: 15px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--linha);
}
.marca-tempo {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--linha-forte);
  padding-left: 4px;
  font-size: 0.62rem;
  line-height: 15px;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

.faixas { display: grid; gap: 3px; position: relative; }

.faixa {
  position: relative;
  height: 26px;
  background: var(--superficie-3);
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
}
.faixa-vozes { height: 10px; cursor: default; }

.bloco {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  transition: filter var(--transicao);
}

/* Hachura diagonal: o corte se distingue mesmo para quem não separa as
   cores, e lê como "material descartado" à primeira vista. */
.bloco-corte {
  background: repeating-linear-gradient(
    -45deg,
    var(--corte) 0 5px,
    color-mix(in srgb, var(--corte) 62%, #000) 5px 10px
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--corte) 75%, #000);
}
.bloco-corte:hover { filter: brightness(1.22); }

.bloco-voz { top: 1px; bottom: 1px; border-radius: 2px; }
.bloco-principal { background: var(--voz-principal); }
.bloco-bastidor { background: var(--voz-bastidor); }

.bloco-clipe {
  background: linear-gradient(180deg, var(--acento-claro), var(--acento));
  color: var(--acento-tinta);
  font-size: 0.68rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.bloco-clipe:hover { filter: brightness(1.1); }

/* A agulha atravessa as duas faixas. */
.agulha {
  position: absolute;
  top: -19px;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--acento);
  box-shadow: 0 0 8px var(--acento-fio);
  pointer-events: none;
  z-index: 3;
}
.agulha::before {
  content: "";
  position: absolute;
  top: 0;
  left: -4px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--acento);
}

.legenda-faixas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.65rem;
  font-size: 0.72rem;
}
.legenda-faixas span { display: inline-flex; align-items: center; gap: 0.35rem; }
.amostra { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

.emendas {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem 0.9rem;
  border-top: 1px solid var(--linha);
  background: var(--superficie-2);
}
.emendas > .sussurro {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
}
.emendas-botoes { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* ---------------------------------------------------------------- *
 * Cartões
 * ---------------------------------------------------------------- */

.controles { display: grid; gap: 0.75rem; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--relevo);
  padding: 0.95rem 1rem 1.05rem;
}

.cartao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.cartao-topo h2 { margin: 0; }

.link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
  color: var(--tinta-fraca);
  cursor: pointer;
  transition: color var(--transicao);
}
.link:hover { color: var(--acento); }

/* ---------------------------------------------------------------- *
 * Arquivos
 * ---------------------------------------------------------------- */

.arquivos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }

.arquivos li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  font-size: 0.83rem;
  min-width: 0;
}
.arquivos .nome {
  font-weight: 520;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arquivos .meta {
  color: var(--tinta-fraca);
  font-size: 0.73rem;
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.envio { margin-top: 0.65rem; }
.envio .progresso { margin-bottom: 0.35rem; }
.envio p { font-variant-numeric: tabular-nums; }

.selo {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  padding: 0.18rem 0.34rem;
  border-radius: 4px;
  background: var(--acento-vidro);
  color: var(--acento);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------- *
 * Modos e instrução
 * ---------------------------------------------------------------- */

.modos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-bottom: 0.75rem;
  padding: 3px;
  background: var(--superficie-2);
  border-radius: var(--raio-p);
}

/* Segmentado: as duas metades formam um controle só, e o ativo parece
   levantado do trilho. */
.modo {
  display: grid;
  gap: 1px;
  padding: 0.5rem 0.55rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tinta-media);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.modo strong { font-size: 0.81rem; font-weight: 580; }
.modo span { font-size: 0.7rem; color: var(--tinta-fraca); }
.modo:hover { background: var(--superficie-3); }
.modo.ativo {
  background: var(--superficie-3);
  color: var(--tinta);
  box-shadow: var(--relevo), 0 1px 3px rgba(0, 0, 0, 0.4);
}
.modo.ativo strong { color: var(--acento); }

textarea {
  width: 100%;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  color: var(--tinta);
  font: inherit;
  font-size: 0.87rem;
  resize: vertical;
  transition: border-color var(--transicao), background var(--transicao);
}
textarea::placeholder { color: var(--tinta-fraca); }
textarea:focus {
  outline: none;
  border-color: var(--acento);
  background: var(--superficie-3);
}

.sugestoes { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.55rem 0 0; }
.sugestoes button {
  font: inherit;
  font-size: 0.71rem;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: transparent;
  color: var(--tinta-media);
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao);
}
.sugestoes button:hover { border-color: var(--acento); color: var(--acento); }

/* ---------------------------------------------------------------- *
 * Formato e música
 * ---------------------------------------------------------------- */

.opcoes { display: grid; gap: 0.7rem; margin-top: 0.8rem; }
.opcao { display: grid; gap: 0.35rem; }
.opcao > label {
  font-size: 0.66rem;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--tinta-media);
}

.formatos { display: flex; gap: 0.3rem; }
.forma {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.4rem 0.3rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  color: var(--tinta-media);
  font: inherit;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--transicao), color var(--transicao);
}
.forma:hover { border-color: var(--linha-forte); }
.forma.ativo { border-color: var(--acento); color: var(--acento); background: var(--acento-vidro); }

/* A miniatura mostra a proporção; o número sozinho exige tradução mental. */
.forma i {
  display: block;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  opacity: 0.85;
}
.forma-9x16 { width: 9px; height: 16px; }
.forma-1x1 { width: 13px; height: 13px; }
.forma-16x9 { width: 18px; height: 10px; }

select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  color: var(--tinta);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
select:focus { outline: none; border-color: var(--acento); }

.volume { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.3rem; }
.volume input[type="range"] { flex: 1; accent-color: var(--acento); }
.volume .sussurro { font-variant-numeric: tabular-nums; min-width: 2.4rem; text-align: right; }

/* ---------------------------------------------------------------- *
 * Ajustes recolhíveis (legenda, abertura e encerramento)
 *
 * Fechados por padrão: são ajustes finos, e quem só quer cortar um vídeo
 * não deveria atravessar dez campos para chegar no botão.
 * ---------------------------------------------------------------- */

.ajustes {
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--superficie-2);
}
.ajustes > summary {
  cursor: pointer;
  padding: 0.5rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-media);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.ajustes > summary::-webkit-details-marker { display: none; }
.ajustes > summary::before {
  content: "";
  border-left: 4px solid var(--tinta-fraca);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform var(--transicao);
}
.ajustes[open] > summary::before { transform: rotate(90deg); }
.ajustes > summary:hover { color: var(--acento); }

.ajustes-corpo {
  display: grid;
  gap: 0.55rem;
  padding: 0.2rem 0.65rem 0.75rem;
  border-top: 1px solid var(--linha);
}

/* Abas da música: biblioteca × arquivo deste projeto */
.abas { display: flex; gap: 3px; padding: 3px; background: var(--fundo); border-radius: var(--raio-p); }
.aba {
  flex: 1;
  border: 0;
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  background: transparent;
  color: var(--tinta-fraca);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 560;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.aba:hover { color: var(--tinta-media); }
.aba.ativo { background: var(--superficie-3); color: var(--acento); box-shadow: var(--relevo); }

.faixas {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
  max-height: 15rem;
  overflow-y: auto;
}
.faixa {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  font-size: 0.81rem;
  cursor: pointer;
  min-width: 0;
  border: 1px solid transparent;
  transition: background var(--transicao), border-color var(--transicao);
}
.faixa:hover { background: var(--superficie-3); }
.faixa.escolhida { border-color: var(--acento); background: var(--acento-vidro); }
.faixa.escolhida .faixa-nome { color: var(--acento); font-weight: 600; }

.faixa-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.faixa-meta {
  color: var(--tinta-fraca);
  font-size: 0.7rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.faixa .tocar, .faixa .apagar {
  border: 0;
  background: none;
  color: var(--tinta-fraca);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0.1rem 0.25rem;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color var(--transicao), background var(--transicao);
}
.faixa .tocar:hover { color: var(--acento); background: var(--superficie); }
.faixa .apagar { font-size: 1rem; line-height: 1; }
.faixa .apagar:hover { color: var(--erro); background: var(--superficie); }

.campo { display: grid; gap: 0.25rem; }
.campo > label {
  font-size: 0.7rem;
  color: var(--tinta-fraca);
}

.cores { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.cor { display: flex; align-items: center; gap: 0.35rem; font-size: 0.73rem; color: var(--tinta-media); }
.cor input[type="color"] {
  width: 26px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--linha-forte);
  border-radius: 5px;
  background: none;
  cursor: pointer;
}
.cor input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.cor input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 3px; }

.marcar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--tinta-media);
  cursor: pointer;
}
.marcar input { accent-color: var(--acento); }

/* O xadrez revela transparência: sobre fundo liso, um logotipo com fundo
   branco parece igual a um com fundo transparente. */
.previa-marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem;
  border-radius: var(--raio-p);
  background-color: #6b6b73;
  background-image:
    linear-gradient(45deg, #4a4a52 25%, transparent 25%),
    linear-gradient(-45deg, #4a4a52 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #4a4a52 75%),
    linear-gradient(-45deg, transparent 75%, #4a4a52 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.previa-marca img {
  max-height: 56px;
  max-width: 50%;
  object-fit: contain;
  display: block;
}
.previa-marca .sussurro {
  background: rgba(0, 0, 0, 0.55);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  color: var(--tinta);
}

/* Prévia: xadrez claro/escuro porque legenda tem de funcionar sobre os dois.
   Uma prévia só em cinza esconde branco sobre claro, que é o erro comum. */
/*
 * A prévia tem a forma do vídeo que está sendo feito.
 *
 * Ela já foi uma tira larga de altura fixa, e por isso era cega ao defeito
 * que mais aparecia: no 9:16 a fonte é grande em relação à largura e a
 * frase estoura, coisa que numa tira larga nunca acontece. A pessoa
 * escolhia o estilo numa forma e recebia outra.
 */
.previa {
  aspect-ratio: var(--aspecto, 16 / 9);
  max-height: 260px;
  margin-inline: auto;
  position: relative;
  border-radius: var(--raio-p);
  display: grid;
  place-items: center;
  padding: 0.4rem;
  overflow: hidden;
  background:
    linear-gradient(90deg, #d8d5cf 0 50%, #1a1a1f 50% 100%);
}
.previa span {
  position: absolute;
  text-align: center;
  /* Mesma entrelinha do desenho real (overlay.js). */
  line-height: 1.22;
  max-width: 88%;
}
/* A faixa da prévia atravessa o quadro, como no vídeo. */
.previa.com-faixa::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(var(--faixa), var(--faixa));
  background-size: 100% 34%;
  background-position: 0 78%;
  background-repeat: no-repeat;
}
.previa-controles { margin-top: -0.2rem; }
.previa-controles input {
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--linha);
  border-radius: 5px;
  background: var(--superficie-2);
  color: var(--tinta-media);
  font: inherit;
  font-size: 0.75rem;
}

/* --- Camadas da legenda --- */
.camadas { display: grid; gap: 0.4rem; }
.camada {
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 0.45rem 0.55rem;
  background: var(--superficie-2);
  transition: opacity var(--transicao);
}
.camada.desligada { opacity: 0.45; }
.camada.desligada .camada-corpo { pointer-events: none; }
.camada > .marcar { margin: 0; }
.camada strong { font-size: 0.8rem; font-weight: 620; }
.camada-corpo { display: grid; gap: 0.3rem; margin-top: 0.4rem; padding-left: 1.3rem; }

.cor-hex { display: flex; align-items: center; gap: 0.35rem; }
.cor-hex input[type="color"] {
  width: 26px; height: 22px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--linha-forte); border-radius: 5px; background: none; cursor: pointer;
}
.cor-hex input[type="text"] {
  width: 5.5rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--linha);
  border-radius: 4px;
  background: var(--superficie-3);
  color: var(--tinta);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.dois { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

/* Atalhos de posição: os nove pontos do quadro */
.posicao-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  width: 6.5rem;
}
.posicao-grade button {
  aspect-ratio: 1;
  border: 1px solid var(--linha);
  border-radius: 4px;
  background: var(--superficie-2);
  color: var(--tinta-fraca);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.posicao-grade button:hover { border-color: var(--acento); color: var(--acento); }

/* --- Destaques --- */
.destaques { list-style: none; margin: 0 0 0.4rem; padding: 0; display: grid; gap: 2px; }
.destaques li {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.45rem; border-radius: 5px;
  background: var(--superficie-3); font-size: 0.78rem;
}
.dest-palavras { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alternar {
  width: 1.3rem; height: 1.3rem; flex-shrink: 0;
  border: 1px solid var(--linha-forte); border-radius: 4px;
  background: transparent; color: var(--tinta-fraca);
  font: inherit; font-size: 0.7rem; font-weight: 800; cursor: pointer;
}
.alternar.sublinhado { text-decoration: underline; }
.alternar.ativo { border-color: var(--acento); color: var(--acento); background: var(--acento-vidro); }
.destaques .apagar {
  border: 0; background: none; color: var(--tinta-fraca);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.15rem;
}
.destaques .apagar:hover { color: var(--erro); }

.destaque-novo { display: flex; align-items: center; gap: 0.35rem; }
.destaque-novo input[type="text"], .destaque-novo input:not([type]) {
  flex: 1; min-width: 0;
  padding: 0.35rem 0.5rem; border: 1px solid var(--linha); border-radius: 5px;
  background: var(--superficie-2); color: var(--tinta); font: inherit; font-size: 0.78rem;
}
.destaque-novo input[type="color"] {
  width: 26px; height: 26px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--linha-forte); border-radius: 5px; background: none; cursor: pointer;
}

/* Correções do glossário */
.correcoes { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 2px; }
.correcoes li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  background: var(--superficie-3);
  font-size: 0.79rem;
}
.correcoes .de { color: var(--erro); text-decoration: line-through; }
.correcoes .para { color: var(--ok); font-weight: 560; }
.correcoes .seta { color: var(--tinta-fraca); }
.correcoes .apagar {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--tinta-fraca);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
}
.correcoes .apagar:hover { color: var(--erro); }

.correcao-nova { display: flex; align-items: center; gap: 0.35rem; }
.correcao-nova input {
  min-width: 0;
  flex: 1;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--linha);
  border-radius: 5px;
  background: var(--superficie-2);
  color: var(--tinta);
  font: inherit;
  font-size: 0.79rem;
}
.correcao-nova input:focus { outline: none; border-color: var(--acento); }
.correcao-nova .seta { color: var(--tinta-fraca); flex-shrink: 0; }

/* ---------------------------------------------------------------- *
 * Botões
 * ---------------------------------------------------------------- */

.acoes {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
}

.botao,
a.baixar,
.primary {
  font: inherit;
  font-size: 0.84rem;
  font-weight: 560;
  border: 0;
  border-radius: var(--raio-p);
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: filter var(--transicao), box-shadow var(--transicao);
}

.principal,
a.baixar,
.primary {
  background: linear-gradient(180deg, var(--acento-claro), var(--acento));
  color: var(--acento-tinta);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px -10px rgba(235, 161, 60, 0.7);
}
.principal:hover:not(:disabled),
a.baixar:hover,
.primary:hover { filter: brightness(1.07); }
.principal:active:not(:disabled) { filter: brightness(0.95); }
.principal:disabled {
  background: var(--superficie-3);
  color: var(--tinta-fraca);
  box-shadow: none;
  cursor: not-allowed;
}

.mini {
  font: inherit;
  font-size: 0.74rem;
  font-weight: 540;
  border: 1px solid var(--linha-forte);
  background: var(--superficie-2);
  color: var(--tinta-media);
  border-radius: 999px;
  padding: 0.24rem 0.65rem;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: color var(--transicao), border-color var(--transicao),
    background var(--transicao);
}
.mini:hover:not(:disabled) {
  border-color: var(--acento);
  color: var(--acento);
  background: var(--acento-vidro);
}
.mini:disabled { opacity: 0.5; cursor: default; }
.mini.pronto { border-color: transparent; color: var(--ok); }

/* ---------------------------------------------------------------- *
 * Plano
 * ---------------------------------------------------------------- */

.resumo { margin: 0 0 0.8rem; font-size: 0.88rem; line-height: 1.5; color: var(--tinta-media); }

.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; counter-reset: passo; }
.passos li {
  position: relative;
  padding: 0.45rem 0.6rem 0.45rem 2.1rem;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  font-size: 0.83rem;
  counter-increment: passo;
}
.passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0.6rem;
  top: 0.45rem;
  width: 1.1rem;
  height: 1.1rem;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--acento-vidro);
  color: var(--acento);
  font-size: 0.64rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.passos strong { display: block; font-weight: 580; font-size: 0.86rem; }
.passos code {
  font-size: 0.72rem;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.passos .clip-why { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--tinta-fraca); }
.passos .clip-caption { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--tinta-media); font-style: italic; }

.detalhes { margin-top: 0.8rem; }
.detalhes summary {
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--tinta-fraca);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.detalhes summary::-webkit-details-marker { display: none; }
.detalhes summary::before {
  content: "";
  border-left: 4px solid var(--tinta-fraca);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform var(--transicao);
}
.detalhes[open] summary::before { transform: rotate(90deg); }
.detalhes summary:hover { color: var(--tinta-media); }

.avisos { list-style: none; margin: 0.55rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.avisos li {
  font-size: 0.77rem;
  color: var(--tinta-fraca);
  padding-left: 0.85rem;
  position: relative;
  line-height: 1.45;
}
.avisos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--acento);
}

/* Objetivo da edição */
.objetivo-detalhe {
  margin-top: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  border-left: 2px solid var(--acento);
}
.faz, .nao-faz { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.faz li, .nao-faz li {
  font-size: 0.76rem;
  line-height: 1.4;
  padding-left: 1.1rem;
  position: relative;
}
.faz li { color: var(--tinta-media); }
.faz li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.nao-faz li { color: var(--tinta-fraca); }
.nao-faz li::before { content: "✕"; position: absolute; left: 0; color: var(--erro); font-weight: 700; }

/* Renders prontos */
.renders { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.renders li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.6rem;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  font-size: 0.82rem;
}
.render-nome { font-weight: 540; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 6rem; }
.render-meta {
  color: var(--tinta-fraca);
  font-size: 0.72rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.renders a.mini { text-decoration: none; }
.renders .apagar {
  border: 0; background: none; color: var(--tinta-fraca);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.2rem;
}
.renders .apagar:hover { color: var(--erro); }

/* ---------------------------------------------------------------- *
 * Progresso
 * ---------------------------------------------------------------- */

.progresso {
  height: 4px;
  background: var(--superficie-3);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.progresso-barra {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acento), var(--acento-claro));
  box-shadow: 0 0 10px var(--acento-fio);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#result-video {
  width: 100%;
  margin-top: 0.85rem;
  border-radius: var(--raio-p);
  background: var(--poco);
  display: block;
}

/* ---------------------------------------------------------------- *
 * Login e administração
 *
 * Mesma linguagem, uma coluna só: essas telas não têm vídeo para
 * emoldurar.
 *
 * TUDO AQUI PRECISA SER `body > header` OU CLASSE PRÓPRIA.
 *
 * A primeira versão usava `header:not(.topo)`, achando que só existia um
 * header fora do topo. Existiam sete: o cabeçalho de cada cartão da
 * ferramenta é um `<header class="cartao-topo">`. O resultado foi que todo
 * título de cartão ganhou `max-width: 620px; margin: 0 auto` e passou a
 * aparecer centralizado e recuado no meio do cartão — em toda a aplicação,
 * por semanas, sem que nenhum teste notasse.
 *
 * O filho direto de body é o que distingue: nestas páginas o header é do
 * documento; na ferramenta, é de um cartão.
 * ---------------------------------------------------------------- */

body > header:not(.topo) {
  max-width: 620px;
  margin: 0 auto;
  padding: 3rem 1.5rem 0.75rem;
}
/* O login é uma tarefa só e fica melhor estreito; a lista de usuários
   precisa de mais largura para o e-mail caber na mesma linha. */
body:has(main.entrar) > header:not(.topo) { max-width: 460px; padding-top: 5rem; }
body > header:not(.topo) .marca-icone {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 0.9rem;
}

body > header:not(.topo) h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}
body > header:not(.topo) .env {
  margin: 0.3rem 0 0;
  color: var(--tinta-fraca);
  font-size: 0.83rem;
}
body > header:not(.topo) .env a { color: var(--tinta-media); text-decoration: none; }
body > header:not(.topo) .env a:hover { color: var(--acento); }

main:not(.palco) {
  max-width: 620px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem 4rem;
  display: grid;
  gap: 0.75rem;
}
main.entrar { max-width: 460px; }

.panel {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--relevo), var(--sombra);
  padding: 1.25rem;
}
.panel h2 {
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.step {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 4px;
  background: var(--acento-vidro);
  color: var(--acento);
  font-size: 0.68rem;
  font-weight: 700;
}

.form { display: grid; gap: 0.25rem; }
.form label {
  font-size: 0.68rem;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-media);
  margin-top: 0.7rem;
}
.form input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  color: var(--tinta);
  font: inherit;
  font-size: 0.9rem;
  transition: border-color var(--transicao), background var(--transicao);
}
.form input:focus {
  outline: none;
  border-color: var(--acento);
  background: var(--superficie-3);
}
.form .check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  font-size: 0.83rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--tinta);
}
.form .check input { width: auto; accent-color: var(--acento); }

.status { color: var(--tinta-fraca); font-size: 0.8rem; margin: 0.35rem 0 0; }
.error { color: var(--erro); font-size: 0.83rem; }
.row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }

.media-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.media-list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.7rem;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  font-size: 0.84rem;
}
.media-list .name { font-weight: 560; }
.media-list .meta { color: var(--tinta-fraca); font-size: 0.74rem; }

.badge {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.18rem 0.34rem;
  border-radius: 4px;
  background: var(--acento-vidro);
  color: var(--acento);
  font-weight: 700;
}

button.transcribe {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 540;
  border: 1px solid var(--linha-forte);
  background: var(--superficie-3);
  color: var(--tinta-media);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  cursor: pointer;
  margin-left: auto;
  transition: color var(--transicao), border-color var(--transicao);
}
button.transcribe:hover:not(:disabled) { border-color: var(--erro); color: var(--erro); }

/* ---------------------------------------------------------------- *
 * Navegador das pastas do Mac
 * ---------------------------------------------------------------- */

.cartao-acoes { display: flex; gap: 0.75rem; }

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(6, 6, 8, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 60;
}
.modal.hidden { display: none; }

.modal-caixa {
  width: min(560px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-g);
  box-shadow: var(--relevo), 0 24px 60px -20px rgba(0, 0, 0, 0.9);
  padding: 1.1rem 1.15rem 1.15rem;
}
.modal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.modal-topo h2 {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--tinta-media);
}
#local-caminho {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navegador {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 8rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--superficie-2);
}
.navegador li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.83rem;
  cursor: pointer;
  border-bottom: 1px solid var(--linha);
}
.navegador li:last-child { border-bottom: 0; }
.navegador li:hover { background: var(--superficie-3); }

/* Pasta e arquivo precisam se distinguir sem depender só da cor. */
.nav-pasta .nav-nome::before { content: "▸ "; color: var(--tinta-fraca); }
.nav-arquivo .nav-nome::before { content: "· "; color: var(--tinta-fraca); }
.nav-pasta { font-weight: 540; }
.nav-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-meta {
  margin-left: auto;
  color: var(--tinta-fraca);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nav-arquivo.escolhido { background: var(--acento-vidro); color: var(--acento); }
.nav-arquivo.escolhido .nav-nome::before { content: "✓ "; color: var(--acento); }

/* ---------------------------------------------------------------- *
 * Cortina de arrastar
 * ---------------------------------------------------------------- */

.cortina {
  position: fixed;
  inset: 0.6rem;
  display: none;
  place-items: center;
  background: rgba(11, 11, 14, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 2px dashed var(--acento);
  border-radius: var(--raio-g);
  z-index: 50;
  font-size: 0.95rem;
  font-weight: 560;
  color: var(--acento);
  pointer-events: none;
}
.cortina.ativa { display: grid; }

/* Quem pediu menos movimento não recebe nenhum. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------------ *
 * Painel de controle
 *
 * Duas formas novas: o cartão de número grande, para o que se lê de
 * relance, e a tabela, para o que se compara linha a linha. A tabela
 * rola dentro do próprio quadro em tela estreita — sem isso, dez
 * colunas empurram a página inteira para o lado no celular.
 * ------------------------------------------------------------------ */

.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
}
/*
 * ATENÇÃO AO NOME.
 *
 * Isto já se chamou `.cartao` — o mesmo nome dos cartões da ferramenta. O
 * resultado foi que estas regras sobrescreveram as de lá em toda a
 * aplicação: os botões de modo passaram a 1,7rem, o cartão virou grid e o
 * cabeçalho desalinhou. Nada disso apareceu em teste, porque cada teste
 * olhava só a própria tela. Nome de classe genérico numa folha única é
 * colisão esperando acontecer; daí `.metrica`, que só existe aqui.
 */
.metrica {
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 0.8rem 0.9rem;
  display: grid;
  gap: 0.15rem;
}
.metrica strong {
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metrica span { color: var(--tinta-media); font-size: 0.78rem; }
.metrica em { color: var(--tinta-fraca); font-size: 0.72rem; font-style: normal; }
/* Só a métrica em alerta muda de cor: se várias mudassem, nenhuma chamaria
   atenção. */
.metrica-alerta {
  border-color: var(--erro);
  background: color-mix(in srgb, var(--erro) 12%, var(--superficie-2));
}
.metrica-alerta strong { color: var(--erro); }

.tabela-rolagem { overflow-x: auto; margin-top: 0.75rem; }
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  /* Números alinhados na vertical: coluna de contagem em fonte
     proporcional não dá para comparar de olho. */
  font-variant-numeric: tabular-nums;
}
.tabela th {
  text-align: left;
  font-weight: 560;
  color: var(--tinta-fraca);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 0.6rem 0.5rem 0;
  border-bottom: 1px solid var(--linha-forte);
  white-space: nowrap;
}
.tabela td {
  padding: 0.55rem 0.6rem 0.55rem 0;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
  color: var(--tinta-media);
}
.tabela td:first-child, .tabela td strong { color: var(--tinta); }
.tabela tbody tr:hover td { background: var(--superficie-2); }
.tabela .badge { margin: 0; }
.tabela .meta { color: var(--tinta-fraca); font-size: 0.72rem; }
/* O que merece um segundo olhar, e nada mais que isso. */
.tabela td.atencao, .tabela tr.atencao td { color: var(--erro); }

.tabela select, #dias, #filtro-licenca, #filtro-tipo {
  background: var(--superficie-2);
  color: var(--tinta);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p);
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.82rem;
}

/* ------------------------------------------------------------------ *
 * Montagem — o storyboard
 *
 * Cada cena é uma linha: número de ordem, miniatura, controles e as
 * ações de mover/remover. Linha e não cartão porque a ordem é a
 * informação principal aqui, e uma coluna de linhas numeradas se lê de
 * cima para baixo como a sequência que vai virar o vídeo.
 * ------------------------------------------------------------------ */

.montagem { display: grid; gap: 0.9rem; margin-top: 0.75rem; }

/* A fileira da ferramenta. Nome próprio porque `.row` é das telas de
   página, e usar o mesmo nome vazava o estilo de lá para cá. */
.fileira { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.storyboard { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.cena {
  display: grid;
  grid-template-columns: auto 64px 1fr auto;
  gap: 0.7rem;
  align-items: start;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 0.6rem 0.7rem;
}

.cena-ordem {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--acento-vidro);
  border: 1px solid var(--acento-fio);
  color: var(--acento-claro);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.cena-mini {
  width: 64px;
  height: 64px;
  border-radius: var(--raio-p);
  overflow: hidden;
  background: var(--poco);
  display: grid;
  place-items: center;
  color: var(--tinta-fraca);
}
/* A miniatura corta em vez de deformar: uma foto esticada na lista faria
   a pessoa achar que o vídeo vai sair assim. */
.cena-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cena-mini-clipe { font-size: 1.1rem; }

.cena-corpo { display: grid; gap: 0.45rem; min-width: 0; }
.cena-nome {
  font-size: 0.82rem;
  font-weight: 560;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cena-perdida { color: var(--erro); }

.cena-controles {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: flex-end;
}
.cena-campo { display: grid; gap: 0.15rem; }
.cena-campo > span {
  color: var(--tinta-fraca);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cena-campo input[type='number'] { width: 5.5rem; }
.cena-campo input, .cena-campo select {
  background: var(--superficie-3);
  color: var(--tinta);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p);
  padding: 0.32rem 0.45rem;
  font: inherit;
  font-size: 0.8rem;
}
.cena-campo-largo { flex: 1 1 12rem; min-width: 0; }
.cena-campo-largo input { width: 100%; }
.cena-check { display: flex; align-items: center; gap: 0.35rem; }
.cena-check span { text-transform: none; letter-spacing: 0; font-size: 0.72rem; }

.cena-acoes { display: grid; gap: 0.25rem; }
.cena-botao {
  background: var(--superficie-3);
  color: var(--tinta-media);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p);
  width: 1.75rem;
  height: 1.6rem;
  font-size: 0.75rem;
  cursor: pointer;
}
.cena-botao:hover:not(:disabled) { color: var(--tinta); border-color: var(--acento-fio); }
.cena-botao:disabled { opacity: 0.3; cursor: default; }

.disponiveis { display: grid; gap: 0.35rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip {
  background: var(--superficie-2);
  color: var(--tinta-media);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip:hover { color: var(--tinta); border-color: var(--acento-fio); }
/* Já usado continua clicável: a mesma foto pode abrir e fechar o vídeo. */
.chip-usado { opacity: 0.5; }

.opcoes-montagem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
}

/* Em tela estreita a miniatura sai e a cena vira duas colunas. */
@media (max-width: 640px) {
  .cena { grid-template-columns: auto 1fr auto; }
  .cena-mini { display: none; }
}

/* ------------------------------------------------------------------ *
 * A obra — refinamentos do novo layout
 *
 * O que mudou e por quê: antes tudo que não fosse o vídeo morava na
 * coluna estreita da direita, que virava um rolo de 2.500 px enquanto
 * 60% da tela ficava preta. Agora a esquerda recebe a bancada de
 * montagem, o render em andamento e os renders prontos — coisas que
 * ganham em ter largura — e a direita fica só com o formulário.
 * ------------------------------------------------------------------ */

/* A bancada de montagem: mesma linguagem do visor, porque as duas são
   superfícies de trabalho e não painéis de ajuste. */
.bancada {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--relevo), var(--sombra);
  padding: 1rem 1.1rem 1.2rem;
}
.bancada > .cartao-topo { margin-bottom: 0.85rem; }
.bancada .montagem { margin-top: 0; }

/* Com a largura do palco, o storyboard mostra duas cenas por linha em
   tela grande — a sequência inteira cabe na vista em vez de exigir
   rolagem a cada três fotos. */
@media (min-width: 1180px) {
  .storyboard {
    grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  }
  .opcoes-montagem { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

/* ------------------------------------------------------------------ *
 * Cabeçalho de cartão
 *
 * O título e suas ações formam um par. Com `space-between` numa largura
 * de 700 px eles ficavam a meia tela de distância um do outro e a
 * relação se perdia — o botão parecia pertencer ao conteúdo abaixo. O
 * título agora carrega um fio de acento à esquerda, que dá o ponto de
 * partida da leitura sem precisar de corpo maior.
 * ------------------------------------------------------------------ */

.cartao-topo h2,
.panel h2,
.bancada > .cartao-topo h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cartao-topo h2::before,
.bancada > .cartao-topo h2::before {
  content: "";
  width: 2px;
  height: 0.72rem;
  border-radius: 1px;
  background: linear-gradient(var(--acento), var(--acento-fio));
  flex-shrink: 0;
}

.cartao-acoes { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }

/* ------------------------------------------------------------------ *
 * Modos: três colunas iguais
 *
 * Com `1fr 1fr` o terceiro modo caía sozinho numa segunda linha,
 * ocupando meia largura e sem a caixa dos outros — parecia defeito.
 * ------------------------------------------------------------------ */

.modos { grid-template-columns: repeat(3, 1fr); }
.modo { padding: 0.55rem 0.5rem; }
.modo strong { display: block; line-height: 1.25; }
.modo span { display: block; line-height: 1.25; }

/* Um fio de acento no topo do modo ativo: marca a escolha sem depender
   só da cor do texto, que some para quem não distingue bem tons. */
.modo.ativo { position: relative; }
.modo.ativo::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--acento), transparent);
}

/* ------------------------------------------------------------------ *
 * Barra de ação fixa
 *
 * O botão principal ficava no fim de uma coluna longa: para renderizar
 * era preciso rolar de volta. Agora ele acompanha a coluna.
 * ------------------------------------------------------------------ */

.acoes-fixas {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0;
  margin-top: -0.2rem;
  /* O degradê evita o corte seco entre a barra e o conteúdo que passa
     por baixo dela ao rolar. */
  background: linear-gradient(to top, var(--fundo) 62%, transparent);
}
.acoes-fixas .botao { flex: 1; }
.acoes-fixas .sussurro { flex: 1; text-align: right; }

@media (max-width: 1180px) {
  .acoes-fixas { background: linear-gradient(to top, var(--fundo) 72%, transparent); }
}

/* ------------------------------------------------------------------ *
 * Renders prontos, na obra
 *
 * A lista cresce sem limite — é o histórico da licença. Na coluna
 * estreita ela virava uma parede embaixo dos ajustes. Aqui ela tem
 * largura para caber em uma linha por render e altura limitada, com
 * rolagem própria.
 * ------------------------------------------------------------------ */

#cartao-renders .renders {
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
}
#cartao-renders .renders::-webkit-scrollbar { width: 8px; }
#cartao-renders .renders::-webkit-scrollbar-thumb {
  background: var(--superficie-3);
  border-radius: 4px;
}

/* ------------------------------------------------------------------ *
 * Acabamento
 *
 * O que segue não é enfeite: cada item resolve algo que a captura de
 * tela mostrou estar atrapalhando a leitura.
 * ------------------------------------------------------------------ */

/* Um fio de acento sob a barra do topo. Marca onde a interface começa
   e dá à barra um pertencimento que a borda cinza sozinha não dava. */
.topo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--acento-fio) 0,
    transparent 22%,
    transparent 78%,
    rgba(235, 161, 60, 0.16) 100%
  );
  pointer-events: none;
}
.topo { position: sticky; }

/* Os três modos: caber em uma linha cada um.
   Com "Cortes para redes" quebrando em duas linhas, os três botões
   ficavam de alturas diferentes e o trilho perdia a forma. */
/*
 * Reticências num rótulo de três palavras não economizam nada e custam a
 * palavra: "Cortes para re…" obriga a adivinhar. O subtítulo pode ocupar
 * duas linhas, e os três botões ganham a mesma altura mínima para o
 * trilho não ficar dentado.
 */
.modo strong { font-size: 0.78rem; }
.modo span { font-size: 0.66rem; line-height: 1.3; }
.modos { align-items: stretch; }
.modo {
  min-height: 3.4rem;
  align-content: start;
}

/* Onde não há vídeo, o quadro não pode ser só um retângulo preto: uma
   trama fina de linhas dá a leitura de "área de trabalho vazia" em vez
   de "algo não carregou". */
/*
 * A trama fica num pseudo-elemento, não no fundo do próprio bloco.
 *
 * A primeira versão punha a máscara no `.visor-vazio` — e `mask-image`
 * mascara o elemento INTEIRO, filhos incluídos. O resultado foi o texto
 * "Arraste um vídeo para começar" quase apagado no centro, que é
 * exatamente onde a máscara é mais opaca.
 */
.visor-vazio { position: relative; }
.visor-vazio::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  background-position: center;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 18%, #000 68%);
  mask-image: radial-gradient(ellipse at center, transparent 18%, #000 68%);
  pointer-events: none;
}
.visor-vazio > * { position: relative; z-index: 1; }

/* Números em fonte tabular onde eles são para comparar. */
.render-meta,
.arquivos .meta,
#linha-tempo,
.cena-campo input[type="number"] { font-variant-numeric: tabular-nums; }

/* O botão principal ganha um brilho contido no hover — o suficiente
   para parecer clicável sem virar botão de anúncio. */
.principal:not(:disabled) {
  transition: box-shadow var(--transicao), transform var(--transicao),
    filter var(--transicao);
}
.principal:not(:disabled):hover {
  filter: brightness(1.06);
  box-shadow: 0 0 0 1px var(--acento-fio), 0 6px 20px -8px rgba(235, 161, 60, 0.5);
}
.principal:not(:disabled):active { transform: translateY(1px); }

/* Estado desabilitado que se lê como desabilitado, e não como um botão
   secundário: sem borda, sem contraste, cursor bloqueado. */
.principal:disabled { opacity: 0.55; }

/* Cartão: separar o cabeçalho do conteúdo com um fio, como nas telas de
   corte de vídeo. Ajuda quando o cartão tem muita coisa. */
.cartao > .cartao-topo,
.bancada > .cartao-topo {
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--linha);
}
/* O cartão de arquivos costuma estar vazio no começo: sem conteúdo, o
   fio embaixo do título ficaria solto. */
#cartao-arquivos .cartao-topo { border-bottom: 0; padding-bottom: 0; }

/* Rolagem do documento com a cor da interface, não a cinza do sistema. */
* { scrollbar-color: var(--superficie-3) transparent; scrollbar-width: thin; }

/* ------------------------------------------------------------------ *
 * Hierarquia dos botões
 *
 * "Adicionar todos os arquivos" vinha com o mesmo peso visual do botão
 * que renderiza. Dois botões em destaque na mesma tela é o mesmo que
 * nenhum: o olho não sabe qual é o passo seguinte.
 * ------------------------------------------------------------------ */

.botao:not(.principal) {
  background: var(--superficie-3);
  color: var(--tinta);
  box-shadow: var(--relevo);
  border: 1px solid var(--linha-forte);
}
.botao:not(.principal):hover { border-color: var(--acento-fio); color: var(--acento-claro); }

/* Campo de número que aceita ficar vazio: com largura de duas letras,
   o "livre" do espaço reservado saía cortado e parecia defeito. */
#mont-total { width: 8rem; }
#mont-duracao-transicao { max-width: 8rem; }

/* Cabeçalho da bancada: o resumo da sequência fica ao lado do título,
   onde se lê de relance sem descer até o rodapé do painel. */
#mont-resumo-topo { font-variant-numeric: tabular-nums; }

/*
 * Desabilitado tem de parecer desabilitado.
 *
 * Depois que os botões secundários ganharam borda e contraste, um botão
 * secundário DESABILITADO passou a parecer mais clicável que o principal
 * desabilitado ao lado dele — na tela inicial, "Renderizar" (bloqueado,
 * sem plano) chamava mais atenção que "Gerar plano", que era o passo
 * seguinte de verdade.
 */
.botao:disabled,
.botao:disabled:hover {
  cursor: not-allowed;
  background: var(--superficie-2);
  border-color: var(--linha);
  color: var(--tinta-fraca);
  box-shadow: none;
  filter: none;
}

/* O botão que é o próximo passo, ainda que bloqueado, mantém um traço de
   acento: indica onde a atenção vai quando a condição for satisfeita. */
.botao.principal:disabled {
  background: var(--superficie-2);
  border: 1px solid var(--acento-fio);
  color: var(--tinta-media);
  opacity: 1;
}

/* ------------------------------------------------------------------ *
 * Telas de página: painel e administração
 *
 * O login continua estreito — é uma tarefa só. Painel e administração
 * são telas de trabalho, com tabela de dez colunas: presos a 620 px,
 * "Licença principal" quebrava em duas linhas e sobravam 350 px de
 * vazio de cada lado numa tela de 1512.
 * ------------------------------------------------------------------ */

main.amplo {
  max-width: 1360px;
  padding: 1.1rem 1.35rem 5rem;
  gap: 1.1rem;
}

/* Com a barra da ferramenta no topo, o cabeçalho grande de página não é
   mais usado nessas duas telas — só no login. */
main.amplo .panel { padding: 1.15rem 1.25rem 1.3rem; }
main.amplo .panel h2 { margin-bottom: 0.85rem; }

/* ------------------------------------------------------------------ *
 * Tela estreita
 *
 * Em uma coluna, a ordem do HTML não serve: ela põe os renders antigos
 * antes dos controles, e quem abre no celular rola uma lista de
 * arquivos velhos para chegar ao que veio fazer.
 *
 * `display: contents` no bloco da obra dissolve o agrupamento e deixa
 * cada peça ser ordenada sozinha — sem isso só daria para trocar dois
 * blocos inteiros de lugar.
 * ------------------------------------------------------------------ */

@media (max-width: 1180px) {
  .palco { display: flex; flex-direction: column; }
  .obra { display: contents; }

  #visor { order: 1; }
  /* O progresso do render só aparece quando há render: quando aparece,
     é o que mais importa na tela. */
  #job-panel { order: 2; }
  #bancada-montagem { order: 3; }
  .controles { order: 4; }
  #cartao-renders { order: 5; }

  /* A barra fica opaca: sobre uma coluna estreita, o degradê deixava o
     texto de trás aparecer por baixo dos botões. */
  .acoes-fixas {
    background: var(--fundo);
    border-top: 1px solid var(--linha);
    padding: 0.7rem 0 0.75rem;
    margin: 0 -0.1rem;
  }
  /* Espaço para a barra não cobrir permanentemente o último ajuste. */
  .controles { padding-bottom: 0.5rem; }
}

/* Em tela muito estreita, dois botões lado a lado ficam com rótulo
   apertado; o principal ocupa a linha e o outro some quando não serve. */
@media (max-width: 460px) {
  .acoes-fixas { flex-wrap: wrap; }
  .acoes-fixas .sussurro { flex-basis: 100%; text-align: left; }
}

/* Links dentro das telas de entrada. Sem isto o "Já tenho conta" saía no
   azul padrão do navegador, sublinhado, sobre o fundo escuro. */
main.entrar a,
.panel .status a {
  color: var(--acento);
  text-decoration: none;
  border-bottom: 1px solid var(--acento-fio);
}
main.entrar a:hover,
.panel .status a:hover { border-bottom-color: var(--acento); }

/* ------------------------------------------------------------------ *
 * Editor visual de camadas
 *
 * A camada de edição fica sobre o vídeo e é transparente: o que se vê
 * por baixo é o próprio quadro, que é a única referência honesta de
 * como o elemento vai ficar.
 * ------------------------------------------------------------------ */

.quadro { position: relative; line-height: 0; }

.editor {
  position: absolute;
  inset: 0;
  line-height: normal;
  /* Sem isto o clique atravessaria para os controles do player. */
  touch-action: none;
}

/* A margem segura: referência, não conteúdo. Tracejado fino para não
   competir com os elementos. */
.editor-margem {
  position: absolute;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 2px;
  pointer-events: none;
}

.elemento {
  position: absolute;
  cursor: move;
  display: grid;
  place-items: center;
  overflow: visible;
}
.elemento img { width: 100%; height: 100%; display: block; }
.elemento-texto span {
  display: block;
  width: 100%;
  line-height: 1.2;
  word-break: break-word;
}

/*
 * `.elemento`, e não `.camada`.
 *
 * `.camada` já era das camadas da legenda (texto, contorno, caixa, faixa),
 * que têm fundo próprio — e o fundo delas vazava para os elementos do
 * editor: cada texto arrastado sobre o vídeo aparecia dentro de um
 * retângulo escuro que não existiria no render. Terceira colisão de nome
 * genérico nesta folha; daí um nome que só existe aqui.
 */

/* O contorno de seleção fica FORA do elemento, num outline: uma borda
   mudaria o tamanho do elemento e o que se vê deixaria de ser o que
   sai no render. */
.elemento.selecionada { outline: 1.5px solid var(--acento); outline-offset: 1px; }
.elemento:hover:not(.selecionada) { outline: 1px solid rgba(235, 161, 60, 0.45); }

.alca {
  position: absolute;
  width: 11px;
  height: 11px;
  background: var(--acento);
  border: 1.5px solid var(--acento-tinta);
  border-radius: 2px;
}
.alca-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.alca-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.alca-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.alca-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.alca-girar {
  left: 50%;
  top: -26px;
  margin-left: -6px;
  border-radius: 50%;
  cursor: grab;
}

.editor-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem 1rem 0.75rem;
  border-top: 1px solid var(--linha);
}
.editor-add, .editor-info { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.mini-select {
  background: var(--superficie-2);
  color: var(--tinta);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p);
  padding: 0.28rem 0.5rem;
  font: inherit;
  font-size: 0.75rem;
  width: auto;
}

/* ------------------------------------------------------------------ *
 * Propriedades do elemento
 * ------------------------------------------------------------------ */

.propriedades {
  border: 1px solid var(--acento-fio);
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  padding: 0.7rem 0.8rem 0.8rem;
  margin-bottom: 0.7rem;
}
.prop-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
  font-size: 0.7rem;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acento-claro);
}
.prop-campo { display: grid; gap: 0.2rem; margin-bottom: 0.5rem; }
.prop-campo > label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tinta-fraca);
}
.prop-campo input[type="number"],
.prop-campo input[type="text"],
.prop-campo select,
.prop-campo textarea {
  width: 100%;
  background: var(--superficie-3);
  color: var(--tinta);
  border: 1px solid var(--linha-forte);
  border-radius: 5px;
  padding: 0.3rem 0.45rem;
  font: inherit;
  font-size: 0.8rem;
}
.prop-campo input[type="checkbox"] { justify-self: start; }
.prop-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.prop-grade .prop-campo { margin-bottom: 0; }

/* Cores da marca ao alcance de um clique, dentro de cada campo de cor. */
.paleta-rapida { display: flex; gap: 3px; margin-left: 0.3rem; }
.paleta-rapida button {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid var(--linha-forte);
  cursor: pointer;
  padding: 0;
}
.paleta-rapida button:hover { border-color: var(--acento); }

/* ------------------------------------------------------------------ *
 * Kit de marca
 * ------------------------------------------------------------------ */

.paleta { list-style: none; margin: 0 0 0.4rem; padding: 0; display: grid; gap: 3px; }
.paleta li { display: flex; align-items: center; gap: 0.35rem; }
.paleta input[type="color"] {
  width: 26px; height: 24px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--linha-forte); border-radius: 4px; background: none;
}
.paleta input[type="text"] {
  flex: 1; min-width: 0;
  background: var(--superficie-3); color: var(--tinta);
  border: 1px solid var(--linha-forte); border-radius: 4px;
  padding: 0.25rem 0.4rem; font: inherit; font-size: 0.76rem;
}
.paleta .hex { flex: 0 0 5.5rem; font-family: ui-monospace, monospace; }
.paleta .apagar {
  border: 0; background: none; color: var(--tinta-fraca);
  cursor: pointer; font-size: 1rem; line-height: 1;
}
.paleta .apagar:disabled { opacity: 0.25; cursor: default; }

.cor-nova { display: flex; align-items: center; gap: 0.35rem; }
.cor-nova input[type="color"] {
  width: 26px; height: 24px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--linha-forte); border-radius: 4px; background: none;
}
.cor-nova input[type="text"] {
  flex: 1; min-width: 0;
  background: var(--superficie-3); color: var(--tinta);
  border: 1px solid var(--linha-forte); border-radius: 4px;
  padding: 0.25rem 0.4rem; font: inherit; font-size: 0.76rem;
}

/* O xadrez revela transparência: um PNG com fundo branco parece
   recortado sobre fundo escuro, e só se descobre no render. */
.logo-caixa {
  display: grid;
  place-items: center;
  min-height: 70px;
  border-radius: var(--raio-p);
  border: 1px solid var(--linha);
  margin-bottom: 0.4rem;
  padding: 0.5rem;
  background-color: var(--superficie-3);
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.05) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}
.logo-caixa img { max-height: 60px; max-width: 100%; object-fit: contain; }

/* ------------------------------------------------------------------ *
 * Trazer do Drive
 * ------------------------------------------------------------------ */

#drive-links {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
}
#drive-lista { max-height: 240px; overflow-y: auto; margin-top: 0.5rem; }
#drive-lista li { display: flex; align-items: center; gap: 0.5rem; }
#drive-lista .nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#drive-lista .meta { color: var(--tinta-fraca); font-size: 0.72rem; white-space: nowrap; }
#drive-barra-caixa { margin-top: 0.6rem; }

/* ------------------------------------------------------------------ *
 * Instrução escrita dentro de cada painel de ajuste
 *
 * A caixa precisa parecer o começo do painel, e não mais um controle no
 * meio da lista: quem abre "Legenda" para escrever "sem legenda neste
 * vídeo" tem de encontrar onde escrever antes de encontrar os seis
 * controles que ela dispensa.
 * ------------------------------------------------------------------ */
.campo.nota {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}
.campo.nota textarea {
  width: 100%;
  resize: vertical;
  min-height: 52px;
  padding: 9px 11px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p, 8px);
  background: var(--fundo);
  color: var(--tinta);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.5;
}
.campo.nota textarea:focus {
  outline: none;
  border-color: var(--acento-fio, rgba(235, 161, 60, 0.4));
}
.campo.nota textarea::placeholder { color: var(--tinta-fraca); }
/* Preenchida pelo plano: o contorno âmbar diz "isto veio do que você
   escreveu", e distingue do que você mesmo digitou. */
.campo.nota textarea.veio-do-plano { border-color: var(--acento-fio, rgba(235, 161, 60, 0.4)); }