:root {
  /* ═══ PALETA CENTRAL DO SITE (design tokens) ═══
     TODAS as cores do site vivem AQUI. Regras:
       1. Nenhuma cor hardcoded fora destas variáveis.
       2. Cada tema (html[data-tema="..."]) redefine os tokens que diferem
          da paleta padrão (Kwai). O JS aplica o tema ativo (app.js applyTema).
       3. Tokens "--*-rgb" guardam só o número (ex: 240, 136, 80) para o uso
          rgba(var(--*-rgb), alfa) — a cor continua única no token.
       4. Tokens lidos pelo JS (lerCoresDoTema em app.js) têm valor DIRETO
          (sem var()) para getComputedStyle devolver a cor resolvida. */

  /* ── Marca (ação / estados) ── */
  --marca-primaria: #F08850;          /* ação principal */
  --marca-primaria-suave: #F5A878;    /* gradiente/hover */
  --marca-primaria-clara: #fcd9c0;    /* shimmer do título */
  --marca-sucesso: #6FB89A;           /* pronto / entregue */
  --marca-sucesso-suave: #93CFB3;
  --marca-erro: #E58A8A;              /* falha */
  --marca-erro-forte: #d47a7a;        /* gradiente de botão perigoso */

  /* ── Fundos ── */
  --fundo-primario: #1c1a26;          /* painel, inputs */
  --fundo-secundario: #25233a;        /* container, modais */
  --fundo-card: #2d2a44;              /* card neutro (fila) */
  --fundo-card-processando: #2d2620;  /* card baixando/editando */
  --fundo-card-pronto: #1f2d28;       /* card pronto/entregue */
  --fundo-card-falha: #2d2226;        /* card falhou */
  --fundo-receiving: #2d2a3a;         /* card recebendo upload */
  --fundo-upload-ativo: #262340;      /* caixinha de upload pressionada */
  --fundo-body-1: #1c1a26;            /* gradiente de fundo do body */
  --fundo-body-2: #25233a;
  --fundo-body-3: #18162a;
  --fundo-body-4: #1f1d2f;
  --fundo-decoracao: rgba(var(--acento-rgb), 0.04); /* blob de luz (body::before) */

  /* ── Texto ── */
  --texto-primario: #e5e1f0;
  --texto-suave: #9a96b0;
  --texto-branco: #fff;               /* texto/ícone sobre marca */

  /* ── Acento (identidade lilás) ── */
  --acento: #b5a7e0;
  --acento-suave: #9b8fd0;
  --acento-borda: #3d3658;
  --acento-claro: #e4dff7;            /* shimmer do título */
  --acento-glow: rgba(var(--acento-rgb), 0.06);
  --acento-spinner: #a78bda;          /* arco lilás do spinner (lido pelo JS) */
  --borda-receiving: #5a5570;         /* borda de card recebendo (lido pelo JS) */

  /* ── Drive ── */
  --drive-azul: #a8c0ff;
  --drive-azul-claro: #b8ccee;

  /* ── RGB puro (para rgba(var(--*-rgb), α)) ── */
  --marca-primaria-rgb: 240, 136, 80;
  --marca-sucesso-rgb: 111, 184, 154;
  --marca-erro-rgb: 229, 138, 138;
  --acento-rgb: 181, 167, 224;
  --texto-suave-rgb: 154, 150, 176;
  --texto-branco-rgb: 255, 255, 255;

  /* ── Molde (cores fixas do editor de vídeo — independentes do tema) ── */
  --molde-amarelo: #B76A0A;              /* título + legenda no vídeo */
  --molde-amarelo-rgb: 183, 106, 10;
  --preto-rgb: 0, 0, 0;               /* backdrops/sombras */
  --drive-azul-rgb: 130, 160, 255;

  /* ── Amostras do ícone da palheta (tiles de tema) ──
     TODOS os temas declaram 5 amostras aqui no :root — as bolinhas do
     seletor ficam SEMPRE ativas (prévia da paleta, mesmo fora do tema).
     --paleta-pendente resta só como fallback defensivo. */
  --paleta-pendente: #55536b;
  --tema-editai-accent-1: #F08850;
  --tema-editai-accent-2: #6FB89A;
  --tema-editai-accent-3: #b5a7e0;
  --tema-editai-accent-4: #E58A8A;
  --tema-editai-accent-5: #9a96b0;
  --tema-galactus-accent-1: #5B8CFF;
  --tema-galactus-accent-2: #52C8A9;
  --tema-galactus-accent-3: #a5bdf2;
  --tema-galactus-accent-4: #E0557B;
  --tema-galactus-accent-5: #8d9ac4;
  --tema-elefantes-accent-1: #E05A7E;
  --tema-elefantes-accent-2: #E39BB3;
  --tema-elefantes-accent-3: #C94E6B;
  --tema-elefantes-accent-4: #F7C8D8;
  --tema-elefantes-accent-5: #f5e6ec;
}

/* ═══ TEMAS ═══
   O JS aplica o tema ativo via html[data-tema="..."] (app.js applyTema).
   Cada bloco redefine SOMENTE os tokens que diferem da paleta padrão
   (Kwai, em :root). Tema inexistente/inválido cai no default. */

html[data-tema="galactus"] {
  /* Paleta Galactus: espaço sideral — azuis e pretos profundos, cores frias.
     Marca = azul galáctico; acento = lilás/azul-gelo; sucesso/erro frios. */

  /* ── Marca (ação / estados) ── */
  --marca-primaria: #5B8CFF;          /* ação principal (azul elétrico galáctico) */
  --marca-primaria-suave: #7FA7FF;    /* gradiente/hover */
  --marca-primaria-clara: #C2D8FF;    /* shimmer do título */
  --marca-sucesso: #52C8A9;           /* pronto / entregue (verde frio) */
  --marca-sucesso-suave: #7CDCC1;
  --marca-erro: #E0557B;              /* falha (vermelho frio) */
  --marca-erro-forte: #C24466;        /* gradiente de botão perigoso */

  /* ── Fundos (espaço profundo) ── */
  --fundo-primario: #12141f;          /* painel, inputs */
  --fundo-secundario: #181c30;        /* container, modais */
  --fundo-card: #1f2438;              /* card neutro (fila) */
  --fundo-card-processando: #1b2338;  /* card baixando/editando */
  --fundo-card-pronto: #122830;       /* card pronto/entregue */
  --fundo-card-falha: #2b1d2b;        /* card falhou */
  --fundo-receiving: #1d2340;         /* card recebendo upload */
  --fundo-upload-ativo: #1a2044;      /* caixinha de upload pressionada */
  --fundo-body-1: #0b0e20;            /* gradiente de fundo do body */
  --fundo-body-2: #141834;
  --fundo-body-3: #070a1e;
  --fundo-body-4: #0e1228;

  /* ── Texto ── */
  --texto-primario: #e6ecff;          /* quase branco com leve tom de gelo */
  --texto-suave: #8d9ac4;             /* azul acinzentado apagado */

  /* ── Acento (identidade lilás → azul-gelo) ── */
  --acento: #a5bdf2;
  --acento-suave: #85a0d8;
  --acento-borda: #3a4a7a;
  --acento-claro: #dbe7ff;            /* shimmer do título */
  --acento-glow: rgba(var(--acento-rgb), 0.06);
  --acento-spinner: #97b5f0;          /* arco do spinner (lido pelo JS) */
  --borda-receiving: #4d5a8e;         /* borda de card recebendo (lido pelo JS) */

  /* ── RGB puro (para rgba(var(--*-rgb), α)) ── */
  --marca-primaria-rgb: 91, 140, 255;
  --marca-sucesso-rgb: 82, 200, 169;
  --marca-erro-rgb: 224, 85, 123;
  --acento-rgb: 165, 189, 242;
  --texto-suave-rgb: 141, 154, 196;
}

/* ── Estrelas do espaço sideral (camada própria do tema Galactus) ──
   Pontinhos brancos espalhados com opacidade sutil — não cobrem o fundo
   nem poluem a leitura; o blob de luz (body::before) segue abaixo. */
html[data-tema="galactus"] body::after {
  content: '';
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 14%, rgba(var(--texto-branco-rgb), 0.55), transparent 100%),
    radial-gradient(1px 1px at 16% 72%, rgba(var(--texto-branco-rgb), 0.3), transparent 100%),
    radial-gradient(0.8px 0.8px at 24% 38%, rgba(var(--texto-branco-rgb), 0.2), transparent 100%),
    radial-gradient(1px 1px at 33% 8%, rgba(var(--texto-branco-rgb), 0.35), transparent 100%),
    radial-gradient(1.5px 1.5px at 41% 55%, rgba(var(--texto-branco-rgb), 0.45), transparent 100%),
    radial-gradient(0.8px 0.8px at 49% 26%, rgba(var(--texto-branco-rgb), 0.2), transparent 100%),
    radial-gradient(1px 1px at 57% 84%, rgba(var(--texto-branco-rgb), 0.3), transparent 100%),
    radial-gradient(2px 2px at 63% 42%, rgba(var(--texto-branco-rgb), 0.5), transparent 100%),
    radial-gradient(0.8px 0.8px at 71% 12%, rgba(var(--texto-branco-rgb), 0.25), transparent 100%),
    radial-gradient(1px 1px at 78% 64%, rgba(var(--texto-branco-rgb), 0.3), transparent 100%),
    radial-gradient(1.5px 1.5px at 86% 30%, rgba(var(--texto-branco-rgb), 0.5), transparent 100%),
    radial-gradient(0.8px 0.8px at 93% 78%, rgba(var(--texto-branco-rgb), 0.2), transparent 100%),
    radial-gradient(1px 1px at 5% 88%, rgba(var(--texto-branco-rgb), 0.3), transparent 100%),
    radial-gradient(2.5px 2.5px at 12% 46%, rgba(var(--texto-branco-rgb), 0.6), transparent 100%),
    radial-gradient(0.8px 0.8px at 22% 92%, rgba(var(--texto-branco-rgb), 0.2), transparent 100%),
    radial-gradient(1px 1px at 29% 58%, rgba(var(--texto-branco-rgb), 0.25), transparent 100%),
    radial-gradient(1px 1px at 37% 18%, rgba(var(--texto-branco-rgb), 0.4), transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 80%, rgba(var(--texto-branco-rgb), 0.45), transparent 100%),
    radial-gradient(0.8px 0.8px at 52% 48%, rgba(var(--texto-branco-rgb), 0.2), transparent 100%),
    radial-gradient(1px 1px at 60% 6%, rgba(var(--texto-branco-rgb), 0.35), transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 68%, rgba(var(--texto-branco-rgb), 0.5), transparent 100%),
    radial-gradient(0.8px 0.8px at 75% 34%, rgba(var(--texto-branco-rgb), 0.2), transparent 100%),
    radial-gradient(1px 1px at 82% 90%, rgba(var(--texto-branco-rgb), 0.3), transparent 100%),
    radial-gradient(1px 1px at 90% 16%, rgba(var(--texto-branco-rgb), 0.35), transparent 100%),
    radial-gradient(0.8px 0.8px at 97% 50%, rgba(var(--texto-branco-rgb), 0.2), transparent 100%),
    radial-gradient(0.8px 0.8px at 10% 60%, rgba(var(--texto-branco-rgb), 0.15), transparent 100%),
    radial-gradient(0.8px 0.8px at 35% 32%, rgba(var(--texto-branco-rgb), 0.15), transparent 100%),
    radial-gradient(0.8px 0.8px at 54% 70%, rgba(var(--texto-branco-rgb), 0.15), transparent 100%),
    radial-gradient(0.8px 0.8px at 73% 22%, rgba(var(--texto-branco-rgb), 0.15), transparent 100%),
    radial-gradient(0.8px 0.8px at 88% 46%, rgba(var(--texto-branco-rgb), 0.15), transparent 100%),
    radial-gradient(0.8px 0.8px at 4% 34%, rgba(var(--texto-branco-rgb), 0.15), transparent 100%),
    radial-gradient(0.8px 0.8px at 18% 8%, rgba(var(--texto-branco-rgb), 0.15), transparent 100%),
    radial-gradient(1px 1px at 26% 26%, rgba(var(--texto-branco-rgb), 0.3), transparent 100%),
    radial-gradient(1px 1px at 42% 92%, rgba(var(--texto-branco-rgb), 0.3), transparent 100%),
    radial-gradient(0.8px 0.8px at 59% 14%, rgba(var(--texto-branco-rgb), 0.2), transparent 100%),
    radial-gradient(0.8px 0.8px at 66% 86%, rgba(var(--texto-branco-rgb), 0.2), transparent 100%),
    radial-gradient(0.8px 0.8px at 80% 56%, rgba(var(--texto-branco-rgb), 0.15), transparent 100%),
    radial-gradient(1px 1px at 94% 6%, rgba(var(--texto-branco-rgb), 0.3), transparent 100%),
    radial-gradient(0.8px 0.8px at 6% 96%, rgba(var(--texto-branco-rgb), 0.2), transparent 100%),
    radial-gradient(1px 1px at 31% 44%, rgba(var(--texto-branco-rgb), 0.25), transparent 100%),
    radial-gradient(1px 1px at 47% 62%, rgba(var(--texto-branco-rgb), 0.25), transparent 100%),
    radial-gradient(1.5px 1.5px at 69% 96%, rgba(var(--texto-branco-rgb), 0.4), transparent 100%);
}
html[data-tema="elefantes"] {
  /* ═══ Elefantes — tema fofo: rosa e vermelho, mundo de doces ═══
     Cores vivas mas não exageradas, fundos rosas/marrons-rosados escuros
     e acolhedores (mesma hierarquia de luminância do Kwai: fundo escuro,
     texto claro). A identidade "lilás" do acento vira tom quente fofo. */

  /* ── Marca (ação / estados) ── */
  --marca-primaria: #E05A7E;          /* rosa vivo — ação principal */
  --marca-primaria-suave: #EC87A5;    /* gradiente/hover */
  --marca-primaria-clara: #FAD6E2;    /* shimmer do título */
  --marca-sucesso: #7DBBA0;           /* verde suave — pronto/entregue */
  --marca-sucesso-suave: #9ED3B8;
  --marca-erro: #E06060;              /* vermelho forte — falha */
  --marca-erro-forte: #C94E4E;        /* gradiente de botão perigoso */

  /* ── Fundos (mundo de doces em versão dark) ── */
  --fundo-primario: #241a22;          /* painel, inputs */
  --fundo-secundario: #2f222c;        /* container, modais */
  --fundo-card: #372a34;              /* card neutro (fila) */
  --fundo-card-processando: #3a2631;  /* card baixando/editando */
  --fundo-card-pronto: #242e29;       /* card pronto/entregue */
  --fundo-card-falha: #342327;        /* card falhou */
  --fundo-receiving: #392836;         /* card recebendo upload */
  --fundo-upload-ativo: #2b1f28;      /* caixinha de upload pressionada */
  --fundo-body-1: #241a22;            /* gradiente de fundo do body */
  --fundo-body-2: #2c1f28;
  --fundo-body-3: #1d131c;
  --fundo-body-4: #261b24;

  /* ── Texto ── */
  --texto-primario: #f5e6ec;          /* claro rosado, legível no escuro */
  --texto-suave: #a88f9d;

  /* ── Acento (identidade rosê quente) ── */
  --acento: #E39BB3;
  --acento-suave: #c97e99;
  --acento-borda: #4d3340;
  --acento-claro: #fbdce8;            /* shimmer do título */
  --acento-spinner: #dc8faa;          /* arco rosê do spinner (lido pelo JS) */
  --borda-receiving: #6d4a5c;         /* borda de card recebendo (lido pelo JS) */

  /* ── RGB puro (para rgba(var(--*-rgb), α)) ── */
  --marca-primaria-rgb: 224, 90, 126;
  --marca-sucesso-rgb: 125, 187, 160;
  --marca-erro-rgb: 224, 96, 96;
  --acento-rgb: 227, 155, 179;
  --texto-suave-rgb: 168, 143, 157;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(160deg, var(--fundo-body-1) 0%, var(--fundo-body-2) 30%, var(--fundo-body-3) 60%, var(--fundo-body-4) 100%);
  color: var(--texto-primario); padding: 16px; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  position: relative; overflow-x: hidden;
}

/* ── Fundo animado suave de lilás (blob de luz deslizando) ── */
/* Reduzido de 3 gradientes para 1 — economiza ~60% do trabalho do compositor
   em devices lentos. Pausado via JS (body.paused) quando a aba está em background. */
body::before {
  content: '';
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 600px 400px at 20% 30%, var(--fundo-decoracao), transparent 70%);
  background-size: 200% 200%;
  animation: bgDrift 30s ease-in-out infinite;
}
body.paused::before { animation-play-state: paused; }
@keyframes bgDrift {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}
.container {
  max-width: 560px; width: 100%; margin-top: 58px;
  background: var(--fundo-secundario); border-radius: 16px; padding: 20px;
  box-shadow: 0 4px 32px rgba(var(--preto-rgb), 0.5), 0 0 60px var(--acento-glow);
  border: 1px solid var(--acento-borda);
  position: relative; z-index: 1;
  /* Transicao suave de altura quando o conteudo (cards) aumenta/diminui.
     Usa max-height transicionavel + overflow hidden. */
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Engrenagem (canto superior direito) ── */
.settings-gear {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s ease;
  z-index: 5;
}
/* Hover é feature de ponteiro (mouse/trackpad); no touch o toque não dispara highlight */
@media (hover: hover) and (pointer: fine) {
.settings-gear:hover { transform: rotate(35deg); }
}
/* Estado ACTIVE: modal aberto → gear fica laranja (persistente) */
.settings-gear.btn-active { transform: rotate(35deg); }
/* Engrenagem SVG: cor e rotação via CSS (estados idle/active/working) */
.gear-icon {
  width: 100%; height: 100%; display: block;
  color: var(--acento);
  transition: transform 0.3s ease, color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
.settings-gear:hover .gear-icon { color: var(--marca-primaria); }
}
.settings-gear.btn-active .gear-icon { color: var(--marca-primaria); }
.settings-gear.btn-working .gear-icon {
  color: var(--marca-primaria);
  animation: gearSpin 1s linear infinite;
}
@keyframes gearSpin { to { transform: rotate(360deg); } }

/* ── Backdrop (embacia o fundo) ── */
.settings-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000;
  background: rgba(var(--preto-rgb), 0.40);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.settings-backdrop.open { opacity: 1; pointer-events: auto; }

/* ── Modal de configurações ── */
/* Wrapper compartilhado: garante alinhamento perfeito da aura com o
   modal, independente da altura dinâmica do conteúdo. O wrap cria o
   stacking context (z-index: 1001, à frente do backdrop z-1000). */
.settings-wrap {
  position: fixed; z-index: 1001;
  top: 8%; left: 50%;
  transform: translate(-50%, 16px);
  width: 90%; max-width: 380px;
  max-height: 80vh;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.settings-wrap.open {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, 0);
}
/* Aura: irmã do modal, DEPOIS dele no DOM com z-index menor, então
   pinta atrás do modal (que é opaco e cobre o centro). O que escapa
   é a silhueta luminosa. Usa box-shadow com BLUR alto (zero offset,
   spread positivo) em camadas — técnica neon-glow shape-aware:
   segue o border-radius do elemento, queda de luminância suave. */
.settings-aura {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 16px;
  background: transparent;
  pointer-events: none;
  box-shadow:
    0 0 10px 2px  rgba(var(--marca-primaria-rgb), 0.45),
    0 0 30px 8px  rgba(var(--marca-primaria-rgb), 0.25),
    0 0 70px 20px rgba(var(--marca-primaria-rgb), 0.10);
}
.settings-wrap.open .settings-aura {
  animation: auraPulse 2.8s ease-in-out infinite;
}
/* Pulso anima OPACIDADE (GPU-composited), nunca os valores de sombra
   (que causariam repaint a cada frame). */
@keyframes auraPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
.settings-modal {
  position: relative;
  width: 100%;
  background: var(--fundo-secundario);
  border: 1px solid rgba(var(--acento-rgb), 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(var(--preto-rgb), 0.55);
  display: flex; flex-direction: column;
  max-height: 80vh;
}

.settings-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--acento-borda);
}
.settings-modal-title {
  font-size: 0.9rem; font-weight: 600; color: var(--texto-primario);
}
.settings-close {
  width: 28px; height: 28px; padding: 0; border: none;
  background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
}
.close-icon { width: 28px; height: 28px; display: block; }

.settings-modal-body {
  padding: 8px 16px 18px;
  flex: 1; min-height: 0; overflow-y: auto;
}

/* ── Seção "Tamanho máximo" ── */
.settings-section { padding: 6px 0 10px; }

.settings-section-title {
  font-size: 0.82rem; color: var(--texto-suave);
  margin-bottom: 10px; display: block; font-weight: 500;
}

/* ── Sistema de ajuda "?" ────────────────────────────────────
   Cada função tem um título com um "?" ao lado: tocar abre um
   mini-modal com a explicação breve. Sem textos de apoio visíveis. */
.help-title-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.help-title-row .settings-section-title,
.help-title-row .acct-settings-label { margin-bottom: 0; }
.cards-header .help-title-row { margin-bottom: 0; }
.settings-modal-header .help-title-row,
.edit-modal-header .help-title-row,
.account-modal-header .help-title-row,
.activity-modal-header .help-title-row,
.acct-settings-header .help-title-row,
.gdrive-picker-header .help-title-row { margin-bottom: 0; }
.main-title-row {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 16px;
}
.main-title-row h1 { margin-bottom: 0; }
.help-btn {
  width: 20px; height: 20px; padding: 0; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--acento);
  background: transparent;
  color: var(--acento);
  font-size: 0.75rem; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.cards-header .help-btn {
  color: var(--texto-branco);
  border-color: var(--texto-branco);
}
@media (hover: hover) and (pointer: fine) {
  .help-btn:hover {
    color: var(--marca-primaria);
    border-color: var(--marca-primaria);
    background: rgba(var(--marca-primaria-rgb), 0.08);
  }
  .cards-header .help-btn:hover {
    color: var(--texto-branco);
    border-color: var(--texto-branco);
    background: rgba(var(--texto-branco-rgb), 0.15);
  }
}
.help-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 4000;
  background: rgba(var(--preto-rgb), 0.40);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.help-backdrop.open { opacity: 1; pointer-events: auto; }
.help-wrap {
  position: fixed; z-index: 4001;
  top: 22%; left: 50%;
  transform: translate(-50%, 16px);
  width: 88%; max-width: 330px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.help-wrap.open {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, 0);
}
.help-modal {
  background: var(--fundo-secundario);
  border: 1px solid rgba(var(--acento-rgb), 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(var(--preto-rgb), 0.55);
  display: flex; flex-direction: column;
}
.help-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--acento-borda);
}
.help-modal-title {
  font-size: 0.9rem; font-weight: 600; color: var(--texto-primario);
}
.help-modal-close {
  width: 28px; height: 28px; padding: 0; border: none;
  background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
}
.help-close-icon { width: 28px; height: 28px; display: block; color: var(--acento); }
.help-modal-body {
  padding: 14px 16px;
  font-size: 0.85rem; line-height: 1.5; color: var(--texto-primario);
}
.help-modal-body strong { color: var(--marca-primaria); font-weight: 700; }
.help-modal-body ul { margin: 8px 0 0; padding: 0; list-style: none; }
.help-modal-body li {
  position: relative; padding-left: 16px; margin: 7px 0;
}
.help-modal-body li::before {
  content: ''; position: absolute; left: 1px; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--acento);
}
.help-modal-body .help-opt-atual .help-opt-nome { color: var(--marca-primaria); }
.help-modal-body .help-opt-atual .help-opt-nome::after { content: ' \2713'; }
.help-modal-body .help-tip {
  margin-top: 12px; padding: 8px 10px;
  background: var(--fundo-primario);
  border: 1px solid var(--acento-borda);
  border-radius: 8px;
  font-size: 0.8rem; color: var(--texto-suave);
}

/* ── Stepper "Duração máxima" ──
   Valor livre em passos de 10s (0:30 até 10:00). A faixa NUNCA é exibida:
   o usuário descobre ao esbarrar no limite — o botão daquele lado fica
   cinza (disabled), comunicando sem texto que não dá para passar. */
.duration-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.step-btn {
  width: 72px; height: 56px; border-radius: 10px;
  border: 2px solid var(--acento-borda);
  background: var(--fundo-primario);
  color: var(--acento);
  font-size: 1.05rem; font-weight: 700;
  cursor: pointer; outline: none;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, box-shadow 0.25s ease;
}
.step-btn:not(:disabled):active {
  background: var(--marca-primaria-suave);
  border-color: var(--marca-primaria);
  color: var(--texto-branco);
}
.step-btn:disabled {
  border-color: var(--texto-suave);
  background: var(--fundo-card);
  color: var(--texto-suave);
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
.step-btn:not(:disabled):hover {
  border-color: var(--acento);
  background: var(--fundo-card);
}
}

.step-readout {
  min-width: 96px;
  font-size: 2rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--texto-branco);
  user-select: none;
}

/* ── Switch "Manter vídeo original" e "Enquadramento" ──
   Linha-card interativa com interruptor estilizado de alto contraste.
   Desliga o corte por job: com o switch ON o stepper fica cinza e o
   submit manda max_duration=0 (o worker pula o trim inteiro). */
.trim-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--fundo-card);
  border: 1.5px solid var(--acento-borda);
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .trim-switch-row:hover {
    border-color: var(--acento);
    background: var(--fundo-secundario);
  }
}

.trim-switch-row:active {
  background: var(--fundo-secundario);
}

.trim-switch-row.active {
  border-color: rgba(var(--marca-primaria-rgb), 0.45);
  box-shadow: 0 0 10px rgba(var(--marca-primaria-rgb), 0.12);
}

.trim-switch-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.trim-switch-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texto-primario);
  line-height: 1.2;
}

.trim-switch-sub {
  font-size: 0.75rem;
  color: var(--texto-suave);
  line-height: 1.2;
}

.trim-switch {
  width: 44px; height: 26px;
  border-radius: 13px;
  border: 1.5px solid var(--acento-borda);
  background: var(--fundo-primario);
  position: relative;
  cursor: pointer; outline: none;
  padding: 0;
  flex-shrink: 0;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.trim-switch-knob {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--texto-suave);
  box-shadow: 0 1px 3px rgba(var(--preto-rgb), 0.35);
  transition: left 0.22s cubic-bezier(0.4, 0, 0.2, 1), background 0.22s ease, box-shadow 0.22s ease;
}

.trim-switch.on {
  background: var(--marca-primaria);
  border-color: var(--marca-primaria);
  box-shadow: 0 0 8px rgba(var(--marca-primaria-rgb), 0.35);
}

.trim-switch.on .trim-switch-knob {
  left: 20px;
  background: var(--texto-branco);
  box-shadow: 0 2px 4px rgba(var(--preto-rgb), 0.4);
}

.duration-stepper.stepper-off {
  opacity: 0.38;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.duration-stepper.stepper-off .step-readout { color: var(--texto-suave); }

/* ── Recursos de IA (título + legenda) ──
   Dois switches independentes no cartão próprio (#tituloIaSection): um liga/
   desliga só o overlay de título gerado por IA, o outro só a legenda
   transcrita (whisper), sem mexer em modo/rota/destino/envio.
    Reutiliza a base .trim-switch* (mesmo padrão do #rotaSwitch); as classes
    .titulo-ia-* e .legenda-ia-* são PRÓPRIAS (nunca .edit-mode-btn/
    .destino-btn, que os apply* selecionam globalmente). Empilha no mobile
   como o .drive-status-folder (texto flexível, switch nunca esmagado). */
.titulo-ia-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.titulo-ia-row { margin-bottom: 2px; }
.titulo-ia-row .trim-switch-text { flex: 1; min-width: 0; }
.titulo-ia-switch { flex-shrink: 0; }
.legenda-ia-row { margin-bottom: 2px; }
.legenda-ia-row .trim-switch-text { flex: 1; min-width: 0; }
.legenda-ia-switch { flex-shrink: 0; }
#tituloIaSection .titulo-ia-group { width: 100%; }

h1 { font-size: 1.2rem; margin-bottom: 2px; }
.marca-editai {
  background: linear-gradient(90deg,
    var(--marca-primaria) 0%,
    var(--marca-primaria-suave) 35%,
    var(--marca-primaria-clara) 50%,
    var(--marca-primaria-suave) 65%,
    var(--marca-primaria) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleShimmer 7s ease-in-out infinite;
}
@keyframes titleShimmer {
  0%, 100% { background-position: 200% center; }
  50% { background-position: -200% center; }
}

.submit-area { margin-bottom: 16px; display: flex; flex-direction: column; }

/* Linha superior: caixinha de upload (esquerda) + caixa de colar (flex) */
.input-row { display: flex; align-items: stretch; }

/* ── Caixinha de anexo (esquerda da textarea) ────────────────────────
   Ícone canvas grande dentro de box pequeno. Mesma paleta lilás/laranja
   da engrenagem: lilás default, laranja no hover, scale no active.
   50px > 44px (touch target mínimo Apple/Google).

   Estados persistentes (não dependem de mouse):
   idle    → box borda lilás-clara + ícone lilás parado
   active  → box borda lilás-forte + ícone laranja parado
   working → box borda laranja + ícone laranja RODANDO (canvas) */
.upload-box {
  width: 50px; height: 50px; flex-shrink: 0;
  margin-right: 8px;
  border-radius: 10px;
  border: 2px solid var(--acento-borda);
  background: var(--fundo-primario);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.1s ease;
  position: relative;
  z-index: 2;
}
/* Estado IDLE: borda lilás-clara (default) */
@media (hover: hover) and (pointer: fine) {
.upload-box:hover {
  border-color: var(--acento);
  box-shadow: 0 0 12px var(--acento-glow);
}
}
/* Estado ACTIVE: picker aberto, box lilás forte */
.upload-box.btn-active {
  border-color: var(--acento);
  box-shadow: 0 0 14px var(--acento-glow);
}
/* Estado WORKING: upload em andamento, box laranja */
.upload-box.btn-working {
  border-color: var(--marca-primaria);
  box-shadow: 0 0 14px rgba(var(--marca-primaria-rgb), 0.35);
}
/* .upload-box:active { background: var(--fundo-upload-ativo); } /* removido: acendia no toque (passar o dedo) — só o clique real acende via .btn-active */
.upload-icon { width: 36px; height: 36px; display: block; }

/* ── Caixa só-para-colar (substitui a textarea, 2026-09) ──
   A caixa mostra SÓ o número X de vídeos detectados (0, 1, 2, ...). Toque =
   1 colagem: lê o clipboard direto (sem teclado, sem menu); fallback =
   apanhador .paste-catcher ARMADO cobrindo a caixa + teclado ABERTO como
   navegador da área de transferência (o histórico de itens copiados mora na
   barra do próprio teclado; digitação bloqueada no keydown do app.js). X é
   estimativa do JS (contarVideosColagens); o servidor é a fonte da verdade
   no submit. */
#pasteBox {
  position: relative;
  flex: 1; min-height: 50px;
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 6px 14px;
  background: var(--fundo-primario); color: var(--texto-primario);
  border: 2px solid var(--acento-borda);
  border-radius: 10px; font-family: inherit;
  cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
  user-select: none; -webkit-user-select: none;
}
#pasteBox:focus,
#pasteBox:focus-within { border-color: var(--acento); box-shadow: 0 0 12px var(--acento-glow); }

/* Toque na caixa de colar: realce imediato (feedback antes da leitura
   assincrona do clipboard - toque nunca pode parecer travamento). */
#pasteBox.paste-tap {
  border-color: var(--marca-primaria);
  box-shadow: 0 0 12px rgba(var(--marca-primaria-rgb), 0.35);
}
#pasteCount {
  font-size: 1.6rem; font-weight: 700; color: var(--texto-primario);
  font-variant-numeric: tabular-nums; line-height: 1;
  flex-shrink: 0;
}
#pasteHint {
  position: relative;
  flex: 1;
  min-height: 38px;
  min-width: 0;
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: var(--texto-suave);
}
#pasteHintText {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Botão de retorno (seta em U, à direita): toque simples remove 1 colagem
   (onda da seta em JS — animarSetaRetorno); SEGURAR 2s apaga TODAS, com a
   barra laranja preenchendo durante o hold (.holding + ::before). */
#pasteReset {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--texto-suave); cursor: pointer;
  -webkit-tap-highlight-color: transparent; outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: color 0.2s ease;
}
#pasteReset:hover { color: var(--texto-primario); }
#pasteReset::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--marca-primaria), var(--marca-primaria-suave));
  transition: width 0.25s ease;
  z-index: 0;
}
#pasteReset.holding { color: var(--texto-branco); }
#pasteReset.holding::before { width: 100%; transition: width 2s linear; }
#pasteReset svg { position: relative; z-index: 1; width: 24px; height: 24px; display: block; }
/* Apanhador de Ctrl+V/long-press/área de transferência:
   Mora DENTRO de #pasteHint (a parte de texto da caixa).
   Estado ARMADO (.armed): cobre #pasteHint com opacity 1 e background/color
   transparentes, posicionando a agulha (caret-color) EXATAMENTE no início da
   área de texto, com altura e alinhamento coerentes com a linha de texto. */
.paste-catcher {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
  border: 0; opacity: 0; pointer-events: none;
}
.paste-catcher.armed {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  padding: 0; margin: 0;
  border: 0 !important; outline: none !important; box-shadow: none !important;
  background: transparent;
  color: transparent;
  caret-color: var(--marca-primaria);
  font-size: 0.85rem;
  font-family: inherit;
  line-height: 38px;
  opacity: 1;
  pointer-events: auto;
  user-select: text; -webkit-user-select: text;
  resize: none;
  box-sizing: border-box;
}

textarea {
  width: 100%; min-height: 44px; max-height: 120px;
  padding: 12px 14px; font-size: 0.95rem;
  background: var(--fundo-primario); color: var(--texto-primario);
  border: 2px solid var(--acento-borda);
  border-radius: 10px; font-family: inherit;
  line-height: 1.5; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
  resize: none;
  flex: 1;
}
textarea:focus { border-color: var(--acento); box-shadow: 0 0 12px var(--acento-glow); }
textarea::placeholder { color: var(--texto-suave); }

.btn {
  width: 100%; padding: 12px; font-size: 0.95rem; font-weight: 600;
  border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, var(--marca-primaria), var(--marca-primaria-suave)); color: var(--texto-branco);
  transition: transform 0.15s, opacity 0.3s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent; margin-top: 8px;
  position: relative; overflow: hidden; z-index: 0;
}
.btn::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  background: linear-gradient(110deg,
    transparent 30%, rgba(var(--texto-branco-rgb), 0.10) 50%, transparent 70%);
  background-size: 220% 100%; background-position: 220% 0;
  transition: background-position 0.65s ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.btn:hover::before { background-position: -220% 0; }
}
/* .btn:active { transform: scale(0.97); } /* removido: salto no clique */
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
.btn:hover:not(:disabled) { box-shadow: 0 0 16px rgba(var(--marca-primaria-rgb), 0.3); }
}

.btn-green {
  background: linear-gradient(135deg, var(--marca-sucesso), var(--marca-sucesso-suave));
}
@media (hover: hover) and (pointer: fine) {
.btn-green:hover:not(:disabled) { box-shadow: 0 0 16px rgba(var(--marca-sucesso-rgb), 0.3); }
}

/* Cards section — animação suave de redimensionamento quando cards
   são adicionados/removidos. Usa max-height (transicionável) em vez de
   height auto (não transiciona). O overflow hidden + transition cobre
   tanto o crescimento (novos cards) quanto o encolhimento (limpeza). */
.cards-section {
  display: flex; flex-direction: column;
  max-height: 60vh; min-height: 150px;
  border-radius: 12px;
  background: var(--fundo-primario);
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--acento-borda);
  transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              min-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cards-header {
  padding: 8px 12px;
  background: linear-gradient(135deg, var(--acento-suave), var(--acento));
  color: var(--texto-branco);
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.downloaded-counter {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-primario);
  text-align: center;
  margin-bottom: 4px;
}

.video-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  /* Transicao suave quando o conteudo do scroll muda de tamanho */
  transition: padding 0.3s ease;
}
.video-list {
  display: flex; flex-direction: column;
  /* Transicao suave de altura quando cards entram/saem */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.video-list > * { margin-bottom: 6px; }
.video-list > *:last-child { margin-bottom: 0; }

/* Spacers da janela virtual (lista_virtual.js): preservam a geometria da
   lista sem montar todos os cards. SEM margem própria — o gap de 6px entre
   itens já está contabilizado no slot medido pelo controlador. */
.video-list > .vl-spacer {
  flex: 0 0 auto;
  margin-bottom: 0;
  pointer-events: none;
}

.video-list-scroll::-webkit-scrollbar { width: 6px; }
.video-list-scroll::-webkit-scrollbar-thumb {
  background: var(--acento-suave); border-radius: 3px;
}
.video-list-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* Cards */
.video-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--fundo-card); border-radius: 10px; padding: 10px 14px;
  min-height: 52px;
  border: 1px solid var(--acento-borda);
  position: relative; overflow: hidden; z-index: 0;
  /* Transicao suave quando o card muda de tamanho (ex: label muda de
     "Recebendo" pra "Na fila" — o card cresce/encolhe). */
  transition: min-height 0.3s ease, padding 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Brilho lilás líquido deslizando por dentro do card */
/* Troca de background-position (layout-thrashing) para opacity (compositor-only).
   Em devices lentos, background-position animation em N cards causa jank constante. */
.video-card::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(135deg,
    rgba(var(--acento-rgb), 0.02) 0%,
    rgba(var(--acento-rgb), 0.07) 50%,
    rgba(var(--acento-rgb), 0.02) 100%);
  background-size: 200% 200%;
  opacity: 0.6;
  animation: cardGlowPulse 6s ease-in-out infinite;
}
@keyframes cardGlowPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}

/* Animação de entrada do card (fade + slide up) */
@keyframes cardEnter {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Animação de saída do card (fade + slide up) — usada no reset */
@keyframes cardExit {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}
.video-card {
  animation: cardEnter 0.3s ease-out;
}
/* Classe aplicada antes de remover — dispara a animação de saída */
.video-card.card-exiting {
  animation: cardExit 0.25s ease-in forwards;
}

.video-card[data-status="ready"] {
  border-color: var(--marca-sucesso);
}
.video-card[data-status="downloaded"] {
  border-color: var(--marca-sucesso);
}
.video-card[data-status="failed"] {
  border-color: var(--marca-erro);
}
.video-card[data-status="processing"],
.video-card[data-status="downloading"],
.video-card[data-status="editing"] {
  border-color: var(--marca-primaria-suave);
}
.video-card[data-status="receiving"] {
  border-color: var(--acento);
}

.card-left { flex: 1; min-width: 0; position: relative; z-index: 1; }
.card-name { font-size: 0.8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto-primario); margin-top: 5px; }
.card-url { font-size: 0.75rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.card-right { margin-left: 10px; flex-shrink: 0; display: flex; align-items: center; position: relative; z-index: 1; }
.spinner-icon { width: 28px; height: 28px; display: block; }

.card-status-label {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 0.75rem; font-weight: 600; margin-bottom: 2px;
  /* Rótulo + chip de destino SEMPRE na mesma linha — o chip já trunca com
     ellipsis; sem nowrap o navegador quebra a linha entre os dois no
     celular (nome da pasta caía pra segunda linha durante a entrega). */
  white-space: nowrap; max-width: 100%; overflow: hidden;
}
.status-queued { background: rgba(var(--acento-rgb), 0.15); color: var(--acento); }
.status-processing { background: rgba(var(--marca-primaria-rgb), 0.2); color: var(--marca-primaria); }
.status-ready { background: rgba(var(--marca-sucesso-rgb), 0.15); color: var(--marca-sucesso); }
.status-failed { background: rgba(var(--marca-erro-rgb), 0.15); color: var(--marca-erro); }
.status-receiving { background: rgba(var(--texto-suave-rgb), 0.2); color: var(--texto-suave); }

/* ── Dots wave (CSS-only, compositor-driven) ──────────────────────
   3 pontinhos que pulsam em sequência no label "Baixando".
   opacity+transform = animadas na thread do compositor, nunca
   stutteram por main-thread work (diferente do setInterval anterior). */
.dots-wave { display: none; }
.status-processing .dots-wave {
  display: inline-flex; align-items: center; margin-left: 3px;
  vertical-align: middle;
}
.status-processing .dots-wave > * { margin-right: 2px; }
.status-processing .dots-wave > *:last-child { margin-right: 0; }
.status-receiving .dots-wave {
  display: inline-flex; align-items: center; margin-left: 3px;
  vertical-align: middle;
}
.status-receiving .dots-wave > * { margin-right: 2px; }
.status-receiving .dots-wave > *:last-child { margin-right: 0; }
.status-processing .dots-wave i {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: 0.25;
  animation: dot-pulse 1.2s infinite ease-in-out;
}
.status-processing .dots-wave i:nth-child(2) { animation-delay: 0.2s; }
.status-processing .dots-wave i:nth-child(3) { animation-delay: 0.4s; }
/* Mesma animação das bolinhas pro estado receiving */
.status-receiving .dots-wave i {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: 0.25;
  animation: dot-pulse 1.2s infinite ease-in-out;
}
.status-receiving .dots-wave i:nth-child(2) { animation-delay: 0.2s; }
.status-receiving .dots-wave i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.7); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

.btn-small {
  padding: 6px 12px; font-size: 0.75rem; font-weight: 600;
  border: none; border-radius: 6px; cursor: pointer;
  background: linear-gradient(135deg, var(--marca-sucesso), var(--marca-sucesso-suave)); color: var(--texto-branco);
  transition: transform 0.15s, opacity 0.3s;
  -webkit-tap-highlight-color: transparent;
}
/* .btn-small:active { transform: scale(0.95); } /* removido: salto no clique */

/* Spinner */
.spinner {
  width: 18px; height: 18px; border: 2px solid rgba(var(--marca-primaria-rgb), 0.2);
  border-top-color: var(--marca-primaria); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Spinner no estado processing: inverte cores para lilás */
.video-card[data-status="processing"] .spinner {
  border-color: rgba(var(--acento-rgb), 0.2);
  border-top-color: var(--acento);
}

/* Download area */
#downloadArea {
  padding: 10px 12px;
  border-top: 1px solid var(--acento-borda);
  flex-shrink: 0;
}
.download-info {
  font-size: 0.8rem; color: var(--texto-suave); margin-top: 4px; text-align: center;
}
.download-progress {
  height: 7px; margin-top: 8px; overflow: hidden; border-radius: 99px;
  background: var(--acento-borda);
}
.download-progress-fill {
  width: 0; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--marca-sucesso), var(--marca-sucesso-suave));
  transition: width 0.25s ease;
}

.error-msg {
  color: var(--marca-erro); font-size: 0.95rem; margin-top: 6px; padding: 10px 14px;
  background: rgba(var(--marca-erro-rgb), 0.1); border-radius: 8px; transition: opacity 0.3s;
  border: 1px solid rgba(var(--marca-erro-rgb), 0.2);
}
.hidden { display: none; }

/* Botão "Instalar" (PWA): só aparece quando o navegador realmente pode
   instalar (beforeinstallprompt) — no WebView antigo do LG K11 ele nunca
   aparece, e isso é o comportamento correto, não um botão quebrado. */
.install-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--marca-primaria);
  background: rgba(var(--marca-primaria-rgb), 0.1);
  color: var(--marca-primaria);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.install-btn:active { background: rgba(var(--marca-primaria-rgb), 0.22); }
@media (hover: hover) and (pointer: fine) {
  .install-btn:hover { background: rgba(var(--marca-primaria-rgb), 0.2); }
}

/* Input file - FIX LG K11 v47: overlay nativo em vez de click() programatico
   Antes: input 1px off-screen + input.click() via JS -> em WebView 58-70 o
   change nunca disparava (ClipData bug + focus perdido).
   Agora: input cobre 100% da .upload-box com opacity 0 -> tap nativo direto
   no input funciona em todos WebView, sem precisar de click() JS.
   Mantem acessibilidade e funciona desde Android 4.4.
   Para compatibilidade, mantem clip auto mas opacity 0 e cursor pointer. */
.file-input-hidden {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  clip: auto !important;
  -webkit-clip-path: none !important;
  border: 0 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  z-index: 10 !important;
}

/* ── Seção "Reiniciar" (hold-to-restart) ───────────────────────
   Botão que exige segurar 3s. Uma barra laranja preenche da
   esquerda → direita durante a pressão; soltar antes cancela.
   (settings-section-restart removido 2026-08-16: o modal Edição virou
   cartões fecháveis e o espaçamento ficou a cargo do .edit-card) */

.settings-hint {
  display: block;
  font-size: 0.8rem;
  color: var(--texto-suave);
  margin-top: 8px;
  opacity: 0.85;
}

.restart-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 52px;
  border-radius: 10px;
  border: 2px solid var(--acento-borda);
  background: var(--fundo-primario);
  color: var(--texto-primario);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.restart-btn.holding {
  border-color: var(--marca-primaria);
  box-shadow: 0 0 14px rgba(var(--marca-primaria-rgb), 0.3);
}

.restart-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--marca-primaria), var(--marca-primaria-suave));
  /* Reset rápido ao soltar antes do fim (3s linear só durante o hold). */
  transition: width 0.3s ease;
  z-index: 0;
}
.restart-btn.holding .restart-fill {
  width: 100%;
  transition: width 3s linear;
}

.restart-label {
  position: relative;
  z-index: 1;
  pointer-events: none;
  transition: color 0.25s ease;
}
.restart-btn.holding .restart-label { color: var(--texto-branco); }

/* ── Botão "Sair da Conta" (hold-to-logout) ─────────────────────────────
   Mesmo princípio do Reiniciar: segurar preenche uma barra vermelha
   da esquerda → direita; soltar antes cancela o logout. */
.logout-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 52px;
  border-radius: 10px;
  border: 2px solid var(--marca-erro);
  background: var(--fundo-primario);
  color: var(--marca-erro);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.logout-btn.holding {
  border-color: var(--marca-erro-forte);
  box-shadow: 0 0 14px rgba(var(--marca-erro-rgb), 0.3);
}

.logout-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--marca-erro), var(--marca-erro-forte));
  /* Reset rápido ao soltar antes do fim (3s linear só durante o hold). */
  transition: width 0.3s ease;
  z-index: 0;
}
.logout-btn.holding .logout-fill {
  width: 100%;
  transition: width 3s linear;
}

.logout-label {
  position: relative;
  z-index: 1;
  pointer-events: none;
  transition: color 0.25s ease;
}
.logout-btn.holding .logout-label { color: var(--texto-branco); }

/* ── Account card inside settings modal ──────────────────── */
.account-card-settings {
  display: flex; align-items: center;
  padding: 8px 10px;
  background: var(--fundo-primario);
  border-radius: 10px;
  border: 1px solid var(--acento-borda);
  margin-bottom: 10px;
}
.account-card-settings > * { margin-right: 10px; }
.account-card-settings > *:last-child { margin-right: 0; }
.account-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700; color: var(--texto-branco);
  flex-shrink: 0;
  background: var(--acento);
}
.account-info { flex: 1; min-width: 0; }
.account-username {
  font-size: 0.85rem; font-weight: 600; color: var(--texto-primario);
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn-danger {
  background: linear-gradient(135deg, var(--marca-erro), var(--marca-erro-forte));
}

/* ── Activity icon inside settings ──────────────────── */
.activity-icon-wrap {
  display: flex; align-items: center;
  padding: 8px 10px;
  background: var(--fundo-primario);
  border-radius: 10px;
  border: 1px solid var(--acento-borda);
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.activity-icon-wrap > * { margin-right: 8px; }
.activity-icon-wrap > *:last-child { margin-right: 0; }
@media (hover: hover) and (pointer: fine) {
.activity-icon-wrap:hover {
  border-color: var(--acento);
  box-shadow: 0 0 10px var(--acento-glow);
}
}
.activity-icon-wrap:active { background-color: var(--fundo-card); }
.activity-icon { width: 24px; height: 24px; display: block; }
/* Ícones estáticos em SVG: cor via currentColor (padrão lilás do canvas antigo) */
.activity-icon, .edit-icon, .account-settings-icon,
.edit-mode-icon, .edit-close-icon, .account-close-icon,
.activity-close-icon, .acct-settings-close-icon {
  color: var(--acento);
}
.activity-icon-label {
  font-size: 0.8rem; font-weight: 500; color: var(--texto-suave);
}

/* ── Account modal (login/register) ──────────────────── */
.account-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000;
  background: rgba(var(--preto-rgb), 0.40);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.account-backdrop.open { opacity: 1; pointer-events: auto; }

.account-wrap {
  position: fixed; z-index: 2001;
  top: 8%; left: 50%;
  transform: translate(-50%, 16px);
  width: 90%; max-width: 380px;
  max-height: 80vh;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.account-wrap.open {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, 0);
}

.account-modal {
  width: 100%;
  background: var(--fundo-secundario);
  border: 1px solid rgba(var(--acento-rgb), 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(var(--preto-rgb), 0.55);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 80vh;
}
.account-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--acento-borda);
}
.account-modal-title {
  font-size: 0.9rem; font-weight: 600; color: var(--texto-primario);
}
.account-close {
  width: 28px; height: 28px; padding: 0; border: none;
  background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
}
.account-close-icon { width: 28px; height: 28px; display: block; }

.account-tabs {
  display: flex; border-bottom: 1px solid var(--acento-borda);
}
.account-tab {
  flex: 1; padding: 10px; font-size: 0.82rem; font-weight: 600;
  background: transparent; border: none; cursor: pointer;
  color: var(--texto-suave);
  transition: color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.account-tab.active {
  color: var(--marca-primaria);
  background: rgba(var(--marca-primaria-rgb), 0.08);
  border-bottom: 2px solid var(--marca-primaria);
}

.account-body { padding: 16px; flex: 1; min-height: 0; overflow-y: auto; }
.account-input {
  width: 100%; padding: 10px 12px; font-size: 0.85rem;
  background: var(--fundo-primario); color: var(--texto-primario);
  border: 1px solid var(--acento-borda); border-radius: 8px;
  outline: none; margin-bottom: 10px;
  font-family: inherit;
}
.account-input:focus { border-color: var(--acento); }
.account-btn { margin-top: 4px; }
.account-error {
  color: var(--marca-erro); font-size: 0.78rem; margin-top: 8px; padding: 6px 10px;
  background: rgba(var(--marca-erro-rgb), 0.1); border-radius: 8px;
  border: 1px solid rgba(var(--marca-erro-rgb), 0.2);
}

/* ── Activity panel modal ──────────────────── */
.activity-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000;
  background: rgba(var(--preto-rgb), 0.40);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.activity-backdrop.open { opacity: 1; pointer-events: auto; }

.activity-wrap {
  position: fixed; z-index: 2001;
  top: 8%; left: 50%;
  transform: translate(-50%, 16px);
  width: 90%; max-width: 380px;
  max-height: 80vh;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.activity-wrap.open {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, 0);
}

.activity-modal {
  width: 100%;
  background: var(--fundo-secundario);
  border: 1px solid rgba(var(--acento-rgb), 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(var(--preto-rgb), 0.55);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 80vh;
}
.activity-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--acento-borda);
}
.activity-modal-title {
  font-size: 0.9rem; font-weight: 600; color: var(--texto-primario);
}
.activity-close {
  width: 28px; height: 28px; padding: 0; border: none;
  background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
}
.activity-close-icon { width: 28px; height: 28px; display: block; }

.activity-body {
  padding: 16px; overflow-y: auto; flex: 1; min-height: 0;
}
.activity-cards { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 12px; }
.activity-cards > * { margin-right: 8px; margin-bottom: 8px; }
.activity-cards > *:nth-child(2n) { margin-right: 0; }
.activity-cards > *:nth-last-child(-n+2) { margin-bottom: 0; }
.activity-card {
  background: var(--fundo-primario); border-radius: 10px; padding: 12px;
  border: 1px solid var(--acento-borda);
  text-align: center;
}
.ac-label {
  display: block; font-size: 0.8rem; font-weight: 600; color: var(--texto-suave); margin-bottom: 4px;
}
.ac-num {
  display: block; font-size: 1.2rem; font-weight: 700; color: var(--texto-primario);
}
.ac-custo {
  display: block; font-size: 0.8rem; font-weight: 500; color: var(--marca-primaria); margin-top: 2px;
}

.activity-media {
  text-align: center; margin-bottom: 12px; padding: 6px 0;
  font-size: 0.82rem; color: var(--texto-primario);
}
.activity-media strong { color: var(--marca-primaria); }

.activity-empty {
  text-align: center; padding: 20px;
  color: var(--texto-suave); font-size: 0.85rem;
}

.activity-graph { margin-bottom: 16px; }
.activity-graph-bar { display: flex; align-items: center; margin-bottom: 4px; }
.activity-graph-bar > * { margin-right: 6px; }
.activity-graph-bar > *:last-child { margin-right: 0; }
.activity-graph-label {
  width: 30px; font-size: 0.8rem; font-weight: 600; color: var(--texto-suave); text-align: right; flex-shrink: 0;
}
.activity-graph-fill {
  height: 18px; border-radius: 4px;
  background: linear-gradient(90deg, var(--marca-primaria), var(--marca-primaria-suave));
  min-width: 4px;
  transition: width 0.5s ease;
}
.activity-graph-info {
  font-size: 0.75rem; color: var(--texto-suave); margin-left: 4px; white-space: nowrap;
}

.activity-details {
  background: var(--fundo-primario); border-radius: 10px; padding: 12px;
  border: 1px solid var(--acento-borda); margin-bottom: 8px;
}
.activity-details-title {
  font-size: 0.8rem; font-weight: 600; color: var(--texto-suave); margin-bottom: 6px;
}
.activity-detail-row {
  display: flex; justify-content: space-between; font-size: 0.8rem;
  padding: 3px 0; color: var(--texto-primario);
}
.activity-detail-row .ad-value { color: var(--texto-primario); font-weight: 500; }
.activity-detail-formula {
  text-align: center; font-size: 0.85rem; font-weight: 700;
  color: var(--marca-primaria); padding: 8px 0 4px;
  border-top: 1px solid var(--acento-borda); margin-top: 6px;
}

.activity-footer {
  font-size: 0.75rem; color: var(--texto-suave); text-align: center; padding: 4px 0 0;
  opacity: 0.7;
}

/* Edicao panel modal (categoria: tamanho maximo + reiniciar servidor) */
.edit-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000;
  background: rgba(var(--preto-rgb), 0.40);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.edit-backdrop.open { opacity: 1; pointer-events: auto; }

.edit-wrap {
  position: fixed; z-index: 2001;
  top: 8%; left: 50%;
  transform: translate(-50%, 16px);
  width: 90%; max-width: 380px;
  max-height: 80vh;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.edit-wrap.open {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, 0);
}

.edit-modal {
  width: 100%;
  background: var(--fundo-secundario);
  border: 1px solid rgba(var(--acento-rgb), 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(var(--preto-rgb), 0.55);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 80vh;
}
.edit-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--acento-borda);
}
.edit-modal-title {
  font-size: 0.9rem; font-weight: 600; color: var(--texto-primario);
}
.edit-close {
  width: 28px; height: 28px; padding: 0; border: none;
  background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
}
.edit-close-icon { width: 28px; height: 28px; display: block; }

.edit-modal-body {
  padding: 12px 16px 18px;
  flex: 1; min-height: 0; overflow-y: auto;
}
.edit-icon-wrap { margin-top: 4px; }
.edit-icon { width: 24px; height: 24px; display: block; }

/* ── Cartões fecháveis do modal Edição ──
   Cada categoria é um cartão: ao entrar, a pessoa vê SÓ os títulos
   (todos fechados). Tocar no cabeçalho abre/fecha o corpo; o "?" do
   cabeçalho abre a ajuda SEM fechar o cartão (guard no app.js). */
.edit-card {
  background: var(--fundo-primario);
  border: 2px solid var(--acento-borda);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.edit-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%;
  padding: 12px 14px;
  cursor: pointer;
  background: none; border: none; text-align: left;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.edit-card-header .help-title-row { margin-bottom: 0; flex: 1; min-width: 0; }
.edit-card-header .settings-section-title {
  font-size: 0.88rem; font-weight: 600; color: var(--texto-suave);
}
.edit-card-chevron {
  flex-shrink: 0;
  width: 9px; height: 9px;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(-45deg);  /* fechado: aponta para a direita */
  transition: transform 0.25s ease;
}
.edit-card.open .edit-card-chevron { transform: rotate(45deg); } /* aberto: aponta para baixo */
.edit-card-body { display: none; padding: 0 14px 14px; }
.edit-card.open .edit-card-body { display: block; }

/* ── Modo de edição (simples / profissional) ──────────────────────────────
   Dois tiles selecionáveis no topo do modal Edição. Padrão visual igual
   aos tiles de Atividade/Conta (lilás idle) com seleção laranja (como o
   radio-btn). O modo 'simples' esconde o stepper "Duração máxima". */
.edit-mode-group {
  display: flex;
  gap: 10px;
}
.edit-mode-btn {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  background: var(--fundo-primario);
  border: 2px solid var(--acento-borda);
  border-radius: 10px;
  cursor: pointer; outline: none;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, transform 0.1s ease;
}
/* .edit-mode-btn:active { transform: scale(0.93); } /* removido: salto no clique */
.edit-mode-icon { width: 28px; height: 28px; display: block; }
.edit-mode-label {
  font-size: 0.8rem; font-weight: 600; color: var(--texto-suave);
  transition: color 0.25s ease;
}
.edit-mode-btn.active {
  background: var(--marca-primaria-suave);
  border-color: var(--marca-primaria);
  box-shadow: 0 0 10px rgba(var(--marca-primaria-rgb), 0.18);
}
/* Ícone branco no estado selecionado: lilás sobre laranja fica ofuscado */
.edit-mode-btn.active .edit-mode-label { color: var(--texto-branco); }
.edit-mode-icon { transition: color 0.25s ease; }
.edit-mode-btn.active .edit-mode-icon { color: var(--texto-branco); }
@media (hover: hover) and (pointer: fine) {
.edit-mode-btn:not(.active):hover {
  border-color: var(--acento);
  background: var(--fundo-card);
}
}
/* ── Formato do vídeo pronto: a GALERIA DE FUNDOS (peça arrastável) ──
   Onde havia uma grade 2 colunas de quadradinhos de 42x64 (nove fundos), há
   AGORA UMA PEÇA GRANDE arrastável na horizontal, no estilo stories: cada
   fundo é UM slide com a arte COMPLETA (o papel de parede final do vídeo, não
   um vídeo de exemplo) e o NOME DO FUNDO DENTRO DA FOTO, na base — degradê
   escuro + texto branco, legível sobre arte clara e escura. Os CINCO fundos
   têm o MESMO formato (a proporção NÃO muda; muda só a imagem de fundo).

   O movimento é TODO em JS: o `.rota-track` recebe `transform: translateX`
   (Pointer Events com queda para Touch/Mouse, sem scroll-snap nem API moderna
   de carrossel — o alvo é WebView 58/Android 7.1.2). Durante o arrasto o slide
   mais próximo do centro é o que fica em evidência; a gravação acontece UMA
   vez, ao soltar (commitar a cada pixel spammaria POST /api/me/rota).

   O switch "Enquadramento" (reutiliza .trim-switch*) continua exatamente como
   estava: desliga o molde inteiro → vídeo no formato original; desligado, a
   peça fica esmaecida e travada, com o último fundo preservado para quando o
   switch voltar. Cores via tokens => trocam com o tema. Classes PRÓPRIAS
   (.rota-stage/.rota-track/.rota-slide/.rota-art/.rota-nome/.rota-mark*):
   reutilizar .edit-mode-btn/.destino-btn corromperia os estados dos outros
   grupos (applyEditModeUI seleciona globalmente). */
.rota-contexto {
  font-size: 0.78rem; color: var(--texto-suave);
  margin: 0 0 12px; line-height: 1.45;
}
/* O palco: janela que recorta a trilha (o "overflow" do carrossel) e recebe o
   arrasto. `touch-action: pan-y` = o dedo desliza na HORIZONTAL aqui (a peça)
   e a página continua rolando na vertical como sempre. */
.rota-stage {
  position: relative;
  overflow: hidden;
  padding: 5px 0 7px;
  margin-bottom: 6px;
  cursor: grab;
  outline: none;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.rota-stage.arrastando { cursor: grabbing; }
/* Foco visível: a peça focada pelo teclado precisa mostrar onde está — sem
   isto as setas funcionariam "no escuro". */
.rota-stage:focus {
  box-shadow: 0 0 0 2px rgba(var(--marca-primaria-rgb), 0.45);
  border-radius: 14px;
}
/* Enquadramento DESATIVADO (switch do card): a peça esmaece e trava — a
   seleção continua visível (é restaurada quando o switch volta para ON). */
.rota-stage.off {
  opacity: 0.38;
  pointer-events: none;
}
.rota-track {
  display: flex;
  align-items: flex-end;
  will-change: transform;
  /* O "solto" com transição suave é só o que o dedo LARGA; enquanto arrasta, o
     JS marca .arrastando e a transição é cortada (o dedo manda, não a animação). */
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rota-stage.arrastando .rota-track { transition: none; }
/* A PEÇA: bem maior que o quadradinho de 42x64 de antes (169x300 aqui), com a
   arte preenchendo tudo. `flex: 0 0 auto` + largura fixa = o passo do arrasto é
   sempre o mesmo (o JS mede largura + margem). */
.rota-slide {
  position: relative;
  flex: 0 0 auto;
  width: 169px; height: 300px;
  margin: 0 7px;
  padding: 0;
  background: var(--fundo-primario);
  border: 2px solid var(--acento-borda);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease,
              transform 0.2s ease;
}
.rota-slide.ativo {
  border-color: var(--marca-primaria);
  box-shadow: 0 6px 18px rgba(var(--preto-rgb), 0.45);
  transform: translateY(-3px);
}
/* Amostra REAL da arte do fundo (mesma imagem que vira o vídeo final). */
.rota-art {
  position: absolute; inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* O NOME DENTRO DA FOTO, na base — pedido literal do dono. O degradê escuro
   (token --preto-rgb, então troca com o tema) garante leitura em cima de arte
   clara (zebra) e escura (cinema) alike. */
.rota-nome {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 8px 10px;
  background: linear-gradient(to top,
              rgba(var(--preto-rgb), 0.9) 0%,
              rgba(var(--preto-rgb), 0.62) 45%,
              rgba(var(--preto-rgb), 0) 100%);
  color: var(--texto-branco);
  font-size: 0.86rem; font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 2px rgba(var(--preto-rgb), 0.95);
}
/* As marcas embaixo da peça: quantos fundos existem e qual está no centro. */
.rota-marks {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}
.rota-mark {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acento-borda);
  transition: background 0.25s ease, transform 0.25s ease;
}
.rota-mark.on {
  background: var(--marca-primaria);
  transform: scale(1.35);
}
/* Tela estreita (o alvo é um celular antigo): a peça encolhe um pouco, sem
   nunca passar da metade da tela — sobra fundo dos dois lados, que é o que dá
   a sensação de "tem mais para os dois lados". */
@media (max-width: 359px) {
  .rota-slide { width: 148px; height: 263px; margin: 0 5px; }
  .rota-nome { font-size: 0.8rem; }
}
.fundo-zebra-ouro { background-image: url("/static/interface/icones/fundo-zebra-ouro.png?v=2"); }
.fundo-zebra-prata { background-image: url("/static/interface/icones/fundo-zebra-prata.png?v=2"); }
.fundo-linhas-prata { background-image: url("/static/interface/icones/fundo-linhas-prata.png?v=2"); }
.fundo-palco { background-image: url("/static/interface/icones/fundo-palco.png?v=3"); }
.fundo-cinema-azul { background-image: url("/static/interface/icones/fundo-cinema-azul.png?v=2"); }
.fundo-cinema-verde { background-image: url("/static/interface/icones/fundo-cinema-verde.png?v=2"); }
.fundo-cinema-vinho { background-image: url("/static/interface/icones/fundo-cinema-vinho.png?v=2"); }
/* ── Qualidade do video pronto (perfil de saida) ──
   Tiles MONTADOS PELO SERVIDOR (GET /api/perfis-saida -> estudio/perfis.py):
   o CSS nao conhece quantidade nem nome nenhum — só o container e o botao
   generico. Classes PROPRIAS (.perfil-*): nunca .rota-slide/.destino-btn/
   .edit-mode-btn, que os apply* do JS varrem globalmente e corromperia. */
.perfil-contexto {
  font-size: 0.78rem; color: var(--texto-suave);
  margin: 0 0 10px; line-height: 1.45;
}
.perfil-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}
/* A lista ainda nao chegou (servidor sem /api/perfis-saida): sem tile vazio
   piscando — o texto de contexto explica e nada mais. */
.perfil-group.vazio {
  min-height: 18px;
}
.perfil-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  background: var(--fundo-primario);
  border: 2px solid var(--acento-borda);
  border-radius: 10px;
  cursor: pointer; outline: none;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease;
}
.perfil-nome {
  font-size: 0.8rem; font-weight: 600; color: var(--texto-suave);
  transition: color 0.25s ease;
  text-align: center; line-height: 1.3;
}
/* Dimensoes com digitos tabulares: o numero nao "danca" ao trocar a selecao. */
.perfil-dimensoes {
  font-size: 0.68rem; color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.perfil-btn.active {
  background: var(--marca-primaria-suave);
  border-color: var(--marca-primaria);
  box-shadow: 0 0 10px rgba(var(--marca-primaria-rgb), 0.18);
}
.perfil-btn.active .perfil-nome,
.perfil-btn.active .perfil-dimensoes { color: var(--texto-branco); }
@media (hover: hover) and (pointer: fine) {
.perfil-btn:not(.active):hover {
  border-color: var(--acento);
  background: var(--fundo-card);
}
}

/* ── Destino dos vídeos (celular / drive / ambos) ──
   Espelho visual EXATO do antigo modo de envio, com classes PRÓPRIAS (.destino-*):
   reutilizar .edit-mode-btn corromperia os estados dos
   outros grupos (applyEditModeUI seleciona globalmente). */
.destino-group {
  display: flex;
  gap: 10px;
}
.destino-btn {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  background: var(--fundo-primario);
  border: 2px solid var(--acento-borda);
  border-radius: 10px;
  cursor: pointer; outline: none;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, transform 0.1s ease;
}
/* .destino-btn:active { transform: scale(0.93); } /* removido: salto no clique */
.destino-icon { width: 28px; height: 28px; display: block; color: var(--acento); }
.destino-label {
  font-size: 0.8rem; font-weight: 600; color: var(--texto-suave);
  transition: color 0.25s ease;
}
.destino-btn.active {
  background: var(--marca-primaria-suave);
  border-color: var(--marca-primaria);
  box-shadow: 0 0 10px rgba(var(--marca-primaria-rgb), 0.18);
}
.destino-btn.active .destino-label { color: var(--texto-branco); }
.destino-icon { transition: color 0.25s ease; }
.destino-btn.active .destino-icon { color: var(--texto-branco); }
@media (hover: hover) and (pointer: fine) {
.destino-btn:not(.active):hover {
  border-color: var(--acento);
  background: var(--fundo-card);
}
}

/* ── Google Drive (bloco no modal Configurações da Conta) ── */
.gdrive-block {
  background: var(--fundo-primario);
  border: 1px solid var(--acento-borda);
  border-radius: 10px;
  padding: 12px;
}
.gdrive-line {
  font-size: 0.8rem; line-height: 1.4; color: var(--texto-suave); margin: 0 0 6px;
  overflow-wrap: break-word; word-wrap: break-word;
}
.gdrive-expiry { display: block; color: var(--marca-primaria-suave); font-size: 0.75rem; margin-top: 2px; }
.gdrive-head {
  display: flex; align-items: center; margin-bottom: 8px;
}
.gdrive-logo { width: 34px; height: 34px; flex-shrink: 0; display: block; }
.gdrive-ident { flex: 1; min-width: 0; padding-left: 10px; }
.gdrive-email {
  display: block; font-size: 0.8rem; font-weight: 600; color: var(--texto-primario);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gdrive-btn {
  min-height: 44px; padding: 10px 14px;
  background: var(--fundo-card);
  border: 1px solid var(--acento-borda);
  border-radius: 10px;
  color: var(--texto-primario);
  font-size: 0.78rem; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.1s ease;
}
/* .gdrive-btn:active { transform: scale(0.97); } /* removido: salto no clique */
.gdrive-btn:disabled { opacity: 0.5; cursor: default; }
.gdrive-block > .gdrive-btn-primary { display: block; width: 100%; margin-top: 8px; }
.gdrive-btn-primary {
  background: linear-gradient(135deg, var(--marca-primaria), var(--marca-primaria-suave));
  border: none; color: var(--texto-branco);
}
.gdrive-btn-danger {
  color: var(--marca-erro);
  background: rgba(var(--marca-erro-rgb), 0.08);
  border-color: rgba(var(--marca-erro-rgb), 0.45);
}
.gdrive-btn-mini { min-height: 34px; padding: 5px 12px; font-size: 0.8rem; border-radius: 8px; }
.gdrive-folder-item {
  display: block; width: 100%; text-align: left;
  min-height: 44px; padding: 12px; margin-bottom: 8px;
  background: var(--fundo-card);
  border: 1px solid var(--acento-borda);
  border-radius: 8px;
  color: var(--texto-primario);
  font-size: 0.8rem; font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gdrive-folder-item.active {
  border-color: var(--marca-primaria);
  background: var(--marca-primaria-suave);
  color: var(--texto-branco);
}
.gdrive-folder-list .gdrive-btn {
  display: block; width: 100%;
  min-height: 44px; margin-top: 10px;
}
/* Status do Drive na seção Destino (modal Edição).
   Estados curtos (não conectado / sem pasta) = linha única.
   Com pasta escolhida (.drive-status-folder) = EMPILHADO: o nome da pasta
   ganha a largura cheia do box (sinalização clara no celular — na linha
   única o ellipsis cortava justamente o nome, único dado importante) +
   email pequeno + botão de largura total. */
.drive-status {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; margin-bottom: 2px;
  padding: 10px 12px;
  background: var(--fundo-primario);
  border: 1px solid var(--acento-borda);
  border-radius: 10px;
}
.drive-status.drive-status-folder {
  flex-direction: column; align-items: stretch; gap: 6px;
}
.drive-status-line {
  font-size: 0.8rem; color: var(--texto-suave);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drive-status-folder .drive-status-line {
  font-size: 0.88rem; color: var(--texto-primario);
}
.drive-status .gdrive-btn { margin-left: 10px; flex-shrink: 0; }
.drive-status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
  flex-shrink: 0;
}
.drive-status-dot.on {
  background: var(--marca-sucesso);
  box-shadow: 0 0 6px rgba(var(--marca-sucesso-rgb), 0.7);
}
.drive-status-dot.off { background: var(--texto-suave); }
.drive-status-dot.nofolder {
  background: var(--marca-primaria);
  box-shadow: 0 0 6px rgba(var(--marca-primaria-rgb), 0.7);
}
.drive-status-actions { display: flex; flex-shrink: 0; }
.drive-status-actions .gdrive-btn { margin-left: 8px; }
.drive-status-folder .drive-status-actions .gdrive-btn { width: 100%; margin-left: 0; }
.drive-status-line b { color: var(--texto-primario); font-weight: 600; }
.drive-status-sub { font-size: 0.72rem; color: var(--texto-suave); }
.drive-status-muted { font-size: 0.8rem; color: var(--texto-suave); }

/* Toast flutuante: avisos sobrepostos, sem ocupar espaço no layout.
   GRANDE (1rem, padding generoso) e vivo 10s (TOAST_MS no app.js): no
   celular a pessoa precisa ter certeza de que leu. Variante .toast-info
   (borda/fundo lilás) para dicas — vermelho é só para erro de verdade. */
.toast {
  position: fixed; top: 12%; left: 50%; z-index: 4000;
  transform: translate(-50%, -8px);
  max-width: 92%; width: max-content;
  padding: 16px 20px;
  background: var(--fundo-secundario);
  border: 1px solid rgba(var(--marca-erro-rgb), 0.5);
  border-radius: 14px;
  color: var(--marca-erro);
  font-size: 1rem; font-weight: 600; line-height: 1.45;
  box-shadow: 0 8px 30px rgba(var(--preto-rgb), 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.toast-info {
  border-color: rgba(var(--acento-rgb), 0.55);
  color: var(--texto-branco);
}

/* Pop-up seletor de pasta do Drive (abre por cima do modal de Edição) */
.gdrive-picker-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3000;
  background: rgba(var(--preto-rgb), 0.40);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.gdrive-picker-backdrop.open { opacity: 1; pointer-events: auto; }
.gdrive-picker-wrap {
  position: fixed; z-index: 3001;
  top: 8%; left: 50%;
  transform: translate(-50%, 16px);
  width: 90%; max-width: 380px;
  max-height: 80vh;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.gdrive-picker-wrap.open {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, 0);
}
.gdrive-picker-modal {
  width: 100%;
  background: var(--fundo-secundario);
  border: 1px solid rgba(var(--acento-rgb), 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(var(--preto-rgb), 0.55);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 80vh;
}
.gdrive-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--acento-borda);
}
.gdrive-picker-title {
  font-size: 0.85rem; font-weight: 600; color: var(--texto-primario);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gdrive-picker-close {
  width: 28px; height: 28px; padding: 0; border: none; flex-shrink: 0;
  background: transparent; color: var(--texto-suave); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
}
.gdrive-picker-close-icon { width: 20px; height: 20px; display: block; }
.gdrive-picker-list {
  padding: 12px 14px; flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.gdrive-picker-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--acento-borda);
}
.gdrive-picker-footer .gdrive-btn { display: block; width: 100%; }
.gdrive-picker-list .settings-hint { display: block; text-align: center; }

/* Chip de destino AO LADO do status (só nas fases de entrega: o JS esconde
   durante o processamento): Dispositivo / <nome da pasta> / Dispositivo + pasta. */
.destino-chip {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.02em; vertical-align: middle;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(var(--texto-branco-rgb), 0.07);
}
.destino-chip.chip-device { background: rgba(var(--marca-sucesso-rgb), 0.16); color: var(--marca-sucesso); }
.destino-chip.chip-drive { background: rgba(var(--drive-azul-rgb), 0.16); color: var(--drive-azul); }
.destino-chip.chip-ambos { background: linear-gradient(135deg, rgba(var(--marca-sucesso-rgb), 0.18), rgba(var(--drive-azul-rgb), 0.18)); color: var(--drive-azul-claro); }

/* Linha de estado de envio ao Drive no card (abaixo do nome, só quando ativo):
   Enviando ao Drive… / Drive falhou · Reenviar. */
.card-drive-line {
  font-size: 0.75rem; margin-top: 3px; cursor: default;
}
.drive-state { font-weight: 600; }
.drive-uploading { color: var(--marca-primaria); }
.drive-failed { color: var(--marca-erro); }
.card-drive-line[data-retry="1"] .drive-failed {
  cursor: pointer; text-decoration: underline;
}

/* ── Account settings modal ──────────────────── */
.acct-settings-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000;
  background: rgba(var(--preto-rgb), 0.40);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.acct-settings-backdrop.open { opacity: 1; pointer-events: auto; }

/* Mesmo nível visual do painel principal (.container):
   mesma largura, mesmo teto (top: 8%) dos outros popups, mesma borda/sombra/fundo */
.acct-settings-wrap {
  position: fixed; z-index: 2001;
  top: 8%; left: 50%;
  transform: translate(-50%, 16px);
  width: 90%; max-width: 380px;
  max-height: 80vh;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.acct-settings-wrap.open {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, 0);
}

.acct-settings-modal {
  width: 100%;
  background: var(--fundo-secundario);
  border: 1px solid rgba(var(--acento-rgb), 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(var(--preto-rgb), 0.55);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 80vh;
}
.acct-settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--acento-borda);
}
.acct-settings-title {
  font-size: 0.9rem; font-weight: 600; color: var(--texto-primario);
}
.acct-settings-close {
  width: 28px; height: 28px; padding: 0; border: none;
  background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
}
.acct-settings-close-icon { width: 28px; height: 28px; display: block; }

.acct-settings-body { padding: 16px; flex: 1; min-height: 0; overflow-y: auto; }

.acct-settings-section { margin-bottom: 14px; }
.acct-settings-section:last-child { margin-bottom: 0; }

.acct-settings-label {
  display: block; font-size: 0.78rem; font-weight: 600;
  color: var(--texto-suave); margin-bottom: 6px;
}

.acct-settings-name-row { display: flex; align-items: center; }
.acct-settings-name-row > * { margin-right: 6px; }
.acct-settings-name-row > *:last-child { margin-right: 0; }
.acct-settings-input {
  flex: 1; padding: 8px 10px; font-size: 0.82rem;
  background: var(--fundo-primario); color: var(--texto-primario);
  border: 1px solid var(--acento-borda); border-radius: 8px; outline: none;
  font-family: inherit;
}
.acct-settings-input:focus { border-color: var(--acento); }

.account-settings-icon { width: 24px; height: 24px; display: block; }

.btn-account {
  background: transparent;
  border: 2px solid var(--acento-borda);
  color: var(--acento);
  font-size: 0.85rem;
  padding: 10px;
}
@media (hover: hover) and (pointer: fine) {
.btn-account:hover {
  border-color: var(--acento);
  box-shadow: 0 0 12px var(--acento-glow);
}
}

/* ── Tema (seção no modal Configurações da Conta) ──
   Tiles selecionáveis, um por tema. O ícone é a PALHETA do tema: 5 bolinhas
   usando as amostras --tema-*-accent-1..5 (definidas na paleta central).
   Classes PRÓPRIAS (.tema-*): reutilizar .edit-mode-btn
   corromperia os estados dos outros grupos (aplicam globalmente). */
.tema-group {
  display: flex;
  gap: 8px;
}
.tema-btn {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  background: var(--fundo-primario);
  border: 2px solid var(--acento-borda);
  border-radius: 10px;
  cursor: pointer; outline: none;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, transform 0.1s ease;
}
/* .tema-btn:active { transform: scale(0.93); } /* removido: salto no clique */
.tema-btn.active {
  background: var(--marca-primaria-suave);
  border-color: var(--marca-primaria);
  box-shadow: 0 0 10px rgba(var(--marca-primaria-rgb), 0.18);
}
.tema-paleta { display: flex; gap: 3px; }
.paleta-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paleta-pendente);
}
.tema-label {
  font-size: 0.8rem; font-weight: 600; color: var(--texto-suave);
  transition: color 0.25s ease;
}
.tema-btn.active .tema-label { color: var(--texto-branco); }
@media (hover: hover) and (pointer: fine) {
.tema-btn:not(.active):hover {
  border-color: var(--acento);
  background: var(--fundo-card);
}
}
/* Ícone da palheta: 5 amostras por tema (ver --tema-*-accent-1..5 na paleta).
   Fallback --paleta-pendente enquanto a paleta do tema não for definida. */
.tema-btn[data-tema="editai"] .paleta-dot:nth-child(1) { background: var(--tema-editai-accent-1, var(--paleta-pendente)); }
.tema-btn[data-tema="editai"] .paleta-dot:nth-child(2) { background: var(--tema-editai-accent-2, var(--paleta-pendente)); }
.tema-btn[data-tema="editai"] .paleta-dot:nth-child(3) { background: var(--tema-editai-accent-3, var(--paleta-pendente)); }
.tema-btn[data-tema="editai"] .paleta-dot:nth-child(4) { background: var(--tema-editai-accent-4, var(--paleta-pendente)); }
.tema-btn[data-tema="editai"] .paleta-dot:nth-child(5) { background: var(--tema-editai-accent-5, var(--paleta-pendente)); }
.tema-btn[data-tema="galactus"] .paleta-dot:nth-child(1) { background: var(--tema-galactus-accent-1, var(--paleta-pendente)); }
.tema-btn[data-tema="galactus"] .paleta-dot:nth-child(2) { background: var(--tema-galactus-accent-2, var(--paleta-pendente)); }
.tema-btn[data-tema="galactus"] .paleta-dot:nth-child(3) { background: var(--tema-galactus-accent-3, var(--paleta-pendente)); }
.tema-btn[data-tema="galactus"] .paleta-dot:nth-child(4) { background: var(--tema-galactus-accent-4, var(--paleta-pendente)); }
.tema-btn[data-tema="galactus"] .paleta-dot:nth-child(5) { background: var(--tema-galactus-accent-5, var(--paleta-pendente)); }
.tema-btn[data-tema="elefantes"] .paleta-dot:nth-child(1) { background: var(--tema-elefantes-accent-1, var(--paleta-pendente)); }
.tema-btn[data-tema="elefantes"] .paleta-dot:nth-child(2) { background: var(--tema-elefantes-accent-2, var(--paleta-pendente)); }
.tema-btn[data-tema="elefantes"] .paleta-dot:nth-child(3) { background: var(--tema-elefantes-accent-3, var(--paleta-pendente)); }
.tema-btn[data-tema="elefantes"] .paleta-dot:nth-child(4) { background: var(--tema-elefantes-accent-4, var(--paleta-pendente)); }
.tema-btn[data-tema="elefantes"] .paleta-dot:nth-child(5) { background: var(--tema-elefantes-accent-5, var(--paleta-pendente)); }

/* Glifos de check/X do spinner: branco do tema sobre marca (verde/vermelho).
   O stroke saiu do SVG (spinner.js) para a paleta central. */
.sp-check-a, .sp-check-b, .sp-x-a, .sp-x-b { stroke: var(--texto-branco); }