/* BUG 2 (2026-05-15) — Fontes da fabrica, servidas em /fonts/<file>.ttf */
@font-face {
  font-family: 'Gliker';
  src: url('/fonts/Gliker-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Gliker';
  src: url('/fonts/Gliker-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Chewy';
  src: url('/fonts/Chewy-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'LeagueSpartan';
  src: url('/fonts/LeagueSpartan-Variable.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Moontime';
  src: url('/fonts/Moontime.ttf') format('truetype');
  font-display: swap;
}

:root {
  --bg-deepest: #0a0e1a;
  --bg-deep: #0f1524;
  --bg-card: #151d30;
  --bg-card-hover: #1a2440;
  --bg-surface: #1e2a45;
  --gold: #d4a853;
  --gold-soft: #c9a04a;
  --gold-bright: #f0c96e;
  --green: #66bb6a;
  --green-bright: #81c784;
  --green-bg: rgba(102,187,106,0.12);
  --red: #ff6b6b;
  --red-bg: rgba(255,107,107,0.1);
  --blue: #6495ed;
  --cyan: #00dcc7;
  --purple: #b388ff;
  --orange: #ffa040;
  --text-primary: #e8eaf0;
  --text-secondary: #a0afc8;
  --text-muted: #607090;
  --border: rgba(212,168,83,0.15);
  --border-subtle: rgba(255,255,255,0.04);
  --glow-gold: 0 0 30px rgba(212,168,83,0.15);
  --radius: 14px;
  --radius-sm: 8px;
  /* sync mvp (2026-06-09): vars legadas do mvp que telas portadas (monitor-links.html,
     login.html) e o indicador Telegram ainda referenciam. Sem o alias, o fundo dessas
     telas ficava BRANCO e o ponto de atenção do indicador ficava sem cor. */
  --bg-base: var(--bg-deep);
  --text: var(--text-primary);
  --yellow: var(--orange);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ROD 19 (2026-05-16) — garante tela inteira em qualquer viewport */
html, body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg-deepest);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  /* WAVE 8 (2026-05-29) — anti-pixelação em fundo escuro:
     Chrome no Windows usa subpixel-AA por padrão; em telas escuras
     com fontes finas como Outfit fica "rasgado/pixelado". Forçar
     grayscale-AA + optimizeLegibility deixa o texto liso. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  /* WAVE 8.2 (2026-05-29) — Ricardo identificou: o ruído branco do SVG turbulência
     se misturava com texto branco pequeno → sensação de "sujeira/serrilhado".
     Reduzido opacity 0.03 → 0.015 (mantém grão sutil, libera leitura). */
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
}

/* WAVE 8.3 (2026-06-03) — Ricardo: o noise ainda "mancha" os containers
   azul-claro (--bg-card #151d30 e --bg-deep #0f1524 da sidebar) porque o
   grão branco contrasta mais com tom médio do que com o fundo deep #0a0e1a
   do body. Solução cirúrgica: elevar os 3 containers principais ACIMA do
   noise (z-index 9999) — fundo deep mantém o grão aprovado na Wave 8.2,
   cards e sidebars ficam limpas igual o monitor-de-links. */
.approval-card,
.sidebar-left,
.sidebar-right {
  position: relative;
  z-index: 10000;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 3px; }

/* === LAYOUT === */
/* ROD 19 (2026-05-16) — width:100% + sem max-width: ocupa viewport inteiro
   em qualquer largura (1440, 1920, 2560). Era OK por default, mas explicito
   evita regressao caso alguem adicione max-width:1200 num .app por descuido. */
.app {
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
}

/* === LEFT SIDEBAR === */
.sidebar-left {
  background: var(--bg-deep);
  border-right: 1px solid var(--border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.brand h1 {
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand span {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.brand .brand-fabrica,
.brand .brand-user {
  display: block;
  margin-top: 4px;
  line-height: 1.25;
  word-wrap: break-word;
}

.product-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--border-subtle);
}

.product-card h2 {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 12px;
  line-height: 1.4;
}

.product-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.meta-label { color: var(--text-muted); }

.meta-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

.meta-value.price { color: var(--gold-bright); font-size: 16px; }
.meta-value.commission { color: var(--green-bright); }
.meta-value.rating { color: var(--gold); }

.product-link {
  display: block;
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(212,168,83,0.1);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  color: var(--gold);
  font-size: 11px;
  text-decoration: none;
  text-align: center;
  transition: all 0.2s;
}

.product-link:hover { background: var(--gold); color: var(--bg-deep); }

/* Queue */
.queue-section { margin-top: auto; }
/* "Fila de Aprovados" fica ACIMA da de aprovacao; nao puxa margin-top:auto */
.queue-section.queue-section-aprovados { margin-top: 0; margin-bottom: 12px; }

.queue-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.queue-title-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.queue-title-toggle:hover { color: var(--gold); }
.queue-toggle-arrow {
  font-size: 9px;
  transition: transform 0.2s;
  display: inline-block;
}
.queue-toggle-arrow.open { transform: rotate(180deg); }

.queue-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-card);
  border: 1px solid transparent;
}

.queue-item:hover { border-color: var(--border); }
.queue-item.active { border-color: var(--gold); background: rgba(212,168,83,0.1); }

.queue-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.queue-status.pending { background: var(--text-muted); }
.queue-status.current { background: var(--gold); animation: pulse 2s infinite; }
.queue-status.approved { background: var(--green); }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,83,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(212,168,83,0); }
}

/* === MAIN CONTENT === */
.main-content {
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Cards */
.approval-card {
  background: var(--bg-card);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s;
}

.approval-card:hover { border-color: var(--border); }
.approval-card.active { border-color: var(--gold); box-shadow: var(--glow-gold); }
/* GATE REMOVIDO (2026-05-25, a pedido do Ricardo): cadeado feito sem autorização
   e fora do escopo, travava até com reels pronto. .locked não bloqueia mais nada. */
.approval-card.locked { }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}

.section-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.section-number.gate { background: var(--orange); color: var(--bg-deep); }
.section-number.normal { background: var(--bg-surface); color: var(--text-muted); }
.section-number.unlocked { background: var(--gold); color: var(--bg-deep); }

.badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.badge-pending { background: var(--bg-surface); color: var(--text-muted); }
.badge-approved { background: var(--green-bg); color: var(--green); }
.badge-rejected { background: var(--red-bg); color: var(--red); }
.badge-locked { background: var(--bg-surface); color: var(--text-muted); }
.badge-gate { background: rgba(255,160,64,0.15); color: var(--orange); }

.card-body { padding: 20px; }

/* === GATE: VIDEO CUT === */
.gate-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255,160,64,0.08);
  border: 1px solid rgba(255,160,64,0.25);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--orange);
  font-weight: 600;
}

.gate-banner-icon { font-size: 20px; }

.gate-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.video-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.video-container {
  position: relative;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 9/16;
  max-height: 420px;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  padding: 6px 0;
}

.video-label.original { color: var(--text-muted); }
.video-label.cut { color: var(--green); }

.video-duration {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 700;
}

/* Cut Instructions */
.cut-instructions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cut-instructions label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cut-textarea {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  min-height: 100px;
  outline: none;
  transition: border-color 0.2s;
}

.cut-textarea:focus { border-color: var(--gold); }

.cut-textarea::placeholder { color: var(--text-muted); }

.cut-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.cut-chip {
  padding: 4px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: 10px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.cut-chip:hover { border-color: var(--gold); color: var(--gold); }

/* Timeline */
.timeline-bar {
  position: relative;
  height: 40px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: 8px;
}

.timeline-fill {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.3s;
}

.timeline-fill.keep { background: rgba(102,187,106,0.25); border: 1px solid var(--green); }
.timeline-fill.cut { background: rgba(255,107,107,0.2); border: 1px solid var(--red); }
.timeline-fill.speed { background: rgba(179,136,255,0.25); border: 1px solid var(--purple); }

.timeline-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.timeline-ticks {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
}

/* Lock Overlay */
.lock-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(10,14,26,0.7);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
  border-radius: var(--radius);
}

.lock-overlay .lock-icon { font-size: 32px; }
.lock-overlay .lock-text {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.approval-card.locked .lock-overlay { display: none; }
.approval-card.locked { position: relative; }

/* === VOICEOVER === */
.voiceover-text {
  font-size: 18px;
  line-height: 1.8;
  color: var(--text-primary);
  background: var(--bg-surface);
  padding: 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  border-left: 3px solid var(--gold);
}

.voiceover-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}

.voiceover-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.voiceover-stat strong {
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
}

/* Audio Player */
.audio-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  margin-top: 12px;
}

.play-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.play-btn:hover { transform: scale(1.1); }

.audio-progress {
  flex: 1;
  height: 4px;
  background: var(--bg-card);
  border-radius: 2px;
  cursor: pointer;
}

.audio-progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s;
}

.audio-time {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  min-width: 80px;
  text-align: right;
}

/* Photos Grid */
.photos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.photo-item {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
}

.photo-item:hover { border-color: var(--gold); transform: scale(1.02); }
.photo-item.selected { border-color: var(--green); }

.photo-item img { width: 100%; height: 100%; object-fit: cover; }

.photo-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--green);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Video Tabs */
.video-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.video-tab {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Outfit', sans-serif;
}

.video-tab:hover { border-color: var(--gold); color: var(--gold); }
.video-tab.active { background: var(--gold); color: var(--bg-deep); border-color: var(--gold); }

/* Thumbnail */
.thumb-preview {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.thumb-image {
  width: 200px;
  aspect-ratio: 9/16;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--border);
  flex-shrink: 0;
}

.thumb-image img { width: 100%; height: 100%; object-fit: cover; }

.thumb-text { flex: 1; }

.thumb-line { margin-bottom: 12px; }

.thumb-line-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.thumb-line-value {
  font-size: 16px;
  font-weight: 600;
  padding: 10px 14px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--gold);
  flex: 1;
}

/* Thumb photo chooser */
.photo-item.choosable { cursor: pointer; }
.photo-item.chosen { border-color: var(--gold); box-shadow: 0 0 12px rgba(212,168,83,0.4); }

.thumb-image-container {
  width: 200px;
  aspect-ratio: 9/16;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--border);
  flex-shrink: 0;
  position: relative;
  cursor: grab;
  background: var(--bg-surface);
}

.thumb-image-container:active { cursor: grabbing; }

.thumb-image-container img {
  width: 100%;
  position: absolute;
  left: 0;
  /* top is set by JS drag */
  user-select: none;
  -webkit-user-drag: none;
}

.thumb-choose-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(10,14,26,0.6);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  transition: opacity 0.3s;
}

.thumb-image-container.has-image .thumb-choose-hint { opacity: 0; }
.thumb-image-container.has-image:hover .thumb-choose-hint { opacity: 1; background: rgba(10,14,26,0.4); }

/* Section approve button (yellow, used in all sections) */
.section-approve-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  background: var(--gold);
  color: var(--bg-deep);
  transition: all 0.2s;
  margin-top: 16px;
  float: right;
}

.section-approve-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(212,168,83,0.3); }

/* 2026-05-22 — botao "Aguardando montagem": pulsa vermelho enquanto o reel
   esta sendo montado, travado pra impedir aprovar/publicar reel pela metade. */
@keyframes pulse-aguardando-montagem {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,107,107,0.5); }
  50%      { opacity: 0.6; box-shadow: 0 0 14px 3px rgba(255,107,107,0.55); }
}
.btn-aguardando-montagem {
  background: var(--red) !important;
  color: #fff !important;
  cursor: not-allowed !important;
  animation: pulse-aguardando-montagem 1s ease-in-out infinite;
}
.btn-aguardando-montagem:hover { transform: none !important; box-shadow: none; }

.section-btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 12px;            /* 2026-05-20: 8->12 (Ricardo pediu mais respiro entre botoes) */
  row-gap: 12px;        /* respiro tambem quando os botoes quebram em 2 linhas */
  flex-wrap: wrap;
  margin-top: 16px;
  clear: both;
}

/* Canvas thumb preview */
.thumb-canvas-container {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.thumb-canvas-container canvas {
  width: 220px;
  height: 391px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  cursor: grab;
  background: var(--bg-surface);
}

.thumb-canvas-container canvas:active { cursor: grabbing; }

.thumb-line-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.thumb-controls {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.thumb-ctrl {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.15s;
  padding: 0;
  line-height: 1;
}

.thumb-ctrl:hover { border-color: var(--gold); color: var(--gold); }

.thumb-size-label {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  min-width: 28px;
}

.thumb-line-value.watermark {
  font-style: italic;
  color: var(--gold-bright);
  border-left-color: var(--cyan);
}

/* Legenda */
.legenda-container {
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: 20px;
}

.legenda-text {
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  margin-bottom: 16px;
}

.legenda-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.hashtag {
  padding: 4px 10px;
  background: rgba(100,149,237,0.12);
  color: var(--blue);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.keyword-cta {
  display: inline-block;
  padding: 8px 16px;
  background: var(--green-bg);
  color: var(--green);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.entrega-link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.entrega-link-box:hover { background: var(--bg-card-hover); }

/* FIX 2026-06-15 (Ricardo "cadê os links?"): o link afiliado herdava uma cor oliva
   apagada e SUMIA no fundo escuro — parecia campo vazio. Os links SEMPRE estiveram
   lá; só faltava contraste. Cor de link visível (dourado claro do tema), monospace. */
#entrega-link-pago, #entrega-link {
  color: #f0c674;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

/* === RIGHT SIDEBAR === */
.sidebar-right {
  background: var(--bg-deep);
  border-left: 1px solid var(--border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
}

.controls-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

/* Progress */
.progress-ring {
  width: 110px;
  height: 110px;
  margin: 0 auto 12px;
  position: relative;
}

.progress-ring svg { transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke-width: 8; }
.progress-ring .bg { stroke: var(--bg-surface); }
.progress-ring .fg {
  stroke: var(--gold);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s;
}

.progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.progress-number {
  font-size: 24px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--gold-bright);
}

.progress-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Section List */
.section-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.section-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-card);
  border: 1px solid transparent;
}

.section-item:hover { border-color: var(--border); }
.section-item.active { border-color: var(--gold); background: rgba(212,168,83,0.1); }
.section-item.locked { }

.section-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.section-item-dot.gate { background: var(--orange); }
.section-item-dot.pending { background: var(--text-muted); }
.section-item-dot.approved { background: var(--green); }
.section-item-dot.rejected { background: var(--red); }
.section-item-dot.locked { background: var(--bg-surface); }

/* FIX 2026-06-15 (Ricardo): a luz da seção Publicar PULSA em vermelho enquanto está
   publicando; vira verde fixo (.approved) só quando o backend confirma no disco. */
.section-item-dot.publicando { background: var(--red); animation: pulseDotRed 0.9s ease-in-out infinite; }
@keyframes pulseDotRed {
  0%   { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.75); opacity: 1; }
  70%  { box-shadow: 0 0 0 7px rgba(255, 107, 107, 0); opacity: 0.55; }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); opacity: 1; }
}

.section-item-name { flex: 1; }

.section-item-key {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--bg-surface);
  border-radius: 4px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Outfit', sans-serif;
}

.action-btn.approve { background: var(--green); color: #fff; }
.action-btn.approve:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(102,187,106,0.3); }

.action-btn.reject { background: transparent; border: 1px solid var(--red); color: var(--red); }
.action-btn.reject:hover { background: var(--red-bg); }

.action-btn.publish {
  background: var(--orange);
  color: var(--bg-deep);
  font-size: 14px;
  padding: 16px;
  margin-top: 8px;
}

.action-btn.publish:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(255,160,64,0.3); }
.action-btn.publish:disabled { opacity: 0.3; cursor: not-allowed; transform: none; box-shadow: none; }

.action-key {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}

/* Keyboard Hints */
.keyboard-hints {
  padding: 10px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
}

.keyboard-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.keyboard-hint:last-child { margin-bottom: 0; }

.key {
  padding: 2px 6px;
  background: var(--bg-surface);
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  /* 2026-06-14 — era 1000; a WAVE 8.3 elevou .approval-card/sidebars pra 10000
     (escapar do noise 9999) e o toast clássico passou a ficar ESCONDIDO atrás
     dos cards/abas. Sobe pra 10002 (acima dos cards 10000 e do
     #mineracao-toast-container 10001) pra os erros voltarem a aparecer. */
  z-index: 10002;
  transition: transform 0.3s;
}

.toast.show { transform: translateX(-50%) translateY(0); }
.toast.success { background: var(--green); color: #fff; }
.toast.error { background: var(--red); color: #fff; }
.toast.info { background: var(--gold); color: var(--bg-deep); }
.toast.warning { background: var(--gold-bright); color: var(--bg-deep); }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal-content { max-width: 90vw; max-height: 90vh; border-radius: var(--radius); overflow: hidden; }
.modal-content img { max-width: 100%; max-height: 90vh; object-fit: contain; }

/* === INLINE ACTION BUTTONS === */
.inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  transition: all 0.2s;
}

.inline-btn:hover { transform: translateY(-1px); }
.inline-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.inline-btn.send {
  background: var(--gold);
  color: var(--bg-deep);
}

.inline-btn.generate {
  background: var(--cyan);
  color: var(--bg-deep);
}

.inline-btn.danger {
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
  padding: 4px 8px;
  font-size: 10px;
}

.inline-btn.danger:hover { background: var(--red-bg); }

.inline-btn.small {
  padding: 6px 12px;
  font-size: 11px;
}

/* WAVE 9.4 (2026-05-29) — variante "ghost" pra botões secundários sem modificador de cor.
   Pareado com .product-link (Ver na Shopee) pra harmonizar: mesma altura visual, mesmo
   padding, mesma forma de borda. Diferença = cor da borda: o primário (.product-link)
   tem borda gold; o secundário (.ghost) tem borda branca translúcida. Texto centralizado,
   peso normal (sem negrito). */
.inline-btn.ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.45);
  justify-content: center;
  font-weight: 500;
}
.inline-btn.ghost:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(212, 168, 83, 0.08);
  box-shadow: 0 0 8px rgba(212, 168, 83, 0.18);
}

/* WAVE 9.5 (2026-05-29) — botões admin (Mineração / Monitor / Monitor de Link):
   borda branca translúcida 4px (mais grossa que botões comuns) só pra diferenciá-los
   dos outros botões da topbar. Fundo dark uniforme; cor zero. Fonte 13px (+20% sobre o .small). */
.inline-btn.admin-tag-btn {
  background: var(--bg-surface);
  color: var(--text-soft);
  border: 4px solid rgba(255, 255, 255, 0.45);
  font-size: 13px;       /* +20% sobre o .small (11px) */
  font-weight: 600;
}
.inline-btn.admin-tag-btn:hover {
  background: #1a2238;
  border-color: var(--gold);
  color: var(--gold-bright);
  box-shadow: 0 0 8px rgba(212, 168, 83, 0.18);
}

/* Upload buttons (Substituir vídeo / Adicionar foto) — tom azul/cinza
   sobrio, em linha com o padrao da dashboard. */
.inline-btn.upload-btn {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--gold);
  box-shadow: 0 0 8px rgba(212, 168, 83, 0.25);
  font-weight: 500;
  font-size: 13px; /* +20% sobre o .small (11px) */
}
.inline-btn.upload-btn:hover {
  background: rgba(212, 168, 83, 0.12);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  box-shadow: 0 0 12px rgba(240, 201, 110, 0.4);
}

/* Editable text area */
.editable-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--bg-surface);
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  width: 100%;
  resize: vertical;
  outline: none;
  font-family: 'Outfit', sans-serif;
  transition: border-color 0.2s;
}

.editable-text:focus { border-color: var(--gold); }

.btn-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

/* Photo delete */
.photo-delete {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,107,107,0.9);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 1;
}

.photo-item:hover .photo-delete { display: flex; }
.photo-delete:hover { background: var(--red); transform: scale(1.15); }

/* Photo Gemini regenerate */
.photo-gemini {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,220,199,0.9);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 11px;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 1;
}
.photo-item:hover .photo-gemini { display: flex; }
.photo-gemini:hover { background: var(--cyan); transform: scale(1.15); }

.photo-item.deleted {
  display: none;
}

/* ROD 12 (2026-05-15) — Fotos: 2 toggles (thumb + video) */
.photo-toggles {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 9px;
  background: rgba(0,0,0,0.7);
  padding: 4px;
  border-radius: 4px;
  color: #fff;
  z-index: 2;
}
.photo-toggle { cursor: pointer; display: flex; align-items: center; gap: 4px; }
.photo-item.thumb-selected { border-color: var(--gold); box-shadow: 0 0 12px var(--gold); }
.photo-item.video-selected { outline: 2px solid var(--cyan); }

/* === OVERLAY FRASES === */
.overlay-frase {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--cyan);
}

.overlay-frase-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.overlay-frase-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  flex: 1;
}

.overlay-frase-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  padding: 4px 0;
  outline: none;
  transition: border-color 0.2s;
}

.overlay-frase-input:focus { border-bottom-color: var(--cyan); }

.overlay-frase-timing {
  margin-left: auto;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  flex-shrink: 0;
}

.overlay-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
}

/* === PUBLISH SECTION === */
.publish-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.publish-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.25s;
  font-family: 'Outfit', sans-serif;
  position: relative;
  overflow: hidden;
}

.publish-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.publish-btn:hover { transform: translateY(-3px); }
.publish-btn:active { transform: translateY(0); }

/* === BOTÕES PUBLICAR — redesign 2026-06-02 (síntese Kimi 2x + frontend-design) ===
   Princípio: SÓ o protagonista (Definitiva) emite luz (ouro). Os demais recuam
   em camadas de calor (âmbar) e neutro. Foco pela LUMINOSIDADE, não pela cor. */

/* conteúdo sempre acima do brilho ::before do protagonista */
.publish-btn-icon, .publish-btn-text, .publish-btn-badge { position: relative; z-index: 1; }

/* #1 POSTAR REELS (Manus, pago) — secundário: âmbar recuado sobre escuro.
   Antes era laranja sólido berrante; agora quente mas sóbrio, casa com o ouro. */
.publish-btn.reels {
  background: linear-gradient(160deg, rgba(255,160,64,0.18) 0%, rgba(201,132,44,0.06) 100%);
  color: var(--text-primary);
  border: 1px solid rgba(255,160,64,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.publish-btn.reels .publish-btn-label { color: #ffb877; }
.publish-btn.reels:hover {
  background: linear-gradient(160deg, rgba(255,160,64,0.26) 0%, rgba(201,132,44,0.11) 100%);
  border-color: rgba(255,160,64,0.48);
  box-shadow: 0 6px 20px rgba(255,160,64,0.12);
}

/* #3 POSTAR STORIES (Manus) — terciário: irmão em linha fina (1px, não 2px) */
.publish-btn.stories {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid rgba(255,160,64,0.22);
  box-shadow: none;
}
.publish-btn.stories .publish-btn-label { color: #ffb877; }
.publish-btn.stories:hover {
  background: rgba(255,160,64,0.06);
  border-color: rgba(255,160,64,0.40);
  color: var(--text-primary);
}

/* #2 POSTAGEM REELS DEFINITIVA (Meta API) — PROTAGONISTA ouro premium.
   Curva de iluminação (5 paradas, 165°, hotspot especular) + brilho metálico no
   topo (::before) + sombra dupla (aura dourada + contato) + texto escuro = luxo. */
.publish-btn.reels-definitiva {
  padding-top: 24px; /* respiro pro selo no topo */
  background: linear-gradient(165deg, #8c6b2f 0%, #b8933f 20%, #f0d78a 42%, #c9a04a 65%, #9e7b3a 100%);
  color: var(--bg-deepest);
  border: 1px solid rgba(240,201,110,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -2px 4px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,232,192,0.10),
    0 6px 24px -4px rgba(212,168,83,0.40);
}
.publish-btn.reels-definitiva::before {
  opacity: 1;
  inset: 0 0 auto 0;
  height: 48%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.publish-btn.reels-definitiva .publish-btn-label { font-weight: 800; letter-spacing: 0.3px; color: #0a0e1a; }
.publish-btn.reels-definitiva .publish-btn-sub { opacity: 1; color: rgba(20,26,43,0.72); }
.publish-btn.reels-definitiva:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 0 0 1px rgba(255,232,192,0.20),
    0 14px 36px -4px rgba(212,168,83,0.52);
}
.publish-btn.reels-definitiva:disabled { filter: none; }

/* Selo "RECOMENDADO" — pill elegante, fundo escuro translúcido + borda dourada */
.publish-btn-badge {
  position: absolute;
  top: 7px;
  right: 9px;
  z-index: 2;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(10,14,26,0.82);
  color: var(--gold-bright);
  border: 1px solid rgba(212,168,83,0.40);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  line-height: 1;
}
.publish-btn:disabled .publish-btn-badge { opacity: 0.5; }

/* #4 POSTAGEM MANUAL — fallback neutro, coeso (borda 1px como os irmãos) */
.publish-btn.manual {
  background: rgba(30,42,69,0.45);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  box-shadow: none;
}
.publish-btn.manual:hover {
  background: var(--bg-card-hover);
  border-color: rgba(212,168,83,0.30);
  color: var(--text-primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.30);
}

/* Botão "Concluir e arquivar" — verde discreto, aparece após postar (2026-06-02) */
.publish-btn-concluir {
  margin-top: 12px;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--green-bg);
  border: 1px solid rgba(102,187,106,0.40);
  color: var(--green-bright);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.publish-btn-concluir:hover {
  background: rgba(102,187,106,0.20);
  border-color: var(--green);
  transform: translateY(-1px);
}
.publish-btn-concluir:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.publish-btn-concluir-sub { font-weight: 400; opacity: 0.7; margin-left: 6px; }

/* === BOTÃO DE FECHO "Concluir e arquivar" (fim da tela, após seção 11) — 2026-06-02
   pulse que respira + degradê verde rico + shimmer no hover + ícone dourado. === */
.conclude-endcap { width: 100%; margin: 22px 0 10px; }
.btn-conclude{
  position:relative; z-index:1; width:100%; min-height:68px; padding:0 28px;
  display:flex; align-items:center; justify-content:center; gap:16px;
  border:1.5px solid rgba(102,187,106,0.45); border-radius:var(--radius);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(129,199,132,0.20) 0%, transparent 55%),
    linear-gradient(180deg, rgba(82,170,100,0.42) 0%, rgba(45,110,65,0.34) 45%, rgba(14,38,24,0.60) 100%);
  color:var(--text-primary); cursor:pointer; font-family:'Outfit', sans-serif;
  box-shadow:0 6px 22px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.07), 0 0 0 0 rgba(102,187,106,0);
  transition:transform .25s cubic-bezier(.4,0,.2,1), border-color .25s, background .25s;
  animation:pulse-glow-conclude 2.6s ease-in-out infinite;
}
.btn-conclude::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.13) 50%, transparent 62%);
  background-size:220% 100%; background-position:130% 0; opacity:0;
  transition:opacity .3s ease, background-position .7s ease}
.btn-conclude:hover{
  transform:translateY(-2px); border-color:rgba(129,199,132,0.78);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(129,199,132,0.28) 0%, transparent 55%),
    linear-gradient(180deg, rgba(95,190,115,0.52) 0%, rgba(55,130,78,0.44) 45%, rgba(18,46,30,0.72) 100%);
  box-shadow:0 12px 34px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.10), 0 0 30px 4px rgba(102,187,106,0.28);
  animation-play-state:paused;
}
.btn-conclude:hover::after{opacity:1; background-position:-30% 0}
.btn-conclude:disabled{opacity:.5; cursor:not-allowed; animation:none; transform:none}
.btn-conclude__badge{display:flex; align-items:center; justify-content:center; width:40px; height:40px; position:relative; z-index:2;
  border-radius:10px; background:rgba(102,187,106,0.20); color:var(--green-bright); flex-shrink:0;
  transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease}
.btn-conclude:hover .btn-conclude__badge{transform:scale(1.10); background:rgba(240,201,110,0.18); color:var(--gold-bright); box-shadow:0 0 14px rgba(212,168,83,0.25)}
.btn-conclude__copy{position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.btn-conclude__title{font-size:16px; font-weight:800; letter-spacing:.3px; line-height:1.2}
.btn-conclude__sub{font-size:12px; font-weight:400; color:rgba(232,234,240,0.62); line-height:1.3}
@keyframes pulse-glow-conclude{
  0%,100%{ box-shadow:0 6px 22px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.07), 0 0 0 0 rgba(102,187,106,0); }
  50%{ box-shadow:0 6px 22px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.07), 0 0 26px 3px rgba(102,187,106,0.22); }
}

.publish-btn-icon { font-size: 22px; }

.publish-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.publish-btn-label { font-size: 15px; font-weight: 700; }
.publish-btn-sub { font-size: 10px; font-weight: 400; opacity: 0.8; }

.publish-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* === META ADS SECTION === */
.meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-card {
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-card-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.meta-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.meta-input:focus { border-color: var(--gold); }

.meta-select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23607090' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.meta-select:focus { border-color: var(--gold); }

.meta-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meta-chip {
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-family: 'Outfit', sans-serif;
}

.meta-chip:hover { border-color: var(--gold); color: var(--gold); }
.meta-chip.selected { background: rgba(212,168,83,0.15); border-color: var(--gold); color: var(--gold); }

.meta-boost-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 2026-06-15 (Ricardo): joga o botão pra DIREITA (era o único alinhado à esquerda;
     todas as outras ações de aprovação ficam à direita). Pai é block → margin-left:auto. */
  margin-left: auto;
  gap: 10px;
  padding: 18px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  background: linear-gradient(135deg, #1877F2, #0D65D9);
  color: #fff;
  box-shadow: 0 4px 20px rgba(24,119,242,0.3);
  transition: all 0.25s;
  margin-top: 8px;
}

.meta-boost-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(24,119,242,0.5); }
.meta-boost-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.meta-estimate {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}

.meta-estimate-card {
  flex: 1;
  text-align: center;
  padding: 14px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.meta-estimate-value {
  font-size: 20px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 2px;
}

.meta-estimate-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
}

@media (max-width: 1200px) {
  .app { grid-template-columns: 1fr; }
  .sidebar-left, .sidebar-right { display: none; }
}

/* === EM TESTE 2026-05-15 — BUG 3: links longos nao quebram layout === */
.entrega-link-box {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
  box-sizing: border-box;
  flex-wrap: wrap;
  min-width: 0;
}
.entrega-link-box > span:last-child {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.info-card {
  min-width: 0;
  box-sizing: border-box;
}
.info-card > div {
  min-width: 0;
  flex-wrap: wrap;
}
/* Subid hoje vem com white-space: nowrap — soltar */
.info-card .meta-subid-pill {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* === FIX 2 (2026-05-15) — overlay refactor: frases sequenciais MESMA posicao === */
.overlay-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  /* 2026-06-16 (Ricardo): stretch p/ a coluna do preview esticar até a altura do
     editor — assim o card "atualizar divisão" preenche o espaço ao lado da marca d'água. */
  align-items: stretch;
}
.overlay-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.overlay-frase-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--cyan);
  min-width: 0;
}
.overlay-frase-row.cta {
  border-left-color: var(--gold);
}
.overlay-frase-row .frase-label {
  flex: 0 0 130px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-top: 6px;
}
.overlay-frase-row .frase-label.cta { color: var(--gold); }
.overlay-frase-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  resize: vertical;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-primary);
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
}
.overlay-frase-input:focus { outline: none; border-color: var(--cyan); }
.overlay-shared-sliders {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  margin-top: 6px;
}
.overlay-shared-sliders .slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.overlay-shared-sliders .slider-row label {
  flex: 0 0 120px;
  color: var(--text-muted);
}
.overlay-shared-sliders .slider-row input[type=range] {
  flex: 1;
}
.overlay-shared-sliders .slider-row .val {
  flex: 0 0 44px;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  color: var(--cyan);
  font-size: 11px;
}

/* ROD 21 (2026-05-16) — T4: overlay por frase, cada card com setagem propria */
.overlay-frase-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--cyan);
  border: 1px solid var(--border-subtle);
  border-left-width: 3px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.overlay-frase-card.cta { border-left-color: var(--gold); }
.overlay-frase-card.aprovada {
  background: rgba(120, 220, 130, 0.15);
  border-color: rgba(120, 220, 130, 0.55);
  border-left-color: var(--green);
}
.overlay-frase-card.desativada {
  opacity: 0.55;
  background: rgba(255,255,255,0.02);
  border-color: var(--border-subtle);
}
.overlay-frase-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.overlay-frase-card .frase-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.overlay-frase-card .frase-label.cta { color: var(--gold); }
.overlay-frase-card .overlay-frase-input {
  width: 100%;
  min-height: 38px;
  resize: vertical;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-primary);
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  box-sizing: border-box;
}
.overlay-frase-card .overlay-frase-input:focus {
  outline: none;
  border-color: var(--cyan);
}
.overlay-frase-sliders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  padding: 4px 0 0;
}
.overlay-frase-sliders .slider-row.mini {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}
.overlay-frase-sliders .slider-row.mini label {
  flex: 0 0 80px;
  color: var(--text-muted);
}
.overlay-frase-sliders .slider-row.mini input[type=range] { flex: 1; min-width: 0; }
/* ROD 35 (2026-05-17): slider visivel mesmo nao-aprovado (cor dourada
   contrastante no track + thumb maior). accent-color cobre Chromium+FF. */
.overlay-frase-sliders .ov-range, .overlay-shared-sliders .ov-range {
  accent-color: var(--gold-bright, #ffc850);
  height: 18px;
  cursor: pointer;
}
.overlay-frase-sliders .ov-range::-webkit-slider-runnable-track,
.overlay-shared-sliders .ov-range::-webkit-slider-runnable-track {
  background: linear-gradient(to right, rgba(255,200,80,0.45), rgba(255,200,80,0.12));
  height: 6px;
  border-radius: 4px;
}
.overlay-frase-sliders .ov-range::-webkit-slider-thumb,
.overlay-shared-sliders .ov-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255,200,80,0.85);
  border: 2px solid var(--bg-deep, #0a0f1c);
  margin-top: -3.5px;
  box-shadow: 0 0 3px rgba(255,200,80,0.35);
}
.overlay-frase-sliders .ov-range::-moz-range-track,
.overlay-shared-sliders .ov-range::-moz-range-track {
  background: linear-gradient(to right, rgba(255,200,80,0.45), rgba(255,200,80,0.12));
  height: 6px;
  border-radius: 4px;
}
.overlay-frase-sliders .ov-range::-moz-range-thumb,
.overlay-shared-sliders .ov-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255,200,80,0.85);
  border: 2px solid var(--bg-deep, #0a0f1c);
}
.overlay-frase-sliders .slider-row.mini .val {
  flex: 0 0 50px;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  color: var(--cyan);
  font-size: 10px;
}
/* input[type=number] editavel direto: clica e digita.
   Fundo discreto + leve degrade pra nao destoar do card (branco era feio). */
.overlay-frase-sliders .val-edit, .overlay-shared-sliders .val-edit {
  background: linear-gradient(180deg, rgba(20,30,50,0.55), rgba(10,18,32,0.85));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 2px 4px;
  width: 50px;
  color: var(--cyan);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-align: right;
  cursor: text;
  -moz-appearance: textfield;
}
.overlay-frase-sliders .val-edit, .overlay-shared-sliders .val-edit::-webkit-outer-spin-button,
.overlay-frase-sliders .val-edit, .overlay-shared-sliders .val-edit::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.overlay-frase-sliders .val-edit, .overlay-shared-sliders .val-edit:focus {
  outline: none;
  border-color: rgba(255,200,80,0.55);
  background: linear-gradient(180deg, rgba(40,50,75,0.6), rgba(20,28,45,0.9));
}
.ov-aprovar-btn {
  background: var(--bg-card);
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
}
.ov-aprovar-btn:hover { background: rgba(120, 220, 130, 0.18); }
.ov-aprovar-btn.aprovada {
  background: var(--green);
  color: var(--bg-deep);
  border-color: var(--green);
}
.overlay-approve-status {
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 10px;
  background: var(--bg-card);
  border-radius: 4px;
  border: 1px dashed var(--border-subtle);
  text-align: center;
}
.overlay-all-approved {
  font-size: 12px;
  color: var(--bg-deep);
  background: var(--green);
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

.overlay-preview-col {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.overlay-preview-box {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: linear-gradient(180deg, #1a2440, #0a0e1a);
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.overlay-preview-box video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* ROD 39 (2026-05-17): Poppins pro preview bater com o back (gerar_overlay_png) */
@font-face {
  font-family: 'PoppinsOverlay';
  src: url('/fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'PoppinsOverlay';
  src: url('/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 100 600;
  font-style: normal;
  font-display: block;
}
.overlay-frase-display {
  position: absolute;
  left: 6%;
  right: 6%;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-family: 'PoppinsOverlay', system-ui, sans-serif;
  font-weight: 800;
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  line-height: 1.15;
  word-break: break-word;
  transform: translateY(-50%);
  z-index: 2;
  /* top + font-size injetados via JS */
}
.overlay-frase-display.empty {
  background: transparent;
  color: rgba(255,255,255,0.3);
  font-weight: 400;
  font-size: 11px !important;
}
.overlay-counter {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 10px;
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  z-index: 2;
}
.overlay-controls {
  display: flex;
  gap: 6px;
}
.overlay-controls button {
  flex: 1;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
}
.overlay-controls button:hover { border-color: var(--cyan); color: var(--cyan); }

.overlay-approve-note {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255,210,80,0.12);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Mantido pra compat (estado vazio) */
.overlay-empty {
  padding: 16px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
}

/* EM TESTE 2026-05-15 — FIX 4: sliders ~15% mais magros (track e thumb) */
input[type=range],
input[type=range].tuner-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--bg-surface);
  border-radius: 2px;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: 0;
}
input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: 0;
}
input[type=range]::-moz-range-track {
  height: 4px;
  background: var(--bg-surface);
  border-radius: 2px;
}
input[type=range]:disabled::-webkit-slider-thumb { background: var(--text-muted); cursor: not-allowed; }
input[type=range]:disabled::-moz-range-thumb { background: var(--text-muted); cursor: not-allowed; }

/* ============================================================ */
/* ROD 15 (2026-05-15) — Split de comissão (Shopee/Vendedor/Total) */
/* ============================================================ */
.commission-split {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg-card-hover);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  margin: 4px 0;
}
.commission-split-title {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.commission-split-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
}
.commission-split-row.commission-total-row {
  padding-top: 4px;
  margin-top: 2px;
  border-top: 1px dashed var(--border-subtle);
  font-weight: 700;
}
.commission-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.commission-dot.commission-shopee { background: var(--orange); }
.commission-dot.commission-seller { background: var(--cyan); }
.commission-dot.commission-total { background: var(--green); }
.commission-label {
  color: var(--text-secondary);
  flex: 1;
}
.commission-value { font-weight: 600; }
.commission-shopee-text { color: var(--orange); }
.commission-seller-text { color: var(--cyan); }
.commission-total-text { color: var(--green); font-weight: 800; }

/* Entrega — split inline */
.entrega-commission-split {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.entrega-commission-row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
}
.entrega-commission-row.entrega-commission-total {
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px dashed var(--border-subtle);
  font-weight: 700;
  font-size: 13px;
}
.entrega-commission-label { color: var(--text-secondary); }
.entrega-commission-pct { text-align: right; font-weight: 600; }
.entrega-commission-val { text-align: right; color: var(--text-muted); min-width: 60px; }

/* ========================================
   INTERACTIVE VIDEO EDITOR (CapCut-like)
   ======================================== */

.ve-timeline {
  user-select: none;
  margin-top: 16px;
}

/* Container do track precisa de respiro acima — a seta dourada do playhead
   sobressai 6-8px no topo do track e estava encostando no label
   "Editor de video interativo" logo acima. */
#ve-timeline-container {
  margin-top: 14px;
}

.ve-track {
  position: relative;
  height: 56px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  overflow: visible;
}

.ve-track-bg {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 10%,
    rgba(255,255,255,0.02) 10%,
    rgba(255,255,255,0.02) 20%
  );
  border-radius: inherit;
}

.ve-segment {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: linear-gradient(135deg, rgba(102,187,106,0.3) 0%, rgba(102,187,106,0.15) 100%);
  border: 2px solid var(--green);
  border-radius: 6px;
  cursor: grab;
  transition: border-color 0.2s, background 0.2s;
}

.ve-segment.active {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(255,193,7,0.25) 0%, rgba(255,193,7,0.1) 100%);
  z-index: 10;
}

.ve-segment:hover {
  border-color: var(--gold);
}

.ve-segment-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.ve-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  cursor: ew-resize;
  z-index: 20;
}

.ve-handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 24px;
  background: var(--gold);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}

.ve-handle:hover::before,
.ve-segment.active .ve-handle::before {
  opacity: 1;
}

.ve-handle-in {
  left: -7px;
  border-radius: 6px 0 0 6px;
}

.ve-handle-out {
  right: -7px;
  border-radius: 0 6px 6px 0;
}

/* Botão de play JUNTO da alça — espelha .vea-play-toggle da Edição Avançada.
   Fica no segmento ativo, encostado na alça-in, e toca só o trecho [in,out]. */
.ve-play-toggle {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold-bright); color: var(--bg-deep);
  border: none; font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; z-index: 25;
  box-shadow: 0 0 10px rgba(240,201,110,0.5);
}
.ve-play-toggle:hover { filter: brightness(1.1); }

.ve-cut-zone {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,107,107,0.15) 0,
    rgba(255,107,107,0.15) 4px,
    transparent 4px,
    transparent 8px
  );
  border: 1px dashed var(--red);
  border-radius: 4px;
  pointer-events: none;
}

.ve-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: translateX(-50%);
  z-index: 30;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(255,193,7,0.6);
}

.ve-playhead::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--gold);
}

.ve-ticks {
  position: relative;
  height: 20px;
  margin-top: 4px;
}

.ve-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.ve-stats {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.ve-stat {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.ve-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ve-stat-value {
  font-size: 14px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

/* Quick action buttons for video editor */
.ve-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ve-action-btn {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Outfit', sans-serif;
}

.ve-action-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.ve-action-btn.active {
  background: var(--gold);
  color: var(--bg-deep);
  border-color: var(--gold);
}

.ve-action-btn.danger:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Speed slider */
.ve-speed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.ve-speed-slider {
  flex: 1;
  height: 6px;
  background: var(--bg-surface);
  border-radius: 3px;
  -webkit-appearance: none;
  appearance: none;
}

.ve-speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--gold);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.ve-speed-value {
  min-width: 40px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--gold);
}

/* ============================================================ */
/* ROD 18 (2026-05-16) — Sistema de logs de erro                 */
/* ============================================================ */
.error-fab {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: var(--red);
  color: white;
  padding: 10px 16px;
  border-radius: 24px;
  font-weight: 700;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  border: 0;
  font-size: 13px;
  font-family: inherit;
  transition: transform 0.15s ease;
}
.error-fab:hover { transform: translateY(-2px); }
.error-fab.zero { background: var(--text-muted); opacity: 0.5; }

.error-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10,14,26,0.85);
  z-index: 2000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.error-modal.open { display: flex; }
.error-modal-content {
  background: var(--bg-deep);
  border: 1px solid var(--gold-soft);
  border-radius: 12px;
  max-width: 900px;
  width: 100%;
  padding: 24px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.error-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bg-surface);
}
.error-modal-header h2 {
  margin: 0;
  font-size: 18px;
  color: var(--gold);
}
.error-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 12px;
}
.error-summary-item {
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--bg-surface);
}
.error-summary-item.recorrente { color: var(--red); border-left: 3px solid var(--red); }
.error-summary-item.pontual { color: var(--orange); border-left: 3px solid var(--orange); }
.error-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.error-actions button {
  padding: 6px 12px;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-surface);
  color: var(--text-muted);
}
.error-actions button:hover { background: var(--gold); color: var(--bg-deep); }

.error-item {
  background: var(--bg-surface);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 12px;
}
.error-item.recorrente { border-left: 3px solid var(--red); }
.error-item.pontual { border-left: 3px solid var(--orange); }
.error-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.error-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
.error-tag.recorrente { background: var(--red); color: white; }
.error-tag.pontual { background: var(--orange); color: var(--bg-deep); }
.error-endpoint {
  font-family: 'JetBrains Mono', monospace;
  color: var(--gold);
  font-weight: 700;
}
.error-ts {
  color: var(--text-muted);
  font-size: 10px;
}
.error-msg {
  color: var(--red);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  margin: 4px 0;
}
.error-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.error-item-actions button {
  padding: 3px 8px;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
  font-size: 10px;
  background: var(--bg-deep);
  color: var(--text-muted);
}
.error-item-actions button:hover { background: var(--gold); color: var(--bg-deep); }
.error-trace {
  display: none;
  background: var(--bg-deepest);
  border-radius: 4px;
  padding: 8px;
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}
.error-trace.open { display: block; }

/* ============================================================
 * ROD 20.1 (2026-05-16) — Tabs DE VOLTA na seção Thumbnail.
 * Linha 1: Canvas live + PNG final lado a lado (sempre visiveis).
 * Linha 2: tabs (Linhas / Ajustes finos) + pane embaixo.
 * Layout antigo `.thumb-layout-grid` removido. Mantemos os mesmos
 * `.thumb-col`, `.thumb-png-final`, etc — reuso do CSS R20.
 * ============================================================ */
.thumb-preview-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.thumb-preview-row .thumb-col {
  flex: 0 0 auto;
  width: 260px;
}

/* Tabs do painel de controles (Linhas / Ajustes finos) */
.thumb-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.btn-tab {
  background: var(--bg-surface);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  border-bottom: none;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-tab:hover { color: var(--gold); border-color: var(--gold); }
.btn-tab.active { background: var(--gold); color: var(--bg-deep); border-color: var(--gold); }

.thumb-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 4px 4px;
}

/* .thumb-line, .thumb-line-label, .thumb-line-row, .thumb-controls, .thumb-ctrl
   ja definidos acima (linhas ~648-794) — reuso, sem duplicar. */

/* Layout antigo .thumb-layout-grid (mantido pra compat, mas nao usado mais) */
.thumb-layout-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(220px, 280px) 1fr;
  gap: 16px;
  align-items: flex-start;
}

.thumb-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.thumb-col-title {
  font-size: 10px;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.thumb-col-caption {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}

/* Coluna 1 — canvas */
.thumb-col-canvas canvas#thumb-canvas {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 9 / 16;
  height: auto;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  cursor: grab;
  background: var(--bg-surface);
  display: block;
}

.thumb-col-canvas canvas#thumb-canvas:active { cursor: grabbing; }

/* Coluna 2 — PNG final do Pillow */
.thumb-png-final {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 9 / 16;
  height: auto;
  background: #151d30;
  border-radius: var(--radius);
  border: 2px solid var(--gold);
  object-fit: cover;
  display: block;
}

/* Coluna 3 — controles compactos */
.thumb-col-ctrls {
  max-height: 720px;
  overflow-y: auto;
  padding-right: 6px;
}

.thumb-text-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.thumb-text-input-row label {
  flex: 0 0 28px;
  font-size: 10px;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
}

.thumb-text-input {
  flex: 1;
  font-size: 12px;
  padding: 5px 8px;
}

/* Sliders compactos (1 linha cada: label + slider + valor) */
.thumb-sliders-compact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 8px;
}

.thumb-sliders-compact input[type="range"].tuner-slider {
  width: 100%;
  max-width: 200px;
  height: 14px;
}

/* ROD 27 (2026-05-16) — T3: Coluna ESQUERDA encolhida pra imagem 210px caber
   sem espaco vazio. Direita (tabs) ganha mais espaco. Era 1fr/1fr.
   Em <960px cai pra 1 coluna (mobile/tela apertada). */
.thumb-layout-2col {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(380px, 1fr);
  gap: 24px;
  align-items: flex-start;
}

.thumb-layout-left,
.thumb-layout-right {
  min-width: 0;
}

@media (max-width: 960px) {
  .thumb-layout-2col {
    grid-template-columns: 1fr;
  }
}

/* ROD 23 (2026-05-16) — T1+T5: Preview Pillow agora eh primario (grande, topo).
   Canvas live fica em <details> debug. */
.thumb-preview-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;  /* sync mvp (item 52): thumb nao vaza pros cards de baixo no scroll */
}

.thumb-preview-primary .thumb-col-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

/* ROD 27 (2026-05-16) — T4: Foto cresce pra preencher coluna (titulo removido).
   max-width 280px = max da coluna esquerda. T2 era 210px com titulo em cima. */
.thumb-png-primary {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 9 / 16;
  height: auto;
  border-radius: var(--radius);
  border: 2px solid var(--gold);
  background: #151d30;
  object-fit: cover;
  display: block;
}

.thumb-canvas-debug {
  margin: 0 0 14px 0;
  padding: 8px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.thumb-canvas-debug > summary {
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  user-select: none;
  padding: 4px 0;
}

.thumb-canvas-debug[open] > summary {
  margin-bottom: 8px;
  color: var(--text-soft);
}

.thumb-canvas-debug .thumb-col-canvas {
  max-width: 240px;
}

.thumb-canvas-debug canvas#thumb-canvas {
  max-width: 240px;
}

/* Badge "Modificado, regerar" — T5 */
.thumb-modified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--gold);
  color: var(--bg-deep);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: thumb-modified-pulse 1.4s ease-in-out infinite;
}

@keyframes thumb-modified-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Responsivo — viewport <1200px: 2x2 (canvas+PNG em cima, controles full largura embaixo) */
@media (max-width: 1199px) {
  .thumb-layout-grid {
    grid-template-columns: 1fr 1fr;
  }
  .thumb-col-ctrls {
    grid-column: 1 / -1;
    max-height: none;
  }
}

/* Viewport <720px: tudo empilhado */
@media (max-width: 719px) {
  .thumb-layout-grid {
    grid-template-columns: 1fr;
  }
  .thumb-col-ctrls {
    grid-column: auto;
  }
}

/* === AUDIO CHIPS (voiceover / bgm) — hover pra mostrar X de excluir === */
#vo-tabs, #bgm-tabs {
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
#vo-tabs::-webkit-scrollbar, #bgm-tabs::-webkit-scrollbar {
  height: 4px;
}
#vo-tabs::-webkit-scrollbar-track, #bgm-tabs::-webkit-scrollbar-track {
  background: transparent;
}
#vo-tabs::-webkit-scrollbar-thumb {
  background: rgba(0, 220, 199, 0.45);  /* WAVE 9.5 (2026-05-29) — cyan no scroll do bloco VOZ */
  border-radius: 2px;
}
#bgm-tabs::-webkit-scrollbar-thumb {
  background: rgba(179, 136, 255, 0.45);  /* purple no scroll do bloco BGM */
  border-radius: 2px;
}
/* WAVE 9.5 (2026-05-29) — chips do bloco VOZ pareados com BGM:
   - normal: borda cyan + texto cyan
   - hover: texto fica gold (igual ao padrão da BGM)
   - ativo: fundo cyan + texto branco (padrão BGM = fundo purple + texto branco)
   Atenção: o JS coloca a classe .active no SPAN parent (.audio-chip), não no botão.
   Por isso o seletor é .audio-chip.active .video-tab (igual ao usado pra BGM). */
#vo-tabs .video-tab {
  border-color: var(--cyan);
  color: var(--cyan);
}
#vo-tabs .video-tab:hover {
  border-color: var(--gold);
  color: var(--gold);
}
#vo-tabs .audio-chip.active .video-tab {
  background: var(--cyan);
  color: #fff;
  border-color: var(--cyan);
}
#vo-tabs .audio-chip.active .video-tab:hover {
  color: var(--gold);
}
#bgm-tabs::-webkit-scrollbar-thumb {
  background: rgba(179, 136, 255, 0.45);
}

.audio-chip {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
}
.audio-chip .video-tab {
  border-radius: 4px 0 0 4px;
}
.audio-chip .chip-del {
  display: none;
  background: rgba(255, 90, 90, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 90, 90, 0.85);
  border-left: 0;
  padding: 0 8px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.audio-chip:hover .chip-del {
  display: inline-flex;
}
.audio-chip .chip-del:hover {
  background: rgb(220, 60, 60);
}
.audio-chip.active .video-tab {
  background: var(--gold);
  color: var(--bg-deep);
}
#bgm-tabs .audio-chip.active .video-tab {
  background: var(--purple);
  color: #fff;
}


/* ROD 41 (2026-05-18) - Mineracao Inteligente: cards de sinais + score badges */
.mineracao-sinal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.2s;
}
.mineracao-sinal-card:hover { border-color: var(--gold); }  /* WAVE 9.4 (2026-05-29) — paleta gold uniforme */
.mineracao-sinal-titulo {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mineracao-sinal-meta {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}
.mineracao-sinal-status {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  margin-top: 2px;
}
.mineracao-sinal-card.loading .mineracao-sinal-status { color: var(--text-muted); }  /* WAVE 9.4 — cinza, não ciano */
.mineracao-sinal-card.ok .mineracao-sinal-status { color: var(--text-soft); }  /* WAVE 9.4 — branco/cinza, não verde */
.mineracao-sinal-card.fail .mineracao-sinal-status { color: var(--red, #ff5a5f); }

.mineracao-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 32px;
  border-radius: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 15px;
  padding: 0 10px;
}
.mineracao-score-fogo  { background: rgba(63,192,112,0.22); color: #3fc070; border: 1px solid rgba(63,192,112,0.4); }
.mineracao-score-warn  { background: rgba(212,168,83,0.18); color: var(--gold-bright); border: 1px solid rgba(212,168,83,0.35); }
.mineracao-score-cold  { background: rgba(120,120,120,0.15); color: var(--text-muted); border: 1px solid var(--border-subtle); }

.mineracao-row-fogo  { background: rgba(63,192,112,0.04); }
.mineracao-row-warn  {}
.mineracao-row-cold  { opacity: 0.82; }
.mineracao-row-fogo:hover { background: rgba(63,192,112,0.10) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   EDIÇÃO AVANÇADA E MULTI-CLIPES — seção 0 (adicionado 2026-05-27)
   Classes prefixadas com .vea- para não colidir com as existentes.
   Classes sem prefixo (ve-*, .VW, etc.) coexistem — o editor básico
   já usa .ve-track/.ve-segment, então não redefinimos aquelas aqui.
═══════════════════════════════════════════════════════════════════════ */

/* ── Abas da seção ──────────────────────────────────────────────────── */
.vea-tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border-subtle);
  padding-bottom: 0;
}
.vea-tab {
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.vea-tab:hover { color: var(--text-secondary); }
.vea-tab.active {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
  background: rgba(212,168,83,0.06);
}
.vea-panel { display: none; }
.vea-panel.active { display: block; }

/* ── Fontes grid ────────────────────────────────────────────────────── */
.vea-fontes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.vea-fonte-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.vea-fonte-card.selected {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0,220,199,0.25);
}
.vea-fonte-card:hover { transform: translateY(-2px); border-color: var(--gold); }
.vea-fonte-thumb {
  aspect-ratio: 9/16;
  background: linear-gradient(135deg, #2a3550 0%, #1a2440 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.vea-fonte-thumb video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.vea-fonte-label {
  position: absolute; top: 6px; left: 6px;
  background: var(--gold); color: var(--bg-deep);
  font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: 4px; z-index: 2;
}
.vea-fonte-dur {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,0.7); color: #fff;
  font-size: 10px; padding: 2px 6px; border-radius: 3px;
  font-family: 'JetBrains Mono', monospace; font-weight: 600; z-index: 2;
}
.vea-fonte-info {
  padding: 8px 10px; font-size: 11px; color: var(--text-secondary);
  display: flex; justify-content: space-between; align-items: center; gap: 4px;
}
.vea-fonte-del {
  background: transparent; border: none; color: var(--red);
  cursor: pointer; font-size: 14px; opacity: 0.6; flex-shrink: 0;
}
.vea-fonte-del:hover { opacity: 1; }
.vea-fontes-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 24px; color: var(--text-muted); font-size: 12px;
}

/* ── Editor 3 frames ────────────────────────────────────────────────── */
.vea-enquadramento {
  display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;
}
.vea-frame-col {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.vea-frame-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.vea-frame-title.t1 { color: var(--gold-bright); }
.vea-frame-title.t2 { color: var(--cyan); }
.vea-frame-title.t3 { color: var(--green); }
.vea-frame-sub { font-size: 10px; color: var(--text-muted); text-align: center; line-height: 1.4; min-height: 26px; }
.VEA-VW {
  width: 160px; aspect-ratio: 9/16;
  background: #000; border-radius: var(--radius-sm);
  position: relative; overflow: hidden;
}
.VEA-VW video { width: 100%; height: 100%; object-fit: cover; display: block; }
.VEA-VW .vea-player-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--cyan); color: var(--bg-deep);
  font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: 4px; z-index: 6; pointer-events: none;
}
/* FIX 2026-05-27: os frames precisam de tamanho 9:16 (o subagente usou
   vea-crop-frame/vea-result-frame sem a classe de tamanho VEA-VW → vídeos
   estouravam e empilhavam). Tamanho igual ao editor aprovado (.VW 160px 9:16). */
.vea-crop-frame, .vea-result-frame {
  width: 160px; aspect-ratio: 9/16; background: #000;
  position: relative; overflow: hidden; border-radius: var(--radius-sm); flex: none;
}
.vea-crop-frame video, .vea-result-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vea-crop-frame { border: 1px solid var(--border); }
.vea-result-frame { border: 2px solid var(--green); }
.vea-result-frame video { transform-origin: 50% 50%; transition: transform 0.1s, filter 0.1s; }
.vea-crop-cut-top, .vea-crop-cut-bottom {
  position: absolute; left: 0; right: 0;
  background: repeating-linear-gradient(45deg,
    rgba(255,107,107,0.45) 0, rgba(255,107,107,0.45) 6px,
    rgba(0,0,0,0.55) 6px, rgba(0,0,0,0.55) 12px);
  z-index: 3; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000;
}
.vea-crop-cut-top { top: 0; border-bottom: 2px dashed var(--red); }
.vea-crop-cut-bottom { bottom: 0; border-top: 2px dashed var(--red); }
.vea-crop-handle {
  position: absolute; left: 0; right: 0; height: 22px;
  cursor: ns-resize; z-index: 4; display: flex; align-items: center; justify-content: center;
}
.vea-crop-handle::after {
  content: '⬍'; color: var(--bg-deepest); font-size: 12px; font-weight: 900;
  width: 34px; height: 10px; background: var(--gold); border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px var(--bg-deepest), 0 2px 4px rgba(0,0,0,0.4);
}
.vea-crop-handle-top { bottom: -11px; }
.vea-crop-handle-bottom { top: -11px; }
.vea-keep-pill {
  font-size: 11px; font-family: 'JetBrains Mono', monospace;
  font-weight: 700; color: var(--gold-bright);
}
.vea-blur-box {
  position: absolute;
  backdrop-filter: blur(6px); background: rgba(255,255,255,0.04);
  border: 1px solid var(--gold); z-index: 5; border-radius: 3px; cursor: move;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: var(--gold-bright);
}
.vea-blur-resize { position: absolute; right: -5px; bottom: -5px; width: 11px; height: 11px; background: var(--gold); border: 2px solid var(--bg-deepest); border-radius: 2px; cursor: nwse-resize; }
.vea-blur-del { position: absolute; top: -8px; right: -8px; width: 15px; height: 15px; background: var(--red); color: #fff; border: 1px solid var(--bg-deepest); border-radius: 50%; font-size: 9px; line-height: 13px; text-align: center; cursor: pointer; z-index: 6; }
.vea-safe-z { position: absolute; left: 0; right: 0; background: rgba(0,220,199,0.18); border: 1px dashed var(--cyan); z-index: 5; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #fff; font-weight: 700; text-shadow: 0 1px 2px #000; }

/* ── Timeline ────────────────────────────────────────────────────────── */
.vea-timeline-col {
  flex: 1; min-width: 240px;
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 24px; align-self: stretch;
}
.vea-timeline-label {
  font-size: 10px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.vea-track {
  position: relative; height: 56px;
  background: var(--bg-surface); border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.vea-playhead {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--cyan); z-index: 6; pointer-events: none;
}
.vea-playhead::before {
  content: ''; position: absolute; top: -5px; left: -4px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--cyan);
}
.vea-ticks {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--text-muted); margin-top: 4px;
}
.vea-play-toggle {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold-bright); color: var(--bg-deep);
  border: none; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; box-shadow: 0 0 10px rgba(240,201,110,0.4);
}
.vea-play-toggle:hover { filter: brightness(1.1); }
.vea-ver-chip {
  font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 16px;
  background: var(--bg-surface); color: var(--text-secondary);
  border: 1px solid var(--border-subtle); cursor: pointer;
  font-family: inherit; display: inline-flex; align-items: center; gap: 5px;
}
.vea-ver-chip:hover { border-color: var(--gold); color: var(--gold-bright); }
.vea-ver-chip.sel { background: var(--green); color: #06210f; border-color: var(--green); }
.vea-ver-chip .vea-ver-dur { font-family: 'JetBrains Mono', monospace; font-size: 9px; opacity: 0.8; }
.vea-seq-edit { background: transparent; border: none; color: var(--cyan); cursor: pointer; font-size: 14px; padding: 0 4px; }
.vea-seq-edit:hover { filter: brightness(1.3); }
.vea-track-bg {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0, transparent 10%,
    rgba(255,255,255,0.02) 10%, rgba(255,255,255,0.02) 20%);
  border-radius: var(--radius-sm);
}
.vea-segment {
  position: absolute; top: 4px; bottom: 4px;
  background: linear-gradient(135deg, rgba(255,193,7,0.25), rgba(255,193,7,0.1));
  border: 2px solid var(--gold); border-radius: 6px; min-width: 8px;
}
.vea-segment-label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; pointer-events: none;
}
.vea-handle { position: absolute; top: 0; bottom: 0; width: 14px; cursor: ew-resize; z-index: 2; }
.vea-handle::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 4px; height: 24px; background: var(--gold); border-radius: 2px;
}
.vea-handle-in { left: -7px; }
.vea-handle-out { right: -7px; }
.vea-marker-info {
  display: flex; gap: 12px; font-size: 12px;
  font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); flex-wrap: wrap;
}
.vea-marker-info b { color: var(--gold-bright); }

/* ── Ferramentas ─────────────────────────────────────────────────────── */
.vea-edit-tools { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.vea-edit-tools-head { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--gold-bright); margin-bottom: 12px; }
.vea-edit-tools-head span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: 11px; }
.vea-tool-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.vea-tool-chip {
  font-size: 11px; font-weight: 700; padding: 7px 12px; border-radius: 20px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); cursor: pointer; font-family: inherit;
}
.vea-tool-chip:hover { border-color: var(--gold); color: var(--gold-bright); }
.vea-tool-chip.active { background: var(--gold); color: var(--bg-deep); border-color: var(--gold); }
.vea-tool-panel {
  display: none; flex-direction: column; gap: 10px;
  background: var(--bg-deep); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 14px; max-width: 480px;
}
.vea-tool-panel.active { display: flex; }
.vea-ctl-row { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-secondary); min-width: 0; }
.vea-ctl-row label { width: 70px; flex-shrink: 0; color: var(--text-muted); font-weight: 600; font-size: 10px; text-transform: uppercase; }
.vea-ctl-row input[type=range] { flex: 1; min-width: 0; height: 4px; -webkit-appearance: none; appearance: none; background: var(--bg-surface); border-radius: 2px; outline: none; }
.vea-ctl-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--gold); border-radius: 50%; cursor: pointer; }
.vea-val { width: 48px; flex-shrink: 0; text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--gold-bright); font-size: 11px; }
.vea-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.vea-mini { font-size: 10px; font-weight: 700; padding: 6px 11px; border-radius: 6px; background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-secondary); cursor: pointer; font-family: inherit; }
.vea-mini:hover { border-color: var(--gold); color: var(--gold-bright); }
.vea-mini.active { background: var(--gold); color: var(--bg-deep); border-color: var(--gold); }
.vea-ff { font-family: 'JetBrains Mono', monospace; color: var(--cyan); font-size: 10px; background: var(--bg-deepest); padding: 6px 8px; border-radius: 5px; border: 1px solid var(--border-subtle); }
.vea-note { font-size: 10px; color: var(--text-muted); font-style: italic; line-height: 1.4; }

/* ── Sequência ────────────────────────────────────────────────────────── */
.vea-seq-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; min-height: 40px; }
.vea-seq-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 10px 14px; cursor: grab; user-select: none;
}
.vea-seq-item:active { cursor: grabbing; }
.vea-seq-item:hover { border-color: var(--gold); }
.vea-seq-item.em-edicao { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.vea-seq-drag { color: var(--text-muted); font-size: 18px; cursor: grab; }
.vea-seq-num {
  background: var(--gold); color: var(--bg-deep);
  border-radius: 50%; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px; flex-shrink: 0;
}
.vea-seq-source { background: var(--bg-deep); border: 1px solid var(--gold); color: var(--gold-bright); padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 800; font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
.vea-seq-range { font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); flex: 1; }
.vea-seq-dur { background: var(--bg-deep); color: var(--green-bright); padding: 3px 10px; border-radius: 4px; font-size: 12px; font-family: 'JetBrains Mono', monospace; font-weight: 700; flex-shrink: 0; }
.vea-seq-del { background: transparent; border: none; color: var(--red); cursor: pointer; font-size: 16px; opacity: 0.6; flex-shrink: 0; }
.vea-seq-del:hover { opacity: 1; }

/* ── Totais ──────────────────────────────────────────────────────────── */
.vea-totals { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.vea-total-card { flex: 1; min-width: 90px; background: var(--bg-surface); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.vea-total-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; letter-spacing: 1px; }
.vea-total-value { font-size: 22px; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.vea-total-value.gold { color: var(--gold-bright); }
.vea-total-value.cyan { color: var(--cyan); }
.vea-total-value.green { color: var(--green-bright); }
.vea-seq-summary { font-size: 12px; color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; margin-bottom: 14px; padding: 8px 12px; background: var(--bg-surface); border-radius: var(--radius-sm); border-left: 3px solid var(--gold); }

/* ── Etapa boxes ─────────────────────────────────────────────────────── */
.vea-etapa { background: var(--bg-deep); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; }
.vea-etapa-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.vea-etapa-num { width: 26px; height: 26px; background: var(--gold); color: var(--bg-deep); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex-shrink: 0; }
.vea-etapa-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); }
.vea-etapa-hint { font-size: 11px; color: var(--text-muted); margin-left: auto; }

/* ── Uploader ────────────────────────────────────────────────────────── */
.vea-uploader-row { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.vea-uploader { flex: 1; min-width: 180px; padding: 14px 16px; border: 2px dashed var(--border); border-radius: var(--radius-sm); text-align: center; background: var(--bg-surface); cursor: pointer; transition: border-color 0.2s; }
.vea-uploader:hover { border-color: var(--gold); }
.vea-uploader-icon { font-size: 22px; margin-bottom: 4px; }
.vea-uploader-text { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.vea-uploader-sub { font-size: 10px; color: var(--text-muted); margin-top: 3px; }

/* ── Montado ─────────────────────────────────────────────────────────── */
.vea-montado-wrap { display: none; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-subtle); }

/* ── Btn editando ────────────────────────────────────────────────────── */
.vea-btn-editando { background: var(--green) !important; color: #06210f !important; box-shadow: 0 0 12px rgba(102,187,106,0.5); }

/* ── Abas Edição Básica / Avançada (2026-05-27) — faltava o CSS ──────── */
.ed-tab-bar {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 16px;
}
.ed-tab {
  padding: 10px 18px; font-size: 13px; font-weight: 700;
  color: var(--text-muted); background: transparent; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  font-family: inherit; display: inline-flex; align-items: center; gap: 7px;
  transition: color .15s, border-color .15s;
}
.ed-tab:hover { color: var(--text-secondary); }
.ed-tab.active { color: var(--gold-bright); border-bottom-color: var(--gold); }
.ed-tab-novo {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  background: var(--green); color: #06210f; padding: 2px 7px; border-radius: 10px;
}

/* ============================================================
   ROD 41-v2 (2026-05-29) — Mineração V2: 5 abas, tooltip, toast
   ============================================================ */
/* WAVE 9.4 (2026-05-29) — barra de ações Mineração: botões alinhados ao baseline */
#mineracao-painel .mineracao-actions-row,
#mineracao-painel #btn-mineracao-rodar,
#mineracao-painel #btn-mineracao-curiosos,
#mineracao-painel #btn-mineracao-grok,
#mineracao-painel #btn-mineracao-historico {
  box-sizing: border-box;
}
#mineracao-painel #btn-mineracao-rodar,
#mineracao-painel #btn-mineracao-curiosos,
#mineracao-painel #btn-mineracao-grok,
#mineracao-painel #btn-mineracao-historico {
  height: 34px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
}
.mn-tab-bar {
  display: flex; gap: 0; flex-wrap: wrap;  /* WAVE 9.4 — gap 0 pra linha dourada contínua */
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 14px;
}
.mn-tab:not(:first-child) {
  border-left: 1px solid var(--border-subtle);  /* WAVE 9.4 — separador discreto entre tabs */
}
.mn-tab {
  padding: 10px 16px; font-size: 12px; font-weight: 700;
  color: var(--text-muted); background: var(--bg-card); border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  font-family: inherit; display: inline-flex; align-items: center; gap: 7px;
  transition: color .15s, border-color .15s, background .15s;
  letter-spacing: .3px;
}
.mn-tab:hover { color: var(--text-secondary); background: var(--bg-surface); }
.mn-tab.active {
  color: var(--gold); border-bottom-color: var(--gold); background: var(--bg-surface);  /* WAVE 9.3 amarelo */
}
.mn-tab-count {
  font-size: 9px; font-weight: 800;
  background: var(--bg-deep); color: var(--text-muted);
  padding: 2px 6px; border-radius: 10px; min-width: 18px; text-align: center;
}
.mn-tab.active .mn-tab-count { background: var(--gold); color: var(--bg-deep); }

.mn-tab-panel { animation: mnFadeIn .18s ease-out; }
@keyframes mnFadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

.mn-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; flex-wrap: wrap; gap: 10px;
}
.mn-panel-actions { display: flex; gap: 8px; }
.mn-resumo { font-size: 12px; color: var(--text-secondary); }

.mn-table-wrap { overflow-x: auto; }
.mn-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mn-table thead tr {
  background: var(--bg-surface);
  border-bottom: 2px solid var(--gold);  /* WAVE 9.2 (2026-05-29) — amarelo igual Prospecção */
}
.mn-table thead th {
  padding: 10px 6px; text-align: left; color: var(--gold);  /* WAVE 9.2 — amarelo */
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 700;
}
.mn-empty {
  text-align: center; color: var(--text-muted);
  padding: 32px 16px; font-size: 12px;
}

/* Score tooltip flutuante (substitui alert) */
.score-tooltip {
  position: fixed;
  z-index: 10000;
  background: var(--bg-deep, #0a1226);
  border: 1px solid #3fc070;
  border-radius: 8px;
  padding: 12px 14px;
  max-width: 320px; min-width: 240px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55), 0 0 12px rgba(63,192,112,0.18);
  font-size: 11.5px; color: var(--text-soft);
  pointer-events: none;
  font-family: inherit;
}
.score-tooltip-title {
  font-weight: 800; color: var(--gold-bright);
  margin-bottom: 6px; font-size: 12px; line-height: 1.3;
}
.score-tooltip-score {
  font-family: 'JetBrains Mono', monospace; font-weight: 800;
  color: #3fc070; font-size: 14px; margin-bottom: 8px;
}
.score-tooltip-breakdown {
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
}
.score-tooltip-breakdown > div {
  display: flex; justify-content: space-between; gap: 10px;
}
.score-tooltip-breakdown span:last-child { color: var(--text-secondary); font-weight: 700; }
.score-tooltip-decisao {
  font-weight: 800; color: var(--gold-bright);
  margin-bottom: 4px; font-size: 11.5px;
}
.score-tooltip-meta { color: var(--text-muted); font-size: 10.5px; }

/* Toast catch-up */
#mineracao-toast-container {
  position: fixed; bottom: 18px; right: 18px;
  z-index: 10001; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast-catchup {
  background: var(--bg-card); border: 1px solid #3fc070;
  border-left: 4px solid #3fc070;
  border-radius: 6px; padding: 10px 14px;
  font-size: 12px; color: var(--text-secondary);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  display: flex; align-items: center; gap: 10px;
  min-width: 220px; max-width: 320px;
  animation: toastSlideIn .25s ease-out;
  font-family: inherit;
}
.toast-catchup.toast-sucesso { border-left-color: #3fc070; }
.toast-catchup.toast-info { border-left-color: var(--cyan, #3fb6e0); }
.toast-catchup.toast-error { border-left-color: #ff5a5f; }
.toast-fadeout { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.toast-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(63,192,112,0.25);
  border-top-color: #3fc070;
  animation: toastSpin .8s linear infinite;
  flex-shrink: 0;
}
@keyframes toastSpin { to { transform: rotate(360deg); } }

/* === WAVE 8 (2026-05-29) — Tipografia anti-pixelação para botões/abas/tabela
   Diagnóstico Kimi K2.6: textos pequenos (≤13px) em Outfit 400/500 não fazem
   pixel-grid alignment no DirectWrite (Windows Chrome). Soluções: peso 600+,
   text-shadow sutil pra mascarar serrilhado, image-rendering pra thumbs upscaled. */
.mn-tab, .btn-criar-criativo, .mn-table, .mn-table th, .mn-table td,
#mineracao-painel button, #mineracao-painel input, #mineracao-painel select {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.01em;
  font-weight: 600;            /* Kimi H3: 400/500 quebram em ≤13px no Windows */
}
.btn-criar-criativo {
  font-size: 11px !important;
  letter-spacing: 0.02em;
  font-weight: 700 !important; /* destaque + nitidez */
  /* WAVE 8.1 (2026-05-29) — DS4 REPROVOU text-shadow preto: sombra escura em fundo
     escuro vira blur de contraste, NÃO mascara serrilhado. Substituí por sombra
     clara muito sutil (DS4 propôs rgba(255,255,255,0.1)) que aumenta contraste percebido. */
  text-shadow: 0 0 1px rgba(255,255,255,0.12);
}
.mn-tab {
  font-size: 13px !important;
  font-weight: 700 !important;
}
.mn-tab.active {
  text-shadow: 0 0 12px rgba(212,168,83,0.4);  /* WAVE 9.3 — glow dourado na ativa */
}
/* WAVE 8.1 (2026-05-29) — DS4 REPROVOU image-rendering: crisp-edges.
   Causa: força nearest-neighbor → PIORA thumbs upscaled (vira mosaico).
   Solução real seria srcset 2x ou pedir resolução maior à Shopee.
   Deixo image-rendering em "auto" (default explícito) pra documentar a decisão. */
#mineracao-painel img,
.mn-table img,
.mn-tab-panel img {
  image-rendering: auto;
}
/* Títulos do painel + h3 com peso reforçado */
#mineracao-painel h3,
#mineracao-painel .mn-resumo strong {
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* === MINERACAO V2 (2026-05-29) — abas, tooltip, toast === */
/* Complementa o bloco ROD 41-v2 acima: display none/block dos paineis,
   container do painel (bg/border/padding/min-height) e botao Grok roxo. */
.mn-tab-panel {
  display: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 16px;
  min-height: 380px;
}
.mn-tab-panel.active { display: block; }

/* Botao "Grok Achadinhos" roxo (acao no header da aba) */
.mn-btn-grok {
  background: #a85cff; color: #fff; border: 1px solid #a85cff;
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 700; font-family: inherit;
  cursor: pointer; letter-spacing: .3px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.mn-btn-grok:hover { background: #b975ff; border-color: #b975ff; box-shadow: 0 0 10px rgba(168,92,255,0.35); }
.mn-btn-grok:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

/* WAVE 6 (2026-05-29) - Bug E: botao "Criar criativo" polido (verde gradient) */
.btn-criar-criativo {
  /* WAVE 9.2 (2026-05-29) — Ricardo: trocar pelo botão da Prospecção (▶ Fábrica amarelo) */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%);
  color: var(--bg-deep);
  font-weight: 700;
  font-size: 10px;
  font-family: inherit;
  letter-spacing: 0.2px;
  padding: 6px 14px;
  border: 1px solid rgba(212, 168, 83, 0.55);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(212, 168, 83, 0.25), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  text-decoration: none;
  line-height: 1;
}
.btn-criar-criativo:hover {
  filter: brightness(1.12);
  transform: scale(1.02);
  box-shadow: 0 4px 10px rgba(212, 168, 83, 0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-criar-criativo:active {
  transform: scale(0.98);
  filter: brightness(0.95);
}
.btn-criar-criativo:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* 2026-05-29 — Hover-show pattern pros botões ✕ novos (versões Avançada,
   versões Básica, projetos sidebar). Mesma UX dos chips de áudio
   (.audio-chip .chip-del). Limpa visualmente até precisar do delete. */
.vea-ver-chip-wrap .vea-ver-del,
.queue-item .queue-del {
  opacity: 0;
  transition: opacity 0.15s;
}
.vea-ver-chip-wrap:hover .vea-ver-del,
.queue-item:hover .queue-del {
  opacity: 1;
}