/* cut67 — tema escuro roxo/azul */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #0b0d10; --bg2: #0f1217; --panel: #12161c; --panel2: #171c24;
  /* --muted era #8b94a3: 5,6:1 sobre os painéis, ou seja, passava no mínimo da
     WCAG e mesmo assim cansava a vista nos 11-12px das dicas. Agora 7,6:1
     (nível AAA). --hint é o degrau ABAIXO dele, para o texto realmente auxiliar
     — sem esse degrau, subir o muted deixaria dica e rótulo com o mesmo peso. */
  --line: #282e36; --text: #e9edf3; --muted: #a4adbd; --hint: #9aa3b2;
  --accent: #7c3aed; --accent2: #6d28d9; --accent-soft: #a78bfa;
  --blue: #3b82f6; --ok: #4ade80; --err: #f87171; --warn: #fbbf24;
  /* vermelho de TEXTO sobre fundo escuro: legível sem gritar. Estava
     hardcoded em .alert-err e ia divergir do resto com o tempo. */
  --err-soft: #fca5a5;
  --radius: 14px;
}
/* Fontes do editor — os MESMOS arquivos que o worker usa no render (assets/fonts),
   servidos aqui para o preview mostrar exatamente o que sai no vídeo. */
@font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat-Black.ttf") format("truetype");
  font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Anton"; src: url("/fonts/Anton-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Boldonse"; src: url("/fonts/Boldonse-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Inter 18pt"; src: url("/fonts/Inter_18pt-Regular.ttf") format("truetype");
  font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Inter 18pt"; src: url("/fonts/Inter_18pt-Bold.ttf") format("truetype");
  font-weight: 600 900; font-display: swap; }
/* As quatro abaixo têm UM só peso. A faixa 400-900 é de propósito: sem ela o
   navegador sintetiza um negrito falso nos textos do palco (que usam 800) e o
   preview engorda uma fonte que o libass vai desenhar fina. */
@font-face { font-family: "Bebas Neue"; src: url("/fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Archivo Black"; src: url("/fonts/ArchivoBlack-Regular.ttf") format("truetype");
  font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Fjalla One"; src: url("/fonts/FjallaOne-Regular.ttf") format("truetype");
  font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("/fonts/PermanentMarker-Regular.ttf") format("truetype");
  font-weight: 400 900; font-display: swap; }

html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: "Inter", system-ui, sans-serif; font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.grow { flex: 1; }
.muted { color: var(--muted); font-size: 14px; line-height: 1.5; }
a { color: var(--accent-soft); }

h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; }
.section-title { font-size: 22px; margin-bottom: 6px; }
.section-sub { color: var(--muted); font-size: 14px; margin-bottom: 26px; line-height: 1.6; }
/* Texto auxiliar miúdo: em fundo escuro, um pouco de letter-spacing rende mais
   legibilidade do que aumentar o corpo — e não empurra o layout. */
.cfg-hint, .lt-hint, .wy-tip, .fontcard-d, .tour-load {
  color: var(--hint); letter-spacing: .012em; line-height: 1.6;
}

/* ---------- inputs ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], select, textarea {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; font-size: 14px; outline: none;
  font-family: inherit; width: 100%;
}
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 58, 237, .18); }
input[type="color"] {
  width: 44px; height: 34px; padding: 2px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel2); cursor: pointer;
}
/* Secundário em 500: é o contraste de PESO com o .primary (700) que faz a ação
   principal se destacar sozinha, sem precisar de mais cor na tela. */
button {
  font-family: inherit; font-weight: 500; border: 0; border-radius: 10px;
  padding: 11px 18px; font-size: 14px; cursor: pointer;
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  transition: filter .15s, transform .05s, border-color .15s;
}
button:hover { filter: brightness(1.15); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary {
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: #fff; border: 0; font-weight: 700;
  box-shadow: 0 6px 20px rgba(124, 58, 237, .42);
}
button.ghost { background: none; border: 1px solid var(--line); color: var(--muted); }
button.danger { color: var(--err); border-color: #4a2626; }
.icon-btn { padding: 9px 12px; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
/* rótulo NÃO é texto secundário: é o nome da coisa, e competia com a dica */
.lbl { display: block; font-size: 13px; color: var(--text); margin-bottom: 8px; font-weight: 600; }
.field { margin-bottom: 18px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 15px; font-weight: 600; font-size: 13px;
}
.chip.active { border-color: var(--accent); color: var(--accent-soft); background: rgba(124, 58, 237, .12); }
.checks { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 14px; }
.checks label { display: flex; gap: 7px; align-items: center; cursor: pointer; }

.msg { margin-top: 10px; font-size: 14px; color: var(--muted); min-height: 18px; }
.msg.err { color: var(--err); }
.msg.ok { color: var(--ok); }

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 95; background: rgba(4, 6, 10, .72);
  display: grid; place-items: center; padding: 20px; animation: toast-in .15s ease-out;
}
.modal-card {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 30px 28px; max-width: 440px; width: 100%;
  text-align: center; box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}
.modal-card h3 { font-size: 20px; margin-bottom: 10px; }
.modal-card .modal-ico {
  width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 16px;
  display: grid; place-items: center; font-size: 22px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--blue));
}
.modal-card .row { margin-top: 20px; }
.modal-card .row button { flex: 1; }
/* opções empilhadas: rótulos descritivos não cabem lado a lado nos 440px */
.modal-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.modal-stack button { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.modal-x {
  position: absolute; top: 10px; right: 10px; background: none; border: 0;
  color: var(--muted); font-size: 16px; padding: 8px 10px;
}
/* Documento legal dentro do modal. O .modal-card é centralizado e estreito
   (440px) — texto corrido precisa do contrário: alinhado à esquerda, mais largo
   e com rolagem PRÓPRIA, para o X e o link de nova aba nunca saírem da tela. */
.modal-backdrop:has(.doc-modal) .modal-card { max-width: 720px; }
.doc-modal { text-align: left; }
.doc-modal > h3 { margin-bottom: 14px; padding-right: 30px; }
.doc-corpo { max-height: 62dvh; overflow-y: auto; padding-right: 12px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: 14px; }
.doc-corpo h1 { font-size: 19px; margin-bottom: 4px; }
.doc-corpo h2 { font-size: 15px; margin: 20px 0 8px; color: var(--text); }
.doc-corpo p, .doc-corpo li { color: var(--muted); font-size: 13.5px; line-height: 1.65; margin-bottom: 10px; }
.doc-corpo .pmeta { font-size: 12px; margin-bottom: 18px; }
.doc-corpo ul { padding-left: 20px; margin-bottom: 14px; }
.doc-corpo li { margin-bottom: 5px; }
.doc-corpo strong { color: var(--text); }
.doc-fora { margin-top: 14px; font-size: 13px; }

/* Aceite dos termos no cadastro. `.faltando` é o destaque de campo obrigatório:
   o botão continua clicável de propósito — é este pulso que explica o que falta. */
.terms-box {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; cursor: pointer;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel2); font-size: 13px; line-height: 1.5; text-align: left;
  transition: border-color .15s, background .15s;
}
.terms-box:hover { border-color: var(--accent); }
.terms-box input { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; accent-color: var(--accent); }
.terms-box.faltando { border-color: var(--err); background: rgba(248, 113, 113, .1);
  animation: terms-pulso .55s ease; }
/* captcha: mesmo destaque de campo obrigatório da caixa de aceite */
.cf-turnstile { margin-top: 14px; display: flex; justify-content: center; border-radius: 10px; }
.cf-turnstile.faltando { animation: terms-pulso .55s ease; }
@keyframes terms-pulso {
  0%, 100% { box-shadow: none; }
  30%, 70% { box-shadow: 0 0 0 3px rgba(248, 113, 113, .3); }
}

/* ---------- tour guiado ---------- */
/* A máscara não pode capturar clique: o tour acompanha o usuário usando o app,
   em vez de travar a tela até ele clicar em "Próximo". */
.tour { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.tour-spot {
  position: fixed; border-radius: 12px; transition: all .25s ease;
  box-shadow: 0 0 0 9999px rgba(4, 6, 10, .74), 0 0 0 2px var(--accent);
}
/* O balão precisa SALTAR do escurecido em volta: no celular, com brilho alto,
   painel escuro + texto cinza sumia. Fundo mais claro, borda de destaque e
   texto cheio. O max-height evita o caso em que o balão era mais alto que a
   tela e o clamp do JS jogava os botões para fora. */
.tour-tip {
  position: fixed; pointer-events: auto; background: var(--panel2);
  border: 1px solid var(--accent); border-radius: 14px; padding: 16px 18px;
  max-width: min(340px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7); animation: toast-in .18s ease-out;
}
.tour-tip h4 { font-size: 16px; margin-bottom: 6px; }
.tour-tip p { font-size: 13.5px; color: var(--text); line-height: 1.5; }
.tour-tip p b { color: var(--accent-soft); }
.tour-n { font-size: 11px; font-weight: 700; color: var(--accent-soft); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.tour-wait { margin-top: 10px; font-size: 12.5px; color: var(--accent-soft) !important; }
.tour-load { font-size: 13px; color: var(--muted); }
.tour-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.tour-acts button { font-size: 13px; padding: 8px 14px; }
/* atalho de ajuda na topbar: com o nome, porque um "?" solto não é descoberto */
.help-btn { padding: 9px 14px; font-weight: 600; white-space: nowrap; }
.help-btn i { margin-right: 6px; }

/* ---------- toasts ---------- */
#toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px));
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 18px; font-size: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  animation: toast-in .2s ease-out;
}
.toast.err { border-color: #5b2727; color: var(--err); }
.toast.ok { border-color: #1e4d31; color: var(--ok); }
.toast-t { flex: 1; min-width: 0; }
/* contador só aparece a partir da segunda vez (o innerHTML nasce vazio) */
.toast-n { flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--muted);
  background: var(--bg); border-radius: 999px; padding: 2px 8px; }
.toast-n:empty { display: none; }
.toast.repetiu { animation: toast-rep .3s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-rep { 50% { transform: scale(1.03); } }

/* =========================================================== landing */
#landing-shell { min-height: 100vh; }
.landing-nav {
  display: flex; align-items: center; gap: 14px; padding: 18px 28px;
  max-width: 1080px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.brand .logo-ico {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--blue)); color: #fff; font-size: 14px;
}
.hero { text-align: center; padding: 72px 20px 40px; max-width: 860px; margin: 0 auto; }
.hero .kicker {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent-soft);
  border: 1px solid rgba(124, 58, 237, .4); background: rgba(124, 58, 237, .08);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(32px, 6vw, 54px); line-height: 1.08;
  background: linear-gradient(180deg, #fff, #b9a8e8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 18px;
}
.hero p { color: var(--muted); font-size: 17px; max-width: 560px; margin: 0 auto 34px; line-height: 1.6; }
.hero .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .cta-row button { font-size: 15px; padding: 14px 26px; }
.hero-input {
  display: flex; gap: 10px; max-width: 620px; margin: 0 auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 8px; box-shadow: 0 10px 40px rgba(124, 58, 237, .12);
}
.hero-input input { border: 0; background: none; font-size: 15px; flex: 1; }
.hero-input input:focus { box-shadow: none; }
.hero-input button { white-space: nowrap; }
.nav-link { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; padding: 8px 10px; }
.nav-link:hover { color: var(--text); }
.plan-card .plan-price { font-size: 26px; font-weight: 800; margin: 4px 0 2px; }
.plan-card .plan-price span { font-size: 13px; color: var(--muted); font-weight: 500; }
.landing-section { max-width: 1080px; margin: 0 auto; padding: 44px 20px; }
.landing-section h2 { text-align: center; font-size: 28px; margin-bottom: 8px; }
.landing-section .sub { text-align: center; color: var(--muted); margin-bottom: 34px; }

.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 0; }
.plan-card.featured { border-color: var(--accent); box-shadow: 0 0 40px rgba(124, 58, 237, .18); }
.plan-card .plan-name { font-size: 17px; font-weight: 800; margin-bottom: 2px; }
.plan-card .plan-credits { color: var(--accent-soft); font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.plan-card ul { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: var(--muted); }
.plan-card ul i { color: var(--accent-soft); width: 18px; margin-right: 6px; }
/* A lista absorve a sobra e empurra o botão para a base, deixando os botões
   alinhados entre cards com quantidades diferentes de itens. Sem isto, o
   `flex:1` que a classe .tpl-use traz (ela é dos cards de Templates) esticava
   o botão verticalmente — daí o "Assinar" gigante no plano Básico. */
.plan-card ul { flex: 1; }
.plan-card > button { flex: 0 0 auto; align-self: stretch; }
.plan-tag {
  position: absolute; top: -11px; right: 16px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.landing-footer {
  border-top: 1px solid var(--line); margin-top: 40px; padding: 26px 20px 34px;
  text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6;
}
.landing-footer .notice {
  max-width: 640px; margin: 0 auto 10px; padding: 12px 18px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg2);
}
/* quebra em duas linhas no celular em vez de virar uma fileira comprida */
.landing-footer .foot-links { margin-bottom: 6px; }
.landing-footer .foot-links a { white-space: nowrap; }

/* auth */
.auth-card { max-width: 400px; margin: 9vh auto 0; text-align: center; }
.auth-card h1 { font-size: 24px; margin-bottom: 6px; }
.auth-card input { margin-top: 10px; }
.auth-card .row { margin-top: 16px; }
.auth-card .row button { flex: 1; }

/* =========================================================== app shell */
#app-shell { display: flex; min-height: 100vh; }
#sidebar {
  width: 232px; flex-shrink: 0; background: var(--bg2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 18px 12px; position: sticky; top: 0;
  height: 100vh;
}
#sidebar .brand { padding: 4px 10px 20px; }
#sidebar nav { display: flex; flex-direction: column; gap: 4px; }
#sidebar nav a {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 500;
  font-size: 14px; transition: background .12s, color .12s;
}
#sidebar nav a i { width: 20px; text-align: center; font-size: 15px; }
#sidebar nav a:hover { background: var(--panel2); color: var(--text); }
#sidebar nav a.active {
  background: rgba(124, 58, 237, .14); color: var(--accent-soft);
  border: 1px solid rgba(124, 58, 237, .35);
}
#sidebar .side-bottom { margin-top: auto; padding: 10px; display: flex; flex-direction: column;
  gap: 6px; color: var(--muted); font-size: 12px; }
.side-legal { font-size: 11px; }
.side-legal a { color: var(--muted); text-decoration: none; }
.side-legal a:hover { color: var(--text); }

#app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#topbar {
  display: flex; align-items: center; gap: 14px; padding: 14px 26px;
  border-bottom: 1px solid var(--line); background: var(--bg2);
  position: sticky; top: 0; z-index: 20;
}
#credits-badge .credits {
  display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px;
}
#credits-badge .credits i { color: var(--warn); }
#user-menu { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; min-width: 0; }
#user-menu > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-curto { display: none; }
/* largura ampla: as telas de trabalho (editor/cortar) precisam de espaço lateral */
#view { padding: 28px 36px 60px; max-width: 1480px; width: 100%; margin: 0 auto; }

/* ---------- dropzone / upload ---------- */
.drop {
  display: block; border: 2px dashed var(--line); border-radius: 12px;
  padding: 38px 16px; text-align: center; color: var(--muted); cursor: pointer;
  transition: border-color .15s;
}
.drop:hover, .drop.armed { border-color: var(--accent); color: var(--text); }
.drop input { display: none; }
.drop .big-ico { font-size: 28px; color: var(--accent-soft); display: block; margin-bottom: 10px; }
.progress-track {
  background: var(--panel2); border-radius: 8px; height: 20px;
  position: relative; overflow: hidden; border: 1px solid var(--line);
}
.progress-fill {
  background: linear-gradient(90deg, var(--accent2), var(--accent)); height: 100%;
  width: 0%; transition: width .2s;
}
.progress-label { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 20px; font-weight: 600; }

/* ---------- tabs / filtros ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
/* barra dos "Vídeos gerados": filtros de estado à esquerda, período à direita */
.vg-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vg-bar .tabs { margin-bottom: 0; }
/* recorte por data em pills: o formato que todo mundo já lê como "filtro" */
.vg-periodo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.vg-periodo > i { color: var(--muted); font-size: 12px; margin-right: 2px; }
.pill { border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600;
  background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
  transition: border-color .12s, color .12s, background .12s; }
.pill:hover { border-color: var(--accent); color: var(--text); }
.pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.vg-zip { display: inline-flex; align-items: center; gap: 8px; background: var(--panel2);
  border: 1px solid var(--line); color: var(--text); font-size: 13px; font-weight: 600;
  padding: 9px 14px; border-radius: 10px; margin-bottom: 20px; transition: border-color .12s, color .12s; }
.vg-zip:hover { border-color: var(--accent); color: var(--accent-soft); }
.vg-zip i { color: var(--accent-soft); }
.vg-zip.danger i { color: var(--err); }
.vg-zip.danger:hover { border-color: var(--err); color: var(--err); }
/* barra das ações em lote (aparece com 2+ cards selecionáveis) */
.vg-sel { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; }
.vg-sel-count { font-size: 13px; color: var(--muted); }
.vg-sel-count strong { color: var(--accent-soft); }
.vg-sel-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vg-sel-acts button { margin-bottom: 0; font-size: 13px; padding: 8px 13px; }
.tab {
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600;
  background: none; border: 1px solid var(--line); color: var(--muted);
}
.tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- jobs / vídeos gerados ---------- */
.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.job-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; position: relative; }
.job-del {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px; padding: 0; border-radius: 8px;
  background: rgba(4, 6, 10, .55); border: 1px solid var(--line); color: var(--muted);
  display: grid; place-items: center; font-size: 12px;
}
.job-del:hover { color: var(--err); border-color: #4a2626; background: rgba(4, 6, 10, .8); }
.job-card .jname { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-card .jmeta { color: var(--muted); font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.job-card video { width: 100%; border-radius: 10px; background: #000; max-height: 300px; }
.status {
  font-size: 12px; padding: 4px 11px; border-radius: 999px; font-weight: 600;
  background: rgba(124, 58, 237, .15); color: var(--accent-soft); align-self: flex-start;
}
.status.done { background: rgba(74, 222, 128, .12); color: var(--ok); }
.status.error { background: rgba(248, 113, 113, .12); color: var(--err); }
.spin { display: inline-block; animation: rot 1s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

/* ---------- painel de downloads ---------- */
#downloads-panel {
  position: fixed; right: 18px; bottom: 18px; width: 320px; z-index: 80;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}
#downloads-panel h4 { font-size: 13px; margin-bottom: 10px; color: var(--muted); }
.dl-item { margin-bottom: 10px; font-size: 12px; }
.dl-item .dl-name { display: flex; justify-content: space-between; margin-bottom: 4px; gap: 8px; }
.dl-item .dl-name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- editor ---------- */
.editor-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }

.aspect-row { display: flex; gap: 14px; align-items: flex-end; }
.aspect-opt { text-align: center; cursor: pointer; }
.aspect-opt .shape {
  border: 2px solid var(--line); border-radius: 6px; background: var(--panel2);
  margin: 0 auto 6px; display: grid; place-items: center; color: var(--muted); font-size: 10px;
  transition: border-color .12s;
}
.aspect-opt.selected .shape { border-color: var(--accent); background: rgba(124, 58, 237, .14); color: var(--accent-soft); }
.aspect-opt .shape.s916 { width: 34px; height: 60px; }
.aspect-opt .shape.s11 { width: 48px; height: 48px; }
.aspect-opt .shape.s169 { width: 64px; height: 36px; }
.aspect-opt .alabel { font-size: 12px; color: var(--muted); font-weight: 600; }
.aspect-opt.selected .alabel { color: var(--accent-soft); }

/* ---------- templates ---------- */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.tpl-card { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.tpl-card .tname { font-weight: 700; font-size: 15px; }
.tpl-card .tdesc { color: var(--muted); font-size: 13px; flex: 1; }
.tpl-card .row { gap: 8px; }
.tpl-card .row button { flex: 1; padding: 8px 10px; font-size: 13px; }

/* ---------- confirmação de créditos ---------- */
.confirm-card { max-width: 520px; margin: 0 auto; text-align: center; }
.confirm-card .big-num { font-size: 40px; font-weight: 800; color: var(--accent-soft); margin: 6px 0; }
.confirm-stats { display: flex; justify-content: center; gap: 34px; margin: 22px 0; }
.confirm-stats .cs { font-size: 13px; color: var(--muted); }
.confirm-stats .cs b { display: block; font-size: 22px; color: var(--text); margin-bottom: 2px; }

.msg.warn { color: var(--warn); }

/* box de alerta: feedback do sistema, visualmente separado dos campos */
.alert { display: flex; align-items: flex-start; gap: 10px; border-radius: 11px;
  padding: 10px 13px; font-size: 12.5px; line-height: 1.45; margin: 10px 0 0; }
.alert i { font-size: 13px; margin-top: 1px; flex-shrink: 0; }
.alert a { font-weight: 600; }
.alert-warn { background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .32); color: #fbbf24; }
.alert-warn i { color: #f59e0b; }
.alert-err { background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .3); color: var(--err-soft); }
.alert-err i { color: var(--err); }
.alert-info { background: rgba(124, 58, 237, .1); border: 1px solid rgba(124, 58, 237, .28); color: var(--accent-soft); }

/* botão secundário: ação real, mas sem competir com o CTA principal */
button.btn-outline { background: none; border: 1px solid var(--accent); color: var(--accent-soft); }
button.btn-outline:hover { background: rgba(124, 58, 237, .12); }

/* =========================================================== fluxo guiado */
/* stepper */
.stepper {
  list-style: none; display: flex; gap: 8px; margin: 0 0 22px; flex-wrap: wrap;
}
.stepper .step {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 150px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--muted); font-size: 13px; font-weight: 600;
  transition: border-color .2s, color .2s, background .2s;
}
.stepper .step-n {
  width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
  background: var(--panel2); border: 1px solid var(--line); font-size: 12px; flex-shrink: 0;
}
.stepper .step.active {
  border-color: var(--accent); color: var(--text);
  background: rgba(124, 58, 237, .1); box-shadow: 0 0 0 3px rgba(124, 58, 237, .1);
}
.stepper .step.active .step-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.stepper .step.done { color: var(--accent-soft); }
.stepper .step.done .step-n { background: rgba(74, 222, 128, .15); border-color: transparent; color: var(--ok); }

/* input com botão-seta */
.flow-input { margin-bottom: 18px; }
.url-row { display: flex; gap: 10px; align-items: stretch; }
.url-row input { flex: 1; }
.url-go {
  flex-shrink: 0; width: 50px; padding: 0; font-size: 17px;
  background: linear-gradient(180deg, var(--accent), var(--accent2)); color: #fff;
  border: 0; box-shadow: 0 4px 16px rgba(124, 58, 237, .35);
}
.url-go i { transition: transform .18s; }
.url-go:hover i { transform: translateX(3px); }
.or { text-align: center; color: var(--muted); font-size: 13px; margin: 14px 0; }

.flow-section { margin-bottom: 20px; animation: rise .3s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.section-lead { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; margin-bottom: 14px; }
.section-lead .lead-n {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(124, 58, 237, .14); color: var(--accent-soft); font-size: 13px;
}

/* preview card + painel da conta */
.preview-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.preview-card {
  display: flex; gap: 14px; padding: 14px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(124, 58, 237, .1), var(--panel));
  border: 1px solid var(--line); backdrop-filter: blur(6px);
}
.preview-card .pc-thumb {
  width: 132px; height: 78px; flex-shrink: 0; border-radius: 10px; background: #000;
  background-size: cover; background-position: center; position: relative; overflow: hidden;
}
.pc-thumb-empty, .pc-thumb-file {
  display: grid; place-items: center; color: var(--accent-soft); font-size: 26px;
  background: var(--panel2);
}
.pc-badge {
  position: absolute; left: 6px; bottom: 6px; font-size: 10px; font-weight: 700;
  background: rgba(0, 0, 0, .7); color: #fff; padding: 2px 7px; border-radius: 6px;
}
.pc-badge i { color: #f87171; }
.preview-card .pc-meta { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.pc-title { font-weight: 700; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-sub { color: var(--muted); font-size: 13px; }
.pc-sub i { margin-right: 5px; }

.account-panel {
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  padding: 6px 16px;
}
.ap-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.ap-row:last-child { border-bottom: 0; }
.ap-row b { color: var(--text); font-size: 14px; }

/* skeleton */
.skel { background: linear-gradient(90deg, var(--panel2) 25%, #1d232c 50%, var(--panel2) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 8px; }
.skel-thumb { width: 132px; height: 78px; flex-shrink: 0; }
.skel-line { height: 13px; margin-bottom: 8px; }
.skel-line.short { width: 55%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* opções não-visuais (idioma / IA) — o visual mora no palco WYSIWYG */
.opt-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.opt-card { border: 1px solid var(--line); border-radius: 14px; background: var(--panel2); padding: 18px; }
.opt-card-wide { grid-column: 1 / -1; }
.opt-card-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px;
  letter-spacing: -.01em; margin-bottom: 14px; }
.opt-card-h i { color: var(--accent-soft); }
.opt-card-h small { color: var(--muted); font-weight: 500; }
/* acordeões no painel de opções */
.opt-main .opt-card-h { cursor: pointer; }
.acc-chev { color: var(--muted); transition: transform .2s; margin-left: auto; font-size: 12px; }
.acc-body { overflow: hidden; transition: max-height .28s ease, opacity .2s; max-height: 900px; }
.opt-card.acc-closed .opt-card-h { margin-bottom: 0; }
.opt-card.acc-closed .acc-body { max-height: 0; opacity: 0; }
.opt-card.acc-closed .acc-chev { transform: rotate(-90deg); }

/* status de processamento com anel circular */
.proc { display: flex; align-items: center; gap: 14px; padding: 6px 0; }
.proc-ring { transform: rotate(-90deg); flex-shrink: 0; }
.proc-bg { fill: none; stroke: var(--line); stroke-width: 5; }
.proc-fg { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round;
  transition: stroke-dashoffset .6s ease; filter: drop-shadow(0 0 4px rgba(124, 58, 237, .5));
  animation: proc-pulse 1.6s ease-in-out infinite; }
@keyframes proc-pulse { 50% { stroke: var(--accent-soft); } }
.proc-step { font-weight: 700; font-size: 14px; }
.proc-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* recurso bloqueado por plano (A9) */
.toggle.locked { opacity: .8; cursor: not-allowed; }
.toggle.locked .toggle-txt { color: var(--muted); }
.lock-note { color: var(--warn); font-weight: 700; font-size: 11px; white-space: nowrap; }
.lock-note i { font-size: 10px; }

/* toggles */
.toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.toggle { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.toggle input { display: none; }
.toggle-track {
  width: 40px; height: 23px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--line); position: relative; flex-shrink: 0; transition: background .18s, border-color .18s;
}
.toggle-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 999px; background: var(--muted); transition: transform .18s, background .18s;
}
.toggle input:checked + .toggle-track { background: rgba(124, 58, 237, .3); border-color: var(--accent); }
.toggle input:checked + .toggle-track::after { transform: translateX(17px); background: var(--accent-soft); }
.toggle-txt { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.toggle-txt small { display: block; color: var(--muted); font-weight: 400; font-size: 11.5px; margin-top: 2px; }

/* sticky footer do botão principal */
.gen-footer {
  position: sticky; bottom: 14px; z-index: 30; margin-top: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px 12px 20px; border-radius: 16px;
  background: rgba(18, 22, 28, .82); backdrop-filter: blur(12px);
  border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.gen-info { display: flex; align-items: center; gap: 16px; font-size: 13px; }
.gen-credits { font-weight: 700; }
button.big { font-size: 15px; padding: 14px 28px; }

/* =========================================================== painel admin */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
}
.kpi-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--panel2); color: var(--accent-soft); font-size: 15px; flex-shrink: 0; }
.kpi.ok .kpi-ic { color: var(--ok); }
.kpi.warn .kpi-ic { color: var(--warn); }
.kpi.err .kpi-ic { color: var(--err); }
.kpi-v { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.kpi-l { font-size: 12px; color: var(--muted); }
.kpi.ok .kpi-v { color: var(--ok); }
.kpi.err .kpi-v { color: var(--err); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.admin-table th, .admin-table td { padding: 10px 12px; text-align: left; white-space: nowrap; }
.admin-table thead th { color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); font-size: 12px; }
.admin-table tbody tr { border-bottom: 1px solid var(--line); }
.admin-table tbody tr:last-child { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--panel2); }
.admin-table td.pos { color: var(--ok); font-weight: 600; }
.admin-table td.neg { color: var(--err); font-weight: 600; }

.cost-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
#admin-tabs .tab i { margin-right: 5px; }

/* =========================================================== editor: modo de corte */
.pill-tabs { display: flex; gap: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.pill-tab { flex: 1; background: none; border: 0; color: var(--muted); border-radius: 9px; padding: 9px 10px; font-weight: 600; font-size: 13px; }
/* seleção de modo = escolha, não ação: outline para não competir com "Gerar vídeo" */
.pill-tab.active { background: rgba(124, 58, 237, .16); color: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent); }
.pill-tab.locked { opacity: .7; }

/* Uma linha só: os cartões encolhem em vez de quebrar em três fileiras. O
   `min-width:0` é o que permite encolher — sem ele o conteúdo vira piso e
   empurra a coluna inteira para fora da tela no celular. */
/* `.num-cards` é usada por dois lugares: a quantidade de cortes (que tem de
   caber numa linha) e os pacotes de crédito (cartões largos, que PRECISAM
   quebrar). O nowrap fica escopado ao primeiro — solto na classe, ele empurrava
   os pacotes para fora da tela no celular. */
.num-cards { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
#ai-counts { flex-wrap: nowrap; }
#ai-counts .num-card { flex: 1 1 0; min-width: 0; width: auto; }
.num-card { height: 52px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); font-weight: 800; font-size: 16px; transition: border-color .12s, background .12s; }
.num-card.active { border-color: var(--accent); color: var(--accent-soft); background: rgba(124, 58, 237, .12); box-shadow: 0 0 0 2px rgba(124, 58, 237, .25); }
/* quantidade que não cabe no trecho: some do caminho, mas continua visível e
   CLICÁVEL — o clique é o que explica o motivo (no toque não há `title`) */
.num-card:disabled, .num-card.off { opacity: .32; box-shadow: none; border-color: var(--line); }
.num-card.off { cursor: help; }
.num-card-input { flex: 0 0 72px; width: 72px; height: 52px; border-radius: 12px; text-align: center; padding: 0 6px; }

/* ocupação: quanto do trecho os cortes pedidos consomem */
.aifit { margin-top: 12px; }
.aifit-bar { height: 7px; border-radius: 999px; background: var(--panel2);
  border: 1px solid var(--line); overflow: hidden; }
.aifit-fill { height: 100%; width: 0; border-radius: 999px; background: var(--accent);
  transition: width .2s ease, background .2s; }
.aifit-fill.over { background: var(--err); }
.aifit-txt { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.aifit-txt b { color: var(--text); }
/* Estourar o limite é um AJUSTE a fazer, não uma falha do sistema: bloco de
   aviso (como .alert-warn) em vez de texto vermelho solto, com os números que
   causaram o estouro em destaque e o atalho que resolve. */
.aifit-over { display: block; margin-top: 2px; padding: 10px 12px; border-radius: 10px;
  background: rgba(248, 113, 113, .10); border: 1px solid rgba(248, 113, 113, .28);
  color: var(--err-soft); font-size: 12px; line-height: 1.5; }
.aifit-over b { color: var(--err-soft); }
.aifit-nums { margin-top: 4px; color: var(--muted); }
.aifit-nums b { color: var(--text); }
.aifit-fix { margin-top: 9px; width: 100%; background: rgba(248, 113, 113, .14);
  border: 1px solid rgba(248, 113, 113, .38); color: var(--err-soft);
  font-size: 12px; font-weight: 700; padding: 7px 10px; border-radius: 8px; }
.aifit-fix:hover { background: rgba(248, 113, 113, .22); color: #fff; }
.aifit-fix i { margin-right: 6px; }

/* timeline / scrubber */
.tl-video { width: 100%; max-height: 300px; border-radius: 12px; background: #000; display: block; margin: 0 auto 10px; }
.tl-track { position: relative; height: 84px; border-radius: 10px; background: linear-gradient(90deg, #171c24, #1d2431); border: 1px solid var(--line); overflow: hidden; cursor: pointer; user-select: none; touch-action: none; }
.tl-strip { position: absolute; inset: 0; z-index: 0; display: flex; }
.tl-frame { flex: 1; background-size: cover; background-position: center; opacity: .85; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .3); }
.tl-blocks { position: absolute; inset: 0; z-index: 1; }
.tl-block { position: absolute; top: 0; bottom: 0; opacity: .5; }
.tl-range { position: absolute; top: 0; bottom: 0; z-index: 1; background: rgba(124, 58, 237, .28); border: 1px solid var(--accent); box-sizing: border-box; }
.tl-handle { position: absolute; top: 0; bottom: 0; width: 12px; margin-left: -6px; background: var(--accent); border-radius: 4px; cursor: ew-resize; box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); z-index: 3; }
.tl-handle::after { content: ""; position: absolute; left: 4px; top: 50%; width: 2px; height: 16px; margin-top: -8px; background: #fff; border-radius: 2px; }
.tl-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 12px; flex-wrap: wrap; }
.tl-sel { font-size: 13px; color: var(--muted); }
.tl-sel b { color: var(--text); }
/* rolador do zoom: só a trilha estica, os marcadores continuam em % dela */
.tl-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.tl-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.tl-guia { position: absolute; top: 0; bottom: 0; width: 0; margin-left: -1px; z-index: 2;
  border-left: 1px dashed #fff; opacity: .6; pointer-events: none; }
.tl-guia-t { position: absolute; top: 4px; left: 6px; background: rgba(0, 0, 0, .72); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.clip-line { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.clip-line:last-child { border-bottom: 0; }
.icon-x { background: none; border: 0; color: var(--muted); padding: 4px 8px; }
.icon-x:hover { color: var(--err); }

/* =========================================================== editor central */
.ed-intro { padding-top: 4vh; }

/* ESTAÇÃO DE TRABALHO (Cortar vídeos)
   Faixa superior em 100% da largura: player + linha do tempo da origem. É a
   largura que dá precisão ao ajuste de tempo — em coluna estreita não dava.
   Faixa inferior: PREVIEW grande | inspector de configuração à direita. */
.ed-top { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; }
/* origem à esquerda, decisões de corte à direita — "Gravar intervalo de corte"
   fica FORA deste grid, em largura total, porque o filmstrip precisa dela */
.ed-top-grid { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: 20px; align-items: start; }
.ed-cut { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.ed-cut .account-panel { border: 0; padding: 0; background: none; }
.ed-cut .ed-range { background: none; border: 0; padding: 14px 0 0; margin-top: 14px;
  border-top: 1px solid var(--line); }
/* nada mais fica ao lado nesta faixa, então sticky só engoliria o que vem abaixo */
.ed-stage { position: relative; display: flex; justify-content: center; }
.ed-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }

.ed-result { display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.ed-result-h { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.ed-result-h i { color: var(--accent-soft); margin-right: 6px; }
/* O preview manda na coluna pela ALTURA (9:16 = 0.5625 de largura). A altura é
   uma variável para o divisor poder reescrevê-la inline ao ser arrastado. */
.ed-result { --wy-h: calc(100vh - 340px); }
.ed-result .wy { max-width: min(100%, calc(var(--wy-h) * 0.5625)); }
/* Divisor: arrasta para dar altura ao preview ou à linha do tempo. Precisa se
   LER como separação — uma linha de ponta a ponta — e não só como um pegador
   solto; discreto parado, forte quando o ponteiro chega. */
/* Alvo de 28px para uma alça de 4px, e `user-select:none` aqui e na dica logo
   acima: a barra é fina e tinha texto a 2px dela, então errar por poucos pixels
   agarrava a dica e o navegador abria uma seleção — parecia que o divisor tinha
   "parado de arrastar", quando na verdade nunca chegava a ser agarrado. */
.ed-split { height: 28px; margin: 4px 0; cursor: ns-resize; position: relative; flex-shrink: 0;
  touch-action: none; user-select: none; }
.ed-split::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--line); transition: background .12s; }
.ed-split::after { content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 4px;
  margin: -2px 0 0 -28px; border-radius: 999px; background: var(--line);
  box-shadow: 0 0 0 4px var(--panel); transition: background .12s, width .12s; }
.ed-split:hover::before, .ed-split.arrastando::before { background: var(--accent); }
.ed-split:hover::after, .ed-split.arrastando::after { background: var(--accent); width: 82px; }
.wy-tip { user-select: none; }
.ed-expand { background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 9px; padding: 6px 9px; font-size: 12px; }
.ed-expand:hover { color: var(--accent-soft); border-color: var(--accent); }

.ed-fab { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.ed-fab button { width: 40px; height: 40px; padding: 0; border-radius: 10px; background: rgba(30, 30, 36, .8); backdrop-filter: blur(6px); border: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.ed-fab button:hover { color: var(--accent-soft); border-color: var(--accent); }
.ed-player { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
/* 44vh (era 62vh): a origem divide a tela com o preview do resultado agora */
.ed-video { max-height: 44vh; max-width: 100%; border-radius: 14px; background: #000; }
.ed-ytplayer { width: 100%; max-width: 640px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; margin: 0 auto; }
.ed-ytplayer iframe { width: 100%; height: 100%; border: 0; }
.ed-yt { width: 100%; max-width: 620px; aspect-ratio: 16/9; border-radius: 14px; background-color: #000; background-size: cover; background-position: center; position: relative; display: grid; place-items: center; color: #3a4657; font-size: 40px; }
.ed-yt .pc-badge { position: absolute; left: 8px; bottom: 8px; }
.ed-yt-open { position: absolute; top: 8px; right: 8px; color: #fff; background: rgba(0, 0, 0, .55); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; text-decoration: none; }
.ed-player-cap { margin-top: 8px; color: var(--muted); font-size: 13px; text-align: center; max-width: 90%; }

.ed-tl, .ed-range { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
/* seletor do intervalo de processamento */
.rs-track { position: relative; height: 26px; border-radius: 8px; background: linear-gradient(90deg, #171c24, #1d2431); border: 1px solid var(--line); cursor: pointer; user-select: none; touch-action: none; }
.rs-sel { position: absolute; top: 0; bottom: 0; background: rgba(34, 197, 94, .22); border: 1px solid #22c55e; box-sizing: border-box; }
.rs-h { position: absolute; top: -3px; bottom: -3px; width: 12px; margin-left: -6px; background: #22c55e; border-radius: 4px; cursor: ew-resize; z-index: 2; box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); }
/* teto de créditos: marca até onde o trecho pode ir e pinta o excesso */
.rs-max { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; z-index: 3;
  background: var(--warn); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); pointer-events: none; }
.rs-max::after { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--warn); }
.rs-sel.rs-over { background: rgba(248, 113, 113, .22); border-color: var(--err); }
.rs-warn { color: var(--err); font-weight: 600; }
.rs-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.rs-info b { color: var(--text); }
.rs-all { background: none; border: 1px solid var(--line); color: var(--muted); font-size: 11px; padding: 4px 10px; border-radius: 999px; }
.rs-all:hover { color: var(--text); border-color: var(--accent); }
.ed-tl-head { font-weight: 700; font-size: 15px; letter-spacing: -.01em; margin-bottom: 12px; }
.ed-tl-head i { color: var(--accent-soft); margin-right: 6px; }

/* Inspector: rolagem PRÓPRIA, para percorrer os menus sem perder o preview de
   vista — e o "Gerar vídeo" grudado no rodapé dele, sempre alcançável. */
.ed-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; }
.ed-side-fixed { padding: 16px 16px 14px; border-bottom: 1px solid var(--line); }
.ed-side-fixed .account-panel { border: 0; padding: 0; background: none; }
.ed-side-scroll { padding: 18px; overflow: visible; }
/* aba vertical que devolve os menus quando o preview está expandido */
.ed-side-peek { display: none; align-items: center; justify-content: center; gap: 8px;
  writing-mode: vertical-rl; background: none; border: 0; color: var(--muted);
  font-size: 12px; font-weight: 700; padding: 16px 0; width: 100%; height: 100%; }
.ed-side-peek:hover { color: var(--accent-soft); }
.ed-gen { position: sticky; bottom: 0; z-index: 5; margin-top: auto; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--panel); border-radius: 0 0 16px 16px; }
.ed-gen .gen-info { position: relative; z-index: 1; display: flex; gap: 10px; align-items: center; font-size: 12px; min-width: 0; }
.ed-gen .gen-info #gen-est { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-gen .gen-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.gen-div { width: 1px; height: 18px; background: var(--line); flex-shrink: 0; }
.gen-credits { white-space: nowrap; }
.gen-cancel { background: none; border: 0; color: var(--muted); font-size: 12px; padding: 6px 8px; }
.gen-cancel:hover { color: var(--text); }
#btn-gen:hover i { animation: bolt-pulse .6s ease infinite; }
@keyframes bolt-pulse { 50% { transform: scale(1.25); } }
/* progresso = fundo do card */
.ed-gen-fill { position: absolute; inset: 0; width: 0; z-index: 0; transition: width .3s ease;
  background: linear-gradient(90deg, rgba(124, 58, 237, .32), rgba(124, 58, 237, .14)); }
.ed-gen.processing { box-shadow: 0 0 0 1px rgba(124, 58, 237, .4) inset; }
.ed-gen-fill.indet { background-image: linear-gradient(45deg, rgba(124, 58, 237, .28) 25%, transparent 25%, transparent 50%, rgba(124, 58, 237, .28) 50%, rgba(124, 58, 237, .28) 75%, transparent 75%); background-size: 32px 32px; animation: indet 0.7s linear infinite; }
@keyframes indet { to { background-position: 32px 0; } }

/* PREVIEW EXPANDIDO: a origem sai de cena e o inspector vira uma aba de 46px.
   Nada é desmontado — só escondido — porque collect() lê o DOM dos painéis.
   Só existe onde há duas colunas para redistribuir; abaixo disso a tela já é
   uma coluna só, e a regra nem chega a valer (nada para desfazer). */
@media (min-width: 1025px) {
  .ed-expandido .ed-top { display: none; }
  .ed-expandido .ed-bottom { grid-template-columns: minmax(0, 1fr) 46px; }
  .ed-expandido .ed-side { max-height: calc(100vh - 32px); overflow: hidden; }
  .ed-expandido .ed-side > *:not(.ed-side-peek) { display: none; }
  .ed-expandido .ed-side-peek { display: flex; }
  .ed-expandido .ed-result { --wy-h: calc(100vh - 260px); }
}

/* painel de opções compacto (coluna única) — cabe no lado do editor */
.opt-wrap-compact { grid-template-columns: 1fr; }
.opt-wrap-compact .opt-grid { grid-template-columns: 1fr; gap: 16px; }
/* respiro entre as caixas retráteis do painel direito */
.ed-side-scroll .opt-card { margin-bottom: 2px; }
.ed-side-scroll > .field { margin-bottom: 16px; }

/* =========================================================== templates (vitrines) */
.tpl-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.tpl-search { display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; flex: 1; min-width: 220px; }
.tpl-search i { color: var(--muted); }
.tpl-search input { border: 0; background: none; padding: 11px 0; }
.tpl-search input:focus { box-shadow: none; }
.tpl-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.tpl-sec { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .05em; }
.tpl-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }

.tpl-card2 { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s, border-color .18s; }
.tpl-card2:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); border-color: rgba(124, 58, 237, .4); }
.tplc-visual { height: 170px; background: linear-gradient(160deg, #1a2030, #0d1017); display: grid; place-items: center; overflow: hidden; }
.tplc-preview { position: relative; background: #000; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.tplc-preview.a916 { width: 82px; height: 146px; }
.tplc-preview.a11 { width: 130px; height: 130px; }
.tplc-preview.a169 { width: 190px; height: 107px; }
.tplc-video { flex: 1; background: linear-gradient(135deg, #1e2735, #11151c); display: grid; place-items: center; color: #3a4657; font-size: 20px; }
.tplc-preview.a916 .tplc-video { flex: 0 0 62%; }
.tplc-card { flex: 1; background: linear-gradient(180deg, #241a45, #16102b); display: grid; place-items: center; font-size: 8px; font-weight: 800; color: #cfc4f5; }
.tplc-cap { position: absolute; left: 6%; right: 6%; bottom: 30%; text-align: center; font-weight: 800; font-size: 9px; color: #fff; }
.tplc-preview.a11 .tplc-cap, .tplc-preview.a169 .tplc-cap { bottom: 12%; }
.tpl-card2:hover .tplc-cap.kar { background: linear-gradient(90deg, var(--accent-soft) 50%, #fff 50%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: kar-sweep 1.4s linear infinite; }
@keyframes kar-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

.tpl-info { padding: 12px 14px 0; }
.tpl-name { font-weight: 700; font-size: 15px; }
.tpl-badges { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.tpl-badge { font-size: 11px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; color: var(--muted); }
.tpl-desc { color: var(--muted); font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpl-foot { display: flex; align-items: center; gap: 8px; padding: 12px 14px; margin-top: auto; }
.tpl-use { flex: 1; background: rgba(124, 58, 237, .12); border: 1px solid rgba(124, 58, 237, .4); color: var(--accent-soft); font-weight: 700; border-radius: 10px; padding: 10px; transition: background .15s, color .15s, box-shadow .15s; }
.tpl-use:hover { background: var(--accent); color: #fff; box-shadow: 0 4px 16px rgba(124, 58, 237, .4); }
.tpl-ic { background: var(--panel2); border: 1px solid var(--line); color: var(--muted); width: 38px; height: 38px; padding: 0; border-radius: 10px; }
.tpl-ic:hover { color: var(--text); }
.tpl-ic.del:hover { color: var(--err); border-color: #4a2626; }

.tpl-new { border: 2px dashed var(--line); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 260px; color: var(--muted); cursor: pointer; transition: border-color .15s, color .15s; text-align: center; }
.tpl-new:hover { border-color: var(--accent); color: var(--accent-soft); }
.tpl-new i { font-size: 26px; }
.tpl-new small { font-size: 11px; }
.tpl-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 40px 20px; }
.tpl-empty i { font-size: 34px; color: var(--line); margin-bottom: 12px; display: block; }
.tpl-empty b { color: var(--text); font-size: 15px; }
/* estado vazio é convite, não beco sem saída: sempre sai daqui com um clique */
.tpl-empty-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.tpl-empty-acts a.primary { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }

/* =========================================================== galeria vídeos gerados */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.vcard { display: flex; flex-direction: column; }
.vthumb { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #2a2a35; }
.vthumb::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, #242430 25%, #1a1a24 50%, #242430 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.vmedia { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: #000; }
/* Em tela cheia o `cover` continuava valendo: um corte 9:16 era ampliado até
   preencher a tela 16:9, sobrando só a faixa do meio — o "desproporcional".
   Vale para qualquer vídeo do app (galeria e player do editor).
   Regras separadas de propósito: um seletor não suportado invalidaria a lista. */
video:fullscreen { object-fit: contain; width: 100%; height: 100%; background: #000; }
video:-webkit-full-screen { object-fit: contain; width: 100%; height: 100%; background: #000; }
.vthumb-blur { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, #1e2735, #11151c); filter: blur(4px); }
/* `.vfail` também é usada pelo seletor de vídeo do Editor, onde é um <span> em
   fluxo normal — por isso o posicionamento fica preso ao card da galeria, e não
   na classe solta (era a mesma armadilha do .vpick/.vsel). */
.vfail { display: grid; place-items: center; color: #f87171; font-size: 34px; background: #15151a; }
.vthumb .vfail { position: absolute; inset: 0; z-index: 1; }
.vcard.error .vthumb { box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .55); }
.vproc { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.vproc .proc-ring { transform: rotate(-90deg); }
.vproc-pct { position: absolute; font-weight: 800; font-size: 14px; color: var(--text); }
.vbadge { position: absolute; top: 8px; left: 8px; z-index: 3; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 8px; }
/* Seleção em lote: checkbox no canto do thumb; com ele o badge do corte anda
   pro lado. Chamava-se `.vpick` e brigava com o seletor de vídeo do Editor
   (mesmo nome, ver .vpick-bar lá embaixo): os cards de lá herdavam este
   position:absolute e empilhavam no canto da tela, por cima da sidebar. */
.vsel { position: absolute; top: 8px; left: 8px; z-index: 5; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px; background: rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 255, 255, .18); cursor: pointer; }
.vsel input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.vsel + .vbadge { left: 42px; }
.vcard.picked .vthumb { box-shadow: 0 0 0 2px var(--accent); }
.vcard.picked .vsel { background: var(--accent); border-color: var(--accent); }
/* idade do clipe (já foi contagem regressiva de expiração — nada apaga clipes hoje) */
.vexpiry { position: absolute; bottom: 8px; left: 8px; z-index: 3; background: rgba(0, 0, 0, .6); color: #cbd2dd; font-size: 11px; padding: 2px 8px; border-radius: 8px; }
.vhover { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 6, 10, .45); opacity: 0; transition: opacity .2s; }
.vthumb:hover .vhover { opacity: 1; }
/* assistir é a ação do hover; baixar mora no rodapé do card */
.vplay { width: 58px; height: 58px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: #12161c; border: 0; font-size: 19px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45); transition: transform .16s, background .16s; }
.vplay i { margin-left: 3px; }
.vplay:hover { transform: scale(1.08); background: #fff; }
/* tocando: o overlay sai da frente dos controles nativos */
.vthumb.playing .vhover { opacity: 0; pointer-events: none; }
.vthumb.playing .vexpiry, .vthumb.playing .vbadge { opacity: 0; }
.vbtn-main { background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 700;
  box-shadow: 0 4px 16px rgba(124, 58, 237, .5); transform: translateY(6px); transition: transform .2s, filter .15s; }
.vthumb:hover .vbtn-main { transform: translateY(0); }
.vbtn-main:hover { filter: brightness(1.1); }
.vcard.error .vbtn-main { background: var(--panel2); border: 1px solid var(--line); box-shadow: none; }
.vquick { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; transform: translateY(-6px); transition: transform .2s; }
.vthumb:hover .vquick { transform: translateY(0); }
.vqbtn { width: 32px; height: 32px; padding: 0; border-radius: 8px; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .15); color: #fff; display: grid; place-items: center; text-decoration: none; }
.vqbtn:hover { background: rgba(0, 0, 0, .85); }
.vqbtn.del:hover { color: var(--err); }
/* ações SEMPRE visíveis abaixo do card (os textos não ficam mais escondidos no hover) */
.vactions { display: flex; gap: 8px; padding: 10px 4px 0; }
.vact { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  font-size: 12.5px; padding: 8px 10px; border-radius: 10px; transition: border-color .12s, color .12s; }
.vact:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-soft); }
.vact:disabled { opacity: .4; cursor: not-allowed; }
.vact i { color: var(--accent-soft); }
.vact:disabled i { color: var(--muted); }
/* hierarquia: baixar é a ação de 99% dos cliques; textos é secundária */
.vact-primary { flex: 1.7; background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700;
  box-shadow: 0 3px 12px rgba(124, 58, 237, .35); }
.vact-primary i { color: #fff; }
.vact-primary:hover:not(:disabled) { filter: brightness(1.1); border-color: var(--accent); color: #fff; }
.vact.ghost { flex: 1; background: none; color: var(--muted); }
.vact.ghost i { color: var(--muted); }
.vact.ghost:hover:not(:disabled) i { color: var(--accent-soft); }
/* já baixado: verde discreto, ocupa a mesma largura do primário, segue clicável (re-download) */
.vact-done { flex: 1.7; background: rgba(74, 222, 128, .12); border-color: var(--ok); color: var(--ok); font-weight: 700; }
.vact-done i { color: var(--ok); }
.vact-done:hover:not(:disabled) { background: rgba(74, 222, 128, .2); border-color: var(--ok); color: var(--ok); }
.vinfo { padding: 10px 4px 0; }
.vtitle { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vmeta { color: var(--muted); font-size: 12px; margin-top: 3px; }
.vmeta.err { color: var(--err); }

/* =========================================================== créditos e planos */
.bal-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 22px 24px; border-radius: 18px;
  background: linear-gradient(140deg, rgba(124, 58, 237, .16), var(--panel) 60%); border: 1px solid var(--line); }
.bal-label { color: var(--muted); font-size: 12px; }
.bal-num { font-size: 34px; font-weight: 800; color: var(--accent-soft); display: flex; align-items: baseline; gap: 10px; }
.bal-num i { color: var(--warn); font-size: 24px; }
.bal-num span { font-size: 14px; color: var(--muted); font-weight: 600; }
.bal-plan { font-size: 20px; font-weight: 700; margin-top: 2px; }
.bal-div { width: 1px; align-self: stretch; background: var(--line); }
.bal-note { flex: 1; min-width: 180px; color: var(--muted); font-size: 12.5px; text-align: right; }

.pack-card { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; padding: 12px 14px;
  border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); transition: border-color .12s, background .12s; }
.pack-card b { font-size: 20px; font-weight: 800; }
.pack-card small { font-size: 11px; color: var(--muted); }
.pack-card span { font-size: 12px; color: var(--accent-soft); font-weight: 700; margin-top: 4px; }
.pack-card.active { border-color: var(--accent); background: rgba(124, 58, 237, .12); box-shadow: 0 0 0 2px rgba(124, 58, 237, .25); }
.plan-card ul li.feat-star i { color: var(--accent-soft); }
.plan-card.is-current { border-color: var(--ok); }

/* =========================================================== auth */
.auth-wrap { display: grid; place-items: center; padding: 4vh 20px 40px; }
.auth-card2 { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: 30px 28px; text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.auth-ico { width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 16px; display: grid; place-items: center;
  font-size: 22px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--blue)); }
.auth-card2 h1 { font-size: 22px; margin-bottom: 6px; }
.auth-card2 .muted { font-size: 13px; }
.auth-tabs { margin: 18px 0 16px; }
.auth-pending { margin: 12px 0 0; font-size: 12.5px; }
.auth-card2 .field { text-align: left; }
.auth-card2 .field .linkish { display: block; margin: 6px 0 0 auto; }
/* separador entre entrar-com-senha e entrar-com-link */
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted); font-size: 12px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-perks { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; text-align: left; }
.auth-perks i { color: var(--accent-soft); width: 18px; margin-right: 8px; }

/* =========================================================== gaveta de textos */
.cd-back { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0); transition: background .22s; }
.cd-back.open { background: rgba(0, 0, 0, .45); }
.cd { position: absolute; top: 0; right: 0; height: 100%; width: 680px; max-width: 96vw;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: -18px 0 60px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease; }
.cd-back.open .cd { transform: translateX(0); }
.cd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; }
.cd-head h3 { font-size: 17px; }
.cd-x { background: none; border: 0; color: var(--muted); font-size: 18px; padding: 4px 8px; }
.cd-x:hover { color: var(--text); }
.cd-plats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cd-plat { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted);
  background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.cd-vid { font-size: 12px; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted);
  background: rgba(124, 58, 237, .08); border: 1px solid rgba(124, 58, 237, .22);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 18px; }
.cd-note i { color: var(--accent-soft); }
.cd-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.cd-block { margin-bottom: 20px; }
.cd-lbl { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.cd-count { margin-left: auto; font-weight: 400; }
.cd-count .over { color: var(--err); }
.cd-copy { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
  height: 28px; padding: 0 11px; border-radius: 8px; font-size: 11.5px; flex-shrink: 0; }
.cd-copy:hover { color: var(--text); border-color: var(--accent); }
.cd-copy.ok { color: var(--ok); border-color: #1e4d31; }
.cd-lbl .cd-copy { margin-left: 6px; }
.cd-count + .cd-copy { margin-left: 6px; }
.cd-field { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.cd-multi { max-height: 260px; overflow-y: auto; }
.cd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-tag { background: rgba(124, 58, 237, .14); border: 1px solid rgba(124, 58, 237, .35); color: var(--accent-soft);
  font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.cd-acc-h { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cd-acc .acc-chev { transition: transform .2s; transform: rotate(-90deg); }
.cd-acc-body { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.cd-acc.open .cd-acc-body { max-height: 460px; }
.cd-acc.open .acc-chev { transform: rotate(0deg); }
.cd-foot { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--panel); }

/* =========================================================== cards de corte */
.seg-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.seg-n { background: var(--accent); color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 999px; margin-left: 4px; }
.seg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.seg-card { position: relative; display: flex; overflow: hidden;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .14s, opacity .14s, background .14s; }
.seg-bar { width: 3px; flex-shrink: 0; }
.seg-body { flex: 1; min-width: 0; padding: 10px 12px; }
.seg-top { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.seg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.seg-dur { margin-left: auto; color: var(--muted); font-size: 12px; }
.seg-times { color: var(--muted); font-size: 12px; margin: 4px 0 9px; font-variant-numeric: tabular-nums; }
.seg-acts { display: flex; gap: 7px; }
.seg-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  font-size: 12px; padding: 6px 10px; border-radius: 8px; }
.seg-btn:hover { border-color: var(--accent); color: var(--accent-soft); }
.seg-btn.del { flex: 0 0 38px; }
.seg-btn.del:hover { border-color: var(--err); color: var(--err); }
.seg-card.editing { border-color: var(--accent); background: rgba(124, 58, 237, .1); }
.seg-card.dim { opacity: .5; pointer-events: none; }
.seg-flag { background: var(--accent); color: #fff; font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; }
/* o vazio ocupa a altura de dois cards -> nada pula quando o 1º corte entra */
.seg-empty { border: 1px dashed var(--line); border-radius: 12px; padding: 26px 20px; text-align: center; }
.seg-empty i { font-size: 24px; color: var(--accent-soft); margin-bottom: 10px; display: block; }
.seg-empty p { font-size: 13px; margin: 0 0 4px; }
.seg-empty .muted { font-size: 12px; line-height: 1.5; }
.ed-tl.tl-editing { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); }

/* =========================================================== abas de configuração */
/* Divisor de CATEGORIA, não título: em caixa alta e menor, como .fontgrp-h e
   .tpl-sec já fazem. No mesmo corpo do rótulo de campo os dois competiam. */
.cfg-looks-h { font-size: 11px; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 11px; }
.cfg-looks { margin-bottom: 16px; }
/* barra de ícones à DIREITA; o painel da opção escolhida abre ao lado dela */
.cfg-shell { display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: 14px; align-items: start; }
.cfg-rail { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 20px;
  border-left: 1px solid var(--line); padding-left: 12px; }
.cfg-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 10px; padding: 9px 6px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.cfg-tab i { font-size: 14px; }
/* painel estreito (Cortar vídeos): o rail vira faixa horizontal em cima */
@media (max-width: 1180px) {
  .cfg-shell { grid-template-columns: 1fr; }
  .cfg-rail { flex-direction: row; overflow-x: auto; scrollbar-width: none; order: -1;
    border-left: 0; border-bottom: 1px solid var(--line); padding: 0 0 10px; position: static; }
  .cfg-rail::-webkit-scrollbar { display: none; }
  .cfg-tab { flex: 1 0 auto; }
}
.cfg-tab:hover { color: var(--text); }
.cfg-tab.active { background: rgba(124, 58, 237, .16); color: var(--accent-soft); border-color: var(--accent); }
.cfg-badge { position: absolute; top: -5px; right: -3px; font-style: normal; font-size: 9px; font-weight: 700;
  background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 6px; }
.cfg-badge:empty { display: none; }
.cfg-pane { animation: cfg-in .16s ease; }
.cfg-pane.hidden { display: none; }
@keyframes cfg-in { from { opacity: 0; transform: translateY(-3px); } }
.cfg-pane .opt-card { border: 0; background: none; padding: 0; }
.cfg-hint { color: var(--muted); font-size: 11.5px; line-height: 1.5; margin-top: 12px; }
.linkish { background: none; border: 0; color: var(--accent-soft); text-decoration: underline; padding: 0; font-size: 11.5px; }

/* bloco da camada selecionada no palco: tamanho exato + alinhamento */
.cfg-layer { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 14px; }
.cfg-layer-h { font-size: 11.5px; font-weight: 700; color: var(--accent-soft); margin-bottom: 8px; }
.cfg-layer-h i { margin-right: 6px; }
.cfg-layer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cfg-layer-row .lbl { margin: 0; font-size: 11.5px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 9px; padding: 2px 6px; }
.stepper button { width: 22px; height: 22px; padding: 0; border-radius: 6px; background: none;
  border: 0; color: var(--muted); font-size: 15px; line-height: 1; }
.stepper button:hover { color: var(--accent-soft); }
.stepper input { width: 52px; border: 0; background: none; padding: 4px 0; text-align: center; font-size: 12.5px; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper span { font-size: 11px; color: var(--muted); }
.alignrow { display: inline-flex; gap: 4px; margin-left: auto; }
.alignrow .chip { padding: 6px 9px; font-size: 12px; }

/* imagem sobreposta: miniatura no lugar do botão, com lixeira no canto */
.imgthumb { position: relative; display: inline-block; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; background: var(--panel2); line-height: 0; }
.imgthumb img { display: block; max-width: 180px; max-height: 120px; object-fit: contain; }
.imgthumb-del { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0;
  border-radius: 8px; background: rgba(0, 0, 0, .68); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; display: grid; place-items: center; font-size: 12px; }
.imgthumb-del:hover { background: var(--err); border-color: var(--err); }

/* cards de fonte: a amostra é escrita na própria fonte */
.fontgrp + .fontgrp { margin-top: 16px; }
.fontgrp-h { font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase;
  letter-spacing: .07em; margin: 20px 0 10px; }
.fontgrp:first-child .fontgrp-h { margin-top: 0; }
.fontgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
/* gatilho de uma linha: a amostra é escrita na própria fonte escolhida */
.fonte-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  border-radius: 11px; padding: 9px 12px; font-size: 13px; font-weight: 600; }
.fonte-btn:hover { border-color: var(--accent); }
.fonte-amostra { font-size: 19px; line-height: 1; width: 30px; flex-shrink: 0; }
.fonte-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fonte-btn i { color: var(--muted); font-size: 11px; }
/* a janela das fontes: larga e alinhada à esquerda, como a dos documentos */
.modal-backdrop:has(.fontes-modal) .modal-card { max-width: 620px; }
.fontes-modal { text-align: left; }
.fontes-modal > h3 { margin-bottom: 4px; padding-right: 30px; }
.fontes-corpo { max-height: 60dvh; overflow-y: auto; padding-right: 10px; }

/* atalho de templates dentro do Editor */
.modal-backdrop:has(.tpl-modal) .modal-card { max-width: 680px; }
.tpl-modal { text-align: left; }
.tpl-modal > h3 { margin-bottom: 4px; padding-right: 30px; }
.tpl-modal-q { margin-bottom: 14px; }
.tpl-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; max-height: 58dvh; overflow-y: auto; padding-right: 8px; }
.tpl-modal-card { display: block; padding: 0; overflow: hidden; text-align: center;
  background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 12px; }
.tpl-modal-card:hover { border-color: var(--accent); }
.tpl-modal-card .tplc-visual { height: 128px; }
.tpl-modal-n { display: block; padding: 8px 10px; font-size: 12px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fontcard { display: block; text-align: left; background: var(--panel2); border: 1px solid var(--line);
  color: var(--text); border-radius: 12px; padding: 12px; transition: border-color .14s, background .14s; }
.fontcard:hover { border-color: var(--accent); }
.fontcard.sel { border-color: var(--accent); background: rgba(124, 58, 237, .14); box-shadow: 0 0 0 1px var(--accent); }
.fontcard-s { display: block; font-size: 19px; line-height: 1.15; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.fontcard-n { display: block; font-size: 11.5px; font-weight: 700; color: var(--accent-soft); margin-top: 8px; }
.fontcard-d { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }

/* =========================================================== linha do tempo das camadas */
/* Cada TIPO de camada tem sua cor, a mesma no palco e aqui — é o que faz
   "a linha rosa" e "a camada rosa do preview" serem a mesma coisa. */
.lt-row[data-t="vid"],   .wy-layer[data-t="vid"]   { --lt-c: #38bdf8; --lt-cs: rgba(56, 189, 248, .26); }
.lt-row[data-t="cap"],   .wy-layer[data-t="cap"]   { --lt-c: #22c55e; --lt-cs: rgba(34, 197, 94, .26); }
.lt-row[data-t="title"], .wy-layer[data-t="title"] { --lt-c: #f59e0b; --lt-cs: rgba(245, 158, 11, .26); }
.lt-row[data-t="txt"],   .wy-layer[data-t="txt"]   { --lt-c: #a78bfa; --lt-cs: rgba(167, 139, 250, .32); }
.lt-row[data-t="img"],   .wy-layer[data-t="img"]   { --lt-c: #f472b6; --lt-cs: rgba(244, 114, 182, .32); }

.lt { margin-top: 14px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px; }
.lt-empty { color: var(--muted); font-size: 11.5px; }
.lt-head { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 10px; flex-wrap: wrap; }
.lt-head i { color: var(--accent-soft); margin-right: 5px; }
.lt-tit { white-space: nowrap; }
.lt-dur { font-weight: 600; }
/* Zoom horizontal: o rolador fica por fora e só o conteúdo estica. O rótulo e as
   ações grudam nas bordas — sem isso, aproximar tira da tela justamente o nome
   da camada que se está ajustando. */
.lt-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; display: flex; }
.lt-zoom { flex: 0 0 auto; min-width: 100%; }
/* folga no fim, só com zoom: 12% da largura VISÍVEL (não do conteúdo esticado),
   para dar onde rolar ao ajustar algo colado no último segundo */
.lt-folga { flex: 0 0 12%; }
/* Sobra sem mídia: a régua promete um tempo que não vai existir em vídeo. Fica
   hachurada e SEM captar ponteiro — não pode roubar o clique da trilha. */
.lt-morto { position: absolute; top: 0; bottom: 0; right: 0; pointer-events: none; z-index: 4;
  border-left: 1px dashed var(--line);
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .42) 0 6px, rgba(0, 0, 0, .18) 6px 12px); }
.lt-morto span { position: absolute; top: 4px; left: 7px; font-size: 9.5px; font-weight: 700;
  color: var(--hint); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.lt-ruler .lt-morto span { display: none; }
.lt-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 74px; gap: 8px;
  align-items: center; margin-bottom: 6px; border-radius: 8px; }
.lt-lbl { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: grab; touch-action: none;
  position: sticky; left: 0; z-index: 6; background: var(--panel2); }
/* O ícone é o que identifica a camada de relance (e no celular ele fica
   sozinho, sem o nome ao lado): 11px não dizia se aquilo era legenda ou vídeo. */
.lt-lbl i { color: var(--lt-c, var(--accent-soft)); margin-right: 5px; font-size: 14px; width: 16px; text-align: center; }
.lt-track { position: relative; height: 30px; border-radius: 7px; background: var(--bg);
  border: 1px solid var(--line); overflow: hidden; touch-action: none; }
.lt-block { position: absolute; top: 0; bottom: 0; background: var(--lt-cs, rgba(124, 58, 237, .35));
  border: 1px solid var(--lt-c, var(--accent)); border-radius: 6px; display: flex; align-items: center;
  justify-content: center; min-width: 26px; cursor: grab; }
/* Vídeo e legenda cobrem o clipe INTEIRO — a barra tem de dizer isso ocupando a
   trilha toda. Como selo de largura automática, pareciam durar dois segundos. */
.lt-block.fixed { left: 0; right: 0; justify-content: flex-start; padding-left: 10px;
  background: rgba(139, 148, 163, .14); border-style: dashed; cursor: default; }
.lt-time { font-size: 10px; color: var(--text); white-space: nowrap; pointer-events: none; }
.lt-h { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; background: var(--lt-c, var(--accent)); }
.lt-h.in { left: 0; border-radius: 5px 0 0 5px; }
.lt-h.out { right: 0; border-radius: 0 5px 5px 0; }
.lt-act { text-align: right; display: flex; gap: 4px; justify-content: flex-end; align-items: center;
  position: sticky; right: 0; z-index: 6; background: var(--panel2); }
.lt-note { font-size: 10px; color: var(--muted); }
.lt-hint { color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 8px; }

/* ---- régua, cabeçote e reprodução */
.lt-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lt-sep { width: 1px; height: 16px; background: var(--line); }
.lt-add { background: var(--bg); border: 1px solid var(--line); color: var(--text);
  font-size: 11px; padding: 5px 9px; border-radius: 8px; font-weight: 600; }
.lt-add:hover { border-color: var(--accent); color: var(--accent-soft); }
.lt-add:disabled { opacity: .45; cursor: not-allowed; }
.lt-cut i { margin-right: 4px; }
.lt-play-btn { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--accent);
  border: 0; color: #fff; font-size: 12px; display: grid; place-items: center; }
.lt-play-btn:hover:not(:disabled) { filter: brightness(1.15); }
.lt-play-btn:disabled { background: var(--panel2); color: var(--muted); border: 1px solid var(--line); cursor: not-allowed; }
.lt-now { font-variant-numeric: tabular-nums; color: var(--accent-soft); }
/* a régua é a área de clique do cabeçote: alta o bastante para o toque */
.lt-ruler { position: relative; height: 22px; margin: 0 calc(74px + 8px) 6px calc(92px + 8px);
  border-bottom: 1px solid var(--line); cursor: pointer; touch-action: none; }
.lt-tick { position: absolute; top: 2px; font-size: 9.5px; color: var(--muted);
  transform: translateX(-50%); pointer-events: none; }
.lt-tick::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 1px;
  height: 5px; background: var(--line); }
.lt-play { position: absolute; top: -2px; bottom: -6px; width: 2px; background: var(--accent-soft);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); pointer-events: none; }
.lt-play::before { content: ""; position: absolute; top: -3px; left: 50%; width: 11px; height: 11px;
  transform: translateX(-50%) rotate(45deg); background: var(--accent-soft); border-radius: 2px; }

/* o cabeçote atravessa TODAS as camadas: é assim que se lê "o que está no ar
   neste instante" sem ter de mirar linha por linha */
.lt-body { position: relative; }
.lt-play-wrap { position: absolute; top: 0; bottom: 0; left: calc(92px + 8px); right: calc(74px + 8px);
  pointer-events: none; z-index: 5; }
.lt-play-full { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--accent-soft); pointer-events: auto; cursor: ew-resize;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 0 10px rgba(124, 58, 237, .55); }
/* faixa invisível em volta: uma agulha de 2px é impossível de pegar no toque */
.lt-play-full::before { content: ""; position: absolute; top: 0; bottom: 0; left: -7px; right: -7px; }
/* a cabeça que se agarra, como em qualquer editor de vídeo */
.lt-play-full::after {
  content: ""; position: absolute; top: -3px; left: 50%; width: 13px; height: 12px;
  transform: translateX(-50%); background: var(--accent-soft); border-radius: 2px 2px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%);
}
/* o tempo colado na agulha: o número do cabeçalho fica longe do olho, que está
   na agulha enquanto se arrasta */
.lt-play-tempo { position: absolute; top: 2px; left: 9px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px; white-space: nowrap;
  font-variant-numeric: tabular-nums; pointer-events: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }

/* Eixo de visualização: tracejada e mais apagada de propósito — tem de se ler
   como "onde eu iria", nunca confundir com o cabeçote, que é sólido. */
.lt-guia { position: absolute; top: 0; bottom: 0; width: 0; margin-left: -1px;
  border-left: 2px dashed var(--accent-soft); opacity: .75; pointer-events: none; }
.lt-guia-t { position: absolute; bottom: 2px; left: 6px; background: var(--panel2); color: var(--accent-soft);
  border: 1px solid var(--line); font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
/* botões redondos de ícone da barra (eixo e zoom) */
.lt-ico { width: 26px; height: 26px; padding: 0; border-radius: 8px; background: var(--bg);
  border: 1px solid var(--line); color: var(--muted); font-size: 11px; display: grid; place-items: center; }
.lt-ico:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-soft); }
.lt-ico:disabled { opacity: .38; cursor: not-allowed; }
.lt-ico.on { background: rgba(124, 58, 237, .18); border-color: var(--accent); color: var(--accent-soft); }
.lt-zoomn { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 26px; text-align: center; }

.lt-row.sel { background: rgba(124, 58, 237, .07); }
.lt-row.sel .lt-track { border-color: var(--lt-c, var(--accent)); box-shadow: 0 0 0 1px var(--lt-c, var(--accent)); }
.lt-row.sel .lt-nome { color: var(--text); }
/* Reordenar arrastando a linha. `pointer-events:none` é obrigatório: a linha
   arrastada acompanha o ponteiro, então sem isto o elementFromPoint que procura
   a linha de destino encontraria sempre ela mesma — e nada seria reordenado. */
.lt-arrastando { opacity: .75; position: relative; z-index: 6; cursor: grabbing; pointer-events: none; }
.lt-alvo .lt-track { border-color: var(--accent-soft); border-style: dashed; }
/* "escolha uma camada": pulsa as trilhas para dizer ONDE clicar */
.lt-pede-sel .lt-track { animation: lt-pede 1.4s ease; }
@keyframes lt-pede {
  0%, 100% { box-shadow: none; }
  25%, 75% { box-shadow: 0 0 0 2px var(--accent); }
}
.lt-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-mvs { display: flex; flex-direction: column; line-height: 0; }
.lt-mv { background: none; border: 0; color: var(--muted); font-size: 8px; padding: 1px 2px; }
.lt-mv:hover { color: var(--accent-soft); }
.lt-bt { font-size: 10px; color: var(--text); white-space: nowrap; pointer-events: none;
  font-variant-numeric: tabular-nums; padding: 0 4px; overflow: hidden; }
.lt-fade { background: var(--bg); border: 1px solid var(--line); color: var(--muted);
  border-radius: 7px; font-size: 10.5px; padding: 3px 4px; }
.lt-x { background: none; border: 0; color: var(--muted); padding: 4px 6px; font-size: 11px; }
.lt-x:hover { color: var(--err); }

@media (max-width: 600px) {
  /* Mais barra e menos moldura: o rótulo encolhe, o seletor de fade sai (é o
     ajuste mais raro e o que mais rouba largura) e sobra a lixeira. São ~40px
     devolvidos à trilha, que é onde o dedo trabalha. */
  .lt-row { grid-template-columns: 58px minmax(0, 1fr) 30px; }
  .lt-ruler { margin-left: calc(58px + 8px); margin-right: calc(30px + 8px); }
  .lt-play-wrap { left: calc(58px + 8px); right: calc(30px + 8px); }
  .lt-fade { display: none; }
  .lt-track { height: 44px; }          /* alvo de toque de verdade */
  .lt-h { width: 18px; }
  .lt-bt { font-size: 9.5px; }
  .lt-lbl { font-size: 10px; }
  .lt-nome { display: none; }          /* o ícone colorido já diz o tipo */
  .lt-block.fixed { padding-left: 6px; }
}

/* =========================================================== color picker próprio */
/* xadrez que revela a transparência */
.cf-chip, .cp-alpha, .cp-preview, .cp-sw {
  background-image:
    linear-gradient(45deg, #4a4a52 25%, transparent 25%, transparent 75%, #4a4a52 75%),
    linear-gradient(45deg, #4a4a52 25%, transparent 25%, transparent 75%, #4a4a52 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  background-color: #2b2b33;
}
.cf-row { display: flex; gap: 10px; }
.cf-row > div { flex: 1; min-width: 0; }
.cf { display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 7px 9px; font-size: 11.5px; }
.cf:hover { border-color: var(--accent); }
.cf-chip { position: relative; width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); overflow: hidden; }
.cf-chip-c { position: absolute; inset: 0; }
.cf-hex { font-variant-numeric: tabular-nums; letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cp { position: fixed; z-index: 120; width: 236px; background: #1e1e24;
  border: 1px solid #2c2c34; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .66); user-select: none; }
.cp-sv { position: relative; height: 132px; cursor: crosshair; touch-action: none; }
.cp-sv-white, .cp-sv-black { position: absolute; inset: 0; }
.cp-sv-white { background: linear-gradient(90deg, #fff, transparent); }
.cp-sv-black { background: linear-gradient(0deg, #000, transparent); }
.cp-sv-dot { position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); pointer-events: none; }

.cp-mid { display: flex; align-items: center; gap: 10px; padding: 12px; }
.cp-sliders { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.cp-track { position: relative; height: 10px; border-radius: 999px; cursor: pointer;
  touch-action: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.cp-hue { background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cp-alpha { overflow: hidden; }
.cp-alpha-fill { position: absolute; inset: 0; border-radius: 999px; }
.cp-thumb { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .7); pointer-events: none; }
.cp-eye { width: 30px; height: 30px; padding: 0; flex-shrink: 0; border-radius: 8px;
  background: none; border: 1px solid #2c2c34; color: #c8c8d2; font-size: 13px; }
.cp-eye:hover { color: #fff; border-color: var(--accent); }
.cp-preview { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }

.cp-inputs { display: flex; gap: 8px; padding: 0 12px 12px; }
.cp-mode { flex-shrink: 0; background: #121214; border: 1px solid #2c2c34; color: #c8c8d2;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 0 8px; border-radius: 7px; }
.cp-mode:hover { color: #fff; }
.cp-fields { display: flex; gap: 6px; flex: 1; min-width: 0; }
.cp-in { background: #121214; border: 1px solid #2c2c34; color: #fff; border-radius: 7px;
  padding: 6px 8px; font-size: 11.5px; width: 100%; min-width: 0; text-align: center;
  font-variant-numeric: tabular-nums; }
.cp-in:focus { border-color: var(--accent); box-shadow: none; outline: none; }
.cp-in-hex { text-align: left; letter-spacing: .04em; }

.cp-swatches { border-top: 1px solid #2c2c34; padding: 10px 12px 12px; }
.cp-sw-h { font-size: 10px; color: #8b8b96; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 8px; }
.cp-sw-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.cp-sw { width: 100%; aspect-ratio: 1; padding: 0; border-radius: 50%; border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: transform .12s; }
.cp-sw:hover { transform: scale(1.18); }
.cp-sw-add { background: #121214 !important; background-image: none !important;
  color: #c8c8d2; font-size: 9px; box-shadow: inset 0 0 0 1px #3a3a44; }
.cp-sw-add:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--accent); }

/* =========================================================== seletor compacto de vídeo */
.vpick-bar { display: flex; align-items: center; gap: 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 20px; }
.vpick-lbl { font-size: 12px; color: var(--muted); font-weight: 700; flex-shrink: 0; }
.vpick-lbl i { color: var(--accent-soft); margin-right: 5px; }
.vpick-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; flex: 1; scrollbar-width: thin; }
/* cards compactos: o controle só serve para escolher, então o clique (com o
   destaque de borda/fundo) basta — sem seletor de canto. */
.vpick { flex: 0 0 136px; background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  border-radius: 11px; padding: 6px; text-align: left; transition: border-color .14s, background .14s; }
.vpick:hover { border-color: var(--accent); }
.vpick.selected { border-color: var(--accent); background: rgba(124, 58, 237, .16);
  box-shadow: 0 0 0 1px var(--accent); }
.vpick-media { display: block; width: 100%; height: 76px; object-fit: cover; border-radius: 7px; background: #000; }
span.vpick-media { display: grid; place-items: center; color: #3a4657; font-size: 18px; }
.vpick-name { display: block; font-size: 11.5px; font-weight: 600; margin-top: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vpick-meta { display: block; font-size: 10.5px; color: var(--muted); }

/* =========================================================== editor WYSIWYG */
.wy-grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 24px; align-items: start; }
.wy-col { position: sticky; top: 20px; }
.wy-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* mesma mecânica de .ed-result: a ALTURA governa, e a largura do 9:16 sai dela */
.wy-stagebox { background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 20px;
  --wy-h: calc(100vh - 340px); }
.wy-stagebox .wy { max-width: min(100%, calc(var(--wy-h) * 0.5625)); }
.wy-stage-h { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-weight: 700; font-size: 15px; letter-spacing: -.01em; margin-bottom: 16px; }
.wy-stage-h i { color: var(--accent-soft); margin-right: 6px; }
.wy-stage-h .muted { font-weight: 400; font-size: 12px; }
.wy-tip { text-align: center; color: var(--muted); font-size: 11.5px; margin-top: 12px; }

/* o palco: área de trabalho claramente destacada do painel */
.wy { position: relative; width: 100%; max-width: 340px; margin: 0 auto; background: #000;
  border-radius: 14px; overflow: hidden; touch-action: none; user-select: none;
  border: 1px solid rgba(124, 58, 237, .45);
  box-shadow: 0 0 0 6px rgba(124, 58, 237, .07), 0 16px 44px rgba(0, 0, 0, .55); }
/* fundo do canvas + zonas reais do render (fidelidade com a saída) */
.wy-bg { position: absolute; inset: 0; background: linear-gradient(165deg, #1a2030, #0b0e14); }
.wy-zone { position: absolute; left: 0; right: 0; bottom: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, #241a45, #16102b); color: #cfc4f5;
  font-weight: 800; font-size: 10px; letter-spacing: .04em; }
.wy-layer { position: absolute; cursor: grab; }
.wy-layer:active { cursor: grabbing; }
/* a seleção usa a COR DO TIPO (a mesma da linha do tempo) e é grossa o
   bastante para se achar de longe: clicar na linha tem de destacar no preview */
.wy-layer.sel { outline: 2px solid var(--lt-c, var(--accent-soft)); outline-offset: 1px; z-index: 4;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .28); }
/* fora da janela do cabeçote: some do preview sem sumir do editor. Selecionada,
   continua visível o bastante para ser arrastada. */
.wy-layer.fora-do-tempo { opacity: .12; filter: grayscale(1); }
.wy-layer.fora-do-tempo.sel { opacity: .45; filter: none; outline-style: dashed; }
/* `overflow: hidden` aqui RECORTAVA as alças, que ficam a -6px para fora da
   caixa: por isso dava para redimensionar texto e não o vídeo. O corte da mídia
   não depende disso — quem o faz é o object-fit do <video>, que já a mantém
   dentro da caixa tanto em `cover` quanto em `contain`. */
.wy-vid { overflow: visible; background: #05070c; }
.wy-vid video, .wy-vid img { border-radius: inherit; }
.wy-vid video, .wy-vid img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; }
/* "mostrar tudo": o vídeo cabe inteiro no bloco e o fundo aparece nas barras —
   mesma geometria do force_original_aspect_ratio=decrease no render */
/* fundo transparente para as barras mostrarem o gradiente do palco, que é o
   mesmo bg.png que o render compõe atrás do bloco */
.wy-vid.fit-fit { background: transparent; }
.wy-vid.fit-fit video, .wy-vid.fit-fit img { object-fit: contain; }
.wy-novid { width: 100%; height: 100%; display: grid; place-items: center; color: #3a4657; font-size: 26px; }
.wy-img img { width: 100%; height: 100%; object-fit: fill; display: block; pointer-events: none; }
/* largura vem do inline style (= quebra de linha no render); a altura é o texto */
/* pre-LINE, não pre-wrap: com pre-wrap o espaço onde a linha quebra é
   preservado e entra na largura da linha, deslocando o text-align:center (a
   primeira linha saía fora do eixo das demais). pre-line colapsa o espaço e
   ainda honra os \n digitados, que o render converte em \N no ASS. */
.wy-txt { transform: translate(-50%, -50%); white-space: pre-line; text-align: center;
  font-weight: 800; line-height: 1.25; padding: 3px 7px; border-radius: 5px;
  overflow-wrap: anywhere; }
.wy-cap { color: #fff; }
.wy-title { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); letter-spacing: .02em; }
.wy-free { text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }

/* alças de transform livre: 8 nas caixas, 4 nos textos */
.wy-h { position: absolute; width: 11px; height: 11px; border-radius: 3px;
  background: #fff; border: 1.5px solid var(--lt-c, var(--accent)); box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity .12s; z-index: 6; }
.wy-layer:hover .wy-h, .wy-layer.sel .wy-h { opacity: 1; }
/* No dedo, 11px é alvo impossível: o ponto continua do mesmo tamanho (não pode
   cobrir o palco), mas a área que RECEBE o toque cresce para ~34px. */
@media (pointer: coarse) {
  .wy-h::after { content: ""; position: absolute; inset: -12px; }
  .wy-del, .wy-edit { width: 28px; height: 28px; font-size: 12px; }
}
/* Alças por DENTRO da caixa. Antes ficavam a -6px, atravessando a borda: numa
   camada que encosta no limite do palco (o vídeo encosta nos dois lados), o
   `overflow: hidden` do palco recortava justamente as alças da direita — elas
   simplesmente não existiam para o toque. */
.wy-nw { left: 0; top: 0; cursor: nwse-resize; }
.wy-n  { left: 50%; top: 0; margin-left: -5.5px; cursor: ns-resize; }
.wy-ne { right: 0; top: 0; cursor: nesw-resize; }
.wy-e  { right: 0; top: 50%; margin-top: -5.5px; cursor: ew-resize; }
.wy-se { right: 0; bottom: 0; cursor: nwse-resize; }
.wy-s  { left: 50%; bottom: 0; margin-left: -5.5px; cursor: ns-resize; }
.wy-sw { left: 0; bottom: 0; cursor: nesw-resize; }
.wy-w  { left: 0; top: 50%; margin-top: -5.5px; cursor: ew-resize; }
.wy-t { pointer-events: none; }
/* duplo clique: o texto vira editável no próprio palco */
.wy-layer.editing { cursor: text; outline: 1.5px solid var(--accent); }
.wy-layer.editing .wy-t { pointer-events: auto; outline: none; caret-color: #fff;
  background: rgba(0, 0, 0, .35); border-radius: 4px; }
.wy-layer.editing .wy-h, .wy-layer.editing .wy-del, .wy-layer.editing .wy-edit { opacity: 0; pointer-events: none; }
/* excluir e editar: acompanham a seleção porque nem a tecla Del nem o duplo
   clique são descobríveis — e no celular o duplo clique nem existe */
/* A 25% e 75% da borda de cima: os oito pontos de alça ficam nas quinas e nos
   MEIOS das bordas, então este é o lugar que não conflita com nenhum. Nas
   quinas, estes botões cobriam as alças `nw` e `ne` — e como só aparecem com a
   camada selecionada, era exatamente quando a alça deveria estar disponível. */
.wy-del, .wy-edit { position: absolute; top: 3px; width: 22px; height: 22px; padding: 0;
  transform: translateX(-50%); border-radius: 50%; color: #fff; border: 2px solid #fff;
  font-size: 10px; line-height: 1; display: grid; place-items: center; z-index: 7;
  opacity: 0; transition: opacity .12s; box-shadow: 0 1px 5px rgba(0, 0, 0, .6); }
.wy-del { left: 75%; background: var(--err); }
.wy-edit { left: 25%; background: var(--accent); }
.wy-layer.sel .wy-del, .wy-layer.sel .wy-edit { opacity: 1; }
.wy-del:hover, .wy-edit:hover { transform: scale(1.12); }

/* modelos rápidos */
.look-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.look { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px;
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 12px; font-size: 11.5px; font-weight: 600; transition: border-color .14s, transform .14s; }
.look:hover { border-color: var(--accent); transform: translateY(-2px); }
.look.sel { border-color: var(--accent); background: rgba(124, 58, 237, .14); }
.look-ico { font-size: 20px; }

@media (max-width: 1100px) {
  .wy-grid { grid-template-columns: 1fr; }
  .wy-col { position: static; }
}

/* distribuição de respostas no painel admin */
.acq-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 12.5px; }
.acq-lbl { width: 160px; flex-shrink: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acq-track { flex: 1; height: 9px; border-radius: 999px; background: var(--panel2); overflow: hidden; min-width: 40px; }
.acq-track span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.acq-n { width: 74px; text-align: right; flex-shrink: 0; font-weight: 700; }
.acq-n small { color: var(--muted); font-weight: 400; }
.acq-empty td { opacity: .45; }

/* =========================================================== onboarding (1º projeto) */
.ob-back { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0); backdrop-filter: blur(0); transition: background .2s, backdrop-filter .2s; padding: 20px; }
.ob-back.open { background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
.ob { width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 26px 26px 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6); transform: translateY(14px) scale(.98); opacity: 0;
  transition: transform .22s ease, opacity .22s ease; }
.ob-back.open .ob { transform: none; opacity: 1; }
.ob-bars { display: flex; gap: 8px; margin-bottom: 22px; }
.ob-bar { flex: 1; height: 4px; border-radius: 999px; background: var(--line); transition: background .25s; }
.ob-bar.on { background: var(--accent); }
.ob-q { font-size: 20px; line-height: 1.35; margin-bottom: 18px; }
.ob-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ob-grid-1 { grid-template-columns: 1fr; }
.ob-card { display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  border-radius: 14px; padding: 15px 16px; font-size: 14px; font-weight: 600;
  transition: border-color .14s, background .14s, transform .14s; }
.ob-card:hover { border-color: var(--accent); background: rgba(124, 58, 237, .1); transform: translateY(-2px); }
.ob-card.sel { border-color: var(--accent); background: rgba(124, 58, 237, .16); }
.ob-ico { font-size: 20px; line-height: 1; flex-shrink: 0; }
.ob-grid-1 .ob-card { padding: 12px 16px; }
.ob-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
@media (max-width: 600px) { .ob-grid { grid-template-columns: 1fr; } .ob-q { font-size: 17px; } }

/* sidebar colapsável */
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 16px; }
.side-top .brand { padding: 0; }
.side-toggle { background: none; border: 0; color: var(--muted); padding: 6px 8px; }
.side-toggle:hover { color: var(--text); }
#sidebar.collapsed { width: 64px; padding: 18px 8px; }
#sidebar.collapsed .side-label { display: none; }
#sidebar.collapsed .side-top { justify-content: center; padding: 4px 0 16px; }
#sidebar.collapsed nav a { justify-content: center; }

/* ---------- responsivo ----------
   Ordem importa: as regras vão do mais largo para o mais estreito, e a última
   que casar vence. Inverter isto faria o breakpoint largo desfazer o estreito. */
/* notebook: o inspector encolhe antes de empilhar */
@media (max-width: 1300px) {
  .ed-bottom { grid-template-columns: minmax(0, 1fr) 320px; }
}
/* Uma coluna: o inspector perde a rolagem própria (a página inteira rola) e o
   CTA deixa de ser sticky — grudado, ele cobriria o conteúdo empilhado. */
@media (max-width: 1024px) {
  /* minmax(0,1fr) e não 1fr: `1fr` usa o conteúdo como piso, e os cartões numa
     linha só empurravam a coluna para fora da tela no celular */
  .ed-top-grid { grid-template-columns: minmax(0, 1fr); }
  .ed-bottom { grid-template-columns: 1fr; }
  .ed-side { position: static; max-height: none; overflow: visible; }
  .ed-gen { position: static; }
  .seg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* sem duas colunas não há o que redistribuir, nem altura sobrando para dividir */
  .ed-expand, .ed-split { display: none; }
}
/* Tour em tela estreita: ancora no rodapé em vez de tentar caber ao lado do
   alvo. O JS pula o cálculo de posição nesta largura e deixa o CSS mandar —
   assim o balão nunca é cortado, e o destaque fica livre na metade de cima.
   **820 tem de casar com o ESTREITO() de tour.js**: se um mudar sem o outro, o
   balão fica sem posição de ninguém e vai parar no canto da tela. */
@media (max-width: 820px) {
  .tour-tip {
    left: 12px; right: 12px; bottom: 12px; top: auto; width: auto;
    max-width: none; max-height: 62dvh;
  }
}
@media (max-width: 900px) {
  .cost-grid { grid-template-columns: 1fr; }
  #sidebar { width: 64px; padding: 18px 8px; }
  #sidebar .brand span, #sidebar nav a span, #sidebar .side-bottom { display: none; }
  #sidebar nav a { justify-content: center; }
  .editor-layout { grid-template-columns: 1fr; }
  .preview-grid { grid-template-columns: 1fr; }
  .opt-wrap { grid-template-columns: 1fr; }
  .opt-grid { grid-template-columns: 1fr; }
  .stepper .step-t { display: none; }
  .stepper .step { min-width: 0; justify-content: center; }
  .seg-grid { grid-template-columns: 1fr; }
  .ed-video { max-height: 42vh; }

  /* PREVIEW GRUDADO NO TOPO.
     Em coluna única o preview e a linha do tempo nunca cabiam juntos: clicar
     numa camada movia o vídeo, mas para VER o resultado era preciso rolar para
     cima, e para mexer de novo rolar para baixo — o gesto perdia a serventia.
     Grudado, o preview fica à vista enquanto a linha do tempo rola por baixo,
     que é o arranjo de qualquer editor no celular. */
  #stage-mount, #wy-mount {
    position: sticky; top: 0; z-index: 8; background: var(--panel);
    padding: 6px 0 10px; box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .9);
  }
  .wy-stagebox #wy-mount { background: var(--bg); }
  /* teto de 38vh: grudado e alto, o preview não deixaria linha do tempo nenhuma */
  .ed-result, .wy-stagebox { --wy-h: 38vh; }
}
@media (max-width: 600px) {
  #app-shell { flex-direction: column; }
  #sidebar {
    width: 100%; height: auto; position: fixed; bottom: 0; top: auto; z-index: 50;
    flex-direction: row; border-top: 1px solid var(--line); border-right: 0; padding: 6px;
  }
  /* `.side-top` inteiro, e não só a marca: o botão de recolher sobrevivia como
     um item órfão à esquerda da barra inferior */
  #sidebar .brand, #sidebar .side-bottom, #sidebar .side-top { display: none; }
  #sidebar nav { flex-direction: row; width: 100%; }
  #sidebar nav a { flex: 1; min-width: 0; flex-direction: column; gap: 4px; font-size: 10px; padding: 8px 4px; }
  /* rótulo CURTO: o longo quebrava em duas linhas e desalinhava os ícones */
  #sidebar nav a .side-label { display: none; }
  #sidebar nav a .side-curto { display: block; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* a topbar não tinha NENHUMA regra de celular: e-mail inteiro + badge + dois
     botões passavam de 400px numa tela de 360 — era a rolagem lateral do app */
  #topbar { padding: 10px 14px; gap: 8px; }
  #user-menu > span { display: none; }
  #credits-badge .credits { padding: 7px 12px; font-size: 13px; }
  #view { padding: 20px 16px 90px; }
  #downloads-panel { right: 8px; bottom: 74px; width: calc(100% - 16px); }
  .gen-footer { bottom: 76px; flex-wrap: wrap; }
  .gen-footer button.big { flex: 1; }
  .ed-video { max-height: 38vh; }
  /* sete alvos numa linha só num celular: aperta o vão e o campo manual */
  .num-cards { gap: 5px; }
  .num-card { height: 46px; font-size: 14px; }
  .num-card-input { flex: 0 0 54px; width: 54px; height: 46px; font-size: 12px; }
  /* uma coluna deixava a miniatura 9:16 com ~610px de altura: o rodapé do card
     (Textos / Baixar) caía fora da tela em todo card */
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  /* a barra de navegação é fixa no rodapé: sem este respiro os botões "Pular" e
     "Próximo" ficavam atrás dela, inalcançáveis */
  .tour-tip { bottom: 78px; max-height: 58dvh; }
  .tour-tip p { font-size: 14.5px; }
  .tour-n { font-size: 12px; }
  .tour-acts button { padding: 11px 16px; font-size: 14px; }
}

/* =========================================================== demo da landing */
/* Vídeo longo -> cortes. Fotos estáticas + keyframes: um screencast em vídeo
   custaria MB no LCP da página que mais precisa ranquear. */
.demo { max-width: 1040px; margin: 0 auto; padding: 8px 20px 64px; }
.demo-stage { display: grid; gap: 26px; justify-items: center;
  background: linear-gradient(160deg, rgba(124, 58, 237, .10), transparent 60%), var(--panel);
  border: 1px solid var(--line); border-radius: 22px; padding: 30px 24px 34px; }

.demo-long { position: relative; margin: 0; line-height: 0; }
.demo-long img { width: min(460px, 82vw); height: auto; border-radius: 14px;
  border: 1px solid var(--line); display: block; }
.demo-dur { position: absolute; right: 10px; bottom: 10px; background: rgba(0, 0, 0, .72);
  color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 7px; line-height: 1.4; }

/* feixe que desce do vídeo para os cortes, com o rótulo da IA */
.demo-arrow { position: relative; display: grid; place-items: center; height: 54px; width: 100%; }
.demo-beam { position: absolute; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  animation: demo-beam 2.6s ease-in-out infinite; }
.demo-chip { position: relative; background: var(--panel2); border: 1px solid var(--accent);
  color: var(--accent-soft); font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 999px; }
.demo-chip i { margin-right: 6px; }

.demo-clips { list-style: none; display: flex; gap: 14px; justify-content: center;
  flex-wrap: wrap; padding: 0; margin: 0; }
.demo-clip { position: relative; width: 132px; border-radius: 13px; overflow: hidden;
  border: 1px solid var(--line); background: #000; line-height: 0;
  /* VISÍVEL por padrão. Antes começava em opacity:0 e dependia da animação para
     aparecer: bastava a seção ser pausada antes de o ciclo começar (ou o JS
     falhar) para os clipes ficarem congelados invisíveis. Agora o pior caso é
     "estático e legível". A cascata entra sob .in, que o observer aplica. */
  opacity: 1; }
.demo.in .demo-clip { animation: demo-cycle 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * .5s); }   /* --i (do HTML) escalona a cascata */
.demo.paused .demo-clip { animation-play-state: paused; }
.demo-clip img { width: 100%; height: 208px; object-fit: cover; display: block; }
.demo-clip::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .78)); }
.demo-cap { position: absolute; left: 8px; right: 8px; bottom: 30px; z-index: 1;
  font-size: 10.5px; font-weight: 800; line-height: 1.25; color: #fff;
  text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .9); }
.demo-score { position: absolute; left: 8px; bottom: 8px; z-index: 1; display: flex;
  align-items: baseline; gap: 4px; background: rgba(0, 0, 0, .6); border-radius: 8px; padding: 2px 7px; }
.demo-score b { color: var(--ok); font-size: 12.5px; line-height: 1.4; }
.demo-score small { color: #cbd2dd; font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; }
.demo-note { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 18px; }

/* cascata em loop: surge, fica a maior parte do ciclo visível, e some no fim
   para recomeçar — dá vida contínua sem piscar a cada segundo */
@keyframes demo-cycle {
  0%   { opacity: 0; transform: translateY(16px) scale(.92); }
  10%  { opacity: 1; transform: none; }
  85%  { opacity: 1; transform: none; }
  97%  { opacity: 0; transform: translateY(10px) scale(.96); }
  100% { opacity: 0; transform: translateY(16px) scale(.92); }
}
@keyframes demo-beam { 0%, 100% { opacity: .25; transform: scaleY(.4); }
                       50%      { opacity: 1;   transform: scaleY(1); } }

/* Quem pediu menos movimento no sistema (Windows: Efeitos de animação
   desligados) via a seção COMPLETAMENTE parada — parecia quebrada. O que
   incomoda em sensibilidade vestibular é o deslocamento, não a opacidade:
   mantém a cascata só em fade, mais lenta, e congela o que se move. */
/* piso alto de propósito: some o suficiente para dar ritmo, sem virar um
   pisca-pisca — quem pediu menos movimento não quer contraste batendo */
@keyframes demo-fade {
  0%, 8%   { opacity: .55; }
  18%, 88% { opacity: 1; }
  100%     { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .demo.in .demo-clip { animation: demo-fade 9s ease-in-out infinite; }
  .demo-beam { animation: none; opacity: .6; }
}
@media (max-width: 560px) {
  .demo-clip { width: 104px; }
  .demo-clip img { height: 164px; }
  .demo-stage { padding: 22px 14px 26px; }
}
/* scores e miniaturas são simulados: dizer isso custa uma linha e evita
   prometer resultado numérico que o produto não garante */
.demo-ilustra { display: block; font-size: 11.5px; opacity: .65; margin-top: 4px; }

/* =========================================================== demo do editor manual */
/* Captura real da interface: entra suave ao aparecer, flutua de leve e tem um
   brilho passando pela moldura — vida sem prometer interação falsa. */
.editor-demo { max-width: 1080px; margin: 0 auto; padding: 40px 20px 64px; }
.editor-demo-head { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.editor-demo-head .kicker { display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--accent-soft);
  background: rgba(124, 58, 237, .12); border: 1px solid var(--accent);
  padding: 5px 13px; border-radius: 999px; margin-bottom: 14px; }
.editor-demo-head h2 { font-size: 26px; margin-bottom: 8px; }
.editor-demo-head p { color: var(--muted); font-size: 15.5px; line-height: 1.6; }

.editor-demo-shot { margin: 0; position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  background: var(--panel);
  /* entra ao aparecer (classe .in via observer) */
  opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .7s ease, transform .7s ease; }
.editor-demo.in .editor-demo-shot { opacity: 1; transform: none;
  /* depois de entrar, flutua devagar e continuamente */
  animation: editor-float 6s ease-in-out 0.7s infinite; }
.editor-demo-shot img { display: block; width: 100%; height: auto; }
/* brilho diagonal que cruza a tela em loop — sensação de "vivo/processando" */
.editor-demo-shot::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .07), transparent);
  transform: skewX(-14deg); left: -60%; pointer-events: none; }
.editor-demo.in .editor-demo-shot::after { animation: editor-sweep 5.5s ease-in-out 1.2s infinite; }

@keyframes editor-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes editor-sweep { 0% { left: -60%; } 55%, 100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
  .editor-demo-shot { opacity: 1; transform: none; transition: none; }
  .editor-demo.in .editor-demo-shot { animation: none; }
  .editor-demo-shot::after { display: none; }
}
@media (max-width: 560px) {
  .editor-demo-head h2 { font-size: 21px; }
}

/* =========================================================== demos no intro do "Cortar vídeos" */
/* As duas demonstrações da landing, lado a lado, abaixo da caixa de link/upload.
   Somem junto com o #ed-intro assim que o usuário sobe um vídeo ou cola um link. */
.ed-demos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  align-items: start; max-width: 1080px; margin: 34px auto 0; }
/* dentro do grid as seções perdem a largura/margem de página que têm na landing */
.ed-demos .demo, .ed-demos .editor-demo { max-width: none; margin: 0; padding: 0; }
.ed-demos .editor-demo-head { text-align: left; margin: 0 0 16px; }
.ed-demos .editor-demo-head h2 { font-size: 20px; }
.ed-demos .editor-demo-head p { font-size: 14px; }
.ed-demos .demo-stage { padding: 22px 16px 24px; }
.ed-demos .demo-long img { width: min(380px, 70vw); }
/* empilha em telas estreitas — lado a lado só quando há espaço de verdade */
@media (max-width: 900px) {
  .ed-demos { grid-template-columns: 1fr; max-width: 640px; }
}