:root {
  --primary: #44A2FF;
  --primary-dark: #2d7fd1;
  --primary-light: #e8f3ff;
  --primary-soft: #f0f7ff;

  --bg: #ffffff;
  --bg-alt: #f7fafc;
  --card: #ffffff;
  --border: #e3ecf5;

  --text: #1a202c;
  --text-soft: #4a5568;
  --text-mute: #8b98a8;

  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;

  --shadow: 0 2px 12px rgba(68, 162, 255, 0.08);
  --shadow-hover: 0 6px 20px rgba(68, 162, 255, 0.18);
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.centro {
  display: flex;
  align-items: flex-start;       /* 👈 era center */
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;            /* 👈 respiro em cima/embaixo */
  background: linear-gradient(160deg, #f0f7ff 0%, #ffffff 60%);
}

.centro .card { margin: auto 0; }  /* 👈 centraliza quando couber, alinha topo quando não couber */

.centro {
  display: block;
  min-height: 100vh;
  padding: 40px 20px;
  background: linear-gradient(160deg, #f0f7ff 0%, #ffffff 60%);
}
.centro .card { margin: 0 auto; }

/* ---------- CARDS ---------- */
.card {
  background: var(--card);
  padding: 36px 32px;
  border-radius: var(--radius);
  width: 100%; max-width: 440px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.card h1 {
  color: var(--primary);
  font-size: 1.6rem;
  margin-bottom: 8px;
  text-align: center;
  font-weight: 700;
}

.sub {
  color: var(--text-mute);
  font-size: 0.9rem;
  margin-bottom: 24px;
  text-align: center;
}

/* ---------- INPUTS ---------- */
input, textarea, select {
  width: 100%;
  padding: 14px 16px;
  margin: 8px 0;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 1rem;
  transition: all .2s;
  font-family: inherit;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(68, 162, 255, 0.15);
}

input::placeholder { color: var(--text-mute); }

/* ---------- BOTÕES ---------- */
button, .btn {
  width: 100%;
  padding: 14px 20px;
  margin-top: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}

button:hover, .btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

button:active { transform: translateY(0); }

.btn-secundario {
  background: transparent;
  color: var(--text-soft);
  border: 1.5px solid var(--border);
}
.btn-secundario:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: none;
}

/* ---------- DESTAQUES ---------- */
.destaque {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  margin: 20px 0;
}
.destaque .rotulo-destaque {
  font-size: 0.85rem;
  opacity: .9;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.destaque .codigo-grande {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 8px;
  margin-top: 8px;
  font-family: 'Courier New', monospace;
}

/* ---------- MENSAGENS ---------- */
.erro, .sucesso, .aviso {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin: 10px 0;
}
.erro    { background: #fef2f2; color: var(--danger);  border-left: 4px solid var(--danger); }
.sucesso { background: #f0fdf4; color: var(--success); border-left: 4px solid var(--success); }
.aviso   { background: #fffbeb; color: var(--warning); border-left: 4px solid var(--warning); }

.carregando { color: var(--text-mute); font-size: 0.9rem; }

/* ---------- TOPO ---------- */
/* ============================================================
   TOPO — cor sólida azul
   ============================================================ */
.topo {
  background: #069BFF !important;
  border-bottom: none !important;
  padding: 16px 20px;
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 2px 12px rgba(68, 162, 255, 0.25);
}

.topo h1,
.topo .topo-conteudo h1 {
  color: #fff !important;
  font-size: 1.15rem;
  margin: 0;
  font-weight: 700;
}

.topo .btn-sair {
  color: #fff !important;
  border-color: rgba(255,255,255,0.6) !important;
}
.topo .btn-sair:hover {
  background: #fff !important;
  color: var(--primary) !important;
}

.topo .btn-tema {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}
.topo .btn-tema:hover {
  background: #fff !important;
  color: var(--primary) !important;
}

/* Links dentro do topo (ex: "❓ Ajuda") */
.topo a:not(.btn-sair) {
  color: #fff !important;
}
.topo a:not(.btn-sair):hover {
  text-decoration: underline;
}

/* Modo escuro: mantém o azul (fica bonito) */
body.dark .topo {
  background: var(--primary) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.btn-sair {
  color: var(--danger);
  text-decoration: none;
  font-weight: 600;
  padding: 8px 16px;
  border: 1.5px solid var(--danger);
  border-radius: 8px;
  font-size: 0.85rem;
  transition: all .2s;
}
.btn-sair:hover { background: var(--danger); color: #fff; }

/* ---------- CONTAINER ---------- */
.container {
  max-width: 900px;
  margin: 24px auto;
  padding: 0 16px;
  display: grid;
  gap: 20px;
}

/* ---------- CARDS WIDE ---------- */
.card-wide {
  background: var(--card);
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.card-wide h2 {
  color: var(--primary);
  font-size: 1.1rem;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
}

/* ---------- GRID INFO ---------- */
.grid-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--primary-soft);
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 0.9rem;
  transition: all .2s;
}
.item:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.rotulo { color: var(--text-mute); font-weight: 500; }
.valor  { color: var(--text); font-weight: 700; text-align: right; }

/* ---------- DESTAQUE CARD ---------- */
.destaque-card {
  background: linear-gradient(135deg, #44A2FF 0%, #2d7fd1 100%);
  color: #fff;
  border: none;
}
.destaque-card h2 { color: #fff; }
.destaque-card p  { opacity: .95; margin-bottom: 8px; }
.destaque-card .btn-primario {
  background: #fff;
  color: var(--primary-dark);
}
.destaque-card .btn-primario:hover {
  background: #f0f7ff;
  color: var(--primary-dark);
}

/* ---------- RESULTADO ---------- */
.resultado {
  background: rgba(255,255,255,0.15);
  padding: 16px;
  border-radius: 10px;
  margin-top: 16px;
}
.resultado h3 { margin-bottom: 12px; font-size: 1rem; }
.resultado .item { background: rgba(255,255,255,0.2); border-color: transparent; }
.resultado .rotulo, .resultado .valor { color: #fff; }

/* ---------- HISTÓRICO ---------- */
.historico { display: flex; flex-direction: column; gap: 8px; }
.hist-item {
  display: flex; justify-content: space-between;
  padding: 12px 14px;
  background: var(--primary-soft);
  border-radius: 10px;
  font-size: 0.85rem;
  border: 1px solid var(--border);
}
.hist-item .valor { color: var(--success); }

/* ---------- TABELA ---------- */
.tabela {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.tabela th {
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 14px;
  text-align: left;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tabela td {
  padding: 14px;
  text-align: left;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}
.tabela tr:hover td { background: var(--primary-soft); }

.status-pendente { color: var(--warning); font-weight: 700; }
.status-liberado { color: var(--success); font-weight: 700; }
.status-bloqueado{ color: var(--danger);  font-weight: 700; }

/* ---------- RODAPÉ ---------- */
.rodape {
  color: var(--text-mute);
  font-size: 0.85rem;
  margin-top: 20px;
  text-align: center;
}
.rodape a { color: var(--primary); text-decoration: none; font-weight: 600; }
.rodape a:hover { text-decoration: underline; }

/* ---------- COFRE ---------- */
.cofre-lista { display: flex; flex-direction: column; gap: 10px; }

.cofre-item {
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  transition: all .2s;
}
.cofre-item:hover { border-color: var(--primary); }

.cofre-item .info { flex: 1; min-width: 0; }
.cofre-item .nome {
  font-weight: 700; color: var(--text);
  font-size: 0.95rem;
  display: flex; align-items: center; gap: 6px;
}
.cofre-item .nome .tag {
  font-size: 0.7rem; font-weight: 600;
  padding: 2px 8px; border-radius: 6px;
  background: var(--primary); color: #fff;
}
.cofre-item .usuario { font-size: 0.85rem; color: var(--text-mute); margin-top: 2px; }
.cofre-item .senha {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem; color: var(--text-soft);
  margin-top: 4px; word-break: break-all;
}
.cofre-item .acoes {
  display: flex; gap: 6px; flex-shrink: 0;
}
.cofre-item .acoes button {
  width: auto; margin: 0; padding: 8px 10px; font-size: 0.75rem;
}

/* ---------- MODAL ---------- */
.modal-fundo {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
  backdrop-filter: blur(4px);
}
.modal-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  width: 100%; max-width: 440px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.modal-card h3 {
  color: var(--primary); margin-bottom: 16px;
  font-size: 1.15rem; font-weight: 700;
}

/* ---------- SEÇÕES COLAPSÁVEIS ---------- */
.secao {
  padding: 0;                /* o padding vai pro header/body */
  overflow: hidden;
}

.secao-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
  user-select: none;
  transition: background .2s;
  background: #fff;
}
.secao-header:hover { background: var(--primary-soft); }

.secao-header h2 {
  margin: 0;
  color: var(--primary);
  font-size: 1.1rem;
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
}

.secao-toggle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: all .3s;
  flex-shrink: 0;
  font-weight: 700;
}
.secao-header:hover .secao-toggle {
  background: var(--primary);
  color: #fff;
}

.secao.aberta .secao-toggle { transform: rotate(180deg); }

.secao-body {
  padding: 0 24px 24px;
  display: none;
}
.secao.aberta .secao-body { display: block; }

/* destaque-card colapsável */
.destaque-card .secao-header { background: transparent; }
.destaque-card .secao-header:hover { background: rgba(255,255,255,0.08); }
.destaque-card .secao-header h2 { color: #fff; }
.destaque-card .secao-toggle {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.destaque-card .secao-header:hover .secao-toggle {
  background: #fff;
  color: var(--primary-dark);
}

/* ============================================================
   MODO ESCURO
   ============================================================ */
body.dark {
  --bg: #0d1117;
  --bg-alt: #161b22;
  --card: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --text-soft: #c9d1d9;
  --text-mute: #8b949e;
  --primary-light: #1e2a38;
  --primary-soft: #0f1922;
  --shadow: 0 2px 12px rgba(0,0,0,0.4);
  --shadow-hover: 0 6px 20px rgba(68, 162, 255, 0.25);
}

body.dark .centro {
  background: linear-gradient(160deg, #0a0f16 0%, #0d1117 60%);
}

body.dark input,
body.dark textarea,
body.dark select {
  background: #0d1117;
  border-color: #30363d;
  color: var(--text);
}

body.dark input::placeholder,
body.dark textarea::placeholder { color: #6e7681; }

body.dark .topo { background: #161b22; border-bottom-color: #30363d; }
body.dark .card,
body.dark .card-wide { background: #161b22; border-color: #30363d; }

body.dark .item,
body.dark .hist-item,
body.dark .cofre-item,
body.dark .chave-box,
body.dark .info-codigo {
  background: #0d1117;
  border-color: #30363d;
}

body.dark .tabela { background: #161b22; }
body.dark .tabela th { background: #1e2a38; color: var(--primary); }
body.dark .tabela td { border-top-color: #30363d; }
body.dark .tabela tr:hover td { background: #1a2029; }

body.dark .modal-card { background: #161b22; border: 1px solid #30363d; }
body.dark .modal-fundo { background: rgba(0,0,0,0.7); }

/* botão toggle no topo */
.btn-tema {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  border: none; cursor: pointer;
  transition: all .2s;
  margin-right: 8px;
}
.btn-tema:hover {
  background: var(--primary);
  color: #fff;
  transform: scale(1.05);
}


.topo-conteudo {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;   /* 👈 empurra pros extremos */
  align-items: center;               /* 👈 centraliza verticalmente */
  gap: 12px;
}

/* Grupo da direita (tema + ajuda + sair) */
.topo-conteudo > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Título à esquerda */
.topo-conteudo h1 {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;                    /* evita empurrar botões pra fora */
}

/* ============================================================
   BOTÃO DE UPLOAD CUSTOMIZADO
   ============================================================ */
.btn-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  padding: 16px 24px;
  margin-top: 12px;

  background: linear-gradient(135deg, var(--primary-light) 0%, #ffffff 100%);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 1rem;

  border: 2px dashed var(--primary);
  border-radius: 12px;
  cursor: pointer;

  transition: all .25s ease;
  text-align: center;
  user-select: none;
}

.btn-upload:hover {
  background: var(--primary);
  color: #fff;
  border-style: solid;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(68, 162, 255, 0.25);
}

.btn-upload:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Estado "arquivo escolhido" */
.btn-upload.arquivo-ok {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
  border-color: var(--success);
  border-style: solid;
  color: var(--success);
}
.btn-upload.arquivo-ok:hover {
  background: var(--success);
  color: #fff;
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.25);
}

/* Modo escuro */
body.dark .btn-upload {
  background: linear-gradient(135deg, #1e2a38 0%, #161b22 100%);
  color: var(--primary);
  border-color: var(--primary);
}
body.dark .btn-upload:hover {
  background: var(--primary);
  color: #fff;
}
body.dark .btn-upload.arquivo-ok {
  background: linear-gradient(135deg, #132e1c 0%, #161b22 100%);
  color: #4ade80;
  border-color: #4ade80;
}
body.dark .btn-upload.arquivo-ok:hover {
  background: #16a34a;
  color: #fff;
}

/* ============================================================
   NÚMERO DA SEÇÃO — badge destacado
   ============================================================ */
.num-secao {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 34px;
  height: 26px;
  padding: 0 8px;
  margin-right: 6px;

  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.5px;

  border-radius: 6px;
  font-family: 'Courier New', monospace;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ============================================================
   SUBSECÕES (itens dentro de uma categoria)
   ============================================================ */
.subsecao {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
}

.subsecao:first-of-type {
  margin-top: 16px;
  padding-top: 0;
  border-top: none;
}

.subsecao h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 12px;
}

/* Badge do subnúmero */
.num-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 42px;
  height: 22px;
  padding: 0 8px;

  background: var(--primary-soft);
  color: var(--primary-dark);
  border: 1.5px solid var(--primary);
  border-radius: 6px;

  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  font-family: 'Courier New', monospace;

  flex-shrink: 0;
}

/* Modo escuro */
body.dark .num-sub {
  background: var(--primary-light);
  color: var(--primary);
}


/* ============================================================
   BUSCA DE FERRAMENTAS
   ============================================================ */
/* ============================================================
   BUSCA DE FERRAMENTAS
   ============================================================ */
.busca-wrapper {
  position: sticky;
  top: 68px;                     /* altura do topo no desktop */
  z-index: 9;
  background: var(--bg);
  padding: 12px 20px 8px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(68, 162, 255, 0.06);
}

body.dark .busca-wrapper {
  background: var(--bg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* AJUSTE MOBILE — não usar sticky pra não desalinhar */
@media (max-width: 768px) {
  .busca-wrapper {
    position: static;      /* 👈 deixa de ser sticky */
    top: auto;
    padding: 10px 16px 6px;
    box-shadow: none;
  }
}

.busca-inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
}

.busca-icone {
  position: absolute;
  left: 16px;
  font-size: 1rem;
  pointer-events: none;
  opacity: 0.5;
}

#buscaFerramentas {
  width: 100%;
  padding: 14px 44px 14px 46px;
  margin: 0;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 14px;
  font-size: 0.95rem;
  transition: all .2s;
}

body.dark #buscaFerramentas {
  background: #161b22;
  border-color: #30363d;
}

#buscaFerramentas:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(68, 162, 255, 0.15);
  outline: none;
}

#buscaFerramentas::-webkit-search-cancel-button { display: none; }

.busca-limpar {
  position: absolute;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary-dark);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0;
  margin: 0;
  transition: all .2s;
}

.busca-limpar:hover {
  background: var(--primary);
  color: #fff;
}

.busca-limpar.visivel { display: flex; }

.busca-info {
  max-width: 900px;
  margin: 8px auto 0;
  font-size: 0.8rem;
  color: var(--text-mute);
  min-height: 18px;
  text-align: center;
}

.busca-info:empty { display: none; }         /* 👈 esconde quando vazio */

.busca-info strong { color: var(--primary); }

.secao.busca-match {
  animation: buscaPulse .5s ease;
}

@keyframes buscaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(68, 162, 255, 0.5); }
  100% { box-shadow: 0 0 0 12px rgba(68, 162, 255, 0); }
}

/* Estado vazio — ESCONDIDO por padrão */
.busca-vazia {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-mute);
  display: none !important;                    /* 👈 força esconder */
}
.busca-vazia.visivel {
  display: block !important;                   /* 👈 só mostra quando tem classe */
}
.busca-vazia .emoji { font-size: 3rem; margin-bottom: 8px; }

/* Responsivo extra */
@media (max-width: 480px) {
  .busca-wrapper { padding: 10px 14px 6px; }
  #buscaFerramentas { font-size: 0.85rem; padding: 12px 40px 12px 42px; }
  .busca-limpar { width: 24px; height: 24px; font-size: 0.7rem; right: 10px; }
}



/* ============================================================
   SEÇÕES BÔNUS — destaque visual
   ============================================================ */
.secao.bonus {
  background: linear-gradient(135deg, #fff8e1 0%, #ffffff 60%);
  border: 2px solid #CCCCCC;
  position: relative;
  overflow: hidden;
}

body.dark .secao.bonus {
  background: linear-gradient(135deg, #2a2410 0%, #161b22 60%);
  border-color: #78350f;
}

.secao.bonus .secao-header h2 {
  color: #d97706;
}

body.dark .secao.bonus .secao-header h2 {
  color: #fbbf24;
}

/* Badge BÔNUS no canto */
.secao.bonus::before {
  content: '🎁 BÔNUS';
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #F6F6F6, #FFFFFF);
  color: #000000;
  padding: 4px 12px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 0 14px 0 10px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

.secao.bonus .num-secao {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
}


/* ============================================================
   BÔNUS EXCLUSIVOS NO MODAL
   ============================================================ */
.oferta-bonus {
  background: linear-gradient(135deg, #fff8e1 0%, #ffffff 100%);
  border: 2px solid #fbbf24;
  border-radius: 14px;
  padding: 18px;
  margin: 24px 0;
  position: relative;
  overflow: hidden;
}

body.dark .oferta-bonus {
  background: linear-gradient(135deg, #2a2410 0%, #161b22 100%);
  border-color: #78350f;
}

/* brilho decorativo sutil */
.oferta-bonus::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.oferta-bonus-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.oferta-bonus-titulo .icone-bonus {
  font-size: 2rem;
  animation: bounce 2s infinite;
  flex-shrink: 0;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.oferta-bonus-titulo h3 {
  color: #d97706 !important;
  font-size: 1.05rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  letter-spacing: 1px;
  font-weight: 900;
}

body.dark .oferta-bonus-titulo h3 {
  color: #fbbf24 !important;
}

.oferta-bonus-titulo p {
  font-size: 0.78rem;
  color: var(--text-mute);
  margin-top: 2px;
  line-height: 1.3;
}

/* Grid do bônus — fundo branco translúcido pra destacar */
.oferta-grid-bonus {
  position: relative;
  z-index: 1;
}

.oferta-grid-bonus span {
  background: rgba(255, 255, 255, 0.7);
  padding: 8px 10px !important;
  border-radius: 8px;
  border-left: 3px solid #fbbf24;
  font-weight: 600;
  color: #78350f !important;
}

body.dark .oferta-grid-bonus span {
  background: rgba(255, 255, 255, 0.05);
  color: #fbbf24 !important;
}


/* ============================================================
   SISTEMA PREMIUM
   ============================================================ */
.secao.premium {
  background: linear-gradient(135deg, #fef3c7 0%, #ffffff 60%);
  border: 2px solid #f59e0b;
  position: relative;
  overflow: hidden;
}

body.dark .secao.premium {
  background: linear-gradient(135deg, #2a2410 0%, #161b22 60%);
  border-color: #78350f;
}

.secao.premium::before {
  content: '⭐ PREMIUM';
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  padding: 4px 14px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 0 14px 0 12px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

.secao.premium .secao-header h2 {
  color: #d97706;
}

body.dark .secao.premium .secao-header h2 {
  color: #fbbf24;
}

.secao.premium .num-secao {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

/* Bloqueio */
.premium-bloqueado {
  text-align: center;
  padding: 32px 20px;
  background: rgba(255,255,255,0.5);
  border-radius: 14px;
  border: 2px dashed #f59e0b;
}

body.dark .premium-bloqueado {
  background: rgba(0,0,0,0.2);
}

.premium-bloqueado .emoji {
  font-size: 3.5rem;
  margin-bottom: 12px;
  display: inline-block;
  animation: pulseEmoji 2s ease-in-out infinite;
}

@keyframes pulseEmoji {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.premium-bloqueado h3 {
  color: #d97706;
  font-size: 1.2rem;
  margin-bottom: 8px;
  font-weight: 800;
}

body.dark .premium-bloqueado h3 {
  color: #fbbf24;
}

.premium-bloqueado p {
  color: var(--text-soft);
  font-size: 0.95rem;
  margin-bottom: 16px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.btn-premium {
  display: inline-block;
  padding: 14px 32px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-weight: 800;
  border-radius: 40px;
  text-decoration: none;
  font-size: 1rem;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
  transition: all .25s;
  border: none;
  cursor: pointer;
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.55);
}

.premium-bloqueado .alternativa {
  font-size: 0.85rem;
  color: var(--text-mute);
  margin-top: 12px;
}

.premium-bloqueado .alternativa a {
  color: #d97706;
  font-weight: 700;
  text-decoration: none;
}

.premium-bloqueado .alternativa a:hover {
  text-decoration: underline;
}

/* Selo "desbloqueado" */
.secao.premium.desbloqueado::before {
  content: '⭐ PREMIUM ATIVO';
  background: linear-gradient(135deg, #16a34a, #15803d);
}


.qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;      /* 👈 centraliza os filhos */
  justify-content: center;  /* 👈 adiciona isso */
  gap: 14px;
  margin: 20px auto;         /* 👈 auto nas laterais */
  width: 100%;
  text-align: center;
}

.qr-wrapper {
  display: inline-block;     /* mantém */
  margin: 0 auto;            /* 👈 centraliza sozinho */
}


/* ============================================================
   EDITOR DE FOTOS
   ============================================================ */
#efFiltros .filtro-btn {
  padding: 8px 6px;
  background: var(--primary-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-soft);
  transition: all .2s;
}

#efFiltros .filtro-btn:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-2px);
}

#efFiltros .filtro-btn.ativo {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

#efFiltros .filtro-btn .preview {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  margin-bottom: 4px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
}

/* Sliders */
#efEditor input[type="range"] {
  width: 100%;
  margin-top: 6px;
  accent-color: var(--primary);
  height: 6px;
}

/* Botões principais do editor */
#efEditor > button,
#efEditor button:not(.btn-secundario) {
  width: 100%;
}

/* Modo escuro */
body.dark #efFiltros .filtro-btn {
  background: #161b22;
}
body.dark #efFiltros .filtro-btn:hover {
  background: var(--primary-light);
}


/* ============================================================
   GRÁFICOS
   ============================================================ */
#grTipos .tipo-btn {
  padding: 10px 6px;
  background: var(--primary-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-soft);
  transition: all .2s;
}

#grTipos .tipo-btn:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-2px);
}

#grTipos .tipo-btn.ativo {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

#grTipos .tipo-btn .icone {
  font-size: 1.4rem;
  display: block;
  margin-bottom: 4px;
}

#grWrapper canvas {
  display: block;
  margin: 0 auto;
}

/* Modo escuro */
body.dark #grWrapper {
  background: #0d1117;
  border-color: #30363d;
}

/* ============================================================
   BOTÕES DE PENDENTES NO VISÃO GERAL
   ============================================================ */
#botoesPendentes {
  display: flex !important;
  flex-direction: row !important;    /* 👈 força linha */
  justify-content: center;           /* 👈 centraliza horizontal */
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px auto 8px;
  width: 100%;
}

#botoesPendentes .btn-pendente,
#botoesPendentes .btn-solicitacao {
  display: inline-flex;
  align-items: center;
  justify-content: center;           /* 👈 centraliza dentro do botão */
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all .25s ease;
  background: var(--primary-soft);
  color: var(--text-soft);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  font-family: inherit;
  width: auto;
  margin: 0;
  min-width: 150px;                  /* 👈 largura mínima consistente */
  text-align: center;
}

#botoesPendentes .btn-pendente:hover,
#botoesPendentes .btn-solicitacao:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

#botoesPendentes .icone {
  font-size: 1.1rem;
  line-height: 1;
}

#botoesPendentes .texto {
  white-space: nowrap;
}

#botoesPendentes .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  background: var(--border);
  color: var(--text-mute);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 800;
  font-family: 'Courier New', monospace;
  transition: all .25s;
  flex-shrink: 0;
}

/* ESTADO VAZIO (0 pendentes) */
#botoesPendentes .btn-vazio {
  background: var(--bg-alt);
  color: var(--text-mute);
  border-color: var(--border);
  opacity: 0.7;
}
#botoesPendentes .btn-vazio:hover {
  opacity: 1;
}

/* ESTADO ATIVO (>0 pendentes) */
#botoesPendentes .btn-ativo {
  color: #fff;
  border-color: #dc2626;
  animation: pulsePendente 1.8s ease-in-out infinite;
}

#botoesPendentes .btn-ativo .badge {
  background: #fff;
  color: #dc2626;
}

#botoesPendentes .btn-pendente.btn-ativo {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35);
}

#botoesPendentes .btn-solicitacao.btn-ativo {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-color: #d97706;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

#botoesPendentes .btn-solicitacao.btn-ativo .badge {
  color: #d97706;
}

@keyframes pulsePendente {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.03); filter: brightness(1.1); }
}

/* Modo escuro */
body.dark #botoesPendentes .btn-pendente,
body.dark #botoesPendentes .btn-solicitacao {
  background: #161b22;
  border-color: #30363d;
}
body.dark #botoesPendentes .btn-ativo {
  border-color: transparent;
}

/* Responsivo — empilha em telas pequenas */
@media (max-width: 480px) {
  #botoesPendentes .btn-pendente,
  #botoesPendentes .btn-solicitacao {
    flex: 1;
    min-width: calc(50% - 5px);
    padding: 10px 14px;
    font-size: 0.85rem;
  }
}


#botoesPendentes .btn-pagamento {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all .25s ease;
  background: var(--primary-soft);
  color: var(--text-soft);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  font-family: inherit;
  min-width: 150px;
  margin: 0;
}

#botoesPendentes .btn-pagamento:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

#botoesPendentes .btn-pagamento.btn-vazio {
  background: var(--bg-alt);
  color: var(--text-mute);
  border-color: var(--border);
  opacity: 0.7;
}
#botoesPendentes .btn-pagamento.btn-vazio:hover {
  opacity: 1;
}

/* Ativo = roxo pulsando */
#botoesPendentes .btn-pagamento.btn-ativo {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  border-color: #8b5cf6;
  color: #fff;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
  animation: pulsePagamento 1.8s ease-in-out infinite;
}

#botoesPendentes .btn-pagamento.btn-ativo .badge {
  background: #fff;
  color: #8b5cf6;
}

@keyframes pulsePagamento {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.03); filter: brightness(1.1); }
}

/* Modo escuro */
body.dark #botoesPendentes .btn-pagamento {
  background: #161b22;
  border-color: #30363d;
}
body.dark #botoesPendentes .btn-pagamento.btn-ativo {
  border-color: transparent;
}


#botoesPendentes {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px auto 8px;
  width: 100%;
}

@media (max-width: 600px) {
  #botoesPendentes .btn-pendente,
  #botoesPendentes .btn-solicitacao,
  #botoesPendentes .btn-pagamento {
    flex: 1;
    min-width: calc(33% - 8px);
    padding: 10px 8px;
    font-size: 0.78rem;
  }
  #botoesPendentes .texto {
    font-size: 0.72rem;
  }
}


/* ============================================================
   CARD ÚLTIMAS CIDADES
   ============================================================ */
.preview-mapa {
  background: linear-gradient(135deg, #e8f3ff 0%, #ffffff 60%) !important;
  border: 2px solid var(--primary) !important;
  padding: 16px !important;
  min-height: auto !important;
  display: block !important;
  text-align: left !important;
  align-items: stretch !important;
}

body.dark .preview-mapa {
  background: linear-gradient(135deg, #0f1922 0%, #161b22 60%) !important;
}

.cidade-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e3ecf5;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}

body.dark .cidade-item {
  background: #0d1117;
  border-color: #30363d;
}

.cidade-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--primary);
}

.cidade-item.novo {
  animation: cidadeEntrar 0.6s ease-out;
}

@keyframes cidadeEntrar {
  from {
    opacity: 0;
    transform: translateX(-20px);
    background: #dcfce7;
  }
  to {
    opacity: 1;
    transform: translateX(0);
    background: #fff;
  }
}

.cidade-emoji {
  font-size: 1.5rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.cidade-info {
  flex: 1;
  min-width: 0;
}

.cidade-nome {
  font-weight: 800;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cidade-detalhes {
  font-size: 0.75rem;
  color: var(--text-mute);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cidade-badge {
  background: var(--primary);
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  flex-shrink: 0;
}

body.dark .cidade-item.novo {
  animation: cidadeEntrarDark 0.6s ease-out;
}

@keyframes cidadeEntrarDark {
  from {
    opacity: 0;
    transform: translateX(-20px);
    background: #132e1c;
  }
  to {
    opacity: 1;
    transform: translateX(0);
    background: #0d1117;
  }
}


/* ============================================================
   EDITOR DE TEXTO RICO — PREMIUM
   ============================================================ */
#etToolbar .et-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #ffffff;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

#etToolbar .et-btn:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(68, 162, 255, 0.3);
}

#etToolbar .et-btn:active {
  transform: translateY(0);
}

#etToolbar .et-btn.ativo {
  background: var(--primary);
  color: #fff;
}

body.dark #etToolbar .et-btn {
  background: #0d1117;
  border-color: #30363d;
  color: #e6edf3;
}

#etToolbar .et-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin: 0;
  height: 34px;
  width: auto;
}

body.dark #etToolbar .et-select {
  background: #0d1117;
  border-color: #30363d;
  color: #e6edf3;
}

#etToolbar .et-sep {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 4px;
  display: inline-block;
}

#etToolbar .et-cor {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 800;
  font-size: 0.95rem;
  transition: all .15s;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

#etToolbar .et-cor:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

#etToolbar .et-cor span {
  pointer-events: none;
  color: var(--text);
}

#etToolbar .et-cor input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
}

body.dark #etToolbar .et-cor {
  background: #0d1117;
  border-color: #30363d;
}

/* Área de edição */
#etEditor {
  color: var(--text);
}

#etEditor:empty::before {
  content: attr(placeholder);
  color: var(--text-mute);
  font-style: italic;
}

#etEditor:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(68, 162, 255, 0.1);
}

#etEditor h1 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  margin: 16px 0 8px;
  line-height: 1.2;
}

#etEditor h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 14px 0 6px;
  line-height: 1.3;
}

#etEditor h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 12px 0 4px;
}

#etEditor p {
  margin: 8px 0;
  color: var(--text);
}

#etEditor blockquote {
  border-left: 4px solid var(--primary);
  padding-left: 16px;
  margin: 12px 0;
  color: var(--text-mute);
  font-style: italic;
  background: var(--primary-soft);
  padding: 10px 16px;
  border-radius: 0 8px 8px 0;
}

#etEditor ul,
#etEditor ol {
  padding-left: 28px;
  margin: 8px 0;
}

#etEditor li {
  margin: 4px 0;
  color: var(--text);
}

#etEditor a {
  color: var(--primary);
  text-decoration: underline;
}

#etEditor img {
  max-width: 100%;
  border-radius: 8px;
  margin: 8px 0;
  display: inline-block;
  vertical-align: middle;
}

/* Scroll customizado */
#etEditor::-webkit-scrollbar {
  width: 10px;
}

#etEditor::-webkit-scrollbar-track {
  background: transparent;
}

#etEditor::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 5px;
}

#etEditor::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Modo escuro — editor */
body.dark #etEditor {
  background: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}

body.dark #etEditor h1,
body.dark #etEditor h2,
body.dark #etEditor h3,
body.dark #etEditor p,
body.dark #etEditor li {
  color: #e6edf3;
}

/* Placeholder */
#etEditor[placeholder]:empty::before {
  content: attr(placeholder);
}

/* Modal de documentos */
#etModalDocumentos.visivel {
  display: flex !important;
}

.et-doc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--primary-soft);
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .2s;
  gap: 12px;
}

.et-doc-item:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: translateX(2px);
}

.et-doc-item .info {
  flex: 1;
  min-width: 0;
}

.et-doc-item .titulo {
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.et-doc-item .meta {
  font-size: 0.75rem;
  color: var(--text-mute);
  margin-top: 2px;
}

.et-doc-item .acoes {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.et-doc-item .acoes button {
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  background: #fff;
  color: var(--text-soft);
  transition: all .15s;
}

.et-doc-item .acoes button:hover {
  background: var(--danger);
  color: #fff;
}

body.dark .et-doc-item {
  background: #0d1117;
}
body.dark .et-doc-item .acoes button {
  background: #161b22;
  color: #e6edf3;
}

/* Responsivo */
@media (max-width: 600px) {
  #etToolbar {
    padding: 8px;
  }
  #etToolbar .et-btn {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
  }
  #etToolbar .et-cor {
    width: 30px;
    height: 30px;
  }
  #etEditor {
    padding: 16px;
    min-height: 300px;
    font-size: 0.95rem;
  }
  .et-doc-item {
    flex-direction: column;
    align-items: stretch;
  }
  .et-doc-item .acoes {
    justify-content: flex-end;
  }
}


/* ============================================================
   PALETA DE CORES DO EDITOR
   ============================================================ */
.et-paleta {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 9999;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  min-width: 200px;
}
body.dark .et-paleta { background: #161b22; border-color: #30363d; }

.et-paleta-cor {
  width: 24px; height: 24px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .15s;
}
.et-paleta-cor:hover {
  transform: scale(1.15);
  border-color: var(--primary);
}

.et-paleta-titulo {
  grid-column: 1 / -1;
  font-size: 0.7rem;
  color: var(--text-mute);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.et-paleta-limpar {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 6px;
  background: var(--primary-soft);
  border: none;
  border-radius: 6px;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.et-paleta-limpar:hover { background: var(--primary); color: #fff; }


/* ============================================================
   EDITOR DE TEXTO RICO
   ============================================================ */
#etToolbar .et-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #ffffff;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
#etToolbar .et-btn:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(68, 162, 255, 0.3);
}
#etToolbar .et-btn.ativo {
  background: var(--primary);
  color: #fff;
}
body.dark #etToolbar .et-btn {
  background: #0d1117;
  border-color: #30363d;
  color: #e6edf3;
}

#etToolbar .et-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin: 0;
  height: 34px;
  width: auto;
}
body.dark #etToolbar .et-select {
  background: #0d1117;
  border-color: #30363d;
  color: #e6edf3;
}

#etToolbar .et-sep {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 4px;
  display: inline-block;
}

/* Área de edição */
#etEditor { color: var(--text); }
#etEditor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-mute);
  font-style: italic;
}
#etEditor:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(68, 162, 255, 0.1);
}
#etEditor h1 { font-size: 1.8rem; font-weight: 800; margin: 16px 0 8px; }
#etEditor h2 { font-size: 1.4rem; font-weight: 700; margin: 14px 0 6px; }
#etEditor h3 { font-size: 1.15rem; font-weight: 700; margin: 12px 0 4px; }
#etEditor p { margin: 8px 0; }
#etEditor blockquote {
  border-left: 4px solid var(--primary);
  padding: 10px 16px; margin: 12px 0;
  color: var(--text-mute); font-style: italic;
  background: var(--primary-soft);
  border-radius: 0 8px 8px 0;
}
#etEditor ul, #etEditor ol { padding-left: 28px; margin: 8px 0; }
#etEditor li { margin: 4px 0; }
#etEditor a { color: var(--primary); text-decoration: underline; }

body.dark #etEditor {
  background: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}
body.dark #etEditor h1,
body.dark #etEditor h2,
body.dark #etEditor h3,
body.dark #etEditor p,
body.dark #etEditor li { color: #e6edf3; }

/* Paletas de cor */
.et-paleta {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 9999;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  min-width: 200px;
}
body.dark .et-paleta {
  background: #161b22;
  border-color: #30363d;
}

.et-paleta-cor {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .15s;
}
.et-paleta-cor:hover {
  transform: scale(1.15);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.et-paleta-titulo {
  grid-column: 1 / -1;
  font-size: 0.7rem;
  color: var(--text-mute);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.et-paleta-limpar {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 6px;
  background: var(--primary-soft);
  border: none;
  border-radius: 6px;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.et-paleta-limpar:hover {
  background: var(--primary);
  color: #fff;
}

/* Modal de documentos */
#etModalDocumentos.visivel { display: flex !important; }

.et-doc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--primary-soft);
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .2s;
  gap: 12px;
}
.et-doc-item:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: translateX(2px);
}
.et-doc-item .info { flex: 1; min-width: 0; }
.et-doc-item .titulo {
  font-weight: 700; color: var(--text);
  font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.et-doc-item .meta {
  font-size: 0.75rem; color: var(--text-mute); margin-top: 2px;
}
.et-doc-item .acoes {
  display: flex; gap: 6px; flex-shrink: 0;
}
.et-doc-item .acoes button {
  width: 30px; height: 30px;
  padding: 0; margin: 0;
  border-radius: 6px; border: none; cursor: pointer;
  font-size: 0.85rem;
  background: #fff; color: var(--text-soft);
  transition: all .15s;
}
.et-doc-item .acoes button:hover {
  background: var(--danger); color: #fff;
}
body.dark .et-doc-item { background: #0d1117; }
body.dark .et-doc-item .acoes button { background: #161b22; color: #e6edf3; }

/* Responsivo */
@media (max-width: 600px) {
  #etToolbar { padding: 8px; }
  #etToolbar .et-btn { width: 30px; height: 30px; font-size: 0.85rem; }
  #etEditor { padding: 16px; min-height: 300px; font-size: 0.95rem; }
  .et-doc-item { flex-direction: column; align-items: stretch; }
  .et-doc-item .acoes { justify-content: flex-end; }
}

#etEditor img {
  max-width: 100%;
  border-radius: 8px;
  margin: 8px 0;
  display: block;
}

/* Alinhamento da imagem dentro do editor */
#etEditor p[style*="text-align: center"],
#etEditor div[style*="text-align: center"] {
  text-align: center !important;
}

#etEditor p[style*="text-align: right"],
#etEditor div[style*="text-align: right"] {
  text-align: right !important;
}

#etEditor p[style*="text-align: justify"],
#etEditor div[style*="text-align: justify"] {
  text-align: justify !important;
}

/* Se o alinhamento vier por atributo (align="center") */
#etEditor p[align="center"],
#etEditor div[align="center"] {
  text-align: center !important;
}

#etEditor p[align="right"],
#etEditor div[align="right"] {
  text-align: right !important;
}

#etEditor img {
  cursor: pointer;
  transition: transform .2s;
}
#etEditor img:hover {
  transform: scale(1.02);
}


/* Imagem selecionada */
#etEditor img.et-img-selecionada {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  cursor: pointer;
}

#etEditor img {
  display: block;
  max-width: 100%;
  border-radius: 8px;
  margin: 8px 0;
  transition: outline .15s;
}


/* ============================================================
   CRIADOR DE STORIES
   ============================================================ */
#stCanvas {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#stPreviewArea {
  position: sticky;
  top: 80px;
}

#stControles input[type="range"] {
  accent-color: var(--primary);
  height: 6px;
}

/* Grid dos filtros */
#stFiltros .st-filtro {
  padding: 8px 4px;
  background: var(--primary-soft);
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-soft);
  transition: all .2s;
}

#stFiltros .st-filtro:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-2px);
}

#stFiltros .st-filtro.ativo {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

#stFiltros .st-filtro .emoji {
  font-size: 1.2rem;
  display: block;
  margin-bottom: 2px;
}

/* Emojis */
#stEmojis .st-emoji {
  padding: 6px;
  background: var(--primary-soft);
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  line-height: 1;
}

#stEmojis .st-emoji:hover {
  background: var(--primary-light);
  transform: scale(1.15);
  border-color: var(--primary);
}

/* Fundos prontos */
.st-fundo-item {
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}

.st-fundo-item:hover {
  transform: scale(1.03);
  border-color: var(--primary);
}

.st-fundo-item .nome {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  backdrop-filter: blur(4px);
}

/* Modal */
#stModalFundos.visivel { display: flex !important; }

/* Responsivo */
@media (max-width: 768px) {
  #stPreviewArea {
    position: static;
  }
  #stCanvas {
    max-width: 100%;
    height: auto;
  }
}


/* ============================================================
   EDITOR DE PDF
   ============================================================ */
.ep-aba {
  padding: 10px 16px;
  background: var(--primary-soft);
  border: 2px solid transparent;
  border-radius: 10px;
  color: var(--text-soft);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  width: auto;
  margin: 0;
}

.ep-aba:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.ep-aba.ativa {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

body.dark .ep-aba {
  background: #161b22;
}

/* Preview das páginas */
.ep-pagina {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: crosshair;
  transition: all .2s;
  position: relative;
  aspect-ratio: 1 / 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ep-pagina:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 20px rgba(68, 162, 255, 0.2);
}

.ep-pagina canvas {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.ep-pagina .num {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--primary);
  color: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
}

.ep-pagina .acoes {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .2s;
}

.ep-pagina:hover .acoes {
  opacity: 1;
}

.ep-pagina .acoes button {
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ep-pagina .acoes button:hover {
  background: var(--primary);
}

/* Grid de páginas em modo "gerenciar" */
#epPaginasGrid .ep-pagina {
  cursor: default;
}

#epPaginasGrid .ep-pagina .acoes {
  opacity: 1;
}

/* Lista de edições */
.ep-edicao {
  padding: 10px 14px;
  background: var(--primary-soft);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.ep-edicao .tipo {
  font-weight: 700;
  color: var(--primary);
}

.ep-edicao .desc {
  color: var(--text-soft);
  font-size: 0.8rem;
  flex: 1;
}

.ep-edicao button {
  width: auto;
  margin: 0;
  padding: 4px 10px;
  font-size: 0.7rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--danger);
  cursor: pointer;
}

.ep-edicao button:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

/* Grid de configurações */
.ep-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

@media (max-width: 600px) {
  .ep-grid-3 {
    grid-template-columns: 1fr;
  }
  .ep-aba {
    padding: 8px 12px;
    font-size: 0.78rem;
  }
}

/* Modo escuro */
body.dark .ep-pagina {
  background: #0d1117;
  border-color: #30363d;
}

body.dark .ep-edicao {
  background: #0d1117;
}


/* ============================================================
   PLANILHA ONLINE
   ============================================================ */
#plToolbar .pl-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #ffffff;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

#plToolbar .pl-btn:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(68, 162, 255, 0.3);
}

#plToolbar .pl-btn.ativo {
  background: var(--primary);
  color: #fff;
}

body.dark #plToolbar .pl-btn {
  background: #0d1117;
  border-color: #30363d;
  color: #e6edf3;
}

#plToolbar .pl-cor {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 800;
  font-size: 0.9rem;
  transition: all .15s;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

#plToolbar .pl-cor:hover {
  border-color: var(--primary);
}

#plToolbar .pl-cor span {
  pointer-events: none;
  color: var(--text);
}

#plToolbar .pl-cor input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
}

#plToolbar .pl-sep {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 4px;
  display: inline-block;
}

/* Grid da planilha */
#plGrid {
  border-collapse: collapse;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  user-select: none;
}

#plGrid table {
  border-collapse: collapse;
}

/* Cabeçalho de colunas e linhas */
#plGrid .pl-header {
  background: #f0f7ff;
  color: var(--text-soft);
  font-weight: 800;
  text-align: center;
  padding: 6px 4px;
  border: 1px solid #d1dde8;
  min-width: 80px;
  max-width: 80px;
  font-size: 0.75rem;
  position: sticky;
  top: 0;
  z-index: 5;
  cursor: pointer;
  user-select: none;
}

#plGrid .pl-header.ativo {
  background: var(--primary);
  color: #fff;
}

#plGrid .pl-header-linha {
  background: #f0f7ff;
  color: var(--text-soft);
  font-weight: 800;
  text-align: center;
  padding: 6px 8px;
  border: 1px solid #d1dde8;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  font-size: 0.75rem;
  position: sticky;
  left: 0;
  z-index: 4;
  cursor: pointer;
}

#plGrid .pl-header-linha.ativa {
  background: var(--primary);
  color: #fff;
}

#plGrid .pl-header-canto {
  background: #e5edf5;
  border: 1px solid #d1dde8;
  width: 40px;
  min-width: 40px;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 6;
}

/* Células */
#plGrid .pl-cell {
  padding: 6px 8px;
  border: 1px solid #e3ecf5;
  min-width: 80px;
  max-width: 80px;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: cell;
  background: #fff;
  outline: none;
  transition: box-shadow .1s;
}

#plGrid .pl-cell.selecionada {
  box-shadow: inset 0 0 0 2px var(--primary);
  background: #f0f7ff;
}

#plGrid .pl-cell.editando {
  box-shadow: inset 0 0 0 2px #f59e0b;
  cursor: text;
  white-space: pre-wrap;
}

#plGrid .pl-cell.selecionada-range {
  background: #e8f3ff;
}

#plGrid .pl-cell.header-selecionado {
  background: #dbeafe;
}

/* Modo escuro */
body.dark #plGrid .pl-cell {
  background: #0d1117;
  border-color: #30363d;
  color: #e6edf3;
}

body.dark #plGrid .pl-cell.selecionada {
  background: #1e3a5f;
}

body.dark #plGrid .pl-header,
body.dark #plGrid .pl-header-linha {
  background: #161b22;
  color: #8b98a8;
  border-color: #30363d;
}

body.dark #plGrid .pl-header.ativo,
body.dark #plGrid .pl-header-linha.ativo {
  background: var(--primary);
  color: #fff;
}

body.dark #plGrid .pl-header-canto {
  background: #161b22;
  border-color: #30363d;
}

/* Modal */
#plModalSalvas.visivel { display: flex !important; }

.pl-doc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--primary-soft);
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .2s;
  gap: 12px;
}

.pl-doc-item:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: translateX(2px);
}

.pl-doc-item .info { flex: 1; min-width: 0; }
.pl-doc-item .titulo {
  font-weight: 700; color: var(--text);
  font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-doc-item .meta {
  font-size: 0.75rem; color: var(--text-mute); margin-top: 2px;
}
.pl-doc-item .acoes {
  display: flex; gap: 6px; flex-shrink: 0;
}
.pl-doc-item .acoes button {
  width: 30px; height: 30px;
  padding: 0; margin: 0;
  border-radius: 6px; border: none; cursor: pointer;
  font-size: 0.85rem;
  background: #fff; color: var(--text-soft);
  transition: all .15s;
}
.pl-doc-item .acoes button:hover {
  background: var(--danger); color: #fff;
}
body.dark .pl-doc-item { background: #0d1117; }
body.dark .pl-doc-item .acoes button { background: #161b22; color: #e6edf3; }

/* Responsivo */
@media (max-width: 600px) {
  #plToolbar .pl-btn { width: 30px; height: 30px; font-size: 0.8rem; }
  #plToolbar .pl-cor { width: 30px; height: 30px; }
  #plGrid .pl-cell { min-width: 70px; max-width: 70px; font-size: 0.8rem; }
}

/* ============================================================
   EDITOR DE ÁUDIO — TIMELINE PROFISSIONAL
   ============================================================ */

.ea-bloco-waveform {
  padding: 20px;
  background: linear-gradient(180deg, #0d1117 0%, #161b22 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 16px;
}

/* TIMELINE */
.ea-timeline {
  width: 100%;
  position: relative;
  margin-bottom: 20px;
}

/* RÉGUA */
.ea-regua {
  position: relative;
  height: 24px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(68, 162, 255, 0.2);
  font-size: 0.65rem;
  color: #6b7280;
  font-family: 'Courier New', monospace;
}

.ea-regua-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid rgba(68, 162, 255, 0.2);
  padding-left: 3px;
  display: flex;
  align-items: center;
}

.ea-regua-tick.principal {
  border-left-color: rgba(68, 162, 255, 0.5);
  color: #8b98a8;
  font-weight: 700;
}

/* CANVAS WRAPPER */
.ea-canvas-wrapper {
  width: 100%;
  height: 140px;
  background: #0d1117;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(68, 162, 255, 0.15);
  cursor: crosshair;
}

#eaWaveform {
  display: block;
  width: 100%;
  height: 100%;
  background: #0d1117;
  touch-action: none;
  user-select: none;
}

/* PLAYHEAD (linha vermelha animada) */
.ea-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ef4444;
  left: 0;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
  transition: left 0.05s linear;
  display: none;
}

.ea-playhead.ativa {
  display: block;
}

.ea-playhead-triangle {
  position: absolute;
  top: -8px;
  left: -5px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #ef4444;
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.8));
}

/* SELEÇÃO */
.ea-selecao {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(68, 162, 255, 0.2);
  border-top: 2px solid #44A2FF;
  border-bottom: 2px solid #44A2FF;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 20px rgba(68, 162, 255, 0.15);
}

.ea-selecao-conteudo {
  position: absolute;
  inset: 0;
}

/* ALÇAS (drags) */
.ea-selecao-alca {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  background: #44A2FF;
  cursor: ew-resize;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  box-shadow: 0 0 12px rgba(68, 162, 255, 0.5);
}

.ea-selecao-alca::before {
  content: '';
  width: 2px;
  height: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 1px;
  box-shadow:
    4px 0 0 rgba(255, 255, 255, 0.8),
    -4px 0 0 rgba(255, 255, 255, 0.8);
}

.ea-selecao-alca:hover {
  background: #60b0ff;
}

.ea-selecao-alca.esquerda {
  left: -7px;
  border-radius: 6px 0 0 6px;
}

.ea-selecao-alca.direita {
  right: -7px;
  border-radius: 0 6px 6px 0;
}

/* TEMPO DA SELEÇÃO (flutuante acima) */
.ea-selecao-tempo {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #44A2FF;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(68, 162, 255, 0.4);
  pointer-events: none;
}

.ea-selecao-tempo::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #44A2FF;
}

/* PLAYER */
.ea-player {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ea-btn-play {
  width: 52px;
  height: 52px;
  padding: 0;
  margin: 0;
  background: linear-gradient(135deg, #44A2FF, #2d7fd1);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(68, 162, 255, 0.4);
  transition: all .2s;
  flex-shrink: 0;
}

.ea-btn-play:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(68, 162, 255, 0.6);
}

.ea-btn-play.tocando {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.ea-player-info {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: 1rem;
  color: #44A2FF;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 110px;
}

.ea-tempo-atual {
  color: #44A2FF;
  font-size: 1.15rem;
}

.ea-tempo-sep {
  color: #6b7280;
  opacity: 0.6;
}

.ea-tempo-total {
  color: #8b98a8;
}

/* BARRA DE PROGRESSO (grande) */
.ea-bar-progresso {
  flex: 1;
  height: 12px;
  min-width: 200px;
  background: rgba(68, 162, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(68, 162, 255, 0.2);
}

.ea-bar-preenchida {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #44A2FF, #8b5cf6);
  border-radius: 8px;
  transition: width 0.05s linear;
  box-shadow: 0 0 12px rgba(68, 162, 255, 0.5);
}

.ea-btn-limpar {
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}

.ea-btn-limpar:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: scale(1.05);
}

/* INFO SELEÇÃO */
.ea-selecao-info {
  font-size: 0.85rem;
  color: #8b98a8;
  margin-top: 14px;
  text-align: center;
  min-height: 22px;
  font-family: 'Courier New', monospace;
}

.ea-selecao-info.tem-selecao {
  color: #44A2FF;
  font-weight: 700;
}

/* Modo claro */
body:not(.dark) .ea-bloco-waveform {
  background: linear-gradient(180deg, #f7fafc 0%, #ffffff 100%);
}

body:not(.dark) .ea-canvas-wrapper {
  border-color: #e3ecf5;
}

/* Responsivo */
@media (max-width: 600px) {
  .ea-canvas-wrapper {
    height: 100px;
  }
  .ea-btn-play {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }
  .ea-player-info {
    font-size: 0.9rem;
    min-width: 90px;
  }
  .ea-tempo-atual {
    font-size: 1rem;
  }
  .ea-bar-progresso {
    height: 10px;
    min-width: 120px;
  }
  .ea-selecao-tempo {
    font-size: 0.65rem;
    padding: 3px 8px;
  }
}


/* ============================================================
   COMPACTAR BOTÕES DO EDITOR DE ÁUDIO
   ============================================================ */

/* ============================================================
   1) PLAYER + BARRA em UMA LINHA
   ============================================================ */
.ea-player {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

.ea-btn-play {
  width: 42px !important;
  height: 42px !important;
  flex-shrink: 0 !important;
  font-size: 1.1rem !important;
}

.ea-player-info {
  flex-shrink: 0 !important;
  font-size: 0.9rem !important;
  min-width: 95px !important;
}

.ea-bar-progresso {
  flex: 1 !important;
  min-width: 80px !important;
  height: 10px !important;
}

.ea-btn-limpar {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  font-size: 0.9rem !important;
}

/* ============================================================
   2) BOTÕES EM LINHA (2 colunas → linha única)
   ============================================================ */
.ea-botoes-2 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.ea-botoes-2 > button {
  flex: 1 1 calc(50% - 4px) !important;
  width: auto !important;
  min-width: 140px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  font-size: 0.85rem !important;
  white-space: nowrap !important;
}

/* ============================================================
   3) ABAS — 6 em linha única no desktop
   ============================================================ */
.ea-abas {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.ea-aba {
  flex: 1 1 auto !important;
  min-width: 90px !important;
  padding: 8px 10px !important;
  font-size: 0.78rem !important;
  white-space: nowrap !important;
}

/* ============================================================
   4) AÇÕES GERAIS (Desfazer + Restaurar) em linha
   ============================================================ */
.ea-botoes-2 + .ea-botoes-2 {
  display: flex !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

/* ============================================================
   5) BOTÕES DA VELOCIDADE (0.5x, 1x, 1.5x...) — 6 em linha
   ============================================================ */
.ea-botoes-3 {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 6px !important;
}

.ea-botoes-3 button {
  padding: 8px 4px !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* ============================================================
   6) EXPORTAR — nome + formato lado a lado
   ============================================================ */
.ea-bloco-exportar .ea-label {
  display: inline-block !important;
  width: calc(50% - 4px) !important;
  margin-right: 8px !important;
  margin-bottom: 10px !important;
  vertical-align: top !important;
}

.ea-bloco-exportar .ea-label:nth-of-type(2) {
  margin-right: 0 !important;
}

.ea-bloco-exportar .ea-input-branco {
  width: 100% !important;
}

.ea-btn-exportar {
  width: 100% !important;
  margin-top: 8px !important;
  padding: 12px !important;
}

/* ============================================================
   7) BLOCO DE INFO (nome + botão trocar) — compacto
   ============================================================ */
.ea-bloco-info {
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
}

.ea-bloco-info button {
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
}

/* ============================================================
   8) TIMELINE — reduzir margens
   ============================================================ */
.ea-bloco-waveform {
  padding: 14px !important;
  margin-bottom: 12px !important;
}

.ea-canvas-wrapper {
  height: 110px !important;
}

.ea-regua {
  height: 20px !important;
}

/* ============================================================
   9) SELEÇÃO INFO — reduzir espaço
   ============================================================ */
.ea-selecao-info {
  margin-top: 8px !important;
  font-size: 0.8rem !important;
  min-height: 16px !important;
}

/* ============================================================
   10) PAINÉIS — reduzir padding
   ============================================================ */
.ea-painel {
  padding: 14px !important;
  margin-top: 12px !important;
}

.ea-painel-titulo {
  margin-bottom: 10px !important;
  font-size: 0.9rem !important;
}

/* ============================================================
   11) MOBILE — manter 2 botões por linha
   ============================================================ */
@media (max-width: 600px) {
  .ea-botoes-2 > button {
    flex: 1 1 calc(50% - 4px) !important;
    font-size: 0.78rem !important;
    padding: 8px 6px !important;
    min-width: 0 !important;
  }

  .ea-botoes-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .ea-botoes-3 button {
    font-size: 0.75rem !important;
    padding: 6px 2px !important;
  }

  .ea-aba {
    flex: 1 1 calc(33.33% - 6px) !important;
    min-width: 0 !important;
    font-size: 0.72rem !important;
    padding: 6px 4px !important;
  }

  .ea-bloco-exportar .ea-label {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
  }

  .ea-player {
    gap: 8px !important;
  }

  .ea-btn-play {
    width: 38px !important;
    height: 38px !important;
  }

  .ea-player-info {
    font-size: 0.82rem !important;
    min-width: 85px !important;
  }

  .ea-btn-limpar {
    width: 32px !important;
    height: 32px !important;
  }

  .ea-canvas-wrapper {
    height: 90px !important;
  }
}


/* ============================================================
   GERADOR DE SITE HTML — PREMIUM
   ============================================================ */

/* ESCONDIDO */
.gs-escondido {
  display: none !important;
}

/* TEMPLATES */
.gs-templates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.gs-template-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all .25s;
  text-align: center;
}

.gs-template-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(68, 162, 255, 0.2);
}

.gs-template-preview {
  height: 140px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.gs-template-info {
  padding: 12px;
  background: var(--primary-soft);
}

.gs-template-info h4 {
  color: var(--primary);
  font-size: 0.95rem;
  margin-bottom: 4px;
  font-weight: 800;
}

.gs-template-info p {
  font-size: 0.75rem;
  color: var(--text-mute);
}

/* BARRA TOPO */
.gs-barra-topo {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  align-items: center;
}

.gs-barra-topo button {
  width: auto;
  margin: 0;
  padding: 8px 14px;
  font-size: 0.85rem;
}

.gs-barra-espaco {
  flex: 1;
}

.gs-btn-exportar {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  color: #fff !important;
}

/* GRID PRINCIPAL */
.gs-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  align-items: start;
}

/* CONTROLES */
.gs-controles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gs-painel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

.gs-painel-titulo {
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.gs-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-mute);
  margin-bottom: 10px;
}

.gs-label input,
.gs-label textarea {
  width: 100%;
  margin-top: 4px;
  font-size: 0.9rem;
}

.gs-label input[type="color"] {
  height: 38px;
  padding: 4px;
  cursor: pointer;
}

.gs-label textarea {
  font-family: inherit;
  resize: vertical;
}

/* DISPOSITIVOS */
.gs-dispositivos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.gs-dispositivo {
  padding: 8px 4px;
  background: var(--primary-soft);
  border: 2px solid transparent;
  border-radius: 8px;
  color: var(--text-soft);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  width: auto;
  margin: 0;
}

.gs-dispositivo:hover {
  border-color: var(--primary);
}

.gs-dispositivo.ativo {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* PREVIEW */
.gs-preview-container {
  background: #1a202c;
  border-radius: 14px;
  overflow: hidden;
  position: sticky;
  top: 80px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.gs-preview-header {
  background: #0d1117;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #2d3748;
}

.gs-preview-bolinhas {
  display: flex;
  gap: 6px;
}

.gs-preview-bolinhas span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.gs-preview-bolinhas span:nth-child(1) { background: #ff5f57; }
.gs-preview-bolinhas span:nth-child(2) { background: #febc2e; }
.gs-preview-bolinhas span:nth-child(3) { background: #28c840; }

.gs-preview-url {
  flex: 1;
  background: #161b22;
  color: #8b98a8;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-family: 'Courier New', monospace;
  text-align: center;
}

.gs-preview-body {
  padding: 16px;
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #0d1117;
  transition: all .3s;
}

#gsIframe {
  width: 100%;
  height: 600px;
  border: none;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  transition: all .3s;
}

/* Dispositivos */
.gs-preview-body.tablet #gsIframe {
  width: 768px;
  max-width: 100%;
}

.gs-preview-body.mobile #gsIframe {
  width: 375px;
  max-width: 100%;
}

/* MODAL */
.gs-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gs-modal.ativo {
  display: flex;
}

.gs-modal-conteudo {
  background: var(--card);
  border-radius: 16px;
  padding: 24px;
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.gs-modal-mini {
  max-width: 300px;
}

.gs-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.gs-modal-header h3 {
  color: var(--primary);
  font-size: 1.1rem;
  font-weight: 800;
}

.gs-modal-fechar {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-mute);
  width: auto;
  padding: 0 8px;
  margin: 0;
}

.gs-lista-salvos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gs-site-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--primary-soft);
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .2s;
  gap: 12px;
}

.gs-site-item:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: translateX(2px);
}

.gs-site-item .info { flex: 1; min-width: 0; }
.gs-site-item .titulo {
  font-weight: 700; color: var(--text);
  font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-site-item .meta {
  font-size: 0.75rem; color: var(--text-mute); margin-top: 2px;
}
.gs-site-item .acoes {
  display: flex; gap: 6px; flex-shrink: 0;
}
.gs-site-item .acoes button {
  width: 30px; height: 30px;
  padding: 0; margin: 0;
  border-radius: 6px; border: none; cursor: pointer;
  font-size: 0.85rem;
  background: #fff; color: var(--text-soft);
  transition: all .15s;
}
.gs-site-item .acoes button:hover {
  background: var(--danger); color: #fff;
}

/* SPINNER */
.gs-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--primary-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto;
  animation: gsSpin 1s linear infinite;
}

@keyframes gsSpin {
  to { transform: rotate(360deg); }
}

/* RESPONSIVO */
@media (max-width: 900px) {
  .gs-grid {
    grid-template-columns: 1fr;
  }
  .gs-preview-container {
    position: static;
  }
  #gsIframe {
    height: 400px;
  }
}

@media (max-width: 600px) {
  .gs-barra-topo button {
    flex: 1;
    min-width: 100px;
    font-size: 0.78rem;
    padding: 8px 10px;
  }
  .gs-barra-espaco {
    display: none;
  }
  .gs-templates {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   CONVERSOR DE VÍDEO — PREMIUM
   ============================================================ */

.cv-escondido { display: none !important; }

/* INICIANDO */
.cv-iniciando {
  text-align: center;
  padding: 60px 20px;
  background: var(--primary-soft);
  border-radius: 14px;
  border: 2px dashed var(--primary);
  margin-top: 20px;
}

.cv-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--primary-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto;
  animation: cvSpin 1s linear infinite;
}

@keyframes cvSpin { to { transform: rotate(360deg); } }

/* INFO DO ARQUIVO */
.cv-bloco-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
}

.cv-nome {
  font-weight: 700;
  color: var(--primary);
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cv-meta {
  font-size: 0.85rem;
  color: var(--text-mute);
  margin-top: 2px;
}

.cv-btn-trocar {
  width: auto;
  margin: 0;
  padding: 8px 14px;
  font-size: 0.85rem;
}

/* PREVIEW */
.cv-preview {
  padding: 16px;
  background: #0d1117;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

/* ABAS */
.cv-abas {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.cv-aba {
  padding: 10px 16px;
  background: var(--primary-soft);
  border: 2px solid transparent;
  border-radius: 10px;
  color: var(--text-soft);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  width: auto;
  margin: 0;
}

.cv-aba:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.cv-aba.ativa {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

body.dark .cv-aba { background: #161b22; }

/* PAINÉIS */
.cv-painel {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
}

.cv-painel-titulo {
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.cv-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.cv-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-mute);
}

.cv-label select,
.cv-label input {
  width: 100%;
  margin-top: 4px;
}

.cv-label input[type="range"] {
  accent-color: var(--primary);
  height: 6px;
}

.cv-valor {
  color: var(--primary);
}

.cv-corte-info {
  text-align: center;
  padding: 10px;
  background: var(--primary-soft);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-bottom: 12px;
  font-weight: 600;
}

/* BOTÕES */
.cv-btn-primario {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #44A2FF, #2d7fd1);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  margin-top: 8px;
}

.cv-btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(68, 162, 255, 0.4);
}

.cv-btn-primario:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.cv-btn-secundario {
  width: 100%;
  padding: 14px;
  background: transparent;
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  margin-top: 8px;
}

.cv-btn-secundario:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.cv-botoes-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* THUMBNAIL PREVIEW */
.cv-thumb-preview {
  text-align: center;
  padding: 16px;
  background: #0d1117;
  border-radius: 10px;
  margin-bottom: 12px;
}

#cvThumbCanvas {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

/* PROGRESSO */
.cv-progresso {
  padding: 16px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 16px;
}

.cv-progresso-titulo {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.9rem;
  margin-bottom: 10px;
  text-align: center;
}

.cv-barra-progresso {
  height: 14px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.cv-barra-preenchida {
  height: 100%;
  background: linear-gradient(90deg, #44A2FF, #16a34a);
  border-radius: 8px;
  transition: width 0.3s;
}

.cv-progresso-pct {
  text-align: center;
  margin-top: 8px;
  font-weight: 700;
  color: var(--primary);
  font-family: 'Courier New', monospace;
}

/* RESULTADO */
.cv-resultado {
  padding: 20px;
  background: linear-gradient(135deg, #16a34a, #15803d);
  border-radius: 12px;
  text-align: center;
  margin-top: 16px;
}

.cv-resultado-titulo {
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.cv-resultado-info {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.cv-resultado .cv-btn-primario {
  background: #fff;
  color: #15803d;
  margin-top: 0;
}

/* RESPONSIVO */
@media (max-width: 600px) {
  .cv-linha,
  .cv-botoes-2 {
    grid-template-columns: 1fr;
  }
  .cv-aba {
    padding: 8px 12px;
    font-size: 0.78rem;
  }
}


/* ============================================================
   TIMELINE DE CORTE DE VÍDEO
   ============================================================ */

.cv-timeline {
  position: relative;
  margin-bottom: 16px;
  user-select: none;
  touch-action: none;
}

/* RÉGUA DE TEMPO */
.cv-timeline-regua {
  position: relative;
  height: 22px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  font-size: 0.7rem;
  color: var(--text-mute);
  font-family: 'Courier New', monospace;
}

.cv-timeline-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--border);
  padding-left: 3px;
  display: flex;
  align-items: center;
  font-weight: 700;
}

/* TRILHA */
.cv-timeline-trilha {
  position: relative;
  height: 70px;
  background: #0d1117;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(68, 162, 255, 0.2);
}

/* THUMBNAILS DO VÍDEO */
.cv-timeline-thumbs {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  opacity: 0.55;
}

.cv-timeline-thumb {
  flex: 0 0 auto;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

/* SELEÇÃO DE CORTE */
.cv-corte-selecao {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(68, 162, 255, 0.25);
  border-top: 2px solid #44A2FF;
  border-bottom: 2px solid #44A2FF;
  z-index: 4;
  box-shadow: inset 0 0 24px rgba(68, 162, 255, 0.2);
  pointer-events: none;
}

.cv-corte-conteudo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* ALÇAS */
.cv-corte-alca {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 20px;
  background: #44A2FF;
  cursor: ew-resize;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(68, 162, 255, 0.5);
  transition: background 0.15s;
  z-index: 5;
}

.cv-corte-alca::before {
  content: '';
  width: 2px;
  height: 24px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 1px;
  box-shadow:
    5px 0 0 rgba(255, 255, 255, 0.95),
    -5px 0 0 rgba(255, 255, 255, 0.95);
}

.cv-corte-alca:hover {
  background: #60b0ff;
}

.cv-corte-alca.esquerda {
  left: -10px;
  border-radius: 8px 0 0 8px;
}

.cv-corte-alca.direita {
  right: -10px;
  border-radius: 0 8px 8px 0;
}

/* TRIÂNGULOS (indicadores) */
.cv-corte-alca-tri {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.cv-corte-alca.esquerda .cv-corte-alca-tri {
  bottom: -8px;
  border-top: 8px solid #44A2FF;
}

.cv-corte-alca.direita .cv-corte-alca-tri {
  bottom: -8px;
  border-top: 8px solid #44A2FF;
}

/* PLAYHEAD */
.cv-corte-playhead {
  position: absolute;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: #ef4444;
  left: 0;
  z-index: 3;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
  pointer-events: none;
  display: none;
  transition: left 0.05s linear;
}

.cv-corte-playhead.ativa {
  display: block;
}

/* INFO */
.cv-corte-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.cv-corte-info-item {
  background: var(--primary-soft);
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid var(--border);
}

.cv-corte-info-rotulo {
  display: block;
  font-size: 0.7rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  font-weight: 700;
}

.cv-corte-info-item strong {
  color: var(--primary);
  font-size: 1.05rem;
  font-family: 'Courier New', monospace;
}

/* ATALHOS */
.cv-corte-atalhos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.cv-corte-atalho {
  padding: 10px;
  background: transparent;
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  width: auto;
  margin: 0;
}

.cv-corte-atalho:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

/* RESPONSIVO */
@media (max-width: 600px) {
  .cv-timeline-trilha {
    height: 60px;
  }

  .cv-corte-info {
    grid-template-columns: 1fr;
  }

  .cv-corte-atalhos {
    grid-template-columns: 1fr;
  }

  .cv-corte-alca {
    width: 16px;
  }
}


/* ============================================================
   GERADOR DE PALETA POR TEXTO
   ============================================================ */

.gp-escondido { display: none !important; }

/* GERADOR */
.gp-gerador {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.gp-gerador input {
  flex: 1;
  min-width: 200px;
  padding: 16px 20px;
  font-size: 1.05rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  margin: 0;
}

.gp-gerador input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 4px rgba(68, 162, 255, 0.15);
}

.gp-btn-gerar {
  width: auto;
  margin: 0;
  padding: 16px 28px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  white-space: nowrap;
}

.gp-btn-gerar:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

/* SUGESTÕES */
.gp-sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
}

.gp-sugestoes-label {
  font-size: 0.85rem;
  color: var(--text-mute);
  font-weight: 600;
}

.gp-chip {
  width: auto;
  margin: 0;
  padding: 6px 14px;
  background: var(--primary-soft);
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}

.gp-chip:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

/* RESULTADO */
.gp-resultado {
  animation: gpAparecer .5s ease;
}

@keyframes gpAparecer {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* INFO */
.gp-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.gp-info-item {
  background: var(--primary-soft);
  padding: 12px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid var(--border);
}

.gp-info-rotulo {
  display: block;
  font-size: 0.7rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  font-weight: 700;
}

.gp-info-item strong {
  color: var(--primary);
  font-size: 0.95rem;
}

/* PALETA */
.gp-paleta {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.gp-cor {
  aspect-ratio: 1 / 1.4;
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: all .25s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 8px;
  text-align: center;
}

.gp-cor:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  border-color: #fff;
}

.gp-cor-hex {
  font-family: 'Courier New', monospace;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  color: #1a202c;
  align-self: center;
  letter-spacing: 0.5px;
}

.gp-cor-nome {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  align-self: center;
}

.gp-cor-rotulo {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  align-self: center;
}

.gp-cor-copiado {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

.gp-cor.copiado .gp-cor-copiado {
  opacity: 1;
}

/* AÇÕES */
.gp-acoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.gp-btn-secundario {
  width: 100%;
  padding: 12px;
  background: transparent;
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  margin: 0;
}

.gp-btn-secundario:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

/* PREVIEW */
.gp-preview-titulo {
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.gp-preview {
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--bg);
}

.gp-preview-nav {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
}

.gp-preview-hero {
  padding: 32px 24px;
  text-align: center;
}

.gp-preview-hero h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
  font-weight: 800;
}

.gp-preview-hero p {
  font-size: 0.9rem;
  opacity: 0.85;
  margin-bottom: 16px;
}

.gp-preview-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  cursor: default;
}

.gp-preview-footer {
  padding: 14px 20px;
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.9;
}

/* RESPONSIVO */
@media (max-width: 600px) {
  .gp-gerador {
    flex-direction: column;
  }
  .gp-btn-gerar {
    width: 100%;
  }
  .gp-paleta {
    grid-template-columns: repeat(2, 1fr);
  }
  .gp-paleta .gp-cor:nth-child(5) {
    grid-column: 1 / -1;
    aspect-ratio: 2 / 1;
  }
  .gp-info {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   (70) 🎨 GERADOR DE PALETA — Toast de feedback
   ============================================================ */
.gp-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a202c;
  color: #fff;
  padding: 12px 22px;
  border-radius: 40px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 9999;
}

.gp-toast--visivel {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ============================================================
   (71) 🎬 EDITOR DE VÍDEO — PRO
   ============================================================ */

/* Inicialização */
.ev-iniciando {
  text-align: center;
  padding: 40px 20px;
  background: var(--primary-soft);
  border-radius: 14px;
  border: 1px solid var(--border);
}
.ev-spinner {
  width: 48px; height: 48px;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: evSpin .8s linear infinite;
}
@keyframes evSpin { to { transform: rotate(360deg); } }
#evIniciandoStatus { font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.ev-dica { font-size: .8rem; color: var(--text-mute); }

/* Upload */
.ev-upload {
  display: block;
  padding: 60px 30px;
  border: 3px dashed var(--border);
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  transition: all .25s;
  background: var(--primary-soft);
}
.ev-upload:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-2px);
}
.ev-upload-icone { font-size: 3.5rem; margin-bottom: 12px; }
.ev-upload-titulo { font-size: 1.3rem; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.ev-upload-sub { color: var(--text-soft); font-size: .95rem; margin-bottom: 14px; }
.ev-upload-limite { color: var(--text-mute); font-size: .8rem; }

/* Lista de arquivos */
.ev-arquivos {
  background: var(--primary-soft);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.ev-arquivos-titulo {
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ev-lista-arquivos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ev-arquivo-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: var(--bg); border-radius: 8px;
  border: 1px solid var(--border); font-size: .88rem;
}
.ev-arquivo-item.ativo { border-color: var(--primary); background: var(--primary-light); font-weight: 700; }
.ev-arquivo-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.ev-arquivo-meta { color: var(--text-mute); font-size: .78rem; }
.ev-btn-add {
  width: 100%; padding: 10px; background: var(--bg); color: var(--primary);
  border: 2px dashed var(--primary); border-radius: 8px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: all .2s;
}
.ev-btn-add:hover { background: var(--primary); color: #fff; }

/* Preview */
.ev-preview-wrap { margin-bottom: 16px; }
.ev-video {
  width: 100%; max-height: 480px; border-radius: 12px;
  background: #000; display: block;
}

/* Timeline */
.ev-timeline {
  background: var(--primary-soft);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.ev-timeline-header {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 800; color: var(--primary); margin-bottom: 12px;
}
.ev-timeline-info { color: var(--text-soft); font-weight: 600; font-size: .85rem; }
.ev-timeline-trilha {
  position: relative; height: 80px; background: #222; border-radius: 8px;
  overflow: hidden; user-select: none; margin-bottom: 8px;
}
.ev-timeline-thumbs {
  position: absolute; inset: 0; display: flex; opacity: .55; pointer-events: none;
}
.ev-timeline-thumb {
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.ev-corte-selecao {
  position: absolute; top: 0; bottom: 0;
  background: rgba(139, 92, 246, 0.35);
  border-left: 3px solid #8b5cf6;
  border-right: 3px solid #8b5cf6;
  pointer-events: none;
}
.ev-corte-alca {
  position: absolute; top: 0; bottom: 0; width: 16px;
  background: #8b5cf6; cursor: ew-resize; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: .8rem;
  transition: background .2s;
}
.ev-corte-alca::before { content: '⋮⋮'; letter-spacing: -3px; }
.ev-corte-alca:hover { background: #6d28d9; }
.ev-corte-alca-esq { left: 0; border-radius: 8px 0 0 8px; }
.ev-corte-alca-dir { right: 0; border-radius: 0 8px 8px 0; }
.ev-timeline-regua {
  position: relative; height: 20px; margin-bottom: 10px;
  border-top: 1px solid var(--border);
}
.ev-timeline-tick {
  position: absolute; top: 4px; transform: translateX(-50%);
  font-size: .7rem; color: var(--text-mute); font-weight: 600;
}
.ev-corte-labels {
  display: flex; justify-content: space-between; font-size: .82rem;
  color: var(--text-soft); margin-bottom: 10px;
}
.ev-corte-labels strong { color: var(--primary); }
.ev-timeline-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* Abas */
.ev-abas {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
.ev-aba {
  padding: 10px 16px; background: var(--bg); color: var(--text-soft);
  border: 2px solid var(--border); border-radius: 10px;
  font-weight: 700; font-size: .85rem; cursor: pointer;
  font-family: inherit; transition: all .2s; width: auto; margin: 0;
}
.ev-aba:hover { border-color: var(--primary); color: var(--primary); }
.ev-aba.ativa { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Painéis */
.ev-painel {
  background: var(--primary-soft);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 16px;
  animation: evFadeIn .3s ease;
}
@keyframes evFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ev-label {
  display: block; margin-bottom: 12px;
  font-weight: 700; font-size: .88rem; color: var(--text);
}
.ev-label input, .ev-label select { margin-top: 6px; }
.ev-input, .ev-select, .ev-input-file, .ev-input-color {
  width: 100%; padding: 10px 12px;
  border: 2px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text);
  font-family: inherit; font-size: .9rem; margin: 0;
}
.ev-input:focus, .ev-select:focus { border-color: var(--primary); outline: none; }
.ev-input-color { padding: 4px; height: 44px; cursor: pointer; }
.ev-input-file { padding: 8px; cursor: pointer; }
.ev-range { width: 100%; margin-top: 6px; }
.ev-hr { border: none; border-top: 1px dashed var(--border); margin: 16px 0; }
.ev-subtitulo { color: var(--primary); font-size: 1rem; margin: 0 0 12px; }
.ev-ajuda { color: var(--text-soft); font-size: .85rem; margin-bottom: 12px; }
.ev-corte-info {
  padding: 12px; background: var(--bg); border-radius: 8px;
  text-align: center; margin-bottom: 12px; font-weight: 700;
  color: var(--text-soft);
}
.ev-corte-info strong { color: var(--primary); }
.ev-check { margin: 12px 0; }
.ev-check label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }

.ev-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ev-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }

/* Botões */
.ev-btn-primario {
  width: 100%; padding: 14px; margin-top: 12px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff; border: none; border-radius: 10px;
  font-weight: 800; font-size: .95rem; cursor: pointer;
  font-family: inherit; transition: all .2s;
}
.ev-btn-primario:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(139, 92, 246, .4); }
.ev-btn-secundario {
  padding: 12px 18px; background: transparent; color: var(--text-soft);
  border: 2px solid var(--border); border-radius: 10px;
  font-weight: 700; font-size: .85rem; cursor: pointer;
  font-family: inherit; transition: all .2s; width: auto; margin: 0 0 8px;
}
.ev-btn-secundario:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.ev-btn-mini {
  padding: 8px 12px; background: var(--bg); color: var(--text-soft);
  border: 1px solid var(--border); border-radius: 6px;
  font-weight: 700; font-size: .78rem; cursor: pointer;
  font-family: inherit; transition: all .2s; width: auto; margin: 0;
}
.ev-btn-mini:hover { border-color: var(--primary); color: var(--primary); }

/* Progresso */
.ev-progresso {
  padding: 20px; background: var(--primary-soft);
  border-radius: 12px; margin: 16px 0;
  border: 1px solid var(--border);
}
.ev-progresso-titulo { font-weight: 800; color: var(--primary); margin-bottom: 12px; text-align: center; }
.ev-barra {
  height: 12px; background: var(--border); border-radius: 6px;
  overflow: hidden; margin-bottom: 8px;
}
.ev-barra-preenchida {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #8b5cf6, #6d28d9);
  border-radius: 6px; transition: width .3s;
}
.ev-progresso-pct { text-align: center; font-weight: 700; color: var(--primary); }

/* Resultado */
.ev-resultado {
  text-align: center; padding: 30px 20px;
  background: var(--primary-soft); border-radius: 14px;
  border: 2px solid var(--primary); margin-top: 16px;
  animation: evFadeIn .4s ease;
}
.ev-resultado-icone { font-size: 3rem; margin-bottom: 8px; }
.ev-resultado-titulo { font-size: 1.3rem; font-weight: 800; color: var(--primary); margin-bottom: 8px; }
.ev-resultado-info { color: var(--text-soft); margin-bottom: 16px; font-size: .9rem; }
.ev-resultado button { max-width: 280px; margin: 6px auto; display: block; }

/* Responsivo */
@media (max-width: 600px) {
  .ev-upload { padding: 40px 16px; }
  .ev-upload-icone { font-size: 2.5rem; }
  .ev-upload-titulo { font-size: 1.05rem; }
  .ev-grid-2, .ev-grid-3 { grid-template-columns: 1fr; }
  .ev-timeline-trilha { height: 60px; }
  .ev-corte-alca { width: 20px; }
  .ev-aba { padding: 8px 10px; font-size: .78rem; }
  .ev-video { max-height: 260px; }
  .ev-corte-labels { font-size: .72rem; }
  .ev-arquivo-nome { max-width: 45%; }
}


/* ============================================================
   SISTEMA PRO
   ============================================================ */
.secao.pro {
  background: linear-gradient(135deg, #fee2e2 0%, #ffffff 60%);
  border: 2px solid #dc2626;
  position: relative;
  overflow: hidden;
}

body.dark .secao.pro {
  background: linear-gradient(135deg, #2a1210 0%, #161b22 60%);
  border-color: #7f1d1d;
}

.secao.pro::before {
  content: '🔥 PRO';
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  padding: 4px 14px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 0 14px 0 12px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.secao.pro .secao-header h2 {
  color: #dc2626;
}

body.dark .secao.pro .secao-header h2 {
  color: #fca5a5;
}

.secao.pro .num-secao {
  background: linear-gradient(135deg, #dc2626 0%, #f97316 100%) !important;
}

/* Bloqueio */
.pro-bloqueado {
  text-align: center;
  padding: 32px 20px;
  background: rgba(255,255,255,0.5);
  border-radius: 14px;
  border: 2px dashed #dc2626;
}

body.dark .pro-bloqueado {
  background: rgba(0,0,0,0.2);
}

.pro-bloqueado .emoji {
  font-size: 3.5rem;
  margin-bottom: 12px;
  display: inline-block;
  animation: pulseEmoji 2s ease-in-out infinite;
}

.pro-bloqueado h3 {
  color: #dc2626;
  font-size: 1.2rem;
  margin-bottom: 8px;
  font-weight: 800;
}

body.dark .pro-bloqueado h3 {
  color: #fca5a5;
}

.pro-bloqueado p {
  color: var(--text-soft);
  font-size: 0.95rem;
  margin-bottom: 16px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.btn-pro {
  display: inline-block;
  padding: 14px 32px;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  font-weight: 800;
  border-radius: 40px;
  text-decoration: none;
  font-size: 1rem;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4);
  transition: all .25s;
  border: none;
  cursor: pointer;
}

.btn-pro:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.55);
}

.pro-bloqueado .alternativa {
  font-size: 0.85rem;
  color: var(--text-mute);
  margin-top: 12px;
}

.pro-bloqueado .alternativa a {
  color: #dc2626;
  font-weight: 700;
  text-decoration: none;
}

.pro-bloqueado .alternativa a:hover {
  text-decoration: underline;
}

.secao.pro.desbloqueado::before {
  content: '🔥 PRO ATIVO';
  background: linear-gradient(135deg, #dc2626, #f97316);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}


/* ============================================================
   (72) 📄 OCR — EXTRAIR TEXTO DE IMAGEM — PRO
   ============================================================ */

/* Inicialização */
.oi-iniciando {
  text-align: center;
  padding: 40px 20px;
  background: var(--primary-soft);
  border-radius: 14px;
  border: 1px solid var(--border);
}
.oi-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border);
  border-top-color: #dc2626;
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: oiSpin .8s linear infinite;
}
@keyframes oiSpin { to { transform: rotate(360deg); } }
#oiIniciandoStatus {
  font-weight: 700;
  color: #dc2626;
  margin-bottom: 8px;
}
.oi-dica {
  font-size: .8rem;
  color: var(--text-mute);
}

/* Upload */
.oi-upload {
  display: block;
  padding: 60px 30px;
  border: 3px dashed #dc2626;
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  transition: all .25s;
  background: rgba(220, 38, 38, 0.04);
}
.oi-upload:hover {
  border-color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
  transform: translateY(-2px);
}
.oi-upload-icone {
  font-size: 3.5rem;
  margin-bottom: 12px;
}
.oi-upload-titulo {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.oi-upload-sub {
  color: var(--text-soft);
  font-size: .95rem;
  margin-bottom: 14px;
}
.oi-upload-limite {
  color: var(--text-mute);
  font-size: .8rem;
}

/* Preview */
.oi-preview-wrap {
  margin-bottom: 20px;
}
.oi-preview-box {
  background: #f3f4f6;
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  margin-bottom: 12px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.dark .oi-preview-box {
  background: #0d1117;
}
.oi-preview {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.oi-preview-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.oi-meta-item {
  background: var(--primary-soft);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.oi-meta-rotulo {
  display: block;
  font-size: 0.7rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
  font-weight: 700;
}
.oi-meta-item strong {
  color: #dc2626;
  font-size: 0.88rem;
  word-break: break-all;
}

/* Controles */
.oi-controles {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
}
.oi-label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}
.oi-select {
  width: 100%;
  padding: 12px 14px;
  margin-top: 6px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}
.oi-select:focus {
  border-color: #dc2626;
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.oi-btn-primario {
  padding: 14px 28px;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  white-space: nowrap;
  height: fit-content;
}
.oi-btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4);
}
.oi-btn-primario:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Progresso */
.oi-progresso {
  padding: 20px;
  background: rgba(220, 38, 38, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(220, 38, 38, 0.2);
  margin-bottom: 20px;
}
.oi-progresso-titulo {
  font-weight: 800;
  color: #dc2626;
  margin-bottom: 12px;
  text-align: center;
}
.oi-barra {
  height: 12px;
  background: rgba(220, 38, 38, 0.15);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.oi-barra-preenchida {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #dc2626, #f97316);
  border-radius: 6px;
  transition: width .3s;
}
.oi-progresso-pct {
  text-align: center;
  font-weight: 700;
  color: #dc2626;
}

/* Resultado */
.oi-resultado {
  animation: oiFadeIn .4s ease;
}
@keyframes oiFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.oi-resultado-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.oi-resultado-titulo {
  font-weight: 800;
  color: #dc2626;
  font-size: 1rem;
}
.oi-resultado-confianca {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
}
body.dark .oi-resultado-confianca {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
}
.oi-textarea {
  width: 100%;
  min-height: 220px;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  resize: vertical;
  margin-bottom: 16px;
}
.oi-textarea:focus {
  border-color: #dc2626;
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.oi-acoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.oi-btn-secundario {
  padding: 12px;
  background: transparent;
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.oi-btn-secundario:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

/* Toast */
.oi-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #10b981;
  color: #fff;
  padding: 14px 24px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
  font-family: system-ui, sans-serif;
}
.oi-toast--visivel {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Responsivo */
@media (max-width: 600px) {
  .oi-upload {
    padding: 40px 16px;
  }
  .oi-upload-icone {
    font-size: 2.5rem;
  }
  .oi-upload-titulo {
    font-size: 1.05rem;
  }
  .oi-controles {
    grid-template-columns: 1fr;
  }
  .oi-btn-primario {
    width: 100%;
  }
  .oi-preview {
    max-height: 260px;
  }
  .oi-textarea {
    min-height: 180px;
    font-size: 0.85rem;
  }
}


/* ============================================================
   (78) 🧾 LEITOR DE NOTAS FISCAIS — PRO
   ============================================================ */

/* Inicialização */
.ln-iniciando {
  text-align: center;
  padding: 40px 20px;
  background: var(--primary-soft);
  border-radius: 14px;
  border: 1px solid var(--border);
}
.ln-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border);
  border-top-color: #dc2626;
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: lnSpin .8s linear infinite;
}
@keyframes lnSpin { to { transform: rotate(360deg); } }
#lnIniciandoStatus {
  font-weight: 700;
  color: #dc2626;
  margin-bottom: 8px;
}
.ln-dica {
  font-size: .8rem;
  color: var(--text-mute);
}

/* Upload */
.ln-upload {
  display: block;
  padding: 60px 30px;
  border: 3px dashed #dc2626;
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  transition: all .25s;
  background: rgba(220, 38, 38, 0.04);
}
.ln-upload:hover {
  border-color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
  transform: translateY(-2px);
}
.ln-upload-icone {
  font-size: 3.5rem;
  margin-bottom: 12px;
}
.ln-upload-titulo {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.ln-upload-sub {
  color: var(--text-soft);
  font-size: .95rem;
  margin-bottom: 14px;
}
.ln-upload-limite {
  color: var(--text-mute);
  font-size: .8rem;
}

/* Preview */
.ln-preview-wrap {
  margin-bottom: 20px;
}
.ln-preview-box {
  background: #f3f4f6;
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  margin-bottom: 12px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.dark .ln-preview-box {
  background: #0d1117;
}
.ln-preview {
  max-width: 100%;
  max-height: 420px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.ln-preview-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.ln-meta-item {
  background: var(--primary-soft);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.ln-meta-rotulo {
  display: block;
  font-size: 0.7rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
  font-weight: 700;
}
.ln-meta-item strong {
  color: #dc2626;
  font-size: 0.88rem;
  word-break: break-all;
}

/* Controles */
.ln-controles {
  text-align: center;
  margin-bottom: 20px;
}
.ln-btn-primario {
  padding: 16px 40px;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  font-family: inherit;
  transition: all .25s;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.4);
}
.ln-btn-primario:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(220, 38, 38, 0.55);
}
.ln-btn-primario:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Progresso */
.ln-progresso {
  padding: 20px;
  background: rgba(220, 38, 38, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(220, 38, 38, 0.2);
  margin-bottom: 20px;
}
.ln-progresso-titulo {
  font-weight: 800;
  color: #dc2626;
  margin-bottom: 12px;
  text-align: center;
}
.ln-barra {
  height: 12px;
  background: rgba(220, 38, 38, 0.15);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ln-barra-preenchida {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #dc2626, #f97316);
  border-radius: 6px;
  transition: width .3s;
}
.ln-progresso-pct {
  text-align: center;
  font-weight: 700;
  color: #dc2626;
}

/* Resultado */
.ln-resultado {
  animation: lnFadeIn .4s ease;
}
@keyframes lnFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Card: dados detectados */
.ln-card-dados {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.04) 0%, rgba(249, 115, 22, 0.04) 100%);
  border: 2px solid rgba(220, 38, 38, 0.25);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}
.ln-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ln-card-titulo {
  font-weight: 800;
  color: #b91c1c;
  font-size: 1rem;
}
body.dark .ln-card-titulo {
  color: #fca5a5;
}
.ln-card-confianca {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
}
body.dark .ln-card-confianca {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
}

.ln-dados-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.ln-dado-item {
  background: var(--bg);
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.ln-dado-rotulo {
  display: block;
  font-size: 0.7rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  font-weight: 700;
}
.ln-dado-valor {
  color: var(--text);
  font-size: 0.95rem;
  word-break: break-word;
  display: block;
}
.ln-dado-valor.ln-vazio {
  color: var(--text-mute);
  font-style: italic;
  font-weight: 400;
}
.ln-dado-valor.ln-valor-destaque {
  color: #dc2626;
  font-size: 1.2rem;
  font-weight: 900;
}

/* Card: texto bruto */
.ln-card-texto {
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}
.ln-textarea {
  width: 100%;
  min-height: 180px;
  padding: 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  resize: vertical;
}
.ln-textarea:focus {
  border-color: #dc2626;
  outline: none;
}

/* Botões secundários */
.ln-acoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.ln-btn-secundario {
  padding: 12px;
  background: transparent;
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.ln-btn-secundario:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

.ln-btn-mini {
  padding: 6px 12px;
  background: var(--bg);
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.ln-btn-mini:hover {
  border-color: #dc2626;
  color: #dc2626;
}

/* Toast */
.ln-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #10b981;
  color: #fff;
  padding: 14px 24px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
  font-family: system-ui, sans-serif;
}
.ln-toast--visivel {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Responsivo */
@media (max-width: 600px) {
  .ln-upload {
    padding: 40px 16px;
  }
  .ln-upload-icone {
    font-size: 2.5rem;
  }
  .ln-upload-titulo {
    font-size: 1.05rem;
  }
  .ln-btn-primario {
    width: 100%;
    padding: 14px 24px;
    font-size: 0.95rem;
  }
  .ln-preview {
    max-height: 260px;
  }
  .ln-dados-grid {
    grid-template-columns: 1fr;
  }
  .ln-textarea {
    min-height: 140px;
    font-size: 0.8rem;
  }
}


/* ============================================================
   (74) 🗣️ TEXTO → VOZ (TTS) — PRO
   ============================================================ */

/* Inicialização */
.tv-iniciando {
  text-align: center;
  padding: 40px 20px;
  background: var(--primary-soft);
  border-radius: 14px;
  border: 1px solid var(--border);
}
.tv-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border);
  border-top-color: #dc2626;
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: tvSpin .8s linear infinite;
}
@keyframes tvSpin { to { transform: rotate(360deg); } }
#tvIniciandoStatus {
  font-weight: 700;
  color: #dc2626;
}

/* Texto */
.tv-texto-wrap {
  margin-bottom: 20px;
}
.tv-label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 12px;
}
.tv-textarea {
  width: 100%;
  min-height: 180px;
  padding: 16px;
  margin-top: 8px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
}
.tv-textarea:focus {
  border-color: #dc2626;
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.tv-texto-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
#tvContador {
  font-size: 0.8rem;
  color: var(--text-mute);
  font-weight: 600;
}
.tv-texto-acoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tv-btn-mini {
  padding: 6px 12px;
  background: var(--bg);
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.tv-btn-mini:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}
.tv-btn-file {
  display: inline-block;
  text-align: center;
}

/* Controles: idioma + voz */
.tv-controles {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  margin-bottom: 20px;
}
.tv-select {
  width: 100%;
  padding: 12px 14px;
  margin-top: 6px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}
.tv-select:focus {
  border-color: #dc2626;
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Sliders */
.tv-sliders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(220, 38, 38, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(220, 38, 38, 0.15);
}
.tv-slider {
  display: block;
  font-size: 0.85rem;
  color: var(--text-soft);
  font-weight: 600;
}
.tv-slider span {
  display: block;
  margin-bottom: 6px;
}
.tv-slider strong {
  color: #dc2626;
}
.tv-slider input[type="range"] {
  width: 100%;
  margin-top: 4px;
}

/* Botões de reprodução */
.tv-acoes-play {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.tv-btn-primario {
  padding: 14px 24px;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.tv-btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4);
}
.tv-btn-primario:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.tv-btn-secundario {
  padding: 14px 24px;
  background: transparent;
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.tv-btn-secundario:hover:not(:disabled) {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}
.tv-btn-secundario:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Divisor */
.tv-divisor {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 20px;
  color: var(--text-mute);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.tv-divisor::before,
.tv-divisor::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--border);
}

/* Aviso de gravação */
.tv-gravacao-info {
  padding: 14px 16px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  margin-bottom: 16px;
}
.tv-gravacao-aviso {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-soft);
  line-height: 1.6;
}
.tv-gravacao-aviso strong {
  color: #d97706;
}

/* Botão gravar */
.tv-acoes-gravar {
  margin-bottom: 20px;
}
.tv-btn-gravar {
  width: 100%;
  padding: 18px 24px;
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all .25s;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.35);
}
.tv-btn-gravar:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.5);
}
.tv-btn-gravar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Progresso */
.tv-progresso {
  padding: 20px;
  background: rgba(220, 38, 38, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(220, 38, 38, 0.2);
  margin-bottom: 20px;
}
.tv-progresso-titulo {
  font-weight: 800;
  color: #dc2626;
  margin-bottom: 12px;
  text-align: center;
}
.tv-barra {
  height: 12px;
  background: rgba(220, 38, 38, 0.15);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.tv-barra-preenchida {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #dc2626, #f97316);
  border-radius: 6px;
  transition: width .3s;
}
.tv-progresso-pct {
  text-align: center;
  font-weight: 700;
  color: #dc2626;
}

/* Resultado da gravação */
.tv-resultado {
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.04) 0%, rgba(249, 115, 22, 0.04) 100%);
  border: 2px solid rgba(220, 38, 38, 0.3);
  border-radius: 14px;
  margin-top: 16px;
  animation: tvFadeIn .4s ease;
}
@keyframes tvFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.tv-resultado-icone {
  font-size: 3rem;
  margin-bottom: 8px;
}
.tv-resultado-titulo {
  font-size: 1.3rem;
  font-weight: 800;
  color: #dc2626;
  margin-bottom: 8px;
}
.tv-resultado-info {
  color: var(--text-soft);
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.tv-audio-resultado {
  width: 100%;
  max-width: 480px;
  margin: 0 auto 16px;
  display: block;
}
.tv-acoes-resultado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}

/* Sem suporte */
.tv-sem-suporte {
  text-align: center;
  padding: 40px 20px;
  background: rgba(239, 68, 68, 0.08);
  border: 2px solid rgba(239, 68, 68, 0.3);
  border-radius: 14px;
}
.tv-sem-suporte-icone {
  font-size: 3rem;
  margin-bottom: 12px;
}
.tv-sem-suporte h3 {
  color: #dc2626;
  margin-bottom: 8px;
  font-size: 1.2rem;
}

/* Toast */
.tv-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #10b981;
  color: #fff;
  padding: 14px 24px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
  font-family: system-ui, sans-serif;
}
.tv-toast--visivel {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Responsivo */
@media (max-width: 600px) {
  .tv-controles {
    grid-template-columns: 1fr;
  }
  .tv-textarea {
    min-height: 140px;
    font-size: 0.95rem;
  }
  .tv-btn-primario,
  .tv-btn-secundario {
    padding: 12px 16px;
    font-size: 0.85rem;
  }
  .tv-sliders {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .tv-acoes-resultado {
    grid-template-columns: 1fr;
  }
  .tv-btn-gravar {
    padding: 16px 20px;
    font-size: 0.95rem;
  }
}

/* Dark mode */
body.dark .tv-sliders {
  background: rgba(220, 38, 38, 0.08);
}
body.dark .tv-gravacao-info {
  background: rgba(245, 158, 11, 0.12);
}
body.dark .tv-resultado {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(249, 115, 22, 0.08) 100%);
}


/* ============================================================
   (75) 🧠 RESUMIDOR DE TEXTO — PRO
   ============================================================ */

/* Texto original */
.rs-editor {
  margin-top: 8px;
}
.rs-texto-wrap {
  margin-bottom: 20px;
}
.rs-label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 12px;
}
.rs-textarea {
  width: 100%;
  min-height: 220px;
  padding: 16px;
  margin-top: 8px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
  resize: vertical;
}
.rs-textarea:focus {
  border-color: #dc2626;
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.rs-texto-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
#rsContador {
  font-size: 0.8rem;
  color: var(--text-mute);
  font-weight: 600;
}
.rs-texto-acoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rs-btn-mini {
  padding: 6px 12px;
  background: var(--bg);
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.rs-btn-mini:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}
.rs-btn-file {
  display: inline-block;
  text-align: center;
}

/* Opções */
.rs-opcoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.rs-select {
  width: 100%;
  padding: 12px 14px;
  margin-top: 6px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.rs-select:focus {
  border-color: #dc2626;
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Botão principal */
.rs-acoes-principal {
  text-align: center;
  margin-bottom: 24px;
}
.rs-btn-primario {
  padding: 16px 40px;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  font-family: inherit;
  transition: all .25s;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.35);
}
.rs-btn-primario:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.5);
}
.rs-btn-primario:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Estatísticas */
.rs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.rs-stat-item {
  background: var(--primary-soft);
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  text-align: center;
}
.rs-stat-rotulo {
  display: block;
  font-size: 0.7rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  font-weight: 700;
}
.rs-stat-item strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
}
.rs-stat-destaque {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(249, 115, 22, 0.08) 100%);
  border-color: rgba(220, 38, 38, 0.3);
}
.rs-stat-destaque strong {
  color: #dc2626;
}

/* Abas */
.rs-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
.rs-aba {
  padding: 10px 16px;
  background: var(--bg);
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.rs-aba:hover {
  border-color: #dc2626;
  color: #dc2626;
}
.rs-aba.ativa {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

/* Painéis */
.rs-painel {
  animation: rsFadeIn .3s ease;
}
@keyframes rsFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.rs-ajuda {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-bottom: 12px;
}

/* Resumo */
.rs-resumo-box {
  padding: 20px;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.04) 0%, rgba(249, 115, 22, 0.04) 100%);
  border: 2px solid rgba(220, 38, 38, 0.25);
  border-radius: 14px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 16px;
}
.rs-resumo-box p {
  margin: 0 0 14px;
}
.rs-resumo-box p:last-child {
  margin-bottom: 0;
}
.rs-resumo-box ul {
  margin: 0;
  padding-left: 20px;
}
.rs-resumo-box li {
  margin-bottom: 10px;
  line-height: 1.7;
}

/* Original destacado */
.rs-original-box {
  padding: 20px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.8;
  max-height: 500px;
  overflow-y: auto;
}
.rs-original-box mark {
  background: rgba(249, 115, 22, 0.35);
  color: var(--text);
  padding: 2px 4px;
  border-radius: 4px;
  font-weight: 600;
}
body.dark .rs-original-box mark {
  background: rgba(249, 115, 22, 0.45);
  color: #fff;
}

/* Palavras-chave */
.rs-palavras-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rs-palavra-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: #b91c1c;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.85rem;
  transition: all .2s;
}
body.dark .rs-palavra-tag {
  color: #fca5a5;
}
.rs-palavra-tag .contador {
  background: #dc2626;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 800;
}
.rs-palavra-tag .tamanho-1 { font-size: 0.7rem; }
.rs-palavra-tag .tamanho-2 { font-size: 0.8rem; }
.rs-palavra-tag .tamanho-3 { font-size: 0.9rem; }
.rs-palavra-tag .tamanho-4 { font-size: 1rem; }
.rs-palavra-tag .tamanho-5 { font-size: 1.1rem; }

/* Botões secundários */
.rs-acoes,
.rs-acoes-fim {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.rs-acoes-fim {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.rs-btn-secundario {
  padding: 12px;
  background: transparent;
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.rs-btn-secundario:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

/* Toast */
.rs-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #10b981;
  color: #fff;
  padding: 14px 24px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
  font-family: system-ui, sans-serif;
}
.rs-toast--visivel {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Responsivo */
@media (max-width: 600px) {
  .rs-opcoes {
    grid-template-columns: 1fr;
  }
  .rs-textarea {
    min-height: 180px;
    font-size: 0.9rem;
  }
  .rs-btn-primario {
    width: 100%;
    padding: 14px 24px;
    font-size: 0.95rem;
  }
  .rs-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .rs-aba {
    padding: 8px 12px;
    font-size: 0.78rem;
  }
  .rs-resumo-box,
  .rs-original-box {
    padding: 16px;
    font-size: 0.9rem;
  }
  .rs-acoes,
  .rs-acoes-fim {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   (76) 🖼️ CONVERSOR DE IMAGENS EM MASSA — PRO
   ============================================================ */

/* Upload */
.ci-upload {
  display: block;
  padding: 60px 30px;
  border: 3px dashed #dc2626;
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  transition: all .25s;
  background: rgba(220, 38, 38, 0.04);
  margin-top: 8px;
}
.ci-upload:hover {
  border-color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
  transform: translateY(-2px);
}
.ci-upload-icone {
  font-size: 3.5rem;
  margin-bottom: 12px;
}
.ci-upload-titulo {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.ci-upload-sub {
  color: var(--text-soft);
  font-size: .95rem;
  margin-bottom: 14px;
}
.ci-upload-limite {
  color: var(--text-mute);
  font-size: .8rem;
}

/* Lista de arquivos */
.ci-arquivos {
  background: var(--primary-soft);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}
.ci-arquivos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ci-arquivos-titulo {
  font-weight: 800;
  color: #dc2626;
  font-size: 1rem;
}
.ci-lista-arquivos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  max-height: 320px;
  overflow-y: auto;
}
.ci-arquivo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.85rem;
}
.ci-arquivo-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.ci-arquivo-info {
  flex: 1;
  min-width: 0;
}
.ci-arquivo-nome {
  display: block;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-arquivo-meta {
  display: block;
  font-size: 0.72rem;
  color: var(--text-mute);
  margin-top: 2px;
}
.ci-arquivo-badge {
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.ci-arquivo-badge.ok {
  background: #dcfce7;
  color: #166534;
}
.ci-arquivo-badge.processando {
  background: #fef3c7;
  color: #92400e;
}
.ci-arquivo-badge.erro {
  background: #fee2e2;
  color: #991b1b;
}
body.dark .ci-arquivo-badge.ok {
  background: #132e1c;
  color: #4ade80;
}
body.dark .ci-arquivo-badge.processando {
  background: #2a2410;
  color: #fbbf24;
}
body.dark .ci-arquivo-badge.erro {
  background: #2e1414;
  color: #fca5a5;
}
.ci-arquivo-remover {
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  color: var(--text-mute);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  transition: all .2s;
}
.ci-arquivo-remover:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.ci-btn-add {
  width: 100%;
  padding: 10px;
  background: var(--bg);
  color: #dc2626;
  border: 2px dashed #dc2626;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.ci-btn-add:hover {
  background: #dc2626;
  color: #fff;
}

/* Opções */
.ci-opcoes {
  background: rgba(220, 38, 38, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.ci-opcoes-titulo {
  color: #b91c1c;
  font-size: 1rem;
  margin: 0 0 16px;
  font-weight: 800;
}
.ci-opcoes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ci-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
}
.ci-label strong {
  color: #dc2626;
}
.ci-select,
.ci-input {
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}
.ci-select:focus,
.ci-input:focus {
  border-color: #dc2626;
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.ci-range {
  width: 100%;
  margin-top: 8px;
}
.ci-redim-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

/* Botão principal */
.ci-acoes-principal {
  text-align: center;
  margin-bottom: 24px;
}
.ci-btn-primario {
  padding: 16px 40px;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  font-family: inherit;
  transition: all .25s;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.35);
}
.ci-btn-primario:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.5);
}
.ci-btn-primario:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Progresso */
.ci-progresso {
  padding: 20px;
  background: rgba(220, 38, 38, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(220, 38, 38, 0.2);
  margin-bottom: 20px;
}
.ci-progresso-titulo {
  font-weight: 800;
  color: #dc2626;
  margin-bottom: 12px;
  text-align: center;
}
.ci-barra {
  height: 12px;
  background: rgba(220, 38, 38, 0.15);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ci-barra-preenchida {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #dc2626, #f97316);
  border-radius: 6px;
  transition: width .2s;
}
.ci-progresso-pct {
  text-align: center;
  font-weight: 800;
  color: #dc2626;
  font-size: 1.1rem;
}
.ci-progresso-info {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-mute);
  margin-top: 4px;
}

/* Resultado */
.ci-resultado {
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.04) 0%, rgba(249, 115, 22, 0.04) 100%);
  border: 2px solid rgba(220, 38, 38, 0.3);
  border-radius: 14px;
  margin-top: 16px;
  animation: ciFadeIn .4s ease;
}
@keyframes ciFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.ci-resultado-icone {
  font-size: 3rem;
  margin-bottom: 8px;
}
.ci-resultado-titulo {
  font-size: 1.3rem;
  font-weight: 800;
  color: #dc2626;
  margin-bottom: 8px;
}
.ci-resultado-info {
  color: var(--text-soft);
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.ci-resultado-estatisticas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.ci-stat-item {
  background: var(--bg);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  text-align: center;
}
.ci-stat-rotulo {
  display: block;
  font-size: 0.7rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  font-weight: 700;
}
.ci-stat-item strong {
  color: #dc2626;
  font-size: 1rem;
}
.ci-acoes-resultado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}

/* Botões secundários */
.ci-btn-secundario {
  padding: 14px 24px;
  background: transparent;
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.ci-btn-secundario:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}
.ci-btn-mini {
  padding: 6px 12px;
  background: var(--bg);
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.ci-btn-mini:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

/* Toast */
.ci-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #10b981;
  color: #fff;
  padding: 14px 24px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
  font-family: system-ui, sans-serif;
}
.ci-toast--visivel {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Responsivo */
@media (max-width: 600px) {
  .ci-upload {
    padding: 40px 16px;
  }
  .ci-upload-icone {
    font-size: 2.5rem;
  }
  .ci-upload-titulo {
    font-size: 1.05rem;
  }
  .ci-opcoes-grid,
  .ci-redim-extra {
    grid-template-columns: 1fr;
  }
  .ci-btn-primario {
    width: 100%;
    padding: 14px 24px;
    font-size: 0.95rem;
  }
  .ci-arquivo-thumb {
    width: 32px;
    height: 32px;
  }
  .ci-acoes-resultado {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   (77) 📊 DASHBOARD COM IA — PRO
   ============================================================ */

/* Upload / Inicial */
.db-inicial {
  margin-top: 8px;
}
.db-upload {
  display: block;
  padding: 60px 30px;
  border: 3px dashed #dc2626;
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  transition: all .25s;
  background: rgba(220, 38, 38, 0.04);
}
.db-upload:hover {
  border-color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
  transform: translateY(-2px);
}
.db-upload-icone {
  font-size: 3.5rem;
  margin-bottom: 12px;
}
.db-upload-titulo {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.db-upload-sub {
  color: var(--text-soft);
  font-size: .95rem;
  margin-bottom: 14px;
}
.db-upload-limite {
  color: var(--text-mute);
  font-size: .8rem;
}

.db-separador {
  text-align: center;
  margin: 24px 0 16px;
  color: var(--text-mute);
  font-size: 0.85rem;
  font-weight: 700;
  position: relative;
}
.db-separador::before,
.db-separador::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--border);
}
.db-separador::before { left: 0; }
.db-separador::after { right: 0; }

.db-colar-wrap {
  margin-bottom: 16px;
}
.db-label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 12px;
}
.db-textarea {
  width: 100%;
  min-height: 140px;
  padding: 14px;
  margin-top: 8px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  resize: vertical;
}
.db-textarea:focus {
  border-color: #dc2626;
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.db-exemplo-wrap {
  text-align: center;
  margin-top: 16px;
}

/* Dashboard */
.db-dashboard {
  animation: dbFadeIn .4s ease;
}
@keyframes dbFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.db-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(249, 115, 22, 0.08) 100%);
  border: 2px solid rgba(220, 38, 38, 0.25);
  border-radius: 14px;
  margin-bottom: 20px;
}
.db-header-titulo {
  font-weight: 800;
  color: #b91c1c;
  font-size: 1.1rem;
}
.db-header-acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.db-subtitulo {
  color: #b91c1c;
  font-size: 1rem;
  margin: 0 0 12px;
  font-weight: 800;
}

/* Colunas detectadas */
.db-info-wrap {
  margin-bottom: 24px;
}
.db-colunas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.db-coluna-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
}
.db-coluna-tag .tipo {
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.db-coluna-tag .tipo-numero {
  background: rgba(59, 130, 246, 0.15);
  color: #1e40af;
}
.db-coluna-tag .tipo-data {
  background: rgba(139, 92, 246, 0.15);
  color: #6d28d9;
}
.db-coluna-tag .tipo-texto {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}
body.dark .db-coluna-tag .tipo-numero {
  color: #60a5fa;
}
body.dark .db-coluna-tag .tipo-data {
  color: #c4b5fd;
}
body.dark .db-coluna-tag .tipo-texto {
  color: #fbbf24;
}

/* Sugestões */
.db-sugestoes-wrap {
  margin-bottom: 24px;
}
.db-sugestoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.db-sugestao {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.04) 0%, rgba(249, 115, 22, 0.04) 100%);
  border: 2px solid rgba(220, 38, 38, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.db-sugestao:hover {
  border-color: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.15);
}
.db-sugestao-icone {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.db-sugestao-info {
  flex: 1;
  min-width: 0;
}
.db-sugestao-titulo {
  font-weight: 800;
  color: var(--text);
  font-size: 0.9rem;
  margin-bottom: 2px;
}
.db-sugestao-desc {
  font-size: 0.75rem;
  color: var(--text-mute);
}

/* Insights */
.db-insights-wrap {
  margin-bottom: 24px;
}
.db-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.db-insight {
  padding: 14px 16px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-left: 4px solid #dc2626;
  border-radius: 10px;
}
.db-insight-rotulo {
  display: block;
  font-size: 0.7rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-bottom: 4px;
}
.db-insight-valor {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #dc2626;
}

/* Gráficos */
.db-graficos-wrap {
  margin-bottom: 24px;
}
.db-graficos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.db-graficos-acoes {
  display: flex;
  gap: 8px;
}
.db-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.db-grafico-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  position: relative;
}
.db-grafico-titulo {
  font-weight: 800;
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 12px;
  padding-right: 60px;
}
.db-grafico-canvas-wrap {
  position: relative;
  height: 280px;
}
.db-grafico-acoes {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
}
.db-grafico-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--bg);
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  transition: all .2s;
}
.db-grafico-btn:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.db-graficos-vazio {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-mute);
  background: var(--primary-soft);
  border: 2px dashed var(--border);
  border-radius: 14px;
}

/* Tabela */
.db-tabela-wrap {
  margin-bottom: 24px;
}
.db-tabela-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.db-tabela-info {
  font-size: 0.8rem;
  color: var(--text-mute);
  font-weight: 600;
}
.db-tabela-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 400px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
.db-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.db-tabela th,
.db-tabela td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.db-tabela th {
  background: var(--primary-soft);
  color: #b91c1c;
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.db-tabela tbody tr:hover {
  background: rgba(220, 38, 38, 0.04);
}
.db-tabela .celula-numero {
  text-align: right;
  font-family: 'Courier New', monospace;
  font-weight: 600;
}

/* Botões */
.db-btn-primario {
  padding: 12px 24px;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.db-btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4);
}
.db-btn-secundario {
  padding: 12px 24px;
  background: transparent;
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.db-btn-secundario:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}
.db-btn-mini {
  padding: 8px 14px;
  background: var(--bg);
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.db-btn-mini:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

/* Modal */
.db-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: dbFadeIn .2s ease;
}
.db-modal-content {
  background: var(--card);
  border-radius: 16px;
  padding: 24px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.db-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.db-modal-header h3 {
  color: #b91c1c;
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0;
}
.db-modal-close {
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-mute);
  line-height: 1;
  border-radius: 8px;
  transition: all .2s;
}
.db-modal-close:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}
.db-modal-body {
  margin-bottom: 20px;
}
.db-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.db-select,
.db-input {
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}
.db-select:focus,
.db-input:focus {
  border-color: #dc2626;
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.db-eixo-y {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.db-eixo-y-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: all .2s;
}
.db-eixo-y-item:hover {
  border-color: #dc2626;
}
.db-eixo-y-item.selecionado {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.db-eixo-y-item input {
  display: none;
}

/* Toast */
.db-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #10b981;
  color: #fff;
  padding: 14px 24px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
  font-family: system-ui, sans-serif;
}
.db-toast--visivel {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Responsivo */
@media (max-width: 600px) {
  .db-upload {
    padding: 40px 16px;
  }
  .db-upload-icone {
    font-size: 2.5rem;
  }
  .db-upload-titulo {
    font-size: 1.05rem;
  }
  .db-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .db-graficos {
    grid-template-columns: 1fr;
  }
  .db-grafico-canvas-wrap {
    height: 240px;
  }
  .db-insights {
    grid-template-columns: 1fr;
  }
  .db-sugestoes {
    grid-template-columns: 1fr;
  }
  .db-modal-footer {
    flex-direction: column-reverse;
  }
  .db-modal-footer button {
    width: 100%;
  }
}


/* ============================================================
   (78) 🎬 COMPRESSOR DE VÍDEO EM MASSA — PRO
   ============================================================ */

/* Inicialização */
.cv-iniciando {
  text-align: center;
  padding: 40px 20px;
  background: var(--primary-soft);
  border-radius: 14px;
  border: 1px solid var(--border);
  margin-top: 8px;
}
.cv-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border);
  border-top-color: #dc2626;
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: cvSpin .8s linear infinite;
}
@keyframes cvSpin { to { transform: rotate(360deg); } }
#cvIniciandoStatus {
  font-weight: 700;
  color: #dc2626;
  margin-bottom: 8px;
}
.cv-dica {
  font-size: .8rem;
  color: var(--text-mute);
}

/* Upload */
.cv-upload {
  display: block;
  padding: 60px 30px;
  border: 3px dashed #dc2626;
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  transition: all .25s;
  background: rgba(220, 38, 38, 0.04);
  margin-top: 8px;
}
.cv-upload:hover {
  border-color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
  transform: translateY(-2px);
}
.cv-upload-icone {
  font-size: 3.5rem;
  margin-bottom: 12px;
}
.cv-upload-titulo {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.cv-upload-sub {
  color: var(--text-soft);
  font-size: .95rem;
  margin-bottom: 14px;
}
.cv-upload-limite {
  color: var(--text-mute);
  font-size: .8rem;
}

/* Lista de arquivos */
.cv-arquivos {
  background: var(--primary-soft);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}
.cv-arquivos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cv-arquivos-titulo {
  font-weight: 800;
  color: #dc2626;
  font-size: 1rem;
}
.cv-lista-arquivos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  max-height: 400px;
  overflow-y: auto;
}
.cv-arquivo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.85rem;
  flex-direction: column;
  align-items: stretch;
}
.cv-arquivo-topo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cv-arquivo-icone {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.cv-arquivo-info {
  flex: 1;
  min-width: 0;
}
.cv-arquivo-nome {
  display: block;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-arquivo-meta {
  display: block;
  font-size: 0.72rem;
  color: var(--text-mute);
  margin-top: 2px;
}
.cv-arquivo-badge {
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.cv-arquivo-badge.ok { background: #dcfce7; color: #166534; }
.cv-arquivo-badge.processando { background: #fef3c7; color: #92400e; }
.cv-arquivo-badge.erro { background: #fee2e2; color: #991b1b; }
.cv-arquivo-badge.aguardando { background: #e0e7ff; color: #3730a3; }
body.dark .cv-arquivo-badge.ok { background: #132e1c; color: #4ade80; }
body.dark .cv-arquivo-badge.processando { background: #2a2410; color: #fbbf24; }
body.dark .cv-arquivo-badge.erro { background: #2e1414; color: #fca5a5; }
body.dark .cv-arquivo-badge.aguardando { background: #1e1b4b; color: #a5b4fc; }

.cv-arquivo-remover {
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  color: var(--text-mute);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  transition: all .2s;
}
.cv-arquivo-remover:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

/* Barra de progresso individual */
.cv-arquivo-progresso {
  height: 4px;
  background: rgba(220, 38, 38, 0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
  display: none;
}
.cv-arquivo-progresso.ativo {
  display: block;
}
.cv-arquivo-progresso-barra {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #dc2626, #f97316);
  border-radius: 2px;
  transition: width .3s;
}

/* Resultado individual */
.cv-arquivo-resultado {
  font-size: 0.75rem;
  color: var(--text-mute);
  margin-top: 6px;
  display: none;
}
.cv-arquivo-resultado.ativo {
  display: block;
}
.cv-arquivo-resultado .economia {
  color: #16a34a;
  font-weight: 800;
}

.cv-btn-add {
  width: 100%;
  padding: 10px;
  background: var(--bg);
  color: #dc2626;
  border: 2px dashed #dc2626;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.cv-btn-add:hover {
  background: #dc2626;
  color: #fff;
}

/* Opções */
.cv-opcoes {
  background: rgba(220, 38, 38, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.cv-opcoes-titulo {
  color: #b91c1c;
  font-size: 1rem;
  margin: 0 0 16px;
  font-weight: 800;
}
.cv-subtitulo {
  color: #b91c1c;
  font-size: 0.9rem;
  margin: 0 0 12px;
  font-weight: 800;
}

/* Presets */
.cv-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.cv-preset {
  cursor: pointer;
  display: block;
}
.cv-preset input {
  display: none;
}
.cv-preset-card {
  padding: 16px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  text-align: center;
  transition: all .2s;
}
.cv-preset:hover .cv-preset-card {
  border-color: #dc2626;
}
.cv-preset input:checked + .cv-preset-card {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(249, 115, 22, 0.08) 100%);
  border-color: #dc2626;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}
.cv-preset-icone {
  font-size: 2rem;
  margin-bottom: 8px;
}
.cv-preset-titulo {
  font-weight: 800;
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.cv-preset-desc {
  font-size: 0.75rem;
  color: var(--text-mute);
  line-height: 1.4;
  margin-bottom: 8px;
}
.cv-preset-crf {
  font-size: 0.7rem;
  color: #dc2626;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* Resolução */
.cv-resolucao-wrap {
  margin-top: 20px;
}
.cv-resolucao-opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.cv-resolucao-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all .2s;
}
.cv-resolucao-item:hover {
  border-color: #dc2626;
}
.cv-resolucao-item input:checked ~ span {
  color: #dc2626;
  font-weight: 800;
}
.cv-resolucao-item:has(input:checked) {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

/* Botão principal */
.cv-acoes-principal {
  text-align: center;
  margin-bottom: 24px;
}
.cv-btn-primario {
  padding: 16px 40px;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  font-family: inherit;
  transition: all .25s;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.35);
}
.cv-btn-primario:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.5);
}
.cv-btn-primario:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Progresso geral */
.cv-progresso {
  padding: 20px;
  background: rgba(220, 38, 38, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(220, 38, 38, 0.2);
  margin-bottom: 20px;
}
.cv-progresso-titulo {
  font-weight: 800;
  color: #dc2626;
  margin-bottom: 12px;
  text-align: center;
}
.cv-barra {
  height: 12px;
  background: rgba(220, 38, 38, 0.15);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.cv-barra-preenchida {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #dc2626, #f97316);
  border-radius: 6px;
  transition: width .3s;
}
.cv-progresso-pct {
  text-align: center;
  font-weight: 800;
  color: #dc2626;
  font-size: 1.1rem;
}
.cv-progresso-info {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-mute);
  margin-top: 4px;
}
.cv-progresso-sub {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-mute);
  margin-top: 2px;
  font-style: italic;
}

/* Resultado */
.cv-resultado {
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.04) 0%, rgba(249, 115, 22, 0.04) 100%);
  border: 2px solid rgba(220, 38, 38, 0.3);
  border-radius: 14px;
  margin-top: 16px;
  animation: cvFadeIn .4s ease;
}
@keyframes cvFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.cv-resultado-icone {
  font-size: 3rem;
  margin-bottom: 8px;
}
.cv-resultado-titulo {
  font-size: 1.3rem;
  font-weight: 800;
  color: #dc2626;
  margin-bottom: 8px;
}
.cv-resultado-info {
  color: var(--text-soft);
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.cv-resultado-estatisticas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.cv-stat-item {
  background: var(--bg);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  text-align: center;
}
.cv-stat-rotulo {
  display: block;
  font-size: 0.7rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  font-weight: 700;
}
.cv-stat-item strong {
  color: #dc2626;
  font-size: 1rem;
}
.cv-acoes-resultado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
}

/* Botões secundários */
.cv-btn-secundario {
  padding: 14px 24px;
  background: transparent;
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.cv-btn-secundario:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}
.cv-btn-mini {
  padding: 6px 12px;
  background: var(--bg);
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.cv-btn-mini:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

/* Toast */
.cv-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #10b981;
  color: #fff;
  padding: 14px 24px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
  font-family: system-ui, sans-serif;
}
.cv-toast--visivel {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Responsivo */
@media (max-width: 600px) {
  .cv-upload {
    padding: 40px 16px;
  }
  .cv-upload-icone {
    font-size: 2.5rem;
  }
  .cv-upload-titulo {
    font-size: 1.05rem;
  }
  .cv-presets {
    grid-template-columns: 1fr;
  }
  .cv-btn-primario {
    width: 100%;
    padding: 14px 24px;
    font-size: 0.95rem;
  }
  .cv-acoes-resultado {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   (71) EDITOR DE VÍDEO — Melhorias v6
   ============================================================ */
/* Botões rápidos acima do preview */
.ev-acoes-rapidas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.ev-btn-rapido {
  padding: 10px 14px;
  background: var(--bg);
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ev-btn-rapido:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  transform: translateY(-2px);
}

/* Presets dropdown */
.ev-presets-dropdown {
  position: relative;
  width: 100%;
}
.ev-presets-dropdown select {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg);
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
}
.ev-presets-dropdown select:hover {
  border-color: #dc2626;
}

/* Aba: Crop */
.ev-crop-wrap {
  background: rgba(220, 38, 38, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 12px;
  padding: 16px;
}
.ev-crop-canvas-wrap {
  position: relative;
  background: #000;
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 16px;
  text-align: center;
  overflow: hidden;
}
.ev-crop-canvas-wrap canvas {
  max-width: 100%;
  max-height: 340px;
  border-radius: 6px;
}
.ev-crop-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.ev-crop-info {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-bottom: 16px;
}
.ev-crop-info strong {
  color: #dc2626;
}

/* Aba: Juntar */
.ev-juntar-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.ev-juntar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.88rem;
}
.ev-juntar-numero {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.ev-juntar-nome {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}
.ev-juntar-meta {
  font-size: 0.78rem;
  color: var(--text-mute);
}
.ev-juntar-info {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-bottom: 16px;
  padding: 10px;
  background: rgba(220, 38, 38, 0.08);
  border-radius: 8px;
}

/* Botões de marcar tempo */
.ev-timeline-marcadores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .ev-acoes-rapidas {
    grid-template-columns: repeat(2, 1fr);
  }
  .ev-btn-rapido {
    font-size: 0.75rem;
    padding: 8px 10px;
  }
  .ev-crop-inputs {
    grid-template-columns: 1fr 1fr;
  }
}


/* ============================================================
   CROP COM ALÇAS ARRASTÁVEIS
   ============================================================ */

/* Área do canvas de crop */
.ev-crop-area {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0 auto 16px;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}

.ev-crop-area canvas {
  display: block;
  max-width: 100%;
  max-height: 400px;
  cursor: crosshair;
}

/* Retângulo de seleção */
.ev-crop-rect {
  position: absolute;
  border: 2px solid #dc2626;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  cursor: move;
  box-sizing: border-box;
}

/* Alças de redimensionamento */
.ev-crop-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #dc2626;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 10;
}
.ev-crop-handle-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.ev-crop-handle-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.ev-crop-handle-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.ev-crop-handle-se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.ev-crop-handle-n  { top: -7px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ev-crop-handle-s  { bottom: -7px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ev-crop-handle-w  { top: 50%; left: -7px; transform: translateY(-50%); cursor: ew-resize; }
.ev-crop-handle-e  { top: 50%; right: -7px; transform: translateY(-50%); cursor: ew-resize; }

/* Grid dentro do crop */
.ev-crop-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.3) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.3) 1px, transparent 1px);
  background-size: 33.33% 33.33%;
}

/* Info embaixo do crop */
.ev-crop-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--primary-soft);
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.ev-crop-info-bar strong {
  color: #dc2626;
}

/* Botões de proporção */
.ev-crop-ratios {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  justify-content: center;
}
.ev-crop-ratio-btn {
  padding: 8px 14px;
  background: var(--bg);
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.ev-crop-ratio-btn:hover {
  border-color: #dc2626;
  color: #dc2626;
}
.ev-crop-ratio-btn.ativo {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}


/* ============================================================
   FIX — Centralizar área do crop
   ============================================================ */
[data-painel="crop"] {
  text-align: center;
}

.ev-crop-area {
  display: inline-block;
  margin: 0 auto 16px;
  text-align: left;
  position: relative;
}

/* FIX — garantir que as alças e o retângulo estejam acessíveis */
.ev-crop-rect {
  position: absolute;
  cursor: move;
  touch-action: none;
  user-select: none;
}

.ev-crop-handle {
  position: absolute;
  z-index: 20;
  touch-action: none;
  user-select: none;
}

.ev-crop-area canvas {
  display: block;
  margin: 0 auto;
  touch-action: none;
}


/* ============================================================
   NARRAÇÃO + EFEITOS — Editor de vídeo v7
   ============================================================ */

/* ============ NARRAÇÃO ============ */
.ev-narracao-wrap {
  background: rgba(220, 38, 38, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 12px;
  padding: 20px;
}

.ev-narracao-rec {
  text-align: center;
  padding: 20px;
  background: var(--bg);
  border: 2px dashed var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
  transition: all .3s;
}

.ev-narracao-rec.gravando {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  animation: evPulseRec 1.5s ease-in-out infinite;
}

@keyframes evPulseRec {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); }
}

.ev-narracao-icone {
  font-size: 3rem;
  margin-bottom: 8px;
}

.ev-narracao-status {
  font-weight: 700;
  color: #dc2626;
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.ev-narracao-timer {
  font-size: 2rem;
  font-weight: 900;
  color: #dc2626;
  font-family: 'Courier New', monospace;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.ev-narracao-acoes {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.ev-narracao-audio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
}

.ev-narracao-audio audio {
  flex: 1;
  height: 40px;
}

.ev-narracao-mix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.ev-narracao-mix-item {
  padding: 12px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
}

.ev-narracao-mix-item:hover {
  border-color: #dc2626;
}

.ev-narracao-mix-item.selecionado {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.ev-narracao-mix-item input {
  display: none;
}

/* ============ EFEITOS ============ */
.ev-efeitos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.ev-efeito-card {
  padding: 16px 10px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all .25s;
  text-align: center;
  position: relative;
}

.ev-efeito-card:hover {
  border-color: #dc2626;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.15);
}

.ev-efeito-card.selecionado {
  border-color: #dc2626;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(249, 115, 22, 0.08) 100%);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.2);
}

.ev-efeito-card.selecionado::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: #dc2626;
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ev-efeito-icone {
  font-size: 2rem;
  margin-bottom: 6px;
}

.ev-efeito-nome {
  font-weight: 800;
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.3;
}

.ev-efeito-desc {
  font-size: 0.7rem;
  color: var(--text-mute);
  margin-top: 4px;
}

/* Slider de intensidade */
.ev-efeito-intensidade {
  padding: 16px;
  background: rgba(220, 38, 38, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.15);
  border-radius: 12px;
  margin-bottom: 16px;
}

.ev-efeito-intensidade label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 8px;
}

.ev-efeito-intensidade strong {
  color: #dc2626;
}

.ev-efeito-intensidade input[type="range"] {
  width: 100%;
}

/* Fade config */
.ev-fade-config {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 600px) {
  .ev-narracao-acoes {
    flex-direction: column;
  }
  .ev-narracao-acoes button {
    width: 100%;
  }
  .ev-efeitos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ev-fade-config {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   FIX — Esconder painéis por padrão (só o ativo aparece)
   ============================================================ */
.ev-painel {
  display: none;
}

.ev-painel[data-painel="corte"] {
  display: block; /* o primeiro fica visível até o JS assumir */
}

.ev-painel { display: none; }
.ev-painel[data-painel="corte"] { display: block; }


/* ============================================================
   (71) EDITOR DE VÍDEO — Aba COMPRIMIR
   ============================================================ */

/* Grid dos presets */
.ev-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.ev-preset {
  cursor: pointer;
  display: block;
}

.ev-preset input {
  display: none;
}

.ev-preset-card {
  padding: 16px 12px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  text-align: center;
  transition: all .25s;
}

.ev-preset:hover .ev-preset-card {
  border-color: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.12);
}

.ev-preset input:checked + .ev-preset-card {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(249, 115, 22, 0.08) 100%);
  border-color: #dc2626;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.2);
}

.ev-preset-icone {
  font-size: 2rem;
  margin-bottom: 8px;
  line-height: 1;
}

.ev-preset-titulo {
  font-weight: 800;
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.ev-preset-desc {
  font-size: 0.72rem;
  color: var(--text-mute);
  line-height: 1.3;
  margin-bottom: 8px;
}

.ev-preset-crf {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
  padding: 3px 8px;
  border-radius: 10px;
}

.ev-preset input:checked + .ev-preset-card .ev-preset-crf {
  background: #dc2626;
  color: #fff;
}

/* Grid de resolução */
.ev-resolucao-opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.ev-resolucao-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-soft);
  transition: all .2s;
  user-select: none;
}

.ev-resolucao-item:hover {
  border-color: #dc2626;
  color: #dc2626;
}

.ev-resolucao-item:has(input:checked) {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  font-weight: 800;
}

.ev-resolucao-item input {
  accent-color: #dc2626;
}

/* Dark mode */
body.dark .ev-preset input:checked + .ev-preset-card {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(249, 115, 22, 0.15) 100%);
}

body.dark .ev-resolucao-item:has(input:checked) {
  background: rgba(220, 38, 38, 0.15);
}

body.dark .ev-preset-crf {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
}

body.dark .ev-preset input:checked + .ev-preset-card .ev-preset-crf {
  background: #dc2626;
  color: #fff;
}

/* Responsivo */
@media (max-width: 600px) {
  .ev-presets {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .ev-preset-card {
    padding: 12px 8px;
  }

  .ev-preset-icone {
    font-size: 1.5rem;
    margin-bottom: 4px;
  }

  .ev-preset-titulo {
    font-size: 0.78rem;
  }

  .ev-preset-desc {
    display: none;
  }

  .ev-preset-crf {
    font-size: 0.62rem;
    padding: 2px 6px;
  }

  .ev-resolucao-opcoes {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .ev-resolucao-item {
    padding: 10px;
    font-size: 0.78rem;
  }
}

@media (max-width: 360px) {
  .ev-presets {
    grid-template-columns: 1fr;
  }

  .ev-preset-desc {
    display: block;
  }

  .ev-resolucao-opcoes {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   FIX — Alinhar botões rápidos + presets
   ============================================================ */

/* Container alinha tudo pelo centro vertical */
.ev-acoes-rapidas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

/* Botões: mesmo padding, sem height forçado */
.ev-btn-rapido {
  padding: 12px 14px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  min-height: 44px;
  box-sizing: border-box;
}

/* Select: mesmo padding dos botões */
.ev-presets-dropdown {
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 44px;
}

.ev-presets-dropdown select {
  width: 100%;
  padding: 12px 14px;
  margin: 0;
  height: auto;
  min-height: 44px;
  line-height: 1.2;
  box-sizing: border-box;
  font-family: inherit;
}

/* Responsivo */
@media (max-width: 600px) {
  .ev-acoes-rapidas {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================
   EDITOR DE SVG — Toolbar melhorada
   ============================================================ */

.svg-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(220, 38, 38, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 12px;
  margin: 16px 0;
  align-items: center;
  justify-content: flex-start;
}

.svg-toolbar-grupo {
  display: flex;
  gap: 4px;
  align-items: center;
  padding-right: 12px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}

.svg-toolbar-grupo:last-child {
  border-right: none;
  padding-right: 0;
}

.svg-toolbar-grupo.svg-toolbar-direita {
  margin-left: auto;
  border-right: none;
}

/* Botões de ferramentas */
.svg-tool {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  margin: 0;
  background: var(--bg);
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
  box-sizing: border-box;
}

.svg-tool:hover {
  border-color: #dc2626;
  color: #dc2626;
  transform: translateY(-1px);
}

.svg-tool.ativa {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

/* Botões com texto */
.svg-tool-texto {
  width: auto;
  min-width: auto;
  padding: 0 16px;
  font-size: 0.85rem;
  gap: 6px;
  white-space: nowrap;
}

/* Toggles (Grade / Snap) */
.svg-tool-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  margin: 0;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
  transition: all .2s;
  flex-shrink: 0;
  white-space: nowrap;
}

.svg-tool-toggle:hover {
  border-color: #dc2626;
  color: #dc2626;
}

.svg-tool-toggle input {
  accent-color: #dc2626;
  margin: 0;
  cursor: pointer;
}

/* ============================================================
   Responsivo — Desktop grande, tablet, mobile
   ============================================================ */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  .svg-toolbar {
    gap: 8px;
    padding: 10px 12px;
  }
  .svg-toolbar-grupo {
    padding-right: 8px;
    gap: 3px;
  }
  .svg-tool {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 1rem;
  }
  .svg-tool-texto {
    padding: 0 12px;
    font-size: 0.78rem;
  }
  .svg-tool-toggle {
    padding: 6px 10px;
    font-size: 0.75rem;
  }
}

/* Mobile (até 768px) */
@media (max-width: 768px) {
  .svg-toolbar {
    gap: 6px;
    padding: 8px 10px;
    justify-content: center;
  }
  .svg-toolbar-grupo {
    padding-right: 6px;
    gap: 3px;
  }
  .svg-toolbar-grupo.svg-toolbar-direita {
    margin-left: 0;
    flex-basis: 100%;
    justify-content: center;
    padding-top: 6px;
    border-top: 1px solid var(--border);
  }
  .svg-tool {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 0.95rem;
  }
  .svg-tool-texto {
    padding: 0 10px;
    font-size: 0.72rem;
  }
  .svg-tool-toggle {
    padding: 6px 10px;
    font-size: 0.7rem;
  }
}

/* Mobile pequeno (até 480px) */
@media (max-width: 480px) {
  .svg-toolbar {
    gap: 4px;
    padding: 6px 8px;
  }
  .svg-toolbar-grupo {
    padding-right: 4px;
  }
  .svg-tool {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 0.9rem;
  }
  .svg-tool-toggle span {
    display: none;  /* esconde o texto, deixa só o checkbox */
  }
  .svg-tool-toggle {
    padding: 6px 8px;
  }
  .svg-tool-texto {
    padding: 0 8px;
    font-size: 0.68rem;
  }
}
.svg-toolbar-direita {
  margin-left: auto;
}

.svg-tool {
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--bg);
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.svg-tool:hover {
  border-color: #dc2626;
  color: #dc2626;
  transform: translateY(-1px);
}
.svg-tool.ativa {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.svg-tool-texto {
  width: auto;
  padding: 0 12px;
  font-size: 0.8rem;
  gap: 4px;
}

.svg-tool-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
  transition: all .2s;
}
.svg-tool-toggle:hover {
  border-color: #dc2626;
  color: #dc2626;
}
.svg-tool-toggle input {
  accent-color: #dc2626;
}

/* Layout principal */
.svg-main {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  margin-top: 16px;
}

/* Canvas */
.svg-canvas-wrap {
  position: relative;
  background: #f3f4f6;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  overflow: auto;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.dark .svg-canvas-wrap {
  background: #0d1117;
}
.svg-canvas {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  cursor: crosshair;
  max-width: 100%;
  height: auto;
  touch-action: none;
  user-select: none;
}
.svg-canvas.modo-select {
  cursor: default;
}
.svg-canvas.modo-move {
  cursor: move;
}

.svg-info {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: 'Courier New', monospace;
  pointer-events: none;
}

/* Painel de propriedades */
.svg-props {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  align-self: start;
  position: sticky;
  top: 16px;
}
.svg-props-titulo {
  color: #b91c1c;
  font-size: 0.95rem;
  margin: 0 0 16px;
  font-weight: 800;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.svg-props-vazio {
  color: var(--text-mute);
  text-align: center;
  padding: 20px 8px;
  font-size: 0.85rem;
}

.svg-prop-label {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text);
  margin-bottom: 14px;
}

.svg-color-wrap {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 6px;
  margin-top: 6px;
}
.svg-color {
  width: 44px;
  height: 40px;
  padding: 2px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
}
.svg-color:focus {
  border-color: #dc2626;
  outline: none;
}

.svg-input-hex,
.svg-input-num,
.svg-input {
  width: 100%;
  padding: 8px 10px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  box-sizing: border-box;
}
.svg-input-hex:focus,
.svg-input-num:focus,
.svg-input:focus {
  border-color: #dc2626;
  outline: none;
}
.svg-input {
  font-family: inherit;
  min-height: 60px;
  resize: vertical;
}

.svg-prop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.svg-prop-grid .svg-prop-label {
  margin-bottom: 0;
}

/* Range */
.svg-prop-label input[type="range"] {
  width: 100%;
  margin-top: 6px;
  accent-color: #dc2626;
}

/* Elementos SVG */
.svg-elemento {
  cursor: pointer;
  transition: filter .15s;
}
.svg-elemento:hover {
  filter: brightness(1.1) drop-shadow(0 0 4px rgba(220, 38, 38, 0.5));
}
.svg-elemento.selecionado {
  filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.9));
}
.svg-elemento.selecionado::after {
  content: '';
}

/* Handles de seleção */
.svg-handle {
  fill: #fff;
  stroke: #dc2626;
  stroke-width: 2;
  cursor: nwse-resize;
}

/* Responsivo */
@media (max-width: 900px) {
  .svg-main {
    grid-template-columns: 1fr;
  }
  .svg-props {
    position: static;
  }
}

@media (max-width: 600px) {
  .svg-toolbar {
    padding: 8px;
    gap: 4px;
  }
  .svg-toolbar-grupo {
    padding-right: 4px;
    gap: 2px;
  }
  .svg-tool {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  .svg-tool-texto {
    font-size: 0.7rem;
    padding: 0 8px;
  }
  .svg-toolbar-direita {
    margin-left: 0;
  }
  .svg-canvas-wrap {
    padding: 8px;
    min-height: 280px;
  }
  .svg-props {
    padding: 12px;
  }
}

/* Dark mode */
body.dark .svg-canvas {
  background: #161b22;
}
body.dark #svgFundo {
  fill: #161b22;
}
body.dark .svg-info {
  background: rgba(255, 255, 255, 0.15);
}


/* ============================================================
   (79) QR CODE — Abas melhoradas
   ============================================================ */

.qr-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border);
  justify-content: flex-start;
  align-items: center;
}

.qr-aba {
  padding: 10px 16px;
  margin: 0;
  background: var(--bg);
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
}

.qr-aba:hover {
  border-color: #dc2626;
  color: #dc2626;
  transform: translateY(-1px);
}

.qr-aba.ativa {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* ============================================================
   Responsivo das abas
   ============================================================ */

/* Tablet */
@media (max-width: 900px) {
  .qr-abas {
    gap: 6px;
  }
  .qr-aba {
    padding: 9px 14px;
    font-size: 0.8rem;
  }
}

/* Mobile grande */
@media (max-width: 600px) {
  .qr-abas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding-bottom: 12px;
  }
  .qr-aba {
    padding: 10px 6px;
    font-size: 0.72rem;
    text-align: center;
    justify-content: center;
    white-space: normal;
    line-height: 1.2;
    min-height: 52px;
  }
}

/* Mobile pequeno */
@media (max-width: 400px) {
  .qr-abas {
    grid-template-columns: repeat(2, 1fr);
  }
  .qr-aba {
    padding: 10px 8px;
    font-size: 0.75rem;
    min-height: 46px;
  }
}
.qr-aba.ativa {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

/* Painéis */
.qr-painel {
  animation: qrFadeIn .3s ease;
  margin-bottom: 24px;
}
@keyframes qrFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.qr-label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 12px;
}

.qr-input,
.qr-select,
.qr-textarea,
.qr-input-file {
  width: 100%;
  padding: 12px 14px;
  margin-top: 6px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  box-sizing: border-box;
}
.qr-input:focus,
.qr-select:focus,
.qr-textarea:focus {
  border-color: #dc2626;
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.qr-textarea {
  min-height: 90px;
  resize: vertical;
}

.qr-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* ============================================================
   (79) QR CODE — Grid dos campos de personalização
   ============================================================ */

.qr-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.qr-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: start;
}

.qr-color {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 4px;
  margin-top: 6px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
  box-sizing: border-box;
}

/* Responsivo dos grids */
@media (max-width: 768px) {
  .qr-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .qr-grid-2,
  .qr-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Preview */
.qr-preview-wrap {
  margin-bottom: 24px;
}
.qr-preview-box {
  background: #f3f4f6;
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.dark .qr-preview-box {
  background: #0d1117;
}
.qr-preview {
  display: inline-block;
  background: #fff;
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  position: relative;
}
.qr-preview canvas,
.qr-preview img {
  display: block;
  max-width: 100%;
  height: auto;
}
.qr-preview-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 6px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.qr-preview-logo img {
  display: block;
  max-width: 100%;
  height: auto;
}
.qr-preview-vazio {
  color: var(--text-mute);
  font-size: 0.9rem;
}

/* ============================================================
   (79) QR CODE — Ações melhoradas
   ============================================================ */

.qr-acoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.qr-btn-primario {
  padding: 14px 20px;
  margin: 0;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  box-sizing: border-box;
}

.qr-btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4);
}

.qr-btn-secundario {
  padding: 14px 20px;
  margin: 0;
  background: transparent;
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  box-sizing: border-box;
}

.qr-btn-secundario:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

/* Responsivo das ações */
@media (max-width: 600px) {
  .qr-acoes {
    grid-template-columns: 1fr;
  }
  .qr-btn-primario,
  .qr-btn-secundario {
    padding: 14px 16px;
    font-size: 0.85rem;
  }
}

/* Histórico */
.qr-historico-wrap {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid var(--border);
}
.qr-historico {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
}
.qr-historico-vazio {
  color: var(--text-mute);
  font-size: 0.85rem;
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
}
.qr-historico-item {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
.qr-historico-item:hover {
  border-color: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.15);
}
.qr-historico-item canvas,
.qr-historico-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.qr-historico-tipo {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  color: #dc2626;
  text-transform: uppercase;
  margin-top: 6px;
}

/* Toast */
.qr-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #10b981;
  color: #fff;
  padding: 14px 24px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
  font-family: system-ui, sans-serif;
}
.qr-toast--visivel {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Responsivo */
@media (max-width: 768px) {
  .qr-aba {
    padding: 8px 12px;
    font-size: 0.78rem;
  }
}

@media (max-width: 600px) {
  .qr-abas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .qr-aba {
    padding: 8px 10px;
    font-size: 0.75rem;
  }
  .qr-grid-2,
  .qr-grid-3 {
    grid-template-columns: 1fr;
  }
  .qr-preview-box {
    padding: 16px;
    min-height: 220px;
  }
  .qr-acoes {
    grid-template-columns: 1fr;
  }
  .qr-historico {
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
  }
}

/* Dark mode */
body.dark .qr-preview {
  background: #fff;
}
body.dark .qr-historico-item {
  background: #161b22;
}


/* ============================================================
   (80) 📊 GERADOR DE FORMULÁRIOS — PRO
   ============================================================ */

/* Títulos */
.gf-secao-titulo {
  color: #b91c1c;
  font-size: 1rem;
  margin: 0 0 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gf-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  background: #dc2626;
  color: #fff;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
}

/* ============================================================
   BOTÕES DE ADICIONAR
   ============================================================ */

.gf-add-wrap {
  margin: 20px 0 24px;
}

.gf-add-botoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.gf-add-btn {
  padding: 14px 12px;
  margin: 0;
  background: var(--bg);
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  box-sizing: border-box;
  min-height: 52px;
}

.gf-add-btn span {
  font-size: 1.15rem;
  flex-shrink: 0;
}

.gf-add-btn:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.12);
}

/* ============================================================
   LISTA DE CAMPOS
   ============================================================ */

.gf-lista-wrap {
  margin-bottom: 24px;
}

.gf-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gf-vazio {
  color: var(--text-mute);
  font-size: 0.9rem;
  text-align: center;
  padding: 30px 20px;
  background: var(--primary-soft);
  border: 2px dashed var(--border);
  border-radius: 12px;
  margin: 0;
}

/* Card de campo */
.gf-campo {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gf-campo:hover {
  border-color: #dc2626;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.08);
}

.gf-campo-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gf-campo-icone {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.gf-campo-tipo {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  white-space: nowrap;
}

.gf-campo-titulo {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--text);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gf-campo-acoes {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.gf-campo-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  background: var(--bg);
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  font-family: inherit;
  box-sizing: border-box;
}

.gf-campo-btn:hover:not(:disabled) {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

.gf-campo-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Edição */
.gf-campo-edicao {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.gf-campo-edicao.full {
  grid-template-columns: 1fr;
}

.gf-campo-edicao-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 6px;
}

.gf-checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-soft);
  cursor: pointer;
}

.gf-checkbox-inline input {
  accent-color: #dc2626;
}

/* Labels e inputs */
.gf-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 14px;
}

.gf-input,
.gf-select,
.gf-textarea,
.gf-color {
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.gf-color {
  padding: 4px;
  height: 44px;
  cursor: pointer;
}

.gf-textarea {
  min-height: 80px;
  resize: vertical;
}

.gf-input:focus,
.gf-select:focus,
.gf-textarea:focus {
  border-color: #dc2626;
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.gf-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

/* Checkbox grande */
.gf-checkbox-grande {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-soft);
  transition: all .2s;
}

.gf-checkbox-grande:hover {
  border-color: #dc2626;
  color: #dc2626;
}

.gf-checkbox-grande input {
  accent-color: #dc2626;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Configurações */
.gf-config-wrap {
  background: rgba(220, 38, 38, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

/* ============================================================
   PREVIEW
   ============================================================ */

.gf-preview-wrap {
  margin-bottom: 24px;
}

.gf-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.gf-preview-header .gf-secao-titulo {
  margin: 0;
}

.gf-preview-acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gf-btn-mini {
  padding: 9px 16px;
  margin: 0;
  background: var(--bg);
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
}

.gf-btn-mini:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.05);
}

.gf-preview {
  background: #f3f4f6;
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  min-height: 300px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

body.dark .gf-preview {
  background: #0d1117;
}

.gf-preview-form {
  width: 100%;
  max-width: 500px;
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all .3s;
  box-sizing: border-box;
}

.gf-preview-form.dark {
  background: #161b22;
  color: #e5e7eb;
}

.gf-preview-form h3 {
  color: #dc2626;
  margin: 0 0 20px;
  font-size: 1.15rem;
  font-weight: 800;
}

.gf-preview-form.dark h3 {
  color: #f87171;
}

.gf-preview-form .campo {
  margin-bottom: 16px;
}

.gf-preview-form label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: #374151;
  margin-bottom: 6px;
}

.gf-preview-form.dark label {
  color: #e5e7eb;
}

.gf-preview-form input[type="text"],
.gf-preview-form input[type="email"],
.gf-preview-form input[type="tel"],
.gf-preview-form input[type="number"],
.gf-preview-form input[type="date"],
.gf-preview-form input[type="file"],
.gf-preview-form select,
.gf-preview-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
  transition: border-color .2s;
}

.gf-preview-form.dark input,
.gf-preview-form.dark select,
.gf-preview-form.dark textarea {
  background: #0d1117;
  color: #e5e7eb;
  border-color: #30363d;
}

.gf-preview-form input:focus,
.gf-preview-form select:focus,
.gf-preview-form textarea:focus {
  outline: none;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.gf-preview-form .opcoes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gf-preview-form .opcao-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #374151;
  cursor: pointer;
}

.gf-preview-form.dark .opcao-item {
  color: #e5e7eb;
}

.gf-preview-form .opcao-item input {
  accent-color: #dc2626;
  cursor: pointer;
}

.gf-preview-form .btn-enviar {
  width: 100%;
  padding: 14px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  margin-top: 8px;
}

.gf-preview-form .btn-enviar:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.gf-preview-form .obrigatorio {
  color: #dc2626;
  margin-left: 2px;
}

/* ============================================================
   TOAST
   ============================================================ */

.gf-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #10b981;
  color: #fff;
  padding: 14px 24px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
  font-family: system-ui, sans-serif;
}

.gf-toast--visivel {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

/* Tablet */
@media (max-width: 900px) {
  .gf-add-botoes {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .gf-add-btn {
    padding: 12px 10px;
    font-size: 0.78rem;
    min-height: 48px;
  }
  .gf-add-btn span {
    font-size: 1rem;
  }
}

/* Mobile grande */
@media (max-width: 600px) {
  .gf-add-botoes {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .gf-add-btn {
    padding: 10px 6px;
    font-size: 0.72rem;
    min-height: 60px;
    flex-direction: column;
    gap: 4px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
  .gf-add-btn span {
    font-size: 1.4rem;
  }
  .gf-campo-edicao {
    grid-template-columns: 1fr;
  }
  .gf-grid-2 {
    grid-template-columns: 1fr;
  }
  .gf-preview {
    padding: 16px;
  }
  .gf-preview-form {
    padding: 18px;
  }
  .gf-preview-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .gf-preview-acoes {
    width: 100%;
  }
  .gf-btn-mini {
    flex: 1;
    justify-content: center;
  }
}

/* Mobile pequeno */
@media (max-width: 400px) {
  .gf-add-botoes {
    grid-template-columns: repeat(2, 1fr);
  }
  .gf-add-btn {
    flex-direction: row;
    min-height: 48px;
    padding: 10px 8px;
  }
  .gf-add-btn span {
    font-size: 1.1rem;
  }
}


/* ============================================================
   PAINEL — Botões de abrir/fechar todas
   ============================================================ */
.painel-controles {
  display: flex;
  gap: 8px;
  padding: 6px 6px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 12px;
  margin: 6px 0;
  justify-content: flex-end;
  flex-wrap: wrap;
  transform: translateY(-22px);
}

.painel-btn {
  padding: 10px 18px;
  margin: 0;
  background: var(--bg);
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.painel-btn:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.05);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .painel-controles {
    justify-content: center;
  }
  .painel-btn {
    flex: 1;
    justify-content: center;
  }
}


/* ============================================================
   SEÇÕES — Animação em cascata
   ============================================================ */

section.secao {
  transition: all .3s ease;
}

section.secao .secao-body {
  transition: all .3s ease;
}

section.secao .secao-body {
  background: #ffffff !important;
}

/* Efeito suave quando abre */
section.secao.aberta {
  animation: secaoAbrindo .4s ease;
}

@keyframes secaoAbrindo {
  from {
    opacity: 0.7;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   BOTÃO VOLTAR AO TOPO — Fixo na base centralizada
   ============================================================ */

.btn-topo {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);

  width: 56px;
  height: 56px;
  padding: 0;
  margin: 0;

  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  border: none;
  border-radius: 50%;

  cursor: pointer;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 800;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 8px 24px rgba(220, 38, 38, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.15);

  z-index: 9998;

  opacity: 0;
  pointer-events: none;

  transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
}

/* Quando visível */
.btn-topo.visivel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.btn-topo:hover {
  transform: translateX(-50%) translateY(-4px) scale(1.05);
  box-shadow:
    0 12px 32px rgba(220, 38, 38, 0.55),
    0 6px 16px rgba(0, 0, 0, 0.2);
}

.btn-topo:active {
  transform: translateX(-50%) translateY(-1px) scale(0.98);
}

.btn-topo-seta {
  display: block;
  line-height: 1;
  transform: translateY(-1px);
}

/* Mobile — fica menor e mais acima */
@media (max-width: 600px) {
  .btn-topo {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    bottom: 16px;
  }
}

/* Dark mode */
body.dark .btn-topo {
  box-shadow:
    0 8px 24px rgba(220, 38, 38, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   EDITOR DE VÍDEO — Borda + Redimensionar (v8)
   ============================================================ */

/* Botões em grid 4 colunas pra presets */
.ev-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.ev-grid-4 .ev-btn-secundario {
  width: 100%;
  padding: 10px;
  font-size: 0.8rem;
  margin: 0;
}

/* Checkbox grande */
.ev-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  margin-bottom: 14px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-soft);
  transition: all .2s;
}

.ev-check:hover {
  border-color: #dc2626;
  color: #dc2626;
}

.ev-check input {
  accent-color: #dc2626;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Input de arquivo */
.ev-input-file {
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  box-sizing: border-box;
}

.ev-input-file:focus {
  border-color: #dc2626;
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Color input */
.ev-label input[type="color"].ev-input {
  padding: 4px;
  height: 44px;
  cursor: pointer;
}

/* Responsivo */
@media (max-width: 600px) {
  .ev-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================
   EDITOR DE VÍDEO — Painel FILTROS
   ============================================================ */

/* Grid dos filtros */
.ev-filtros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

/* Card de cada filtro */
.ev-filtro-card {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
  overflow: hidden;
}

.ev-filtro-card:hover {
  border-color: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.15);
}

.ev-filtro-card.ativo {
  border-color: #dc2626;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(249, 115, 22, 0.08) 100%);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.25);
}

/* Thumbnail do filtro */
.ev-filtro-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  position: relative;
  margin-bottom: 4px;
}

.ev-filtro-thumb img,
.ev-filtro-thumb canvas,
.ev-filtro-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback se não tiver vídeo carregado */
.ev-filtro-thumb-sem-video {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
}

/* Nome do filtro */
.ev-filtro-nome {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ev-filtro-card.ativo .ev-filtro-nome {
  color: #dc2626;
}

/* Intensidade */
.ev-filtros-intensidade {
  padding: 14px;
  background: rgba(220, 38, 38, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.15);
  border-radius: 12px;
  margin-bottom: 16px;
}

/* Responsivo */
@media (max-width: 768px) {
  .ev-filtros-grid {
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    gap: 6px;
  }
  .ev-filtro-nome {
    font-size: 0.62rem;
  }
}

@media (max-width: 480px) {
  .ev-filtros-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .ev-filtro-nome {
    font-size: 0.58rem;
  }
}


/* ============================================================
   EDITOR DE VÍDEO — Painel SOBREPOR
   ============================================================ */

/* Info da imagem carregada */
.ev-sob-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 0.85rem;
}

.ev-sob-info-icone {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.ev-sob-info-nome {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Preview da imagem */
.ev-sob-preview-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  margin-bottom: 16px;
  min-height: 100px;
}

body.dark .ev-sob-preview-wrap {
  background: rgba(255, 255, 255, 0.05);
}

.ev-sob-preview {
  max-width: 100%;
  max-height: 120px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Grid de posições 3x3 */
.ev-sob-posicoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 260px;
  margin: 0 auto 20px;
}

.ev-sob-pos {
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  background: var(--bg);
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2rem;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.ev-sob-pos:hover {
  border-color: #dc2626;
  color: #dc2626;
  transform: scale(1.05);
}

.ev-sob-pos.ativo {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(249, 115, 22, 0.15) 100%);
  border-color: #dc2626;
  color: #dc2626;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

/* Opções de tempo */
.ev-sob-tempos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.ev-sob-tempo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-soft);
  transition: all .2s;
  user-select: none;
}

.ev-sob-tempo:hover {
  border-color: #dc2626;
  color: #dc2626;
}

.ev-sob-tempo:has(input:checked) {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.ev-sob-tempo input {
  accent-color: #dc2626;
  cursor: pointer;
}

/* Responsivo */
@media (max-width: 600px) {
  .ev-sob-posicoes {
    max-width: 220px;
  }
  .ev-sob-tempos {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   EDITOR DE VÍDEO — Botão fechar abas
   ============================================================ */

.ev-abas-fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  margin: 0 8px 8px 0;
  background: var(--bg);
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  white-space: nowrap;
  vertical-align: middle;
}

.ev-abas-fechar:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.05);
}

.ev-abas-fechar:active {
  transform: scale(0.96);
}

/* Versão dentro do .ev-abas (só ícone) */
.ev-aba-fechar {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  border-color: #dc2626;
  font-weight: 900;
  padding: 10px 12px;
}

.ev-aba-fechar:hover {
  background: #dc2626;
  color: #fff;
}

@media (max-width: 600px) {
  .ev-abas-fechar {
    width: 100%;
    margin-bottom: 8px;
  }
}


/* ============================================================
   EDITOR DE VÍDEO — Painel MÚSICA
   ============================================================ */

/* Info da música carregada */
.ev-mus-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  margin: 10px 0 12px;
  font-size: 0.85rem;
  box-sizing: border-box;
}

.ev-mus-info-icone {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}

.ev-mus-info-nome {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ev-mus-info .ev-btn-mini {
  flex-shrink: 0;
  margin: 0;
}

/* Player de preview */
.ev-mus-preview-wrap {
  padding: 12px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  margin-bottom: 16px;
  box-sizing: border-box;
}

body.dark .ev-mus-preview-wrap {
  background: rgba(255, 255, 255, 0.04);
}

.ev-mus-preview-wrap audio {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
  border-radius: 8px;
}

/* Modos */
.ev-mus-modos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.ev-mus-modo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-soft);
  transition: all .2s;
  user-select: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
}

.ev-mus-modo:hover {
  border-color: #dc2626;
  color: #dc2626;
}

.ev-mus-modo:has(input:checked),
.ev-mus-modo.selecionado {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.ev-mus-modo input {
  accent-color: #dc2626;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.ev-mus-modo span {
  flex: 1;
  min-width: 0;
}

/* Grid dos volumes — mesmo formato do resto */
.ev-painel[data-painel="musica"] .ev-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.ev-painel[data-painel="musica"] .ev-grid-2 .ev-label {
  margin-bottom: 0;
}

.ev-painel[data-painel="musica"] .ev-grid-2 input[type="range"] {
  width: 100%;
  margin-top: 6px;
  accent-color: #dc2626;
}

/* Checkbox grande (loop + fade) */
.ev-painel[data-painel="musica"] .ev-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-soft);
  transition: all .2s;
  box-sizing: border-box;
  width: 100%;
}

.ev-painel[data-painel="musica"] .ev-check:hover {
  border-color: #dc2626;
  color: #dc2626;
}

.ev-painel[data-painel="musica"] .ev-check input {
  accent-color: #dc2626;
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

/* Botão aplicar */
.ev-painel[data-painel="musica"] .ev-btn-primario {
  width: 100%;
  margin-top: 8px;
}

/* Responsivo */
@media (max-width: 600px) {
  .ev-mus-modo {
    font-size: 0.78rem;
    padding: 10px 12px;
  }

  .ev-painel[data-painel="musica"] .ev-grid-2 {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   FIX — Centralizar os 3 modos de música
   ============================================================ */

.ev-painel[data-painel="musica"] .ev-mus-modos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 auto 16px;
  max-width: 520px;
  width: 100%;
}

.ev-painel[data-painel="musica"] .ev-mus-modo {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}


/* Centralizar os volumes também */
.ev-painel[data-painel="musica"] .ev-grid-2 {
  max-width: 520px;
  margin: 0 auto 16px;
}

/* Centralizar os checkboxes */
.ev-painel[data-painel="musica"] .ev-check {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Centralizar o botão aplicar */
.ev-painel[data-painel="musica"] .ev-btn-primario {
  max-width: 520px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
}


/* ============================================================
   FIX — Radio + label dos modos de música
   ============================================================ */

.ev-painel[data-painel="musica"] .ev-mus-modo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-soft);
  transition: all .2s;
  box-sizing: border-box;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
}

.ev-painel[data-painel="musica"] .ev-mus-modo input[type="radio"] {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  accent-color: #dc2626;
  cursor: pointer;
  position: static !important;
  order: 0;
}

.ev-painel[data-painel="musica"] .ev-mus-modo span {
  display: inline-block !important;
  flex: 1;
  min-width: 0;
  order: 1;
}

/* ============================================================
   FIX — Botão aplicar música + input de arquivo
   ============================================================ */

/* Input de arquivo estilizado */
.ev-painel[data-painel="musica"] .ev-input-file {
  display: block;
  width: 100%;
  padding: 14px 18px;
  margin-top: 8px;
  background: var(--bg);
  color: var(--text-soft);
  border: 2px dashed var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
  transition: all .2s;
}

.ev-painel[data-painel="musica"] .ev-input-file:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.05);
}

.ev-painel[data-painel="musica"] .ev-input-file::file-selector-button {
  padding: 8px 16px;
  margin-right: 12px;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}

.ev-painel[data-painel="musica"] .ev-input-file::file-selector-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* Botão aplicar música */
.ev-painel[data-painel="musica"] .ev-btn-primario {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 16px auto 0;
  padding: 14px 20px;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  box-sizing: border-box;
  text-align: center;
}

.ev-painel[data-painel="musica"] .ev-btn-primario:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4);
}

.ev-painel[data-painel="musica"] .ev-btn-primario:disabled {
  background: var(--border);
  color: var(--text-mute);
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
  box-shadow: none;
}

/* Mobile */
@media (max-width: 600px) {
  .ev-painel[data-painel="musica"] .ev-input-file {
    font-size: 0.82rem;
    padding: 12px 14px;
  }

  .ev-painel[data-painel="musica"] .ev-input-file::file-selector-button {
    padding: 6px 12px;
    font-size: 0.78rem;
    margin-right: 8px;
  }

  .ev-painel[data-painel="musica"] .ev-btn-primario {
    font-size: 0.88rem;
    padding: 12px 16px;
  }
}


/* ============================================================
   (79) QR CODE — Input de arquivo (logo)
   ============================================================ */

/* Input de arquivo estilizado */
#geradorQRPro input[type="file"],
.qr-input-file {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 14px 16px !important;
  margin-top: 8px !important;
  background: var(--bg) !important;
  color: var(--text-soft) !important;
  border: 2px dashed var(--border) !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all .2s !important;
  line-height: 1.4 !important;
}

/* Hover */
#geradorQRPro input[type="file"]:hover,
.qr-input-file:hover {
  border-color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.04) !important;
  color: #dc2626 !important;
}

/* Foco */
#geradorQRPro input[type="file"]:focus,
.qr-input-file:focus {
  border-color: #dc2626 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* Botão "Escolher arquivo" (nativo do navegador) */
#geradorQRPro input[type="file"]::file-selector-button,
.qr-input-file::file-selector-button {
  padding: 8px 16px !important;
  margin-right: 12px !important;
  background: linear-gradient(135deg, #dc2626, #f97316) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all .2s !important;
}

#geradorQRPro input[type="file"]::file-selector-button:hover,
.qr-input-file::file-selector-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

/* Firefox: pseudo-elemento antigo */
#geradorQRPro input[type="file"]::-webkit-file-upload-button,
.qr-input-file::-webkit-file-upload-button {
  padding: 8px 16px !important;
  margin-right: 12px !important;
  background: linear-gradient(135deg, #dc2626, #f97316) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all .2s !important;
}

/* Info do logo após upload */
#geradorQRPro .qr-logo-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  margin-top: 10px !important;
  background: var(--bg) !important;
  border: 2px solid var(--border) !important;
  border-radius: 10px !important;
  font-size: 0.85rem !important;
  box-sizing: border-box !important;
}

#geradorQRPro .qr-logo-info span {
  flex: 1 !important;
  min-width: 0 !important;
  font-weight: 700 !important;
  color: var(--text-soft) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#geradorQRPro .qr-logo-info .qr-btn-mini {
  flex-shrink: 0 !important;
}

/* Label que envolve o input */
#geradorQRPro .qr-label {
  display: block !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: var(--text) !important;
  margin-bottom: 12px !important;
}

/* Mobile */
@media (max-width: 600px) {
  #geradorQRPro input[type="file"],
  .qr-input-file {
    font-size: 0.82rem !important;
    padding: 12px 14px !important;
  }

  #geradorQRPro input[type="file"]::file-selector-button,
  .qr-input-file::file-selector-button {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
    margin-right: 8px !important;
  }
}


/* ============================================================
   (79) QR CODE — Histórico melhorado
   ============================================================ */

#geradorQRPro .qr-historico-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

#geradorQRPro .qr-historico-titulo {
  font-weight: 800;
  color: #b91c1c;
  font-size: 0.9rem;
}

#geradorQRPro .qr-historico-limpar {
  padding: 8px 14px;
  background: var(--bg);
  color: var(--text-soft);
  border: 2px solid var(--border);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}

#geradorQRPro .qr-historico-limpar:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

#geradorQRPro .qr-historico-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
}

#geradorQRPro .qr-historico-item {
  position: relative;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  transition: all .2s;
  text-align: center;
}

#geradorQRPro .qr-historico-item:hover {
  border-color: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.15);
}

#geradorQRPro .qr-historico-deletar {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  padding: 0;
  background: #dc2626;
  color: #fff;
  border: 2px solid var(--card);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all .2s;
}

#geradorQRPro .qr-historico-deletar:hover {
  background: #b91c1c;
  transform: scale(1.15);
}

#geradorQRPro .qr-mini-preview {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 4px;
  cursor: pointer;
}

#geradorQRPro .qr-mini-preview canvas,
#geradorQRPro .qr-mini-preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

#geradorQRPro .qr-historico-tipo {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  color: #dc2626;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ============================================================
   (79) QR CODE — Histórico lado a lado (FIX)
   ============================================================ */

#geradorQRPro .qr-historico-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

#geradorQRPro .qr-historico-grid .qr-historico-item {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Se o histórico estiver sem o wrapper .qr-historico-grid, aplica direto */
#geradorQRPro .qr-historico {
  display: block !important;
  width: 100% !important;
}

/* Fallback: se o histórico tiver os items direto (sem grid wrapper) */
#geradorQRPro .qr-historico > .qr-historico-item {
  display: inline-block !important;
  width: calc(25% - 12px) !important;
  margin: 6px !important;
  vertical-align: top !important;
  min-width: 80px !important;
  max-width: 120px !important;
}

/* Mobile */
@media (max-width: 600px) {
  #geradorQRPro .qr-historico-grid {
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)) !important;
  }
  #geradorQRPro .qr-historico > .qr-historico-item {
    width: calc(33.333% - 12px) !important;
  }
}


/* ============================================================
   FIX — Centralizar radio buttons do painel PROGRESSO
   ============================================================ */

/* Posições (topo/base) */
.ev-painel[data-painel="progresso"] .ev-prog-posicoes {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 0 auto 16px !important;
  max-width: 520px !important;
  width: 100% !important;
}

.ev-painel[data-painel="progresso"] .ev-prog-pos {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  background: var(--bg) !important;
  border: 2px solid var(--border) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--text-soft) !important;
  transition: all .2s !important;
  user-select: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

.ev-painel[data-painel="progresso"] .ev-prog-pos input[type="radio"] {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  accent-color: #dc2626 !important;
  cursor: pointer !important;
  position: static !important;
  order: 0 !important;
}

.ev-painel[data-painel="progresso"] .ev-prog-pos span {
  display: inline-block !important;
  flex: 1 !important;
  min-width: 0 !important;
  order: 1 !important;
  text-align: left !important;
}

/* Timing (sempre/início/fim) */
.ev-painel[data-painel="progresso"] .ev-prog-timing {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 0 auto 16px !important;
  max-width: 520px !important;
  width: 100% !important;
}

.ev-painel[data-painel="progresso"] .ev-prog-tempo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  background: var(--bg) !important;
  border: 2px solid var(--border) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--text-soft) !important;
  transition: all .2s !important;
  user-select: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

.ev-painel[data-painel="progresso"] .ev-prog-tempo input[type="radio"] {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  accent-color: #dc2626 !important;
  cursor: pointer !important;
  position: static !important;
  order: 0 !important;
}

.ev-painel[data-painel="progresso"] .ev-prog-tempo span {
  display: inline-block !important;
  flex: 1 !important;
  min-width: 0 !important;
  order: 1 !important;
  text-align: left !important;
}

/* Hover */
.ev-painel[data-painel="progresso"] .ev-prog-pos:hover,
.ev-painel[data-painel="progresso"] .ev-prog-tempo:hover {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
}

/* Estado marcado */
.ev-painel[data-painel="progresso"] .ev-prog-pos:has(input:checked),
.ev-painel[data-painel="progresso"] .ev-prog-tempo:has(input:checked) {
  border-color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.08) !important;
  color: #dc2626 !important;
}

/* Grid de cores */
.ev-painel[data-painel="progresso"] .ev-prog-cores {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 6px !important;
  margin: 0 auto 16px !important;
  max-width: 520px !important;
  width: 100% !important;
}

.ev-painel[data-painel="progresso"] .ev-prog-cor {
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 3px solid transparent !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all .2s !important;
  box-sizing: border-box !important;
  position: relative !important;
  min-height: 44px !important;
}

/* Responsivo */
@media (max-width: 768px) {
  .ev-painel[data-painel="progresso"] .ev-prog-cores {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .ev-painel[data-painel="progresso"] .ev-prog-timing {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .ev-painel[data-painel="progresso"] .ev-prog-posicoes {
    grid-template-columns: 1fr !important;
  }

  .ev-painel[data-painel="progresso"] .ev-prog-pos,
  .ev-painel[data-painel="progresso"] .ev-prog-tempo {
    justify-content: flex-start !important;
  }
}


/* ============================================================
   EDITOR DE VÍDEO — Painel INTRO/OUTRO
   ============================================================ */

/* Tipo (intro/outro) */
.ev-io-tipo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}

.ev-io-tipo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-soft);
  transition: all .2s;
  user-select: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
}

.ev-io-tipo-item:hover {
  border-color: #dc2626;
  color: #dc2626;
}

.ev-io-tipo-item.ativo,
.ev-io-tipo-item:has(input:checked) {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.ev-io-tipo-item input {
  display: none;
}

/* Modos (criar/upload) */
.ev-io-modos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.ev-io-modo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-soft);
  transition: all .2s;
  user-select: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
}

.ev-io-modo:hover {
  border-color: #dc2626;
  color: #dc2626;
}

.ev-io-modo:has(input:checked) {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.ev-io-modo input {
  display: none;
}

/* Grid de templates */
.ev-io-templates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.ev-io-template {
  padding: 0;
  margin: 0;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

.ev-io-template:hover {
  border-color: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.15);
}

.ev-io-template.ativo {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

.ev-io-template-preview {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  padding: 6px;
  box-sizing: border-box;
}

/* Info do logo/upload */
.ev-io-logo-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  box-sizing: border-box;
}

.ev-io-logo-icone {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.ev-io-logo-nome {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cores */
.ev-io-cores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

/* Preview */
.ev-io-preview-box {
  background: #f3f4f6;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  margin-bottom: 16px;
}

body.dark .ev-io-preview-box {
  background: #0d1117;
}

.ev-io-canvas {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: 8px;
  background: #000;
  margin: 0 auto;
}

/* Responsivo */
@media (max-width: 768px) {
  .ev-io-templates {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .ev-io-template-preview {
    font-size: 0.55rem !important;
  }
}

@media (max-width: 480px) {
  .ev-io-tipo,
  .ev-io-modos {
    grid-template-columns: 1fr;
  }

  .ev-io-templates {
    grid-template-columns: repeat(2, 1fr);
  }

  .ev-io-cores {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   EDITOR DE VÍDEO — Input file do INTRO/OUTRO
   (mesmo padrão visual dos outros inputs)
   ============================================================ */

.ev-painel[data-painel="introoutro"] input[type="file"],
.ev-painel[data-painel="introoutro"] .ev-input-file {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 14px 16px !important;
  margin-top: 8px !important;
  background: var(--bg) !important;
  color: var(--text-soft) !important;
  border: 2px dashed var(--border) !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all .2s !important;
  line-height: 1.4 !important;
}

.ev-painel[data-painel="introoutro"] input[type="file"]:hover,
.ev-painel[data-painel="introoutro"] .ev-input-file:hover {
  border-color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.04) !important;
  color: #dc2626 !important;
}

.ev-painel[data-painel="introoutro"] input[type="file"]:focus,
.ev-painel[data-painel="introoutro"] .ev-input-file:focus {
  border-color: #dc2626 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* Botão "Escolher arquivo" nativo */
.ev-painel[data-painel="introoutro"] input[type="file"]::file-selector-button {
  padding: 8px 16px !important;
  margin-right: 12px !important;
  background: linear-gradient(135deg, #dc2626, #f97316) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all .2s !important;
}

.ev-painel[data-painel="introoutro"] input[type="file"]::file-selector-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

/* Fallback pra navegadores antigos */
.ev-painel[data-painel="introoutro"] input[type="file"]::-webkit-file-upload-button {
  padding: 8px 16px !important;
  margin-right: 12px !important;
  background: linear-gradient(135deg, #dc2626, #f97316) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all .2s !important;
}

/* Mobile */
@media (max-width: 600px) {
  .ev-painel[data-painel="introoutro"] input[type="file"],
  .ev-painel[data-painel="introoutro"] .ev-input-file {
    font-size: 0.82rem !important;
    padding: 12px 14px !important;
  }

  .ev-painel[data-painel="introoutro"] input[type="file"]::file-selector-button {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
    margin-right: 8px !important;
  }
}


/* ============================================================
   EDITOR DE VÍDEO — Canvas do Intro/Outro (responsivo vertical)
   ============================================================ */

.ev-io-preview-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  background: #f3f4f6;
  border: 2px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
  min-height: 200px;
  overflow: hidden;
}

body.dark .ev-io-preview-box {
  background: #0d1117;
}

.ev-io-canvas {
  display: block;
  max-width: 100%;
  max-height: 500px;
  width: auto;
  height: auto;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

@media (max-width: 600px) {
  .ev-io-canvas {
    max-height: 320px;
  }
}


/* ============================================================
   🔥 OVERRIDE FINAL — ABAS DO EDITOR DE VÍDEO
   Cola no FINAL do CSS. Sobrescreve tudo com !important.
   ============================================================ */

/* Container geral: empilha os grupos verticalmente, pouco espaço */
#evEditor .ev-abas {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 12px !important;
  margin-bottom: 16px !important;
}

/* Botão "Fechar abas" no topo, alinhado à direita */
#evEditor .ev-abas > .ev-abas-fechar {
  align-self: flex-end !important;
  margin: 0 0 6px 0 !important;
}

/* Cada fileira: GRID com 7 colunas fixas */
#evEditor .ev-aba-grupo {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  grid-auto-rows: 36px !important;      /* altura fixa de cada linha */
  gap: 6px !important;
  padding: 0 0 4px 0 !important;
  margin: 0 !important;
  border-bottom: 1px dashed var(--border) !important;
  align-items: stretch !important;
}

/* Último grupo: sem linha embaixo */
#evEditor .ev-aba-grupo:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Botões: altura fixa, largura 100% da célula */
#evEditor .ev-aba-grupo .ev-aba {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  font-size: 0.8rem !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  align-self: stretch !important;
}

/* Último botão do grupo 3 (Dimensão): ocupa 2 colunas */
#evEditor .ev-aba-grupo:last-child .ev-aba:last-child {
  grid-column: span 2 !important;
}

/* Mobile: 4 colunas */
@media (max-width: 700px) {
  #evEditor .ev-aba-grupo {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  #evEditor .ev-aba-grupo:last-child .ev-aba:last-child {
    grid-column: span 1 !important;
  }
}

/* Mobile pequeno: 3 colunas */
@media (max-width: 480px) {
  #evEditor .ev-aba-grupo {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #evEditor .ev-aba-grupo .ev-aba {
    font-size: 0.72rem !important;
    padding: 0 4px !important;
  }
}


/* ============================================================
   VOZ (mudar pitch)
   ============================================================ */

.ev-voz-presets {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.ev-voz-preset {
  padding: 12px 8px !important;
  background: var(--bg) !important;
  color: var(--text-soft) !important;
  border: 2px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  text-align: center !important;
}

.ev-voz-preset:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: rgba(220, 38, 38, 0.05) !important;
}

.ev-voz-preset.ativo {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

@media (max-width: 600px) {
  .ev-voz-presets {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ============================================================
   CROP — barra de ratios compacta
   ============================================================ */

.ev-crop-ratios {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 6px !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}

.ev-crop-ratio-btn {
  padding: 8px 4px !important;
  margin: 0 !important;
  background: var(--bg) !important;
  color: var(--text-soft) !important;
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .15s !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.ev-crop-ratio-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: rgba(220, 38, 38, 0.05) !important;
}

.ev-crop-ratio-btn.ativo {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* Mobile: 3 colunas */
@media (max-width: 600px) {
  .ev-crop-ratios {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .ev-crop-ratio-btn {
    font-size: 0.72rem !important;
    padding: 6px 2px !important;
  }
}


/* ============================================================
   CROP IMAGEM — botões de forma
   ============================================================ */
.crop-forma-btn {
  padding: 8px 16px;
  background: var(--bg, #fff);
  color: var(--text-soft, #666);
  border: 2px solid var(--border, #ddd);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}

.crop-forma-btn:hover {
  border-color: #44A2FF;
  color: #44A2FF;
}

.crop-forma-btn.ativo {
  background: #44A2FF;
  color: #fff;
  border-color: #44A2FF;
}


/* ============================================================
   EDITOR DE ÁUDIO AVANÇADO — abas lado a lado (AZUL)
   ============================================================ */

#editorAudioAvancado .ea-abas {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 20px 0 16px 0 !important;
  padding: 0 0 14px 0 !important;
  border-bottom: 2px dashed var(--border) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#editorAudioAvancado .ea-aba {
  flex: 1 1 110px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 110px !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  color: #3b82f6 !important;
  border: 2px solid #93c5fd !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .15s !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: 42px !important;
  float: none !important;
  position: relative !important;
}

#editorAudioAvancado .ea-aba:hover {
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
  background: #eff6ff !important;
  transform: translateY(-1px) !important;
}

#editorAudioAvancado .ea-aba.ativa {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Mobile: 2 colunas */
@media (max-width: 600px) {
  #editorAudioAvancado .ea-aba {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    font-size: 0.78rem !important;
    padding: 8px 6px !important;
    height: 38px !important;
  }
}

/* ============================================================
   UPLOAD DE ÁUDIO — esconde o input mas mantém clicável
   ============================================================ */
#eaInput {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

#eaVolume {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  outline: none;
  accent-color: #3b82f6;
}

#eaVolume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #3b82f6;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#eaVolume::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #3b82f6;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}




.grupo-conteudo-inner {
  overflow: hidden;
  padding: 0 16px;
  transition: padding 0.3s ease;
}

.grupo-ferramentas.aberto .grupo-conteudo-inner {
  padding: 20px 16px 24px;   /* topo maior pra separar do header, base pro respiro final */
}

/* 👇 NOVO: garante que o primeiro card não cole no header */
.grupo-conteudo-inner > section:first-child,
.grupo-conteudo-inner > .card-wide:first-child {
  margin-top: 0;
}

/* 👇 NOVO: separação visual entre header e conteúdo no mobile */
@media (max-width: 600px) {
  .grupo-header { padding: 16px 18px; gap: 12px; }
  .grupo-icone { font-size: 1.6rem; }
  .grupo-titulo { font-size: 1rem; }
  .grupo-descricao { font-size: 0.78rem; }

  .grupo-ferramentas.aberto .grupo-conteudo-inner {
    padding: 18px 12px 22px;   /* respiro maior no topo e na base */
  }
}


.grupo-ferramentas {
  margin-bottom: 24px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding-bottom: 0;    /* fecha limpo quando recolhido */
}

.grupo-ferramentas.aberto {
  padding-bottom: 8px;  /* 👈 respiro embaixo quando aberto */
}

.grupo-ferramentas.aberto .grupo-header {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 4px;
}


/* ============================================================
   (A1) FERRAMENTA ADICIONAL — CARDÁPIO DIGITAL
   ============================================================ */

/* Grupo ⭐ (dourado) */
.grupo-ferramentas[data-grupo="adicional"] .grupo-header {
  background: linear-gradient(135deg, #fef3c7, #fff);
  border-left: 5px solid #f59e0b;
}
.grupo-ferramentas[data-grupo="adicional"] .grupo-titulo { color: #b45309; }
.grupo-ferramentas[data-grupo="adicional"] .grupo-contador { background: #f59e0b; }
.grupo-ferramentas[data-grupo="adicional"] .grupo-seta { color: #f59e0b; }

/* Card bloqueado */
.adicional-bloqueado {
  padding: 20px 0;
  text-align: center;
}

.adicional-preview {
  max-width: 560px;
  margin: 0 auto;
}

.adicional-emoji {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 16px;
}

.adicional-titulo {
  font-size: 1.3rem;
  font-weight: 900;
  color: #b45309;
  margin: 0 0 12px;
  line-height: 1.3;
}

.adicional-desc {
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 20px;
}

.adicional-beneficios {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  text-align: left;
  display: inline-block;
}

.adicional-beneficios li {
  padding: 6px 0;
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.5;
}

.btn-adicional-comprar {
  display: inline-block;
  padding: 16px 32px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
  transition: all .25s ease;
  margin-top: 8px;
}

.btn-adicional-comprar:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.55);
  color: #fff;
}

.adicional-obs {
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 14px;
}

/* Editor liberado */
.cd-bloco {
  margin-top: 20px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.cd-bloco-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cd-bloco-titulo {
  font-size: 1rem;
  color: var(--primary);
  font-weight: 800;
  margin: 0;
}

.cd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cd-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.cd-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 4px;
}

.cd-input {
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
}

.cd-input-file {
  width: 100%;
  padding: 10px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--primary-soft);
  cursor: pointer;
}

.cd-color {
  width: 100%;
  height: 44px;
  padding: 4px;
  cursor: pointer;
  border: 2px solid var(--border);
  border-radius: 10px;
}

.cd-logo-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.cd-logo-preview {
  max-height: 60px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.cd-btn-mini {
  background: var(--primary-soft);
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--primary-dark);
}

.cd-btn-secundario {
  padding: 10px 16px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}

.cd-btn-secundario:hover { background: #cce4ff; }

.cd-btn-primario {
  padding: 14px 24px;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .25s;
}

.cd-btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.35);
}

/* Categorias */
.cd-categorias { display: grid; gap: 16px; }

.cd-categoria {
  padding: 14px;
  background: var(--primary-soft);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.cd-categoria-header {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cd-categoria-header .cd-categoria-nome {
  flex: 1;
  min-width: 0;
}

/* Afasta os botões do input */
.cd-categoria-header .cd-btn-secundario {
  margin-left: 10px;   /* 👈 10px de respiro */
}

.cd-categoria-header .cd-btn-remover {
  margin-left: 20px;
}

.cd-categoria-nome {
  flex: 1;
  padding: 8px 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
}

.cd-pratos { display: grid; gap: 8px; }

.cd-prato {
  display: grid;
  grid-template-columns: 2fr 3fr 1fr auto;
  gap: 6px;
  align-items: center;
}

.cd-prato input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
}

.cd-prato-preco { text-align: right; }

.cd-btn-remover {
  width: 34px;
  height: 34px;
  background: #fee2e2;
  color: #dc2626;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: 900;
}

/* Templates */
.cd-templates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

.cd-template {
  padding: 0;
  border: 3px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  background: none;
  transition: all .2s;
}

.cd-template.ativo { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }

.cd-template-preview {
  padding: 20px 8px;
  font-weight: 800;
  font-size: 0.75rem;
  text-align: center;
}

.cd-tpl-classico   { background: #f5f5f4; color: #1a202c; }
.cd-tpl-moderno    { background: linear-gradient(135deg, #dc2626, #f97316); color: #fff; }
.cd-tpl-minimalista{ background: #fff; color: #1a202c; border-top: 3px solid #1a202c; }
.cd-tpl-elegante   { background: #1a202c; color: #f59e0b; }

/* Preview */
.cd-preview-wrap {
  background: var(--bg);
  padding: 16px;
  border-radius: 10px;
  overflow: auto;
}

.cd-preview {
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  border-radius: 6px;
  margin: 0 auto;
  max-width: 720px;
  min-height: 300px;
  padding: 32px;
}

/* Ações */
.cd-acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Mobile */
@media (max-width: 600px) {
  .cd-grid-2, .cd-grid-3 { grid-template-columns: 1fr; }
  .cd-prato { grid-template-columns: 1fr 1fr; }
  .cd-prato-preco { grid-column: 1 / -1; }
  .cd-acoes button { flex: 1; min-width: 140px; }
}


/* ============================================================
   (A1) CARDÁPIO DIGITAL — Inputs e formulário
   ============================================================ */

/* ---------- Labels ---------- */
.cd-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-mute);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

/* ---------- Inputs de texto ---------- */
.cd-input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-sizing: border-box;
}

.cd-input::placeholder {
  color: var(--text-mute);
  opacity: 0.7;
}

.cd-input:hover {
  border-color: #cbd5e1;
}

.cd-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(68, 162, 255, 0.15);
  background: #fff;
}

.cd-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f3f4f6;
}

/* ---------- Input de arquivo ---------- */
.cd-input-file {
  width: 100%;
  padding: 12px 14px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
  box-sizing: border-box;
}

.cd-input-file:hover {
  border-color: var(--primary);
  background: #dbeafe;
}

.cd-input-file:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(68, 162, 255, 0.15);
}

/* Botão interno do input file (Chrome/Safari) */
.cd-input-file::-webkit-file-upload-button {
  padding: 8px 16px;
  margin-right: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background .2s ease;
}

.cd-input-file::-webkit-file-upload-button:hover {
  background: var(--primary-dark);
}

/* Botão interno do input file (Firefox) */
.cd-input-file::file-selector-button {
  padding: 8px 16px;
  margin-right: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background .2s ease;
}

.cd-input-file::file-selector-button:hover {
  background: var(--primary-dark);
}

/* ---------- Inputs de cor ---------- */
.cd-color {
  width: 100%;
  height: 48px;
  padding: 4px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
}

.cd-color:hover {
  border-color: #cbd5e1;
}

.cd-color:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(68, 162, 255, 0.15);
}

/* Remove o "X" e cantos quadrados do color picker */
.cd-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.cd-color::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}

.cd-color::-moz-color-swatch {
  border: none;
  border-radius: 6px;
}

/* ---------- Input do nome da categoria ---------- */
.cd-categoria-nome {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  min-width: 0;
}

.cd-categoria-nome:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(68, 162, 255, 0.15);
}

/* ---------- Inputs de prato (nome, descrição, preço) ---------- */
.cd-prato input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
}

.cd-prato input::placeholder {
  color: var(--text-mute);
  opacity: 0.65;
}

.cd-prato input:hover {
  border-color: #cbd5e1;
}

.cd-prato input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(68, 162, 255, 0.12);
}

.cd-prato-preco {
  text-align: right;
  font-weight: 700;
  color: var(--primary-dark);
}

/* ---------- Botão remover (X) ---------- */
.cd-btn-remover {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #fee2e2;
  color: #dc2626;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cd-btn-remover:hover {
  background: #fecaca;
  transform: scale(1.05);
}

.cd-btn-remover:active {
  transform: scale(0.95);
}

/* ---------- Botão secundário (➕ Categoria, ➕ Prato) ---------- */
.cd-btn-secundario {
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cd-btn-secundario:hover {
  background: #cce4ff;
  transform: translateY(-1px);
}

.cd-btn-secundario:active {
  transform: translateY(0);
}

/* ---------- Botão mini (✕ Remover logo) ---------- */
.cd-btn-mini {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease;
}

.cd-btn-mini:hover {
  background: #cce4ff;
}

/* ---------- Botão primário (Exportar PDF / HTML) ---------- */
.cd-btn-primario {
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cd-btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.35);
}

.cd-btn-primario:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

/* ---------- Preview da logo ---------- */
.cd-logo-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--primary-soft);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.cd-logo-preview {
  max-height: 60px;
  max-width: 120px;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: contain;
  background: #fff;
}

/* ---------- Grids ---------- */
.cd-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.cd-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

/* ---------- Categoria (bloco) ---------- */
.cd-categoria {
  padding: 16px;
  background: var(--primary-soft);
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}

.cd-categoria-header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cd-pratos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cd-prato {
  display: grid;
  grid-template-columns: 2fr 3fr 1fr auto;
  gap: 8px;
  align-items: center;
}

/* ---------- Template (preview cards) ---------- */
.cd-template {
  padding: 0;
  border: 3px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  background: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.cd-template:hover {
  border-color: #cbd5e1;
  transform: translateY(-2px);
}

.cd-template.ativo {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

/* ---------- Preview do cardápio ---------- */
.cd-preview-wrap {
  background: var(--bg);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow-x: auto;
}

.cd-preview {
  background: #fff;
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  min-height: 300px;
  max-width: 720px;
  margin: 0 auto;
  font-family: Georgia, serif;
  color: #1a202c;
}

/* ---------- Bloco do editor ---------- */
.cd-bloco {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-top: 16px;
}

.cd-bloco-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cd-bloco-titulo {
  font-size: 0.95rem;
  color: var(--primary);
  font-weight: 800;
  margin: 0;
}

/* ---------- Ações finais ---------- */
.cd-acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .cd-grid-2,
  .cd-grid-3 {
    grid-template-columns: 1fr;
  }

  .cd-prato {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .cd-prato input:nth-child(2) {
    grid-column: 1 / -1;
  }

  .cd-prato-preco {
    grid-column: 1 / 2;
    text-align: left;
  }

  .cd-btn-remover {
    grid-column: 2 / 3;
    justify-self: end;
  }

  .cd-categoria-header {
    flex-wrap: wrap;
  }

  .cd-categoria-nome {
    flex: 1 1 100%;
  }

  .cd-acoes button {
    flex: 1;
    min-width: 140px;
    justify-content: center;
  }

  .cd-preview {
    padding: 20px 16px;
  }
}

/* ---------- Dark mode ---------- */
body.dark .cd-input,
body.dark .cd-categoria-nome,
body.dark .cd-prato input {
  background: #1e293b;
  color: #f1f5f9;
  border-color: #334155;
}

body.dark .cd-input:focus,
body.dark .cd-categoria-nome:focus,
body.dark .cd-prato input:focus {
  background: #0f172a;
}

body.dark .cd-input-file {
  background: #1e293b;
  color: #cbd5e1;
  border-color: #334155;
}

body.dark .cd-input-file:hover {
  background: #334155;
}

body.dark .cd-preview-wrap {
  background: #0f172a;
}

body.dark .cd-bloco {
  background: #1e293b;
  border-color: #334155;
}

body.dark .cd-categoria {
  background: rgba(68, 162, 255, 0.08);
  border-color: #334155;
}

body.dark .cd-btn-secundario,
body.dark .cd-btn-mini {
  background: rgba(68, 162, 255, 0.15);
  color: #93c5fd;
}

body.dark .cd-btn-secundario:hover,
body.dark .cd-btn-mini:hover {
  background: rgba(68, 162, 255, 0.25);
}

body.dark .cd-logo-info {
  background: rgba(68, 162, 255, 0.08);
  border-color: #334155;
}

/* ============================================================
   (A1) CARDÁPIO DIGITAL — v3: foto, separador, toast
   ============================================================ */

/* ---------- Botão "Adicionar foto" (grande, visível) ---------- */
.cd-prato-foto-btn {
  width: 72px;
  height: 72px;
  padding: 6px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  color: #64748b;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
  font-family: inherit;
}

.cd-prato-foto-btn:hover {
  border-color: var(--primary);
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(68, 162, 255, 0.15);
}

.cd-prato-foto-btn:active {
  transform: translateY(0);
}

.cd-prato-foto-icone {
  font-size: 1.5rem;
  line-height: 1;
}

.cd-prato-foto-texto {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.1;
}

/* Quando tem foto: mostra imagem de fundo */
.cd-prato-foto-btn.tem-foto {
  border-style: solid;
  border-color: var(--border);
  padding: 0;
  background: #fff;
}

.cd-prato-foto-btn.tem-foto::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--foto-url);
  background-size: cover;
  background-position: center;
}

.cd-prato-foto-btn.tem-foto::after {
  content: '🔄 Trocar';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s ease;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.cd-prato-foto-btn.tem-foto:hover::after {
  opacity: 1;
}

/* ---------- Grid do prato (reorganizado) ---------- */
.cd-prato {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
}

.cd-prato-campos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cd-prato-campos input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
}

.cd-prato-campos input::placeholder {
  color: var(--text-mute);
  opacity: 0.65;
}

.cd-prato-campos input:hover {
  border-color: #cbd5e1;
}

.cd-prato-campos input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(68, 162, 255, 0.12);
}

.cd-prato-preco {
  text-align: right;
  font-weight: 700;
  color: var(--primary-dark);
  min-width: 110px;
}

/* ---------- Separador elegante entre pratos ---------- */
.cd-separador {
  height: 1px;
  margin: 4px 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(148, 163, 184, 0.15) 10%,
    rgba(148, 163, 184, 0.5) 50%,
    rgba(148, 163, 184, 0.15) 90%,
    transparent 100%
  );
  position: relative;
}

.cd-separador::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.6);
}

/* ---------- Toast (notificações flutuantes) ---------- */
.cd-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  padding: 14px 24px;
  border-radius: 40px;
  color: #fff;
  font-family: system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cd-toast.visivel {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .cd-prato {
    grid-template-columns: 72px 1fr auto;
    gap: 10px;
  }

  .cd-prato-preco {
    grid-column: 2 / 3;
    min-width: 0;
    text-align: left;
  }

  .cd-prato-foto-btn {
    width: 64px;
    height: 64px;
  }
}

/* ---------- Dark mode ---------- */
body.dark .cd-prato-foto-btn {
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border-color: #334155;
  color: #94a3b8;
}

body.dark .cd-prato-foto-btn:hover {
  border-color: var(--primary);
  background: linear-gradient(180deg, #1e3a5f, #1e3a8a);
  color: #93c5fd;
}

body.dark .cd-prato-foto-btn.tem-foto {
  background: #1e293b;
  border-color: #334155;
}

body.dark .cd-prato-campos input {
  background: #1e293b;
  color: #f1f5f9;
  border-color: #334155;
}

body.dark .cd-prato-campos input:focus {
  background: #0f172a;
}

body.dark .cd-separador {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(100, 116, 139, 0.2) 10%,
    rgba(100, 116, 139, 0.6) 50%,
    rgba(100, 116, 139, 0.2) 90%,
    transparent 100%
  );
}

.cd-categoria-header {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cd-prato {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 10px 0;
}

.cd-prato > .cd-btn-remover {
  margin-top: 9px;
}


/* ============================================================
   BADGE CONFIRMAÇÕES — Header do admin
   ============================================================ */

#btnConfirmacoesBadge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.45);
}

#btnConfirmacoesBadge:active {
  transform: translateY(0);
}

/* Quando tiver muitas confirmações (16+) */
#btnConfirmacoesBadge.alerta-medio {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
  animation: pulso-aviso 2s ease-in-out infinite;
  transform: translateY(-8px);
}

#btnConfirmacoesBadge.alerta-alto {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5);
  animation: pulso-aviso 1.4s ease-in-out infinite;
  transform: translateY(-8px);
}

@keyframes pulso-aviso {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  }
}

/* Mobile */
@media (max-width: 600px) {
  #btnConfirmacoesBadge {
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
  }
  #btnConfirmacoesBadge span:first-child {
    font-size: 0.95rem !important;
  }
}


/* ============================================================
   (A2) FERRAMENTA ADICIONAL — CATÁLOGO DIGITAL
   ============================================================ */

/* ---------- Blocos do editor ---------- */
.cat-bloco {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-top: 16px;
}

.cat-bloco-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cat-bloco-titulo {
  font-size: 0.95rem;
  color: var(--primary);
  font-weight: 800;
  margin: 0;
}

/* ---------- Grids ---------- */
.cat-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.cat-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }

.cat-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-mute);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

/* ---------- Inputs ---------- */
.cat-input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  box-sizing: border-box;
  margin-top: 4px;
}

.cat-input::placeholder { color: var(--text-mute); opacity: 0.7; }
.cat-input:hover { border-color: #cbd5e1; }
.cat-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(68, 162, 255, 0.15);
  background: #fff;
}

.cat-input-file {
  width: 100%;
  padding: 12px 14px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .2s, background .2s;
}

.cat-input-file:hover { border-color: var(--primary); background: #dbeafe; }

.cat-input-file::-webkit-file-upload-button {
  padding: 8px 16px;
  margin-right: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.cat-input-file::file-selector-button {
  padding: 8px 16px;
  margin-right: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

.cat-color {
  width: 100%;
  height: 48px;
  padding: 4px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
  box-sizing: border-box;
}
.cat-color::-webkit-color-swatch-wrapper { padding: 0; }
.cat-color::-webkit-color-swatch { border: none; border-radius: 6px; }
.cat-color::-moz-color-swatch { border: none; border-radius: 6px; }

/* ---------- Logo ---------- */
.cat-logo-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--primary-soft);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.cat-logo-preview {
  max-height: 60px;
  max-width: 120px;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: contain;
  background: #fff;
}

/* ---------- Categorias ---------- */
.cat-categorias { display: grid; gap: 16px; }

.cat-categoria {
  padding: 16px;
  background: var(--primary-soft);
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}

.cat-categoria-header {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cat-categoria-nome {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  outline: none;
}
.cat-categoria-nome:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(68, 162, 255, 0.15);
}

/* ---------- Produto ---------- */
.cat-produtos { display: flex; flex-direction: column; gap: 12px; }

.cat-produto {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.cat-produto-foto-btn {
  width: 88px;
  height: 88px;
  padding: 6px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  color: #64748b;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
  font-family: inherit;
}

.cat-produto-foto-btn:hover {
  border-color: var(--primary);
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
  color: var(--primary);
}

.cat-produto-foto-btn.obrigatoria {
  border-color: #fca5a5;
}

.cat-produto-foto-btn.tem-foto {
  border-style: solid;
  border-color: var(--border);
  padding: 0;
  background: #fff;
}
.cat-produto-foto-btn.tem-foto::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--foto-url);
  background-size: cover;
  background-position: center;
}
.cat-produto-foto-btn.tem-foto::after {
  content: '🔄 Trocar';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
  text-transform: uppercase;
}
.cat-produto-foto-btn.tem-foto:hover::after { opacity: 1; }

.cat-produto-foto-icone { font-size: 1.6rem; line-height: 1; }
.cat-produto-foto-texto {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.1;
}

.cat-produto-campos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cat-produto-campos input,
.cat-produto-campos select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
  box-sizing: border-box;
}
.cat-produto-campos input:focus,
.cat-produto-campos select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(68, 162, 255, 0.12);
}

.cat-produto-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.cat-produto-preco { text-align: right; font-weight: 700; color: var(--primary-dark); }
.cat-produto-preco-antigo { text-align: right; font-weight: 600; color: #9ca3af; text-decoration: line-through; }

/* ---------- Botões ---------- */
.cat-btn-remover {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #fee2e2;
  color: #dc2626;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.cat-btn-remover:hover { background: #fecaca; }

.cat-btn-secundario {
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .2s;
}
.cat-btn-secundario:hover { background: #cce4ff; }

.cat-btn-mini {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.cat-btn-primario {
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .2s, box-shadow .2s;
}
.cat-btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
}

/* ---------- Preview ---------- */
.cat-preview-wrap {
  background: var(--bg);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow-x: auto;
}

.cat-preview {
  background: #fff;
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  min-height: 300px;
  max-width: 900px;
  margin: 0 auto;
  font-family: system-ui, -apple-system, sans-serif;
  color: #1a202c;
}

/* ---------- Render (galeria no preview) ---------- */
.cat-render-header { text-align: center; margin-bottom: 28px; }
.cat-render-logo { max-height: 70px; margin-bottom: 12px; }
.cat-render-titulo { margin: 0; font-size: 1.8rem; font-weight: 900; letter-spacing: -0.5px; }
.cat-render-slogan { margin: 6px 0 0; font-size: 0.9rem; font-style: italic; opacity: 0.75; }
.cat-render-contato { margin: 8px 0 0; font-size: 0.82rem; color: #6b7280; }

.cat-render-categoria { margin-bottom: 32px; }
.cat-render-cat-titulo {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cat-render-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.cat-render-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.cat-render-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.cat-render-foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #f3f4f6;
}

.cat-render-info { padding: 10px 12px; }

.cat-render-nome {
  font-size: 0.9rem;
  font-weight: 800;
  margin: 0 0 4px;
  line-height: 1.2;
}

.cat-render-desc {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 0 0 6px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-render-precos {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.cat-render-preco {
  font-size: 1rem;
  font-weight: 900;
}

.cat-render-preco-antigo {
  font-size: 0.75rem;
  color: #9ca3af;
  text-decoration: line-through;
}

.cat-render-estoque {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 4px;
}
.cat-render-estoque.disponivel { background: #dcfce7; color: #166534; }
.cat-render-estoque.esgotado { background: #fee2e2; color: #991b1b; }

.cat-render-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #374151;
}
.cat-render-link:hover { background: #e5e7eb; }

/* ---------- Ações ---------- */
.cat-acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .cat-grid-2, .cat-grid-3 { grid-template-columns: 1fr; }
  .cat-produto { grid-template-columns: 1fr; }
  .cat-produto-foto-btn { width: 100%; height: 120px; }
  .cat-render-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-acoes button { flex: 1; min-width: 140px; justify-content: center; }
  .cat-preview { padding: 20px 14px; }
}

/* ---------- Dark mode ---------- */
body.dark .cat-bloco,
body.dark .cat-categoria {
  background: #1e293b;
  border-color: #334155;
}
body.dark .cat-input,
body.dark .cat-categoria-nome,
body.dark .cat-produto-campos input,
body.dark .cat-produto-campos select {
  background: #1e293b;
  color: #f1f5f9;
  border-color: #334155;
}
body.dark .cat-input-file {
  background: #1e293b;
  color: #cbd5e1;
  border-color: #334155;
}
body.dark .cat-produto { background: #1e293b; border-color: #334155; }
body.dark .cat-preview-wrap { background: #0f172a; }


/* ============================================================
   (A3) FERRAMENTA ADICIONAL — REVISTA DIGITAL
   ============================================================ */

/* ---------- Blocos do editor ---------- */
.rev-bloco-editor {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-top: 16px;
}

.rev-bloco-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.rev-bloco-titulo {
  font-size: 0.95rem;
  color: var(--primary);
  font-weight: 800;
  margin: 0 0 12px;
}

/* ---------- Grids ---------- */
.rev-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.rev-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }

.rev-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-mute);
  margin-bottom: 10px;
}

/* ---------- Inputs ---------- */
.rev-input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  box-sizing: border-box;
  margin-top: 6px;
}
.rev-input::placeholder { color: var(--text-mute); opacity: 0.7; }
.rev-input:hover { border-color: #cbd5e1; }
.rev-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(68, 162, 255, 0.15);
  background: #fff;
}
textarea.rev-input { resize: vertical; font-family: inherit; }

.rev-input-file {
  width: 100%;
  padding: 12px 14px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  box-sizing: border-box;
  margin-top: 6px;
  transition: border-color .2s, background .2s;
}
.rev-input-file:hover { border-color: var(--primary); background: #dbeafe; }
.rev-input-file::-webkit-file-upload-button,
.rev-input-file::file-selector-button {
  padding: 8px 16px;
  margin-right: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

.rev-color {
  width: 100%;
  height: 48px;
  padding: 4px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
  box-sizing: border-box;
  margin-top: 6px;
}
.rev-color::-webkit-color-swatch-wrapper { padding: 0; }
.rev-color::-webkit-color-swatch { border: none; border-radius: 6px; }
.rev-color::-moz-color-swatch { border: none; border-radius: 6px; }

/* ---------- Preview de imagem ---------- */
.rev-img-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--primary-soft);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.rev-img-preview {
  max-height: 80px;
  max-width: 160px;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: cover;
}

/* ---------- Páginas ---------- */
.rev-paginas { display: flex; flex-direction: column; gap: 16px; }

.rev-pagina {
  padding: 16px;
  background: var(--primary-soft);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.rev-pagina-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.rev-pagina-numero {
  font-weight: 800;
  color: var(--primary);
  font-size: 0.95rem;
}

.rev-pagina-acoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ---------- Blocos ---------- */
.rev-blocos { display: flex; flex-direction: column; gap: 12px; }

.rev-bloco {
  padding: 14px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--border);
  position: relative;
}

.rev-bloco-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.rev-bloco-numero {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rev-bloco-campos { display: flex; flex-direction: column; gap: 8px; }

.rev-bloco-campos input,
.rev-bloco-campos textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.rev-bloco-campos input:focus,
.rev-bloco-campos textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(68, 162, 255, 0.12);
}
.rev-bloco-campos textarea { resize: vertical; min-height: 60px; }

.rev-bloco-img-btn {
  width: 100%;
  padding: 12px;
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  color: #64748b;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .2s;
}
.rev-bloco-img-btn:hover {
  border-color: var(--primary);
  background: #eff6ff;
  color: var(--primary);
}
.rev-bloco-img-btn.tem-foto {
  border-style: solid;
  padding: 0;
  height: 120px;
  overflow: hidden;
  position: relative;
  background: #fff;
}
.rev-bloco-img-btn.tem-foto::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--foto-url);
  background-size: cover;
  background-position: center;
}
.rev-bloco-img-btn.tem-foto::after {
  content: '🔄 Trocar imagem';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
}
.rev-bloco-img-btn.tem-foto:hover::after { opacity: 1; }

/* ---------- Botões ---------- */
.rev-btn-remover {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #fee2e2;
  color: #dc2626;
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  flex-shrink: 0;
}
.rev-btn-remover:hover { background: #fecaca; }

.rev-btn-secundario {
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .2s;
}

.rev-btn-mini {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.rev-btn-primario {
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .2s, box-shadow .2s;
}
.rev-btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
}

/* ---------- Preview ---------- */
.rev-preview-wrap {
  background: var(--bg);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow-x: auto;
}

.rev-preview {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.rev-page {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 210 / 297;   /* A4 retrato */
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
  padding: 32px;
  font-family: Georgia, serif;
  color: #1a202c;
}

/* Capa frente */
.rev-page-capa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 32px;
}
.rev-capa-img {
  max-width: 100%;
  max-height: 50%;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 24px;
}
.rev-capa-titulo {
  font-size: 2rem;
  font-weight: 900;
  margin: 0 0 12px;
  line-height: 1.2;
}
.rev-capa-subtitulo {
  font-size: 1.1rem;
  font-style: italic;
  opacity: 0.85;
  margin: 0 0 24px;
}
.rev-capa-info {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.75;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Páginas de conteúdo */
.rev-page-conteudo {
  padding: 40px 36px;
  overflow-y: auto;
}
.rev-conteudo-bloco { margin-bottom: 24px; }
.rev-conteudo-titulo {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.3;
}
.rev-conteudo-img {
  max-width: 100%;
  border-radius: 6px;
  margin-bottom: 12px;
  display: block;
}
.rev-conteudo-texto {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 12px;
  white-space: pre-wrap;
}
.rev-conteudo-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 20px;
  border: 2px solid currentColor;
  margin-top: 4px;
}

/* Capa verso */
.rev-page-verso {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 32px;
}
.rev-verso-logo {
  max-width: 180px;
  max-height: 100px;
  object-fit: contain;
  margin-bottom: 24px;
}
.rev-verso-texto {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: 320px;
}
.rev-verso-contato {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.8;
  opacity: 0.9;
}
.rev-verso-contato-item {
  display: block;
}

/* Números de página */
.rev-page-numero {
  position: absolute;
  bottom: 16px;
  right: 24px;
  font-size: 0.75rem;
  opacity: 0.5;
  font-family: system-ui, sans-serif;
}

/* ---------- Ações ---------- */
.rev-acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .rev-grid-2, .rev-grid-3 { grid-template-columns: 1fr; }
  .rev-page { padding: 20px; }
  .rev-page-capa { padding: 24px 20px; }
  .rev-capa-titulo { font-size: 1.4rem; }
  .rev-page-conteudo { padding: 24px 20px; }
  .rev-acoes button { flex: 1; min-width: 140px; justify-content: center; }
}

/* ---------- Dark mode ---------- */
body.dark .rev-bloco-editor,
body.dark .rev-pagina,
body.dark .rev-bloco {
  background: #1e293b;
  border-color: #334155;
}
body.dark .rev-input,
body.dark .rev-bloco-campos input,
body.dark .rev-bloco-campos textarea {
  background: #1e293b;
  color: #f1f5f9;
  border-color: #334155;
}
body.dark .rev-input-file { background: #1e293b; color: #cbd5e1; border-color: #334155; }
body.dark .rev-preview-wrap { background: #0f172a; }

/* Grupo ⭐ (dourado) */
.grupo-ferramentas[data-grupo="adicional"] .grupo-header {
  background: linear-gradient(135deg, #fef3c7, #fff);
  border-left: 5px solid #f59e0b;
}
.grupo-ferramentas[data-grupo="adicional"] .grupo-titulo { color: #b45309; }
.grupo-ferramentas[data-grupo="adicional"] .grupo-contador { background: #f59e0b; }
.grupo-ferramentas[data-grupo="adicional"] .grupo-seta { color: #f59e0b; }


/* ============================================================
   FERRAMENTAS ADICIONAIS — padrão dourado unificado
   Aplica em qualquer <section class="adicional"> no grupo adicional
   ============================================================ */

/* Título da ferramenta (h2 com "(A1)", "(A2)", "(A3)") */
section.adicional > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #b45309;
  font-weight: 900;
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 3px solid #f59e0b;
  position: relative;
}

/* Barra dourada decorativa embaixo do título */
section.adicional > h2::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  border-radius: 3px;
}

/* Badge dourado do número (A1), (A2), (A3) */
section.adicional > h2 .num-secao,
section.adicional > h2 > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
  flex-shrink: 0;
}

/* Texto "Bloqueado" / "Adicional" se quiser destacar */
section.adicional .adicional-titulo {
  color: #b45309;
}

/* Card bloqueado — fundo dourado suave */
section.adicional .adicional-bloqueado {
  padding: 24px;
  background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
  border: 2px dashed #f59e0b;
  border-radius: 16px;
  margin-top: 16px;
}

/* Botão comprar — destaque dourado */
section.adicional .btn-adicional-comprar {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Bônus: hover no grupo adicional (efeito sutil) */
.grupo-ferramentas[data-grupo="adicional"] .grupo-header:hover {
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
}

/* Dark mode */
body.dark section.adicional > h2 {
  color: #fbbf24;
  border-bottom-color: #d97706;
}

body.dark section.adicional .adicional-bloqueado {
  background: linear-gradient(135deg, #422006 0%, #1e293b 100%);
  border-color: #d97706;
}

body.dark section.adicional > h2 .num-secao,
body.dark section.adicional > h2 > span:first-child {
  background: linear-gradient(135deg, #d97706, #b45309);
}

.rev-pagina-acoes .rev-btn-secundario {
  background: transparent;
  border: none;
  color: var(--primary-dark);
  padding: 6px 8px;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.rev-pagina-acoes .rev-btn-secundario:hover {
  background: rgba(68, 162, 255, 0.1);
  color: var(--primary);
}

.rev-pagina-header .rev-btn-remover {
transform: translateX(+65px);  
}

.rev-btn-secundario {
  transform: translateX(+40px);
}


/* ➕ Bloco — sem hover */
.rev-pagina-acoes .rev-btn-secundario:hover,
.rev-pagina-acoes .rev-btn-secundario:focus,
.rev-pagina-acoes .rev-btn-secundario:active {
  background: transparent !important;
  color: var(--primary-dark) !important;
  box-shadow: none !important;
  transform: none !important;
}


/* ============================================================
   HEADER COMPACTO — encolhe ao rolar pra baixo
   ============================================================ */

.topo {
  padding: 16px 20px;
  transition: padding .35s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}

.topo img {
  transition: width .35s ease, height .35s ease;
  display: block;
}

.topo h1 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  transition: font-size .35s ease;
  white-space: nowrap;
}

/* ---------- ESTADO COMPACTO ---------- */
.topo.compacto {
  padding: 8px 16px;
}

.topo.compacto img {
  width: 40px !important;
  height: auto !important;
}

.topo.compacto h1 {
  font-size: 0.95rem;
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .topo.compacto img {
    width: 32px !important;
  }
  .topo.compacto h1 {
    font-size: 0.85rem;
  }
}



/* ============================================================
   REVISTA — botões secundários: ajuste fino de posição
   ============================================================ */

/* DESKTOP: -30px */
.rev-acoes-secundarias .rev-btn-secundario {
  transform: translateX(-2px) !important;
}

/* MOBILE: +2px */
@media (max-width: 768px) {
  .rev-acoes-secundarias .rev-btn-secundario {
    transform: translateX(+2px) !important;
  }
}


/* ============================================================
   REVISTA — botão ➕ Página: ajuste de posição
   ============================================================ */

/* Desktop: -30px */
.rev-bloco-header .rev-btn-secundario {
  transform: translateX(-2px) !important;
}

/* Mobile: remove (ou ajusta se precisar) */
@media (max-width: 768px) {
  .rev-bloco-header .rev-btn-secundario {
    transform: translateX(0) !important;
  }
}


/* ============================================================
   BORDAS COLORIDAS DAS FERRAMENTAS POR GRUPO
   ============================================================
   - Borda ESQUERDA espessa (cor de destaque do grupo)
   - Borda COMPLETA 1px na mesma cor
   - Bônus e Premium com borda esquerda mais grossa
   ============================================================ */

/* ---------- Base: todas as sections ---------- */
section.secao {
  position: relative !important;
  border: 1px solid transparent;
  border-left-width: 5px;
  border-left-style: solid;
  border-radius: 12px;
  box-sizing: border-box;
  margin-bottom: 5px !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

section.secao:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Remove margem do último card de cada grupo */
.grupo-conteudo-inner > section.secao:last-child {
  margin-bottom: 0 !important;
}

/* ---------- 🔵 BÁSICAS — azul #44A2FF ---------- */
.grupo-ferramentas[data-grupo="basicas"] section.secao {
  border-color: #44A2FF;
  border-left-width: 5px;
  border-left-color: #44A2FF;
}

/* ---------- 🟠 BÔNUS — laranja #f97316 ---------- */
.grupo-ferramentas[data-grupo="bonus"] section.secao {
  border-color: #f97316;
  border-left-width: 8px;
  border-left-color: #f97316;
}

/* ---------- 🟣 PREMIUM — lilás #8b5cf6 ---------- */
.grupo-ferramentas[data-grupo="premium"] section.secao {
  border-color: #8b5cf6;
  border-left-width: 8px;
  border-left-color: #8b5cf6;
}

/* ---------- 🔴 PRO — vermelho #dc2626 ---------- */
.grupo-ferramentas[data-grupo="pro"] section.secao {
  border-color: #dc2626;
  border-left-width: 5px;
  border-left-color: #dc2626;
}

/* ---------- ⭐ ADICIONAIS — dourado #f59e0b ---------- */
.grupo-ferramentas[data-grupo="adicional"] section.secao {
  border-color: #f59e0b;
  border-left-width: 5px;
  border-left-color: #f59e0b;
}

/* ---------- DARK MODE — cores mais suaves ---------- */
body.dark section.secao {
  background: #1e293b;
}
body.dark .grupo-ferramentas[data-grupo="basicas"] section.secao {
  border-color: rgba(68, 162, 255, 0.5);
  border-left-color: #44A2FF;
}
body.dark .grupo-ferramentas[data-grupo="bonus"] section.secao {
  border-color: rgba(249, 115, 22, 0.5);
  border-left-color: #f97316;
}
body.dark .grupo-ferramentas[data-grupo="premium"] section.secao {
  border-color: rgba(139, 92, 246, 0.5);
  border-left-color: #8b5cf6;
}
body.dark .grupo-ferramentas[data-grupo="pro"] section.secao {
  border-color: rgba(220, 38, 38, 0.5);
  border-left-color: #dc2626;
}
body.dark .grupo-ferramentas[data-grupo="adicional"] section.secao {
  border-color: rgba(245, 158, 11, 0.5);
  border-left-color: #f59e0b;
}


/* ============================================================
   CORES DOS CARDS POR GRUPO — headers, títulos e badges
   ============================================================ */

/* ---------- Estrutura base ---------- */
section.secao .secao-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

section.secao .secao-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 900;
}

section.secao .num-secao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 20px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

/* ---------- 🔵 BÁSICAS ---------- */
.grupo-ferramentas[data-grupo="basicas"] section.secao .secao-header h2 {
  color: #2d7fd1 !important;
}
.grupo-ferramentas[data-grupo="basicas"] section.secao .num-secao {
  background: #44A2FF !important;
  color: #fff !important;
}

/* ---------- 🟠 BÔNUS ---------- */
.grupo-ferramentas[data-grupo="bonus"] section.secao .secao-header h2 {
  color: #ea580c !important;
}
.grupo-ferramentas[data-grupo="bonus"] section.secao .num-secao {
  background: #f97316 !important;
  color: #fff !important;
}

/* ---------- 🟣 PREMIUM ---------- */
.grupo-ferramentas[data-grupo="premium"] section.secao .secao-header h2 {
  color: #6d28d9 !important;
}
.grupo-ferramentas[data-grupo="premium"] section.secao .num-secao {
  background: #8b5cf6 !important;
  color: #fff !important;
}

/* ---------- 🔴 PRO ---------- */
.grupo-ferramentas[data-grupo="pro"] section.secao .secao-header h2 {
  color: #b91c1c !important;
}
.grupo-ferramentas[data-grupo="pro"] section.secao .num-secao {
  background: #dc2626 !important;
  color: #fff !important;
}

/* ---------- ⭐ ADICIONAIS ---------- */
.grupo-ferramentas[data-grupo="adicional"] section.secao .secao-header h2 {
  color: #b45309 !important;
}
.grupo-ferramentas[data-grupo="adicional"] section.secao .num-secao {
  background: #f59e0b !important;
  color: #fff !important;
}

/* ---------- Header com fundo suave na cor do grupo ---------- */
.grupo-ferramentas[data-grupo="basicas"] section.secao .secao-header {
  background: linear-gradient(135deg, #eff6ff, #ffffff) !important;
  border-bottom: 1px solid rgba(68, 162, 255, 0.15) !important;
}
.grupo-ferramentas[data-grupo="bonus"] section.secao .secao-header {
  background: linear-gradient(135deg, #fff7ed, #ffffff) !important;
  border-bottom: 1px solid rgba(249, 115, 22, 0.15) !important;
}
.grupo-ferramentas[data-grupo="premium"] section.secao .secao-header {
  background: linear-gradient(135deg, #f5f3ff, #ffffff) !important;
  border-bottom: 1px solid rgba(139, 92, 246, 0.15) !important;
}
.grupo-ferramentas[data-grupo="pro"] section.secao .secao-header {
  background: linear-gradient(135deg, #fef2f2, #ffffff) !important;
  border-bottom: 1px solid rgba(220, 38, 38, 0.15) !important;
}
.grupo-ferramentas[data-grupo="adicional"] section.secao .secao-header {
  background: linear-gradient(135deg, #fffbeb, #ffffff) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.15) !important;
}

/* ---------- Fundo branco do corpo da ferramenta ---------- */
section.secao {
  background: #ffffff !important;
}
section.secao .secao-body {
  background: #ffffff !important;
}

body.dark section.secao {
  background: #1e293b !important;
}
body.dark section.secao .secao-body {
  background: #1e293b !important;
}
body.dark .grupo-ferramentas[data-grupo="basicas"] section.secao .secao-header {
  background: linear-gradient(135deg, rgba(68, 162, 255, 0.1), transparent) !important;
}
body.dark .grupo-ferramentas[data-grupo="bonus"] section.secao .secao-header {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), transparent) !important;
}
body.dark .grupo-ferramentas[data-grupo="premium"] section.secao .secao-header {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), transparent) !important;
}
body.dark .grupo-ferramentas[data-grupo="pro"] section.secao .secao-header {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), transparent) !important;
}
body.dark .grupo-ferramentas[data-grupo="adicional"] section.secao .secao-header {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), transparent) !important;
}


/* ============================================================
   BOTÃO EXPANDIR FERRAMENTA
   ============================================================ */

/* ---------- Todos os estados — mesma posição ---------- */
.btn-expandir-ferramenta,
.btn-expandir-ferramenta:hover,
.btn-expandir-ferramenta:active,
.btn-expandir-ferramenta:focus,
.btn-expandir-ferramenta:focus-visible {
  position: relative !important;
  top: -1px !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;

  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 20px;
  background: transparent;
  color: var(--primary);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 100;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

/* ---------- Estado EXPANDIDO ---------- */
section.secao.expandida .btn-expandir-ferramenta {
  background: transparent;
  color: red;
  font-size: 1.2rem;
  width: 40px;
  height: 40px;
  z-index: 10000;
}
section.secao.expandida .btn-expandir-ferramenta:hover {
  background: transparent;
  color: #b91c1c;
}
section.secao.expandida .btn-expandir-ferramenta:active {
  background: #991b1b;
  color: #fff;
}

/* ---------- Desktop: posição do ✕ expandido ---------- */
section.secao.expandida .btn-expandir-ferramenta,
section.secao.expandida .btn-expandir-ferramenta:hover,
section.secao.expandida .btn-expandir-ferramenta:active,
section.secao.expandida .btn-expandir-ferramenta:focus,
section.secao.expandida .btn-expandir-ferramenta:focus-visible {
  top: 55px !important;
  left: -20px !important;
  transform: none !important;
}

/* ---------- Mobile: posição do ✕ expandido ---------- */
@media (max-width: 600px) {
  section.secao.expandida .btn-expandir-ferramenta,
  section.secao.expandida .btn-expandir-ferramenta:hover,
  section.secao.expandida .btn-expandir-ferramenta:active,
  section.secao.expandida .btn-expandir-ferramenta:focus,
  section.secao.expandida .btn-expandir-ferramenta:focus-visible {
    top: 56px !important;
    left: -16px !important;
  }
}


/* ============================================================
   SECTION EXPANDIDA — tela cheia
   ============================================================ */
section.secao.expandida {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 24px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--bg) !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
  animation: expandirEntrar .25s ease-out;
}

@keyframes expandirEntrar {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.ferramenta-expandida-ativa {
  overflow: hidden !important;
}


/* ============================================================
   MOBILE — ajustes finos
   ============================================================ */
@media (max-width: 600px) {
  section.secao {
    border-left-width: 4px;
  }
  .grupo-ferramentas[data-grupo="bonus"] section.secao,
  .grupo-ferramentas[data-grupo="premium"] section.secao {
    border-left-width: 6px;
  }
  .btn-expandir-ferramenta {
    width: 32px;
    height: 32px;
    box-shadow: none !important;
    font-size: 0.95rem;
  }
  section.secao.expandida {
    padding: 16px !important;
  }
}


/* ============================================================
   HEADER SEM GRADIENTE QUANDO A FERRAMENTA ESTÁ EXPANDIDA
   ============================================================ */

/* ---------- 🔵 BÁSICAS ---------- */
.grupo-ferramentas[data-grupo="basicas"] section.secao.expandida .secao-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ---------- 🟠 BÔNUS ---------- */
.grupo-ferramentas[data-grupo="bonus"] section.secao.expandida .secao-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ---------- 🟣 PREMIUM ---------- */
.grupo-ferramentas[data-grupo="premium"] section.secao.expandida .secao-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ---------- 🔴 PRO ---------- */
.grupo-ferramentas[data-grupo="pro"] section.secao.expandida .secao-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ---------- ⭐ ADICIONAIS ---------- */
.grupo-ferramentas[data-grupo="adicional"] section.secao.expandida .secao-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ---------- DARK MODE ---------- */
body.dark section.secao.expandida .secao-header {
  background: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
}


/* ============================================================
   INPUTS DE ARQUIVO — fix universal (sem :has())
   ============================================================ */

input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: auto !important;
}

/* Labels com classe ganham visual de botão */
label.ev-label,
label.cd-label,
label.cat-label,
label.rev-label,
label.qr-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-mute);
  cursor: pointer;
  padding: 12px 20px;
  margin-top: 8px;
  background: linear-gradient(135deg, #44A2FF, #2d7fd1);
  color: #fff;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 16px rgba(68, 162, 255, 0.25);
}

label.ev-label:hover,
label.cd-label:hover,
label.cat-label:hover,
label.rev-label:hover,
label.qr-label:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(68, 162, 255, 0.4);
  color: #fff;
}

/* Ferramenta de apresentação — apImg0 */
#apImg0 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* A label/div que o contém vira botão */
div:has(> #apImg0) {
  position: relative;
}
div:has(> #apImg0)::before {
  content: '📁 Escolher imagem';
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: linear-gradient(135deg, #44A2FF, #2d7fd1);
  color: #fff;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}
div:has(> #apImg0) label {
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
}


/* ============================================================
   CRIADOR DE STORIES — desativa sticky ao expandir (FORÇADO)
   ============================================================ */

section.secao.expandida#stories #stPreviewArea {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  z-index: auto !important;
}

/* ---------- Mobile (dentro de @media pra ter prioridade) ---------- */
@media (max-width: 600px) {
  section.secao.expandida#stories #stPreviewArea {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
  }
}


/* ============================================================
   (A4) EDITOR GRÁFICO VETORIAL
   Prefixo: evetor
   ============================================================ */

/* ---------- Estrutura geral ---------- */
.evetor-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px;
  margin-top: 12px;
}

/* ============================================================
   WORKSPACE — toolbar + canvas + props
   ============================================================ */
.evetor-workspace {
  display: grid;
  grid-template-columns: 92px 1fr 260px;
  gap: 12px;
  min-height: 600px;
  height: calc(100vh - 380px);
  max-height: 800px;
}

/* ============================================================
   TOOLBAR ESQUERDA
   ============================================================ */
.evetor-toolbar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: hidden;
  overflow-x: hidden;
}

.evetor-toolbar-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.evetor-toolbar-titulo {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-mute);
  text-align: center;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.evetor-tools,
.evetor-acoes-rapidas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.evetor-tool {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  font-family: inherit;
  line-height: 1;
}

.evetor-tool span {
  font-size: 1rem;
  line-height: 1;
}

.evetor-tool:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
  transform: translateY(-1px);
}

.evetor-tool.ativo {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary-dark);
  box-shadow: 0 2px 8px rgba(68, 162, 255, 0.4);
}

/* ============================================================
   CANVAS
   ============================================================ */
.evetor-canvas-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
}

.evetor-canvas-info {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 0.7rem;
  font-family: 'Courier New', monospace;
  color: var(--text-mute);
  background: rgba(255, 255, 255, 0.9);
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 5;
}

.evetor-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  user-select: none;
  background: #ffffff;
}

.evetor-canvas.modo-select { cursor: default; }
.evetor-canvas.modo-move { cursor: move; }
.evetor-canvas.modo-pen { cursor: crosshair; }
.evetor-canvas.modo-text { cursor: text; }

/* ============================================================
   PAINEL DE PROPRIEDADES
   ============================================================ */
.evetor-props {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.evetor-props-titulo {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-soft);
}

.evetor-props-vazio {
  text-align: center;
  padding: 20px 8px;
  color: var(--text-mute);
}

.evetor-props-vazio p { margin: 0 0 4px; font-size: 0.85rem; }
.evetor-props-dica { font-size: 0.7rem !important; opacity: 0.7; }

.evetor-prop-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}

.evetor-prop-grupo:last-child { border-bottom: none; }

.evetor-prop-grupo-titulo {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.evetor-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-soft);
  display: block;
}

.evetor-label-mini {
  font-size: 0.7rem;
  color: var(--text-mute);
  display: block;
}

.evetor-color-linha {
  display: flex;
  align-items: center;
  gap: 8px;
}

.evetor-color {
  width: 40px;
  height: 36px;
  padding: 2px;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
}

.evetor-color::-webkit-color-swatch-wrapper { padding: 0; }
.evetor-color::-webkit-color-swatch { border: none; border-radius: 4px; }
.evetor-color::-moz-color-swatch { border: none; border-radius: 4px; }

.evetor-color-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--text-mute);
  cursor: pointer;
}

.evetor-color-toggle input { margin: 0; }

.evetor-range {
  width: 100%;
  margin-top: 2px;
}

.evetor-input-num {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.78rem;
  background: #fff;
  color: var(--text);
  box-sizing: border-box;
  outline: none;
  margin-top: 2px;
}

.evetor-input-num:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(68, 162, 255, 0.15);
}

.evetor-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.78rem;
  background: #fff;
  color: var(--text);
  resize: vertical;
  box-sizing: border-box;
  margin-top: 2px;
}

.evetor-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* ============================================================
   CAMADAS (painel colapsável)
   ============================================================ */
.evetor-camadas-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.evetor-camadas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--text);
  gap: 8px;
}

.evetor-camadas-header:hover { background: var(--primary-soft); }

.evetor-camadas-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  margin-left: auto;
}

.evetor-camadas-seta {
  transition: transform .2s;
  font-size: 0.9rem;
  color: var(--text-mute);
}

.evetor-camadas-wrap.aberto .evetor-camadas-seta {
  transform: rotate(180deg);
}

.evetor-camadas-body {
  padding: 10px;
  max-height: 240px;
  overflow-y: auto;
}

.evetor-camadas-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.evetor-camadas-vazio {
  text-align: center;
  color: var(--text-mute);
  font-size: 0.8rem;
  padding: 12px;
  margin: 0;
}

.evetor-camada {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f8fafc;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  font-size: 0.8rem;
}

.evetor-camada:hover { background: var(--primary-soft); }

.evetor-camada.ativa {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.evetor-camada-icone {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.evetor-camada-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.evetor-camada-acoes {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.evetor-camada-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: background .15s;
}

.evetor-camada-btn:hover { background: rgba(0, 0, 0, 0.08); }
.evetor-camada-btn.ativo { color: var(--primary); }
.evetor-camada-btn.oculto { opacity: 0.4; }

/* ============================================================
   BARRA INFERIOR
   ============================================================ */
.evetor-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  flex-wrap: wrap;
}

.evetor-barra-esq,
.evetor-barra-dir {
  display: flex;
  align-items: center;
  gap: 6px;
}

.evetor-zoom-label {
  min-width: 50px;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--primary-dark);
}

.evetor-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-soft);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f8fafc;
  transition: background .15s;
}

.evetor-toggle:hover { background: var(--primary-soft); }

.evetor-toggle input { margin: 0; cursor: pointer; }

/* ============================================================
   AÇÕES FINAIS
   ============================================================ */
.evetor-acoes-finais {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.evetor-btn-primario {
  padding: 12px 22px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform .2s, box-shadow .2s;
}

.evetor-btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
}

.evetor-btn-secundario {
  padding: 12px 18px;
  border: none;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .2s;
}

.evetor-btn-secundario:hover { background: #cce4ff; }

/* ============================================================
   ELEMENTOS DO SVG — seleção visual
   ============================================================ */
.evetor-el { cursor: pointer; }
.evetor-el:hover { filter: drop-shadow(0 0 3px rgba(68, 162, 255, 0.6)); }

.evetor-handle {
  fill: #fff;
  stroke: var(--primary);
  stroke-width: 2;
  cursor: pointer;
  pointer-events: all;
}

.evetor-handle:hover {
  fill: var(--primary);
}

.evetor-handle.nw, .evetor-handle.se { cursor: nwse-resize; }
.evetor-handle.ne, .evetor-handle.sw { cursor: nesw-resize; }
.evetor-handle.n, .evetor-handle.s { cursor: ns-resize; }
.evetor-handle.e, .evetor-handle.w { cursor: ew-resize; }

.evetor-rot-handle {
  fill: #fff;
  stroke: var(--primary);
  stroke-width: 2;
  cursor: grab;
  pointer-events: all;
}

.evetor-bbox {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  pointer-events: none;
}

.evetor-bezier-ponto {
  fill: #fff;
  stroke: var(--primary);
  stroke-width: 1.5;
  cursor: pointer;
  pointer-events: all;
}

.evetor-bezier-ponto:hover { fill: var(--primary); }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
  .evetor-workspace {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .evetor-toolbar {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
    gap: 12px;
  }

  .evetor-toolbar-grupo {
    flex-direction: column;
    flex-shrink: 0;
  }


  .evetor-tool {
    width: 38px;
    height: 38px;
    aspect-ratio: auto;
  }

  .evetor-canvas-wrap {
    height: 60vh;
    min-height: 400px;
  }

  .evetor-props {
    max-height: 400px;
  }

  .evetor-acoes-finais button {
    flex: 1;
    min-width: 120px;
    justify-content: center;
  }
}

/* ============================================================
   DARK MODE
   ============================================================ */
body.dark .evetor-editor { background: #0f172a; }
body.dark .evetor-toolbar,
body.dark .evetor-props,
body.dark .evetor-barra,
body.dark .evetor-camadas-wrap {
  background: #1e293b;
  border-color: #334155;
}
body.dark .evetor-tool { background: #0f172a; color: #f1f5f9; }
body.dark .evetor-tool:hover { background: #334155; color: #93c5fd; }
body.dark .evetor-canvas-wrap { background: #1e293b; }
body.dark .evetor-canvas-info { background: rgba(30, 41, 59, 0.9); color: #cbd5e1; }
body.dark .evetor-input-num,
body.dark .evetor-input { background: #0f172a; color: #f1f5f9; border-color: #334155; }
body.dark .evetor-color { background: #0f172a; }
body.dark .evetor-camada { background: #0f172a; }
body.dark .evetor-camada:hover { background: #334155; }
body.dark .evetor-camada.ativa { background: #1e3a8a; }

/* ============================================================
   EDITOR VETORIAL — grade com cor do grupo e tamanho responsivo
   ============================================================ */

/* ---------- 🔵 BÁSICAS — grade azul ---------- */
.grupo-ferramentas[data-grupo="basicas"] section.secao .evetor-canvas-wrap #evetorGrid path {
  stroke: rgba(68, 162, 255, 0.35) !important;
}
.grupo-ferramentas[data-grupo="basicas"] section.secao .evetor-canvas-wrap #evetorGrid rect {
  fill: url(#evetorGrid) !important;
  opacity: 0.6;
}

/* ---------- 🟠 BÔNUS — grade laranja ---------- */
.grupo-ferramentas[data-grupo="bonus"] section.secao .evetor-canvas-wrap #evetorGrid path {
  stroke: rgba(249, 115, 22, 0.35) !important;
}

/* ---------- 🟣 PREMIUM — grade lilás ---------- */
.grupo-ferramentas[data-grupo="premium"] section.secao .evetor-canvas-wrap #evetorGrid path {
  stroke: rgba(139, 92, 246, 0.35) !important;
}

/* ---------- 🔴 PRO — grade vermelha ---------- */
.grupo-ferramentas[data-grupo="pro"] section.secao .evetor-canvas-wrap #evetorGrid path {
  stroke: rgba(220, 38, 38, 0.35) !important;
}

/* ---------- ⭐ ADICIONAIS — grade dourada ---------- */
.grupo-ferramentas[data-grupo="adicional"] section.secao .evetor-canvas-wrap #evetorGrid path {
  stroke: rgba(245, 158, 11, 0.6) !important;
}

/* ============================================================
   GRADE — tamanho adapta ao card expandido
   ============================================================ */

/* Quando expandido, a grade acompanha o tamanho do canvas */
section.secao.expandida .evetor-canvas-wrap {
  /* Garante que o container cresce */
  width: 100%;
  height: 100%;
}

/* Força o SVG a ocupar todo o espaço */
section.secao.expandida .evetor-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ---------- MOBILE ---------- */
@media (max-width: 600px) {
  .evetor-canvas-wrap #evetorGrid path {
    stroke-width: 0.4 !important;   /* Grade mais fina no mobile */
  }
}

/* ---------- Dark mode ---------- */
body.dark .grupo-ferramentas[data-grupo="basicas"] section.secao .evetor-canvas-wrap #evetorGrid path {
  stroke: rgba(68, 162, 255, 0.5) !important;
}
body.dark .grupo-ferramentas[data-grupo="bonus"] section.secao .evetor-canvas-wrap #evetorGrid path {
  stroke: rgba(249, 115, 22, 0.5) !important;
}
body.dark .grupo-ferramentas[data-grupo="premium"] section.secao .evetor-canvas-wrap #evetorGrid path {
  stroke: rgba(139, 92, 246, 0.5) !important;
}
body.dark .grupo-ferramentas[data-grupo="pro"] section.secao .evetor-canvas-wrap #evetorGrid path {
  stroke: rgba(220, 38, 38, 0.5) !important;
}
body.dark .grupo-ferramentas[data-grupo="adicional"] section.secao .evetor-canvas-wrap #evetorGrid path {
  stroke: rgba(245, 158, 11, 0.55) !important;
}


/* ============================================================
   EDITOR VETORIAL — seleção múltipla + instruções
   ============================================================ */

.evetor-selecao-info {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--primary);
  color: #fff;
  font-family: 'Courier New', monospace;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}

.evetor-selecao-info.ativo {
  opacity: 1;
}

.evetor-instrucao {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.7rem;
  color: var(--text-mute);
  background: rgba(255, 255, 255, 0.95);
  padding: 5px 10px;
  border-radius: 6px;
  z-index: 5;
  pointer-events: none;
  opacity: 0.75;
  transition: opacity .2s;
  max-width: 60%;
}

.evetor-instrucao kbd {
  background: #f3f4f6;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: 'Courier New', monospace;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--text);
}

/* Quando há seleção, esconde a instrução */
.evetor-canvas-wrap.tem-selecao .evetor-instrucao {
  opacity: 0;
}

/* No mobile, esconde a instrução */
@media (max-width: 600px) {
  .evetor-instrucao {
    display: none;
  }
}

/* Feedback visual quando Shift está pressionado */
body.evetor-shift-ativo .evetor-canvas {
  box-shadow: inset 0 0 0 2px var(--primary);
}

body.dark .evetor-instrucao {
  background: rgba(30, 41, 59, 0.95);
  color: #cbd5e1;
}
body.dark .evetor-instrucao kbd {
  background: #0f172a;
  color: #f1f5f9;
}



/* ============================================================
   EDITOR VETORIAL — MOBILE (corrige sobreposição das props)
   ============================================================ */

@media (max-width: 768px) {

  /* ============================================================
     WORKSPACE — empilha tudo em 1 coluna
     ============================================================ */
  .evetor-workspace {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* ============================================================
     TOOLBAR — horizontal com scroll (como está)
     ============================================================ */
  .evetor-toolbar {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 10px !important;
    gap: 12px !important;
    min-height: 70px;
    max-height: 100px;
    -webkit-overflow-scrolling: touch;
  }

  .evetor-toolbar-grupo {
    flex-direction: column !important;
    flex-shrink: 0;
    width: auto !important;
  }

  .evetor-toolbar-titulo {
    font-size: 0.55rem !important;
    white-space: nowrap;
    padding: 0 2px;
  }

  .evetor-tools,
  .evetor-acoes-rapidas {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }

  .evetor-tool {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    aspect-ratio: auto !important;
  }

  /* ============================================================
     CANVAS — altura fixa confortável
     ============================================================ */
  .evetor-canvas-wrap {
    height: 50vh !important;
    min-height: 320px !important;
    max-height: 450px !important;
  }

  /* ============================================================
     🔑 PROPRIEDADES — AUTO HEIGHT (o que estava faltando)
     ============================================================ */
  .evetor-props {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;      /* 👈 deixa crescer naturalmente */
    padding: 14px !important;
  }

  /* Grupos dentro das props: espaçamento normal */
  .evetor-prop-grupo {
    padding-bottom: 12px;
    margin-bottom: 4px;
  }

  /* Inputs maiores pra dedo */
  .evetor-input-num,
  .evetor-input {
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
  }

  .evetor-color {
    width: 46px;
    height: 42px;
  }

  /* ============================================================
     CAMADAS — altura mínima
     ============================================================ */
  .evetor-camadas-body {
    max-height: 300px !important;
    overflow-y: auto !important;
  }

  /* ============================================================
     BARRA INFERIOR — Zoom/Grid/Snap empilhados
     ============================================================ */
  .evetor-barra {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px !important;
    height: auto !important;
  }

  .evetor-barra-esq,
  .evetor-barra-dir {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap;
  }

  /* ============================================================
     AÇÕES FINAIS — botões empilhados
     ============================================================ */
  .evetor-acoes-finais {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding-top: 12px;
  }

  .evetor-acoes-finais button {
    width: 100% !important;
    justify-content: center !important;
  }
}


@media (max-width: 768px) {
  .evetor-tools,
  .evetor-acoes-rapidas {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 4px;
  }

  .evetor-tools .evetor-tool,
  .evetor-acoes-rapidas .evetor-tool {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
  }
}


/* ============================================================
   TOOLBAR MOBILE — VERSÃO DEFINITIVA
   Sobrescreve todo CSS mobile anterior para a toolbar
   ============================================================ */

@media (max-width: 768px) {

  /* ============================================================
     TOOLBAR: empilha os grupos verticalmente
     ============================================================ */
  .evetor-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 12px 10px !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    min-height: auto !important;
    background: #f8fafc !important;
    border-radius: 14px !important;
  }

  /* ============================================================
     GRUPO: título + grade
     ============================================================ */
  .evetor-toolbar-grupo {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Título mais visível */
  .evetor-toolbar-titulo {
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    color: #2d7fd1 !important;
    text-transform: uppercase !important;
    text-align: left !important;
    padding: 0 0 4px 0 !important;
    border-bottom: 2px solid #dbeafe !important;
    white-space: nowrap !important;
    background: transparent !important;
  }

  /* ============================================================
     🔑 GRID DE BOTÕES: 6 por linha, 3 linhas = todas visíveis
     Sem scroll horizontal feio
     ============================================================ */
  .evetor-tools,
  .evetor-acoes-rapidas {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    flex-wrap: unset !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* Remove scrollbar customizada */
  .evetor-tools::-webkit-scrollbar,
  .evetor-acoes-rapidas::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* ============================================================
     BOTÕES: maiores, quadrados, fácil toque
     ============================================================ */
  .evetor-tool,
  .evetor-tools .evetor-tool,
  .evetor-acoes-rapidas .evetor-tool {
    flex: unset !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;      /* quadrado */
    border-radius: 12px !important;
    background: #fff !important;
    border: 2px solid #e5e7eb !important;
    padding: 0 !important;
    font-size: 1.3rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    transition: all .15s ease !important;
  }

  .evetor-tool span {
    font-size: 1.3rem !important;
    line-height: 1 !important;
  }

  /* Estado ativo */
  .evetor-tool.ativo {
    background: var(--primary) !important;
    border-color: var(--primary-dark) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(68, 162, 255, 0.4) !important;
  }

  /* Hover/toque */
  .evetor-tool:active {
    transform: scale(0.92) !important;
  }
}

/* ============================================================
   TELAS MUITO PEQUENAS (≤ 360px): 5 por linha
   ============================================================ */
@media (max-width: 360px) {
  .evetor-tools,
  .evetor-acoes-rapidas {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}



/* ============================================================ */
/* HOVER DOS BOTÕES DA REVISTA — igual ao cardápio e catálogo   */
/* ============================================================ */
.rev-btn-secundario {
  transition: all .2s ease;
}

.rev-btn-secundario:hover {
  background: rgb(204, 228, 255);
  color: rgb(45, 127, 209);
  border-color: rgb(45, 127, 209);
}

/* Bônus: hover dos botões primários (PDF e HTML) */
.rev-btn-primario {
  transition: all .2s ease;
}

.rev-btn-primario:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* Bônus: hover dos botões mini (✕ Remover) */
.rev-btn-mini {
  transition: all .2s ease;
}

.rev-btn-mini:hover {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}




/* ============================================================ */
/* PREVIEW DO RECIBO                                             */
/* ============================================================ */
.rc-render-header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  border-radius: 8px 8px 0 0;
  color: #fff;
}
.rc-render-logo {
  max-height: 60px;
  max-width: 120px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 4px;
}
.rc-render-header-info { flex: 1; }
.rc-render-emissor { margin: 0 0 4px; font-size: 1.2rem; font-weight: 900; }
.rc-render-doc { margin: 0; font-size: 0.82rem; opacity: 0.9; }
.rc-render-contato { margin: 2px 0 0; font-size: 0.75rem; opacity: 0.85; }

.rc-render-titulo-wrap { padding: 20px 24px 0; }
.rc-render-titulo { margin: 0 0 4px; font-size: 1.6rem; font-weight: 900; letter-spacing: 1px; }
.rc-render-numero { font-size: 0.85rem; font-weight: 700; color: #6b7280; }
.rc-render-data { font-size: 0.82rem; color: #6b7280; margin-top: 2px; }

.rc-render-valor {
  margin: 16px 24px;
  padding: 14px 18px;
  border-radius: 10px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rc-render-valor span { font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; opacity: 0.9; }
.rc-render-valor strong { font-size: 1.4rem; font-weight: 900; }

.rc-render-secao { padding: 0 24px 14px; }
.rc-render-secao-titulo {
  font-size: 0.7rem;
  font-weight: 900;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.rc-render-cliente { font-size: 1rem; font-weight: 700; }
.rc-render-cliente-info { font-size: 0.8rem; color: #6b7280; margin-top: 2px; }
.rc-render-referente { font-size: 0.88rem; white-space: pre-wrap; }

.rc-render-pix {
  margin: 16px 24px;
  padding: 18px;
  background: #f9fafb;
  border-radius: 12px;
  text-align: center;
  border: 1px solid #e5e7eb;
}
.rc-render-pix-titulo { font-size: 0.88rem; font-weight: 900; margin-bottom: 12px; }
.rc-render-qr { display: inline-block; padding: 8px; background: #fff; border-radius: 8px; }
.rc-render-qr img, .rc-render-qr canvas { display: block; }
.rc-render-pix-info { font-size: 0.72rem; color: #6b7280; margin-top: 10px; }

.rc-render-assinatura { padding: 32px 24px 24px; text-align: center; }
.rc-render-assinatura-linha {
  width: 220px;
  margin: 0 auto 8px;
  border-top: 1px solid #1a202c;
}
.rc-render-assinatura-nome { font-size: 0.82rem; font-weight: 700; }



/* ============================================================ */
/* PREVIEW DO CONTRATO                                           */
/* ============================================================ */
.ct-render-header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px 28px;
  border-radius: 8px 8px 0 0;
  color: #fff;
}
.ct-render-logo {
  max-height: 50px;
  max-width: 100px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 4px;
}
.ct-render-header-info { flex: 1; }
.ct-render-titulo-contrato {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.ct-render-numero { font-size: 0.82rem; opacity: 0.9; margin-top: 4px; }

.ct-render-partes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 20px 28px;
}
.ct-render-parte {
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.ct-render-parte-titulo {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #6b7280;
  margin-bottom: 6px;
}
.ct-render-parte-nome { font-size: 0.95rem; font-weight: 800; margin-bottom: 6px; }
.ct-render-parte-info { font-size: 0.76rem; color: #4b5563; line-height: 1.5; }

.ct-render-intro {
  padding: 0 28px 14px;
  font-size: 0.88rem;
  text-align: justify;
}

.ct-render-objeto {
  margin: 0 28px 18px;
  padding: 12px 16px;
  background: #f0fdf4;
  border-left: 4px solid #059669;
  border-radius: 8px;
}
.ct-render-objeto-titulo {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #059669;
  margin-bottom: 6px;
}
.ct-render-objeto-texto { font-size: 0.86rem; white-space: pre-wrap; }

.ct-render-clausula { padding: 0 28px; margin-bottom: 18px; }
.ct-render-clausula-titulo { font-size: 0.92rem; font-weight: 900; margin-bottom: 6px; }
.ct-render-clausula-texto {
  font-size: 0.86rem;
  text-align: justify;
  white-space: pre-wrap;
}

.ct-render-valor {
  margin: 20px 28px;
  padding: 14px 18px;
  border-radius: 10px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ct-render-valor span { font-size: 0.72rem; font-weight: 800; letter-spacing: 1px; opacity: 0.9; }
.ct-render-valor strong { font-size: 1.3rem; font-weight: 900; }

.ct-render-assinaturas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 50px 28px 16px;
}
.ct-render-assinatura { text-align: center; }
.ct-render-assinatura-linha {
  border-top: 1px solid #1a202c;
  margin-bottom: 8px;
}
.ct-render-assinatura-nome { font-size: 0.84rem; font-weight: 700; }
.ct-render-assinatura-rotulo {
  font-size: 0.68rem;
  color: #6b7280;
  letter-spacing: 1px;
  margin-top: 2px;
}

.ct-render-local-data { padding: 16px 28px; font-size: 0.86rem; }

@media (max-width: 700px) {
  .ct-render-partes,
  .ct-render-assinaturas {
    grid-template-columns: 1fr;
  }
  .ct-render-header,
  .ct-render-partes,
  .ct-render-intro,
  .ct-render-objeto,
  .ct-render-clausula,
  .ct-render-local-data {
    padding-left: 18px;
    padding-right: 18px;
  }
  .ct-render-valor { margin-left: 18px; margin-right: 18px; }
}


/* ============================================================ */
/* PREVIEW DO CARTÃO — ajustes finos                             */
/* ============================================================ */
#cvPreviewFrente,
#cvPreviewVerso {
  width: 360px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 700px) {
  #cvPreviewFrente,
  #cvPreviewVerso {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 9/5;
    height: auto;
  }
}

/* Grid de cores — 2 colunas */
.cv-bloco .cv-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  align-items: end !important;
}

@media (max-width: 700px) {
  .cv-bloco .cv-grid-2,
  .cv-bloco .cv-grid-3 {
    grid-template-columns: 1fr !important;
  }
}