/* NocStudioPro — interface */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--t-m);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
img { display: block; }
::selection { background: var(--destaque); color: var(--destaque-texto); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px; border: 2px solid var(--fundo); }
::-webkit-scrollbar-track { background: transparent; }

/* Luz de set: brilhos difusos parados (sem animação, para não pesar em PC simples) */
.luz {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(40% 35% at 18% 8%, rgba(170, 70, 30, 0.22), transparent 70%),
    radial-gradient(35% 30% at 82% 12%, rgba(40, 95, 110, 0.20), transparent 70%),
    radial-gradient(30% 25% at 50% 0%, rgba(255, 230, 180, 0.07), transparent 70%);
}
#app { position: relative; z-index: 1; min-height: 100vh; padding: 104px 32px 120px; }

/* ---------- navegação em cápsula ---------- */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(11,11,11,.97) 0%, rgba(11,11,11,.9) 62%, rgba(11,11,11,0) 100%);
  padding-bottom: 26px !important;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px 28px;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca img { height: 15px; width: auto; opacity: 0.95; }
.capsula {
  display: flex; gap: 4px; padding: 5px;
  background: var(--vidro); backdrop-filter: blur(var(--vidro-blur)); -webkit-backdrop-filter: blur(var(--vidro-blur));
  border: 1px solid var(--vidro-borda); border-radius: var(--pilula);
}
.capsula a {
  padding: 8px 18px; border-radius: var(--pilula); text-decoration: none;
  font-size: var(--t-s); color: var(--texto-2); transition: color var(--transicao), background var(--transicao);
}
.capsula a:hover { color: var(--texto); }
.capsula a.ativo { background: rgba(255, 255, 255, 0.12); color: var(--texto); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.topo-acoes { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: var(--pilula);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  font-size: var(--t-s); font-weight: 500; letter-spacing: 0.01em;
  transition: transform var(--transicao), background var(--transicao), box-shadow var(--transicao), opacity var(--transicao);
  text-decoration: none;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn-principal { background: var(--destaque); color: var(--destaque-texto); box-shadow: 0 0 0 0 var(--destaque-brilho); }
.btn-principal:hover:not(:disabled) { box-shadow: 0 0 28px 2px var(--destaque-brilho); }
/* vidro perolado com leve brilho */
.btn-perola {
  color: #15181b;
  background: linear-gradient(180deg, #F4F6F7 0%, #D6DCE0 55%, #C3CBD0 100%);
  border-color: rgba(255,255,255,.7);
  box-shadow: 0 0 22px rgba(220, 235, 245, 0.18), inset 0 1px 0 #fff;
}
.btn-perola:hover:not(:disabled) { box-shadow: 0 0 30px rgba(220, 235, 245, 0.32), inset 0 1px 0 #fff; }
.btn-fantasma { background: rgba(255,255,255,.04); border-color: var(--borda-forte); color: var(--texto); }
.btn-fantasma:hover:not(:disabled) { background: rgba(255,255,255,.09); }
.btn-p { height: 32px; padding: 0 14px; font-size: 12px; }
.btn-redondo {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: inline-grid; place-items: center; flex: none;
  background: rgba(255,255,255,.06); border: 1px solid var(--borda-forte); color: var(--texto);
}
.btn-redondo svg { display: block; }
.btn-redondo:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.btn-redondo.destaque { background: var(--destaque); color: var(--destaque-texto); border-color: transparent; }
.btn-redondo svg, .btn svg { width: 16px; height: 16px; }

/* ---------- tipografia ---------- */
.rotulo {
  font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--apoio); font-weight: 500;
}
.titulo-xxl { font-size: var(--t-xxl); line-height: 1.02; letter-spacing: -0.035em; font-weight: 500; margin: 0; }
.titulo-xl { font-size: var(--t-xl); line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; margin: 0; }
.titulo-l { font-size: var(--t-l); letter-spacing: -0.01em; font-weight: 500; margin: 0; }
em.serifa, .serifa { font-family: var(--serifa); font-style: italic; font-weight: 400; letter-spacing: -0.01em;
  font-size: 1.14em; line-height: 0.9; }  /* a Times tem as minúsculas mais baixas: sem isso parece menor que a Helvetica ao lado */
.cinza { color: var(--apagado); }
.apoio { color: var(--apoio); }
.brilho { text-shadow: 0 0 40px rgba(255,255,255,.25); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- superfícies ---------- */
.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 24px;
}
.cartao-2 { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; }
.vidro {
  background: var(--vidro); backdrop-filter: blur(var(--vidro-blur)); -webkit-backdrop-filter: blur(var(--vidro-blur));
  border: 1px solid var(--vidro-borda);
}
.secao { max-width: 1280px; margin: 0 auto; }
.secao + .secao { margin-top: 72px; }
.secao-cab { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 11px;
  border-radius: var(--pilula); font-size: 12px; color: var(--texto-2);
  background: rgba(255,255,255,.05); border: 1px solid var(--borda-forte); white-space: nowrap;
}
.chip img, .chip .bolinha { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; margin-left: -6px; }
.chip svg { width: 13px; height: 13px; }
.chip.ok { color: var(--ok); border-color: rgba(123, 211, 137, .3); }
.chip.aviso { color: var(--aviso); border-color: rgba(242, 169, 76, .3); }
.chip.clicavel { cursor: pointer; }
.chip.clicavel:hover { background: rgba(255,255,255,.1); color: var(--texto); }
.chip.ativo { background: rgba(255,255,255,.14); color: var(--texto); border-color: rgba(255,255,255,.3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* "Em breve": apagado e desfocado, como as funções futuras nas referências */
.em-breve { position: relative; }
.em-breve > .conteudo-breve { filter: blur(2.5px) saturate(.6); opacity: .42; pointer-events: none; user-select: none; }
.em-breve > .selo-breve {
  position: absolute; top: 14px; right: 14px; z-index: 2;
}

/* ---------- formulários ---------- */
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo > span { font-size: 12px; color: var(--apoio); }
.entrada, textarea.entrada, select.entrada {
  width: 100%; background: var(--fundo-2); border: 1px solid var(--borda-forte); border-radius: 12px;
  padding: 11px 14px; outline: none; transition: border-color var(--transicao);
}
.entrada:focus { border-color: rgba(255,255,255,.35); }
textarea.entrada { resize: vertical; min-height: 120px; line-height: 1.55; }
select.entrada { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, #888 50%), linear-gradient(135deg, #888 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

.segmentado {
  display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--pilula);
  background: var(--fundo-2); border: 1px solid var(--borda);
}
.segmentado button {
  height: 32px; padding: 0 14px; border: 0; border-radius: var(--pilula); background: transparent;
  color: var(--apoio); font-size: 12px; cursor: pointer; transition: all var(--transicao);
}
.segmentado button:hover { color: var(--texto); }
.segmentado button.ativo { background: rgba(255,255,255,.12); color: var(--texto); }

.chave { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--t-s); user-select: none; }
.chave input { display: none; }
.chave i {
  width: 36px; height: 20px; border-radius: 20px; background: #2b2b2b; position: relative; transition: background var(--transicao); flex: none;
}
.chave i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #9a9a9a;
  transition: transform var(--transicao), background var(--transicao);
}
.chave input:checked + i { background: var(--destaque); }
.chave input:checked + i::after { transform: translateX(16px); background: var(--destaque-texto); }
.chave.desligada { opacity: .45; cursor: not-allowed; }

/* ---------- HUB ---------- */
.hub-hero { text-align: center; padding: 56px 0 24px; }
.hub-hero .titulo-xxl { margin: 14px 0 0; }
/* uma frase só, menor e direta (pedido do Mak, 16/10/2026: sem "Boa tarde, Mak") */
.hub-hero .nsp-hero-titulo { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -0.03em; min-height: 1.1em; }
/* o cursor da frase que se escreve: pisca e some no fim */
.nsp-hero-cursor { display: inline-block; width: 2px; height: .9em; margin-left: 3px; vertical-align: -0.08em; background: currentColor;
  animation: nsp-cursor-pisca .9s steps(1) infinite; transition: opacity .5s ease; }
.nsp-hero-cursor.some { opacity: 0; }
@keyframes nsp-cursor-pisca { 50% { background: transparent; } }
.comando {
  max-width: 760px; margin: 40px auto 0; border-radius: 22px; padding: 14px 14px 12px 20px; text-align: left;
  box-shadow: var(--sombra);
}
.comando-linha { display: flex; align-items: flex-start; gap: 12px; }
.comando-linha .btn-redondo { margin-top: 4px; flex: none; }
/* frase curta em letra grande; o tamanho é ajustado pelo hub.js conforme o texto cresce */
.comando textarea { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: inherit; font-family: inherit;
  font-size: 30px; line-height: 1.3; letter-spacing: -0.01em; padding: 6px 0; resize: none; overflow-y: hidden; }
.comando textarea::placeholder { color: var(--apagado); }
.comando-dica { margin-top: 6px; font-size: 12px; color: var(--destaque); }
.comando-rodape { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 8px; flex-wrap: wrap; }
.comando.arrastando { border-color: var(--destaque); box-shadow: 0 0 0 4px var(--destaque-brilho); }

.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mosaico > [hidden] { display: none !important; }
.midia-cartao {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--raio-g); overflow: hidden; cursor: pointer;
  background: var(--superficie-2); border: 1px solid var(--borda);
  transition: transform var(--transicao), border-color var(--transicao);
}
.midia-cartao:hover { transform: translateY(-3px); border-color: var(--borda-forte); }
.midia-cartao img { width: 100%; height: 100%; object-fit: cover; }
.midia-cartao::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.82));
}
.midia-cartao .legenda-cartao { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; }
.midia-cartao .legenda-cartao b { display: block; font-weight: 500; font-size: 17px; letter-spacing: -0.01em; }
.midia-cartao .topo-cartao { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 1; display: flex; justify-content: space-between; }
.midia-cartao.vazio { display: grid; place-items: center; border-style: dashed; color: var(--apoio); }
.midia-cartao.vazio::after { display: none; }
.capa-vazia {
  width: 100%; height: 100%;
  background: radial-gradient(60% 80% at 30% 20%, rgba(255,255,255,.07), transparent), var(--superficie-2);
}

.nichos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.nicho {
  position: relative; min-height: 220px; border-radius: var(--raio-g); overflow: hidden; padding: 24px;
  display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--borda);
}
.nicho h3 { font-size: 40px; font-weight: 500; letter-spacing: -0.03em; margin: 0 0 6px; }
.nicho .rotulo-nicho { position: absolute; top: 20px; left: 24px; display: flex; gap: 8px; align-items: center; font-size: 13px; }
.nicho .rotulo-nicho::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; }

.numeros { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px; align-items: end; padding: 32px; }
.numeros .grande { font-size: 64px; letter-spacing: -0.04em; line-height: 1; }
.numeros .medio { font-size: 30px; letter-spacing: -0.02em; }

/* ---------- EDITOR ---------- */
.editor-cab { max-width: 1440px; margin: 0 auto 28px;  /* o editor.js (alinharCabecalho) ajusta à largura do conteúdo da etapa */ display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.nome-projeto {
  field-sizing: content; max-width: min(70vw, 900px);
  background: transparent; border: 0; outline: none; font-size: 28px; letter-spacing: -0.02em; font-weight: 500;
  padding: 2px 0; border-bottom: 1px solid transparent; min-width: 200px;
}
.nome-projeto:focus { border-bottom-color: var(--borda-forte); }
/* abas de etapa: ativa em branco, inativas apagadas e levemente desfocadas */
.etapas { display: flex; gap: 26px; align-items: baseline; }
.etapas button {
  background: none; border: 0; padding: 0; cursor: pointer; font-size: 20px; letter-spacing: -0.015em;
  color: rgba(255,255,255,.28); filter: blur(0.6px); transition: color var(--transicao), filter var(--transicao);
}
.etapas button:hover:not(:disabled) { color: rgba(255,255,255,.6); filter: none; }
.etapas button.ativo { color: var(--texto); filter: none; }
.etapas button:disabled { cursor: not-allowed; color: rgba(255,255,255,.14); }
.etapas small { font-size: 11px; color: var(--apagado); margin-right: 6px; filter: none; }

/* minmax(0,…): sem isso, uma linha comprida que não quebra (o texto de um bloco) estica a coluna */
.grade-entrada { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grade-entrada .largura-toda { grid-column: 1 / -1; }
.soltar {
  border: 1.5px dashed var(--borda-forte); border-radius: var(--raio); padding: 34px 20px; text-align: center; cursor: pointer;
  color: var(--apoio); transition: all var(--transicao);
}
.soltar:hover, .soltar.arrastando { border-color: var(--destaque); color: var(--texto); background: rgba(255,255,255,.02); }
.soltar b { color: var(--texto); font-weight: 500; }
.lista-audios { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.item-audio { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--superficie-2); border-radius: 12px; border: 1px solid var(--borda); }
.item-audio .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-s); }
.item-audio .ordem { color: var(--apagado); font-size: 12px; width: 22px; }
.icone-btn { background: none; border: 0; color: var(--apoio); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-grid; place-items: center; }
.icone-btn:hover { color: var(--texto); background: rgba(255,255,255,.06); }
.icone-btn svg { width: 15px; height: 15px; }

.opcoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.opcoes .campo { gap: 12px; }
.acao-final { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 8px; }

/* Revisão da transcrição */
.revisao { max-width: 980px; margin: 0 auto; }
.frase { display: grid; grid-template-columns: 92px 1fr 36px; gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.frase .tc { font-size: 12px; color: var(--apoio); padding-top: 10px; }
.frase textarea { min-height: 0; height: auto; background: transparent; border-color: transparent; padding: 8px 10px; font-size: 16px; resize: none; overflow: hidden; }
.frase textarea:hover { border-color: var(--borda); }
.frase textarea:focus { border-color: var(--borda-forte); background: var(--fundo-2); }
.frase.tocando .tc { color: var(--destaque); }
.traducao { padding: 0 11px 6px; font-size: 14px; color: var(--apoio); font-style: italic; line-height: 1.5; }
.traducao::before { content: "PT  "; font-style: normal; font-size: 10px; letter-spacing: .12em; color: var(--apagado); }
.frase.editada .tc::after { content: " · editada"; color: var(--aviso); }

/* Estúdio de cenas: painel | prévia, tira de cenas embaixo */
/* a coluna da direita tem a largura da prévia (no formato do vídeo): prévia e timeline alinham as bordas
   e o conjunto fica centralizado; no vertical/quadrado a coluna não fica estreita demais para a timeline */
.estudio {
  --alt-max: max(280px, calc(100vh - 380px));
  max-width: 1600px; margin: 0 auto; display: grid; gap: 16px; justify-content: center;
  grid-template-columns: 420px minmax(0, calc(var(--alt-max) * 16 / 9));
}
.estudio.vertical { grid-template-columns: 420px minmax(0, max(720px, calc(var(--alt-max) * 9 / 16))); }
.estudio.quadrado { grid-template-columns: 420px minmax(0, max(720px, var(--alt-max))); }
/* o painel tem a altura da coluna da direita (prévia + timeline) e rola por dentro:
   contain: size faz o conteúdo dele não esticar a linha da grade */
.painel { display: flex; flex-direction: column; gap: 16px; min-height: 520px; contain: size; overflow: auto; }
.painel .fala { font-size: 17px; line-height: 1.55; letter-spacing: -0.005em; }
.painel .fala mark { background: none; color: var(--destaque); }
.busca-linha { display: flex; gap: 8px; }
.busca-linha .entrada { padding: 9px 14px; border-radius: var(--pilula); }
.candidatos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.candidato { position: relative; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--superficie-3); border: 1.5px solid transparent; }
.candidato img { width: 100%; height: 100%; object-fit: cover; }
.candidato.escolhido { border-color: var(--destaque); }
.candidato .selo { position: absolute; left: 5px; bottom: 5px; font-size: 9.5px; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.65); color: #ddd; }
.candidato .selo-tipo { position: absolute; right: 5px; top: 5px; font-size: 9.5px; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.65); }
.candidato:hover { border-color: rgba(255,255,255,.4); }
.candidato.carregando::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5) url() center no-repeat; }
.ficha { font-size: 12px; color: var(--apoio); line-height: 1.6; }
.ficha b { color: var(--texto-2); font-weight: 500; }
/* selo de licença (pipeline/midia/licencas.py): verde = seguro, neutro = banco, âmbar = precisa de atenção */
.nsp-selo-licenca { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; line-height: 1.6;
  color: #9fd8a8; background: rgba(110, 200, 125, 0.12); border: 1px solid rgba(110, 200, 125, 0.22); }
.nsp-selo-licenca[data-cat="comercial"] { color: var(--texto-2); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); }
.nsp-selo-licenca:is([data-cat="terceiros"], [data-cat="restrita"], [data-cat="desconhecida"]) {
  color: #f0c27a; background: rgba(240, 170, 70, 0.12); border-color: rgba(240, 170, 70, 0.25); }

.palco { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.previa {
  /* a área da prévia JÁ É o formato do vídeo (sem barras pretas em volta): o maior tamanho que cabe
     na coluna e na altura da janela, nunca menor que 280 px de altura */
  --alt-max: max(280px, calc(100vh - 380px));
  position: relative; background: #000; border-radius: var(--raio-g); overflow: hidden; border: 1px solid var(--borda);
  width: 100%; margin: 0 auto; aspect-ratio: 16 / 9; max-height: var(--alt-max); max-width: calc(var(--alt-max) * 16 / 9);
}
.previa.vertical { aspect-ratio: 9 / 16; max-width: calc(var(--alt-max) * 9 / 16); }
.previa.quadrado { aspect-ratio: 1 / 1; max-width: var(--alt-max); }
.previa .quadro { position: absolute; inset: 0; overflow: hidden; background: #050505; }
.previa .quadro img, .previa .quadro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.previa .quadro img { will-change: transform; }
.previa .sub {
  position: absolute; left: 8%; right: 8%; bottom: 7%; text-align: center; font-weight: 700; font-size: clamp(13px, 2.2vw, 26px);
  font-family: Geist, Arial, sans-serif;  /* a mesma livre da legenda do MP4 (pipeline/legenda.py) */
  text-shadow: 0 0 3px #000, 0 2px 4px #000, 0 0 1px #000; pointer-events: none;
}
.previa .quadro.vertical .sub { bottom: 22%; }
.previa .vazio-previa { position: absolute; inset: 0; display: grid; place-items: center; color: var(--apagado); font-size: 13px; }
.controles { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.controles .btn-redondo { width: 34px; height: 34px; }
.timecode { font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--texto-2); }

/* régua + tira de frames, com zoom e agulha arrastável */
.trilha { position: relative; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px 12px; }
.zoom-tl { display: flex; align-items: center; gap: 6px; }
.zoom-tl input[type=range] { width: 120px; accent-color: var(--destaque); }
.trilha-rolagem { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
.trilha-rolagem::-webkit-scrollbar { height: 8px; }
.trilha-interna { position: relative; width: 100%; min-width: 100%; cursor: text; touch-action: none; user-select: none; }
.trilha-interna.arrastando { cursor: ew-resize; }
.regua { position: relative; height: 18px; margin-bottom: 6px; }
.regua span { position: absolute; top: 0; font-size: 10px; color: var(--apagado); transform: translateX(-50%); font-variant-numeric: tabular-nums; white-space: nowrap; }
.regua span:first-child { transform: none; }
.regua span::after { content: ""; position: absolute; left: 50%; top: 13px; width: 1px; height: 5px; background: var(--apagado); }
.regua span:first-child::after { left: 0; }
.faixa { position: relative; height: 56px; border-radius: 8px; overflow: hidden; background: #0d0d0d; contain: layout paint; }
/* um véu só escurece a faixa inteira (opacidade em cada um dos 100+ blocos pesava com a timeline toda à vista) */
.faixa::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.22); pointer-events: none; z-index: 2; }
.faixa .bloco {
  position: absolute; top: 0; bottom: 0; overflow: hidden; border-right: 1px solid #000;
  background-size: auto 100%; background-repeat: repeat-x; background-position: left center;
}
.faixa .bloco:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.faixa .bloco.sel { box-shadow: inset 0 0 0 2px var(--destaque); z-index: 3; }
.faixa .bloco.inicio-cena { border-left: 2px solid rgba(255,255,255,.6); }
.faixa .bloco.sem-midia { background: repeating-linear-gradient(45deg, #1a1a1a, #1a1a1a 6px, #141414 6px, #141414 12px); }
.rotulo-bloco {
  display: none; position: absolute; left: 6px; right: 6px; bottom: 4px; font-size: 10px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px #000, 0 0 2px #000; pointer-events: none;
}
.trilha-interna.aproximada .rotulo-bloco { display: block; }
.agulha { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--destaque); box-shadow: 0 0 8px var(--destaque-brilho); pointer-events: none; z-index: 4; left: 0; will-change: transform; }
.agulha::before { content: ""; position: absolute; top: -2px; left: -5px; width: 12px; height: 12px; border-radius: 3px 3px 50% 50%; background: var(--destaque); }

/* tira de cenas (pastas de shots) */
.cenas-tira { max-width: 1600px; margin: 16px auto 0; display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; }
.grupo-cena { flex: none; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px; }
.grupo-cena.sel { border-color: var(--borda-forte); }
.grupo-cena .cab-cena { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-2); margin: 0 2px 8px; }
.grupo-cena .cab-cena svg { width: 13px; height: 13px; color: var(--apoio); }
.grupo-cena .cortes { display: flex; gap: 6px; }
.miniatura-corte { position: relative; width: 116px; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--superficie-3); border: 1.5px solid transparent; }
.miniatura-corte img { width: 100%; height: 100%; object-fit: cover; }
.miniatura-corte.sel { border-color: var(--destaque); }
.miniatura-corte .tc-corte { position: absolute; left: 5px; bottom: 4px; font-size: 10px; text-shadow: 0 1px 3px #000; font-variant-numeric: tabular-nums; }
.miniatura-corte .alerta { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: var(--aviso); }

/* Saída */
.saida { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.saida video { width: 100%; border-radius: var(--raio); background: #000; display: block; }
.saida .formatos { display: flex; flex-direction: column; gap: 10px; }
.linha-saida { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio); }
.linha-saida .icone { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.05); color: var(--texto-2); flex: none; }
.linha-saida .icone svg { width: 18px; height: 18px; }
.linha-saida div.txt { flex: 1; min-width: 0; }
.linha-saida b { font-weight: 500; display: block; }
.linha-saida small { color: var(--apoio); font-size: 12px; }

/* ---------- tarefa em andamento (flutua sobre tudo) ---------- */
.progresso-flutuante {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 60;
  width: min(560px, calc(100vw - 32px)); padding: 16px 20px; border-radius: 20px; box-shadow: var(--sombra);
}
.progresso-flutuante .linha { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-s); margin-bottom: 10px; }
.barra { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--destaque); border-radius: 4px; transition: width 400ms ease; box-shadow: 0 0 12px var(--destaque-brilho); }

/* avisos */
.avisos { position: fixed; top: 84px; right: 24px; z-index: 70; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.aviso-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 999px;
  font-size: var(--t-s); line-height: 1.4; box-shadow: var(--sombra); animation: entra 220ms ease; }
.aviso-item .aviso-texto { flex: 1; min-width: 0; }
.aviso-ic { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: var(--apoio); }
.aviso-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aviso-item.ok .aviso-ic { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.aviso-item.erro .aviso-ic { background: color-mix(in srgb, var(--erro) 16%, transparent); color: var(--erro); }
.aviso-item.alerta .aviso-ic { background: color-mix(in srgb, var(--aviso) 16%, transparent); color: var(--aviso); }
/* texto longo (erros com explicação) não cabe em cápsula: cantos normais */
.aviso-item.longo { border-radius: 18px; align-items: flex-start; }
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } }

/* Configurações */
.config { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.config .linha-config { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--borda); }
.config .linha-config:last-child { border-bottom: 0; }
.amostras { display: flex; gap: 10px; }
.amostra { width: 42px; height: 42px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 0 0 3px var(--superficie); }
.amostra.ativo { border-color: var(--texto); }

/* Efeitos (prévia futura) */
.grade-efeitos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.efeito { aspect-ratio: 1; border-radius: var(--raio); background: var(--superficie-2); border: 1px solid var(--borda); display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; font-size: 12px; overflow: hidden; position: relative; }
.efeito .arte { position: absolute; inset: 14px 14px 36px; border-radius: 10px; }

.vazio-estado { text-align: center; padding: 80px 20px; color: var(--apoio); }

@media (max-width: 1100px) {
  .estudio, .estudio.vertical, .estudio.quadrado { grid-template-columns: 1fr; }
  .painel { max-height: none; contain: none; }
  .opcoes { grid-template-columns: 1fr 1fr; }
  .saida { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  #app { padding: 92px 16px 120px; }
  .topo { grid-template-columns: auto 1fr; padding: 14px 16px; }
  .topo .capsula { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 10px; }
  .topo-acoes .btn { display: none; }
  #app { padding-top: 140px; }
  .grade-entrada, .nichos { grid-template-columns: 1fr; }
  .opcoes { grid-template-columns: 1fr; }
  .numeros { grid-template-columns: 1fr 1fr; }
  .config .linha-config { grid-template-columns: 1fr; gap: 8px; }
  .etapas { gap: 16px; }
  .etapas button { font-size: 16px; }
}

/* ---------- Saída / exportação ---------- */
.exportar { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr); gap: 16px; align-items: start; }
.exportar-opcoes { display: flex; flex-direction: column; gap: 16px; }
.exportar-lateral { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
.secao-exp { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; }
.secao-exp h3 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.secao-exp .letra {
  width: 22px; height: 22px; border-radius: 7px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 600;
  color: var(--destaque); background: color-mix(in srgb, var(--destaque) 14%, transparent);
}
.secao-exp .dica { margin: -6px 0 0; font-size: 12px; }
.formatos-cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.formato-cartao {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px 14px; cursor: pointer;
  background: var(--superficie-2); border: 1.5px solid var(--borda); border-radius: var(--raio); color: var(--texto-2);
  transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
}
.formato-cartao:hover { border-color: var(--borda-forte); color: var(--texto); }
.formato-cartao .forma { display: block; border: 1.5px solid currentColor; border-radius: 4px; margin-bottom: 6px; }
.formato-cartao b { font-weight: 500; font-size: 14px; }
.formato-cartao small { font-size: 11.5px; color: var(--apoio); }
.formato-cartao.ativo { border-color: var(--destaque); color: var(--texto); background: color-mix(in srgb, var(--destaque) 7%, var(--superficie-2)); box-shadow: 0 0 22px -8px var(--destaque-brilho); }
.formato-cartao.ativo .forma { border-color: var(--destaque); background: color-mix(in srgb, var(--destaque) 35%, transparent); }
.linha-opcao { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--t-s); color: var(--texto-2); }
.previa-saida { background: #000; border-radius: var(--raio); overflow: hidden; display: grid; place-items: center; height: 300px; }
.previa-saida video { max-width: 100%; max-height: 300px; display: block; }
.previa-saida .moldura {
  height: 100%; max-width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; position: relative;
  display: grid; place-items: center;
}
.previa-saida .moldura.vertical { aspect-ratio: 9/16; }
.previa-saida .moldura.quadrado { aspect-ratio: 1; }
.previa-saida .moldura::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.previa-saida .moldura span { position: relative; z-index: 1; font-size: 13px; color: var(--texto-2); }
.btn-exportar {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 22px; border: 0; border-radius: var(--raio-g);
  background: var(--destaque); color: var(--destaque-texto); cursor: pointer; text-align: left;
  box-shadow: 0 10px 40px -12px var(--destaque-brilho); transition: transform var(--transicao), box-shadow var(--transicao);
}
.btn-exportar:hover:not(:disabled) { box-shadow: 0 10px 50px -6px var(--destaque-brilho); }
.btn-exportar:active:not(:disabled) { transform: scale(.985); }
.btn-exportar:disabled { opacity: .45; cursor: not-allowed; }
.btn-exportar svg { width: 26px; height: 26px; flex: none; }
.btn-exportar b { display: block; font-size: 17px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.btn-exportar small { display: block; font-size: 12.5px; opacity: .75; margin-top: 2px; }
.resultados .linha-saida { padding: 10px 12px; gap: 10px; }
.resultados .linha-saida[data-ver] { cursor: pointer; }
.resultados .linha-saida.vista { border-color: var(--borda-forte); background: var(--superficie-3); }
.chave .apoio { font-size: 12px; }

@media (max-width: 1100px) {
  .exportar { grid-template-columns: 1fr; }
  .exportar-lateral { position: static; }
}
@media (max-width: 760px) {
  .formatos-cartoes { grid-template-columns: 1fr; }
}
.secao-exp > .btn { align-self: flex-start; }

/* ---------- painel flutuante (janela de vidro) ----------
   Nome exclusivo de propósito: extensões do Chrome injetam estilo em ".modal" (travavam a altura em 50 px). */
.nsp-janela-fundo { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 24px; animation: entra 160ms ease; }
.nsp-janela {
  display: block; position: relative; width: 720px; max-width: 100%; box-sizing: border-box; max-height: calc(100vh - 48px); overflow: auto; border-radius: var(--raio-g); padding: 24px 26px;
  background: rgba(16,16,16,.82); box-shadow: var(--sombra);
}
.fonte-linha { display: flex; align-items: flex-start; gap: 14px; padding: 12px; border-radius: var(--raio); border: 1px solid var(--borda); background: rgba(255,255,255,.02); }
.fonte-linha + .fonte-linha { margin-top: 8px; }
.fonte-linha.foco { border-color: var(--destaque); }
.fonte-linha .txt { flex: 1; min-width: 0; }
.fonte-linha small { display: block; color: var(--apoio); font-size: 12.5px; margin-top: 4px; line-height: 1.5; }
.fonte-linha > .chave { margin-top: 8px; }
.fonte-nome { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fonte-nome b { font-weight: 500; margin-right: 4px; }
.fonte-nome .chip { height: 20px; font-size: 10.5px; padding: 0 8px; }
.fonte-icone {
  width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: var(--texto-2); background: var(--superficie-3); border: 1px solid var(--borda);
}
.fonte-config { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.fonte-config .entrada { padding: 7px 12px; border-radius: 999px; font-size: 13px; }
.em-breve-linha { opacity: .5; }
.fonte-pendente {
  display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--t-s); color: var(--texto-2); text-align: left;
}
.fonte-pendente i { width: 36px; height: 20px; border-radius: 20px; border: 1.5px dashed #3a3a3a; flex: none; }
.fonte-pendente span { color: var(--destaque); font-size: 11.5px; }
.fonte-pendente:hover { color: var(--texto); }

.gerador-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.gerar-ia .rotulo { display: inline-flex; align-items: center; gap: 6px; }
.gerar-ia .rotulo svg { width: 12px; height: 12px; color: var(--destaque); }

/* ---------- menu dos cartões e lixeira (nomes nsp-: extensões injetam CSS em nomes genéricos) ---------- */
.midia-cartao .topo-cartao { z-index: 2; }
.nsp-menu-cartao {
  width: 28px; height: 26px; border-radius: 999px; border: 1px solid var(--borda-forte); cursor: pointer;
  background: rgba(0,0,0,.45); color: var(--texto); font-size: 15px; line-height: 1; padding: 0 0 4px;
  opacity: 0; transition: opacity var(--transicao), background var(--transicao);
}
.midia-cartao:hover .nsp-menu-cartao, .nsp-menu-cartao:focus { opacity: 1; }
.nsp-menu-cartao:hover { background: rgba(0,0,0,.75); }
.nsp-menu {
  position: absolute; top: 46px; right: 14px; z-index: 5; min-width: 210px; padding: 6px; border-radius: 14px;
  display: flex; flex-direction: column; box-shadow: var(--sombra);
}
.nsp-menu button {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 9px; background: none;
  color: var(--texto); font-size: 13px; text-align: left; cursor: pointer;
}
.nsp-menu button:hover { background: rgba(255,255,255,.08); }
.nsp-menu button svg { width: 15px; height: 15px; color: var(--apoio); }
.nsp-perigo, .nsp-menu button.nsp-perigo, .nsp-menu button.nsp-perigo svg { color: var(--erro); }
.nsp-lixeira { display: flex; flex-direction: column; gap: 8px; }
.nsp-lixeira-item {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--raio);
  background: var(--superficie); border: 1px solid var(--borda);
}
.nsp-lixeira-item img, .nsp-lixeira-item .capa-vazia { width: 84px; height: 50px; border-radius: 8px; object-fit: cover; flex: none; opacity: .6; }
.nsp-lixeira-item .txt { flex: 1; min-width: 0; }
.nsp-lixeira-item b { font-weight: 500; display: block; }
.nsp-lixeira-item small { color: var(--apoio); font-size: 12px; }

/* botão e menu do perfil */
.nsp-perfil { position: relative; }
.nsp-avatar {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-weight: 600; font-size: 14px;
  color: var(--texto); background: linear-gradient(135deg, #3a3a3a, #1c1c1c); border: 1px solid var(--borda-forte);
  transition: border-color var(--transicao);
}
.nsp-avatar:hover { border-color: rgba(255,255,255,.35); }
.nsp-menu-perfil { top: 50px; right: 0; min-width: 230px; }
.nsp-menu-cab { padding: 10px 12px 10px; border-bottom: 1px solid var(--borda); margin-bottom: 4px; }
.nsp-menu-cab b { display: block; font-weight: 500; font-size: 14px; }
.nsp-menu-cab small { color: var(--apoio); font-size: 12px; }
.nsp-contagem { margin-left: auto; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--texto-2); }

/* "Conectar outra" no painel de fontes */
.nsp-tipos-conexao { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nsp-tipos-conexao button {
  text-align: left; padding: 12px 14px; border-radius: var(--raio); cursor: pointer; color: var(--texto);
  background: rgba(255,255,255,.03); border: 1px solid var(--borda); transition: border-color var(--transicao), background var(--transicao);
}
.nsp-tipos-conexao button:hover { border-color: var(--borda-forte); }
.nsp-tipos-conexao button.ativo { border-color: var(--destaque); background: color-mix(in srgb, var(--destaque) 6%, transparent); }
.nsp-tipos-conexao b { display: block; font-weight: 500; font-size: 13.5px; }
.nsp-tipos-conexao small { display: block; color: var(--apoio); font-size: 11.5px; margin-top: 4px; line-height: 1.45; }
.nsp-form-conexao { margin-top: 10px; padding: 14px; border-radius: var(--raio); border: 1px solid var(--borda); background: rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 10px; }
.nsp-form-conexao .fonte-config { margin-top: 0; }
.dica-form { font-size: 12px; margin: 0; line-height: 1.5; }
.nsp-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nsp-campos .entrada { padding: 8px 12px; font-size: 13px; }
.nsp-radio { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; color: var(--texto-2); cursor: pointer; }
.nsp-resultados { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto; }
.nsp-resultado { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.03); }
.nsp-resultado img, .nsp-resultado .capa-vazia { width: 72px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; }
.nsp-resultado .txt { flex: 1; min-width: 0; }
.nsp-resultado b { font-weight: 500; font-size: 13px; }
.nsp-resultado small { display: block; color: var(--apoio); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .nsp-tipos-conexao, .nsp-campos { grid-template-columns: 1fr; } }

.fonte-linha.nsp-filho { margin-left: 28px; padding: 9px 12px; }
.fonte-linha.nsp-filho .fonte-icone { width: 30px; height: 30px; font-size: 10px; }

.nsp-chip-erro { color: var(--erro); border-color: rgba(255,107,94,.35); }
.nsp-erro-chave { color: var(--erro) !important; }
.nsp-trocar-chave { font-size: 11.5px; display: inline-block; margin-top: 4px; color: var(--apoio); }

/* erro de validação: só aparece depois de uma tentativa que falhou e some ao digitar */
.nsp-erro-campo { display: block; color: var(--erro); font-size: 12px; margin-top: 6px; line-height: 1.45; animation: entra 160ms ease; }
.entrada.nsp-campo-erro { border-color: rgba(255,107,94,.6); }
.linha-config > div:last-child:has(> .nsp-erro-campo) { flex-wrap: wrap; }
.linha-config > div:last-child > .nsp-erro-campo { flex-basis: 100%; margin-top: 0; }
.linha-config > div:last-child:has(> .nsp-erro-campo) > .entrada { flex: 1 1 200px; width: auto; min-width: 0; }

/* status de uma chave: texto discreto, não parece botão */
.nsp-status { font-size: 12px; color: var(--apagado); white-space: nowrap; padding: 0 4px; }
.nsp-status.ok { color: var(--ok); }

/* gerar roteiro com IA (no card do Roteiro) */
.nsp-gerar-roteiro { margin-bottom: 12px; padding: 14px; border-radius: var(--raio); border: 1px solid var(--borda); background: rgba(0,0,0,.25); }
.nsp-gerar-roteiro .segmentado button { padding: 0 11px; }

/* escolher a voz: bolinha de cor por voz, busca e play em cada linha */
.nsp-voz { position: relative; flex: 1; min-width: 0; }
.nsp-voz-gatilho {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  padding: 7px 12px; font-size: 13px; color: var(--texto);
}
.nsp-voz-gatilho:hover { border-color: var(--borda-forte); }
.nsp-voz-seta { margin-left: auto; display: grid; color: var(--apoio); }
.nsp-voz-seta svg { width: 15px; height: 15px; }
.nsp-bolinha-voz { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 1px 1px rgba(255,255,255,.25); }
.nsp-voz-txt { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.nsp-voz-txt b { font-weight: 500; white-space: nowrap; }
.nsp-voz-txt small { color: var(--apoio); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsp-voz-menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  padding: 8px; border-radius: var(--raio); box-shadow: var(--sombra);
}
.nsp-voz-busca { padding: 7px 12px; font-size: 13px; margin-bottom: 6px; background: rgba(0,0,0,.35); }
.nsp-voz-lista { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow: auto; }
.nsp-voz-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px;
  cursor: pointer; font-size: 13px;
}
.nsp-voz-item:hover, .nsp-voz-item.alvo { background: rgba(255,255,255,.07); }
.nsp-voz-item.ativo { background: rgba(255,255,255,.1); }
.nsp-voz-item .icone-btn { margin-left: auto; flex: none; }
.nsp-voz-item .nsp-voz-txt { flex: 1; }

/* blocos da narração de IA: cada pedaço de ~1 min, com play para conferir */
.nsp-guardadas { margin-top: 12px; }
.nsp-guardadas > summary { cursor: pointer; font-size: 12px; padding: 4px 0; }
.nsp-guardadas .lista-audios { margin-top: 6px; }
.nsp-blocos { margin-top: 14px; padding: 12px 14px; border-radius: var(--raio); border: 1px solid var(--borda); background: rgba(0,0,0,.25); }
.nsp-blocos-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.nsp-blocos-cab b { font-weight: 500; font-size: var(--t-s); }
.nsp-blocos-cab small { display: block; font-size: 11.5px; margin-top: 2px; }
.nsp-blocos-lista { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; }
.nsp-bloco { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.03); }
.nsp-bloco .ordem { color: var(--apagado); font-size: 11.5px; width: 20px; flex: none; }
.nsp-bloco .txt {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--texto-2); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nsp-bloco .txt.inteiro { white-space: normal; overflow: visible; line-height: 1.5; padding: 2px 0; }
.nsp-bloco .num { font-size: 11.5px; flex: none; }
.nsp-bloco.pendente { opacity: .5; }
.nsp-bloco.pendente .txt { cursor: default; }
.nsp-bloco-ponto { width: 15px; height: 15px; margin: 4px; border-radius: 50%; flex: none; border: 1.5px dashed var(--apagado); }
.nsp-bloco-ponto.girando { border-style: solid; border-color: var(--destaque) transparent var(--destaque) transparent; animation: nsp-gira 900ms linear infinite; }
@keyframes nsp-gira { to { transform: rotate(360deg); } }
.nsp-blocos-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.nsp-blocos-rodape .apoio { font-size: 11.5px; }

/* janela de erro de tarefa: fica até a pessoa fechar */
.nsp-janela-fundo.nsp-erro { z-index: 90; }
.nsp-janela-erro { width: 520px; }
.nsp-erro-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.nsp-erro-icone {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-weight: 700; color: var(--erro); background: rgba(255,107,94,.12); border: 1px solid rgba(255,107,94,.35);
}
.nsp-erro-msg { margin: 0 0 12px; line-height: 1.55; color: var(--texto); }
.nsp-erro-dica { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04);
  border: 1px solid var(--borda); font-size: 13px; line-height: 1.6; color: var(--texto-2); }
.nsp-erro-dica b { color: var(--texto); font-weight: 500; }

/* ---------- seletor rápido de projetos (nome do projeto no Editor ou Ctrl+K) ---------- */
.nsp-titulo-projeto { display: flex; align-items: center; gap: 6px; }
.nsp-titulo-projeto .icone-btn { color: var(--apoio); }
.nsp-seletor-fundo { position: fixed; inset: 0; z-index: 90; }
.nsp-seletor {
  position: fixed; z-index: 91; width: min(460px, calc(100vw - 32px)); padding: 8px;
  border-radius: var(--raio); box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.nsp-seletor.central { left: 50%; top: 14vh; transform: translateX(-50%); }
.nsp-seletor-busca { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--borda); }
.nsp-seletor-busca svg { width: 16px; height: 16px; color: var(--apoio); flex: none; }
.nsp-seletor-busca input { flex: 1; background: transparent; border: 0; outline: none; color: inherit; font: inherit; font-size: 15px; }
.nsp-seletor-busca kbd { font: inherit; font-size: 11px; color: var(--apoio); border: 1px solid var(--borda); border-radius: 6px; padding: 1px 6px; }
.nsp-seletor-rotulo { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 10px 10px 4px; }
.nsp-seletor-lista { max-height: min(52vh, 420px); overflow-y: auto; }
.nsp-seletor-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.nsp-seletor-item.marcado { background: rgba(255,255,255,.08); }
.nsp-seletor-item .capa {
  flex: none; width: 64px; aspect-ratio: 16 / 10; border-radius: 8px; border: 1px solid var(--borda);
  background: var(--superficie-2) center / cover no-repeat;
}
.nsp-seletor-item .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nsp-seletor-item b { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsp-seletor-item small { font-size: 12px; }
.nsp-seletor-vazio { padding: 18px 10px; font-size: 13px; }
.nsp-seletor-rodape { display: flex; justify-content: space-between; gap: 8px; padding: 10px 4px 2px; margin-top: 6px; border-top: 1px solid var(--borda); }

/* ---------- confirmação da montagem: tipo de vídeo e IA da decupagem ---------- */
.nsp-janela-montar { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; }
.nsp-tipos-video { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.nsp-tipos-video button {
  display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--borda); color: inherit; font: inherit;
}
.nsp-tipos-video button:hover { background: rgba(255,255,255,.07); }
.nsp-tipos-video button.ativo { border-color: var(--destaque); background: rgba(255,255,255,.08); }
.nsp-tipos-video b { font-weight: 500; font-size: 13px; }
.nsp-tipos-video small { color: var(--apoio); font-size: 11.5px; line-height: 1.35; }
.nsp-resumo-montagem { margin-top: 12px; font-size: 12.5px; line-height: 1.6; }
.nsp-intencao { margin-top: 10px; font-size: 13.5px; line-height: 1.45; }
.nsp-intencao .rotulo { display: block; margin-bottom: 3px; }
.nsp-entidade { height: 22px; font-size: 11px; }

/* ---------- GCs: camada na prévia (espelha o ASS do render), trilha e edição ---------- */
.previa .quadro { container-type: size; --u: calc(min(100cqw, 100cqh) / 1080); }
.nsp-gc-camada { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.nsp-gc { position: absolute; width: 0; height: 0; }
.nsp-gc .l { position: absolute; left: 0; white-space: nowrap; line-height: 1.15; text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0,0,0,.45); }
.nsp-gc.centrado .l { transform: translateX(-50%); text-align: center; }
.nsp-gc .l.caixa { text-shadow: none; transform-origin: left top; }
.nsp-gc .fundo { position: absolute; background: rgba(0,0,0,.65); border-radius: calc(var(--u) * 24); z-index: -1; }
.nsp-gc .traco { background: rgba(255,255,255,.7); width: 0; }
.faixa-gc { position: relative; height: 24px; margin-top: 6px; contain: layout paint; }
.gc-bloco {
  position: absolute; top: 0; height: 22px; border-radius: 6px; cursor: grab; overflow: hidden;
  background: rgba(245,197,66,.18); border: 1px solid rgba(245,197,66,.55); color: #f5d77a;
  font-size: 10.5px; line-height: 20px; padding: 0 6px; white-space: nowrap; text-overflow: ellipsis; touch-action: none;
}
.gc-bloco:hover { background: rgba(245,197,66,.3); }
.gc-bloco.desligado { background: transparent; border-style: dashed; border-color: rgba(255,255,255,.18); color: var(--apoio); }
.nsp-gc-controles { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 4px; }  /* + o gap de 12 da linha = 16 entre os grupos */
.nsp-gc-controles select { width: auto; padding: 6px 30px 6px 12px; border-radius: 999px; font-size: 12.5px; }
.nsp-janela-gc { width: min(620px, calc(100vw - 32px)); }

/* opções de mídia do corte: recolhidas até pedir (poupa decodificar 12 miniaturas a cada corte) */
.nsp-ver-opcoes { display: flex; align-items: center; gap: 6px; background: none; border: 0; color: inherit; cursor: pointer; padding: 4px 0; }
.nsp-ver-opcoes svg { width: 14px; height: 14px; color: var(--apoio); transition: transform var(--transicao); }
.nsp-ver-opcoes[aria-expanded="true"] svg { transform: rotate(180deg); }
.nsp-ver-opcoes:hover .rotulo { color: var(--texto); }

/* curadoria visual: o que a IA disse sobre a escolha do corte */
.nsp-curadoria { font-size: 12.5px; line-height: 1.45; padding: 8px 10px; border-radius: 10px; margin-bottom: 8px;
  background: rgba(120,200,140,.08); border: 1px solid rgba(120,200,140,.25); color: #bfe3c8; }
.nsp-curadoria.nenhuma { background: rgba(245,197,66,.08); border-color: rgba(245,197,66,.35); color: #f5d77a; }
.nsp-curadoria .apoio { display: block; font-size: 11.5px; margin-top: 2px; }
.candidato .selo-ia { position: absolute; top: 5px; left: 5px; font-size: 10px; padding: 1px 6px; border-radius: 999px;
  background: rgba(20,60,30,.85); color: #bfe3c8; }
.faixa .bloco.sem-boa::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--destaque); z-index: 3; }

/* enquadramento: a foto inteira, a janela do que aparece no vídeo e o ponto de foco (clicável) */
.nsp-enq-caixa { position: relative; height: 150px; border-radius: 10px; background: #050505; overflow: hidden; cursor: crosshair; }
.nsp-enq-caixa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .45; pointer-events: none; }
.nsp-enq-janela { position: absolute; border: 1.5px solid var(--destaque); border-radius: 4px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); pointer-events: none; }
.nsp-enq-ponto { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--destaque); box-shadow: 0 0 0 3px rgba(0,0,0,.5); pointer-events: none; }

/* Hub: aviso de tela cheia ao arrastar a narração */
.nsp-soltar-hub { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(0,0,0,.55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: entra 140ms ease; }
.nsp-soltar-hub > div { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 56px; border-radius: 24px;
  border: 2px dashed var(--destaque); background: rgba(0,0,0,.4); pointer-events: none; }
.nsp-soltar-hub svg { width: 34px; height: 34px; color: var(--destaque); }
.nsp-soltar-hub b { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.nsp-soltar-hub span { color: var(--texto-2); font-size: 13px; }

/* Cenas antes de montar: tira de filme "fantasma", etapas da montagem e o botão de destaque */
.nsp-cenas-vazia { max-width: 1080px; margin: 28px auto 0; padding: 36px 40px 32px; border-radius: var(--raio-g);
  background: var(--superficie); border: 1px solid var(--borda); display: flex; flex-direction: column; gap: 28px; overflow: hidden; }
.nsp-cv-cab { display: flex; flex-direction: column; gap: 8px; }
.nsp-cv-cab .apoio { font-size: 14px; }
.nsp-cv-tira { display: flex; gap: 10px; margin: 0 -40px; padding: 0 40px; overflow: hidden;
  mask-image: linear-gradient(90deg, #000 70%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); }
.nsp-fantasma { flex: none; width: 168px; display: flex; flex-direction: column; gap: 8px; opacity: 0; animation: nsp-surge 500ms ease forwards; animation-delay: var(--atraso); }
.nsp-fantasma .quadro-f { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; border: 1px dashed rgba(255,255,255,.14);
  background: linear-gradient(110deg, rgba(255,255,255,.025) 30%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.025) 70%) 0 0 / 300% 100%;
  animation: nsp-brilho 2.8s ease-in-out infinite; }
.nsp-fantasma .quadro-f span { position: absolute; left: 8px; top: 6px; font-size: 10px; color: var(--apagado); }
.nsp-fantasma p { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--apoio); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nsp-cv-mais { flex: none; align-self: flex-start; display: grid; place-items: center; width: 64px; aspect-ratio: 9 / 10; font-size: 12px; }
@keyframes nsp-surge { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes nsp-brilho { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.nsp-cv-etapas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--borda); border-radius: 14px; overflow: hidden; border: 1px solid var(--borda); }
.nsp-cv-etapa { background: var(--superficie-2); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.nsp-cv-etapa .ic svg { width: 18px; height: 18px; color: var(--destaque); }
.nsp-cv-etapa b { font-weight: 500; font-size: 14px; }
.nsp-cv-etapa b small { color: var(--apagado); font-size: 11px; margin-right: 2px; }
.nsp-cv-etapa > span:last-child { font-size: 12px; color: var(--apoio); line-height: 1.45; }
.nsp-cv-rodape { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.nsp-cv-numeros { display: flex; gap: 28px; }
.nsp-cv-numeros div { display: flex; flex-direction: column; gap: 2px; }
.nsp-cv-numeros b { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.nsp-cv-numeros span { font-size: 12px; color: var(--apoio); }
.nsp-montar-destaque { padding: 14px 24px; font-size: 15px; box-shadow: 0 10px 30px -8px var(--destaque-brilho); }
.nsp-montar-destaque svg { width: 16px; height: 16px; }
@media (max-width: 760px) { .nsp-cv-etapas { grid-template-columns: 1fr 1fr; } .nsp-cenas-vazia { padding: 28px 20px; } .nsp-cv-tira { margin: 0 -20px; padding: 0 20px; } }

/* janela de montagem: origens além dos bancos (YouTube, IA) */
.nsp-origens { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.nsp-origem { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borda); background: rgba(255,255,255,.02); }
.nsp-origem > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.nsp-origem b { font-weight: 500; font-size: 13.5px; }
.nsp-origem small { color: var(--apoio); font-size: 12px; line-height: 1.5; }
.nsp-origem small input { width: 64px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 12px; display: inline-block; }
.nsp-origem.indisponivel { opacity: .55; }

/* Configurações: se e quando o app usou cada conexão */
.nsp-uso { color: #9fd3ad; }
.nsp-uso.nunca { color: var(--aviso, #f5c542); }

.aviso-item .aviso-acao { flex: none; background: rgba(255,255,255,.12); border: 0; color: inherit; font: inherit;
  font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.aviso-item .aviso-acao:hover { background: rgba(255,255,255,.22); }

/* Oficina: bordas arrastáveis entre cortes, faixa de música, ações do corte e janela de som */
.faixa .borda { position: absolute; top: 0; bottom: 0; width: 10px; margin-left: -5px; z-index: 4; cursor: ew-resize; touch-action: none; }
.faixa .borda::after { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: rgba(255,255,255,0); transition: background var(--transicao); }
.faixa .borda:hover::after, .faixa .borda.ativa::after { background: var(--destaque); }
.faixa-musica { margin-top: 6px; height: 22px; border-radius: 6px; padding: 0 8px; display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 10.5px; color: #9fd3ad; background: rgba(120,200,140,.1); border: 1px solid rgba(120,200,140,.3); white-space: nowrap; overflow: hidden; }
.faixa-musica svg { width: 12px; height: 12px; flex: none; }
.faixa-musica:hover { background: rgba(120,200,140,.18); }
.nsp-cab-corte { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nsp-acoes-corte { display: flex; gap: 4px; }
.nsp-trecho input[type=range] { width: 100%; accent-color: var(--destaque); }
.nsp-janela-som { width: min(520px, calc(100vw - 32px)); }
.nsp-som-linha { display: grid; grid-template-columns: 80px 1fr 60px; gap: 10px; align-items: center; margin-bottom: 10px; font-size: 13px; }
.nsp-som-linha input[type=range] { accent-color: var(--destaque); }
.nsp-som-linha .num { text-align: right; color: var(--texto-2); }

/* mídia inteira sobre ela mesma desfocada (foto em pé num 16:9, por exemplo) */
.previa .quadro .nsp-moldura { position: absolute; inset: 0; will-change: transform; }
.previa .quadro .nsp-moldura .desf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(28px) brightness(.72) saturate(.85); transform: scale(1.15); }
.previa .quadro .nsp-moldura .frente { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* quadro (imagem de IA, pipeline/enquadramento.py em_quadro): 72% da largura, até 80% da altura, sombra e fio claro */
.previa .quadro .nsp-moldura.nsp-moldura-quadro .frente { inset: 10% 14%; width: 72%; height: 80%; margin: auto;
  object-fit: contain; filter: drop-shadow(0 0.6vw 1.2vw rgba(0, 0, 0, .55)); }
.nsp-moldura-escolha { display: flex; flex-direction: column; gap: 6px; }
.nsp-moldura-escolha .segmentado { align-self: flex-start; }

/* legenda da prévia: espelha pipeline/legenda.py (tamanho em --u, a mesma conta do ASS) */
.previa .sub { left: 6%; right: 6%; font-size: calc(var(--u) * var(--tam-leg, 54) * 0.86); line-height: 1.25; }
.previa .sub.pos-baixo { bottom: 7%; top: auto; transform: none; }
.previa .sub.pos-baixo.vert { bottom: 22%; }
.previa .sub.pos-meio { top: 50%; bottom: auto; transform: translateY(-50%); }
.previa .sub.pos-alto { top: 8%; bottom: auto; transform: none; }
.previa .sub .ativa, .nsp-estilos-leg .ativa { color: var(--cor-destaque, #F5C542); }
.previa .sub.leg-caixa { text-shadow: none; }
.previa .sub.leg-caixa .linha { background: rgba(0,0,0,.56); padding: 0.12em 0.35em; border-radius: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.previa .sub.leg-palavra, .previa .sub.leg-shorts { text-shadow: 0 0 4px #000, 0 0 2px #000, 0 2px 6px #000, 0 0 1px #000; }
.previa .sub.leg-shorts { font-weight: 800; letter-spacing: 0.01em; }
.previa .sub.leg-cinema { font-family: "Archivo", Arial, sans-serif; font-weight: 600; text-shadow: 0 3px 14px rgba(0,0,0,.9), 0 0 2px #000; }
.previa .sub .apagada, .nsp-estilos-leg .apagada { opacity: .5; }
.nsp-leg-amostra.leg-cinema { font-family: "Archivo", Arial, sans-serif; font-weight: 600; }
/* legendas da fase 5 (pipeline/legenda.py) */
.previa .sub .oculta { opacity: 0; }
.previa .sub .entra { animation: leg-entra .16s ease-out; }
@keyframes leg-entra { from { opacity: 0; } }
.previa .sub .enfase, .nsp-leg-amostra .enfase { font-family: "EB Garamond", "Times New Roman", serif; font-style: italic; font-weight: 400;
  font-size: 1.32em; color: var(--cor-destaque, #F5C542); }
.previa .sub.leg-batida { font-weight: 900; letter-spacing: -.01em; text-shadow: 0 0 6px #000, 0 3px 12px rgba(0,0,0,.8); }
.previa .sub.leg-neon { text-shadow: 0 0 4px var(--cor-destaque, #F5C542), 0 0 12px var(--cor-destaque, #F5C542), 0 0 2px #000; }
.nsp-leg-amostra.leg-batida { font-size: 20px; font-weight: 900; }
.nsp-leg-amostra.leg-neon { text-shadow: 0 0 4px #F5C542, 0 0 10px #F5C542; }
/* janela de escolha */
.nsp-janela-legenda { width: min(640px, calc(100vw - 32px)); }
.nsp-leg-formatos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.nsp-leg-formatos .apoio { font-size: 12px; }
.nsp-estilos-leg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.nsp-estilos-leg button { display: flex; flex-direction: column; gap: 4px; padding: 12px; text-align: left; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--borda); color: inherit; font: inherit; }
.nsp-estilos-leg button.ativo { border-color: var(--destaque); background: rgba(255,255,255,.07); }
.nsp-leg-amostra { display: flex; align-items: center; justify-content: center; height: 54px; border-radius: 8px; margin-bottom: 4px;
  background: linear-gradient(135deg, #4a5a6a, #2b3440); font-family: Arial, sans-serif; font-weight: 700; font-size: 14px; color: #fff;
  text-shadow: 0 0 3px #000, 0 1px 3px #000; }
.nsp-leg-amostra.leg-caixa { background: linear-gradient(135deg, #c9d4dd, #8fa0ad); text-shadow: none; }
.nsp-leg-amostra.leg-caixa > span { background: rgba(0,0,0,.56); padding: 2px 6px; border-radius: 3px; }
.nsp-leg-amostra.leg-shorts { font-size: 18px; font-weight: 800; }
.nsp-estilos-leg b { font-weight: 500; font-size: 13.5px; }
.nsp-estilos-leg small { color: var(--apoio); font-size: 11.5px; }
.nsp-cores { display: flex; gap: 8px; }
.nsp-cores button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.nsp-cores button.ativo { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.6); }

/* ---------- Hub: canais e nichos ---------- */
.nsp-canais-config { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px;
  border-radius: var(--raio-g); border: 1px solid var(--borda); background: linear-gradient(120deg, #1a1410, #161616 55%); }
.nsp-canais-config h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; margin: 6px 0 8px; }
.nsp-canais-config { margin-bottom: 14px; }
.nsp-canais-config p { margin: 0; max-width: 560px; color: var(--texto-2); font-size: 13.5px; line-height: 1.55; }
.nsp-canais-vazio { display: flex; flex-direction: column; gap: 6px; padding: 28px; border-radius: var(--raio-g); border: 1px dashed var(--borda-forte); color: var(--apoio); font-size: 13px; }
.nsp-canais-vazio b { color: var(--texto); font-weight: 500; font-size: 15px; }
.nsp-alerta-conta { margin-top: 12px; padding: 12px 16px; border-radius: var(--raio); border: 1px solid rgba(242,184,75,.35); color: var(--aviso); font-size: 13px; display: flex; gap: 12px; align-items: center; }
.nsp-nicho-grupo { position: relative; margin-bottom: 22px; padding: 16px; border-radius: var(--raio-g); border: 1px solid var(--borda);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor-nicho) 9%, #141414), #121212 70%); transition: border-color var(--transicao); }
.nsp-nicho-grupo.alvo { border-color: var(--cor-nicho); }
.nsp-nicho-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 15px; }
.nsp-nicho-cab b { font-weight: 500; }
.nsp-nicho-cab .ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--cor-nicho); box-shadow: 0 0 12px var(--cor-nicho); }
.nsp-nicho-cab .nsp-menu-cartao { margin-left: auto; opacity: .6; }
.nsp-nicho-grupo:hover .nsp-menu-cartao { opacity: 1; }
.nsp-nicho-grupo .nsp-menu { top: 44px; }
.nsp-menu .nsp-cores { flex-direction: row; }
.nsp-menu .nsp-cores button { padding: 0; width: 20px; height: 20px; border-radius: 50%; flex: none; }
.nsp-canais-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.nsp-nicho-vazio { padding: 22px; border-radius: var(--raio); border: 1px dashed var(--borda-forte); color: var(--apagado); font-size: 12.5px; text-align: center; }
.nsp-canal-cartao { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--raio); background: #161616;
  border: 1px solid var(--borda); cursor: pointer; transition: border-color var(--transicao), transform var(--transicao); }
.nsp-canal-cartao:hover { border-color: var(--borda-forte); transform: translateY(-1px); }
.nsp-canal-cartao.arrastando { opacity: .4; }
.nsp-canal-topo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nsp-canal-cartao .txt, .nsp-canal-cab .txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nsp-canal-cartao .txt b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsp-canal-cartao .txt small { color: var(--apoio); font-size: 12px; }
.nsp-canal-avatar { border-radius: 50%; object-fit: cover; flex: none; background: #222; }
.nsp-canal-avatar.vazio { display: grid; place-items: center; font-weight: 500; color: var(--texto-2); }
.nsp-canal-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nsp-canal-numeros > div { display: flex; flex-direction: column; gap: 2px; }
.nsp-canal-numeros b { font-weight: 500; font-size: 17px; }
.nsp-canal-numeros b i { color: var(--apagado); font-style: normal; margin: 0 2px; }
.nsp-canal-numeros span { color: var(--apoio); font-size: 11.5px; }
.nsp-canal-numeros.grande { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 24px 0; padding: 20px; border-radius: var(--raio-g); background: #161616; border: 1px solid var(--borda); }
.nsp-canal-numeros.grande b { font-size: 26px; letter-spacing: -0.02em; }
.nsp-ypp-mini { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--apoio); }
.nsp-ypp-mini .barra, .nsp-ypp .barra { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.nsp-ypp-mini .barra i, .nsp-ypp .barra i { display: block; height: 100%; border-radius: 4px; background: var(--destaque); }
/* página do canal */
.nsp-voltar { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; margin-bottom: 14px; }
.nsp-voltar svg { width: 14px; height: 14px; }
.nsp-canal-cab { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nsp-canal-cab .acoes { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.nsp-ypp { padding: 22px; border-radius: var(--raio-g); background: #161616; border: 1px solid var(--borda); }
.nsp-ypp-niveis { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.nsp-ypp-nivel { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--raio); background: #1C1C1C; border: 1px solid var(--borda); }
.nsp-ypp-nivel.ok { border-color: rgba(120,200,120,.4); }
.nsp-ypp-titulo { display: flex; justify-content: space-between; align-items: baseline; }
.nsp-ypp-titulo b { font-weight: 500; font-size: 15px; }
.nsp-ypp-titulo span { color: var(--destaque); font-size: 15px; }
.nsp-ypp-criterio { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 12.5px; }
.nsp-ypp-criterio .barra, .nsp-ypp-criterio small { grid-column: 1 / -1; }
.nsp-ypp-criterio small { font-size: 11.5px; }
.nsp-ypp-criterio b { font-weight: 500; }
.nsp-ypp-criterio em { font-style: normal; font-size: 10.5px; color: var(--destaque); border: 1px solid currentColor; border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.nsp-ypp-criterio:not(.melhor) .barra i { background: rgba(255,255,255,.35); }
.nsp-ypp-ou { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--apagado); margin-top: 4px; }
.nsp-videos-canal { display: flex; flex-direction: column; gap: 4px; }
.nsp-video-linha { display: grid; grid-template-columns: 112px 1fr 80px 80px 70px; gap: 14px; align-items: center; padding: 8px; border-radius: 12px;
  color: inherit; text-decoration: none; transition: background var(--transicao); }
.nsp-video-linha:hover { background: rgba(255,255,255,.04); }
.nsp-video-linha .capa { position: relative; width: 112px; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #1c1c1c; }
.nsp-video-linha .capa img { width: 100%; height: 100%; object-fit: cover; }
.nsp-video-linha .capa i { position: absolute; right: 4px; bottom: 4px; font-style: normal; font-size: 10.5px; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.7); }
.nsp-video-linha .txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nsp-video-linha .txt b { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsp-video-linha .txt small { color: var(--apoio); font-size: 12px; }
.nsp-video-linha > .num { display: flex; flex-direction: column; text-align: right; font-size: 14px; }
.nsp-video-linha > .num small { color: var(--apagado); font-size: 10.5px; }
.nsp-v-views.acima { color: var(--destaque); }
.nsp-canal-rodape { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--borda); }
@media (max-width: 720px) {
  .nsp-video-linha { grid-template-columns: 96px 1fr 64px; }
  .nsp-video-linha > .num:nth-last-child(-n+2) { display: none; }
  .nsp-video-linha .capa { width: 96px; }
}
/* guia do Google */
.nsp-guia-google { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; }
.nsp-passos { margin: 0; padding: 0; list-style: none; counter-reset: passo; display: flex; flex-direction: column; gap: 10px; }
.nsp-passos li { counter-increment: passo; display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; font-size: 13px; line-height: 1.5; }
.nsp-passos li::before { content: counter(passo); grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; background: rgba(255,255,255,.08); color: var(--texto-2); }
.nsp-passos li b { font-weight: 500; }
.nsp-passos li span { color: var(--texto-2); }
.nsp-passos a, .nsp-soltar-json a { color: var(--destaque); }
.nsp-soltar-json { margin-top: 16px; display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: var(--raio); border: 1px dashed var(--borda-forte); transition: border-color var(--transicao), background var(--transicao); }
.nsp-soltar-json.alvo { border-color: var(--destaque); background: rgba(255,255,255,.04); }
.nsp-soltar-json svg { width: 22px; height: 22px; color: var(--apoio); flex: none; }
.nsp-soltar-json div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.nsp-soltar-json b { font-weight: 500; }
.nsp-soltar-json span { color: var(--apoio); font-size: 12px; }
.nsp-passos .nsp-subpassos { margin: 6px 0; padding-left: 18px; list-style: lower-alpha; display: flex; flex-direction: column; gap: 4px; }
.nsp-passos .nsp-subpassos li { display: list-item; counter-increment: none; font-size: 12.5px; }
.nsp-passos .nsp-subpassos li::before { content: none; }

/* JSON do Google Cloud aplicados (Hub) */
.nsp-credenciais { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.nsp-credencial { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: var(--raio);
  background: #161616; border: 1px solid var(--borda); min-width: 0; flex: 1 1 380px; max-width: 560px; }
.nsp-credencial .txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nsp-credencial .txt b { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsp-credencial .txt small { color: var(--apoio); font-size: 12px; }
.nsp-credencial .nsp-menu-cartao { opacity: .7; flex: none; }
.nsp-credencial .nsp-menu { top: 52px; }
.nsp-json-icone { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 600;
  color: var(--destaque); background: rgba(255,255,255,.05); border: 1px solid var(--borda); letter-spacing: .05em; }
.nsp-outro-json { flex: 0 0 auto; cursor: pointer; color: var(--texto-2); border-style: dashed; background: none; font: inherit; font-size: 13px; }
.nsp-outro-json:hover { color: var(--texto); border-color: var(--borda-forte); }
.nsp-outro-json svg { width: 16px; height: 16px; }
.nsp-outro-json span { display: flex; flex-direction: column; text-align: left; }
.nsp-outro-json small { color: var(--apagado); font-size: 11px; }
.nsp-dica-credencial { margin: 0 0 18px; font-size: 12px; color: var(--apoio); }
.nsp-dica-credencial a { color: var(--destaque); }

/* selo "Google · N chaves" e o cartão "+ Conectar canal" de cada nicho */
.nsp-selo-google { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--borda-forte); color: var(--texto-2); font: inherit; font-size: 12.5px; }
.nsp-selo-google:hover { color: var(--texto); border-color: rgba(255,255,255,.3); }
.nsp-selo-google i { width: 7px; height: 7px; border-radius: 50%; background: #6FCF7F; box-shadow: 0 0 8px rgba(111,207,127,.7); }
.nsp-selo-google.alerta i { background: var(--aviso); box-shadow: 0 0 8px var(--aviso); }
.nsp-canal-novo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; padding: 16px;
  border-radius: var(--raio); border: 1px dashed var(--borda-forte); background: none; color: var(--apoio); font: inherit; font-size: 13px; cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao); }
.nsp-canal-novo:hover { color: var(--texto); border-color: var(--cor-nicho, var(--borda-forte)); background: rgba(255,255,255,.02); }
.nsp-canal-novo svg { width: 22px; height: 22px; }
.nsp-canal-novo small { color: var(--apagado); font-size: 11.5px; }
.nsp-janela-conexao { width: min(600px, calc(100vw - 32px)); }
.nsp-janela-conexao .nsp-credencial { max-width: none; flex-basis: 100%; }
.nsp-janela-conexao .nsp-dica-credencial { margin: 10px 0 0; }

/* nicho como etiqueta: filtro no topo e etiqueta no cartão do canal */
.nsp-filtro-nichos { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 14px; }
.nsp-filtro-nichos button { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--borda); color: var(--apoio); font: inherit; font-size: 12.5px; transition: all var(--transicao); }
.nsp-filtro-nichos button:hover { color: var(--texto); }
.nsp-filtro-nichos button.ativo { color: var(--texto); background: rgba(255,255,255,.08); border-color: var(--borda-forte); }
.nsp-filtro-nichos i, .nsp-etiqueta i, .nsp-menu-etiqueta .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--cor-nicho); flex: none; }
.nsp-filtro-nichos .num { color: var(--apagado); }
.nsp-canal-cartao { position: relative; }
.nsp-etiqueta { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--texto-2); background: rgba(255,255,255,.05); border: 1px solid var(--borda); max-width: 120px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; transition: all var(--transicao); }
.nsp-etiqueta:hover { color: var(--texto); border-color: var(--borda-forte); }
.nsp-etiqueta.vazia { background: none; border-style: dashed; color: var(--apagado); }
.nsp-menu-etiqueta { top: 58px; right: 12px; min-width: 220px; }
.nsp-menu-etiqueta button small { margin-left: auto; color: var(--apagado); font-size: 11px; }
.nsp-menu-etiqueta button svg:last-child:not(:first-child) { margin-left: auto; color: var(--destaque); }
.nsp-menu-etiqueta .entrada { margin: 6px 6px 4px; height: 34px; font-size: 13px; width: auto; }

/* ---------- Produção: quadro, calendário, ideias ---------- */
.nsp-mini-canal { border-radius: 50%; object-fit: cover; flex: none; display: inline-grid; place-items: center; font-size: 9px;
  background: #2a2a2a; color: var(--texto-2); vertical-align: middle; }
.nsp-mini-canal.vazio { background: none; border: 1px dashed var(--borda-forte); }
.nsp-filtro-nichos button img.nsp-mini-canal, .nsp-filtro-nichos button span.nsp-mini-canal { margin-left: -4px; }
.nsp-faixa-vagas { display: flex; gap: 12px; align-items: center; padding: 12px 16px; margin-bottom: 16px; border-radius: var(--raio);
  border: 1px solid rgba(242,184,75,.25); background: rgba(242,184,75,.05); font-size: 12.5px; color: var(--texto-2); }
.nsp-faixa-vagas svg { width: 16px; height: 16px; color: var(--destaque); flex: none; }
.nsp-faixa-vagas b { color: var(--texto); font-weight: 500; margin-right: 8px; }
.nsp-quadro { display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.nsp-coluna { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--raio); background: #121212; border: 1px solid var(--borda);
  min-height: 320px; transition: border-color var(--transicao), background var(--transicao); }
.nsp-coluna.alvo { border-color: var(--destaque); background: #161410; }
.nsp-coluna-cab { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 4px; font-size: 13px; }
.nsp-coluna-cab b { font-weight: 500; }
.nsp-coluna-cab .num { color: var(--apagado); font-size: 12px; }
.nsp-coluna-lista { display: flex; flex-direction: column; gap: 8px; }
.nsp-coluna-vazia { padding: 18px 8px; text-align: center; font-size: 12px; color: var(--apagado); border: 1px dashed var(--borda); border-radius: 12px; }
.nsp-ideia-rapida { height: 34px; font-size: 12.5px; }
.nsp-cartao-video, .nsp-cartao-ideia { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: #1A1A1A;
  border: 1px solid var(--borda); cursor: pointer; transition: border-color var(--transicao); }
.nsp-cartao-video:hover { border-color: var(--borda-forte); }
.nsp-cartao-video.arrastando, .nsp-cal-item.arrastando, .nsp-cal-pronto.arrastando { opacity: .4; }
.nsp-cartao-video .capa { position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #222; }
.nsp-cartao-video .capa img { width: 100%; height: 100%; object-fit: cover; }
.nsp-cartao-video .capa i { position: absolute; right: 4px; bottom: 4px; font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.7); }
.nsp-cartao-video b, .nsp-cartao-ideia b { font-weight: 500; font-size: 13px; line-height: 1.35; }
.nsp-cartao-ideia { cursor: default; }
.nsp-cartao-ideia small { color: var(--apoio); font-size: 12px; line-height: 1.4; }
.nsp-cartao-video .linha, .nsp-cartao-ideia .linha { display: flex; align-items: center; gap: 6px; }
.nsp-canal-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--texto-2); max-width: 100%; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; background: none; border: 0; padding: 0; font-family: inherit; }
.nsp-canal-chip.vazio { color: var(--apagado); border: 1px dashed var(--borda-forte); border-radius: 999px; padding: 1px 8px; cursor: pointer; }
.nsp-manual { margin-left: auto; color: var(--destaque); font-size: 9px; }
.nsp-data-chip { align-self: flex-start; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(242,184,75,.12); color: var(--destaque); text-decoration: none; }
.nsp-data-chip.pub { background: rgba(255,80,80,.12); color: #ff8c8c; }
.nsp-menu-canal { top: auto; bottom: 34px; left: 8px; right: 8px; min-width: 0; }
/* calendário */
.nsp-cal-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.nsp-cal-mes { font-size: 20px; font-weight: 500; text-transform: capitalize; min-width: 170px; text-align: center; }
.nsp-cal-legenda { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 11.5px; color: var(--apoio); }
.nsp-cal-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: -6px; }
.nsp-cal-legenda i.vaga { border: 1px dashed var(--borda-forte); }
.nsp-cal-legenda i.agendado { background: rgba(242,184,75,.5); }
.nsp-cal-legenda i.publicado { background: rgba(255,255,255,.18); }
.nsp-cal-corpo { display: grid; grid-template-columns: 1fr 240px; gap: 14px; align-items: start; }
.nsp-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.nsp-cal-dia-nome { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--apagado); padding: 4px 6px; }
.nsp-cal-dia { min-height: 104px; padding: 6px; border-radius: 10px; background: #141414; border: 1px solid var(--borda); display: flex; flex-direction: column; gap: 4px;
  min-width: 0; transition: border-color var(--transicao); }
.nsp-cal-dia > .num { font-size: 12px; color: var(--texto-2); }
.nsp-cal-dia.fora { opacity: .45; }
.nsp-cal-dia.passado { background: #101010; }
.nsp-cal-dia.hoje { border-color: var(--destaque); }
.nsp-cal-dia.hoje > .num { color: var(--destaque); font-weight: 600; }
.nsp-cal-dia.alvo { border-color: var(--destaque); background: #1a1712; }
.nsp-cal-item { display: flex; align-items: center; gap: 4px; font-size: 10.5px; padding: 3px 5px; border-radius: 6px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: var(--texto-2); text-decoration: none; min-width: 0; }
.nsp-cal-item .num { flex: none; }
.nsp-cal-item.vaga { border: 1px dashed var(--borda-forte); color: var(--apagado); }
.nsp-cal-item.agendado { background: rgba(242,184,75,.16); color: var(--texto); cursor: grab; }
.nsp-cal-item.publicado { background: rgba(255,255,255,.06); }
/* Facebook e Instagram no calendário: a cor de cada rede (agendado mais forte, publicado mais apagado) */
.nsp-cal-item.rede { color: var(--texto); text-decoration: none; }
.nsp-cal-item.rede svg { width: 11px; height: 11px; flex: none; }
.nsp-cal-item.rede.facebook { background: rgba(24, 119, 242, .24); }
.nsp-cal-item.rede.instagram { background: rgba(225, 48, 108, .22); }
.nsp-cal-item.rede.publicado { opacity: .6; }
.nsp-cal-item.rede:hover { opacity: 1; filter: brightness(1.15); }
.nsp-cal-rede-leg { display: inline-flex; align-items: center; gap: 4px; }
.nsp-cal-rede-leg svg { width: 11px; height: 11px; }
.nsp-cal-lado { padding: 14px; border-radius: var(--raio); background: #161616; border: 1px solid var(--borda); display: flex; flex-direction: column; gap: 8px; }
.nsp-cal-pronto { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 10px; background: #1C1C1C; border: 1px solid var(--borda); cursor: grab; }
.nsp-cal-pronto img, .nsp-cal-pronto .capa-vazia { width: 56px; aspect-ratio: 16/9; border-radius: 6px; object-fit: cover; flex: none; background: #262626; }
.nsp-cal-pronto span { display: flex; flex-direction: column; min-width: 0; font-size: 12px; }
.nsp-cal-pronto b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsp-cal-pronto small { color: var(--apoio); font-size: 11px; }
@media (max-width: 900px) { .nsp-cal-corpo { grid-template-columns: 1fr; } .nsp-cal-dia { min-height: 70px; } }
/* ideias */
.nsp-ideia-nova { display: grid; grid-template-columns: 1fr 200px auto; gap: 8px; margin-bottom: 18px; align-items: start; }
.nsp-ideia-nova textarea { grid-column: 1 / 3; resize: vertical; }
.nsp-ideia-nova #ideia-salvar { grid-column: 3; grid-row: 1 / 3; align-self: stretch; }
.nsp-ideias-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
@media (max-width: 720px) { .nsp-ideia-nova { grid-template-columns: 1fr; } .nsp-ideia-nova textarea, .nsp-ideia-nova #ideia-salvar { grid-column: auto; grid-row: auto; } }
/* Hub: canal do novo vídeo */
.nsp-chip-canal select { background: none; border: 0; color: var(--texto); font: inherit; font-size: inherit; cursor: pointer; padding: 0 2px; }
.nsp-chip-canal select option { background: #1C1C1C; }
/* perfil do canal */
.nsp-perfil-canal { margin: 0 0 24px; padding: 22px; border-radius: var(--raio-g); background: #161616; border: 1px solid var(--borda); }
.nsp-perfil-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.nsp-perfil-grade .segmentado { align-self: flex-start; }
.nsp-perfil-dias { grid-column: 1 / -1; }
.nsp-dias { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nsp-dias button { height: 32px; min-width: 44px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--borda-forte); background: none; color: var(--apoio);
  font: inherit; font-size: 12.5px; cursor: pointer; }
.nsp-dias button.ativo { background: var(--destaque); color: var(--destaque-texto); border-color: var(--destaque); }
.nsp-dias input[type=time] { width: 110px; height: 32px; margin-left: 6px; }
.nsp-perfil-voz { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.nsp-perfil-voz b { font-weight: 500; font-size: 13.5px; }
.nsp-perfil-voz small { color: var(--apoio); font-size: 11.5px; }
.nsp-perfil-voz .btn { margin-left: auto; }
.nsp-perfil-vozes { margin-top: 14px; padding: 12px; border-radius: var(--raio); background: #1C1C1C; border: 1px solid var(--borda); display: flex; flex-direction: column; gap: 10px; }
.nsp-perfil-vozes .segmentado { align-self: flex-start; }
.nsp-perfil-vozes .lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; }
.nsp-perfil-vozes .lista button { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: none; border: 1px solid var(--borda); color: inherit; font: inherit; }
.nsp-perfil-vozes .lista button.ativo { border-color: var(--destaque); }
.nsp-perfil-vozes .lista b { font-weight: 500; font-size: 13px; }
.nsp-perfil-vozes .lista small { color: var(--apoio); font-size: 11px; }

/* cartão do quadro compacto: miniatura à esquerda, texto à direita */
.nsp-cartao-video { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
.nsp-cartao-video .capa { grid-row: 1 / span 4; width: 76px; }
.nsp-cartao-video.sem-capa { grid-template-columns: minmax(0, 1fr); }
.nsp-cartao-video > b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; }
.nsp-quadro { grid-template-columns: repeat(6, minmax(200px, 1fr)); }
.nsp-ideias-grade .nsp-canais-vazio { grid-column: 1 / -1; }

/* ---------- menu de escolha do app (no lugar do <select> do sistema; ver js/escolha.js) ---------- */
.nsp-escolha { position: relative; display: block; min-width: 0; }
.nsp-escolha.simples { display: inline-flex; vertical-align: middle; }
.nsp-escolha-nativo { display: none !important; }
.nsp-escolha-gatilho { display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; color: var(--texto); font: inherit; font-size: 13.5px; min-width: 0; }
.nsp-escolha-gatilho.entrada { padding-top: 8px; padding-bottom: 8px; min-height: 40px; }
.nsp-escolha-gatilho:hover:not(:disabled) { border-color: var(--borda-forte); }
.nsp-escolha-gatilho:disabled { opacity: .5; cursor: default; }
.nsp-escolha-gatilho.simples { background: none; border: 0; padding: 0; gap: 6px; font-size: inherit; color: inherit; }
.nsp-escolha-seta { margin-left: auto; display: grid; color: var(--apoio); flex: none; }
.nsp-escolha-seta svg { width: 15px; height: 15px; }
.nsp-escolha-gatilho.simples .nsp-escolha-seta svg { width: 13px; height: 13px; }
.nsp-escolha-txt { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; }
.nsp-escolha-txt b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsp-escolha-txt small { color: var(--apoio); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsp-escolha-foto { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; background: #2a2a2a; }
.nsp-escolha-foto.letra { display: grid; place-items: center; font-size: 11px; font-weight: 500; color: var(--texto-2); }
.nsp-escolha-gatilho.simples .nsp-escolha-foto { width: 18px; height: 18px; }
.nsp-escolha-cor { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 1px 1px rgba(255,255,255,.25); }
.nsp-escolha-menu { position: fixed; z-index: 95; padding: 8px; border-radius: var(--raio); box-shadow: var(--sombra); outline: none; }
.nsp-escolha-lista { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow: auto; }
.nsp-escolha-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 13px; }
.nsp-escolha-item:hover, .nsp-escolha-item.alvo { background: rgba(255,255,255,.07); }
.nsp-escolha-item[hidden] { display: none; }  /* a busca esconde: o display: flex acima não deixava */
.nsp-escolha-item.ativo { background: rgba(255,255,255,.1); }
.nsp-escolha-item.desligado { opacity: .4; cursor: default; }
.nsp-escolha-item .nsp-escolha-txt { flex: 1; }
.nsp-escolha-ok { margin-left: auto; display: grid; color: var(--destaque); flex: none; }
.nsp-escolha-ok svg { width: 14px; height: 14px; }

/* janelas de pergunta do app (confirmar / pedir texto) */
.nsp-janela-pergunta { width: min(440px, calc(100vw - 32px)); }
.nsp-pergunta-msg { margin: 0; color: var(--texto-2); font-size: 14px; line-height: 1.55; }
.btn-perigo { background: #c0392b; color: #fff; }
.btn-perigo:hover { background: #d84b3c; }

/* ---------- Publicar no YouTube ---------- */
.nsp-publicar { width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 40px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.nsp-publicar-cab { display: flex; align-items: center; gap: 16px; padding: 20px 24px 14px; border-bottom: 1px solid var(--borda); }
.nsp-publicar-cab > div:first-child { flex: 1; min-width: 0; }
.nsp-publicar-cab h2 { margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsp-publicar-canal { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.nsp-publicar-canal img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.nsp-publicar-canal span { display: flex; flex-direction: column; }
.nsp-publicar-canal b { font-weight: 500; }
.nsp-publicar-canal small { color: var(--apoio); font-size: 11.5px; }
.nsp-publicar-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; padding: 18px 24px 22px; overflow-y: auto; }
.nsp-publicar-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nsp-pub-campo { display: flex; flex-direction: column; gap: 6px; }
.nsp-pub-campo textarea { resize: vertical; font-size: 13px; line-height: 1.55; }
.nsp-pub-campo > small { font-size: 11.5px; }
.nsp-pub-rotulo { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--apoio); }
.nsp-pub-rotulo span { color: var(--texto-2); font-weight: 500; }
.nsp-pub-rotulo .btn { margin-left: auto; }
.nsp-pub-linha { display: flex; gap: 10px; flex-wrap: wrap; }
.nsp-pub-linha > .campo { flex: 1 1 160px; }
.nsp-sugestoes { display: flex; flex-wrap: wrap; gap: 6px; }
.nsp-sugestoes button { text-align: left; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--borda-forte); background: none; color: var(--texto-2);
  font: inherit; font-size: 12.5px; cursor: pointer; transition: all var(--transicao); }
.nsp-sugestoes button:hover { border-color: var(--destaque); color: var(--texto); border-style: solid; }
.nsp-pub-aviso { color: var(--aviso); font-size: 11.5px; }
.nsp-publicar-lado { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nsp-thumb { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #1a1a1a; border: 1px solid var(--borda); display: grid; place-items: center; font-size: 12px; text-align: center; padding: 0; }
.nsp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nsp-thumb-video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #000; }
.nsp-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nsp-checklist li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--texto-2); }
.nsp-checklist li > svg, .nsp-checklist li::first-letter { flex: none; }
.nsp-checklist li svg { width: 14px; height: 14px; margin-top: 2px; }
.nsp-checklist li.erro { color: #ff8c8c; }
.nsp-checklist li.aviso { color: var(--aviso); }
.nsp-checklist li.ok { color: #7fd38a; }
/* confirmação de envio ao YouTube: card verde suave (mesmo verde do texto de antes) */
.nsp-pub-enviado-card { --verde-envio: #7fd38a; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 14px; background: color-mix(in srgb, var(--verde-envio) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--verde-envio) 30%, transparent); }
.nsp-pub-enviado-check { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--verde-envio); color: #0b0b0b;
  display: grid; place-items: center; }
.nsp-pub-enviado-check svg { width: 18px; height: 18px; stroke-width: 2.6; }
.nsp-pub-enviado-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nsp-pub-enviado-txt b { font-size: 14px; font-weight: 700; color: #fff; }
.nsp-pub-enviado-txt small { font-size: 12px; color: var(--apoio, #8a8a8a); }
.nsp-pub-enviado-link { flex: none; margin-left: auto;  /* sem espaço ao lado, desce para baixo do texto */
  font-size: 12.5px; color: var(--verde-envio); text-decoration: none; white-space: nowrap; }
.nsp-pub-enviado-link:hover { text-decoration: underline; }
.nsp-pub-enviado-anima .nsp-pub-enviado-check { animation: nsp-envio-check .25s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes nsp-envio-check { from { transform: scale(.6); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .nsp-pub-enviado-anima .nsp-pub-enviado-check { animation: none; } }
.nsp-pub-progresso { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; }
.nsp-pub-progresso .barra { height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.nsp-pub-progresso .barra i { display: block; height: 100%; background: var(--destaque); transition: width 600ms ease; }
.nsp-pub-progresso small { font-size: 12px; color: var(--apoio); }
.nsp-pub-acoes { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--borda); display: flex; flex-direction: column; gap: 10px; }
.nsp-pub-acoes .nsp-pub-linha .btn { flex: 1 1 auto; }
@media (max-width: 860px) { .nsp-publicar-corpo { grid-template-columns: 1fr; } }

/* retenção do YouTube sobre a timeline (vídeo publicado) */
.faixa-retencao { position: relative; height: 46px; margin-top: 6px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--borda); overflow: hidden; }
.faixa-retencao svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.faixa-retencao polyline { fill: none; stroke: #6fcf97; stroke-width: 2; }
.nsp-ret-perda { position: absolute; top: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px;
  font-size: 10px; color: #ffb0a8; background: rgba(255,90,70,.08); border-left: 1px solid rgba(255,90,70,.25); pointer-events: auto; }
.nsp-ret-perda.pior { background: rgba(255,90,70,.2); color: #ff8c80; font-weight: 600; }
.nsp-ret-rotulo { position: absolute; left: 8px; top: 4px; font-size: 10.5px; color: var(--apoio); pointer-events: none; }

/* ---------- Métricas: sala de controle, painel do canal, gráficos ---------- */
.nsp-sala { padding: 18px 20px; border-radius: var(--raio-g); background: #141414; border: 1px solid var(--borda); }
.nsp-sala.carregando { padding: 14px 20px; font-size: 13px; }
.nsp-sala-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.nsp-sala-grade { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(260px, 1.6fr); gap: 12px; }
.nsp-sala-num { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--raio); background: #1A1A1A; border: 1px solid var(--borda);
  text-align: left; color: inherit; font: inherit; min-width: 0; }
.nsp-sala-num b { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; }
.nsp-sala-num small { font-size: 11px; }
button.nsp-sala-num { cursor: pointer; transition: border-color var(--transicao); }
button.nsp-sala-num.ativo { border-color: var(--destaque); }
.nsp-delta { font-size: 12px; color: var(--apoio); }
.nsp-delta.sobe { color: #6fcf97; }
.nsp-delta.desce { color: #ff8c80; }
.nsp-mini-grafico { width: 100%; height: 32px; margin-top: 4px; }
.nsp-mini-grafico polyline { fill: none; stroke: var(--cor); stroke-width: 1.6; }
.nsp-sala-lista { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--raio); background: #1A1A1A; border: 1px solid var(--borda); min-width: 0; }
.nsp-alerta { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--texto-2); text-decoration: none; cursor: pointer; line-height: 1.4; }
.nsp-alerta i { font-style: normal; flex: none; width: 14px; text-align: center; }
.nsp-alerta.queda i { color: #ff8c80; }
.nsp-alerta.destaque i { color: #6fcf97; }
.nsp-alerta.vaga i, .nsp-alerta.proximo i { color: var(--destaque); }
.nsp-alerta:hover span { color: var(--texto); }
.icone-btn.girando svg { animation: nsp-girar 1s linear infinite; }
@keyframes nsp-girar { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .nsp-sala-grade { grid-template-columns: repeat(2, 1fr); } .nsp-sala-lista { grid-column: 1 / -1; } }
.nsp-metricas { margin: 0 0 24px; padding: 22px; border-radius: var(--raio-g); background: #161616; border: 1px solid var(--borda); }
.nsp-metricas:empty { display: none; }
.nsp-metricas .nsp-sala { background: none; border: 0; padding: 0; }
.nsp-metricas-num { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.nsp-grafico-caixa { padding: 10px 6px 0; border-radius: var(--raio); background: #121212; border: 1px solid var(--borda); }
.nsp-grafico { width: 100%; height: 180px; display: block; }
.nsp-grafico text { fill: var(--apagado); font-size: 11px; font-family: inherit; }
.nsp-grafico .grade { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.nsp-grafico .area { fill: var(--cor); opacity: .1; }
.nsp-grafico .linha { fill: none; stroke: var(--cor); stroke-width: 2; }
.nsp-grafico .comparar { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.nsp-grafico .alvo { fill: transparent; }
.nsp-grafico .alvo:hover { fill: rgba(255,255,255,.04); }
.nsp-grafico-vazio { padding: 24px; text-align: center; color: var(--apagado); font-size: 12.5px; }
.nsp-metricas-baixo { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr); gap: 18px; margin-top: 18px; }
@media (max-width: 900px) { .nsp-metricas-baixo, .nsp-metricas-num { grid-template-columns: 1fr; } }
.nsp-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.nsp-tabela th { text-align: left; font-weight: 400; color: var(--apagado); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 6px 8px; border-bottom: 1px solid var(--borda); }
.nsp-tabela td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
.nsp-tabela .num { text-align: right; white-space: nowrap; }
.nsp-tabela td a { color: var(--texto); text-decoration: none; }
.nsp-tabela td a:hover { color: var(--destaque); }
.nsp-tab-proj { margin-left: 6px; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--borda-forte); color: var(--apoio) !important; }
.nsp-pct { display: inline-block; min-width: 54px; padding: 1px 6px; border-radius: 4px; background: linear-gradient(90deg, rgba(111,207,151,.22) var(--p), transparent var(--p)); }
.nsp-metricas-fatias { display: flex; flex-direction: column; gap: 14px; }
.nsp-barras { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.nsp-barra-linha { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr 38px; gap: 8px; align-items: center; font-size: 12px; }
.nsp-barra-linha span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto-2); }
.nsp-barra-linha .trilho { height: 6px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.nsp-barra-linha .trilho i { display: block; height: 100%; background: var(--destaque); border-radius: 6px; }
.nsp-barra-linha b { font-weight: 500; text-align: right; }
.nsp-lancamentos { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }

/* sala de controle no Hub: título como "Seus canais" e cartões iguais aos dos canais */
.nsp-sala-hub .nsp-sala-num, .nsp-sala-hub .nsp-sala-lista { background: #161616; border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; }
.nsp-sala-hub .nsp-sala-num b { font-size: 26px; }
.nsp-sala-hub .nsp-sala-num .rotulo, .nsp-sala-hub .nsp-sala-lista .rotulo { font-size: 11px; }

/* sala de controle: cada métrica com o seu tom (degradê escuro, como o cartão de exemplo de antes) */
.nsp-sala-hub .tom-views { background: linear-gradient(135deg, #0f2a33 0%, #0e1a1f 45%, #141414 100%); border-color: rgba(86,194,214,.16); }
.nsp-sala-hub .tom-horas { background: linear-gradient(135deg, #1f1a3d 0%, #16142a 45%, #141414 100%); border-color: rgba(142,123,214,.16); }
.nsp-sala-hub .tom-inscritos { background: linear-gradient(135deg, #33240f 0%, #1f180e 45%, #141414 100%); border-color: rgba(242,184,75,.16); }
.nsp-sala-hub .tom-atencao { background: linear-gradient(135deg, #1c1c1c 0%, #151515 100%); }
.nsp-sala-hub .tom-views .rotulo { color: #7fc9d6; }
.nsp-sala-hub .tom-horas .rotulo { color: #a99be0; }
.nsp-sala-hub .tom-inscritos .rotulo { color: #e0b46a; }

/* botão Publicar na Saída: sempre à vista, logo abaixo do Exportar; inativo até existir o MP4 */
.nsp-btn-publicar { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 10px; padding: 16px 22px; border-radius: 22px; cursor: pointer;
  background: #161616; border: 1px solid var(--borda-forte); color: var(--texto); font: inherit; text-align: left; transition: border-color var(--transicao), background var(--transicao); }
.nsp-btn-publicar:hover:not(:disabled) { border-color: #ff4e45; background: #1a1414; }
.nsp-btn-publicar:disabled { opacity: .45; cursor: not-allowed; }
.nsp-btn-publicar svg { width: 20px; height: 20px; color: #ff4e45; flex: none; }
.nsp-btn-publicar:disabled svg { color: var(--apoio); }
.nsp-btn-publicar span { display: flex; flex-direction: column; gap: 2px; }
.nsp-btn-publicar b { font-weight: 600; font-size: 15px; letter-spacing: .02em; }
.nsp-btn-publicar small { color: var(--apoio); font-size: 12px; }

.nsp-abas-opcoes { margin: 0 0 10px; }

/* progresso: contorno que gira nas duas luzes do fundo da página (laranja e azul-petróleo) */
@property --nsp-giro { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.progresso-flutuante { isolation: isolate; border-color: transparent;
  box-shadow: var(--sombra), -18px 0 40px -18px rgba(224, 122, 58, .45), 18px 0 40px -18px rgba(63, 167, 196, .40); }
.progresso-flutuante::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: -1;
  background: conic-gradient(from var(--nsp-giro), #E07A3A, rgba(224,122,58,0) 25%, rgba(63,167,196,0) 50%, #3FA7C4 60%, rgba(63,167,196,0) 80%, #E07A3A);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: nsp-contorno 3.2s linear infinite; }
.progresso-flutuante .barra i { background: linear-gradient(90deg, #E07A3A, var(--destaque) 55%, #3FA7C4); box-shadow: 0 0 14px rgba(224,122,58,.45); }
@keyframes nsp-contorno { to { --nsp-giro: 360deg; } }
@media (prefers-reduced-motion: reduce) { .progresso-flutuante::before { animation: none; } }

/* marcas: cartão com as plataformas da marca */
.nsp-ico-yt { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.nsp-marca-plataformas { display: flex; flex-direction: column; gap: 4px; }
.nsp-marca-plat { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.03);
  border: 1px solid transparent; color: var(--texto-2); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; min-width: 0; }
.nsp-marca-plat:hover { border-color: var(--borda-forte); color: var(--texto); }
.nsp-marca-plat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsp-marca-plat small { margin-left: auto; color: var(--apoio); font-size: 11px; white-space: nowrap; }
.nsp-marca-plat i.chip { margin-left: auto; font-style: normal; }
.nsp-marca-plat.em-breve { cursor: default; opacity: .45; background: none; border: 1px dashed var(--borda); }
.nsp-marca-plat.em-breve svg { width: 14px; height: 14px; }
.nsp-canal-novo.em-breve { cursor: default; opacity: .4; }
.nsp-canal-novo.em-breve:hover { color: var(--apoio); border-color: var(--borda-forte); background: none; }

.nsp-midias-ordem { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--texto-2); }
.nsp-midias-ordem svg { width: 15px; height: 15px; color: var(--destaque); }
.nsp-midias-ordem b { font-weight: 500; color: var(--texto); }

.nsp-cv-botoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.nsp-midias-ordem { margin-top: 0; }
.nsp-origem-ic { width: 38px; display: grid; place-items: center; color: var(--destaque); flex: none; }
.nsp-origem-ic svg { width: 18px; height: 18px; }
#origem-minhas { align-items: center; }
#origem-minhas .btn { margin-left: auto; flex: none; }
#origem-minhas b, #origem-minhas small { display: block; }
#origem-minhas small { margin-top: 2px; }

/* mídias do usuário antes de montar: miniaturas nas telinhas e a lista numerada embaixo, em verde */
.nsp-fantasma.com-midia .quadro-f { border: 1px solid rgba(111,207,151,.45); animation: none; background: #101510; overflow: hidden; }
.nsp-fantasma .quadro-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nsp-fantasma.com-midia .quadro-f span { color: #fff; text-shadow: 0 1px 3px #000; z-index: 1; }
.nsp-tipo-mini { position: absolute; right: 6px; bottom: 5px; font-style: normal; font-size: 9.5px; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.65); z-index: 1; }
.nsp-minhas-lista { max-width: 1080px; margin: 14px auto 0; padding: 0 4px; display: flex; flex-direction: column; gap: 8px; }
.nsp-minhas-lista .rotulo { color: #6fcf97; }
.nsp-minhas-num { display: flex; flex-wrap: wrap; gap: 5px; }
.nsp-minhas-num span { min-width: 30px; padding: 3px 6px; border-radius: 6px; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums;
  color: #6fcf97; background: rgba(111,207,151,.08); border: 1px solid rgba(111,207,151,.25); cursor: default; }

/* barra do envio das suas mídias, no espaço ao lado do botão */
.nsp-envio-midias { display: flex; flex-direction: column; gap: 5px; width: 260px; max-width: 40vw; }
.nsp-envio-midias .txt { font-size: 11.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsp-envio-midias .txt b { color: var(--texto); font-weight: 600; }
.nsp-envio-midias .barra { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; display: block; }
.nsp-envio-midias .barra i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #E07A3A, var(--destaque) 55%, #3FA7C4);
  transition: width 300ms ease; }

.nsp-origem.apagada { opacity: .4; }
#origem-completar[hidden] { display: none; }

/* prévia: enquanto o vídeo do corte carrega, aparece a miniatura dele (nunca o preto) */
.previa .quadro .nsp-vid-capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.previa .quadro video { transition: opacity 120ms ease; }
.previa .quadro video.nsp-vid-espera { opacity: 0; }

/* Saída: thumbnail ao lado da prévia (a mesma do Publicar) */
.cartao.nsp-saida-thumb { display: flex; flex-direction: row; gap: 14px; align-items: center; }
.nsp-saida-thumb-img { flex: 0 0 150px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #1a1a1a;
  border: 1px solid var(--borda); display: grid; place-items: center; font-size: 11px; color: var(--apoio, #8a8a8a); }
.nsp-saida-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nsp-saida-thumb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nsp-saida-thumb-txt h3 { margin: 0; }
.nsp-saida-thumb-txt .nsp-pub-linha { margin-top: 4px; flex-wrap: wrap; }

/* Saída: para onde a exportação vai */
.nsp-destino { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--borda); }
.nsp-destino svg { flex: 0 0 auto; width: 16px; height: 16px; opacity: .7; }
.nsp-destino span { display: flex; flex-direction: column; min-width: 0; }
.nsp-destino small { font-size: 11px; color: var(--apoio, #8a8a8a); }
.nsp-destino b { font-weight: 500; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* gráfico de métricas: ▶ no dia em que um vídeo saiu */
.nsp-grafico-marcado { position: relative; }
.nsp-grafico .guia-video { stroke: rgba(255,255,255,.14); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.nsp-marca-video { position: absolute; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 2px;
  height: 14px; min-width: 14px; padding: 0 3px; border-radius: 4px; background: #3a3a3a; color: #e6e6e6; cursor: default; }
.nsp-marca-video svg { width: 8px; height: 8px; fill: currentColor; }
.nsp-marca-video b { font-size: 9px; font-weight: 600; line-height: 1; }
.nsp-marca-video:hover { background: #555; }
.nsp-grafico .pendente { fill: rgba(255,255,255,.025); }

/* ===== Oficina (Fase 3) ===== */
.nsp-oficina-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.nsp-oficina-botoes svg, .nsp-story-cab .btn svg { width: 15px; height: 15px; }

/* cor: a camada de tom e a vinheta ficam entre a mídia e a legenda */
.quadro > .nsp-cor-camada { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; }
.quadro > .nsp-cor-camada.vinheta { box-shadow: inset 0 0 18vmin 4vmin rgba(0,0,0,.6); }
.nsp-cor-corte { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; }
.nsp-cor-corte select { width: 100%; padding: 7px 34px 7px 12px; border-radius: 999px; font-size: 13px; }
.nsp-cor-corte input[type=range] { grid-column: 2; accent-color: var(--destaque); }

/* precisão */
.nsp-precisao { display: flex; flex-direction: column; gap: 6px; }
.nsp-precisao-linha { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 6px; align-items: center; font-size: 13px; }
.nsp-precisao-linha .num { color: var(--texto-2); font-size: 12.5px; }
.nsp-precisao small { font-size: 11.5px; }
.nsp-precisao-botoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.nsp-precisao-botoes .btn { padding: 5px 10px; font-size: 12px; }

/* pausas */
.nsp-janela-pausas { width: min(560px, calc(100vw - 32px)); }
.nsp-janela-pausas .nsp-som-linha { grid-template-columns: 130px 1fr 60px; }
.nsp-pausas-resumo { margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--borda); font-size: 13.5px; }

/* versões */
.nsp-janela-versoes { width: min(640px, calc(100vw - 32px)); }
.nsp-versao-nova { display: flex; gap: 8px; }
.nsp-versao-nova .entrada { flex: 1; min-width: 0; }
.nsp-versoes { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; max-height: 50vh; overflow: auto; }
.nsp-versao { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--borda); }
.nsp-versao-img { flex: 0 0 88px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #222; }
.nsp-versao-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nsp-versao-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nsp-versao-txt b { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsp-versao-txt small { font-size: 11.5px; }

/* storyboard */
.nsp-story { max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.nsp-story-cab { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.nsp-story-cab small { display: block; margin-top: 4px; font-size: 12.5px; }
.nsp-story-previa { display: flex; gap: 16px; align-items: center; padding: 12px; }
.nsp-story-previa video { width: min(420px, 45%); aspect-ratio: 16 / 9; border-radius: 12px; background: #000; }
.nsp-story-previa div { display: flex; flex-direction: column; gap: 4px; }
.nsp-story-previa small { font-size: 12px; }
.nsp-story-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.nsp-story-cena { background: #161616; border: 1px solid var(--borda); border-radius: 16px; overflow: hidden; cursor: pointer; transition: border-color .15s; }
.nsp-story-cena:hover { border-color: rgba(255,255,255,.2); }
.nsp-story-cena.marcada { border-color: var(--destaque); }
.nsp-story-imgs { position: relative; display: grid; aspect-ratio: 16 / 9; background: #0f0f0f; gap: 1px; }
.nsp-story-imgs.n2 { grid-template-columns: 1fr 1fr; }
.nsp-story-imgs.n3, .nsp-story-imgs.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.nsp-story-imgs.n3 img:first-child { grid-row: span 2; }
.nsp-story-imgs img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
.nsp-story-imgs .alerta { display: grid; place-items: center; color: var(--aviso); font-size: 12px; }
.nsp-story-marca { position: absolute; top: 8px; left: 8px; cursor: pointer; }
.nsp-story-marca input { position: absolute; opacity: 0; pointer-events: none; }
.nsp-story-marca i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(8px); color: transparent; }
.nsp-story-marca i svg { width: 14px; height: 14px; }
.nsp-story-marca input:checked + i { background: var(--destaque); border-color: var(--destaque); color: #111; }
.nsp-story-dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.6); font-size: 11.5px; }
.nsp-story-txt { padding: 10px 12px 12px; }
.nsp-story-txt b { font-weight: 500; font-size: 13.5px; }
.nsp-story-txt small { font-size: 11.5px; }
.nsp-story-txt p { margin: 6px 0 0; font-size: 12.5px; color: var(--texto-2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* atalhos */
.nsp-janela-atalhos { width: min(520px, calc(100vw - 32px)); }
.nsp-atalhos { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; font-size: 13px; }
.nsp-atalhos kbd { font-family: inherit; font-size: 12px; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.08);
  border: 1px solid var(--borda); white-space: nowrap; justify-self: start; }

/* ===== Laboratório de efeitos (Fase 5) ===== */
.nsp-lab-grade { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 18px; align-items: start; margin-top: 18px; }
@media (max-width: 1150px) { .nsp-lab-grade { grid-template-columns: 1fr; } }
.nsp-lab-lista { display: flex; flex-direction: column; gap: 8px; }
.nsp-lab-efeito { position: relative; display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; cursor: pointer; text-align: left;
  background: #161616; border: 1px solid var(--borda); color: inherit; font: inherit; }
.nsp-lab-efeito:hover { border-color: rgba(255,255,255,.18); }
.nsp-lab-efeito.ativo { border-color: var(--destaque); background: #1c1c1c; }
.nsp-lab-efeito .arte { flex: 0 0 44px; height: 44px; border-radius: 10px; }
.nsp-lab-efeito .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nsp-lab-efeito b { font-weight: 500; font-size: 13.5px; }
.nsp-lab-efeito small { color: var(--apoio); font-size: 11.5px; line-height: 1.35; }
.nsp-lab-apagar { position: absolute; top: 6px; right: 6px; opacity: 0; color: var(--apoio); }
.nsp-lab-apagar svg { width: 14px; height: 14px; }
.nsp-lab-efeito:hover .nsp-lab-apagar { opacity: 1; }
.nsp-lab-mesa { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nsp-lab-projeto { display: flex; gap: 8px; align-items: center; }
.nsp-lab-projeto select { flex: 1; min-width: 0; }
.nsp-lab-comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nsp-lab-comparar figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.nsp-lab-comparar figcaption { font-size: 12px; color: var(--apoio); letter-spacing: .04em; }
.nsp-lab-video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0f0f0f; border: 1px solid var(--borda); }
.nsp-lab-video video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.nsp-lab-video.carregando video { opacity: .45; }
.nsp-lab-espera { position: absolute; inset: auto 10px 10px auto; padding: 4px 10px; border-radius: 999px; font-size: 12px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.1); }
.nsp-lab-cortes { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.nsp-lab-cortes button { position: relative; flex: 0 0 96px; aspect-ratio: 16 / 9; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: #1c1c1c; }
.nsp-lab-cortes button.ativo { border-color: var(--destaque); }
.nsp-lab-cortes img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nsp-lab-cortes span { position: absolute; right: 4px; bottom: 3px; font-size: 9.5px; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; }
.nsp-lab-fala { font-size: 12.5px; margin: 0; }
.nsp-lab-ajustes { padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.nsp-lab-linha { display: grid; grid-template-columns: 112px 1fr 34px; gap: 8px; align-items: center; font-size: 12.5px; }
.nsp-lab-linha input[type=range] { accent-color: var(--destaque); min-width: 0; }
.nsp-lab-linha .num { text-align: right; color: var(--texto-2); font-size: 12px; }
.nsp-lab-linha.desligado span:first-child { color: var(--apoio); }
.nsp-lab-linha.forte { font-size: 13.5px; margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--borda); }
.nsp-lab-blocos { display: flex; flex-direction: column; gap: 4px; }
.nsp-lab-acoes, .nsp-lab-aplicar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* editor: selo do efeito na prévia e a janela do efeito */
.quadro > .nsp-efeito-selo { position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; color: #fff; text-decoration: none;
  background: rgba(0,0,0,.5); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.1); }
.quadro > .nsp-efeito-selo svg { width: 11px; height: 11px; color: var(--destaque); }

.nsp-lab-modo { margin-bottom: 10px; align-self: flex-start; }
.nsp-lab-modo button { display: inline-flex; align-items: center; gap: 6px; }
.nsp-lab-modo svg { width: 14px; height: 14px; }
.nsp-lab-lista > #lab-lista { display: flex; flex-direction: column; gap: 8px; }
.nsp-lab-arte-cor { position: relative; overflow: hidden; background: #222; }
.nsp-lab-arte-cor img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nsp-lab-arte-cor i { position: absolute; inset: 0; mix-blend-mode: soft-light; }

/* GCs: um botão com menu (abre para cima, a barra fica perto do fim da tela) */
.nsp-gc-caixa { position: relative; }
.nsp-gc-caixa > .btn svg { width: 13px; height: 13px; }
.nsp-menu.nsp-menu-gc { top: auto; bottom: calc(100% + 8px); right: 0; min-width: 230px; }
.nsp-menu-gc button { justify-content: flex-start; }
.nsp-menu-gc button svg:last-child:not(:first-child) { margin-left: auto; color: var(--destaque); }
.nsp-menu-sep { height: 1px; background: var(--borda); margin: 6px 4px; }
.nsp-mini-chave { position: relative; flex: none; width: 26px; height: 15px; border-radius: 999px; background: rgba(255,255,255,.18); transition: background .15s; }
.nsp-mini-chave::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: transform .15s; }
.nsp-mini-chave.ligada { background: var(--destaque); }
.nsp-mini-chave.ligada::after { transform: translateX(11px); background: #111; }

/* botão da barra com algo ligado (cor/efeito, pausas): um ponto âmbar discreto, sem pintar o botão */
.btn.nsp-com-ponto { position: relative; }
.btn.nsp-com-ponto::after { content: ""; position: absolute; top: 4px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--destaque); }

/* laboratório como etapa do editor */
.nsp-lab-embutido { max-width: 1600px; margin: 0 auto; }
.nsp-lab-embutido .nsp-lab-grade { margin-top: 0; }
.nsp-lab-dica { margin: 0; font-size: 12.5px; }
.nsp-lab-rodape { display: flex; justify-content: flex-end; margin-top: 6px; }

/* linhas de configuração (campo + menu + botão): o menu de vidro não encolhe e os três têm a mesma altura */
.fonte-config > .nsp-escolha { flex: none; }
.fonte-config .nsp-escolha-gatilho.entrada { min-height: 0; height: 36px; padding: 0 14px; }
.fonte-config > .entrada, .fonte-config > .btn { height: 36px; }
.fonte-config > .btn { flex: none; padding-top: 0; padding-bottom: 0; }

/* laboratório: uma tela só; segurar o clique mostra o original */
.nsp-lab-tela { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.nsp-lab-tela figcaption { font-size: 12px; text-align: center; }
.nsp-lab-tela .nsp-lab-video { cursor: pointer; user-select: none; touch-action: none; }
.nsp-lab-tela video { position: absolute; inset: 0; }
.nsp-lab-tela .original video.depois { opacity: 0; }
.nsp-lab-selo { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: #fff;
  background: rgba(0,0,0,.5); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.1); pointer-events: none; }
.nsp-lab-tela .original .nsp-lab-selo { background: rgba(255,255,255,.85); color: #111; }

.nsp-intencao .nsp-contexto { display: block; margin-top: 4px; font-size: 11.5px; }

.nsp-janela-tema { width: min(560px, calc(100vw - 32px)); }
.nsp-janela-tema .campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13px; }

/* janela de montar: nível de IA */
.nsp-origem-ia .nsp-niveis-ia { margin: 6px 0 4px; }
.nsp-origem-ia .nsp-niveis-ia button { font-size: 12px; padding: 5px 10px; }
.nsp-origem-ia small .entrada { width: 64px; display: inline-block; padding: 2px 6px; }

/* mídia gerada por IA: sempre visível onde aparece */
.nsp-selo-ia { position: absolute; top: 4px; right: 4px; z-index: 2; padding: 1px 5px; border-radius: 4px; font-size: 9.5px; font-weight: 600;
  letter-spacing: .04em; color: #111; background: var(--destaque); pointer-events: none; }
.miniatura-corte { position: relative; }

/* idioma no cabeçalho do Roteiro: pílula compacta ao lado do Gerar roteiro */
.nsp-idioma-roteiro { width: auto; border-radius: 999px; padding: 6px 30px 6px 12px; font-size: 12px; }

/* cena desenhada: prévia (a página do render dentro do quadro) e escolha no painel do corte */
.nsp-cena-previa { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; background: #040915; }
.nsp-cena-previa.nsp-cena-espera { visibility: hidden; }  /* a próxima cena, montada antes da troca */
.nsp-cena-escolha { display: flex; flex-direction: column; gap: 8px; }
.nsp-cena-campos { display: flex; flex-direction: column; gap: 8px; }
.nsp-cena-campos .campo span { font-size: 11.5px; }
.nsp-selo-cena { position: absolute; top: 4px; left: 4px; z-index: 2; width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center;
  background: rgba(61, 139, 255, .9); color: #fff; pointer-events: none; }
.nsp-selo-cena svg { width: 10px; height: 10px; }

.nsp-selo-cena.coberto { width: 6px; height: 6px; top: 6px; left: 6px; opacity: .7; }
.nsp-cena-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.nsp-cena-linha .entrada { padding: 7px 28px 7px 10px; font-size: 12.5px; }

/* laboratório de cenas */
.nsp-labcenas { width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; }
.nsp-lab-corpo { display: grid; grid-template-columns: 1fr 300px; gap: 20px; margin-top: 12px; }
.nsp-lab-quadro { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.nsp-lab-quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.nsp-lab-moldes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 12px; }
.nsp-lab-lado { display: flex; flex-direction: column; gap: 14px; }
.nsp-lab-controle { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.nsp-lab-controle span { display: flex; justify-content: space-between; color: var(--apoio); }
.nsp-lab-controle b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.nsp-lab-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
@media (max-width: 900px) { .nsp-lab-corpo { grid-template-columns: 1fr; } }
.nsp-lab-estilo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.nsp-lab-estilo .entrada { width: auto; min-width: 180px; padding: 7px 34px 7px 12px; font-size: 13px; }
.nsp-lab-cores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nsp-lab-cor { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--apoio); cursor: pointer; }
.nsp-lab-cor input { width: 30px; height: 30px; padding: 0; border: 1px solid var(--borda); border-radius: 8px; background: none; cursor: pointer; }

/* abas do painel do corte */
.nsp-abas-corte { display: flex; width: 100%; }
.nsp-abas-corte button { flex: 1; position: relative; font-size: 12.5px; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
.nsp-marca-aba { position: absolute; top: 5px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--destaque); }
.nsp-aba-corte { display: flex; flex-direction: column; gap: 16px; }
.nsp-aba-corte[hidden] { display: none !important; }
details.nsp-intencao summary { cursor: pointer; list-style: none; }
details.nsp-intencao summary::-webkit-details-marker { display: none; }
details.nsp-intencao summary::after { content: " ▾"; opacity: .6; }
details.nsp-intencao[open] summary::after { content: " ▴"; }

/* transições entre cortes comuns na prévia (imitação do xfade do render) */
.nsp-transicao-corte { display: flex; flex-direction: column; gap: 8px; }
.nsp-trans-antes { position: absolute; inset: 0; z-index: 3; pointer-events: none; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.nsp-trans-antes > * { position: absolute; inset: 0; }
.nsp-trans-dissolver { animation-name: nsp-trans-some; }
.nsp-trans-desfocar { animation-name: nsp-trans-desfoca; }
.nsp-trans-zoom { animation-name: nsp-trans-zoom; }
.nsp-trans-empurrar { animation-name: nsp-trans-sai-esq; }
.nsp-trans-clarao { animation-name: nsp-trans-clarao; }
@keyframes nsp-trans-some { to { opacity: 0; } }
@keyframes nsp-trans-desfoca { to { opacity: 0; filter: blur(6px); } }
@keyframes nsp-trans-zoom { to { opacity: 0; transform: scale(1.35); } }
@keyframes nsp-trans-sai-esq { to { transform: translateX(-100%); } }
@keyframes nsp-trans-clarao { 50% { opacity: 1; filter: brightness(4); } to { opacity: 0; filter: brightness(4); } }

/* ---------- Plano antes de produzir (web/js/plano.js) ---------- */
.nsp-plano { width: min(1080px, calc(100vw - 48px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.nsp-plano-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.nsp-plano-cab .apoio { margin-top: 6px; font-size: 13px; max-width: 640px; }
.nsp-plano-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.nsp-plano-cartao { background: var(--superficie-2, #1c1c1c); border: 1px solid var(--borda); border-radius: 14px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nsp-plano-cartao b { font-size: 24px; font-weight: 600; color: var(--texto); }
.nsp-plano-cartao small { color: var(--apoio); font-size: 11.5px; line-height: 1.4; }
.nsp-plano-cartao.destaque { border-color: color-mix(in srgb, var(--destaque) 45%, transparent); }
.nsp-plano-cartao.destaque b { color: var(--destaque); }
.nsp-plano-fontes { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.nsp-plano-fontes span { position: relative; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--texto-2); padding: 1px 6px; border-radius: 6px; overflow: hidden; }
.nsp-plano-fontes span i { position: absolute; inset: 0; width: calc(var(--p) * 100%); background: rgba(255, 255, 255, 0.07); }
.nsp-plano-fontes span b { font-size: 12px; position: relative; }
.nsp-plano-alertas { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.nsp-plano-alertas li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--texto-2); padding: 8px 12px;
  border-radius: 10px; background: rgba(240, 170, 70, 0.08); border: 1px solid rgba(240, 170, 70, 0.18); }
.nsp-plano-alertas li svg { width: 16px; height: 16px; flex: none; color: #f0c27a; margin-top: 1px; }
.nsp-plano-alertas li[data-tipo="sem_geracao"] { background: rgba(255, 255, 255, 0.04); border-color: var(--borda); }
.nsp-plano-lista-cab { display: flex; justify-content: space-between; align-items: center; }
.nsp-plano-filtro { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--apoio); cursor: pointer; }
.nsp-plano-lista { overflow-y: auto; min-height: 120px; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; }
.nsp-plano-linha { display: grid; grid-template-columns: 78px 56px 1fr minmax(180px, 30%); gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; }
.nsp-plano-linha:hover { background: rgba(255, 255, 255, 0.03); }
.nsp-plano-linha.atencao { background: rgba(240, 170, 70, 0.05); }
.nsp-plano-linha .tc { font-size: 11.5px; color: var(--apoio); white-space: nowrap; font-variant-numeric: tabular-nums; }  /* 00:12:27:06 cabe inteiro */
.nsp-plano-mini { width: 56px; aspect-ratio: 16 / 9; border-radius: 6px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.nsp-plano-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nsp-plano-texto { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.nsp-plano-texto p { font-size: 12.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsp-plano-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.nsp-plano-meta span { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--apoio); display: inline-flex; gap: 4px; align-items: center; }
.nsp-plano-meta span svg { width: 11px; height: 11px; }
.nsp-plano-cena { color: var(--destaque) !important; background: color-mix(in srgb, var(--destaque) 14%, transparent) !important; }
.nsp-plano-aviso { color: #f0c27a !important; background: rgba(240, 170, 70, 0.12) !important; }
.nsp-plano-aviso[data-aviso="ja_tem"] { color: #9fd8a8 !important; background: rgba(110, 200, 125, 0.12) !important; }
.nsp-plano-busca { height: 34px; font-size: 12.5px; padding: 6px 10px; }
.nsp-plano-faixa { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 14px; border-radius: 999px; font-size: 12.5px; white-space: nowrap; }
.nsp-plano-faixa span { display: inline-flex; gap: 6px; align-items: center; color: var(--texto-2); }
.nsp-plano-faixa svg { width: 14px; height: 14px; }
@media (max-width: 720px) {
  .nsp-plano-linha { grid-template-columns: 44px 1fr; }
  .nsp-plano-mini { display: none; }
  .nsp-plano-busca { grid-column: 1 / -1; }
}

/* ---------- custo e lucro por vídeo (financas.js) ---------- */
.nsp-fin-cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.nsp-fin-num { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--raio); background: #1A1A1A; border: 1px solid var(--borda); }
.nsp-fin-num b { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.nsp-fin-num small { font-size: 11px; color: var(--apoio, #8A8A8A); }
.nsp-fin-num.positivo b, .nsp-fin-linha .positivo, .nsp-fin-projeto .positivo { color: #7FD69A; }
.nsp-fin-num.negativo b, .nsp-fin-linha .negativo, .nsp-fin-projeto .negativo { color: #FF8A7A; }
.nsp-fin-tabela { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: var(--raio); background: #161616; overflow: hidden; }
.nsp-fin-linha { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(6, minmax(0, 1fr)); gap: 12px; align-items: center;
  padding: 10px 14px; border-top: 1px solid var(--borda); color: inherit; text-decoration: none; font-size: 13px; }
.nsp-fin-linha:first-child { border-top: 0; }
.nsp-fin-linha.cab { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8A8A8A; background: #1A1A1A; }
a.nsp-fin-linha:hover { background: #1C1C1C; }
.nsp-fin-linha .dir { text-align: right; }
.nsp-fin-linha .nome { display: flex; flex-direction: column; min-width: 0; }
.nsp-fin-linha .nome b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsp-fin-linha .nome small { color: #8A8A8A; font-size: 11.5px; }
.nsp-fin-est { font-style: normal; font-size: 10px; margin-left: 5px; padding: 1px 5px; border-radius: 6px; border: 1px solid var(--borda); color: #8A8A8A; }
.nsp-fin-controles { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.nsp-fin-rpm .entrada { width: 120px; }
.nsp-fin-ok { font-size: 12px; color: #7FD69A; padding: 6px 10px; border: 1px solid rgba(127, 214, 154, .3); border-radius: 999px; }
.nsp-fin-projeto { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.nsp-fin-projeto > b { font-size: 26px; font-weight: 500; }
.nsp-fin-projeto .apoio { font-size: 12.5px; }
.nsp-fin-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nsp-fin-etapas li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--borda); font-size: 12.5px; }
.nsp-fin-etapas li small { font-size: 11px; }
@media (max-width: 900px) {
  .nsp-fin-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nsp-fin-linha { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .nsp-fin-linha > :nth-child(2), .nsp-fin-linha > :nth-child(6) { display: none; }
}

.nsp-voz-reserva { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #8A8A8A; margin-left: auto; cursor: pointer; }

.nsp-sfx { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borda); display: flex; flex-direction: column; gap: 8px; }
.nsp-sfx-ouvir { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }

/* estilo das cenas desenhadas na janela de montagem */
.nsp-estilos-montar { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-top: 10px; }
.nsp-estilos-montar[hidden] { display: none; }
.nsp-estilos-montar button { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; text-align: left;
  background: #1A1A1A; border: 1px solid var(--borda); color: inherit; font: inherit; font-size: 12.5px; cursor: pointer; }
.nsp-estilos-montar button:hover { background: #222; }
.nsp-estilos-montar button.ativo { border-color: var(--destaque); background: color-mix(in srgb, var(--destaque) 12%, #1A1A1A); }
.nsp-estilos-montar button span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.nsp-estilos-montar button small { font-size: 10.5px; color: #8A8A8A; }
.nsp-estilo-amostra { flex: none; width: 26px; height: 18px; border-radius: 5px; position: relative;
  background: linear-gradient(135deg, var(--b1), var(--b2)); border: 1px solid rgba(255, 255, 255, .1); }
.nsp-estilo-amostra::after { content: ""; position: absolute; left: 4px; bottom: 4px; width: 12px; height: 3px; border-radius: 2px; background: var(--a); }

/* aplicar as cenas desenhadas no vídeo inteiro (aba Layout do corte) */
.nsp-chave-cinema { display: flex; align-items: center; gap: 8px; margin: 2px 2px 10px; }
.nsp-aplicar-timeline { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px;
  background: #1A1A1A; border: 1px solid var(--borda); }
.nsp-aplicar-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.nsp-aplicar-cab .apoio { font-size: 11.5px; }
.nsp-aplicar-timeline .segmentado { align-self: stretch; }
.nsp-aplicar-timeline .segmentado button { flex: 1; }
.nsp-aplicar-timeline small { font-size: 11.5px; line-height: 1.4; }
.nsp-este-corte { margin-top: 6px; }

/* dica no "!" (ui.js, ajuda): o ícone fica na linha do texto; o balão flutua (vidro) */
.nsp-ajuda { display: inline-flex; vertical-align: -3px; width: 16px; height: 16px; margin-left: 4px; padding: 0; border: 0;
  background: none; color: #8A8A8A; cursor: help; border-radius: 50%; }
.nsp-ajuda svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.nsp-ajuda:hover, .nsp-ajuda:focus-visible { color: var(--texto, #fff); outline: none; }
.nsp-ajuda-balao { position: fixed; z-index: 1000; max-width: 280px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px;
  line-height: 1.45; color: #e8e8e8; pointer-events: none; opacity: 0; transform: translateY(-2px); transition: opacity .12s, transform .12s;
  background: rgba(16, 16, 16, .94); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
.nsp-ajuda-balao.visivel { opacity: 1; transform: none; }

/* estilo do vídeo + laboratório na mesma linha (aba Layout) */
.nsp-estilo-linha { display: flex; gap: 8px; align-items: stretch; }
.nsp-estilo-linha > :first-child { flex: 1; min-width: 0; }
.nsp-estilo-linha #abrir-labcenas { flex: none; white-space: nowrap; height: auto; min-height: 40px; }

/* botão só com ícone (a explicação fica no title): quadrado, na mesma altura dos outros */
.btn.nsp-so-icone { width: 32px; padding: 0; justify-content: center; }
.btn.nsp-so-icone svg { width: 15px; height: 15px; }

/* corte selecionado + ações dele na barra da timeline, ao lado do tempo */
.nsp-corte-tl { display: inline-flex; align-items: center; gap: 2px; margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--borda); }
.nsp-corte-tl .rotulo { margin-right: 6px; white-space: nowrap; }
.nsp-corte-tl:empty { display: none; }

/* tradução na prévia: só para conferir, nunca vai para o vídeo (borda tracejada e etiqueta deixam isso claro) */
.nsp-trad-previa { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); z-index: 6; max-width: 78%;
  padding: 8px 14px 10px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); text-align: center; pointer-events: none; }
.nsp-trad-previa .rotulo { display: block; font-size: 9.5px; letter-spacing: .14em; color: var(--destaque); margin-bottom: 3px; }
.nsp-trad-previa p { margin: 0; font-size: 14px; line-height: 1.35; font-style: italic; color: #f2f2f2; }
.btn.nsp-so-icone.ativo { color: var(--destaque); border-color: color-mix(in srgb, var(--destaque) 50%, transparent); }

.nsp-faixa-sem-ia span { color: #f2d27a; }

/* amostra do "Sem tema": quadro vazio tracejado (só a mídia) */
.nsp-estilo-amostra.nsp-sem-tema { background: transparent; border: 1px dashed rgba(255, 255, 255, .35); }
.nsp-estilo-amostra.nsp-sem-tema::after { display: none; }

/* conexão com a Meta (Facebook e Instagram) */
.nsp-passos-meta { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.5; color: #d6d6d6; }
.nsp-passos-meta a { color: var(--destaque); }
.nsp-copiar { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.nsp-copiar code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 10px; border-radius: 8px;
  background: #101010; border: 1px solid var(--borda); font-size: 12px; }
.nsp-form-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.nsp-canal-novo .nsp-ico-yt + .nsp-ico-yt { margin-left: -6px; }

/* Sala de controle simples: um número (visualizações), a rede no seletor, o resto em "ver mais" */
.nsp-sala-grade.nsp-sala-simples { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); }
.nsp-sala-principal { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--raio); background: #161616;
  border: 1px solid var(--borda); min-width: 0; }
.nsp-sala-redes { align-self: flex-start; margin-bottom: 10px; }
.nsp-sala-redes button { display: inline-flex; align-items: center; gap: 6px; }
.nsp-sala-redes .nsp-ico-yt { width: 14px; height: 14px; }
.nsp-sala-valor { display: flex; align-items: baseline; gap: 12px; }
.nsp-sala-valor b { font-size: 44px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.nsp-sala-spark { margin-top: 6px; max-width: 420px; }
.nsp-ver-mais.nsp-ver-mais { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; background: none;
  border: 0; padding: 4px 0; color: var(--apoio); font: inherit; font-size: 12.5px; cursor: pointer; }
.nsp-ver-mais[aria-expanded="true"] svg { transform: rotate(180deg); }
.nsp-ver-mais svg { width: 14px; height: 14px; transition: transform .15s; }
.nsp-sala-mais { display: flex; flex-direction: column; margin-top: 6px; border-top: 1px solid var(--borda); }
.nsp-sala-linha { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--borda); font-size: 13px; }
.nsp-sala-linha:has(> span:first-child) { grid-template-columns: 1fr auto auto; }
.nsp-sala-linha .nsp-ico-yt { width: 16px; height: 16px; }
.nsp-sala-linha b { font-size: 15px; font-weight: 500; }
@media (max-width: 900px) { .nsp-sala-grade.nsp-sala-simples { grid-template-columns: 1fr; } }

/* publicar no Facebook e no Instagram (janela de Publicar) */
.nsp-pub-meta { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda); }
.nsp-pub-rede { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
.nsp-pub-rede > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.nsp-pub-rede small { font-size: 11.5px; color: #8A8A8A; }
.nsp-pub-rede small a { color: var(--destaque); }
.nsp-pub-rede .nsp-ico-yt { width: 18px; height: 18px; flex: none; }
.nsp-pub-rede.apagada { opacity: .55; cursor: default; }
.nsp-pub-meta #enviar-meta { align-self: flex-start; }

/* Layout › Tela final: o bloco no fim da timeline e o painel */
.faixa .bloco.nsp-bloco-fim { background: repeating-linear-gradient(135deg, #1c1c1c 0 10px, #222 10px 20px); border-left: 2px solid var(--destaque); }
.faixa .bloco.nsp-bloco-fim.desligada { opacity: .45; border-left-color: var(--borda); }
.nsp-tf-painel { display: flex; flex-direction: column; gap: 12px; }
.nsp-tf-painel .secao-cab { display: flex; align-items: center; gap: 8px; }
.nsp-tf-campos { display: flex; flex-direction: column; gap: 10px; }

/* Saída › Prévia antes de exportar: o quadro do momento e a tira dos cortes para escolher */
.nsp-saida-quadro { position: relative; overflow: hidden; }
.nsp-saida-quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nsp-saida-quadro span { position: relative; z-index: 1; }
.nsp-saida-quadro span[hidden] { display: none; }
.nsp-saida-tira { display: flex; width: 100%; height: 34px; margin-top: 10px; border-radius: 8px; overflow: hidden; cursor: pointer; gap: 1px; background: #000; }
.nsp-saida-tira i { min-width: 2px; background: #222 center / cover no-repeat; opacity: .7; transition: opacity .15s; }
.nsp-saida-tira i:hover, .nsp-saida-tira i.sel { opacity: 1; box-shadow: inset 0 0 0 2px var(--destaque); }
/* com a tira e a régua embaixo, a caixa da prévia cresce (em vez dos 300 px fixos) e o quadro ocupa a largura */
.previa-saida:has(.nsp-saida-quadro) { display: block; height: auto; background: none; overflow: visible; }
.previa-saida .moldura.nsp-saida-quadro { width: 100%; height: auto; max-height: none; border-radius: var(--raio); }
.previa-saida .moldura.nsp-saida-quadro::after { display: none; }
.previa-saida .moldura.nsp-saida-quadro span { background: rgba(0, 0, 0, .55); padding: 4px 10px; border-radius: 999px; }
.previa-saida .moldura.nsp-saida-quadro.vertical, .previa-saida .moldura.nsp-saida-quadro.quadrado { width: auto; height: 340px; margin: 0 auto; }

/* =====================================================================================================
   Efeitos (efeitos.js): imitação no navegador, comparação arrastável e a timeline do vídeo
   ===================================================================================================== */
.nsp-lab-video.exato video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* comparação: o depois por cima, recortado até a linha (--div) */
.nsp-lab-tela .nsp-lab-video video.depois { clip-path: inset(0 0 0 var(--div, 50%)); }
.nsp-lab-linha-div { position: absolute; top: 0; bottom: 0; left: var(--div, 50%); width: 2px; margin-left: -1px; background: #fff; z-index: 2;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35); pointer-events: none; }
.nsp-lab-linha-div i { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.nsp-lab-linha-div i::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: #111; letter-spacing: 2px; }
.nsp-ef-lado { position: absolute; bottom: 10px; z-index: 2; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; color: #fff;
  background: rgba(0,0,0,.55); backdrop-filter: blur(8px); pointer-events: none; }
.nsp-ef-lado.esq { left: 10px; }
.nsp-ef-lado.dir { right: 10px; }
.nsp-lab-tela .nsp-lab-video:has(.nsp-lab-linha-div) { cursor: ew-resize; }
/* imitação: a foto do corte com filtro CSS e camadas (aproximado; o exato é o render) */
.nsp-ef-imita { position: absolute; inset: 0; overflow: hidden; background: #000; }
.nsp-ef-imita img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nsp-ef-imita.treme img { animation: nsp-ef-treme 1.7s ease-in-out infinite alternate; }
.nsp-ef-camadas { position: absolute; inset: 0; pointer-events: none; }
.nsp-ef-camadas i { position: absolute; inset: 0; }
.ef-grao { background-size: 180px 180px; mix-blend-mode: overlay; animation: nsp-ef-grao .5s steps(4) infinite; }
.ef-riscos { background: linear-gradient(90deg, transparent 0 22%, rgba(255,255,255,.55) 22.1%, transparent 22.3% 71%, rgba(255,255,255,.4) 71.1%, transparent 71.25%);
  animation: nsp-ef-riscos 1.1s steps(3) infinite; }
.ef-poeira { background: radial-gradient(circle at 18% 30%, rgba(255,255,255,.8) 0 1.5px, transparent 2.5px),
  radial-gradient(circle at 63% 72%, rgba(0,0,0,.7) 0 2px, transparent 3px), radial-gradient(circle at 82% 18%, rgba(255,255,255,.7) 0 1px, transparent 2px),
  radial-gradient(circle at 35% 85%, rgba(0,0,0,.6) 0 1.5px, transparent 2.5px); animation: nsp-ef-poeira .7s steps(3) infinite; }
.ef-tremula { background: #000; opacity: var(--o); animation: nsp-ef-tremula .23s steps(2) infinite; }
.ef-linhas { background: repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 1px, transparent 1px 3px); }
.ef-ruido { background-size: 60px 60px; image-rendering: pixelated; }
.ef-pixels { background: repeating-linear-gradient(0deg, rgba(0,0,0,.6) 0 1px, transparent 1px 3px),
  repeating-linear-gradient(90deg, rgba(0,0,0,.6) 0 1px, transparent 1px 3px); }
.ef-vinheta { background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.9) 100%); }
.ef-brilho { background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.55), transparent 70%); mix-blend-mode: screen; filter: blur(8px); }
.ef-luz { background: radial-gradient(circle at 85% 15%, rgba(255,170,70,.9), rgba(200,70,10,.45) 30%, transparent 60%); mix-blend-mode: screen;
  animation: nsp-ef-luz 4s ease-in-out infinite alternate; }
.ef-faixas { background: linear-gradient(#000 0 12.8%, transparent 12.8% 87.2%, #000 87.2%); }
@keyframes nsp-ef-grao { 0% { background-position: 0 0; } 25% { background-position: -40px 30px; } 50% { background-position: 30px -50px; } 75% { background-position: -60px -20px; } }
@keyframes nsp-ef-riscos { 0% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(14%); opacity: .4; } 100% { transform: translateX(-9%); opacity: .9; } }
@keyframes nsp-ef-poeira { 0% { transform: translate(0, 0); } 50% { transform: translate(7%, -11%) scale(1.2); } 100% { transform: translate(-9%, 6%); } }
@keyframes nsp-ef-tremula { 0% { opacity: var(--o); } 100% { opacity: calc(var(--o) * .2); } }
@keyframes nsp-ef-treme { 0% { transform: translate(calc(var(--tremor) * -.5), 0); } 50% { transform: translate(0, calc(var(--tremor) * .6)); } 100% { transform: translate(calc(var(--tremor) * .5), calc(var(--tremor) * -.3)); } }
@keyframes nsp-ef-luz { from { transform: translate(0, 0); opacity: .5; } to { transform: translate(-12%, 8%); opacity: 1; } }
/* timeline do vídeo nos efeitos */
.nsp-lab-tl { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.nsp-lab-tl-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nsp-lab-tl-cab .btn-redondo { width: 36px; height: 36px; }
.nsp-lab-tocar button { font-size: 12px; padding: 6px 10px; }
.nsp-lab-tl-faixa { position: relative; display: flex; gap: 2px; height: 58px; }
.nsp-lab-bloco { position: relative; min-width: 3px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; overflow: hidden;
  background: #222 center / cover no-repeat; outline: 2px solid transparent; outline-offset: -2px; }
.nsp-lab-bloco.vazio { background: repeating-linear-gradient(135deg, #1a1a1a 0 6px, #222 6px 12px); }
.nsp-lab-bloco.ativo { outline-color: var(--destaque); }
.nsp-lab-bloco.marcado { outline-color: #8ab4ff; }
.nsp-lab-bloco.marcado::after { content: ""; position: absolute; inset: 0; background: rgba(120,160,255,.22); }
.nsp-lab-bloco.tocando { outline-color: rgba(255,255,255,.7); }
.nsp-lab-tag { position: absolute; left: 3px; right: 3px; bottom: 3px; padding: 1px 5px; border-radius: 4px; font-size: 9.5px; line-height: 1.4;
  color: #ddd; background: rgba(0,0,0,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.nsp-lab-tag.proprio { background: var(--destaque); color: #111; }
.nsp-lab-agulha { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--destaque); pointer-events: none; z-index: 2;
  border-radius: 2px; box-shadow: 0 0 6px rgba(0,0,0,.6); }
.nsp-lab-tl-dica { margin: 0; font-size: 11.5px; }
/* tela cheia (só o efeito) ou dividida; o botão no canto alterna */
.nsp-lab-tela .nsp-lab-video.cheia video.depois { clip-path: none; }
.nsp-lab-tela-btn { position: absolute; top: 10px; right: 10px; z-index: 3; padding: 5px 11px; border-radius: 999px; font-size: 12px; color: #fff;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); cursor: pointer; }
.nsp-lab-tela-btn:hover { background: rgba(0,0,0,.75); }
/* Efeitos › aplicar: duas colunas iguais, o que ocupa a linha toda embaixo e o principal (amarelo) por último */
.nsp-lab-aplicar-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nsp-lab-aplicar-grade .btn { width: 100%; justify-content: center; text-align: center; }
.nsp-lab-aplicar-grade .inteiro { grid-column: 1 / -1; }
.nsp-lab-aplicar-grade .btn-principal { margin-top: 4px; }
/* Efeitos › timeline: as cenas embaixo dos blocos (mesma proporção dos blocos); a do corte escolhido se destaca */
.nsp-lab-tl-cenas { position: relative; height: 16px; margin-top: -4px; }
.nsp-lab-cena { position: absolute; top: 0; bottom: 0; min-width: 3px; padding: 0; border: 0; background: none; cursor: pointer; }
.nsp-lab-cena::before { content: ""; position: absolute; left: 1px; right: 1px; top: 3px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.12); }
.nsp-lab-cena:hover::before { background: rgba(255,255,255,.3); }
.nsp-lab-cena span { position: absolute; left: 2px; top: 6px; font-size: 9.5px; color: var(--apoio); white-space: nowrap; opacity: 0; }
.nsp-lab-cena:hover span { opacity: 1; }
.nsp-lab-cena.ativa::before { background: var(--destaque); height: 3px; }
.nsp-lab-cena.ativa span { opacity: 1; color: var(--destaque); font-weight: 600; }
/* Entrada › fontes: Google Imagens e YouTube sempre ligados (sem botão), com o mesmo desenho da chave ligada */
.nsp-fonte-fixa { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.nsp-fonte-fixa i { width: 36px; height: 20px; border-radius: 999px; background: var(--destaque); position: relative; flex: none; opacity: .55; }
.nsp-fonte-fixa i::after { content: ""; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: #111; }
.nsp-fonte-fixa span { font-size: 11.5px; color: var(--apoio); }
/* Cenas › prévia enquanto a montagem busca as imagens */
.previa .nsp-previa-buscando { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.nsp-previa-buscando b { font-size: 14px; font-weight: 500; color: var(--texto); }
.nsp-previa-buscando small { font-size: 12px; color: var(--apoio); max-width: 320px; }
.nsp-girando { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--destaque);
  animation: nsp-gira .9s linear infinite; }
/* Destacar a pessoa (corte com recorte): fundo desfocado e escuro, a pessoa nítida por cima com sombra leve */
.previa .quadro img.nsp-rc-fundo { filter: blur(6px) brightness(.78) saturate(.75); }
.previa .quadro img.nsp-rc-frente { filter: drop-shadow(0 .6vw 1vw rgba(0,0,0,.45)); }
.nsp-recorte-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Hub › conectar Facebook e Instagram: as duas logos lado a lado */
.nsp-logos-meta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.nsp-logos-meta svg { flex: none; }

/* Configurações em abas */
.nsp-cfg-abas { align-self: flex-start; position: sticky; top: 84px; z-index: 5; }
.nsp-cfg-abas button { position: relative; padding: 0 18px; font-size: 13px; }
.nsp-cfg-falta { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--destaque); }
.nsp-cfg-painel { display: flex; flex-direction: column; gap: 16px; }
.nsp-cfg-painel[hidden] { display: none; }
.nsp-cfg-cartao > .rotulo { margin-bottom: 4px; }
.nsp-cfg-linha { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.nsp-cfg-linha:last-child { border-bottom: 0; }
.nsp-cfg-nome { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nsp-cfg-nome b { font-weight: 500; }
.nsp-cfg-acoes { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.nsp-cfg-acoes select.entrada, .nsp-cfg-acoes input.entrada { width: 300px; padding: 9px 14px; }
.nsp-cfg-campo { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nsp-cfg-campo[hidden] { display: none; }
.nsp-cfg-campo .entrada { flex: 1; min-width: 200px; padding: 9px 14px; }
.nsp-cfg-campo > .nsp-erro-campo { flex-basis: 100%; margin-top: 0; }
.nsp-cfg-largo { grid-column: auto; min-width: 380px; }
.nsp-cfg-link { font-size: 12px; color: var(--apoio); white-space: nowrap; }
.nsp-cfg-estado { font-size: 12px; color: var(--apagado); white-space: nowrap; padding: 4px 10px; border-radius: var(--pilula); background: var(--fundo-2); }
.nsp-cfg-estado.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.nsp-cfg-nota { font-size: 12px; margin: 10px 0 0; }
/* Plataforma (painel do administrador): a mesma tela, sem o topo do app */
.nsp-plat { display: flex; flex-direction: column; gap: 18px; }
.nsp-adm-pagina .nsp-cfg-abas { top: 16px; }
.nsp-adm .nsp-plat { margin: 0; max-width: 920px; }
.nsp-plat-niveis { display: flex; flex-direction: column; }
.nsp-plat-niveis > div { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--borda); align-items: start; }
.nsp-plat-niveis > div:last-child { border-bottom: 0; }
.nsp-plat-niveis .cab { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--apoio); padding-top: 4px; }
.nsp-plat-niveis .nivel { font-weight: 500; display: flex; align-items: center; gap: 6px; }
.nsp-plat-niveis .nivel .chip { font-style: normal; font-size: 10px; }
.nsp-plat-niveis span > b { display: block; font-weight: 500; font-size: 13px; word-break: break-all; }
.nsp-plat-niveis small { color: var(--apoio); font-size: 11.5px; }
@media (max-width: 760px) { .nsp-plat-niveis > div { grid-template-columns: 1fr; gap: 4px; } .nsp-plat-niveis .cab { display: none; } }
/* Configurações › Conexões: as contas do cliente */
.nsp-cx-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.nsp-cx-cab .rotulo { display: flex; align-items: center; gap: 6px; }
.nsp-cx-avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; object-fit: cover; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 600; background: var(--superficie-2); border: 1px solid var(--borda); margin-right: 4px; }
.nsp-cfg-nome small.apoio { font-size: 12px; margin-left: 4px; white-space: nowrap; }
.nsp-con-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .nsp-cfg-abas { position: static; overflow-x: auto; max-width: 100%; }
  .nsp-cfg-linha { grid-template-columns: 1fr; }
  .nsp-cfg-acoes { justify-content: flex-start; flex-wrap: wrap; }
  .nsp-cfg-acoes select.entrada, .nsp-cfg-acoes input.entrada, .nsp-cfg-largo { width: 100%; min-width: 0; }
}

/* Finanças: projetos descartados que gastaram API */
.nsp-fin-descartados { margin-top: 12px; font-size: 12.5px; color: var(--apoio); }
.nsp-fin-descartados summary { cursor: pointer; padding: 6px 0; }
.nsp-fin-descartados summary:hover { color: var(--texto); }
.nsp-fin-descartado { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-top: 1px solid var(--borda); }
.nsp-fin-descartado small { margin-left: 8px; color: var(--apagado); }
.nsp-fin-descartado b { font-weight: 500; color: var(--texto); }

/* botão Cancelar na barra de progresso */
.nsp-prog-dir { display: inline-flex; align-items: center; gap: 12px; }
.nsp-prog-cancelar { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--texto);
  border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.nsp-prog-cancelar:hover { background: rgba(255,255,255,.12); }
.nsp-prog-cancelar:disabled { opacity: .6; cursor: default; }

/* laboratório de cenas: logo da marca do estilo próprio */
.nsp-lab-logo { display: flex; align-items: center; gap: 8px; }
.nsp-lab-logo img { height: 34px; max-width: 120px; object-fit: contain; padding: 4px 8px; border-radius: 8px; background: #0b0b0b; border: 1px solid var(--borda); }

/* janela de montar: os cartões soltos depois do grupo de origens têm o mesmo respiro do grupo */
.nsp-janela-montar .nsp-origens + .nsp-origem,
.nsp-janela-montar > .nsp-origem + .nsp-origem { margin-top: 8px; }
.nsp-janela-montar .nsp-resumo-montagem { margin-top: 16px; }
.nsp-janela-montar .acao-final { margin-top: 18px; }

/* editor travado enquanto a montagem busca a mídia: dá para tocar, navegar e dar zoom, não para editar */
.estudio.nsp-travado #faixa, .estudio.nsp-travado #faixa-gc, .estudio.nsp-travado #faixa-musica,
.estudio.nsp-travado #painel, .estudio.nsp-travado #dividir, .estudio.nsp-travado .nsp-gc-controles,
.estudio.nsp-travado #editar-tema, .cenas-tira.nsp-travado { pointer-events: none; opacity: .5; transition: opacity var(--transicao); }

/* menu ⋯ do cartão de vídeo: solto na página (o cartão corta o que passa da borda) */
.nsp-menu.nsp-menu-solto { position: fixed; right: auto; z-index: 80; }

/* editor: a marca do vídeo num círculo antes do título */
.nsp-marca-projeto { flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--superficie-2, #1c1c1c); border: 1px solid var(--borda); font-size: 17px; font-weight: 600; color: var(--texto); margin-right: 6px; }
.nsp-marca-projeto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* filtro todos · imagens · vídeos na aba ativa das opções do corte */
.nsp-abas-opcoes button svg { width: 12px; height: 12px; vertical-align: -2px; margin-left: 2px; opacity: .7; }
.nsp-menu-filtro { min-width: 140px; }
.nsp-menu-filtro button.ativo { color: var(--destaque); }

/* desfazer / refazer: vidro no canto da prévia, aparece com o mouse em cima (a barra da timeline fica limpa) */
.nsp-previa-desfazer { position: absolute; top: 14px; left: 14px; z-index: 6; display: flex; gap: 2px; padding: 4px;
  border-radius: 999px; opacity: 0; transition: opacity var(--transicao); }
.previa:hover .nsp-previa-desfazer, .nsp-previa-desfazer:focus-within { opacity: 1; }
.nsp-previa-desfazer button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--texto);
  display: grid; place-items: center; cursor: pointer; }
.nsp-previa-desfazer button:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.nsp-previa-desfazer button:disabled { opacity: .3; cursor: default; }
.nsp-previa-desfazer svg { width: 17px; height: 17px; }
/* o tempo total não quebra em duas linhas */
.controles .timecode, .controles .timecode + .apoio { white-space: nowrap; }

/* embaixo da timeline: só "Tema de busca" + "!"; o resumo do vídeo fica no balão */
.nsp-info-tl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.nsp-ajuda-balao { white-space: pre-line; }  /* quebra de linha no texto da dica vira linha nova no balão */
/* "Montar de novo" e "Ir para efeitos": 8 px entre eles, como dentro do grupo das ferramentas */
#montar-de-novo + #ir-efeitos { margin-left: -4px; }

/* fotos da abertura (Trailer, Mosaico e Pergunta): resumo no painel e janela para marcar */
.nsp-galeria-resumo { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); }
.nsp-galeria-cab { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.nsp-galeria-mini { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.nsp-galeria-mini img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; display: block; }
.nsp-galeria-resumo .btn { align-self: flex-start; }
.nsp-galeria-janela { width: min(980px, calc(100vw - 48px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.nsp-galeria-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); grid-auto-rows: max-content; align-content: start;
  gap: 8px; overflow-y: auto; padding: 2px; min-height: 0; flex: 1; }
.nsp-galeria-item { position: relative; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #111; cursor: pointer;
  aspect-ratio: 1; }  /* quadradinho */
.nsp-galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .75; transition: opacity var(--transicao); }
.nsp-galeria-item:hover img, .nsp-galeria-item.ativo img { opacity: 1; }
.nsp-galeria-item.ativo { border-color: var(--destaque); }
.nsp-galeria-item .tc { position: absolute; left: 6px; bottom: 5px; font-size: 10.5px; color: #fff; text-shadow: 0 1px 3px #000; }
.nsp-galeria-item b { position: absolute; top: 6px; right: 6px; min-width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
  font-size: 12px; background: var(--destaque); color: #141210; }
.nsp-galeria-item b:empty { display: none; }
.nsp-galeria-janela .acao-final { margin-top: 14px; display: flex; gap: 8px; }

/* Efeitos › timeline com muitos cortes (vídeo longo): blocos colados, sem largura mínima, cabe no cartão;
   a etiqueta do efeito vira um filete embaixo (o nome fica na dica do bloco) */
.nsp-lab-tl-faixa.densa { gap: 1px; }
.nsp-lab-tl-faixa.densa .nsp-lab-bloco { min-width: 0; border-radius: 2px; }
.nsp-lab-tl-faixa.densa .nsp-lab-tag { left: 0; right: 0; bottom: 0; height: 3px; padding: 0; border-radius: 0; font-size: 0; }

/* card de progresso com várias tarefas: uma linha cada; a de outro vídeo é mais discreta e abre o vídeo ao clicar */
.progresso-flutuante { display: flex; flex-direction: column; gap: 12px; }
.progresso-flutuante .nsp-prog-tarefa .linha { margin-bottom: 8px; }
.nsp-prog-txt { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.nsp-prog-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsp-prog-tarefa + .nsp-prog-tarefa { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.nsp-prog-tarefa.de-fora { opacity: .78; cursor: pointer; }
.nsp-prog-tarefa.de-fora:hover { opacity: 1; }
.nsp-prog-tarefa.de-fora .barra { height: 3px; }

/* Publicar: créditos da descrição (só os obrigatórios · todos · nenhum) */
.nsp-pub-creditos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.nsp-pub-creditos > small { margin-right: auto; }
.nsp-pub-creditos .segmentado button { height: 26px; padding: 0 10px; font-size: 11.5px; }

/* Produção: link para o vídeo publicado, só o símbolo do YouTube */
.nsp-yt-link { display: inline-flex; align-self: flex-start; margin-top: 6px; width: 26px; height: 19px; border-radius: 5px;
  transition: transform var(--transicao), filter var(--transicao); }
.nsp-yt-link svg { width: 100%; height: 100%; display: block; }
.nsp-yt-link:hover { transform: scale(1.08); filter: brightness(1.1); }

/* título longo: encolhe com "…" e as etapas ficam sempre na mesma linha, à direita */
.editor-cab { flex-wrap: nowrap; }
.editor-cab > div:first-child { flex: 1 1 auto; min-width: 0; }
.editor-cab > .etapas { flex: none; margin-left: auto; }
.nsp-titulo-projeto { min-width: 0; }
.nsp-titulo-projeto .nome-projeto { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
/* não coube: as últimas letras somem num degradê (em vez de "…"); editando, o texto volta inteiro */
.nsp-titulo-projeto .nome-projeto.cortado:not(:focus) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.2em), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 2.2em), transparent); }

/* o card de progresso fica por cima das janelas (Publicar, plano, montagem): o fundo escuro não o cobre */
.progresso-flutuante { z-index: 90; }

/* perfil da marca: orientações para a IA ocupam a linha inteira */
.nsp-perfil-diretrizes { grid-column: 1 / -1; }
.nsp-perfil-diretrizes > span { display: inline-flex; align-items: center; gap: 6px; }
.nsp-perfil-diretrizes textarea { min-height: 72px; }

/* fontes que vêm com o app (web/fonts, OFL): a prévia dos GCs da marca usa as mesmas do vídeo */
/* fontes livres que vêm com o app (web/fonts, OFL): a mesma letra no PC e no servidor do SaaS (12/10/2026) */
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-semibold.ttf") format("truetype"); font-weight: 500 600; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-bold.ttf") format("truetype"); font-weight: 700 900; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-semibold.ttf") format("truetype"); font-weight: 100 600; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-bold.ttf") format("truetype"); font-weight: 700; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-extrabold.ttf") format("truetype"); font-weight: 800 900; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-regular.ttf") format("truetype"); font-weight: 100 400; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-semibold.ttf") format("truetype"); font-weight: 500 600; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-bold.ttf") format("truetype"); font-weight: 700 900; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courier-prime-regular.ttf") format("truetype"); font-weight: 100 500; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courier-prime-bold.ttf") format("truetype"); font-weight: 600 900; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-regular.ttf") format("truetype"); font-weight: 100 500; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-bold.ttf") format("truetype"); font-weight: 600 900; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-regular.ttf") format("truetype"); font-weight: 100 500; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-bold.ttf") format("truetype"); font-weight: 600 900; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-regular.ttf") format("truetype"); font-weight: 100 500; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-bold.ttf") format("truetype"); font-weight: 600 900; }
@font-face { font-family: "Anton"; src: url("../fonts/anton-regular.ttf") format("truetype"); font-weight: 100 900; }
@font-face { font-family: "Archivo Black"; src: url("../fonts/archivo-black-regular.ttf") format("truetype"); font-weight: 100 900; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display-bold.ttf") format("truetype"); font-weight: 100 900; font-style: normal; }
@font-face { font-family: "Poiret One"; src: url("../fonts/poiret-one-regular.ttf") format("truetype"); font-weight: 100 900; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-light.ttf") format("truetype"); font-weight: 100 400; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-medium.ttf") format("truetype"); font-weight: 500 900; }
@font-face { font-family: "Archivo Condensed"; src: url("../fonts/archivo-condensed-black.ttf") format("truetype"); font-weight: 100 900; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-semibold.ttf") format("truetype"); font-weight: 100 900; }
@font-face { font-family: "Oswald"; src: url("../fonts/oswald-bold.ttf") format("truetype"); font-weight: 100 900; }
@font-face { font-family: "Alfa Slab One"; src: url("../fonts/alfa-slab-one.ttf") format("truetype"); font-weight: 100 900; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-semibold.ttf") format("truetype"); font-weight: 100 900; }

/* faixa de voz da timeline (editor.js, pipeline/onda.py): a onda da narração no fundo e as frases por cima; frase que
   não cabe some na opacidade no fim (sem "…") */
.nsp-faixa-voz { position: relative; height: 34px; margin-top: 6px; border-radius: 6px; background: #0d1018; overflow: hidden;
  contain: layout paint; }
.nsp-voz-onda { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.nsp-voz-frase { position: absolute; top: 0; bottom: 0; z-index: 1; border-left: 1px solid rgba(140, 180, 255, .22);
  display: flex; align-items: center; padding: 0 6px; cursor: pointer; overflow: hidden; }
.nsp-voz-frase:hover { background: rgba(140, 180, 255, .08); }
.nsp-voz-frase span { flex: 1; min-width: 0; font-size: 11px; color: rgba(225, 233, 250, .85); white-space: nowrap; overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }

/* página do canal: "mudar de marca" discreto ao lado do nome da marca */
.nsp-mudar-marca { color: var(--apoio, #8a8a8a); text-decoration: underline; text-underline-offset: 2px; letter-spacing: .08em; }
.nsp-mudar-marca:hover { color: #fff; }

/* laboratório: miniaturas da abertura e da tela final da marca */
.nsp-lab-logo video { height: 34px; width: 60px; object-fit: cover; border-radius: 8px; border: 1px solid var(--borda); background: #000; }
.nsp-lab-logo img[src*="/peca/"] { width: 60px; max-width: 60px; object-fit: cover; padding: 0; }
.nsp-abertura-marca { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.nsp-abertura-marca video { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--borda); background: #000; }
.nsp-abertura-marca .campo { flex: 1; }

/* revisão do áudio (tela de Transcrição): só o vermelho aparece, discreto */
.nsp-rev-texto { padding: 6px 2px; line-height: 1.5; }
.nsp-rev-alerta { cursor: pointer; text-decoration: underline; text-decoration-color: #e5484d; text-decoration-thickness: 2px;
  text-underline-offset: 5px; }
.nsp-rev-alerta:hover { text-decoration-color: #ff6b6f; }
.nsp-rev-indicador { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border: 0; background: none; color: var(--apoio, #8a8a8a);
  font: inherit; font-size: 12.5px; cursor: pointer; padding: 6px 4px; }
.nsp-rev-indicador i { width: 7px; height: 7px; border-radius: 50%; background: #e5484d; }
.nsp-rev-indicador:hover { color: #fff; }
.nsp-rev-pop { position: fixed; z-index: 60; padding: 14px 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 8px; }
.nsp-rev-original { margin: 0; font-size: 15px; line-height: 1.45; color: #fff; }
.nsp-rev-pt { margin: 0; font-size: 13px; line-height: 1.45; color: var(--apoio, #8a8a8a); }
.nsp-rev-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* trilha por trechos: cada faixa num bloco da faixa de música da timeline */
.faixa-musica.nsp-mus-trechos { position: relative; padding: 0; gap: 0; background: rgba(120, 200, 140, .05); }
.nsp-mus-trecho { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 5px; padding: 0 8px 0 10px;
  overflow: hidden; white-space: nowrap; font-size: 11px; color: #cfe9d4; cursor: pointer;
  background: rgba(120, 200, 140, .13); border-left: 1px solid rgba(120, 200, 140, .55); border-radius: 0 5px 5px 0; }
.nsp-mus-trecho:nth-child(even) { background: rgba(120, 200, 140, .2); }
.nsp-mus-trecho:hover { background: rgba(120, 200, 140, .3); }
.nsp-mus-trecho span { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
.nsp-mus-borda { position: absolute; left: -4px; top: 0; bottom: 0; width: 9px; cursor: ew-resize; z-index: 2; }
.nsp-mus-borda:hover { background: rgba(120, 200, 140, .55); }
.nsp-mus-menu button { display: flex; align-items: center; gap: 8px; width: 100%; }
.nsp-mus-menu svg { width: 13px; height: 13px; flex: none; }

/* revisão: com "Regerar todos" os botões não cabem ao lado do título; o título fica inteiro e os botões descem */
.revisao > .secao-cab { flex-wrap: wrap; }
.revisao > .secao-cab > div:first-child { flex: 1 1 320px; min-width: 300px; }
.revisao > .secao-cab > div:last-child { flex: 1 1 100%; flex-wrap: wrap; }
.revisao > .secao-cab #ir-cenas { margin-left: auto; }  /* a ação principal sempre na direita */
.nsp-rev-indicador.btn { color: var(--texto); background: rgba(255,255,255,.04); border: 1px solid var(--borda-forte); padding: 0 14px; font-size: 13px; }
.nsp-rev-indicador.btn:hover { background: rgba(255,255,255,.09); }
.nsp-rev-indicador svg { width: 13px; height: 13px; color: var(--apoio); }
.nsp-rev-menu button small { margin-left: auto; padding-left: 12px; color: var(--apoio); font-size: 11px; }

/* ---------- piloto automático (web/js/piloto.js) ---------- */
.nsp-janela.nsp-piloto { width: 640px; }
.nsp-piloto-cab { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.nsp-piloto-selo { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--destaque) 18%, transparent); color: var(--destaque); }
.nsp-piloto-selo svg { width: 18px; height: 18px; }
.nsp-piloto-rot { margin: 18px 0 8px; }
.nsp-piloto-inicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nsp-piloto-inicio { text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--borda); background: rgba(255,255,255,.03);
  color: var(--texto); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.nsp-piloto-inicio small { color: var(--apoio); font-size: 11.5px; line-height: 1.4; }
.nsp-piloto-inicio.ativo { border-color: var(--destaque); background: color-mix(in srgb, var(--destaque) 8%, transparent); }
.nsp-piloto-campo { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 13px; }
.nsp-piloto-campo > span:first-child { color: var(--apoio); font-size: 12px; }
.nsp-piloto-campo textarea { resize: vertical; min-height: 120px; }
.nsp-piloto-min { display: flex; align-items: center; gap: 8px; color: var(--apoio); }
.nsp-piloto-min input { width: 90px; }
.nsp-piloto-linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nsp-piloto-linha select { flex: 1; min-width: 180px; }
.nsp-piloto-chave { margin-top: 10px; font-size: 13px; }
.nsp-piloto-sabidos { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; }
.nsp-piloto-sabidos > div { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px; }
.nsp-piloto-sabidos > div + div { border-top: 1px solid var(--borda); }
.nsp-piloto-sabidos span { color: var(--apoio); width: 130px; flex: none; }
.nsp-piloto-sabidos b { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsp-piloto-sabidos a { font-size: 12px; }
.nsp-piloto-custo { display: flex; gap: 8px; align-items: flex-start; margin-top: 18px; color: var(--apoio); font-size: 12.5px; line-height: 1.5; }
.nsp-piloto-custo svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.nsp-piloto-aviso { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px;
  background: rgba(229, 72, 77, .1); color: #f3b0b2; font-size: 13px; }
.nsp-piloto-aviso svg { width: 15px; height: 15px; flex: none; }
.nsp-piloto-aviso span { flex: 1; min-width: 200px; }
.nsp-piloto-cartao { position: fixed; left: 18px; bottom: 18px; z-index: 60; width: 270px; padding: 14px 16px; border-radius: 18px;
  background: rgba(16,16,16,.86); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.09); box-shadow: var(--sombra); font-size: 13px; }
.nsp-piloto-cartao.parado { border-color: rgba(229, 72, 77, .45); }
.nsp-piloto-cartao-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.nsp-piloto-cartao-cab .nsp-piloto-selo { width: 28px; height: 28px; border-radius: 9px; }
.nsp-piloto-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nsp-piloto-etapas li { display: flex; align-items: center; gap: 8px; color: var(--apoio); }
.nsp-piloto-etapas li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); flex: none; }
.nsp-piloto-etapas li.ok, .nsp-piloto-etapas li.pulada { color: var(--texto); }
.nsp-piloto-etapas li.ok::before { background: #4caf7a; }
.nsp-piloto-etapas li.pulada::before { background: rgba(255,255,255,.35); }
.nsp-piloto-etapas li.erro { color: #f3b0b2; }
.nsp-piloto-etapas li.erro::before { background: #e5484d; }
.nsp-piloto-etapas li svg { display: none; }
.nsp-piloto-cartao p { margin: 10px 0; color: #f3b0b2; font-size: 12.5px; line-height: 1.45; }
.nsp-piloto-botao { gap: 8px; }
@media (max-width: 640px) { .nsp-piloto-inicios { grid-template-columns: 1fr; } }
.nsp-piloto-faixa { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px;
  background: #161616; border: 1px solid color-mix(in srgb, var(--destaque) 30%, transparent); }
.nsp-piloto-faixa > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nsp-piloto-faixa span:not(.nsp-piloto-selo) { color: var(--apoio); font-size: 12.5px; }
@media (max-width: 640px) { .nsp-piloto-faixa { flex-wrap: wrap; } }
.chip.nsp-chip-piloto.ativo { color: var(--destaque); border-color: color-mix(in srgb, var(--destaque) 55%, transparent);
  background: color-mix(in srgb, var(--destaque) 12%, transparent); }
/* projeto com o piloto automático rodando (app.js, marcarPilotos): o contorno animado da barra de progresso */
.midia-cartao.nsp-trabalhando { border-color: transparent; box-shadow: -14px 0 32px -16px rgba(224, 122, 58, .5), 14px 0 32px -16px rgba(63, 167, 196, .45); }
.nsp-contorno-vivo { position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--nsp-giro), #E07A3A, rgba(224,122,58,0) 25%, rgba(63,167,196,0) 50%, #3FA7C4 60%, rgba(63,167,196,0) 80%, #E07A3A);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: nsp-contorno 3.2s linear infinite; }
.midia-cartao.nsp-trabalhando .topo-cartao .chip:first-child { color: var(--destaque); }
/* sininho de notificações (web/js/notificacoes.js) */
.nsp-sino { position: relative; }
.nsp-sino-n { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  display: grid; place-items: center; font-size: 10px; font-weight: 600; background: var(--destaque); color: #111; box-sizing: border-box; }
.nsp-notif { width: 360px; max-height: min(70vh, 560px); overflow: auto; padding: 8px; }
.nsp-notif-cab { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 12px 10px 29px; }
.nsp-notif-cab .apoio { font-size: 11.5px; }
.nsp-notif-item { display: flex !important; align-items: flex-start !important; gap: 10px !important; width: 100%; text-align: left;
  padding: 11px 12px !important; border-radius: 12px !important; }
.nsp-notif-item + .nsp-notif-item { margin-top: 2px; }
.nsp-notif-item i { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex: none; background: rgba(255,255,255,.2); }
.nsp-notif-item.ok i { background: #4caf7a; }
.nsp-notif-item.erro i { background: #e5484d; }
.nsp-notif-item.aviso i { background: var(--destaque); }
.nsp-notif-item span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nsp-notif-item b { font-weight: 500; font-size: 13px; line-height: 1.35; }
.nsp-notif-item small { color: var(--apoio); font-size: 12px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nsp-notif-item time { color: var(--apoio); font-size: 11px; line-height: 17px; white-space: nowrap; margin-left: 6px; }
.nsp-notif-item.nova { background: rgba(255,255,255,.04); }
.nsp-notif-item:not([data-projeto]) { cursor: default; }
.nsp-notif-vazio { margin: 4px 10px 12px; color: var(--apoio); font-size: 12.5px; line-height: 1.5; }
/* informação que antes ia no rótulo de cima (eyebrow, tirado do app em 10/10/2026): pequena, ao lado do título */
.nsp-titulo-info { font-size: 13px; font-weight: 400; color: var(--apoio); letter-spacing: 0; margin-left: 8px; vertical-align: middle; }
.nsp-sino-n[hidden] { display: none; }  /* o display:grid acima passava por cima do hidden: bolinha vazia sem notificação */
/* "+" da caixa de comando do Hub: abre Narração / Roteiro */
.nsp-comando-mais { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--texto); padding: 0; }
.nsp-comando-mais:hover { background: rgba(255,255,255,.1); }
.nsp-comando-mais svg { width: 15px; height: 15px; }
.nsp-menu.nsp-menu-mais { min-width: 170px; }
/* caixa de comando do Hub: "+" e chips na mesma altura e na mesma linha de centro */
#comando .chips { align-items: center; gap: 8px; }
#comando .chips > .chip, #comando .chips > .nsp-comando-mais { height: 30px; box-sizing: border-box; margin: 0; }
#comando .chips > .chip { padding: 0 12px; line-height: 1; }
#comando .chips > .nsp-comando-mais { width: 36px; height: 36px; }  /* o + maior; os chips (30 px) centralizados nele */
#comando .chips > .chip select, #comando .chips > .chip .nsp-escolha { height: 100%; margin: 0; padding-top: 0; padding-bottom: 0; line-height: 1; align-self: stretch; }
#comando .chips > .nsp-comando-mais svg { width: 17px; height: 17px; stroke-width: 2.4; }  /* o + mais encorpado */
#comando .chips > .nsp-comando-mais svg { transition: transform 220ms cubic-bezier(.2, .8, .2, 1); }
#comando .chips > .nsp-comando-mais.aberto svg { transform: rotate(45deg); }

/* ---------- Hub: os dois jeitos de fazer vídeo (NocStudio e Flow Timeline), abaixo da caixa de comando ---------- */
.nsp-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 880px; margin: 48px auto 0; text-align: left; }
.nsp-modo { position: relative; height: 210px; border-radius: 20px; overflow: hidden; background: #161616; border: 1px solid rgba(255, 255, 255, .08);
  isolation: isolate; }
.nsp-modo-midia { position: absolute; inset: 0; z-index: -1; }
.nsp-modo::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 10, .05) 0%, rgba(10, 10, 10, .55) 45%, rgba(10, 10, 10, .92) 100%); }
.nsp-modo-mosaico { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 50%; gap: 2px; }
.nsp-modo-mosaico img, .nsp-modo-mosaico i { width: 100%; height: 100%; object-fit: cover; display: block; background: #1c1c1c; filter: saturate(.9); }
.nsp-modo:hover .nsp-modo-mosaico img { transform: scale(1.04); transition: transform 1.2s ease; }
/* Flow: quadros "sendo gerados", acendendo em sequência (sem vídeo de verdade: leve para PC simples) */
.nsp-modo-clipes { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 33.4%; gap: 2px; background: #0d0d0d; }
.nsp-modo-clipes i { display: block; background: linear-gradient(135deg, #2a1d12, #3d2a1a 40%, #1b2a33);
  animation: modo-gera 4.8s ease-in-out calc(var(--k) * .4s) infinite both; }
.nsp-modo-clipes i:nth-child(3n) { background: linear-gradient(135deg, #12202a, #26404d 50%, #3a2a1c); }
.nsp-modo-clipes i:nth-child(4n+1) { background: linear-gradient(135deg, #2b1418, #4a2a22 50%, #1a1f2b); }
@keyframes modo-gera { 0%, 100% { opacity: .35; filter: blur(6px) brightness(.8); } 30%, 70% { opacity: 1; filter: blur(0) brightness(1.15); } }
/* o cartão do Flow usa o vídeo gravado dessa animação (flow.mp4): o desfoque ao vivo pesava o Hub */
.nsp-modo-clipes-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0d0d0d; }
@media (prefers-reduced-motion: reduce) { .nsp-modo-clipes i { animation: none; opacity: .8; } }
.nsp-modo-texto { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.nsp-modo-texto h3 { margin: 6px 0 0; font-size: 20px; font-weight: 600; }
.nsp-modo-texto p { margin: 0 0 10px; color: #c9c9c9; font-size: 13.5px; }
.nsp-modo-selo { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px;
  background: #2f6df6; color: #fff; }
.nsp-modo-selo.novo { background: #ff3d7f; }
.nsp-modo-acoes { display: inline-flex; align-items: center; gap: 8px; }
.nsp-modo .btn-claro { background: #f2efe9; color: #111; border: 0; }
.nsp-modo .btn-claro:hover { background: #fff; }
@media (max-width: 720px) { .nsp-modos { grid-template-columns: 1fr; } }

/* ---------- Flow Timeline (web/js/flow.js): blocos, prompts, clipes da pasta ---------- */
.nsp-flow { display: flex; flex-direction: column; gap: 16px; }
.nsp-flow-vazio { background: #161616; border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px; padding: 40px; text-align: center; }
.nsp-flow-vazio .titulo-l { margin: 0 0 6px; }
.nsp-flow-linha { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 18px; }
.nsp-flow-alvo { display: inline-flex; gap: 8px; align-items: center; color: #8a8a8a; font-size: 13px; }
.nsp-flow-alvo input { width: 64px; background: #1c1c1c; color: #fff; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 6px 8px; }
.nsp-flow-passos { display: grid; grid-template-columns: 1.25fr 1.25fr .9fr; gap: 12px; }
.nsp-flow-passo { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 6px 12px; align-items: center;
  background: #161616; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: 14px 16px; }
.nsp-flow-passo > div:nth-child(2) { display: flex; flex-direction: column; }
.nsp-flow-passo small { font-size: 12px; }
.nsp-flow-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #242424; font-size: 12px; font-weight: 600; }
.nsp-flow-botoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nsp-flow-botoes .desligado { opacity: .4; pointer-events: none; }
.nsp-flow-avisos { display: flex; flex-wrap: wrap; gap: 6px; }
.nsp-flow-avisos span { font-size: 12px; color: #e8c46a; background: rgba(245, 197, 66, .08); border: 1px solid rgba(245, 197, 66, .2); border-radius: 8px; padding: 4px 8px; }
/* a faixa: um bloco por clipe, na largura do tempo dele */
.nsp-flow-faixa { display: flex; gap: 2px; height: 56px; background: #0e0e0e; border-radius: 12px; padding: 4px; overflow: hidden; }
.nsp-flow-bloco { position: relative; min-width: 3px; border: 0; padding: 0; border-radius: 4px; background: #232323; overflow: hidden; cursor: pointer; }
.nsp-flow-bloco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nsp-flow-bloco span { position: absolute; left: 3px; bottom: 2px; font-size: 9px; color: rgba(255, 255, 255, .75); text-shadow: 0 0 3px #000; }
.nsp-flow-bloco:not(.tem) { background: repeating-linear-gradient(135deg, #1d1d1d 0 6px, #262626 6px 12px); }
.nsp-flow-bloco.curto::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: #f5c542; }
.nsp-flow-bloco.sel { outline: 2px solid #f5c542; outline-offset: -2px; }
.nsp-flow-corpo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.nsp-flow-previa { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; }
.nsp-flow-tela { aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; display: grid; place-items: center; }
.nsp-flow-tela video, .nsp-flow-tela img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nsp-flow-semclipe { color: #8a8a8a; font-size: 13px; }
.nsp-flow-controles { display: flex; align-items: center; gap: 12px; }
.nsp-flow-estilo textarea { resize: vertical; }
.nsp-flow-pers { font-size: 12.5px; color: #bdbdbd; }
.nsp-flow-pers p { margin: 4px 0 0; }
.nsp-flow-lista { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow: auto; padding-right: 4px; }
.nsp-flow-item { background: #161616; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; padding: 10px 12px; }
.nsp-flow-item.sel { border-color: rgba(245, 197, 66, .55); }
.nsp-flow-item-cab { display: flex; align-items: center; gap: 10px; }
.nsp-flow-item-cab .num:first-child { font-size: 13px; }
.nsp-flow-item-cab .apoio { font-size: 12px; flex: 1; }
.nsp-flow-estado { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: #242424; color: #8a8a8a; }
.nsp-flow-estado.ok { background: rgba(76, 175, 122, .15); color: #7fd3a2; }
.nsp-flow-fala { margin: 6px 0; font-size: 13px; color: #d6d6d6; line-height: 1.4; }
.nsp-flow-prompt { width: 100%; font-size: 12.5px; resize: vertical; }
@media (max-width: 1000px) { .nsp-flow-passos, .nsp-flow-corpo { grid-template-columns: 1fr; } .nsp-flow-previa { position: static; } }
/* Entrada do Flow: só marca e formato (o resto é da busca de imagens) */
.nsp-opcoes-flow > .campo:has(#metodo), .nsp-opcoes-flow > .campo:has(#adicionar-fonte), .nsp-opcoes-flow > .campo:has(#ken-burns) { display: none; }
.nsp-flow-config { display: grid; gap: 18px; max-width: 620px; margin: 0 auto; text-align: left; }
.nsp-flow-config .campo > span { font-size: 13px; color: #8a8a8a; }
.nsp-flow-config textarea { min-height: 84px; resize: vertical; }
.nsp-flow-segundos { display: flex; gap: 6px; }
.nsp-flow-segundos button { flex: 1; height: 38px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: #1c1c1c; color: #ddd; font-weight: 600; cursor: pointer; }
.nsp-flow-segundos button.ativo { background: #f5c542; color: #111; border-color: transparent; }
.nsp-flow-sugestao { font-size: 12.5px; color: #bdbdbd; }

/* ---------- Hub: piloto ligado (a caixa de comando muda de modo; ref. "agente ativo" do Google Flow) ---------- */
.comando.piloto-ligado { position: relative; border-color: color-mix(in srgb, var(--destaque) 75%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--destaque) 35%, transparent), 0 18px 60px -12px color-mix(in srgb, var(--destaque) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--destaque) 10%, rgba(12, 12, 12, .72)), rgba(12, 12, 12, .72)); }
.comando.piloto-ligado .chip.nsp-chip-piloto.ativo { background: #f2efe9; color: #111; border-color: transparent; font-weight: 600; }
/* a moldura em gradiente abraça a caixa: abre devagar (o gradiente acende e o espaço do balão cresce), a frase é
   escrita letra a letra (hub.js) e o "Entendi" entra no fim; fecha do mesmo jeito, ao contrário */
.nsp-comando-moldura { position: relative; max-width: 772px; margin: 40px auto 0; padding: 0 6px; border-radius: 26px;
  transition: padding .6s cubic-bezier(.22, .8, .2, 1); }
.nsp-comando-moldura::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, #7a8448 0%, color-mix(in srgb, var(--destaque) 72%, #c2561c) 58%, #c2561c 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, #c2561c 55%, transparent), 0 16px 40px -18px rgba(194, 86, 28, .45);
  opacity: 0; transform: scale(.97, .9); transform-origin: 50% 100%; transition: opacity .55s ease, transform .6s cubic-bezier(.22, .8, .2, 1); }
.nsp-comando-moldura.com-balao { padding: 16px 6px 6px; }
.nsp-comando-moldura.com-balao::before { opacity: 1; transform: none; }
.nsp-comando-moldura .comando { margin: 0; max-width: none; position: relative; z-index: 1; transition: background .5s; }
.nsp-comando-moldura.com-balao .comando { background: rgba(18, 14, 12, .92); }
.nsp-piloto-balao { position: relative; z-index: 1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.22, .8, .2, 1); }
.nsp-comando-moldura.com-balao .nsp-piloto-balao { grid-template-rows: 1fr; }
.nsp-balao-dentro { overflow: hidden; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 0 12px; color: #fff; text-align: left; transition: padding .6s cubic-bezier(.22, .8, .2, 1); }
.nsp-comando-moldura.com-balao .nsp-balao-dentro { padding-bottom: 14px; }
.nsp-balao-dentro p { position: relative; margin: 0; min-height: 1.3em; font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.nsp-balao-dentro .btn { flex: none; background: #fff; color: #111; border: 0; opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease; }
.nsp-comando-moldura.escrito .nsp-balao-dentro .btn { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .nsp-comando-moldura, .nsp-comando-moldura::before, .nsp-piloto-balao { transition: none; } }

.nsp-frase-espaco { visibility: hidden; white-space: pre-line; }
#piloto-frase { position: absolute; inset: 0; white-space: pre-line; }

/* NocStudio: telinhas das cenas desenhadas, separadas, num plano em perspectiva que anda devagar */
.nsp-modo-telas { overflow: hidden; background: #0d0d0d; perspective: 900px; }
.nsp-telas-plano { position: absolute; left: -14%; top: -30%; width: 136%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  transform: rotateX(28deg) rotateZ(-10deg) rotateY(-14deg); transform-origin: 50% 50%; animation: telas-anda 26s ease-in-out infinite alternate; }
.nsp-telas-plano video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 8px; background: #161616;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); }
@keyframes telas-anda { from { translate: 0 0; } to { translate: -6% 4%; } }
@media (prefers-reduced-motion: reduce) { .nsp-telas-plano { animation: none; } }
.nsp-modo:has(.nsp-modo-telas)::after { background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, .3) 45%, rgba(10, 10, 10, .78) 100%); }
/* selos dos cartões de modo no canto de cima, à esquerda (como os da referência) */
.nsp-modo .nsp-modo-selo { position: absolute; left: 16px; top: 16px; z-index: 2; margin: 0; }
.nsp-modo-texto h3 { margin-top: 0; }
/* Hub: respiro entre título, caixa de comando e cartões (estava tudo colado) */
.hub-hero { padding: 72px 0 64px; }
.nsp-comando-moldura { margin-top: 52px; }
.nsp-modos { margin-top: 64px; gap: 20px; max-width: 840px; }
.nsp-modo { height: 248px; }
.nsp-modo .nsp-modo-selo { left: 22px; top: 22px; }
.nsp-modo-texto { left: 24px; right: 24px; bottom: 22px; gap: 6px; }
.nsp-modo-texto h3 { font-size: 22px; }
.nsp-modo-texto p { margin: 0 0 14px; }
.nsp-modo:has(.nsp-modo-telas)::after { background:
  linear-gradient(90deg, rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .45) 45%, rgba(10, 10, 10, 0) 75%),
  linear-gradient(180deg, rgba(10, 10, 10, 0) 30%, rgba(10, 10, 10, .7) 100%); }
.nsp-modo-texto h3, .nsp-modo-texto p { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.nsp-modo:has(.nsp-modo-telas)::after { background:
  linear-gradient(90deg, rgba(10, 10, 10, .86) 0%, rgba(10, 10, 10, .6) 55%, rgba(10, 10, 10, .1) 88%),
  linear-gradient(180deg, rgba(10, 10, 10, 0) 30%, rgba(10, 10, 10, .7) 100%); }
.nsp-telas-plano video { filter: brightness(.82); }
.nsp-filtro-videos { border-radius: 999px; padding: 7px 34px 7px 14px; font-size: 13px; min-width: 170px; }
/* a caixa de comando na mesma largura dos dois cartões de baixo (840 + a folga da moldura do piloto) */
.nsp-comando-moldura { max-width: 852px; }
.nsp-modo-logo img { height: 24px; width: auto; display: block; filter: drop-shadow(0 1px 10px rgba(0, 0, 0, .6)); }
/* Flow: a configuração inicial num cartão do tamanho do conteúdo, centrado, com respiro (não a faixa larga vazia) */
.nsp-flow-vazio { max-width: 640px; width: 100%; margin: 56px auto 0; padding: 40px 44px 44px; border-radius: 24px; }
.nsp-flow-vazio .titulo-l { font-size: 26px; margin: 0 0 8px; }
.nsp-flow-vazio > .apoio { margin: 0 0 32px; font-size: 14px; }
.nsp-flow-config { max-width: none; gap: 26px; }
.nsp-flow-config .campo { display: flex; flex-direction: column; gap: 10px; }
.nsp-flow-config .campo > span { font-size: 13.5px; color: #a8a8a8; }
.nsp-flow-segundos { gap: 8px; }
.nsp-flow-segundos button { height: 44px; border-radius: 14px; font-size: 14px; }
.nsp-flow-config textarea { min-height: 104px; padding: 14px 16px; line-height: 1.5; border-radius: 14px; }
.nsp-flow-config #flow-preparar { height: 48px; font-size: 14.5px; margin-top: 4px; }
/* a área do Flow tem largura própria (o cabeçalho do editor se alinha a ela): o cartão estreito fica no meio */
.nsp-flow { width: min(1280px, 100%); margin: 0 auto; }
/* o cabeçalho do editor se mede pelos filhos da vista: esta faixa dá a ele uma largura confortável */
.nsp-flow-centro { width: min(1000px, 100%); margin: 0 auto; display: flex; justify-content: center; }
.nsp-flow-config .campo > span { display: flex; align-items: baseline; gap: 6px; }
.nsp-flow-conta { margin-left: auto; font-size: 11.5px; }
.nsp-flow-sugestao summary { cursor: pointer; }
.nsp-flow-sugestao p { white-space: pre-line; max-height: 180px; overflow: auto; margin: 8px 0 0; }
/* cabeçalho do canal: a linha de cima nunca quebra; se faltar espaço, os botões descem, não o texto */
.nsp-canal-cab .txt { flex: 0 1 auto; min-width: min(100%, max-content); }
.nsp-canal-cab .txt .rotulo { white-space: nowrap; }
.nsp-canal-cab .acoes { margin-left: auto; }

/* Campo de número com as setinhas do app (escolha.js → estilizarNumero); as do sistema somem */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.nsp-numero { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
.nsp-numero > input { padding-right: 26px !important; }
.nsp-numero-setas {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 1px; opacity: .55; transition: opacity var(--transicao);
}
.nsp-numero:hover .nsp-numero-setas, .nsp-numero:focus-within .nsp-numero-setas { opacity: 1; }
.nsp-numero-setas button {
  display: grid; place-items: center; width: 16px; height: 11px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--apoio); cursor: pointer;
}
.nsp-numero-setas button:hover { background: rgba(255,255,255,.1); color: var(--texto, #fff); }
.nsp-numero:has(input:disabled) .nsp-numero-setas { display: none; }
.campo > .nsp-numero, label > .nsp-numero:only-of-type { display: flex; width: 100%; }
.nsp-piloto-min .nsp-numero, .campo .nsp-piloto-min .nsp-numero { display: inline-flex; width: auto; }

/* painel do corte: grafismo do modo Cinema */
.nsp-grafismo { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03);
  border: 1px solid var(--borda); }
.nsp-grafismo-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.nsp-grafismo-linha .nsp-escolha, .nsp-grafismo-linha select { flex: 1 1 140px; min-width: 0; }
.nsp-grafismo .campo { gap: 4px; }
.nsp-grafismo .entrada { padding: 8px 12px; font-size: 13px; }

/* "Ver todos" da busca rola até aqui: o título fica abaixo da barra do topo, não escondido por ela */
.nsp-secao-videos { scroll-margin-top: 96px; }

/* piloto fora do editor: a janela vira o check e voa até o canto; lá fica o mesmo cartão de etapas */
.nsp-piloto.nsp-piloto-confirma { width: min(420px, calc(100vw - 32px)); }
.nsp-piloto-ok { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 10px 18px; text-align: center; }
.nsp-piloto-ok b { font-size: 18px; font-weight: 500; }
.nsp-piloto-ok small { color: var(--apoio); font-size: 13px; max-width: 320px; }
.nsp-piloto-check { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: color-mix(in srgb, #4caf7a 22%, transparent); color: #6fd39b; animation: nsp-piloto-check .45s cubic-bezier(0.34, 1.6, 0.64, 1) both; }
.nsp-piloto-check svg { width: 28px; height: 28px; }
@keyframes nsp-piloto-check { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
#nsp-pilotos { position: fixed; left: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column-reverse; gap: 10px; }
#nsp-pilotos .nsp-piloto-cartao { position: relative; left: auto; bottom: auto; cursor: pointer; }
#nsp-pilotos .nsp-piloto-chega .nsp-piloto-cartao { animation: nsp-piloto-chega .35s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes nsp-piloto-chega { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }

/* Hub: trilho de navegação à esquerda (vidro: flutua sobre o fundo) */
.nsp-trilho { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column;
  gap: 4px; padding: 7px; border-radius: 22px; background: rgba(10, 10, 10, .55); border: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.nsp-trilho button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 15px;
  background: transparent; color: var(--apoio); cursor: pointer; transition: background var(--transicao), color var(--transicao); }
.nsp-trilho button svg { width: 20px; height: 20px; }
.nsp-trilho button:hover { background: rgba(255, 255, 255, .07); color: var(--texto); }
.nsp-trilho button.ativo { background: rgba(255, 255, 255, .1); color: var(--texto); }
/* o nome ao passar o mouse: uma etiqueta de vidro à direita */
.nsp-trilho button span { position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%); white-space: nowrap;
  padding: 6px 11px; border-radius: 10px; font-size: 12.5px; color: var(--texto); background: rgba(10, 10, 10, .72);
  border: 1px solid rgba(255, 255, 255, .09);
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
/* o vidro só liga quando a etiqueta aparece (5 desfoques escondidos custavam o tempo todo) */
.nsp-trilho button:hover span, .nsp-trilho button:focus-visible span { opacity: 1; transform: translate(0, -50%);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
@media (max-width: 1100px) { .nsp-trilho { display: none; } }
.hub-hero, #secao-videos, #secao-canais, #secao-sala, #secao-financas { scroll-margin-top: 96px; }

/* Qualidade do Noc (web/js/qualidade.js): reaproveita os cartões do Custo e lucro */
.nsp-qual-seta { font-size: 11px; color: var(--apoio, #8A8A8A); }
.nsp-qual-seta.positivo { color: #7FD69A; }
.nsp-qual-seta.negativo { color: #FF8A7A; }
.nsp-qual-rodape { font-size: 12.5px; margin: 0 0 10px; }

/* Hub: ligar e desligar o piloto com a mesma suavidade da moldura do balão (0,6 s, curva de saída; pedido do Mak,
   14/10/2026: o modo mudava de uma vez). O degradê de fundo não anima: o tom dourado vem de uma luz por dentro
   (box-shadow inset), que anima junto com a borda e o brilho. As duas listas de sombra têm o mesmo formato. */
.comando, .nsp-comando-moldura .comando {
  transition: border-color .6s cubic-bezier(.22, .8, .2, 1), box-shadow .6s cubic-bezier(.22, .8, .2, 1), background-color .5s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 0 1px transparent, inset 0 70px 80px -50px transparent; }
.comando.piloto-ligado { background: var(--vidro);
  box-shadow: 0 18px 60px -12px color-mix(in srgb, var(--destaque) 45%, transparent), 0 0 0 1px color-mix(in srgb, var(--destaque) 35%, transparent),
    inset 0 70px 80px -50px color-mix(in srgb, var(--destaque) 24%, transparent); }
.chip.nsp-chip-piloto { transition: background-color .45s ease, color .45s ease, border-color .45s ease; }
@media (prefers-reduced-motion: reduce) { .comando, .nsp-comando-moldura .comando, .chip.nsp-chip-piloto { transition: none; } }

/* estrela de favorito no cartão do vídeo (Hub): aparece ao passar o mouse; marcada fica sempre à vista, dourada */
.nsp-fav-cartao { width: 28px; height: 26px; border-radius: 999px; border: 1px solid var(--borda-forte); cursor: pointer;
  background: rgba(0,0,0,.45); color: var(--texto); font-size: 14px; line-height: 1; padding: 0 0 1px;
  opacity: 0; transition: opacity var(--transicao), background var(--transicao), color var(--transicao); }
.midia-cartao:hover .nsp-fav-cartao, .nsp-fav-cartao:focus, .nsp-fav-cartao.ativo { opacity: 1; }
.nsp-fav-cartao:hover { background: rgba(0,0,0,.75); }
.nsp-fav-cartao.ativo { color: var(--destaque); border-color: color-mix(in srgb, var(--destaque) 45%, transparent); }
/* os botões do canto do cartão só ocupam lugar quando aparecem (Mak, 14/10/2026: o "⋯" invisível deixava a estrela
   longe da duração): fechados têm largura zero; no hover abrem e empurram a duração e a estrela para o lado */
.nsp-menu-cartao, .nsp-fav-cartao:not(.ativo) { width: 0; margin-left: -6px; padding-left: 0; padding-right: 0; border-width: 0; overflow: hidden;
  transition: width .3s cubic-bezier(.22, .8, .2, 1), margin .3s cubic-bezier(.22, .8, .2, 1), opacity .25s ease, background var(--transicao), color var(--transicao); }
.midia-cartao:hover .nsp-menu-cartao, .nsp-menu-cartao:focus,
.midia-cartao:hover .nsp-fav-cartao:not(.ativo), .nsp-fav-cartao:not(.ativo):focus { width: 28px; margin-left: 0; border-width: 1px; opacity: 1; }

/* cartão do piloto fora do editor: sai devagar (desce, desfoca e apaga) em vez de sumir de uma vez (15/10/2026) */
#nsp-pilotos .nsp-piloto-sai .nsp-piloto-cartao { animation: nsp-piloto-sai .6s cubic-bezier(.4, 0, .2, 1) both; pointer-events: none; }
@keyframes nsp-piloto-sai { to { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(3px); } }
@media (prefers-reduced-motion: reduce) { #nsp-pilotos .nsp-piloto-sai .nsp-piloto-cartao { animation-duration: .01s; } }

/* escolha das Páginas e Instagrams depois do login do Facebook (15/10/2026) */
.nsp-janela-meta-escolha { width: min(520px, calc(100vw - 32px)); }
.nsp-meta-escolha { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; margin-bottom: 4px; }
.nsp-meta-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #1c1c1c;
  border: 1px solid var(--borda); cursor: pointer; }
.nsp-meta-item:has(input:checked) { border-color: color-mix(in srgb, var(--destaque) 55%, transparent); background: color-mix(in srgb, var(--destaque) 7%, #1c1c1c); }
.nsp-meta-item input { accent-color: var(--destaque); width: 16px; height: 16px; flex: none; }
.nsp-meta-item img, .nsp-meta-item .sem-foto { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; background: #2a2a2a; }
.nsp-meta-item span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nsp-meta-item span b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.nsp-meta-item span .nsp-ico-yt { width: 14px; height: 14px; }
.nsp-meta-item small { color: var(--texto-2); font-size: 12px; }
/* tirar uma Página/Instagram do Noc: o × no canto do cartão, aparece no hover */
.nsp-plataforma { position: relative; }
.nsp-tirar-plat { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--borda-forte); background: rgba(0,0,0,.35); color: var(--texto-2); cursor: pointer; opacity: 0; transition: opacity var(--transicao); }
.nsp-tirar-plat svg { width: 12px; height: 12px; }
.nsp-plataforma:hover .nsp-tirar-plat, .nsp-tirar-plat:focus { opacity: 1; }
.nsp-tirar-plat:hover { color: #fff; background: rgba(229, 72, 77, .5); }

/* Publicar: uma aba por plataforma (YouTube, Facebook, Instagram) */
.nsp-pub-abas { padding: 12px 24px 0; }
.nsp-pub-abas .segmentado button { display: inline-flex; align-items: center; gap: 6px; }
.nsp-pub-abas .segmentado svg { width: 14px; height: 14px; }
.nsp-publicar-letra { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-weight: 600; background: #1C1C1C; border: 1px solid var(--borda); }

/* ---------- Painel do administrador (admin.html + admin.js): página própria, cara de painel com a ID do Noc ---------- */
/* o body do app rola sozinho (overflow-x no body com height 100%), então "sticky" não segura: a lateral é fixa */
body.nsp-adm-pagina { display: block; padding-left: 248px; min-height: 100vh; background: var(--fundo); }
body.nsp-adm-pagina #app { padding: 32px 40px 80px; min-height: 0; }
body.nsp-adm-pagina .avisos { z-index: 50; }

/* barra lateral: sólida (não flutua sobre mídia) */
.nsp-adm-lateral { position: fixed; top: 0; left: 0; bottom: 0; width: 248px; z-index: 20; overflow-y: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 22px; padding: 22px 14px 18px;
  background: #0F0F0F; border-right: 1px solid var(--borda); }
.nsp-adm-logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px; text-decoration: none; }
.nsp-adm-logo img { height: 15px; width: auto; }
.nsp-adm-selo { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--destaque-texto);
  background: var(--destaque); padding: 3px 7px; border-radius: 999px; }
.nsp-adm-menu { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: auto; }
.nsp-adm-grupo { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); padding: 14px 12px 6px; }
.nsp-adm-grupo:first-child { padding-top: 4px; }
.nsp-adm-menu a, .nsp-adm-breve { position: relative; display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 12px; border-radius: 12px;
  color: var(--texto-2); font-size: 13.5px; text-decoration: none; transition: background var(--transicao), color var(--transicao); }
.nsp-adm-menu svg, .nsp-adm-abrir svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nsp-adm-menu a:hover { background: #181818; color: var(--texto); }
.nsp-adm-menu a.ativo { background: #1C1C1C; color: var(--texto); }
.nsp-adm-menu a.ativo svg { color: var(--destaque); }
.nsp-adm-breve { color: var(--apagado); cursor: default; }
.nsp-adm-breve i { margin-left: auto; font-style: normal; font-size: 10px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--borda); }
.nsp-adm-pe { display: flex; flex-direction: column; gap: 10px; }
.nsp-adm-abrir { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--borda);
  color: var(--texto-2); font-size: 13px; text-decoration: none; }
.nsp-adm-abrir:hover { color: var(--texto); border-color: var(--borda-forte); }
.nsp-adm-eu { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: #161616; border: 1px solid var(--borda); }
.nsp-adm-eu > span:last-child { display: flex; flex-direction: column; }
.nsp-adm-eu b { font-weight: 500; font-size: 13px; }
.nsp-adm-eu small { color: var(--apoio); font-size: 11.5px; }
.nsp-adm-eu .nsp-avatar, .nsp-adm-linha .nsp-avatar { display: grid; place-items: center; width: 32px; height: 32px; font-size: 12px; flex: none; cursor: default; }

/* cabeçalho da página */
.nsp-adm { max-width: 1400px; margin: 0 auto; }
.nsp-adm-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.nsp-adm-cab h1 { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: -0.02em; }
.nsp-adm-cab p { margin: 6px 0 0; color: var(--apoio); font-size: 13.5px; }
.nsp-adm-data { white-space: nowrap; font-size: 12.5px; color: var(--texto-2); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--borda); background: #141414; }
.nsp-adm-data::first-letter { text-transform: uppercase; }

/* cartões de número */
.nsp-adm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.nsp-adm-kpis.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nsp-adm-kpi { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 14px; border-radius: 20px;
  background: #161616; border: 1px solid var(--borda); overflow: hidden; }
.nsp-adm-kpi .rotulo { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--apoio); }
.nsp-adm-kpi .valor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nsp-adm-kpi .valor b { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.nsp-adm-kpi > small { font-size: 11.5px; color: var(--apagado); }
.nsp-adm-kpi .nsp-mini-grafico { height: 30px; margin-top: 2px; }
.nsp-adm-kpi.alerta .valor b { color: #FF8A7A; }
.nsp-adm-var { font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 999px; background: #222; color: var(--texto-2); white-space: nowrap; }
.nsp-adm-var.bom { background: rgba(127, 214, 154, .12); color: #7FD69A; }
.nsp-adm-var.ruim { background: rgba(255, 138, 122, .12); color: #FF8A7A; }
.nsp-adm-var.novo { background: color-mix(in srgb, var(--destaque) 14%, transparent); color: var(--destaque); }

/* cartões de conteúdo */
.nsp-adm-grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.nsp-adm-grade.metades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nsp-adm-cartao { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 20px; background: #161616;
  border: 1px solid var(--borda); min-width: 0; margin-bottom: 14px; }
.nsp-adm-grade > .nsp-adm-cartao { margin-bottom: 0; }
.nsp-adm-cartao > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.nsp-adm-cartao h3 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.nsp-adm-destaque { display: block; margin-top: 6px; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.nsp-adm-cab-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.nsp-adm-cab-dir small, .nsp-adm-cartao-pe small { font-size: 11.5px; color: var(--apagado); }
.nsp-adm-cartao-pe { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto;
  padding-top: 12px; border-top: 1px solid var(--borda); }
.nsp-adm-cartao .nsp-adm-tabela { border-radius: 14px; background: #131313; }
.nsp-adm-contagem { min-width: 24px; height: 24px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--destaque); color: var(--destaque-texto); }
.nsp-adm-vazio { font-size: 12.5px; padding: 8px 0; }
.nsp-adm-falhou { align-items: flex-start; gap: 8px; }
.nsp-adm-falhou small { color: var(--apoio); }
.nsp-adm-busca { width: min(300px, 100%); height: 36px; }

/* gráficos */
.nsp-adm-grafico .nsp-grafico { height: 240px; }
.nsp-adm-grafico .nsp-grafico .area { opacity: .16; }
.nsp-adm-grafico-vazio { flex: 1; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; border-radius: 14px; background: repeating-linear-gradient(0deg, transparent 0 49px, rgba(255,255,255,.04) 49px 50px); }
.nsp-adm-grafico-vazio b { font-size: 34px; font-weight: 500; color: var(--destaque); }
.nsp-adm-grafico-vazio span { max-width: 340px; font-size: 12.5px; color: var(--apoio); }
.nsp-adm-legenda { display: flex; gap: 16px; font-size: 11.5px; color: var(--apoio); margin-top: -4px; }
.nsp-adm-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.nsp-adm-legenda i { width: 14px; height: 2px; border-radius: 2px; background: var(--destaque); }
.nsp-adm-legenda .antes i { background: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 4px, transparent 4px 7px); }
.nsp-adm-colunas { display: flex; gap: 3px; align-items: flex-end; height: 200px; padding-top: 6px; }
.nsp-adm-colunas > div { flex: 1; height: 100%; display: flex; align-items: flex-end; border-radius: 4px; background: rgba(255,255,255,.025); min-width: 0; }
.nsp-adm-colunas i { display: block; width: 100%; border-radius: 4px; background: var(--destaque); }
.nsp-adm-colunas > div:hover i { filter: brightness(1.15); }
.nsp-adm-eixo { display: flex; justify-content: space-between; font-size: 11px; color: var(--apagado); }
.nsp-adm-rosca { display: flex; flex-direction: column; gap: 18px; }
.nsp-adm-rosca-svg { position: relative; width: 160px; height: 160px; align-self: center; }
.nsp-adm-rosca-svg svg { width: 100%; height: 100%; }
.nsp-adm-rosca-svg b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; font-weight: 500; }
.nsp-adm-rosca ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nsp-adm-rosca li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; }
.nsp-adm-rosca li i { width: 10px; height: 10px; border-radius: 3px; }
.nsp-adm-rosca li span { color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsp-adm-rosca li b { font-weight: 500; font-size: 12px; }
.nsp-adm-ranking { display: flex; flex-direction: column; gap: 14px; }
.nsp-adm-ranking > div { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 52px; gap: 12px; align-items: center; font-size: 13px; }
.nsp-adm-ranking span { display: flex; flex-direction: column; min-width: 0; }
.nsp-adm-ranking small { color: var(--apagado); font-size: 11px; }
.nsp-adm-ranking .trilho { height: 6px; border-radius: 99px; background: #222; overflow: hidden; }
.nsp-adm-ranking .trilho i { display: block; height: 100%; border-radius: inherit; background: var(--destaque); }
.nsp-adm-ranking b { text-align: right; font-weight: 500; }
.nsp-adm-funil { display: flex; flex-direction: column; gap: 4px; }
.nsp-adm-funil > div { display: grid; grid-template-columns: 120px minmax(0, 1fr) 44px 52px; gap: 12px; align-items: center; font-size: 13px; padding: 6px 0; }
.nsp-adm-funil > div > span { color: var(--texto-2); }
.nsp-adm-funil .trilho { height: 22px; border-radius: 7px; background: #1E1E1E; overflow: hidden; }
.nsp-adm-funil .trilho i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--destaque) 85%, #1C1C1C); }
.nsp-adm-funil b { text-align: right; font-weight: 500; }
.nsp-adm-funil small { text-align: right; color: var(--apoio); font-size: 11.5px; }
.nsp-adm-funil > div.queda > span { color: #FF8A7A; }
.nsp-adm-perda { font-style: normal; font-size: 11px; color: var(--apagado); padding-left: 132px; }
.nsp-adm-destaque-un { font-size: 12px; font-weight: 400; color: var(--apoio); letter-spacing: 0; }
.nsp-adm-futuro { margin-bottom: 0; }
.nsp-adm-futuro .nsp-adm-kpi { background: #131313; }
.nsp-adm-futuro .valor b { color: var(--apagado); }
.nsp-adm-link { color: inherit; text-decoration: none; }
.nsp-adm-link:hover b { color: var(--destaque); }
.nsp-adm-recentes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nsp-adm-recentes li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borda); font-size: 13px; }
.nsp-adm-recentes li:first-child { border-top: 0; }
.nsp-adm-recentes a { color: var(--texto); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsp-adm-recentes a:hover { color: var(--destaque); }
.nsp-adm-recentes span { color: var(--apoio); flex: none; }
.nsp-adm .positivo { color: #7FD69A; }
.nsp-adm .negativo { color: #FF8A7A; }
/* Sistema (sala de máquinas) */
.nsp-sis-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--apoio); }
.nsp-sis-vivo i { width: 7px; height: 7px; border-radius: 50%; background: #7FD69A; box-shadow: 0 0 8px #7FD69A; animation: nsp-sis-pulso 2s ease-in-out infinite; }
@keyframes nsp-sis-pulso { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .nsp-sis-vivo i { animation: none; } }
.nsp-sis-agora { display: flex; flex-direction: column; }
.nsp-sis-tarefa { display: grid; grid-template-columns: 90px minmax(0, 1fr) 160px 64px; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--borda); font-size: 13px; }
.nsp-sis-tarefa:first-child { border-top: 0; }
.nsp-sis-tarefa .txt { display: flex; flex-direction: column; min-width: 0; }
.nsp-sis-tarefa .txt b { font-weight: 500; }
.nsp-sis-tarefa .txt small { color: var(--apoio); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsp-sis-tarefa .txt small.erro { color: #FF8A7A; white-space: normal; }
.nsp-sis-tarefa > .num { text-align: right; color: var(--texto-2); }
.nsp-sis-estado { justify-self: start; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: #222; color: var(--texto-2); }
.nsp-sis-estado.rodando { background: color-mix(in srgb, var(--destaque) 16%, transparent); color: var(--destaque); }
.nsp-sis-estado.ok { background: rgba(127, 214, 154, .12); color: #7FD69A; }
.nsp-sis-estado.erro { background: rgba(255, 138, 122, .12); color: #FF8A7A; }
.nsp-sis-barra { height: 6px; border-radius: 99px; background: #222; overflow: hidden; }
.nsp-sis-barra i { display: block; height: 100%; background: var(--destaque); border-radius: inherit; transition: width .6s ease; }
.nsp-sis-falhas { display: flex; flex-direction: column; }
.nsp-sis-falhas > div { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 52px); gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borda); }
.nsp-sis-falhas > div:first-child { border-top: 0; }
.nsp-sis-falhas .txt { display: flex; flex-direction: column; min-width: 0; }
.nsp-sis-falhas .txt b { font-weight: 500; font-size: 13px; }
.nsp-sis-falhas .txt small { color: var(--apoio); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsp-sis-falhas .num { display: flex; flex-direction: column; align-items: flex-end; }
.nsp-sis-falhas .num b { font-weight: 500; font-size: 16px; }
.nsp-sis-falhas .num small { color: var(--apagado); font-size: 10.5px; }
.nsp-sis-falhas > div.hoje .txt b { color: #FF8A7A; }
.nsp-sis-chaves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nsp-sis-chaves li { display: grid; grid-template-columns: minmax(0, 1fr) auto 110px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--borda); font-size: 13px; }
.nsp-sis-chaves li:first-child { border-top: 0; }
.nsp-sis-chaves li > span:first-child { color: var(--texto-2); }
.nsp-sis-chaves li.vazia > span:first-child { color: var(--apagado); }
.nsp-sis-chaves li.ruim > span:first-child { color: #FF8A7A; }
.nsp-sis-chaves b { text-align: right; font-weight: 500; }
.nsp-sis-disco { display: flex; flex-direction: column; gap: 8px; }
.nsp-sis-disco .trilho { height: 10px; border-radius: 99px; background: #222; overflow: hidden; }
.nsp-sis-disco .trilho i { display: block; height: 100%; background: var(--destaque); border-radius: inherit; }
.nsp-sis-disco small { color: var(--apoio); font-size: 12px; }
@media (max-width: 820px) { .nsp-sis-tarefa { grid-template-columns: 80px minmax(0, 1fr) 56px; } .nsp-sis-tarefa > :nth-child(3) { display: none; } }
.nsp-adm-filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.nsp-adm-filtros .campo { min-width: 170px; }
.nsp-adm-filtros .campo > span { display: flex; align-items: center; gap: 6px; }

/* alertas e saldos */
.nsp-adm-alertas { display: flex; flex-direction: column; gap: 8px; }
.nsp-adm-alerta { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; padding: 12px 14px; cursor: pointer;
  border-radius: 14px; background: #131313; border: 1px solid var(--borda); color: var(--texto); font: inherit; }
.nsp-adm-alerta:hover { background: #1C1C1C; }
.nsp-adm-alerta > i { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--aviso); }
.nsp-adm-alerta.alto > i { background: var(--erro); box-shadow: 0 0 10px var(--erro); }
.nsp-adm-alerta span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nsp-adm-alerta b { font-weight: 500; font-size: 13.5px; }
.nsp-adm-alerta small { color: var(--apoio); font-size: 12px; }
.nsp-adm-saldos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nsp-adm-saldos li { display: flex; justify-content: space-between; align-items: center; padding: 14px; border-radius: 14px; background: #131313; border: 1px solid var(--borda); font-size: 13px; }
.nsp-adm-saldos b { font-size: 18px; font-weight: 500; }
.nsp-adm-saldos li.baixo { border-color: rgba(255, 107, 94, .35); }
.nsp-adm-saldos li.baixo b { color: #FF8A7A; }

/* tabelas */
.nsp-adm-tabela { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: var(--raio); background: #161616; overflow: hidden; }
.nsp-adm-linha { display: grid; grid-template-columns: var(--cols); gap: 12px; align-items: center; padding: 11px 14px;
  border-top: 1px solid var(--borda); font-size: 13px; }
.nsp-adm-linha:first-child { border-top: 0; }
.nsp-adm-linha.cab { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8A8A8A; background: #1A1A1A; }
.nsp-adm-linha > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nsp-adm-linha .dir { text-align: right; }
.nsp-adm-linha b { font-weight: 500; }
.nsp-adm-linha .nome { display: flex; flex-direction: column; }
.nsp-adm-linha .nome.com-avatar { flex-direction: row; align-items: center; gap: 10px; }
.nsp-adm-linha .nome.com-avatar > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.nsp-adm-linha .nome small { color: #8A8A8A; font-size: 11.5px; }
.nsp-adm-linha > .nsp-adm-acoes { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; overflow: visible; }
.nsp-adm-acoes .btn { padding: 0 11px; }
.nsp-adm-acoes .btn:disabled { opacity: .4; cursor: not-allowed; }
.nsp-adm-projetos { border-top: 1px solid var(--borda); background: #121212; padding: 6px 14px; }
.nsp-adm-projeto { display: grid; grid-template-columns: minmax(0, 1fr) 80px 90px; gap: 12px; align-items: center; padding: 8px 0;
  border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--texto); text-decoration: none; }
.nsp-adm-projeto:first-child { border-top: 0; }
.nsp-adm-projeto:hover { color: var(--destaque); }
.nsp-adm-projeto > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.nsp-adm-projeto small { color: var(--apoio); font-size: 11px; }
.nsp-adm-projeto > :not(:first-child) { text-align: right; }
.nsp-adm-projeto b { font-weight: 500; }

/* fila de melhorias */
.nsp-adm-fila { display: flex; flex-direction: column; gap: 8px; }
.nsp-adm-melhoria { padding: 12px 14px; border-radius: 14px; background: #131313; border: 1px solid var(--borda); }
.nsp-adm-melhoria .cab { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.nsp-adm-melhoria .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nsp-adm-melhoria .txt b { font-weight: 500; font-size: 13.5px; }
.nsp-adm-melhoria .txt small { color: var(--apoio); font-size: 12px; }
.nsp-adm-vezes { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.nsp-adm-vezes b { font-size: 22px; font-weight: 500; line-height: 1; }
.nsp-adm-vezes small { color: var(--apoio); font-size: 11px; }
.nsp-adm-antes-depois { display: flex; gap: 14px; font-size: 12px; color: var(--apoio); flex: none; }
.nsp-adm-antes-depois b { font-size: 18px; font-weight: 500; color: var(--texto); margin-left: 4px; }
.nsp-adm-antes-depois .positivo b { color: #7FD69A; }
.nsp-adm-antes-depois .negativo b { color: #FF8A7A; }
.nsp-adm-melhoria details { margin-top: 8px; font-size: 12.5px; color: var(--apoio); }
.nsp-adm-melhoria summary { cursor: pointer; }
.nsp-adm-exemplo { padding: 6px 0 0 12px; color: var(--texto-2); display: flex; flex-direction: column; gap: 2px; }
.nsp-adm-exemplo small { color: var(--apoio); font-size: 11.5px; }
.nsp-adm-melhoria .acoes { display: flex; gap: 6px; margin-top: 10px; }
.nsp-adm-resolvidos { margin-top: 6px; font-size: 12.5px; color: var(--apoio); }
.nsp-adm-resolvidos > summary { cursor: pointer; padding: 6px 0; }

@media (max-width: 1100px) {
  .nsp-adm-kpis, .nsp-adm-kpis.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nsp-adm-grade, .nsp-adm-grade.metades { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  body.nsp-adm-pagina { padding-left: 0; }
  .nsp-adm-lateral { position: static; width: auto; height: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px;
    border-right: 0; border-bottom: 1px solid var(--borda); }
  .nsp-adm-menu { flex-direction: row; overflow-x: auto; flex-basis: 100%; order: 3; }
  .nsp-adm-grupo, .nsp-adm-breve, .nsp-adm-eu { display: none; }
  .nsp-adm-pe { margin-left: auto; }
  body.nsp-adm-pagina #app { padding: 20px 16px 60px; }
  .nsp-adm-kpis, .nsp-adm-kpis.quatro { grid-template-columns: 1fr; }
  .nsp-adm-rosca { grid-template-columns: 1fr; justify-items: center; }
  .nsp-adm-linha { --cols: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) !important; }
  .nsp-adm-linha > :nth-child(n+4):not(.nsp-adm-acoes) { display: none; }
  .nsp-adm-linha > .nsp-adm-acoes { grid-column: 1 / -1; justify-content: flex-start; }
}

/* página do canal: a versão positiva da Qualidade do Noc */
.nsp-aprendeu { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--texto-2); }
.nsp-aprendeu b { color: var(--destaque); font-weight: 500; }
.nsp-sis-codigo { font-size: 18px; letter-spacing: .18em; margin-right: 10px; }

/* legendas da fase 6 (pipeline/legenda.py: Fundo na palavra e Karaokê em pílula) */
.previa .sub.leg-fundo { font-weight: 800; text-shadow: 0 0 4px #000, 0 2px 6px #000; }
.previa .sub.leg-fundo .ativa, .nsp-leg-amostra.leg-fundo .ativa { color: #fff; background: var(--cor-destaque, #F5C542);
  padding: 0 .12em; text-shadow: none; }
.previa .sub.leg-pilula { text-shadow: none; }
.previa .sub.leg-pilula .linha, .nsp-leg-amostra.leg-pilula > span { background: rgba(0,0,0,.72); padding: .14em .5em;
  border-radius: 999px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nsp-leg-amostra.leg-fundo, .nsp-leg-amostra.leg-pilula { text-shadow: none; }

/* 👍/👎 da imagem do corte, ao lado de "Busca · Já no vídeo" (Mak, 17/10/2026): só o ícone, a explicação no hover */
.nsp-opcoes-linha { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.nsp-opcoes-linha .nsp-abas-opcoes { margin: 0; }
.nsp-avaliar { display: flex; gap: 4px; margin-left: auto; }
.nsp-avaliar-bt { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--borda);
  background: transparent; color: var(--apoio, #8a8a8a); cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.nsp-avaliar-bt svg { width: 15px; height: 15px; }
.nsp-avaliar-ruim svg { transform: rotate(180deg); }
.nsp-avaliar-bt:hover { color: var(--texto, #fff); border-color: rgba(255, 255, 255, .22); }
.nsp-avaliar-bt.ativo { color: #10140c; background: #7fd18b; border-color: transparent; }
.nsp-avaliar-ruim.ativo { color: #fff; background: #d9534f; }
.nsp-curadoria.nsp-com-nota { display: flex; align-items: flex-start; gap: 10px; }
.nsp-curadoria.nsp-com-nota .nsp-curadoria-txt { flex: 1; min-width: 0; }
.nsp-curadoria.nsp-com-nota .nsp-avaliar { margin-left: 0; flex: none; }
.nsp-curadoria .nsp-avaliar-bt { width: 28px; height: 28px; }
.nsp-nota-linha { margin-left: auto; margin-right: 8px; }


/* sugestão de teto de imagens de IA na janela de montagem (plano_b.sugestao_de_teto, 17/10/2026) */
.nsp-mont-sugestao { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 2px 4px 2px 10px;
  border-radius: 999px; background: rgba(242, 201, 76, .12); color: var(--destaque); font-size: 12px; }

/* orçamento do piloto (orcamento.py, 17/10/2026) */
.nsp-piloto-orc { display: flex; align-items: center; gap: 8px; color: var(--apoio); font-size: 13px; }
.nsp-piloto-orc .entrada { width: 90px; }
.nsp-piloto-recursos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Editor sem vídeo aberto: o botão do menu balança (app.js) */
@keyframes nsp-balanca { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.nsp-balanca { animation: nsp-balanca .4s ease; }
/* opção avançada escondida (chave própria do Google Cloud no SaaS) */
.nsp-link-avancado { background: none; border: 0; color: #5A5A5A; font: inherit; font-size: 12px; cursor: pointer;
  align-self: flex-end; padding: 4px 0; }
.nsp-link-avancado:hover { color: #8A8A8A; text-decoration: underline; }

/* painel do administrador no servidor: o código do celular (painel.js) */
.nsp-adm-codigo { max-width: 380px; margin: 12vh auto 0; display: flex; flex-direction: column; gap: 16px; }
.nsp-adm-codigo form { display: flex; flex-direction: column; gap: 12px; }
.nsp-adm-codigo input { font-size: 22px; letter-spacing: .3em; text-align: center; }
.nsp-adm-qr { background: #fff; border-radius: 16px; padding: 8px; width: max-content; }
.nsp-adm-qr svg { display: block; }
.nsp-adm-segredo { font-size: 13px; color: var(--apoio); word-break: break-all; }
#nsp-adm-erro:empty { display: none; }

/* números com rótulo numa linha (Créditos e planos no painel): campo estreito, texto ao lado, nada vaza do cartão */
.nsp-cfg-num { display: flex; align-items: center; justify-content: flex-end; gap: 10px 20px; flex-wrap: wrap; min-width: 0; }
.nsp-num { display: flex; align-items: center; gap: 8px; color: var(--apoio); font-size: 13px; white-space: nowrap; }
.nsp-num .entrada { width: 96px; min-width: 0; flex: none; padding: 8px 12px; color: var(--texto); }
/* painel antes do código do celular (ou sem acesso): sem a barra lateral; o display: flex dela passava por cima do hidden */
.nsp-adm-lateral[hidden] { display: none !important; }
body.nsp-adm-pagina:has(#lateral[hidden]) { padding-left: 0; }