/* AuthControl PWA — auth-client.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --bg-base: #0a0a0f;
  --bg-card: rgba(255, 255, 255, 0.05);
  --bg-card-hover: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(255, 255, 255, 0.2);
  --text-primary: #f0f0ff;
  --text-secondary: #9898b8;
  --text-muted: #5a5a7a;
  --accent: #6366f1;
  --accent-2: #8b5cf6;
  --accent-3: #06b6d4;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --glow: rgba(99, 102, 241, 0.4);
  --radius: 16px;
  --radius-sm: 8px;
  --shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.2);
}

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

html, body {
  height: 100%;
  font-family: 'Inter', sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body {
  background: radial-gradient(ellipse at 20% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
              var(--bg-base);
  min-height: 100vh;
}

.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

#app {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column;
}

.screen {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  min-height: 100vh;
}
.screen.active { display: flex; }

/* Login */
.login-wrapper { width: 100%; max-width: 420px; }

.logo-area { text-align: center; margin-bottom: 40px; }

.logo-icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 32px rgba(99,102,241,0.4);
  font-size: 32px;
  animation: float 3s ease-in-out infinite;
}

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

.logo-area h1 {
  font-size: 28px; font-weight: 800;
  background: linear-gradient(135deg, #fff, var(--accent-2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}
.logo-area p { font-size: 14px; color: var(--text-secondary); margin-top: 6px; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
}

.form-group { margin-bottom: 18px; }
.form-group label {
  display: block; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-secondary); margin-bottom: 8px;
}
.form-group input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; color: var(--text-primary);
  font-size: 16px; font-family: 'Inter', sans-serif; outline: none; transition: all 0.2s;
}
.form-group input:focus {
  border-color: var(--accent); background: rgba(99,102,241,0.08);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.form-group input::placeholder { color: var(--text-muted); }
.form-group select {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; color: var(--text-primary);
  font-size: 14px; font-family: 'Inter', sans-serif; outline: none; transition: all 0.2s;
  appearance: none;
}
.form-group select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.form-group select option { background: #1a1a2e; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif; font-weight: 600; cursor: pointer; transition: all 0.2s; outline: none;
}
.btn-primary {
  width: 100%; padding: 15px 24px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white; font-size: 15px;
  box-shadow: 0 4px 20px rgba(99,102,241,0.4);
}
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(99,102,241,0.5); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); padding: 10px 18px; font-size: 13px; }
.btn-ghost:hover { border-color: var(--border-hover); color: var(--text-primary); }
/* "Minhas outras assinaturas" e "Entrar com outro contato" (30/10): usavam
   btn-secondary, que nunca existiu aqui, e saiam com o fundo branco do navegador. */
.btn-secondary { background: rgba(99,102,241,0.12); color: var(--text-primary); border: 1px solid rgba(99,102,241,0.35); padding: 11px 18px; font-size: 14px; }
.btn-secondary:hover { background: rgba(99,102,241,0.2); border-color: rgba(99,102,241,0.55); }
.btn-danger { background: var(--danger); color: white; padding: 10px 18px; font-size: 13px; }
.btn-success { background: var(--success); color: white; padding: 10px 18px; font-size: 13px; }
.btn-warning { background: var(--warning); color: #000; padding: 10px 18px; font-size: 13px; }
.btn-sm { padding: 7px 14px; font-size: 12px; border-radius: 6px; }

.error-msg {
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius-sm); color: #fca5a5; font-size: 13px;
  padding: 12px 14px; margin-top: 16px; display: none;
}
.error-msg.show { display: block; }
/* UM APARELHO POR VEZ (09/10): o aviso de quem perdeu a vez (no alto do
   cartao do login) e a pergunta do "Entrar aqui" (embaixo do botao). Dentro
   do cartao, e nao numa janela por cima: a faixa de instalar o app, presa no
   rodape, tapava janela no celular. */
.login-aviso, .login-outro {
  padding: 12px 14px; border-radius: 12px; font-size: .86rem; line-height: 1.45; text-align: left;
}
.login-aviso { margin: 0 0 14px; background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .38); color: #fde68a; }
.login-outro { margin: 14px 0 0; background: rgba(139, 92, 246, .12); border: 1px solid rgba(139, 92, 246, .45); color: #ede9fe; }
.login-aviso[hidden], .login-outro[hidden] { display: none; }
.login-outro p { margin: 0 0 10px; }
.login-outro-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.login-outro-acoes .btn { flex: 1 1 130px; width: auto; }

/* TOTP Screen */
#screen-totp { padding: 0; justify-content: flex-start; align-items: stretch; }

.totp-header {
  background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.totp-header-left { display: flex; align-items: center; gap: 12px; }
.header-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.header-info h2 { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.header-info p { font-size: 11px; color: var(--text-secondary); }

.totp-body { padding: 20px 16px; flex: 1; max-width: 560px; width: 100%; margin: 0 auto; }

.status-banner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 20px;
  font-size: 13px; font-weight: 500; color: #6ee7b7;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 8px var(--success); flex-shrink: 0;
  animation: pulse 2s ease infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }

.totp-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; transition: all 0.2s;
}
.totp-card:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }

.totp-card-header {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px;
}
.totp-account-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.totp-badge { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; }
.badge-google { background: rgba(99,102,241,0.2); color: #a5b4fc; }

.totp-code-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 16px; gap: 12px;
}
.totp-code {
  font-family: 'JetBrains Mono', monospace; font-size: 42px; font-weight: 700;
  letter-spacing: 8px;
  background: linear-gradient(135deg, #fff 40%, var(--accent-2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1; -webkit-user-select: all; user-select: all; cursor: pointer; transition: opacity 0.2s;
}
.totp-code:hover { opacity: 0.8; }

.copy-btn {
  flex-shrink: 0; width: 44px; height: 44px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s; font-size: 18px;
}
.copy-btn:hover { background: rgba(99,102,241,0.2); border-color: var(--accent); }
.copy-btn.copied { background: rgba(16,185,129,0.2); border-color: var(--success); }

.totp-timer-bar { height: 3px; background: rgba(255,255,255,0.05); overflow: hidden; }
.totp-timer-fill { height: 100%; border-radius: 3px; transition: width 1s linear, background-color 0.5s; }

/* Blocked */
.blocked-card { text-align: center; max-width: 400px; width: 100%; }
.blocked-icon { font-size: 64px; margin-bottom: 20px; animation: shake 0.5s ease infinite alternate; }
@keyframes shake { 0%{transform:rotate(-3deg)} 100%{transform:rotate(3deg)} }
.blocked-title { font-size: 22px; font-weight: 800; margin-bottom: 8px; color: #fca5a5; }
.blocked-msg { font-size: 15px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 28px; }

/* Admin */
#screen-admin { padding: 0; align-items: stretch; justify-content: flex-start; }

.admin-header {
  background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border);
  padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.admin-header h2 {
  font-size: 16px; font-weight: 700;
  background: linear-gradient(135deg, #fff, var(--accent-2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.admin-tabs {
  display: flex; gap: 4px;
  background: rgba(255,255,255,0.05); border-radius: 10px; padding: 4px;
  margin: 16px 20px 0;
}
.tab-btn {
  flex: 1; padding: 10px; border: none; border-radius: 8px;
  background: transparent; color: var(--text-secondary);
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.tab-btn.active { background: rgba(99,102,241,0.25); color: #a5b4fc; }

.admin-body { padding: 16px 20px; max-width: 700px; width: 100%; margin: 0 auto; }

.section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-muted); margin-bottom: 12px; margin-top: 8px;
}

.list-item {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: all 0.2s;
}
.list-item:hover { border-color: var(--border-hover); }
.list-item-info { flex: 1; min-width: 0; }
.list-item-name {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-item-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.status-pill { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.status-active { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.3); }
.status-suspended { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }
.status-inactive { background: rgba(107,114,128,0.15); color: #9ca3af; border: 1px solid rgba(107,114,128,0.3); }
.status-on { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.3); }
.status-off { background: rgba(107,114,128,0.15); color: #9ca3af; border: 1px solid rgba(107,114,128,0.3); }

.item-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #13131f; border: 1px solid var(--border); border-radius: var(--radius);
  width: 100%; max-width: 480px; box-shadow: var(--shadow);
  animation: slideUp 0.25s ease; max-height: 90vh; overflow-y: auto;
}
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-header {
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-header h3 { font-size: 16px; font-weight: 700; }
.modal-close {
  width: 32px; height: 32px; background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s; color: var(--text-secondary);
}
.modal-close:hover { background: rgba(239,68,68,0.2); color: #fca5a5; }
.modal-body { padding: 20px 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px);
  z-index: 200; background: #1e1e2e; border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 20px; font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow); transition: transform 0.3s ease; white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.success { border-color: rgba(16,185,129,0.4); color: #6ee7b7; }
.toast.error { border-color: rgba(239,68,68,0.4); color: #fca5a5; }

.spinner {
  width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.2); border-top-color: white;
  border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); font-size: 14px; }
.empty-state .empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.4; }

.check-group { display: flex; flex-direction: column; gap: 8px; }
.check-item {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: all 0.2s;
}
.check-item:hover { border-color: var(--accent); }
.check-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.check-item label { font-size: 13px; cursor: pointer; flex: 1; }

.color-row { display: flex; gap: 8px; align-items: center; }
.color-row input[type=color] {
  width: 44px; height: 40px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent; cursor: pointer; padding: 2px;
}
.color-row input[type=text] { flex: 1; }

@media (max-width: 480px) {
  .totp-code { font-size: 36px; letter-spacing: 6px; }
  .admin-body { padding: 12px 14px; }
  .card { padding: 24px 20px; }
}

/* ═══════════════════════════════════════════════════════
   PIX PAYMENT SCREEN
═══════════════════════════════════════════════════════ */
.pix-wrapper {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}

.pix-header { text-align: center; }
.pix-header-icon {
  font-size: 48px; margin-bottom: 12px;
  filter: drop-shadow(0 0 24px rgba(99,102,241,0.6));
  animation: floatIcon 3s ease-in-out infinite;
}
@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.pix-title { font-size: 24px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.pix-subtitle { font-size: 14px; color: var(--text-secondary); }

.pix-card {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: var(--shadow-glow);
}

.pix-amount-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.pix-amount-label { font-size: 13px; color: var(--text-secondary); }
.pix-amount {
  font-size: 28px; font-weight: 800; color: var(--success);
  font-family: 'JetBrains Mono', monospace;
}

.pix-qr-area {
  display: flex; justify-content: center; padding: 8px 0;
}
.pix-qr-img {
  width: 200px; height: 200px;
  border-radius: 12px;
  border: 3px solid var(--accent);
  box-shadow: 0 0 32px rgba(99,102,241,0.3);
  background: white;
  object-fit: contain;
}

.pix-copy-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.pix-copy-row { display: flex; gap: 8px; }
.pix-code-input {
  flex: 1; font-size: 11px; font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary); cursor: pointer;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.pix-copy-btn { flex-shrink: 0; font-size: 12px; padding: 10px 14px; }

.pix-status-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--warning);
  transition: all 0.5s ease;
}
.pix-status-row.pix-paid {
  background: rgba(16,185,129,0.12);
  border-color: rgba(16,185,129,0.3);
  color: var(--success);
}
.pix-status-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.pix-dot-pending {
  background: var(--warning);
  box-shadow: 0 0 0 0 rgba(245,158,11,0.6);
  animation: pixPulse 1.5s ease-out infinite;
}
.pix-dot-paid {
  background: var(--success);
  box-shadow: 0 0 12px rgba(16,185,129,0.8);
  animation: none;
}
@keyframes pixPulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

.pix-expires { text-align: center; font-size: 12px; color: var(--text-muted); }

.pix-info-tip {
  text-align: center; font-size: 13px; color: var(--text-secondary);
  padding: 12px 16px;
  background: rgba(99,102,241,0.06);
  border: 1px solid rgba(99,102,241,0.15);
  border-radius: var(--radius-sm);
  width: 100%;
}

/* Animação de sucesso PIX */
@keyframes pixSuccess {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.06); }
  60%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
.pix-card.pix-confirmed {
  border-color: rgba(16,185,129,0.5);
  box-shadow: 0 0 48px rgba(16,185,129,0.2);
  animation: pixSuccess 0.6s ease;
}

/* Botao de suporte no cabecalho: discreto (so o icone), na cor do WhatsApp */
.btn-wa-mini {
  display: inline-flex; align-items: center; justify-content: center;
  color: #25d366; text-decoration: none;
  border-color: rgba(37,211,102,.32) !important;
}
.btn-wa-mini:hover { background: rgba(37,211,102,.12); border-color: rgba(37,211,102,.6) !important; }

/* ── SO O GERADOR (07/10): com a chave do painel ligada, a area do ULTRA fica
   so com o gerador. Some o metodo antigo — a janela do codigo e o cartao da
   conta (o "Entenda em 10 segundos" e os tutoriais sairam de vez em 10/10; o
   guia do gerador, em 11/10). O !important vence o display que o JS poe
   direto nos elementos. Ver aplicarSoGeradorTela. */
#screen-totp.so-gerador #window-banner,
#screen-totp.so-gerador #totp-cards { display: none !important; }
/* ── A CONTA COMPARTILHADA ESCONDIDA PRO ULTRA (10/10, pedido dele): o cartao
   da conta (.pcard) e a janela do codigo somem pra todo cliente do ULTRA, com
   ou sem o gerador — so o Flow PRO (conta propria) ve. So o CARTAO, e nao a
   caixa #totp-cards: nela tambem aparecem o "Aparelho nao reconhecido" e o
   "Nao foi possivel carregar seus dados", que o cliente do ULTRA precisa ler.
   Ver aplicarContaCompartilhadaTela. */
#screen-totp.sem-conta #window-banner,
#screen-totp.sem-conta #totp-cards .pcard { display: none !important; }
/* A 320 px (21/10, o LOGIN DO FLOW trouxe o cartao de volta e, com as duas
   assinaturas, o 🔀 de trocar): o nome do cartao virava "FLOW I..." e o
   ultimo botao do topo (sair) ficava cortado. Abaixo de 360 px o selo dos
   dias desce pra linha de baixo, os botoes do topo encolhem e o cadeado ao
   lado do nome sai. A 390 nada muda. */
@media (max-width: 359px) {
  #screen-totp .pc-head { flex-wrap: wrap; }
  #screen-totp .pc-id { flex: 1 1 140px; }
  #screen-totp .pc-right { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  #screen-totp .totp-header { padding: 12px; gap: 8px; }
  #screen-totp .totp-header-left { min-width: 0; gap: 8px; }
  #screen-totp .header-info { min-width: 0; }
  #screen-totp .header-icon { display: none; }
  #screen-totp .totp-header > div:last-child { gap: 5px !important; flex-shrink: 0; }
  #screen-totp .totp-header .btn-sm { padding: 7px 9px; }
}
/* Banner "Instale o app" e fixo no rodape — reserva espaco pra ele nao cobrir
   o ultimo card da pagina (ficava por cima do botao do "Indique e Ganhe"). */
body.has-install-banner .totp-body,
body.has-install-banner .admin-body { padding-bottom: 120px; }
/* No gerador a faixa FICA (06/10, ele: "instale o app fica sempre na tela
   até o cliente instalar"). A caixa "O que você quer criar?" mora presa no
   rodape, onde a faixa fica: a caixa guarda embaixo o espaco da faixa
   (--faixa-alto: a altura medida + os 12 px do rodape) e a faixa fica por
   cima desse espaco — nao tapa a caixa nem a grade. Com a cena aberta (sem
   a caixa), o fim da pagina guarda o mesmo espaco. As janelas do gerador
   (Escolher foto, Adicionar vídeo, Nome da cena) e o visor moram no #app,
   que tem z-index 1 (pra ficar acima da grade do fundo) e prende qualquer
   z-index delas ABAIXO da faixa, que fica no <body> (medido no preview em
   03/10: o toque no rodape da janela caia na faixa): com uma delas aberta a
   faixa sai, e volta ao fechar. */
body.has-install-banner :is(#screen-gerar, #screen-gemini) .fl-doca { padding-bottom: calc(10px + var(--faixa-alto, 96px) + env(safe-area-inset-bottom)); }
body.has-install-banner :is(#screen-gerar, #screen-gemini) .gerar-wrap.com-cena .fl-principal { padding-bottom: calc(12px + var(--faixa-alto, 96px)); }
@media (min-width: 900px) { body.has-install-banner :is(#screen-gerar, #screen-gemini) .fl-doca { padding-bottom: calc(18px + var(--faixa-alto, 96px)); } }
/* O Motion (26/10): o fim de "Seus vídeos" guarda o espaco da faixa — no
   iPhone sem o app, o ultimo Baixar ficava embaixo dela (medido a 390 e 320). */
body.has-install-banner #screen-motion .mot-tela { padding-bottom: calc(36px + var(--faixa-alto, 96px) + env(safe-area-inset-bottom)); }
/* O TK LABS - CREATOR (27/10), o mesmo: o ultimo video da lista (e o Baixar) fica acima da faixa. */
body.has-install-banner #screen-creator .cre-tela { padding-bottom: calc(36px + var(--faixa-alto, 96px) + env(safe-area-inset-bottom)); }
body:has(#screen-gerar.active #gerar-visor:not([hidden])) #install-banner,
body:has(#screen-gerar.active .gerar-escolha:not([hidden])) #install-banner { visibility: hidden; }
/* O Gemini (22/10): a faixa sai com o visor e as janelas dele, como no gerador. */
body:has(#screen-gemini.active #gem-visor:not([hidden])) #install-banner,
body:has(#screen-gemini.active .fl-conta-janela:not([hidden])) #install-banner,
body:has(#screen-gemini.active .gerar-escolha:not([hidden])) #install-banner { visibility: hidden; }
/* A janela da influencer do CREATOR (01/11), o mesmo: a faixa cobria o nome e o "Ficar com esta" (medido a 390). */
body:has(#screen-creator.active #cre-inf:not([hidden])) #install-banner, body:has(#screen-creator.active #cre-pess:not([hidden])) #install-banner { visibility: hidden; }

/* Com mais de uma conta, o e-mail aparece NO cartao: sem ele os tres cartoes
   ficam identicos e o cliente nao sabe qual senha e de qual conta. */
.pc-conta-email { font-family: ui-monospace, Menlo, monospace; font-size: .78rem;
  opacity: .85; padding: 8px 16px 0; word-break: break-all; }

/* Conta comprada que ainda nao chegou. Apagada de proposito: tem que dar pra
   ver de relance que ela ainda nao esta pronta, sem ler. */
.pcard.pcard-vindo { opacity: .72; border-style: dashed; }
.pcard.pcard-vindo .pc-name { color: #fcd34d; }
.pc-vindo-txt { padding: 12px 16px 16px; font-size: .82rem; line-height: 1.45; opacity: .9; }

/* ── Gerador de video ─────────────────────────────────────────────────────
   Celular primeiro: e onde o cliente esta. Nada aqui passa da largura da
   tela — o video vertical ocupa a coluna inteira, mas limitado em altura pra
   o botao de baixar nao sumir embaixo da dobra. */
/* A porta de entrada (01/10, pedido dele: "mesclar" o botao com o cartao da
   conta). Mesmo fundo, mesmo logo, os mesmos dias restantes e a mesma bolinha
   piscando do cartao de baixo (ensureCardStyles, em auth-client.js), com o
   titulo FLOW ULTRA ILIMITADO e um "Entrar". O neon: a faixa das cores do
   Google andando no topo, o brilho dela escorrendo pra dentro, e a borda
   trocando de cor junto. */
.gerar-entrada {
  position: relative; overflow: hidden; display: block; width: 100%; max-width: 430px;
  margin: 0 auto 14px; padding: 20px 18px 18px; border-radius: 22px;
  border: 1px solid rgba(66, 133, 244, .55);
  background: linear-gradient(160deg, #191a2b 0%, #111120 100%);
  box-shadow: 0 0 22px rgba(66, 133, 244, .22), 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  color: #f8fafc; font-family: inherit; text-align: left; cursor: pointer;
  animation: gerarNeonBorda 8s linear infinite;
}
.gerar-entrada[hidden] { display: none; }
.gerar-entrada:active { transform: scale(.99); }
.gerar-entrada:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 3px; }
/* A faixa tem o dobro da largura do cartao e repete as cores na segunda
   metade: andar uma largura inteira cai na mesma imagem, sem pulo. */
.gerar-entrada::before, .gerar-entrada::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; pointer-events: none;
  background-image: linear-gradient(90deg, #4285F4, #EA4335, #FBBC05, #34A853, #4285F4, #EA4335, #FBBC05, #34A853, #4285F4);
  background-size: 200% 100%;
  animation: gerarNeon 4s linear infinite;
}
.gerar-entrada::before { height: 3px; }
/* O brilho: as mesmas cores apagando pra baixo. Uma camada da cor do fundo por
   cima faz o degrade — sem filtro nem mascara, que no iPhone podem escapar do
   canto arredondado. */
.gerar-entrada::after {
  height: 26px; opacity: .3;
  background-image: linear-gradient(180deg, rgba(25, 26, 43, 0), #191a2b),
    linear-gradient(90deg, #4285F4, #EA4335, #FBBC05, #34A853, #4285F4, #EA4335, #FBBC05, #34A853, #4285F4);
  background-size: 100% 100%, 200% 100%;
  animation-name: gerarNeonBrilho;
}
@keyframes gerarNeon { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes gerarNeonBrilho { from { background-position: 0 0, 100% 0; } to { background-position: 0 0, 0 0; } }
@keyframes gerarNeonBorda {
  0%, 100% { border-color: rgba(66, 133, 244, .55);
    box-shadow: 0 0 22px rgba(66, 133, 244, .22), 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
  25% { border-color: rgba(234, 67, 53, .55);
    box-shadow: 0 0 22px rgba(234, 67, 53, .22), 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
  50% { border-color: rgba(251, 188, 5, .55);
    box-shadow: 0 0 22px rgba(251, 188, 5, .2), 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
  75% { border-color: rgba(52, 168, 83, .55);
    box-shadow: 0 0 22px rgba(52, 168, 83, .22), 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
}
.gerar-entrada-cabeca {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px 12px;
}
.gerar-entrada-icone {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 13px; background: #fff; box-shadow: 0 3px 14px rgba(66, 133, 244, .35);
}
.gerar-entrada-icone svg { display: block; width: 26px; height: 26px; }
.gerar-entrada-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gerar-entrada-texto strong { font-size: .96rem; font-weight: 800; letter-spacing: .02em; line-height: 1.25; color: #f8fafc; overflow-wrap: anywhere; }
.gerar-entrada-texto small { font-size: .74rem; color: #94a3b8; }
/* No celular os dias e o ACESSO ATIVO descem pra uma linha so deles: ao lado,
   o titulo comprido nao cabia nem em duas linhas a 320px. */
.gerar-entrada-estado {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.gerar-entrada-dias {
  font-size: .66rem; font-weight: 800; padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  background: rgba(16, 185, 129, .15); color: #6ee7b7;
}
.gerar-entrada-ativo {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: .58rem; font-weight: 700; letter-spacing: .06em; color: #6ee7b7;
}
.gerar-entrada-ponto {
  width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 6px #34d399;
  animation: gerarPisca 1.4s ease-in-out infinite;
}
@keyframes gerarPisca { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.gerar-entrada-entrar {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; margin-top: 16px;
  border-radius: 999px; background: var(--fl-clara); color: var(--fl-clara-texto);
  font-size: .95rem; font-weight: 800; letter-spacing: .01em;
}
.gerar-entrada-entrar span { font-size: 1.3rem; line-height: 1; }
@media (hover: hover) { .gerar-entrada:hover .gerar-entrada-entrar { background: #fff; } }
/* Tela larga: os dias e o ACESSO ATIVO a direita do titulo, como no cartao
   da conta. */
@media (min-width: 480px) {
  .gerar-entrada-cabeca { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .gerar-entrada-estado { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .gerar-entrada, .gerar-entrada::before, .gerar-entrada::after, .gerar-entrada-ponto { animation: none; }
}

/* A tela do gerador ocupa a tela inteira, como o projeto do Flow (06/10): o
   resto do layout esta no bloco "O LAYOUT DO FLOW", mais abaixo. */
:is(#screen-gerar, #screen-gemini) { justify-content: flex-start; align-items: stretch; padding: 0; }
.gerar-wrap { width: 100%; display: flex; flex-direction: column; }

/* O texto: 16 px (com menos, o iPhone da zoom sozinho ao tocar), sem moldura
   — a moldura e a caixa inteira. Cresce com o texto ate ~6 linhas e depois rola. */
#gerar-prompt {
  width: 100%; resize: none; min-height: 28px; max-height: 168px; overflow-y: auto;
  background: transparent; border: 0; padding: 4px 2px; color: var(--text-primary);
  font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.45; outline: none;
}
.gerar-contador { text-align: right; font-size: 11px; color: var(--text-muted); }
.gerar-contador[hidden] { display: none; }

.gerar-opcoes { display: flex; flex-direction: column; gap: 8px; }
.gerar-segmento {
  display: flex; gap: 4px; padding: 4px; border-radius: 10px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border);
}
.gerar-segmento button {
  flex: 1; min-height: 40px; border: 0; border-radius: 7px; background: transparent;
  color: var(--text-secondary); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.gerar-segmento button.on { background: var(--accent); color: #fff; }

.gerar-erro { font-size: .84rem; color: #fca5a5; line-height: 1.4; }
.gerar-erro[hidden] { display: none; }

.gerar-atual { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.gerar-atual[hidden] { display: none; }
.gerar-estado { display: flex; align-items: center; gap: 12px; }
.gerar-estado strong { font-size: .98rem; }
.gerar-estado p { font-size: .82rem; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }
.gerar-pulso {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); box-shadow: 0 0 0 0 var(--glow);
  animation: gerarPulso 1.6s infinite;
}
.gerar-pulso.fila { background: var(--warning); }
@keyframes gerarPulso {
  0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, .55); }
  70% { box-shadow: 0 0 0 12px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
@media (prefers-reduced-motion: reduce) { .gerar-pulso { animation: none; } }
.gerar-prompt-eco {
  font-size: .82rem; color: var(--text-secondary); line-height: 1.45;
  padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, .03);
  overflow-wrap: anywhere;
}
.gerar-video {
  width: 100%; max-height: 70vh; border-radius: 12px; background: #000; display: block;
}
.gerar-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.gerar-acoes .btn { flex: 1; min-width: 140px; text-decoration: none; min-height: 44px; }
.gerar-falha strong { color: #fca5a5; }

.gerar-historico-wrap[hidden] { display: none; }
.gerar-dica { font-size: .76rem; color: var(--text-muted); margin: 2px 0 10px; }
/* A grade do Flow (06/10, prints dele do Flow no celular): cada criacao no
   formato DELA, em linhas da mesma altura (--h) — a deitada ocupa a linha, as
   em pe dividem (no celular, 2 por linha). O cartao leva a proporcao em --r
   (proporcaoGerador); a ultima linha nao estica (o ::after come a sobra).
   --hmax trava o crescimento: sem ela, a em pe que ficava sozinha antes de
   uma deitada esticava ate ~270 x 480 no celular. Nenhuma linha passa da
   altura de duas em pe lado a lado (a sozinha fica do tamanho de uma coluna
   e sobra o lado). No celular --h acompanha a largura (72%), pra 3:4 + em pe
   caberem juntas ate no 320; no 390 da os ~263 px do print do Flow. */
.gerar-historico { display: flex; flex-wrap: wrap; gap: 12px; --h: min(264px, 72%); --hmax: calc((100% - 12px) / 2 / .5625); }
.gerar-historico::after { content: ""; flex: 1000000 1 0; }
@media (min-width: 600px) { .gerar-historico { --h: 250px; --hmax: 375px; } }
.gerar-item {
  position: relative; flex: var(--r, .5625) 1 calc(var(--r, .5625) * var(--h)); min-width: 0;
  max-width: calc(var(--r, .5625) * var(--hmax));
  aspect-ratio: var(--r, .5625); border-radius: 14px; overflow: hidden;
  border: 0; background: rgba(255, 255, 255, .04);
  padding: 0; cursor: pointer; color: var(--text-secondary); font-family: inherit;
}
.gerar-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* O selo pequeno no canto de cima: so o que o Flow nao mostra (2K/4K, 1080p,
   x2..x4). */
.gerar-item .fl-selo {
  position: absolute; right: 8px; top: 8px; max-width: calc(100% - 52px); padding: 2px 8px; border-radius: 999px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(32, 33, 36, .78); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.5; text-align: left;
}
/* O ▶ do video no canto, e o nome embaixo (o icone e o texto), como no Flow.
   No celular o nome fica sempre a vista; no computador, so com o mouse em cima. */
.gerar-item .fl-play {
  position: absolute; left: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(32, 33, 36, .72); color: #fff;
}
.gerar-item .fl-play .gerar-ico { width: 15px; height: 15px; margin-left: 2px; }
.gerar-item .fl-nome {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px;
  padding: 22px 10px 9px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
  color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.3; text-align: left; pointer-events: none;
}
.gerar-item .fl-nome .gerar-ico { width: 16px; height: 16px; flex-shrink: 0; }
.gerar-item .fl-nome span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
@media (hover: hover) and (min-width: 900px) {
  .gerar-item .fl-nome { opacity: 0; transition: opacity .15s; }
  .gerar-item:hover .fl-nome, .gerar-item:focus-visible .fl-nome { opacity: 1; }
}
.gerar-item.sem-video { display: flex; align-items: center; justify-content: center; font-size: 11px; padding: 8px; text-align: center; line-height: 1.35; }

/* ── A caixa do Flow: modos, fotos e varios videos ──────────────────────── */
.gerar-segmento button:disabled { opacity: .35; cursor: not-allowed; }
.gerar-dica-modo { font-size: 12px; color: var(--text-secondary); line-height: 1.45; padding: 0 4px; }

/* As fotos DENTRO da caixa, em quadradinhos em cima do texto, como o Start ⇄
   End do Flow. Vazio, o do Frames diz "Start"/"End"; as referencias vazias
   nem aparecem (o "+" da caixa poe a proxima). */
.gerar-fotos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gerar-fotos[hidden] { display: none; }
.gerar-foto { position: relative; display: flex; min-width: 0; }
.gerar-foto[hidden] { display: none; }
.gerar-foto-vazio, .gerar-foto-troca {
  width: 56px; height: 56px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: inherit; font-size: 12px; font-weight: 600; padding: 4px;
}
.gerar-foto-vazio {
  border: 1px solid rgba(255, 255, 255, .16); background: transparent;
  color: var(--text-secondary); cursor: pointer;
}
span.gerar-foto-vazio { cursor: default; font-size: 10.5px; }
.gerar-foto-troca { border: 1px solid var(--border); background: #000; padding: 0; overflow: hidden; cursor: pointer; }
.gerar-foto-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A area da foto e a referencia do X. */
.gerar-foto-area { position: relative; }
/* O X fica no canto da foto: o desenho tem 22 px, mas o dedo pega 34 (o ::before). */
.gerar-foto-tirar {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(255, 255, 255, .2); background: #2a2b2d; color: #fff; font-size: 11px; line-height: 1; cursor: pointer;
}
.gerar-foto-tirar::before { content: ""; position: absolute; inset: -6px; }
/* Ainda subindo pro Google (19/10, varias de uma vez): a foto apagada e o sinal
   girando por cima. O toque passa pra foto (trocar) e o X continua por cima. */
.gerar-foto-area.subindo .gerar-foto-img { opacity: .45; }
.gerar-foto-subindo {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; pointer-events: none;
  border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .gerar-foto-subindo { animation: none; } }

.gerar-videos { display: grid; gap: 12px; }
.gerar-videos.varios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gerar-video-bloco { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gerar-video-bloco .btn { min-height: 44px; text-decoration: none; }
.gerar-videos.varios .gerar-video { max-height: 46vh; }
.gerar-videos.varios .gerar-video-bloco .btn { font-size: 13px; padding: 10px 8px; }
.gerar-video-bloco.sem-link { padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
/* Baixar direto (05/10): enquanto baixa, o botao e o "Não feche esta tela";
   se nao deu, o tentar de novo, a frase e o "Abrir em outra aba" de reserva —
   um embaixo do outro. */
.gerar-baixar-bloco { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gerar-baixar-bloco .btn { min-height: 44px; text-decoration: none; }
.gerar-videos.varios .gerar-estado strong { font-size: .86rem; }
/* O botao do 1080p: secundario, embaixo do "Abrir / baixar". Desligado quando
   ha outro pedido andando — o texto do proprio botao diz por que. */
.gerar-hd { width: 100%; }
.gerar-hd:disabled { opacity: .55; cursor: not-allowed; }

/* ── Imagem ──────────────────────────────────────────────────────────────── */
.gerar-tipos button { font-size: 14px; }
.gerar-modos[hidden] { display: none; }
#gerar-op-modelo[hidden], #gerar-op-aspecto[hidden], #gerar-op-formato[hidden], #gerar-op-duracao[hidden],
#gerar-op-quantidade[hidden] { display: none; }
/* x2..x4 acima do teto do painel somem de verdade — sem deixar vaga no meio. */
.gerar-segmento button[hidden] { display: none; }
/* 5 proporcoes cabem em 320px: 48px cada, texto curto. */
#gerar-op-aspecto .gerar-segmento button { font-size: 12px; padding: 0 2px; }
.gerar-imagem { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 12px; background: #000; display: block; }
/* A miniatura propria no card de link vencido (29/09): ocupa o lugar da imagem
   ou do video enquanto o link novo chega. Tem 320 px — no tamanho do card fica
   um pouco suave, e so por alguns segundos. */
.gerar-mini-espera { width: 100%; max-height: 46vh; object-fit: contain; border-radius: 12px; background: #000; display: block; }
.gerar-videos.varios .gerar-imagem { max-height: 46vh; }

/* ── O gerador com a cara do Google Flow (27/09) ────────────────────────────
   Pedido dele: "a pessoa saber que esta usando o Flow". O Flow e cinza
   neutro, sem roxo: a escolha PRINCIPAL (Video/Imagem, e o modo) vira pilula
   CLARA com texto escuro; as opcoes escolhidas (9:16, 8s, x1) ficam num cinza
   mais claro; o botao principal e branco. Tudo preso ao :is(#screen-gerar, #screen-gemini) e ao
   botao de entrada — o resto da area do cliente continua como esta. */
:is(#screen-gerar, #screen-gemini), .gerar-entrada, .omni-compra, .extras-cartao, #screen-gemini, .gemini-cartao {
  --fl-fundo: #131314;
  --fl-painel: #1e1f20;
  --fl-campo: #282a2c;
  --fl-campo-2: #333537;
  --fl-borda: rgba(255, 255, 255, .08);
  --fl-texto: #e3e3e3;
  --fl-texto-2: #a8abb0;
  --fl-texto-3: #80858b;
  --fl-clara: #e8eaed;
  --fl-clara-texto: #1f1f1f;
  --fl-opcao: #44474a;
}
/* O fundo PRETO do projeto do Flow (06/10; antes o cinza #131314). */
:is(#screen-gerar, #screen-gemini) { background: #000; color: var(--fl-texto); }
:is(#screen-gerar, #screen-gemini) .card {
  background: var(--fl-painel); border: 1px solid var(--fl-borda); border-radius: 24px;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
:is(#screen-gerar, #screen-gemini) .gerar-segmento { background: var(--fl-campo); border: 0; border-radius: 14px; }
:is(#screen-gerar, #screen-gemini) .gerar-segmento button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 10px; color: var(--fl-texto-2); font-weight: 500;
}
:is(#screen-gerar, #screen-gemini) .gerar-segmento button.on { background: var(--fl-opcao); color: #fff; }
/* O [hidden] vale tambem aqui (03/10): a regra de cima (inline-flex) e mais
   forte que a de fora e deixava a mostra o 10s do Omni pra quem nao tem — e o
   x2..x4 acima do teto do painel. A prova visual pegou. */
:is(#screen-gerar, #screen-gemini) .gerar-segmento button[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .gerar-tipos button.on, :is(#screen-gerar, #screen-gemini) .gerar-modos button.on {
  background: var(--fl-clara); color: var(--fl-clara-texto);
}
.gerar-ico { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }
.gerar-ico-traco { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* O formato como no Flow: o retangulo deitado/em pe EM CIMA do 16:9 / 9:16. */
:is(#screen-gerar, #screen-gemini) .gerar-formatos button { flex-direction: column; gap: 2px; min-height: 52px; font-size: 12px; }
:is(#screen-gerar, #screen-gemini) .gerar-dica-modo, :is(#screen-gerar, #screen-gemini) .gerar-estado p { color: var(--fl-texto-2); }
:is(#screen-gerar, #screen-gemini) .gerar-contador, :is(#screen-gerar, #screen-gemini) .gerar-dica { color: var(--fl-texto-3); }
/* Passou do teto (15/10): vermelho, pra ele ver quanto cortar antes da seta. */
:is(#screen-gerar, #screen-gemini) .gerar-contador.passou { color: #f87171; font-weight: 700; }
:is(#screen-gerar, #screen-gemini) #gerar-prompt { color: var(--fl-texto); }
:is(#screen-gerar, #screen-gemini) #gerar-prompt::placeholder { color: var(--fl-texto-3); }

/* Botoes: o principal e a pilula branca do Flow ("Add to prompt"); o
   secundario, cinza. Sem sombra roxa e sem pulo no hover. */
:is(#screen-gerar, #screen-gemini) .btn-primary {
  background: var(--fl-clara); color: var(--fl-clara-texto); box-shadow: none; border-radius: 999px;
}
:is(#screen-gerar, #screen-gemini) .btn-primary:hover:not(:disabled) { background: #fff; transform: none; box-shadow: none; }
:is(#screen-gerar, #screen-gemini) .btn-primary:disabled { background: var(--fl-campo-2); color: var(--fl-texto-3); opacity: 1; }
:is(#screen-gerar, #screen-gemini) .btn-ghost {
  background: var(--fl-campo); border: 1px solid transparent; color: var(--fl-texto); border-radius: 999px;
}
:is(#screen-gerar, #screen-gemini) .btn-ghost:hover:not(:disabled) { background: var(--fl-campo-2); border-color: transparent; }

:is(#screen-gerar, #screen-gemini) .gerar-erro, :is(#screen-gerar, #screen-gemini) .gerar-falha strong { color: #f28b82; }
/* O aviso da foto recusada (17/10), embaixo da falha: amarelo e nao vermelho —
   e uma pista do que fazer, nao mais um erro (o mesmo do TK LABS). */
:is(#screen-gerar, #screen-gemini) .gerar-foto-recusada {
  padding: 12px 14px; border-radius: 12px; text-align: left;
  border: 1px solid rgba(253, 214, 99, .4); background: rgba(253, 214, 99, .08);
}
:is(#screen-gerar, #screen-gemini) .gerar-foto-recusada strong { display: block; font-size: 14px; color: #fdd663; }
:is(#screen-gerar, #screen-gemini) .gerar-foto-recusada p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--fl-texto-2); }
:is(#screen-gerar, #screen-gemini) .gerar-pulso { background: var(--fl-clara); animation-name: gerarPulsoFlow; }
:is(#screen-gerar, #screen-gemini) .gerar-pulso.fila { background: #fdd663; }
/* O Omni vendido (03/10): o saldo embaixo do modelo, o "Comprar creditos"
   (abre a janela de compra) quando nao da, e o aviso de credito devolvido. O
   degrade azul-lilas marca tudo que e do Omni. */
:is(#screen-gerar, #screen-gemini) .gerar-omni-saldo { font-size: 13px; color: var(--fl-texto-2); margin-top: 6px; }
:is(#screen-gerar, #screen-gemini) .gerar-omni-saldo.falta { color: #fdd663; }
/* "Comprar mais" (03/10, pedido dele: BEM discreto, sem ficar vendendo toda
   hora): um link pequeno na linha de baixo do saldo, na mesma letra, com o
   lilas do Omni apagado. Linha propria de proposito: no fim da linha ele
   quebrava no celular e comecava a linha com o "·". Os 24 px de altura sao o
   dedo; o padding nao aparece. Saldo baixo: so a palavra, em ambar. */
:is(#screen-gerar, #screen-gemini) .gerar-omni-mais {
  display: block; width: fit-content; min-height: 24px; margin: 2px 0 -4px; padding: 4px 0;
  border: 0; background: none; cursor: pointer; font: inherit;
  color: rgba(197, 138, 249, .8); text-decoration: underline; text-underline-offset: 2px;
}
:is(#screen-gerar, #screen-gemini) .gerar-omni-mais[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .gerar-omni-junto { white-space: nowrap; }
:is(#screen-gerar, #screen-gemini) .gerar-omni-mais:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 2px; border-radius: 4px; }
:is(#screen-gerar, #screen-gemini) .gerar-omni-baixo { color: #fdd663; }
:is(#screen-gerar, #screen-gemini) .gerar-omni-comprar { display: inline-flex; align-items: center; min-height: 40px; margin-top: 6px; padding: 0 16px;
  border: 0; border-radius: 999px; background: linear-gradient(135deg, #8ab4f8, #c58af9); color: #1f1f1f;
  font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
:is(#screen-gerar, #screen-gemini) .gerar-omni-comprar[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .gerar-omni-volta { color: #81c995; margin-top: 4px; }
/* O modelo do video em dois botoes (03/10): o nome em cima, o detalhe embaixo
   — no do Omni, o saldo. */
:is(#screen-gerar, #screen-gemini) .gerar-modelos-video button { flex-direction: column; gap: 1px; min-height: 52px; padding: 6px 8px; line-height: 1.2; }
:is(#screen-gerar, #screen-gemini) .gerar-modelos-video button span { font-size: 14px; font-weight: 600; }
:is(#screen-gerar, #screen-gemini) .gerar-modelos-video button small { font-size: 11.5px; font-weight: 500; color: var(--fl-texto-3); }
:is(#screen-gerar, #screen-gemini) .gerar-modelos-video button.on small { color: #e8eaed; }
:is(#screen-gerar, #screen-gemini) .gerar-modelos-video button[data-modelo-video="omni"].on {
  background: linear-gradient(135deg, rgba(138, 180, 248, .3), rgba(197, 138, 249, .3)); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(197, 138, 249, .6);
}
/* A 320 px o "✨ Omni Flash" quebrava em duas linhas e o botao ficava mais alto
   que o do lado (a prova pegou): letra e respiro um pouco menores. */
@media (max-width: 359px) {
  :is(#screen-gerar, #screen-gemini) .gerar-modelos-video button { padding: 6px 4px; }
  :is(#screen-gerar, #screen-gemini) .gerar-modelos-video button span { font-size: 13px; }
}
/* O 10 s e do Omni: a marquinha diz por que tocar nele troca o modelo. */
.gerar-omni-marca { font-size: 10px; margin-left: 2px; }
/* O cliente SO DO OMNI (21/10): a Imagem e o Veo 3.1 com cadeado — o toque abre
   o "Assine o ULTRA" (o servidor tambem barra). */
:is(#screen-gerar, #screen-gemini).so-omni .gerar-tipos [data-tipo="imagem"] { opacity: .62; }
:is(#screen-gerar, #screen-gemini).so-omni .gerar-tipos [data-tipo="imagem"]::after { content: "🔒"; margin-left: 4px; font-size: .8em; }
:is(#screen-gerar, #screen-gemini).so-omni [data-modelo-video=""] { opacity: .7; }

/* OS EXTRAS NUM CARTAO SO (08/10, pedido dele: "o Omni Flash faz parte do
   extra"), colado embaixo do cartao do gerador: o titulo e o "Ver" em cima, e
   os tres saldos (Omni Flash, criacoes extras, upscales HD) lado a lado — ate no
   celular de 320, onde o rotulo pode quebrar em duas linhas. O lilas do Omni e o
   verde dos extras no mesmo degrade. Ate 08/10 eram duas faixas (.omni-faixa). */
.extras-cartao {
  display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 430px;
  margin: -4px auto 14px; padding: 12px 12px 12px 14px; border-radius: 16px; cursor: pointer;
  border: 1px solid rgba(197, 138, 249, .38);
  background: linear-gradient(135deg, rgba(197, 138, 249, .15), rgba(129, 201, 149, .12)), #16181f;
  color: var(--fl-texto); font-family: inherit; font-size: .86rem; line-height: 1.35; text-align: left;
}
.extras-cartao[hidden] { display: none; }
.extras-cartao:focus-visible { outline: 2px solid #c58af9; outline-offset: 3px; }
.extras-cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 2px; }
.extras-cartao-topo b { color: #fff; font-size: .95rem; }
.extras-cartao-ver {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: linear-gradient(135deg, #c58af9, #81c995); color: #1f1f1f; font-weight: 800; font-size: .82rem;
}
.extras-cartao-ver span { font-size: 1.1rem; line-height: 1; }
.extras-cartao-saldos { display: flex; gap: 6px; }
.extras-cartao-saldo {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px;
  background: rgba(255, 255, 255, .06);
}
.extras-cartao-saldo[hidden] { display: none; }
.extras-cartao-saldo b { color: #fff; font-size: 1.05rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extras-cartao-saldo small { font-size: .72rem; color: var(--fl-texto-2); line-height: 1.25; }

/* A janela de compra (03/10): no celular sobe de baixo, como a "Escolher foto";
   na tela larga, no meio. Redesenhada a pedido dele ("deixar mais bonito"):
   brilho azul-lilas no topo, o pacote como cartao de produto com o que rende
   em tres blocos, o saldo numa pilula, o estado (esgotado, esperando, chegou)
   numa caixa com icone acima do botao, e o Fechar como botao de verdade.
   z-index 950: ACIMA da faixa "Instale o app Flow" (900, presa no rodape) — a
   prova no preview pegou ela cobrindo o Fechar (e, aberta, cobriria o
   Comprar). Abaixo dos avisos que travam a tela (1000 e 9999). */
.omni-compra {
  position: fixed; inset: 0; z-index: 950; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .7);
}
.omni-compra[hidden] { display: none; }
.omni-compra-caixa {
  position: relative; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 28px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0;
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(197, 138, 249, .2), transparent 62%),
    radial-gradient(70% 45% at 12% 0%, rgba(138, 180, 248, .16), transparent 60%),
    var(--fl-painel);
  color: var(--fl-texto); border: 1px solid rgba(197, 138, 249, .22); border-bottom: 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .5);
}
.omni-compra:not([hidden]) { animation: omniFundo .2s ease-out; }
.omni-compra:not([hidden]) .omni-compra-caixa { animation: omniSobe .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes omniFundo { from { opacity: 0; } to { opacity: 1; } }
@keyframes omniSobe { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.omni-compra-fechar {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .06); color: var(--fl-texto); font-size: 1rem; font-family: inherit;
}
.omni-compra-selo {
  display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 20px; font-size: 30px;
  border: 1.5px solid transparent;
  background: linear-gradient(#272838, #272838) padding-box, linear-gradient(135deg, #8ab4f8, #c58af9) border-box;
  box-shadow: 0 0 34px rgba(197, 138, 249, .35);
}
.omni-compra-caixa h3 {
  margin-top: 2px; font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em;
  background: linear-gradient(135deg, #d2e3fc, #e9d2fd); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.omni-compra-sub { max-width: 320px; margin-top: -4px; font-size: .9rem; line-height: 1.45; color: var(--fl-texto-2); }
/* O pacote: a borda em degrade, o "500 créditos" grande e os tres blocos. */
.omni-compra-pacote {
  width: 100%; margin-top: 4px; padding: 14px 14px 12px; border-radius: 20px; border: 1px solid transparent;
  background: linear-gradient(var(--fl-campo), var(--fl-campo)) padding-box,
    linear-gradient(135deg, rgba(138, 180, 248, .75), rgba(197, 138, 249, .75)) border-box;
}
.omni-compra-etiqueta { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #c58af9; }
.omni-compra-pacote strong { display: block; margin-top: 2px; font-size: 1.65rem; font-weight: 800; line-height: 1.2; color: #fff; }
.omni-compra-rende { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.omni-compra-rende li {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 4px 9px; border-radius: 14px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07);
}
.omni-compra-rende b { font-size: 1.35rem; font-weight: 800; line-height: 1.15; color: #fff; }
.omni-compra-rende span { font-size: .72rem; line-height: 1.3; color: var(--fl-texto-2); }
.omni-compra-aprox { display: block; margin-top: 9px; font-size: .72rem; color: var(--fl-texto-3); }
/* Mais de um pacote (11/10, pedido dele): a tabela dos tres no lugar do pacote
   unico — quantos videos de 4, 8 e 10 s cada um rende (720p). O [hidden] vence
   o display dos blocos de antes. */
.omni-compra-tabela table { width: 100%; margin-top: 10px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.omni-compra-tabela th, .omni-compra-tabela td { padding: 7px 4px; text-align: center; }
.omni-compra-tabela thead th { font-size: .72rem; font-weight: 700; color: var(--fl-texto-2); }
.omni-compra-tabela thead th:first-child { text-align: left; }
.omni-compra-tabela tbody th { text-align: left; font-size: .86rem; font-weight: 700; color: #fff; white-space: nowrap; }
.omni-compra-tabela tbody td { font-size: 1.1rem; font-weight: 800; color: #fff; }
.omni-compra-tabela tbody tr { border-top: 1px solid rgba(255, 255, 255, .08); }
.omni-compra-tabela[hidden], .omni-compra-rende[hidden], .omni-compra-pacote strong[hidden] { display: none; }
.omni-compra-saldo {
  padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--fl-borda);
  font-size: .82rem; color: var(--fl-texto-2);
}
/* O extrato dele (03/10): o "Ver extrato" discreto embaixo do saldo, e a lista
   numa caixa com rolagem propria (umas 6 linhas a vista: o Comprar continua no
   alcance). Cada linha: o que foi e o valor, a data embaixo. Credito que entra
   em verde; o que sai, na cor do texto — gastar e o normal, nao e alarme. */
.omni-compra-ver-extrato {
  min-height: 36px; margin-top: -6px; padding: 0 12px; border: 0; background: none; cursor: pointer;
  color: #c58af9; font-family: inherit; font-size: .84rem; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.omni-compra-ver-extrato:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; }
/* flex-shrink 0: na janela (coluna com altura maxima), a lista — a unica peca
   com rolagem propria — era a que encolhia quando faltava espaco, e sobravam
   48 px (a prova pegou). Ela fica com a altura dela; quem rola e a janela. */
.omni-compra-extrato {
  width: 100%; max-height: 268px; overflow-y: auto; flex-shrink: 0; display: flex; flex-direction: column; text-align: left;
  border: 1px solid var(--fl-borda); border-radius: 16px; background: rgba(255, 255, 255, .03);
}
.omni-compra-extrato[hidden] { display: none; }
.omni-compra-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px;
  padding: 9px 12px; border-bottom: 1px solid var(--fl-borda);
}
.omni-compra-linha:last-child { border-bottom: 0; }
.omni-compra-o-que { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; color: var(--fl-texto); }
.omni-compra-valor { font-size: .88rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--fl-texto); }
.omni-compra-valor.mais { color: #81c995; }
.omni-compra-quando { grid-column: 1 / -1; font-size: .72rem; color: var(--fl-texto-3); }
.omni-compra-vazio { padding: 12px; font-size: .84rem; color: var(--fl-texto-2); text-align: center; }
/* A ordem muda com o estado: o aviso (esgotado, esperando, chegou) vem ANTES
   do botao; a explicacao de quando esta aberta, depois dele. */
.omni-compra-btn {
  order: 2; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 2px;
  border: 0; border-radius: 999px; background: linear-gradient(135deg, #8ab4f8, #c58af9); color: #1f1f1f;
  font-family: inherit; font-size: 1rem; font-weight: 800; text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 28px rgba(197, 138, 249, .28);
}
.omni-compra-btn[hidden] { display: none; }
.omni-compra-btn:focus-visible, .omni-compra-fechar:focus-visible, .omni-compra-depois:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.omni-compra-nota { order: 3; max-width: 340px; font-size: .82rem; line-height: 1.45; color: var(--fl-texto-2); }
.omni-compra-nota:empty { display: none; }
.omni-compra-nota.esgotado, .omni-compra-nota.espera, .omni-compra-nota.chegou {
  order: 1; display: flex; align-items: flex-start; gap: 10px; width: 100%; max-width: none; margin-top: 2px;
  padding: 12px 14px; border-radius: 16px; font-size: .86rem; text-align: left;
}
.omni-compra-nota.esgotado { background: rgba(253, 214, 99, .08); border: 1px solid rgba(253, 214, 99, .3); color: #fde293; }
.omni-compra-nota.esgotado::before { content: "⏳"; flex-shrink: 0; font-size: 1rem; line-height: 1.3; }
.omni-compra-nota.espera { background: rgba(197, 138, 249, .08); border: 1px solid rgba(197, 138, 249, .32); color: var(--fl-texto); }
/* Esperando o pagamento: a bolinha lilas pulsando antes do texto. */
.omni-compra-nota.espera::before {
  content: ""; flex-shrink: 0; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%;
  background: #c58af9; animation: omniEspera 1.4s ease-in-out infinite;
}
@keyframes omniEspera { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.75); } }
.omni-compra-nota.chegou { background: rgba(129, 201, 149, .1); border: 1px solid rgba(129, 201, 149, .38); color: #a8dab5; font-weight: 700; font-size: .92rem; }
.omni-compra-nota.chegou::before { content: "✓"; flex-shrink: 0; font-weight: 800; line-height: 1.35; }
.omni-compra-depois {
  order: 4; width: 100%; min-height: 46px; margin-top: 2px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  background: transparent; cursor: pointer; color: var(--fl-texto); font-family: inherit; font-size: .95rem; font-weight: 600;
}
@media (hover: hover) { .omni-compra-depois:hover { background: rgba(255, 255, 255, .05); } }
@media (min-width: 600px) {
  .omni-compra { align-items: center; padding: 24px; }
  .omni-compra-caixa { border-radius: 26px; border-bottom: 1px solid rgba(197, 138, 249, .22); }
}
@media (prefers-reduced-motion: reduce) {
  .omni-compra-nota.espera::before { animation: none; }
  .omni-compra:not([hidden]), .omni-compra:not([hidden]) .omni-compra-caixa { animation: none; }
}
/* Alto contraste: o titulo em degrade (texto transparente) sumiria. */
@media (forced-colors: active) {
  .omni-compra-caixa h3 { background: none; color: CanvasText; }
}
@keyframes gerarPulsoFlow {
  0% { box-shadow: 0 0 0 0 rgba(232, 234, 237, .45); }
  70% { box-shadow: 0 0 0 12px rgba(232, 234, 237, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 234, 237, 0); }
}
/* A cor da bolinha segue a etapa (02/10, pedido dele): amarela na fila, AZUL
   enviando ao Google, branca gerando e VERDE quando ficou pronto — por 2 s,
   antes do resultado aparecer, pra ele ja prestar atencao. */
:is(#screen-gerar, #screen-gemini) .gerar-pulso.enviando { background: #8ab4f8; animation-name: gerarPulsoAzul; }
:is(#screen-gerar, #screen-gemini) .gerar-pulso.pronto { background: #81c995; animation-name: gerarPulsoVerde; animation-duration: 1s; }
@keyframes gerarPulsoAzul {
  0% { box-shadow: 0 0 0 0 rgba(138, 180, 248, .5); }
  70% { box-shadow: 0 0 0 12px rgba(138, 180, 248, 0); }
  100% { box-shadow: 0 0 0 0 rgba(138, 180, 248, 0); }
}
@keyframes gerarPulsoVerde {
  0% { box-shadow: 0 0 0 0 rgba(129, 201, 149, .6); }
  70% { box-shadow: 0 0 0 14px rgba(129, 201, 149, 0); }
  100% { box-shadow: 0 0 0 0 rgba(129, 201, 149, 0); }
}
/* O "reduzir movimento" do aparelho: a regra geral la em cima perde pra
   animation-name daqui (mais especifica). As cores ficam; o pulso para. */
@media (prefers-reduced-motion: reduce) {
  :is(#screen-gerar, #screen-gemini) .gerar-pulso, :is(#screen-gerar, #screen-gemini) .gerar-pulso.fila,
  :is(#screen-gerar, #screen-gemini) .gerar-pulso.enviando, :is(#screen-gerar, #screen-gemini) .gerar-pulso.pronto { animation: none; }
}
:is(#screen-gerar, #screen-gemini) .gerar-prompt-eco { background: var(--fl-campo); border-radius: 12px; }
:is(#screen-gerar, #screen-gemini) .gerar-video, :is(#screen-gerar, #screen-gemini) .gerar-imagem, :is(#screen-gerar, #screen-gemini) .gerar-mini-espera { border-radius: 16px; }
:is(#screen-gerar, #screen-gemini) .gerar-video-bloco.sem-link { background: var(--fl-campo); border-color: transparent; border-radius: 16px; }
/* O recado quando o filtro escolhido nao tem nada ocupa a linha toda da grade. */
:is(#screen-gerar, #screen-gemini) .gerar-vazio { grid-column: 1 / -1; margin: 8px 0; }
/* O "Ver mais" (30/09): no fim da grade, no meio. */
:is(#screen-gerar, #screen-gemini) .gerar-ver-mais { align-self: center; width: auto; min-width: 200px; margin: 16px auto 0; min-height: 44px; display: flex; }
:is(#screen-gerar, #screen-gemini) .gerar-ver-mais[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .gerar-item { background: #1e1f20; color: var(--fl-texto-2); }
:is(#screen-gerar, #screen-gemini) .gerar-foto-vazio { color: var(--fl-texto-2); }
:is(#screen-gerar, #screen-gemini) .gerar-foto-troca { border-color: var(--fl-borda); }
/* A porta de entrada saiu do cinza do Flow em 01/10: virou o cartao com o
   neon do Google (secao "Gerador de video", mais acima). Daqui ela so leva as
   cores do botao "Entrar". */

/* A marca no topo do gerador (01/10, pedido dele: "o logo da Google e na
   frente escrito FLOW, bem bonito, tipo um gif, branco e prata, proporcional
   a ferramenta"). As letras sao prata (branco em cima, cinza embaixo) e um
   brilho branco passa por dentro delas de tempos em tempos. O brilho nasce e
   morre FORA das letras, entao a volta do loop nao da pulo. */
/* Um pouco maior a pedido dele, no mesmo dia ("consegue aumentar um
   pouquinho?"): G de 22 pra 26px, FLOW de 1,25 pra 1,5rem. E de novo, ja no
   ar ("ficou pequeno, quero um pouco maior"): G 32px, FLOW 1,875rem (30px). */
/* E com respiro (ele: "esta muito grudado o topo no gerador", e depois "mais
   um espaco pequeno"): 8px em cima e 20px a mais embaixo, alem do espaco
   normal entre os blocos da tela. */
.gerar-marca { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 8px; margin-bottom: 20px; }
/* O risco de arco-iris embaixo (02/10, pedido dele: "bem discreto"): 2px, as
   mesmas cores do Google andando da faixa do cartao de entrada (o MESMO
   gerarNeon), meio apagado e sumindo nas pontas. */
.gerar-marca::after {
  content: ""; position: absolute; left: 50%; bottom: -10px; width: 170px; height: 2px;
  transform: translateX(-50%); border-radius: 2px; pointer-events: none; opacity: .75;
  background-image: linear-gradient(90deg, #4285F4, #EA4335, #FBBC05, #34A853, #4285F4, #EA4335, #FBBC05, #34A853, #4285F4);
  background-size: 200% 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  animation: gerarNeon 4s linear infinite;
}
.gerar-marca-g { display: block; width: 32px; height: 32px; flex-shrink: 0; }
.gerar-marca-flow {
  font-size: 1.875rem; font-weight: 800; line-height: 1;
  /* O espaco depois do W empurraria o conjunto pra esquerda: a margem negativa
     devolve, e o G + FLOW fica no centro de verdade. */
  letter-spacing: .3em; margin-right: -.3em;
  background-image: linear-gradient(100deg, transparent 42%, #ffffff 50%, transparent 58%),
    linear-gradient(180deg, #eef0f2 0%, #b9bec5 50%, #868c94 100%);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .16));
  animation: gerarMarcaBrilho 3.5s ease-in-out infinite;
}
@keyframes gerarMarcaBrilho {
  0% { background-position: 100% 0, 0 0; }
  60%, 100% { background-position: 0% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .gerar-marca-flow, .gerar-marca::after { animation: none; } }

/* "Escolher foto" (01/10, pedido dele, como o Flow): no celular a janela sobe
   de baixo (o dedo esta la); na tela larga, no meio. As imagens dele em grade
   de quadrados, cortadas pelo meio — a 9:16 e a 16:9 cabem igual.
   z-index 950, como a janela do Omni: acima da faixa "Instale o app Flow"
   (900), que cobria o "Enviar Imagem" no rodape (achado em 03/10). */
.gerar-escolha {
  position: fixed; inset: 0; z-index: 950; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .62);
}
.gerar-escolha[hidden] { display: none; }
.gerar-escolha-caixa {
  width: 100%; max-width: 520px; max-height: 82vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
  background: var(--fl-painel); color: var(--fl-texto); border: 1px solid var(--fl-borda); border-bottom: 0;
}
.gerar-escolha-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gerar-escolha-topo h3 { font-size: 1.05rem; font-weight: 600; }
.gerar-escolha-fechar {
  width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--fl-campo); color: var(--fl-texto); font-size: 1rem; font-family: inherit;
}
.gerar-escolha-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gerar-escolha-item {
  aspect-ratio: 1; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--fl-campo);
}
.gerar-escolha-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gerar-escolha-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gerar-escolha-aviso { grid-column: 1 / -1; margin: 4px 0; }
.gerar-escolha-enviar { width: 100%; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
@media (max-width: 359px) { .gerar-escolha-grade { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 600px) {
  .gerar-escolha { align-items: center; padding: 24px; }
  .gerar-escolha-caixa { border-radius: 22px; border-bottom: 1px solid var(--fl-borda); }
}

/* ── A CENA (03/10, pedido dele: "parecido com o Flow") ──────────────────────
   O editor da Cena do Flow, no celular primeiro: o player que toca a
   sequencia, a linha do tempo (cada clipe com a largura dos segundos dele; as
   alcas brancas cortam o comeco e o fim), e a caixa que ESTENDE o clipe
   escolhido. No computador ele fica largo como o do Flow — o resto do gerador
   continua em 520 px. Tudo preso a :is(#screen-gerar, #screen-gemini). */
/* Com o editor aberto, o resto do gerador sai da frente (a barra de cima
   fica), como a pagina da cena do Flow. Por classe, e nao [hidden]: o
   display:flex da caixa venceria o [hidden]. */
:is(#screen-gerar, #screen-gemini) .gerar-wrap.com-cena .fl-lado,
:is(#screen-gerar, #screen-gemini) .gerar-wrap.com-cena .gerar-historico-wrap,
:is(#screen-gerar, #screen-gemini) .gerar-wrap.com-cena .fl-doca { display: none; }
:is(#screen-gerar, #screen-gemini) .gerar-wrap.com-cena .cena-editor { max-width: 1040px; margin: 0 auto; padding-bottom: 24px; }
/* A aba "Cenas" esconde a grade: o display:grid dela venceria o [hidden]. */
:is(#screen-gerar, #screen-gemini) .gerar-historico[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .cena-editor { width: 100%; display: flex; flex-direction: column; gap: 12px; }
:is(#screen-gerar, #screen-gemini) .cena-editor[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .cena-topo { display: flex; align-items: center; gap: 8px; }
:is(#screen-gerar, #screen-gemini) #cena-voltar { min-height: 34px; flex-shrink: 0; border-color: rgba(255, 255, 255, .1); }
:is(#screen-gerar, #screen-gemini) .cena-titulo {
  flex: 1; min-width: 0; display: flex; align-items: stretch; min-height: 34px;
  border-radius: 999px; background: var(--fl-campo); border: 1px solid rgba(255, 255, 255, .1); font-size: .95rem; font-weight: 600;
}
/* O nome e um botao: tocar abre o campo (o "Renomear" do Flow). O lapis diz
   que da pra mudar. */
:is(#screen-gerar, #screen-gemini) .cena-nome {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 10px; border: 0;
  border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
:is(#screen-gerar, #screen-gemini) .cena-nome[hidden], :is(#screen-gerar, #screen-gemini) .cena-nome-campo[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .cena-titulo .gerar-ico { color: var(--fl-texto-2); }
:is(#screen-gerar, #screen-gemini) .cena-titulo .cena-lapis { width: 15px; height: 15px; }
:is(#screen-gerar, #screen-gemini) .cena-nome:hover .cena-lapis, :is(#screen-gerar, #screen-gemini) .cena-nome:focus-visible .cena-lapis { color: var(--fl-texto); }
:is(#screen-gerar, #screen-gemini) .cena-titulo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 16 px: com menos, o iPhone da zoom sozinho ao tocar no campo. */
:is(#screen-gerar, #screen-gemini) .cena-nome-campo {
  flex: 1; min-width: 0; padding: 0 14px; border: 0; border-radius: inherit; background: none; color: var(--fl-texto);
  font-family: inherit; font-weight: 600; font-size: 16px; outline: none;
}
:is(#screen-gerar, #screen-gemini) .cena-titulo:focus-within { border-color: rgba(255, 255, 255, .35); }
:is(#screen-gerar, #screen-gemini) .cena-concluir {
  flex-shrink: 0; min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--fl-clara); color: var(--fl-clara-texto); font-family: inherit; font-weight: 700; font-size: 14px;
}
:is(#screen-gerar, #screen-gemini) .cena-concluir:disabled { background: var(--fl-campo-2); color: var(--fl-texto-3); cursor: not-allowed; }
/* No celular (ate 400 px) o Voltar vira so a seta e o titulo perde o icone:
   em 360 o "Cena 03/10 14:06" saia cortado entre o Voltar e o Concluir. */
@media (max-width: 399px) {
  :is(#screen-gerar, #screen-gemini) .cena-titulo .gerar-ico:not(.cena-lapis), :is(#screen-gerar, #screen-gemini) .cena-voltar-txt { display: none; }
  :is(#screen-gerar, #screen-gemini) .cena-titulo { font-size: .88rem; }
  :is(#screen-gerar, #screen-gemini) .cena-nome { padding: 0 12px; }
}
/* Ate 360 px os espacos apertam: com o lapis, o "Cena 03/10 14:06" passava
   13 px do que cabia a 320 e saia cortado. */
@media (max-width: 359px) {
  :is(#screen-gerar, #screen-gemini) .cena-topo { gap: 6px; }
  :is(#screen-gerar, #screen-gemini) .cena-concluir { padding: 0 10px; }
  :is(#screen-gerar, #screen-gemini) .cena-nome { padding: 0 9px 0 10px; gap: 5px; }
  :is(#screen-gerar, #screen-gemini) .cena-titulo .cena-lapis { width: 13px; height: 13px; }
}
:is(#screen-gerar, #screen-gemini) .cena-palco {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: #000; border-radius: 20px; padding: 12px 12px 6px;
}
:is(#screen-gerar, #screen-gemini) .cena-player {
  position: relative; height: min(44vh, 420px); aspect-ratio: 9 / 16; max-width: 100%;
  border-radius: 12px; overflow: hidden; background: #111;
}
:is(#screen-gerar, #screen-gemini) .cena-player.paisagem { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 56vh; }
:is(#screen-gerar, #screen-gemini) .cena-player video, :is(#screen-gerar, #screen-gemini) .cena-capa {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block;
}
:is(#screen-gerar, #screen-gemini) .cena-capa[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .cena-formato {
  position: absolute; top: 8px; left: 8px; z-index: 1; font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff;
}
:is(#screen-gerar, #screen-gemini) .cena-vazia {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center; color: var(--fl-texto-2); font-size: 14px; line-height: 1.4;
}
:is(#screen-gerar, #screen-gemini) .cena-vazia[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .cena-transporte {
  display: flex; align-items: center; gap: 6px; color: var(--fl-texto-2); font-size: 13px; font-variant-numeric: tabular-nums;
}
:is(#screen-gerar, #screen-gemini) .cena-transporte button {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--fl-texto);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
:is(#screen-gerar, #screen-gemini) .cena-transporte button:disabled { opacity: .35; cursor: not-allowed; }
:is(#screen-gerar, #screen-gemini) .cena-transporte .cena-play { background: var(--fl-clara); color: var(--fl-clara-texto); }
/* O relogio com o QUADRO (18/10, "00:05:11 / 00:16:00", como o do Flow) numa
   linha so: a 320 px ele quebrava em duas. */
:is(#screen-gerar, #screen-gemini) .cena-tempo { margin-left: 8px; white-space: nowrap; }
@media (max-width: 359px) { :is(#screen-gerar, #screen-gemini) .cena-tempo { margin-left: 4px; font-size: 12px; } }
:is(#screen-gerar, #screen-gemini) .cena-linha-topo { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--fl-texto-3); margin: 0 4px 6px; }
/* --pps: quantos pixels vale 1 segundo. O mesmo numero esta no JS (ppsCena). */
:is(#screen-gerar, #screen-gemini) .cena-rolo {
  --pps: 14px; position: relative; overflow-x: auto;
  background: var(--fl-painel); border: 1px solid var(--fl-borda); border-radius: 16px; padding: 6px 10px 10px;
}
@media (min-width: 900px) { :is(#screen-gerar, #screen-gemini) .cena-rolo { --pps: 26px; } }
/* A regua dos segundos tambem e onde a agulha se arrasta (18/10): 22 px de
   dedo, e arrastar ali nao rola a linha (pra rolar, arraste nos clipes). */
:is(#screen-gerar, #screen-gemini) .cena-regua {
  display: flex; height: 22px; width: max-content; font-size: 10px; color: var(--fl-texto-3); white-space: nowrap;
  cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none;
}
:is(#screen-gerar, #screen-gemini) .cena-regua span {
  flex: 0 0 calc(var(--pps) * 2); border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 3px; line-height: 12px;
}
:is(#screen-gerar, #screen-gemini) .cena-trilha { display: flex; gap: 4px; height: 64px; width: max-content; }
:is(#screen-gerar, #screen-gemini) .cena-clipe {
  position: relative; flex: 0 0 auto; width: calc(var(--s) * var(--pps)); min-width: 28px; height: 64px; padding: 0;
  border-radius: 10px; border: 2px solid transparent; cursor: pointer; color: #fff; font-family: inherit;
  background-color: #000; background-repeat: repeat-x; background-size: auto 100%;
}
:is(#screen-gerar, #screen-gemini) .cena-clipe.on { border-color: #fff; }
:is(#screen-gerar, #screen-gemini) .cena-clipe:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 2px; }
:is(#screen-gerar, #screen-gemini) .cena-dur {
  position: absolute; left: 14px; bottom: 4px; font-size: 11px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95); pointer-events: none;
}
/* As alcas de cortar: 12 px de branco, mas o dedo pega 28 (o ::before). */
:is(#screen-gerar, #screen-gemini) .cena-alca {
  position: absolute; top: -2px; bottom: -2px; width: 12px; z-index: 1; background: #fff;
  display: flex; align-items: center; justify-content: center; touch-action: none; cursor: ew-resize;
}
:is(#screen-gerar, #screen-gemini) .cena-alca::before { content: ""; position: absolute; top: 0; bottom: 0; left: -8px; right: -8px; }
:is(#screen-gerar, #screen-gemini) .cena-alca::after { content: ""; width: 2px; height: 18px; border-radius: 2px; background: #5f6368; }
:is(#screen-gerar, #screen-gemini) .cena-alca.esq { left: -2px; border-radius: 10px 0 0 10px; }
:is(#screen-gerar, #screen-gemini) .cena-alca.dir { right: -2px; border-radius: 0 10px 10px 0; }
:is(#screen-gerar, #screen-gemini) .cena-clipe.andando {
  background: var(--fl-campo); border: 2px dashed rgba(255, 255, 255, .3);
  display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 700;
}
:is(#screen-gerar, #screen-gemini) .cena-clipe.andando.on { border-color: #fff; }
:is(#screen-gerar, #screen-gemini) .cena-clipe.andando .gerar-pulso { width: 10px; height: 10px; }
:is(#screen-gerar, #screen-gemini) .cena-clipe.falhou {
  background: rgba(242, 139, 130, .12); border: 2px dashed rgba(242, 139, 130, .6); color: #f28b82; font-size: 12px; font-weight: 700;
}
:is(#screen-gerar, #screen-gemini) .cena-clipe.falhou.on { border-style: solid; }
:is(#screen-gerar, #screen-gemini) .cena-mais {
  flex: 0 0 56px; height: 64px; padding: 0; border-radius: 10px; border: 1.5px dashed rgba(255, 255, 255, .3);
  background: transparent; color: var(--fl-texto); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
:is(#screen-gerar, #screen-gemini) .cena-mais:disabled { opacity: .35; cursor: not-allowed; }
/* A agulha (18/10, a do Flow): se arrasta com o dedo e o mouse — pega 24 px
   de dedo (o ::after) —, mas as alcas de cortar ficam por cima dela (z-index 1). */
:is(#screen-gerar, #screen-gemini) .cena-agulha {
  position: absolute; top: 4px; bottom: 6px; width: 2px; background: #fff; border-radius: 2px;
  cursor: ew-resize; touch-action: none;
}
:is(#screen-gerar, #screen-gemini) .cena-agulha::before { content: ""; position: absolute; top: -4px; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
:is(#screen-gerar, #screen-gemini) .cena-agulha::after { content: ""; position: absolute; top: 0; bottom: 0; left: -11px; right: -11px; }
:is(#screen-gerar, #screen-gemini) .cena-agulha[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .cena-selecao { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; font-size: 13px; color: var(--fl-texto-2); }
:is(#screen-gerar, #screen-gemini) .cena-selecao[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .cena-selecao strong { color: var(--fl-texto); }
:is(#screen-gerar, #screen-gemini) .cena-sel-botoes { display: flex; gap: 6px; flex-shrink: 0; }
:is(#screen-gerar, #screen-gemini) .cena-sel-botoes button {
  min-height: 36px; min-width: 36px; padding: 0 10px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--fl-campo); color: var(--fl-texto); display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-family: inherit; font-size: 13px;
}
:is(#screen-gerar, #screen-gemini) .cena-sel-botoes button:disabled { opacity: .35; cursor: not-allowed; }
:is(#screen-gerar, #screen-gemini) .cena-sel-botoes button[hidden] { display: none; }
/* O DIVIDIR (23/10) e o 4o botao da barra: abaixo de 390 px o texto do clipe
   fica numa linha e os botoes descem pra de baixo (medido: a 320 px, tudo numa
   linha so espremia o texto em 5 linhas). */
@media (max-width: 389px) {
  :is(#screen-gerar, #screen-gemini) .cena-selecao { flex-wrap: wrap; row-gap: 6px; }
  :is(#screen-gerar, #screen-gemini) :is(#cena-sel-texto, #gem-linha-sel-texto) { flex: 1 0 100%; }
  :is(#screen-gerar, #screen-gemini) .cena-sel-botoes { margin-left: auto; }
}
:is(#screen-gerar, #screen-gemini) .cena-status { padding: 14px 16px; }
:is(#screen-gerar, #screen-gemini) .cena-status[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .cena-status .btn { min-height: 44px; text-decoration: none; }
:is(#screen-gerar, #screen-gemini) .cena-caixa { background: var(--fl-campo); border-radius: 20px; padding: 12px 10px 10px 14px; display: flex; flex-direction: column; gap: 8px; }
:is(#screen-gerar, #screen-gemini) .cena-caixa textarea {
  width: 100%; min-height: 46px; background: transparent; border: 0; outline: none; resize: none;
  color: var(--fl-texto); font-family: inherit; font-size: 16px; line-height: 1.4;
}
:is(#screen-gerar, #screen-gemini) .cena-caixa textarea::placeholder { color: var(--fl-texto-3); }
:is(#screen-gerar, #screen-gemini) .cena-caixa textarea:disabled { opacity: .75; }
:is(#screen-gerar, #screen-gemini) .cena-caixa-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
:is(#screen-gerar, #screen-gemini) .cena-chip { font-size: 12px; color: var(--fl-texto-2); background: var(--fl-campo-2); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
:is(#screen-gerar, #screen-gemini) .cena-estender {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px 0 16px; cursor: pointer;
  border: 0; border-radius: 999px; background: var(--fl-clara); color: var(--fl-clara-texto); font-family: inherit; font-weight: 700; font-size: 14px;
}
:is(#screen-gerar, #screen-gemini) .cena-estender:disabled { background: var(--fl-campo-2); color: var(--fl-texto-3); cursor: not-allowed; }
:is(#screen-gerar, #screen-gemini) .cena-rotulo-escondido {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
:is(#screen-gerar, #screen-gemini) .cena-nota { font-size: 12px; color: var(--fl-texto-3); text-align: center; line-height: 1.4; }
:is(#screen-gerar, #screen-gemini) .cena-apagar { align-self: center; min-height: 40px; color: #f28b82; }
/* As cenas na aba "Cenas" de "Suas criações" e na janela do "Adicionar à cena". */
:is(#screen-gerar, #screen-gemini) .cena-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
:is(#screen-gerar, #screen-gemini) .cena-lista[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .gerar-escolha-grade.cenas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(#screen-gerar, #screen-gemini) .cena-nova {
  min-height: 128px; border-radius: 14px; border: 1.5px dashed rgba(255, 255, 255, .3); background: transparent; color: var(--fl-texto);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
}
:is(#screen-gerar, #screen-gemini) .cena-nova:disabled { opacity: .45; cursor: not-allowed; }
:is(#screen-gerar, #screen-gemini) .cena-card {
  min-width: 0; padding: 0 0 10px; overflow: hidden; cursor: pointer; text-align: left;
  background: var(--fl-painel); border: 1px solid var(--fl-borda); border-radius: 14px; color: var(--fl-texto);
  display: flex; flex-direction: column; gap: 4px; font-family: inherit;
}
:is(#screen-gerar, #screen-gemini) .cena-card:disabled { opacity: .45; cursor: not-allowed; }
:is(#screen-gerar, #screen-gemini) .cena-card-tira { height: 76px; display: flex; gap: 2px; background: #000; }
:is(#screen-gerar, #screen-gemini) .cena-card-tira i { flex: 1; background-color: var(--fl-campo); background-size: cover; background-position: center; }
:is(#screen-gerar, #screen-gemini) .cena-card strong { font-size: 13px; padding: 4px 10px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#screen-gerar, #screen-gemini) .cena-card small { font-size: 12px; color: var(--fl-texto-3); padding: 0 10px; }
:is(#screen-gerar, #screen-gemini) .cena-card small b { color: #81c995; font-weight: 600; }
/* O lapis na capa (pedido dele, 03/10): circulo escuro por cima da foto, que
   aparece em qualquer imagem. 34 px, com 6 px a mais de toque em volta. */
:is(#screen-gerar, #screen-gemini) .cena-card-caixa { position: relative; display: flex; min-width: 0; }
:is(#screen-gerar, #screen-gemini) .cena-card-caixa > .cena-card { flex: 1; }
:is(#screen-gerar, #screen-gemini) .cena-card-lapis {
  position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(0, 0, 0, .62); color: #fff;
}
:is(#screen-gerar, #screen-gemini) .cena-card-lapis::before { content: ""; position: absolute; inset: -6px; }
:is(#screen-gerar, #screen-gemini) .cena-card-lapis .gerar-ico { width: 16px; height: 16px; }
:is(#screen-gerar, #screen-gemini) .cena-card-lapis:hover { background: rgba(0, 0, 0, .8); }
:is(#screen-gerar, #screen-gemini) .cena-card-lapis:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* A janela "Nome da cena" fica no ALTO: no celular o teclado sobe e cobriria
   uma janela de baixo. 16 px no campo: com menos, o iPhone da zoom sozinho. */
:is(#screen-gerar, #screen-gemini) .gerar-escolha.cena-renomear { align-items: flex-start; padding: 12vh 16px 0; }
:is(#screen-gerar, #screen-gemini) .cena-renomear .gerar-escolha-caixa { max-width: 420px; padding: 18px 16px 16px; border-radius: 22px; border-bottom: 1px solid var(--fl-borda); }
:is(#screen-gerar, #screen-gemini) .cena-renomear h3 { font-size: 1.05rem; font-weight: 600; }
:is(#screen-gerar, #screen-gemini) .cena-renomear-campo {
  width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); outline: none;
  background: var(--fl-campo); color: var(--fl-texto); font-family: inherit; font-weight: 600; font-size: 16px;
}
:is(#screen-gerar, #screen-gemini) .cena-renomear-campo:focus { border-color: rgba(255, 255, 255, .45); }
:is(#screen-gerar, #screen-gemini) .cena-renomear-botoes { display: flex; justify-content: flex-end; gap: 8px; }
:is(#screen-gerar, #screen-gemini) .cena-renomear-botoes button {
  min-height: 42px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px;
}
:is(#screen-gerar, #screen-gemini) .cena-renomear-cancelar { background: var(--fl-campo-2); color: var(--fl-texto); }
:is(#screen-gerar, #screen-gemini) .cena-renomear-salvar { background: var(--fl-clara); color: var(--fl-clara-texto); }
/* Os botoes da cena no video pronto: "Estender" e "Adicionar à cena", um em
   cada linha (lado a lado, o "Adicionar à cena" quebrava em 360 px). */
:is(#screen-gerar, #screen-gemini) .cena-acoes { display: grid; grid-template-columns: 1fr; gap: 8px; }
:is(#screen-gerar, #screen-gemini) .cena-acoes .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* Na janela de escolher video: a duracao em cima da miniatura. */
:is(#screen-gerar, #screen-gemini) .cena-escolha-item { position: relative; }
:is(#screen-gerar, #screen-gemini) .cena-escolha-item span {
  position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 999px;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; font-weight: 700;
}
:is(#screen-gerar, #screen-gemini) .cena-escolha-item.sem-capa {
  display: flex; align-items: center; justify-content: center; padding: 6px; text-align: center; font-size: 11px; color: var(--fl-texto-2);
}

/* ── O LAYOUT DO FLOW (06/10) ────────────────────────────────────────────────
   Pedido dele: os clientes de uma afiliada, acostumados com o Flow, estranharam
   a tela do gerador. Agora ela e o PROJETO do Flow (prints dele de 06/10):
   - a barra de cima (a casinha, a marca, o plano e a bolinha da conta);
   - a lateral Tudo / Imagens / Vídeos / Cenas (no celular, o "Tudo ▾" ao lado da busca);
   - as criacoes ocupando a tela, em cartoes altos;
   - a caixa "O que você quer criar?" presa embaixo, com o "+", a pilula
     dos ajustes e a seta; os ajustes abrem numa janelinha em cima dela;
   - tocar numa criacao abre em tela cheia (o visor).
   Tudo preso a :is(#screen-gerar, #screen-gemini). */
:is(#screen-gerar, #screen-gemini) .fl-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
:is(#screen-gerar, #screen-gemini) .gerar-wrap { min-height: 100vh; min-height: 100dvh; }

/* A barra de cima. */
:is(#screen-gerar, #screen-gemini) .fl-topo { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 8px; background: #000; }
:is(#screen-gerar, #screen-gemini) .fl-icone {
  width: 40px; height: 40px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--fl-texto);
}
:is(#screen-gerar, #screen-gemini) .fl-icone .gerar-ico { width: 22px; height: 22px; }
:is(#screen-gerar, #screen-gemini) .fl-icone:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 1px; }
@media (hover: hover) { :is(#screen-gerar, #screen-gemini) .fl-icone:hover { background: rgba(255, 255, 255, .08); } }
/* A marca dele (01/10) na barra, no lugar do nome do projeto do Flow: menor
   que no topo de antes (la ela ficava sozinha numa linha), com o mesmo brilho
   e o risco de arco-iris embaixo. */
:is(#screen-gerar, #screen-gemini) .fl-topo .gerar-marca { padding: 0; margin: 0 auto 0 4px; gap: 8px; justify-content: flex-start; }
:is(#screen-gerar, #screen-gemini) .fl-topo .gerar-marca-g { width: 24px; height: 24px; }
:is(#screen-gerar, #screen-gemini) .fl-topo .gerar-marca-flow { font-size: 1.3rem; }
:is(#screen-gerar, #screen-gemini) .fl-topo .gerar-marca::after { width: 120px; bottom: -8px; }
/* No celular, um pouco menor (06/10, ele: "pode diminuir um pouco pra ficar
   agradavel no celular"): G de 24 pra 20 px e FLOW de 1,3 pra 1,1rem — do
   tamanho da casinha do lado. No computador fica como esta. */
@media (max-width: 899px) {
  :is(#screen-gerar, #screen-gemini) .fl-topo .gerar-marca { gap: 7px; }
  :is(#screen-gerar, #screen-gemini) .fl-topo .gerar-marca-g { width: 20px; height: 20px; }
  :is(#screen-gerar, #screen-gemini) .fl-topo .gerar-marca-flow { font-size: 1.1rem; }
  :is(#screen-gerar, #screen-gemini) .fl-topo .gerar-marca::after { width: 100px; bottom: -7px; }
}
/* O "PRO" e a bolinha da conta do Flow: o plano dele e a inicial do nome. */
:is(#screen-gerar, #screen-gemini) .fl-conta {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 4px 4px 4px 6px; border-radius: 999px; background: #1b1b1c;
}
:is(#screen-gerar, #screen-gemini) .fl-plano {
  padding: 4px 8px; border-radius: 8px; background: #2c2d2f; color: #e3e3e3;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; line-height: 1.2;
}
:is(#screen-gerar, #screen-gemini) .fl-avatar {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(#0b5b4b, #0b5b4b) padding-box,
    conic-gradient(#4285F4, #34A853, #FBBC05, #EA4335, #4285F4) border-box;
  color: #fff; font-size: 13px; font-weight: 600; text-transform: uppercase;
}

/* O corpo: no celular, a fileira em cima da grade; na tela larga, a lateral. */
:is(#screen-gerar, #screen-gemini) .fl-corpo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
:is(#screen-gerar, #screen-gemini) .fl-lado {
  display: flex; gap: 6px; margin: 0; padding: 2px 12px 12px; overflow-x: auto; scrollbar-width: none;
  background: transparent; border: 0; border-radius: 0;
}
:is(#screen-gerar, #screen-gemini) .fl-lado::-webkit-scrollbar { display: none; }
:is(#screen-gerar, #screen-gemini) .fl-lado button {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border: 0; border-radius: 999px; background: transparent; color: var(--fl-texto-2); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
}
:is(#screen-gerar, #screen-gemini) .fl-lado button.on { background: #2e2f31; color: #fff; }
:is(#screen-gerar, #screen-gemini) .fl-lado button:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 1px; }
:is(#screen-gerar, #screen-gemini) .fl-lado .gerar-ico { width: 18px; height: 18px; }
/* No celular estreito a fileira vai so com os nomes: com os icones, os 4 nao
   cabiam a 390 px. */
@media (max-width: 479px) { :is(#screen-gerar, #screen-gemini) .fl-lado .gerar-ico { display: none; } }
@media (hover: hover) { :is(#screen-gerar, #screen-gemini) .fl-lado button:not(.on):hover { background: #1b1b1c; color: var(--fl-texto); } }

:is(#screen-gerar, #screen-gemini) .fl-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 12px; }
:is(#screen-gerar, #screen-gemini) .gerar-historico-wrap { flex: 1; display: flex; flex-direction: column; }

@media (min-width: 900px) {
  :is(#screen-gerar, #screen-gemini) .fl-topo { position: sticky; top: 0; z-index: 30; padding: 12px 20px 12px 14px; }
  :is(#screen-gerar, #screen-gemini) .fl-corpo { flex-direction: row; }
  :is(#screen-gerar, #screen-gemini) .fl-lado {
    flex-direction: column; gap: 4px; width: 210px; flex-shrink: 0; padding: 4px 12px 16px;
    position: sticky; top: 64px; align-self: flex-start; overflow: visible;
  }
  :is(#screen-gerar, #screen-gemini) .fl-lado button { min-height: 44px; padding: 0 14px; border-radius: 12px; gap: 14px; font-size: 14px; color: var(--fl-texto); }
  :is(#screen-gerar, #screen-gemini) .fl-principal { padding: 4px 24px 0 8px; }
}

/* O projeto vazio: a florzinha de pixel e o convite, no meio. */
:is(#screen-gerar, #screen-gemini) .fl-vazio {
  flex: 1; min-height: 42vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  color: #fff; text-align: center; padding: 24px 12px;
}
:is(#screen-gerar, #screen-gemini) .fl-vazio[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .fl-vazio svg { width: 44px; height: 52px; }
:is(#screen-gerar, #screen-gemini) .fl-vazio p { color: #c4c7c5; font-size: 1.15rem; font-weight: 400; }
@media (min-width: 900px) { :is(#screen-gerar, #screen-gemini) .fl-vazio p { font-size: 1.3rem; } }
/* Arrastando uma foto por cima da tela (06/10, o "drop media" do Flow). */
:is(#screen-gerar, #screen-gemini).fl-soltando .fl-caixa { box-shadow: 0 0 0 2px #8ab4f8; }

/* A doca: a caixa presa embaixo, com o motivo e o erro em cima dela. O
   degrade deixa a grade sumir por baixo, como no Flow. */
:is(#screen-gerar, #screen-gemini) .fl-doca {
  position: sticky; bottom: 0; z-index: 25; margin-top: 12px;
  padding: 18px 0 calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 16px);
}
@media (min-width: 900px) { :is(#screen-gerar, #screen-gemini) .fl-doca { width: 100%; max-width: 640px; align-self: center; padding-bottom: 18px; } }
:is(#screen-gerar, #screen-gemini) .fl-motivo, :is(#screen-gerar, #screen-gemini) .fl-doca > .gerar-erro {
  margin: 0 6px 8px; font-size: 13px; line-height: 1.4; text-align: center;
}
:is(#screen-gerar, #screen-gemini) .fl-motivo { color: var(--fl-texto-2); }
:is(#screen-gerar, #screen-gemini) .fl-motivo[hidden] { display: none; }
/* O uso do dia em VIDEOS (09/10): uma faixa fina embaixo do aviso do Google
   (11/10; antes ficava em cima da caixa) — os videos que restam na frente, as
   criacoes e a virada do dia do lado (quebra linha no celular estreito), a
   barra do que sobra, e a dica do x4 quando ele esta no x1. */
:is(#screen-gerar, #screen-gemini) .fl-uso {
  display: grid; gap: 6px; margin: 8px 4px 0; padding: 8px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
}
:is(#screen-gerar, #screen-gemini) .fl-uso[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .fl-uso-linha { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
:is(#screen-gerar, #screen-gemini) .fl-uso-linha b { color: #fff; font-size: .86rem; font-weight: 700; }
:is(#screen-gerar, #screen-gemini) .fl-uso-linha small { color: var(--fl-texto-2); font-size: .74rem; }
:is(#screen-gerar, #screen-gemini) .fl-uso-trilho { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
:is(#screen-gerar, #screen-gemini) .fl-uso-trilho i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8ab4f8, #c58af9); }
:is(#screen-gerar, #screen-gemini) .fl-uso.pouco .fl-uso-trilho i { background: #fdd663; }
:is(#screen-gerar, #screen-gemini) .fl-uso.acabou { border-color: rgba(253, 214, 99, .35); }
:is(#screen-gerar, #screen-gemini) .fl-uso.acabou .fl-uso-linha b { color: #fde293; }
:is(#screen-gerar, #screen-gemini) .fl-uso-dica { color: #fde293; font-size: .74rem; line-height: 1.35; }
:is(#screen-gerar, #screen-gemini) .fl-uso-dica[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .fl-caixa {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 10px 10px 14px; border-radius: 26px;
  background: #1b1c1d; border: 1px solid rgba(255, 255, 255, .09);
}
:is(#screen-gerar, #screen-gemini) .fl-caixa:focus-within { border-color: rgba(255, 255, 255, .2); }
:is(#screen-gerar, #screen-gemini) .fl-caixa-pe { display: flex; align-items: center; gap: 8px; min-width: 0; }
:is(#screen-gerar, #screen-gemini) .fl-espaco { flex: 1; min-width: 0; }
:is(#screen-gerar, #screen-gemini) .fl-redondo {
  width: 36px; height: 36px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: #2a2b2d; color: var(--fl-texto);
}
:is(#screen-gerar, #screen-gemini) .fl-redondo[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .fl-redondo:disabled { opacity: .4; cursor: not-allowed; }
:is(#screen-gerar, #screen-gemini) .fl-redondo:focus-visible, :is(#screen-gerar, #screen-gemini) .fl-resumo:focus-visible, :is(#screen-gerar, #screen-gemini) .fl-trocar:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .55); outline-offset: 2px;
}
/* A seta acende (branca) quando ha texto pra criar. */
:is(#screen-gerar, #screen-gemini) .fl-enviar.pronta:not(:disabled) { background: var(--fl-clara); color: var(--fl-clara-texto); }
:is(#screen-gerar, #screen-gemini) .fl-enviar.indo .gerar-ico { animation: flGira 1s linear infinite; }
@keyframes flGira { to { transform: rotate(360deg); } }
:is(#screen-gerar, #screen-gemini) .fl-resumo {
  min-width: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border: 0; border-radius: 999px; background: #2a2b2d; color: var(--fl-texto); cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
}
:is(#screen-gerar, #screen-gemini) .fl-resumo[aria-expanded="true"] { background: #3a3b3d; }
:is(#screen-gerar, #screen-gemini) .fl-resumo-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#screen-gerar, #screen-gemini) .fl-resumo-forma { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; }
:is(#screen-gerar, #screen-gemini) .fl-trocar {
  width: 32px; height: 32px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--fl-texto);
}
:is(#screen-gerar, #screen-gemini) #gerar-fotos-elementos:not(.com-foto) { display: none; }
/* As referencias (19/10, ate 10 na Imagem): uma fileira que rola de lado, como
   no Flow — no celular nao toma o lugar do texto. O respiro de cima e da direita
   e do X de tirar (ele sai 6 px pra fora da foto). */
:is(#screen-gerar, #screen-gemini) #gerar-fotos-elementos {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 7px 7px 2px 0;
  scrollbar-width: thin; overscroll-behavior-x: contain;
}
:is(#screen-gerar, #screen-gemini) #gerar-fotos-elementos .gerar-foto { flex-shrink: 0; }
:is(#screen-gerar, #screen-gemini) .gerar-dica-fotos { margin: 4px 0 0; font-size: 12px; color: var(--fl-texto-2); }
:is(#screen-gerar, #screen-gemini) .gerar-dica-fotos[hidden] { display: none; }

/* A janelinha dos ajustes, em cima da caixa (no Flow ela abre em cima da
   pilula). No celular ocupa a largura da caixa; na tela larga, 320 px a direita. */
:is(#screen-gerar, #screen-gemini) .fl-ajustes {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 40;
  display: flex; flex-direction: column; gap: 8px; padding: 8px;
  max-height: min(70vh, 600px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: 22px; background: #1b1c1d; border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .65);
}
:is(#screen-gerar, #screen-gemini) .fl-ajustes[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .fl-ajustes .gerar-segmento { background: #262729; border-radius: 14px; padding: 3px; gap: 3px; }
:is(#screen-gerar, #screen-gemini) .fl-ajustes .gerar-segmento button { min-height: 38px; font-size: 13.5px; font-weight: 600; }
:is(#screen-gerar, #screen-gemini) .fl-ajustes .gerar-formatos button { min-height: 50px; font-size: 12px; }
:is(#screen-gerar, #screen-gemini) .fl-ajustes #gerar-op-modelo,
:is(#screen-gerar, #screen-gemini) .fl-ajustes #gerar-op-modelo-video { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 8px; }
:is(#screen-gerar, #screen-gemini) .fl-ajustes .gerar-dica-modo { color: var(--fl-texto-3); }
:is(#screen-gerar, #screen-gemini) .fl-ajustes .gerar-omni-saldo, :is(#screen-gerar, #screen-gemini) .fl-ajustes .gerar-omni-comprar { margin-left: 4px; margin-right: 4px; }
:is(#screen-gerar, #screen-gemini) .fl-creditos { text-align: center; font-size: 12.5px; color: var(--fl-texto-2); padding: 2px 4px 4px; }
:is(#screen-gerar, #screen-gemini) #gerar-creditos-n { color: var(--fl-texto); text-decoration: underline; text-underline-offset: 2px; }

/* Os cartoes da grade: o pedido andando, o "Pronto!" verde e o que falhou. */
:is(#screen-gerar, #screen-gemini) .gerar-item.andando, :is(#screen-gerar, #screen-gemini) .gerar-item.revelando {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px;
  padding: 10px; text-align: left; color: var(--fl-texto);
  background: linear-gradient(120deg, #1b1c1d 30%, #2a2b2d 50%, #1b1c1d 70%) 0 0 / 300% 100%;
  animation: flAndando 2.4s ease-in-out infinite;
}
:is(#screen-gerar, #screen-gemini) .gerar-item.revelando { animation: none; background: #16241b; }
@keyframes flAndando { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
:is(#screen-gerar, #screen-gemini) .gerar-item.andando .gerar-pulso, :is(#screen-gerar, #screen-gemini) .gerar-item.revelando .gerar-pulso { width: 12px; height: 12px; margin-bottom: auto; }
:is(#screen-gerar, #screen-gemini) .gerar-item .fl-item-titulo { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #fff; }
:is(#screen-gerar, #screen-gemini) .gerar-item .fl-item-sub {
  font-size: 11px; line-height: 1.35; color: var(--fl-texto-2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
:is(#screen-gerar, #screen-gemini) .gerar-item.falhou { color: #f28b82; background: #241a1a; }
/* O porque curto embaixo do "Falhou" (31/10): menor e apagado; tocar abre o visor com o motivo inteiro. */
:is(#screen-gerar, #screen-gemini) .gerar-item.sem-video.falhou { flex-direction: column; gap: 4px; }
:is(#screen-gerar, #screen-gemini) .gerar-item.falhou .fl-motivo { display: block; color: var(--fl-texto-3); font-size: 10.5px; line-height: 1.3; }
/* A PORCENTAGEM do pedido andando (07/10, pedido dele): o numero grande no
   cartao, a barra na cor da etapa (a mesma da bolinha: amarela na fila, azul
   enviando, branca gerando, verde pronto) e, no visor, o titulo com o numero e
   a barra embaixo. A barra desliza de um segundo pro outro. */
:is(#screen-gerar, #screen-gemini) .gerar-item .fl-item-pct { font-size: 22px; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
:is(#screen-gerar, #screen-gemini) .fl-barra { display: block; width: 100%; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; }
:is(#screen-gerar, #screen-gemini) .fl-barra > span { display: block; height: 100%; border-radius: 99px; background: var(--fl-clara); transition: width .9s linear; }
:is(#screen-gerar, #screen-gemini) .fl-barra.fila > span { background: #fdd663; }
:is(#screen-gerar, #screen-gemini) .fl-barra.enviando > span { background: #8ab4f8; }
:is(#screen-gerar, #screen-gemini) .fl-barra.pronto > span { background: #81c995; }
:is(#screen-gerar, #screen-gemini) .gerar-estado .fl-barra { width: min(320px, 100%); height: 6px; margin: 8px 0 6px; }
:is(#screen-gerar, #screen-gemini) .gerar-estado .fl-pct-n { font-variant-numeric: tabular-nums; }
:is(#screen-gerar, #screen-gemini) .gerar-estado[data-pct-id], :is(#screen-gerar, #screen-gemini) .gerar-estado:has(.fl-barra) { align-items: flex-start; }
:is(#screen-gerar, #screen-gemini) .gerar-estado[data-pct-id] .gerar-pulso, :is(#screen-gerar, #screen-gemini) .gerar-estado:has(.fl-barra) .gerar-pulso { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { :is(#screen-gerar, #screen-gemini) .fl-barra > span { transition: none; } }
@media (prefers-reduced-motion: reduce) { :is(#screen-gerar, #screen-gemini) .gerar-item.andando { animation: none; } }
@media (hover: hover) {
  :is(#screen-gerar, #screen-gemini) .gerar-item img { transition: filter .15s; }
  :is(#screen-gerar, #screen-gemini) .gerar-item:hover img { filter: brightness(.82); }
}
:is(#screen-gerar, #screen-gemini) .gerar-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* O visor: a criacao aberta em tela cheia (06/10), como o Flow. Mora no
   #app (z-index 1): com ele aberto, a faixa de instalar sai (regra la em cima). */
:is(#screen-gerar, #screen-gemini) .fl-visor {
  position: fixed; inset: 0; z-index: 940; display: flex; flex-direction: column;
  background: #000; overflow-y: auto; overscroll-behavior: contain;
}
:is(#screen-gerar, #screen-gemini) .fl-visor[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .fl-visor-topo {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 8px; background: rgba(0, 0, 0, .88);
}
:is(#screen-gerar, #screen-gemini) .fl-visor-titulo {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 500; color: var(--fl-texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-atual {
  width: 100%; max-width: 760px; margin: 0 auto; flex: 1;
  padding: 4px 16px calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px; background: none; border: 0;
}
/* A criacao grande no meio, inteira (sem cortar), e os botoes embaixo em
   pilulas, como as acoes do Flow. */
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-videos { display: flex; flex-direction: column; gap: 14px; }
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-video-bloco { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-video-bloco > .gerar-imagem,
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-video-bloco > .gerar-video,
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-video-bloco > .gerar-mini-espera,
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-video-bloco > .gerar-estado,
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-video-bloco > .gerar-baixar-bloco { flex: 0 0 100%; }
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-imagem, :is(#screen-gerar, #screen-gemini) .fl-visor .gerar-video, :is(#screen-gerar, #screen-gemini) .fl-visor .gerar-mini-espera {
  width: auto; max-width: 100%; max-height: 64vh; margin: 0 auto 6px; object-fit: contain; background: #000;
}
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-video { width: 100%; }
/* O ZOOM DA IMAGEM (10/11): a caixa recorta a imagem aumentada (nao cobre os botoes). 1 dedo sem zoom
   segue rolando o visor (pan-y); com zoom, o arrasto e da imagem (ver ligarZoomVisor). */
.gerar-zoom-caixa { flex: 0 0 100%; display: flex; justify-content: center; overflow: hidden; border-radius: 16px; touch-action: pan-y; }
.gerar-zoom-caixa :is(.gerar-imagem, .gerar-video) { transform-origin: center center; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.gerar-zoom-caixa .gerar-imagem.zoom-ativo { cursor: zoom-out; }
.gerar-zoom-caixa :is(.gerar-imagem, .gerar-video).zoom-anima { transition: transform .2s ease; }
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-zoom-caixa .gerar-imagem { cursor: zoom-in; }
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-zoom-caixa .gerar-imagem.zoom-ativo { cursor: zoom-out; }
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-video-bloco .btn,
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-acoes .btn {
  flex: 0 1 auto; width: auto; min-width: 0; min-height: 42px; padding: 0 18px; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-baixar-bloco { align-items: center; }
:is(#screen-gerar, #screen-gemini) .fl-visor .cena-acoes { display: contents; }
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-acoes { justify-content: center; }
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-hd { width: auto; }
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-dica { text-align: center; margin: 0; }
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-prompt-eco { background: #141414; color: var(--fl-texto-2); }
:is(#screen-gerar, #screen-gemini) .fl-visor .gerar-estado { justify-content: center; text-align: left; padding: 28px 8px; }
/* x2..x4: as miniaturas em cima trocam a que esta grande (como o historico
   no alto do Flow). */
:is(#screen-gerar, #screen-gemini) .fl-tira { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
:is(#screen-gerar, #screen-gemini) .fl-tira button {
  width: 46px; height: 46px; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: 10px; border: 2px solid transparent; background: #1e1f20; color: var(--fl-texto);
  font-family: inherit; font-size: 13px; font-weight: 700;
}
:is(#screen-gerar, #screen-gemini) .fl-tira button.on { border-color: #fff; }
:is(#screen-gerar, #screen-gemini) .fl-tira img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── O PLANO DO TOPO (06/10) ─────────────────────────────────────────────────
   2K, 4K e 1080p so pro plano mais caro. Pra quem nao tem, o botao aparece no
   visor do mesmo jeito, com o cadeado na frente e a borda dourada tracejada
   (pedido dele: "todo mundo vai conseguir visualizar", e e a venda); tocar
   abre a janela do plano — a mesma cara da do Omni, com a lista do que da. */
:is(#screen-gerar, #screen-gemini) .gerar-trancado {
  color: var(--fl-texto); background: rgba(253, 214, 99, .05); border: 1px dashed rgba(253, 214, 99, .5);
}
:is(#screen-gerar, #screen-gemini) .gerar-trancado .gerar-cadeado { font-size: 13px; line-height: 1; }
@media (hover: hover) { :is(#screen-gerar, #screen-gemini) .gerar-trancado:hover:not(:disabled) { background: rgba(253, 214, 99, .1); border-color: rgba(253, 214, 99, .7); } }
.omni-compra .topo-compra-lista { width: 100%; margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; text-align: left; }
.omni-compra .topo-compra-lista li {
  display: flex; flex-direction: column; gap: 1px; padding: 10px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07);
}
/* Os dois degraus (21/10): a janela do 2K mostra so o item do 2K; a do topo,
   pra quem ja tem o 2K, so o 4K e o 1080p. O display do item venceria o hidden. */
.omni-compra .topo-compra-lista li[hidden] { display: none; }
.omni-compra .topo-compra-lista b { color: #fff; font-size: .95rem; }
.omni-compra .topo-compra-lista span { color: var(--fl-texto-2); font-size: .8rem; }

/* ── OS EXTRAS (06/10, pedido dele) ──────────────────────────────────────────
   A faixa "Seus extras" na tela inicial (verde, pra nao confundir com a do
   Omni), a janela com o uso de hoje, um cartao por extra (o nome, o saldo numa
   pilula, pra que serve e os pacotes) e o extrato com abas. Os pacotes sao
   botoes de dois andares — a quantidade grande e o preco embaixo —, tres por
   linha ate no celular de 320. */
.omni-compra .extras-lista { width: 100%; display: grid; gap: 10px; text-align: left; }
.omni-compra .extras-item {
  display: grid; gap: 6px; padding: 12px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
}
.omni-compra .extras-item.foco { border-color: rgba(197, 138, 249, .7); box-shadow: 0 0 0 3px rgba(197, 138, 249, .15); }
.omni-compra .extras-item-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.omni-compra .extras-item-topo b { color: #fff; font-size: .98rem; }
.omni-compra .extras-saldo {
  flex-shrink: 0; min-width: 40px; padding: 3px 10px; border-radius: 999px; text-align: center;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--fl-borda);
  font-weight: 800; font-size: .92rem; font-variant-numeric: tabular-nums; color: #fff;
}
.omni-compra .extras-item-texto { font-size: .8rem; line-height: 1.4; color: var(--fl-texto-2); }
.omni-compra .extras-item-fechado { font-size: .8rem; color: var(--fl-texto-3); }
.omni-compra .extras-pacotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.omni-compra .extras-pacotes[hidden] { display: none; }
.omni-compra .extras-pacote {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px;
  padding: 6px 4px; border-radius: 14px; text-decoration: none; cursor: pointer; border: 1px solid transparent;
  background: linear-gradient(var(--fl-campo), var(--fl-campo)) padding-box,
    linear-gradient(135deg, rgba(138, 180, 248, .8), rgba(197, 138, 249, .8)) border-box;
}
.omni-compra .extras-pacote b { font-size: 1.15rem; font-weight: 800; line-height: 1.15; color: #fff; }
.omni-compra .extras-pacote span { font-size: .74rem; color: var(--fl-texto-2); white-space: nowrap; }
.omni-compra .extras-pacote.fechado { cursor: default; opacity: .45; background: rgba(255, 255, 255, .03); border-color: var(--fl-borda); }
.omni-compra .extras-pacote:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) { .omni-compra a.extras-pacote:hover { box-shadow: 0 6px 18px rgba(197, 138, 249, .25); } }
/* O Omni com mais de um pacote: os botoes no lugar do "Comprar". */
.omni-compra-pacotes { order: 2; }
.omni-compra .extras-extrato { width: 100%; display: grid; gap: 8px; }
.omni-compra .extras-extrato[hidden] { display: none; }
.omni-compra .extras-abas { display: flex; flex-wrap: wrap; gap: 6px; }
.omni-compra .extras-abas button {
  min-height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: .8rem; font-weight: 700;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--fl-borda); color: var(--fl-texto-2);
}
.omni-compra .extras-abas button[aria-selected="true"] { background: rgba(197, 138, 249, .16); border-color: rgba(197, 138, 249, .55); color: #fff; }
.omni-compra .extras-abas button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.omni-compra .extras-tag {
  display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 999px; vertical-align: 1px;
  background: rgba(255, 255, 255, .07); font-size: .68rem; font-weight: 700; color: var(--fl-texto-2);
}
/* O cadeado com o AVULSO embaixo do "Quero o plano". */
.omni-compra .topo-compra-avulso { order: 2; width: 100%; display: grid; gap: 8px; }
.omni-compra .topo-compra-avulso[hidden] { display: none; }
.omni-compra .topo-compra-ou { font-size: .8rem; line-height: 1.4; color: var(--fl-texto-2); }
/* O "Comprar criações extras" na frase do limite do dia. */
:is(#screen-gerar, #screen-gemini) .gerar-erro-acao {
  display: inline-flex; align-items: center; min-height: 34px; margin: 6px 0 0 8px; padding: 0 12px; border-radius: 999px;
  border: 0; cursor: pointer; font-family: inherit; font-size: .8rem; font-weight: 800; color: #1f1f1f;
  background: linear-gradient(135deg, #81c995, #8ab4f8);
}

/* ── O FLOW NO CELULAR (06/10) ────────────────────────────────────────────────
   Os prints dele do Flow no iPhone: a busca em cima (com o "Tudo ▾" no lugar
   da fileira), a grade com o formato de cada criacao, a janelinha dos ajustes
   presa a pilula (nao da largura toda), o modelo numa lista do Flow, o aviso
   embaixo da caixa e a janela de escolher foto em lista. */
:is(#screen-gerar, #screen-gemini) .gerar-vazio { flex: 1 1 100%; }

/* A busca: no celular, a segunda linha da barra, com o "Tudo ▾" na frente; no
   computador, no meio da barra (la a lateral faz o papel do "Tudo ▾"). */
:is(#screen-gerar, #screen-gemini) .fl-topo { flex-wrap: wrap; row-gap: 8px; }
:is(#screen-gerar, #screen-gemini) .fl-busca { order: 3; flex: 1 1 100%; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 4px; }
:is(#screen-gerar, #screen-gemini) .fl-filtro { position: relative; flex-shrink: 0; }
:is(#screen-gerar, #screen-gemini) .fl-filtro-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px 0 12px; border: 0; border-radius: 14px;
  background: #1f1f20; color: var(--fl-texto); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
:is(#screen-gerar, #screen-gemini) .fl-filtro-btn:focus-visible, :is(#screen-gerar, #screen-gemini) .fl-modelo-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: 2px; }
:is(#screen-gerar, #screen-gemini) .fl-filtro-ico { display: inline-flex; }
:is(#screen-gerar, #screen-gemini) .fl-caret { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
:is(#screen-gerar, #screen-gemini) .fl-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; min-width: 210px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; border-radius: 18px; background: #262729; box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
}
:is(#screen-gerar, #screen-gemini) .fl-menu[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .fl-menu button {
  display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px;
  background: transparent; color: var(--fl-texto); font-family: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
:is(#screen-gerar, #screen-gemini) .fl-menu button.on { background: #37383b; }
:is(#screen-gerar, #screen-gemini) .fl-campo-busca {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: #1f1f20; color: var(--fl-texto-2); cursor: text;
}
/* 16 px: com menos, o iPhone da zoom sozinho ao tocar no campo. */
:is(#screen-gerar, #screen-gemini) .fl-campo-busca input {
  flex: 1; min-width: 0; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--fl-texto); font-family: inherit; font-size: 16px;
}
:is(#screen-gerar, #screen-gemini) .fl-campo-busca input::placeholder { color: var(--fl-texto-3); }
:is(#screen-gerar, #screen-gemini) .fl-campo-busca:focus-within { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
/* No celular a lateral some: o "Tudo ▾" faz o papel dela. */
@media (max-width: 899px) { :is(#screen-gerar, #screen-gemini) .fl-lado { display: none; } }
@media (min-width: 900px) {
  :is(#screen-gerar, #screen-gemini) .fl-topo { flex-wrap: nowrap; }
  :is(#screen-gerar, #screen-gemini) .fl-topo .gerar-marca { margin-right: 0; }
  :is(#screen-gerar, #screen-gemini) .fl-busca { order: 0; flex: 0 1 440px; margin: 0 auto; padding: 0; }
  :is(#screen-gerar, #screen-gemini) .fl-filtro { display: none; }
  :is(#screen-gerar, #screen-gemini) .fl-campo-busca { min-height: 40px; }
}

/* A janelinha dos ajustes presa a pilula, como a do Flow: a borda da direita
   na linha da pilula (a seta e a folga da caixa ficam fora), ~300 px. No
   celular bem estreito, a largura da caixa. */
:is(#screen-gerar, #screen-gemini) .fl-ajustes { left: auto; right: 54px; width: min(300px, calc(100% - 54px)); }
@media (max-width: 359px) { :is(#screen-gerar, #screen-gemini) .fl-ajustes { left: 0; right: 0; width: auto; } }

/* O modelo numa lista do Flow: a barra com o nome e a setinha; a lista abre
   POR CIMA da janelinha, do topo dela, como no Flow. */
:is(#screen-gerar, #screen-gemini) .fl-modelo-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 0 10px 0 14px;
  border: 0; border-radius: 14px; background: #262729; color: var(--fl-texto); cursor: pointer; text-align: left;
  font-family: inherit; font-size: 14px; font-weight: 600;
}
:is(#screen-gerar, #screen-gemini) .fl-modelo-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#screen-gerar, #screen-gemini) .fl-modelo-lista {
  position: absolute; left: 8px; right: 8px; top: 8px; z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  border-radius: 18px; background: #2a2b2d; box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
:is(#screen-gerar, #screen-gemini) .fl-modelo-lista[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .fl-modelo-lista button {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 46px; padding: 6px 14px;
  border: 0; border-radius: 12px; background: transparent; color: var(--fl-texto); cursor: pointer; text-align: left;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.25;
}
:is(#screen-gerar, #screen-gemini) .fl-modelo-lista button.on { background: #3a3b3e; }
:is(#screen-gerar, #screen-gemini) .fl-modelo-lista button span { font-size: 15px; font-weight: 600; }
:is(#screen-gerar, #screen-gemini) .fl-modelo-lista button small { font-size: 12px; font-weight: 500; color: var(--fl-texto-3); }
:is(#screen-gerar, #screen-gemini) .fl-modelo-lista button:focus-visible { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: -2px; }

/* O aviso do Flow embaixo da caixa. */
:is(#screen-gerar, #screen-gemini) .fl-aviso { margin: 6px 8px 0; font-size: 11px; line-height: 1.35; color: var(--fl-texto-3); }

/* A janela de escolher foto em LISTA, como a do Flow: a miniatura, o nome e
   o tipo (Imagem / Envio). A da cena ("Adicionar vídeo") segue em grade. */
:is(#screen-gerar, #screen-gemini) #gerar-escolha .gerar-escolha-grade { display: flex; flex-direction: column; gap: 2px; }
:is(#screen-gerar, #screen-gemini) #gerar-escolha .gerar-escolha-item {
  aspect-ratio: auto; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 6px 8px; overflow: visible;
  border-radius: 14px; background: transparent; color: var(--fl-texto); text-align: left; font-family: inherit;
}
@media (hover: hover) { :is(#screen-gerar, #screen-gemini) #gerar-escolha .gerar-escolha-item:hover { background: #262729; } }
:is(#screen-gerar, #screen-gemini) #gerar-escolha .gerar-escolha-item img { width: 52px; height: 52px; flex-shrink: 0; border-radius: 10px; object-fit: cover; }
:is(#screen-gerar, #screen-gemini) #gerar-escolha .fl-escolha-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:is(#screen-gerar, #screen-gemini) #gerar-escolha .fl-escolha-txt b { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#screen-gerar, #screen-gemini) #gerar-escolha .fl-escolha-txt small { font-size: 13px; color: var(--fl-texto-2); }
/* Varias de uma vez (19/10): so a LISTA rola — o titulo, as abas, o texto de
   cima e o "Usar N fotos" ficam a vista. A bolinha do lado de cada foto mostra
   a ordem (1, 2, 3...); cheio, as outras ficam apagadas. */
:is(#screen-gerar, #screen-gemini) #gerar-escolha .gerar-escolha-caixa { overflow: hidden; }
:is(#screen-gerar, #screen-gemini) #gerar-escolha .gerar-escolha-grade { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
:is(#screen-gerar, #screen-gemini) #gerar-escolha .gerar-escolha-item { flex-shrink: 0; }
:is(#screen-gerar, #screen-gemini) #gerar-escolha .gerar-escolha-item.on { background: #2a2b2e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
:is(#screen-gerar, #screen-gemini) #gerar-escolha .gerar-escolha-item.cheio { opacity: .45; }
:is(#screen-gerar, #screen-gemini) #gerar-escolha .fl-escolha-marca {
  margin-left: auto; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--fl-texto-3);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--fl-clara-texto);
}
:is(#screen-gerar, #screen-gemini) #gerar-escolha .gerar-escolha-item.on .fl-escolha-marca { background: var(--fl-clara); border-color: var(--fl-clara); }
:is(#screen-gerar, #screen-gemini) .gerar-escolha-dica { margin: -4px 2px 0; font-size: 13px; line-height: 1.4; color: var(--fl-texto-2); }
:is(#screen-gerar, #screen-gemini) .gerar-escolha-dica.alerta { color: #fdd663; }
/* A BIBLIOTECA (06/11): a foto enviada pra "Envios" que ainda nao esta pronta — apagada, com o sinal girando do lado;
   a que nao foi, com o texto amarelo (o toque tenta de novo). O aviso de cima ("Envie ate 10...") em amarelo. */
:is(#screen-gerar, #screen-gemini) #gerar-escolha .fl-escolha-andando { cursor: default; }
:is(#screen-gerar, #screen-gemini) #gerar-escolha .fl-escolha-andando:not(.erro) img,
:is(#screen-gerar, #screen-gemini) #gerar-escolha .fl-escolha-andando:not(.erro) .fl-escolha-txt { opacity: .55; }
:is(#screen-gerar, #screen-gemini) #gerar-escolha .fl-escolha-andando.erro { cursor: pointer; }
:is(#screen-gerar, #screen-gemini) #gerar-escolha .fl-escolha-andando.erro .fl-escolha-txt b { color: #fdd663; }
:is(#screen-gerar, #screen-gemini) #gerar-escolha .fl-escolha-vazio { width: 52px; height: 52px; flex-shrink: 0; border-radius: 10px; background: #2a2b2d; }
:is(#screen-gerar, #screen-gemini) #gerar-escolha .fl-escolha-gira {
  margin-left: auto; flex-shrink: 0; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff;
  border-radius: 50%; animation: spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { :is(#screen-gerar, #screen-gemini) #gerar-escolha .fl-escolha-gira { animation: none; } }
:is(#screen-gerar, #screen-gemini) #gerar-escolha .gerar-escolha-aviso.alerta { color: #fdd663; }
:is(#screen-gerar, #screen-gemini) .gerar-escolha-rodape { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
:is(#screen-gerar, #screen-gemini) .gerar-escolha-usar { min-height: 46px; padding: 0 18px; }
:is(#screen-gerar, #screen-gemini) .gerar-escolha-usar[hidden], :is(#screen-gerar, #screen-gemini) .gerar-escolha-dica[hidden] { display: none; }

/* ── AS MARCAS DO FLOW (07/10, pedido dele) ──────────────────────────────────
   O quadro nao abre o "Salvar imagem" do iPhone nem seleciona texto quando ele
   segura o dedo (segurar abre o NOSSO menu). No computador, o coracao, o
   reutilizar e o ⋮ aparecem no canto com o mouse em cima, como no Flow; no
   toque nao aparecem (o menu e pelo segurar). O favorito fica a vista. */
:is(#screen-gerar, #screen-gemini) .gerar-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
:is(#screen-gerar, #screen-gemini) .gerar-item img { -webkit-touch-callout: none; -webkit-user-drag: none; }
:is(#screen-gerar, #screen-gemini) .gerar-item .fl-acoes {
  position: absolute; top: 8px; right: 8px; display: none; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(32, 33, 36, .86);
}
@media (hover: hover) {
  :is(#screen-gerar, #screen-gemini) .gerar-item:hover .fl-acoes, :is(#screen-gerar, #screen-gemini) .gerar-item:focus-within .fl-acoes { display: flex; }
}
:is(#screen-gerar, #screen-gemini) .gerar-item .fl-acoes button {
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #fff; cursor: pointer;
}
:is(#screen-gerar, #screen-gemini) .gerar-item .fl-acoes button:hover, :is(#screen-gerar, #screen-gemini) .gerar-item .fl-acoes button:focus-visible { background: rgba(255, 255, 255, .16); }
:is(#screen-gerar, #screen-gemini) .gerar-item .fl-acoes .gerar-ico, :is(#screen-gerar, #screen-gemini) .gerar-item .fl-acoes .gerar-ico-traco { width: 18px; height: 18px; }
:is(#screen-gerar, #screen-gemini) .gerar-item .fl-fav {
  position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(32, 33, 36, .72); color: #f28b82; pointer-events: none;
}
:is(#screen-gerar, #screen-gemini) .gerar-item .fl-fav .gerar-ico { width: 15px; height: 15px; }
:is(#screen-gerar, #screen-gemini) .gerar-item.fav .fl-nome { padding-right: 40px; }
/* O menu de baixo, como o do Flow: a grade de acoes (o icone em cima, o nome
   embaixo) e, embaixo dela, o aprimorar do visor (o mesmo botao, com o cadeado). */
:is(#screen-gerar, #screen-gemini) #item-menu-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#screen-gerar, #screen-gemini) .fl-menu-acoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 2px; }
@media (max-width: 359px) { :is(#screen-gerar, #screen-gemini) .fl-menu-acoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
:is(#screen-gerar, #screen-gemini) .fl-menu-acao {
  min-width: 0; min-height: 78px; padding: 10px 4px; border: 0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: transparent; color: var(--fl-texto); font: inherit; font-size: 12.5px; line-height: 1.25; text-align: center; cursor: pointer;
  overflow-wrap: anywhere;
}
:is(#screen-gerar, #screen-gemini) .fl-menu-acao:hover, :is(#screen-gerar, #screen-gemini) .fl-menu-acao:focus-visible { background: var(--fl-campo); }
:is(#screen-gerar, #screen-gemini) .fl-menu-acao .gerar-ico, :is(#screen-gerar, #screen-gemini) .fl-menu-acao .gerar-ico-traco { width: 24px; height: 24px; flex-shrink: 0; }
:is(#screen-gerar, #screen-gemini) .fl-menu-extra { display: flex; flex-direction: column; gap: 8px; }
:is(#screen-gerar, #screen-gemini) .fl-menu-extra:empty { display: none; }
:is(#screen-gerar, #screen-gemini) .fl-lixeira-texto { color: var(--fl-texto-2); font-size: .92rem; line-height: 1.45; }

/* ── A CONTA E O "+" DE CIMA (08/10, pedido dele, prints do Flow) ──────────
   A bolinha e o "ULTRA" viraram botao: abrem a janela da conta. A cor da
   bolinha e a dele (--fl-avatar-cor, uma das cores das iniciais do Google). */
:is(#screen-gerar, #screen-gemini) .fl-conta { border: 0; cursor: pointer; font-family: inherit; color: inherit; }
:is(#screen-gerar, #screen-gemini) .fl-conta:hover { background: #262729; }
:is(#screen-gerar, #screen-gemini) .fl-conta:focus-visible { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: 2px; }
:is(#screen-gerar, #screen-gemini) .fl-avatar {
  background: linear-gradient(var(--fl-avatar-cor, #0b5b4b), var(--fl-avatar-cor, #0b5b4b)) padding-box,
    conic-gradient(#4285F4, #34A853, #FBBC05, #EA4335, #4285F4) border-box;
}
/* O "+" do Flow: o menu abre pra baixo, encostado na direita. */
:is(#screen-gerar, #screen-gemini) .fl-mais { position: relative; flex-shrink: 0; }
:is(#screen-gerar, #screen-gemini) .fl-menu-mais { left: auto; right: 0; min-width: 200px; }
/* OS PROJETOS (12/10, pedido dele): a linha do projeto aberto em cima das
   criacoes — o nome (corta com reticencias), o lapis e o "Projetos ▾"; a
   lista abre pra baixo, encostada na direita, e rola se forem muitos. */
/* A FAIXA DO GOOGLE (13/10, pedido dele): o Google Flow mais lento (ambar) ou
   instavel (vermelho). Fica no topo enquanto durar e some sozinha. */
:is(#screen-gerar, #screen-gemini) .fl-aviso-google { margin: 0 0 12px; padding: 10px 14px; border: 1px solid rgba(251, 188, 4, .35); border-radius: 12px;
  background: rgba(251, 188, 4, .12); color: #fde7a6; font-size: 14px; line-height: 1.45; }
:is(#screen-gerar, #screen-gemini) .fl-aviso-google.instavel { border-color: rgba(242, 139, 130, .45); background: rgba(242, 139, 130, .12); color: #f8c9c4; }
:is(#screen-gerar, #screen-gemini) .fl-aviso-google::before { content: "⏳ "; }
:is(#screen-gerar, #screen-gemini) .fl-aviso-google.instavel::before { content: "⚠️ "; }
:is(#screen-gerar, #screen-gemini) .fl-aviso-google[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .fl-projeto { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 2px 2px 12px; color: var(--fl-texto); }
:is(#screen-gerar, #screen-gemini) .fl-projeto[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .fl-projeto-ico { width: 20px; height: 20px; flex-shrink: 0; margin-right: 4px; color: var(--fl-texto-2); }
:is(#screen-gerar, #screen-gemini) .fl-projeto-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; }
:is(#screen-gerar, #screen-gemini) .fl-projeto-lapis {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: transparent; color: var(--fl-texto-2); cursor: pointer;
}
:is(#screen-gerar, #screen-gemini) .fl-projeto-lapis:hover, :is(#screen-gerar, #screen-gemini) .fl-projeto-lapis:focus-visible { background: var(--fl-campo); color: var(--fl-texto); }
:is(#screen-gerar, #screen-gemini) .fl-projeto-lapis .gerar-ico { width: 18px; height: 18px; }
:is(#screen-gerar, #screen-gemini) .fl-projeto-trocar { position: relative; flex-shrink: 0; margin-left: auto; }
:is(#screen-gerar, #screen-gemini) .fl-projeto-btn {
  display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 8px 0 14px; border: 0; border-radius: 999px;
  background: var(--fl-campo); color: var(--fl-texto); font-family: inherit; font-size: 14px; cursor: pointer;
}
:is(#screen-gerar, #screen-gemini) .fl-projeto-btn .gerar-ico { width: 20px; height: 20px; }
:is(#screen-gerar, #screen-gemini) .fl-menu-projetos { left: auto; right: 0; width: min(300px, calc(100vw - 32px)); max-height: min(60vh, 420px); overflow-y: auto; }
/* A CAPA de cada projeto na lista (13/10, pedido dele, como o Flow): a foto a
   esquerda, o nome e a data ao lado; sem foto ainda, a pasta. */
:is(#screen-gerar, #screen-gemini) .fl-menu-projetos button[data-projeto] { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 60px; padding: 8px 14px 8px 8px; }
:is(#screen-gerar, #screen-gemini) .fl-menu-projetos .fl-projeto-capa { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #37383b; }
:is(#screen-gerar, #screen-gemini) .fl-menu-projetos .fl-projeto-capa-vazia { display: inline-flex; align-items: center; justify-content: center; color: var(--fl-texto-2); }
:is(#screen-gerar, #screen-gemini) .fl-menu-projetos .fl-projeto-capa-vazia .gerar-ico { width: 22px; height: 22px; }
:is(#screen-gerar, #screen-gemini) .fl-menu-projetos .fl-projeto-item-texto { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
:is(#screen-gerar, #screen-gemini) .fl-menu-projetos .fl-projeto-item-nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#screen-gerar, #screen-gemini) .fl-menu-projetos small { font-size: 12px; color: var(--fl-texto-2); }
:is(#screen-gerar, #screen-gemini) .fl-menu-projetos .fl-projeto-novo { margin-top: 4px; border-top: 1px solid var(--fl-borda); border-radius: 0 0 12px 12px; }
/* Apagar de vez (12/10, pedido dele): o "Apagar este projeto" em vermelho, o
   botao da janela "Apagar para sempre?" e a faixa do "Esvaziar lixeira". */
:is(#screen-gerar, #screen-gemini) .fl-menu-projetos .fl-projeto-apagar { color: #f28b82; }
:is(#screen-gerar, #screen-gemini) .cena-renomear-salvar.fl-botao-perigo { background: #d93025; color: #fff; }
:is(#screen-gerar, #screen-gemini) .fl-lixeira-barra {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px;
  margin: 0 2px 12px; color: var(--fl-texto-2); font-size: 14px;
}
:is(#screen-gerar, #screen-gemini) .fl-lixeira-barra[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .fl-lixeira-esvaziar {
  min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--fl-campo);
  color: #f28b82; font-family: inherit; font-size: 14px; cursor: pointer;
}
/* O convite pro aviso no celular (13/10): com um pedido andando, acima da
   grade, no lugar da barra da lixeira. Os botoes descem juntos quando nao cabem. */
:is(#screen-gerar, #screen-gemini) .fl-aviso-pronto {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px;
  margin: 0 2px 12px; padding: 10px 12px; border: 1px solid var(--fl-borda); border-radius: 16px;
  background: var(--fl-painel); color: var(--fl-texto); font-size: 14px; line-height: 1.35;
}
:is(#screen-gerar, #screen-gemini) .fl-aviso-pronto[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .fl-aviso-pronto-txt { flex: 1 1 190px; min-width: 0; }
:is(#screen-gerar, #screen-gemini) .fl-aviso-pronto-botoes { display: flex; gap: 8px; margin-left: auto; }
:is(#screen-gerar, #screen-gemini) .fl-aviso-pronto-sim,
:is(#screen-gerar, #screen-gemini) .fl-aviso-pronto-nao {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; font-family: inherit; font-size: 14px; cursor: pointer;
}
:is(#screen-gerar, #screen-gemini) .fl-aviso-pronto-sim { background: var(--fl-clara); color: var(--fl-clara-texto); font-weight: 600; }
:is(#screen-gerar, #screen-gemini) .fl-aviso-pronto-nao { background: transparent; color: var(--fl-texto-2); }
:is(#screen-gerar, #screen-gemini) .fl-aviso-pronto-sim:focus-visible,
:is(#screen-gerar, #screen-gemini) .fl-aviso-pronto-nao:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 2px; }
/* Ate 359 px (320 medido em 08/10): com o "+" a primeira linha passava da tela
   (~326 px) e a bolinha caia pra linha de baixo. Aperta um pouco so ali. */
@media (max-width: 359px) {
  :is(#screen-gerar, #screen-gemini) .fl-topo { gap: 4px; padding-left: 4px; padding-right: 8px; }
  :is(#screen-gerar, #screen-gemini) .fl-mais .fl-icone { width: 36px; height: 36px; }
  :is(#screen-gerar, #screen-gemini) .fl-conta { gap: 6px; padding: 3px 3px 3px 5px; }
  :is(#screen-gerar, #screen-gemini) .fl-plano { padding: 3px 6px; font-size: 10px; }
}
/* A janela da conta: presa no alto, como a da conta do Google; no celular, a
   largura toda. z-index 950, da familia das janelas do gerador (acima da faixa
   "Instale o app", 900). Tocar no fundo fecha. */
:is(#screen-gerar, #screen-gemini) .fl-conta-janela { position: fixed; inset: 0; z-index: 950; background: rgba(0, 0, 0, .45); }
:is(#screen-gerar, #screen-gemini) .fl-conta-janela[hidden] { display: none; }
:is(#screen-gerar, #screen-gemini) .fl-conta-caixa {
  position: absolute; top: 60px; left: 8px; right: 8px; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto;
  padding: 18px 14px 14px; border-radius: 28px; background: #1f1f1f; color: #e3e3e3; box-shadow: 0 16px 48px rgba(0, 0, 0, .7);
}
@media (min-width: 600px) {
  :is(#screen-gerar, #screen-gemini) .fl-conta-janela { background: transparent; }
  :is(#screen-gerar, #screen-gemini) .fl-conta-caixa { left: auto; right: 16px; top: 64px; width: 380px; }
}
:is(#screen-gerar, #screen-gemini) .fl-conta-fechar {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: #2d2e30; color: #e3e3e3; cursor: pointer;
}
:is(#screen-gerar, #screen-gemini) .fl-conta-fechar:hover { background: #3c3d3f; }
:is(#screen-gerar, #screen-gemini) .fl-conta-fechar:focus-visible, :is(#screen-gerar, #screen-gemini) .fl-conta-pilula:focus-visible, :is(#screen-gerar, #screen-gemini) .fl-conta-mini:focus-visible,
:is(#screen-gerar, #screen-gemini) .fl-conta-renovar:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
:is(#screen-gerar, #screen-gemini) .fl-conta-corpo { display: flex; flex-direction: column; gap: 10px; }
:is(#screen-gerar, #screen-gemini) .fl-conta-quem { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 44px 2px 4px; }
:is(#screen-gerar, #screen-gemini) .fl-conta-quem > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:is(#screen-gerar, #screen-gemini) .fl-conta-quem strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#screen-gerar, #screen-gemini) .fl-conta-quem small { font-size: 13px; color: #c4c7c5; }
:is(#screen-gerar, #screen-gemini) .fl-avatar-grande { width: 44px; height: 44px; font-size: 18px; flex-shrink: 0; }
:is(#screen-gerar, #screen-gemini) .fl-conta-cartao { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; background: #2d2e30; }
:is(#screen-gerar, #screen-gemini) .fl-conta-plano { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; min-width: 0; }
:is(#screen-gerar, #screen-gemini) .fl-conta-plano .fl-plano { background: #3c3d3f; flex-shrink: 0; }
:is(#screen-gerar, #screen-gemini) .fl-conta-venc { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 3px solid #81c995; }
:is(#screen-gerar, #screen-gemini) .fl-conta-venc strong { font-size: 18px; font-weight: 600; }
:is(#screen-gerar, #screen-gemini) .fl-conta-venc small { font-size: 13px; color: #c4c7c5; }
:is(#screen-gerar, #screen-gemini) .fl-conta-venc.atencao { border-left-color: #fdd663; }
:is(#screen-gerar, #screen-gemini) .fl-conta-venc.ruim { border-left-color: #f28b82; }
:is(#screen-gerar, #screen-gemini) .fl-conta-hoje { margin: 0; font-size: 13px; color: #c4c7c5; }
/* No dia, quanto falta (09/10): o contador da caixa de criar, sem a caixa. */
:is(#screen-gerar, #screen-gemini) .fl-uso.fl-conta-dia { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
:is(#screen-gerar, #screen-gemini) .fl-conta-dia .fl-uso-linha b { font-size: 15px; font-weight: 600; }
:is(#screen-gerar, #screen-gemini) .fl-conta-dia .fl-uso-linha small { font-size: 13px; color: #c4c7c5; }
/* O "Renovar" claro, como o "Upgrade" da janela do Google. */
:is(#screen-gerar, #screen-gemini) .fl-conta-renovar {
  display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 999px;
  background: #e3e3e3; color: #1f1f1f; font-size: 14px; font-weight: 600; text-decoration: none;
}
:is(#screen-gerar, #screen-gemini) .fl-conta-renovar:hover { background: #fff; }
:is(#screen-gerar, #screen-gemini) .fl-conta-titulo { margin: 0; font-size: 13px; font-weight: 600; color: #c4c7c5; }
:is(#screen-gerar, #screen-gemini) .fl-conta-linha { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 14px; }
:is(#screen-gerar, #screen-gemini) .fl-conta-linha .gerar-ico { width: 20px; height: 20px; color: #a8c7fa; }
:is(#screen-gerar, #screen-gemini) .fl-conta-rotulo { flex: 1; min-width: 0; }
:is(#screen-gerar, #screen-gemini) .fl-conta-linha b { font-weight: 600; white-space: nowrap; }
:is(#screen-gerar, #screen-gemini) .fl-conta-mini {
  min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: #3c3d3f; color: #e3e3e3;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
:is(#screen-gerar, #screen-gemini) .fl-conta-pilula {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 999px;
  background: #2d2e30; color: #e3e3e3; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
:is(#screen-gerar, #screen-gemini) .fl-conta-cartao .fl-conta-pilula { background: #3c3d3f; }
:is(#screen-gerar, #screen-gemini) .fl-conta-pilula:hover, :is(#screen-gerar, #screen-gemini) .fl-conta-mini:hover { background: #46474a; }
:is(#screen-gerar, #screen-gemini) .fl-conta-nota { margin: 0; text-align: center; font-size: 12px; color: #a8abad; }

/* ── AS CENAS EM PE (08/10, pedido dele: "no Flow fica mais na vertical") ──
   So na aba Cenas: a capa e o primeiro clipe, em pe (9:16, como o Flow), com
   o nome e o resto embaixo; a claquete no canto (no meio, na cena vazia). Na
   janela do "Adicionar à cena" o cartao segue deitado — cabe mais. */
:is(#screen-gerar, #screen-gemini) .cena-card-ico { display: none; }
:is(#screen-gerar, #screen-gemini) #gerar-cenas { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
@media (min-width: 900px) { :is(#screen-gerar, #screen-gemini) #gerar-cenas { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } }
:is(#screen-gerar, #screen-gemini) #gerar-cenas .cena-nova { min-height: 0; aspect-ratio: 9 / 16; border-radius: 18px; }
:is(#screen-gerar, #screen-gemini) #gerar-cenas .cena-card {
  position: relative; aspect-ratio: 9 / 16; padding: 0; gap: 2px; justify-content: flex-end; border-radius: 18px; background: #131314;
}
:is(#screen-gerar, #screen-gemini) #gerar-cenas .cena-card-tira { position: absolute; inset: 0; height: auto; gap: 0; }
:is(#screen-gerar, #screen-gemini) #gerar-cenas .cena-card-tira i:not(:first-child) { display: none; }
:is(#screen-gerar, #screen-gemini) #gerar-cenas .cena-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; pointer-events: none;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85));
}
:is(#screen-gerar, #screen-gemini) #gerar-cenas .cena-card strong, :is(#screen-gerar, #screen-gemini) #gerar-cenas .cena-card small { position: relative; z-index: 1; }
:is(#screen-gerar, #screen-gemini) #gerar-cenas .cena-card strong { padding: 0 12px; font-size: 14px; }
:is(#screen-gerar, #screen-gemini) #gerar-cenas .cena-card small { padding: 0 12px 12px; color: #c4c7c5; }
:is(#screen-gerar, #screen-gemini) #gerar-cenas .cena-card-ico {
  position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7));
}
:is(#screen-gerar, #screen-gemini) #gerar-cenas .cena-card-ico .gerar-ico { width: 20px; height: 20px; }
:is(#screen-gerar, #screen-gemini) #gerar-cenas .cena-card-vazia .cena-card-tira i { background: #131314; }
:is(#screen-gerar, #screen-gemini) #gerar-cenas .cena-card-vazia::after { display: none; }
:is(#screen-gerar, #screen-gemini) #gerar-cenas .cena-card-vazia .cena-card-ico { top: 42%; left: 50%; transform: translate(-50%, -50%); color: #8e918f; filter: none; }
:is(#screen-gerar, #screen-gemini) #gerar-cenas .cena-card-vazia .cena-card-ico .gerar-ico { width: 40px; height: 40px; }

/* ── O OMNI FLASH · GEMINI (21/10, pedido dele) ──────────────────────────────
   O cartao na area de membros (embaixo dos extras) e a tela propria: o pedido,
   a compra, os videos e o extrato. O azul-lilas do Omni marca o que e do
   Gemini. Celular primeiro: tudo numa coluna, os botoes com 40+ px de dedo. */
.gemini-cartao {
  display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 430px;
  margin: 0 auto 14px; padding: 12px 12px 12px 14px; border-radius: 16px; cursor: pointer;
  border: 1px solid rgba(138, 180, 248, .4);
  background: linear-gradient(135deg, rgba(138, 180, 248, .16), rgba(197, 138, 249, .14)), #16181f;
  color: var(--fl-texto); font-family: inherit; font-size: .86rem; line-height: 1.35; text-align: left;
}
.gemini-cartao[hidden] { display: none; }
.gemini-cartao:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 3px; }
.gemini-cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 2px; }
.gemini-cartao-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gemini-cartao-texto b { color: #fff; font-size: .95rem; overflow-wrap: anywhere; }
.gemini-cartao-texto small { font-size: .74rem; color: var(--fl-texto-2); }
.gemini-cartao-entrar {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: linear-gradient(135deg, #8ab4f8, #c58af9); color: #1f1f1f; font-weight: 800; font-size: .82rem;
}
.gemini-cartao-entrar span { font-size: 1.1rem; line-height: 1; }
.gemini-cartao-saldo { display: block; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff; font-weight: 700; }
/* O CARTAO PREMIUM (23/10, pedido dele, com o print do cartao: "faltou aqui
   deixar mais bonito"): o mesmo brilho da tela do Gemini — o aro fino nas cores
   da estrela (azul #3186FF, vermelho #FC413D, amarelo #FBBC04, verde #00B95C)
   com luz em volta, a estrela do titulo respirando, o reflexo passando no
   "OMNI FLASH - GEMINI" e um brilho que atravessa o "Entrar". Parado pra quem
   pede menos movimento no aparelho. */
.gemini-cartao {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(138, 180, 248, .16), rgba(197, 138, 249, .14)) padding-box,
    linear-gradient(#16181f, #16181f) padding-box,
    linear-gradient(115deg, rgba(49, 134, 255, .85), rgba(116, 155, 255, .6) 30%, rgba(252, 65, 61, .6) 62%, rgba(251, 188, 4, .6) 84%, rgba(0, 185, 92, .7)) border-box;
  box-shadow: 0 0 18px rgba(49, 134, 255, .16), 0 0 32px rgba(155, 114, 203, .1);
  transition: box-shadow .25s ease;
}
.gemini-cartao:hover { box-shadow: 0 0 22px rgba(49, 134, 255, .28), 0 0 40px rgba(155, 114, 203, .16); }
.gemini-cartao-texto b .gem-logo {
  filter: drop-shadow(0 0 3px rgba(49, 134, 255, .8)) drop-shadow(0 0 10px rgba(49, 134, 255, .45)) drop-shadow(0 0 18px rgba(252, 65, 61, .22));
  animation: gemRespira 4.5s ease-in-out infinite;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gemini-cartao-texto b {
    background: linear-gradient(100deg, #fff 0%, #fff 40%, #9fbaff 46%, #fff 50%, #ffc2bd 54%, #fff 60%, #fff 100%);
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: gemReflexo 6s ease-in-out infinite;
  }
}
.gemini-cartao-entrar { position: relative; overflow: hidden; box-shadow: 0 0 14px rgba(138, 180, 248, .38), 0 0 24px rgba(197, 138, 249, .2); }
.gemini-cartao-entrar::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-130%) skewX(-20deg); animation: gemCorre 5.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .gemini-cartao-texto b .gem-logo, .gemini-cartao-texto b, .gemini-cartao-entrar::after { animation: none; }
  .gemini-cartao-entrar::after { display: none; }
}

/* A TELA (22/10, pedido dele: a cara do Flow). As regras do gerador valem
   aqui tambem — elas sao :is(#screen-gerar, #screen-gemini) — e as pecas tem
   as mesmas classes (a grade, a doca, a caixa, a pilula, o visor, a janela da
   conta). Aqui fica so o que e do Gemini. */
/* A MARCA DO GEMINI (22/10, pedido dele: "quero que mostre que ele e o
   Gemini"), no lugar do "G FLOW": a estrela de 2025 e o nome, solido como no
   logo oficial. No celular um pouco menor, como o do Flow. */
#screen-gemini .gem-marca {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; margin-left: 4px;
  color: #fff; font-size: 1.3rem; font-weight: 500; letter-spacing: -.01em;
}
#screen-gemini .gem-marca-logo { width: 24px; height: 24px; flex-shrink: 0; display: block; }
#screen-gemini .gem-marca-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
@media (max-width: 899px) {
  #screen-gemini .gem-marca { font-size: 1.15rem; gap: 7px; }
  #screen-gemini .gem-marca-logo { width: 21px; height: 21px; }
}
#screen-gemini #gem-voltar[hidden] { display: none; }
/* Quem SO tem o Gemini nao tem casinha: o nome comeca no canto. */
#screen-gemini #gem-voltar[hidden] + .gem-marca { margin-left: 8px; }
@media (max-width: 359px) {
  #screen-gemini .fl-conta .fl-plano { display: none; }
}
/* A estrela pequena ao lado de um texto (a pilula, o modelo, a conta, a compra). */
.gem-logo { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: -3px; }
#screen-gemini .fl-resumo .gem-logo { width: 15px; height: 15px; }
#screen-gemini .gem-modelo-linha { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
#screen-gemini .gem-modelo-linha .gem-logo { width: 17px; height: 17px; }
#screen-gemini .fl-conta-plano .gem-logo { width: 20px; height: 20px; }
#screen-gemini .gem-compra-titulo .gem-logo { width: 17px; height: 17px; margin-right: 7px; }
.gemini-cartao-texto b .gem-logo { width: 17px; height: 17px; margin-right: 6px; }
/* A tela vazia: a estrela grande no lugar da florzinha do Flow. */
#screen-gemini .gem-vazio-logo { width: 56px; height: 56px; display: block; }
/* O video andando: a estrela girando no lugar da bolinha (o Gemini pensando).
   Vence o ".gerar-item img" da grade (que estica a imagem no cartao). */
#screen-gemini .gerar-item .gem-pulso, #screen-gemini .gem-pulso {
  width: 20px; height: 20px; flex-shrink: 0; object-fit: contain; display: block;
  animation: gemGira 2.4s ease-in-out infinite;
}
#screen-gemini .gerar-item.andando .gem-pulso { margin-bottom: auto; }
#screen-gemini .gerar-estado .gem-pulso { width: 24px; height: 24px; margin-top: 4px; }
#screen-gemini .gem-pulso.fila { filter: saturate(.35); opacity: .75; }
@keyframes gemGira { 0% { transform: rotate(0) scale(.86); } 50% { transform: rotate(90deg) scale(1); } 100% { transform: rotate(180deg) scale(.86); } }
@media (prefers-reduced-motion: reduce) { #screen-gemini .gerar-item .gem-pulso, #screen-gemini .gem-pulso { animation: none; } }
/* O BRILHO PREMIUM (23/10, pedido dele: "deixe mais bonito os logos e imagens
   com brilho real e bonito que faça o cliente ver uma ferramenta premium"): as
   cores da PROPRIA estrela do Gemini (azul #3186FF, vermelho #FC413D, amarelo
   #FBBC04, verde #00B95C) viram luz. A estrela do topo brilha e respira devagar,
   o nome "Gemini" ganha um reflexo que passa, a etiqueta OMNI FLASH ganha o aro
   nas cores do Gemini com um brilho que corre, o aro da conta gira devagar e a
   estrela grande da tela vazia ganha um halo. So na tela do Gemini (a do Flow
   nao muda). Quem pede menos movimento no aparelho ve o brilho parado. */
#screen-gemini .gem-marca-logo {
  filter: drop-shadow(0 0 3px rgba(49, 134, 255, .8)) drop-shadow(0 0 10px rgba(49, 134, 255, .45)) drop-shadow(0 0 18px rgba(252, 65, 61, .22));
  animation: gemRespira 4.5s ease-in-out infinite;
}
@keyframes gemRespira {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(49, 134, 255, .8)) drop-shadow(0 0 10px rgba(49, 134, 255, .45)) drop-shadow(0 0 18px rgba(252, 65, 61, .22)); }
  50% { filter: drop-shadow(0 0 4px rgba(116, 155, 255, 1)) drop-shadow(0 0 14px rgba(49, 134, 255, .62)) drop-shadow(0 0 24px rgba(251, 188, 4, .3)); }
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #screen-gemini .gem-marca-nome {
    background: linear-gradient(100deg, #fff 0%, #fff 40%, #9fbaff 46%, #fff 50%, #ffc2bd 54%, #fff 60%, #fff 100%);
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 8px rgba(116, 155, 255, .3));
    animation: gemReflexo 6s ease-in-out infinite;
  }
}
@keyframes gemReflexo { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0% 0; } }
/* A etiqueta da conta (OMNI FLASH): o aro nas cores da estrela, a luz em volta
   e um brilho que atravessa de tempos em tempos (a borda de 1 px sai do
   espaco de dentro: a etiqueta fica do mesmo tamanho). */
#screen-gemini .fl-conta .fl-plano {
  position: relative; overflow: hidden; border: 1px solid transparent; padding: 3px 7px; color: #fff;
  background: linear-gradient(#1e1f22, #1e1f22) padding-box,
    linear-gradient(115deg, #3186FF, #749BFF 30%, #FC413D 62%, #FBBC04 84%, #00B95C) border-box;
  box-shadow: 0 0 10px rgba(49, 134, 255, .3), 0 0 16px rgba(252, 65, 61, .12);
  text-shadow: 0 0 10px rgba(116, 155, 255, .6);
}
#screen-gemini .fl-conta .fl-plano::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: translateX(-130%) skewX(-20deg); animation: gemCorre 5.5s ease-in-out infinite;
}
@keyframes gemCorre { 0%, 62% { transform: translateX(-130%) skewX(-20deg); } 92%, 100% { transform: translateX(260%) skewX(-20deg); } }
/* O aro da conta: as cores da estrela girando devagar, com luz. Sem @property
   (aparelho antigo), fica o aro parado — o 0deg do var() segura. */
@property --gem-aro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
#screen-gemini .fl-conta .fl-avatar {
  background: linear-gradient(var(--fl-avatar-cor, #0b5b4b), var(--fl-avatar-cor, #0b5b4b)) padding-box,
    conic-gradient(from var(--gem-aro, 0deg), #3186FF, #00B95C, #FBBC04, #FC413D, #3186FF) border-box;
  box-shadow: 0 0 10px rgba(49, 134, 255, .35), 0 0 4px rgba(252, 65, 61, .2);
  animation: gemAro 9s linear infinite;
}
@keyframes gemAro { to { --gem-aro: 360deg; } }
/* As estrelas pequenas (a pilula, o modelo, a conta, a compra): luz parada. */
#screen-gemini .fl-resumo .gem-logo, #screen-gemini .gem-modelo-linha .gem-logo, #screen-gemini .fl-conta-plano .gem-logo,
#screen-gemini .gem-compra-titulo .gem-logo, #screen-gemini .gem-linha-nome .gem-logo {
  filter: drop-shadow(0 0 3px rgba(49, 134, 255, .85)) drop-shadow(0 0 8px rgba(49, 134, 255, .4)) drop-shadow(0 0 12px rgba(252, 65, 61, .25));
}
/* O video andando: a estrela girando tambem com luz (na fila, apagada como antes). */
#screen-gemini .gem-pulso:not(.fila) { filter: drop-shadow(0 0 4px rgba(49, 134, 255, .6)) drop-shadow(0 0 9px rgba(252, 65, 61, .2)); }
/* A tela vazia: a estrela grande com um halo que respira. */
#screen-gemini .gem-vazio-logo {
  filter: drop-shadow(0 0 8px rgba(49, 134, 255, .5)) drop-shadow(0 0 22px rgba(116, 155, 255, .32)) drop-shadow(0 0 34px rgba(252, 65, 61, .16));
  animation: gemHalo 5s ease-in-out infinite;
}
@keyframes gemHalo {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(49, 134, 255, .5)) drop-shadow(0 0 22px rgba(116, 155, 255, .32)) drop-shadow(0 0 34px rgba(252, 65, 61, .16)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 12px rgba(49, 134, 255, .72)) drop-shadow(0 0 30px rgba(116, 155, 255, .42)) drop-shadow(0 0 46px rgba(251, 188, 4, .22)); }
}
@media (prefers-reduced-motion: reduce) {
  #screen-gemini .gem-marca-logo, #screen-gemini .gem-marca-nome, #screen-gemini .fl-conta .fl-plano::after,
  #screen-gemini .fl-conta .fl-avatar, #screen-gemini .gem-vazio-logo { animation: none; }
  #screen-gemini .fl-conta .fl-plano::after { display: none; }
}
/* O texto da caixa: o mesmo do gerador (16 px — com menos o iPhone da zoom). */
#gem-texto {
  width: 100%; resize: none; min-height: 28px; max-height: 168px; overflow-y: auto;
  background: transparent; border: 0; padding: 4px 2px; color: var(--fl-texto);
  font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.45; outline: none;
}
#gem-texto::placeholder { color: var(--fl-texto-3); }
#screen-gemini .gerar-contador.passou { color: #f87171; font-weight: 700; }
/* A fala escrita do video de 20/30 s: quantas palavras tem e quantas cabem;
   comprida demais, em amarelo (avisa, nao impede). */
#screen-gemini .gem-fala-dica { text-align: left; }
/* O 10s | 20s | 30s escondido (o video longo desligado): o display flex do
   segmento passaria por cima do hidden. */
#screen-gemini .gem-duracoes[hidden] { display: none; }
#screen-gemini .gem-fala-dica.passou { color: #fdd663; font-weight: 600; }
#screen-gemini #gem-fotos-elementos:not(.com-foto) { display: none; }
#screen-gemini #gem-fotos-elementos {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 7px 7px 2px 0;
  scrollbar-width: thin; overscroll-behavior-x: contain;
}
#screen-gemini #gem-fotos-elementos .gerar-foto { flex-shrink: 0; }
#screen-gemini #gem-creditos-n { color: var(--fl-texto); text-decoration: underline; text-underline-offset: 2px; }
/* O modelo (um so): a barra do Flow sem a setinha, com o saldo embaixo. */
#screen-gemini .fl-ajustes .gem-modelo { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 8px; }
#screen-gemini .gem-modelo-nome { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 6px 14px; cursor: default; }
#screen-gemini .gem-modelo-nome small { font-size: 12px; font-weight: 500; color: var(--fl-texto-3); }
#screen-gemini .gem-modelo-nome small:empty { display: none; }
#screen-gemini .fl-ajustes .gerar-segmento button:disabled { opacity: 1; cursor: default; }
/* O motivo da seta travada (ex.: o de 30 s com 2 no saldo) fica atras da
   janelinha: com ela aberta, nao aparece pela beirada (ela ja diz o saldo e
   quanto o tamanho usa); fechou, ele aparece no mesmo lugar. */
#screen-gemini .fl-doca:has(.fl-ajustes:not([hidden])) .fl-motivo { visibility: hidden; }
/* A grade: o video no lugar da miniatura (o Vids nao da miniatura). */
#screen-gemini .gerar-item video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; background: #131314; }
/* As marcas no Gemini (23/10, como o Flow): o "Tudo ▾" numa linha em cima da
   grade (a tela nao tem a busca nem a lateral do gerador), no celular e no
   computador; o titulo do menu numa linha so; a grade vazia de cada filtro. */
#screen-gemini .gem-filtro-linha { display: flex; margin: 0 0 12px; }
#screen-gemini .gem-filtro-linha[hidden] { display: none; }
#screen-gemini .fl-filtro.gem-filtro { display: block; }
#screen-gemini #gem-item-menu-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screen-gemini .gem-vazio-filtro { margin: 28px 12px; color: var(--fl-texto-3); font-size: 14px; line-height: 1.5; text-align: center; }
#screen-gemini .gem-vazio-filtro[hidden] { display: none; }
/* O que saiu do Google: o pedido e, EMBAIXO, o aviso (23/10, print dele: a
   linha do cartao punha os dois lado a lado e o aviso ficava espremido). */
#screen-gemini .gerar-item.sem-video { flex-direction: column; }
#screen-gemini .gerar-item.sem-video small { display: block; margin-top: 4px; color: var(--fl-texto-3); font-size: 10.5px; }
/* O saldo do pacote, na faixa do uso do gerador, com o "Comprar". */
#screen-gemini .fl-uso { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
#screen-gemini .gem-uso-comprar {
  min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: #3c3d3f; color: #e3e3e3;
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
#screen-gemini .gem-uso-comprar[hidden] { display: none; }
#screen-gemini .gem-uso-comprar:hover { background: #46474a; }
#screen-gemini .gem-uso-comprar:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
#screen-gemini .fl-aviso-google::before { content: none; }
/* O estender no visor: a caixa do "o que acontece depois", como a da Cena. */
#screen-gemini .gem-estender { flex: 0 0 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px; background: #1b1c1d; border: 1px solid rgba(255, 255, 255, .09); }
#screen-gemini .gem-estender[hidden] { display: none; }
#screen-gemini .gem-estender textarea {
  width: 100%; min-height: 64px; resize: none; padding: 4px 2px; border: 0; background: transparent; color: var(--fl-texto);
  font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.45; outline: none;
}
#screen-gemini .gem-estender textarea::placeholder { color: var(--fl-texto-3); }
#screen-gemini .gem-estender .btn { align-self: flex-end; }
#screen-gemini .fl-visor .gem-guarda { text-align: center; margin: 0; }
/* O video longo que parou no meio (22/10): o aviso de com quanto ficou. */
#screen-gemini .fl-visor .gem-aviso-parte { text-align: center; margin: 0; color: #fdd663; }
/* A janela da conta e a da compra. */
#screen-gemini .gem-compra-titulo { padding: 4px 44px 0 4px; font-size: 15px; color: #e3e3e3; }
#screen-gemini .fl-conta-cartao .gem-saldo-grande { margin: 0; font-size: 22px; font-weight: 700; color: #fff; }
#screen-gemini .fl-conta-cartao .gem-saldo-sub { margin: -6px 0 0; font-size: 13px; color: #c4c7c5; }
#screen-gemini .gem-extrato-lista { display: flex; flex-direction: column; }
#screen-gemini .gem-extrato-lista[hidden] { display: none; }
@media (max-height: 520px) { #screen-gemini .fl-conta-caixa { top: 8px; max-height: calc(100dvh - 16px); } }

/* Os pacotes: dois por linha no celular, o preco embaixo e o "Comprar". */
.gem-pacotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.gem-pacotes:empty { display: none; }
.gem-pacote {
  display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; text-decoration: none;
  border: 1px solid rgba(138, 180, 248, .35);
  background: linear-gradient(135deg, rgba(138, 180, 248, .12), rgba(197, 138, 249, .1)), var(--fl-campo);
  color: var(--fl-texto);
}
.gem-pacote b { color: #fff; font-size: 1.05rem; font-weight: 800; }
.gem-pacote span { font-size: .9rem; font-weight: 600; }
.gem-pacote em { margin-top: 6px; font-style: normal; font-size: .8rem; font-weight: 700; color: #8ab4f8; }
.gem-pacote:hover { border-color: rgba(138, 180, 248, .7); }
.gem-pacote:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 2px; }
.gem-nota { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--fl-texto-2); }
.gem-nota:empty { display: none; }

/* O extrato (na janela da conta). */
.gem-extrato-linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--fl-borda); font-size: .84rem; color: var(--fl-texto-2);
}
.gem-extrato-linha span { min-width: 0; overflow-wrap: anywhere; }
.gem-extrato-linha b { flex-shrink: 0; color: var(--fl-texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gem-extrato-linha b.mais { color: #81c995; }

/* A LINHA DO TEMPO (22/10, pedido dele: "igual a do Vids"). O editor e o da
   Cena do Flow — as classes .cena-* ja valem nas duas telas. Aqui so o que e
   dela: a claquete da barra com quantos videos estao na linha, a capa de video
   de cada bloco (o Vids nao da miniatura) e o titulo, que nao muda de nome. */
#screen-gemini .gem-linha-btn { gap: 7px; }
#screen-gemini .gem-linha-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #8ab4f8; color: #131314;
  font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
#screen-gemini .gem-linha-n[hidden] { display: none; }
/* No celular so a claquete, com o numero no canto; na tela larga, a pilula
   com o nome (como o "+" e a conta, no mesmo cinza da barra). */
@media (max-width: 599px) {
  #screen-gemini .gem-linha-btn { position: relative; }
  #screen-gemini .gem-linha-rotulo { display: none; }
  #screen-gemini .gem-linha-n { position: absolute; top: 1px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
}
@media (min-width: 600px) {
  #screen-gemini .gem-linha-btn {
    width: auto; padding: 0 12px 0 10px; border-radius: 999px; background: #1b1b1c;
    font-family: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap;
  }
}
#screen-gemini .gem-linha-btn[aria-pressed="true"] { background: #2e2f31; }
/* O Voltar e o titulo (sem lapis: a linha nao muda de nome). */
#screen-gemini .gem-linha-voltar { min-height: 34px; flex-shrink: 0; border-color: rgba(255, 255, 255, .1); }
#screen-gemini .gem-linha-nome { cursor: default; }
#screen-gemini .gem-linha-nome .gem-logo { width: 17px; height: 17px; }
/* No celular a estrela do titulo sai (como o icone da Cena do Flow) e, ate
   360 px, o "Juntar e baixar" aperta: a 320 o "Linha do tempo" saia cortado. */
@media (max-width: 399px) { #screen-gemini .gem-linha-nome .gem-logo { display: none; } }
@media (max-width: 359px) { #screen-gemini #gem-linha-juntar { padding: 0 9px; font-size: 13px; } }
/* A capa do bloco: o proprio video, parado no primeiro quadro que ficou. As
   alcas e os segundos ficam por cima (vem depois e sao posicionados). */
#screen-gemini .gem-linha-capa {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
  pointer-events: none; background: #000;
}
#screen-gemini .cena-clipe.andando .gem-pulso { width: 18px; height: 18px; }
/* A janela do "+": o video no lugar da miniatura, como na grade. */
#screen-gemini .gerar-escolha-item video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: #131314; }

/* ── O MOTION CONTROL (25/10, decisao dele) ─────────────────────────────────
   "Copiar movimento": o cartao na area de membros (embaixo do Omni Flash -
   Gemini) e a tela PROPRIA (pedido dele: "algo exclusivo, diferente"). As
   cores do Kling (pedido dele: "bem parecido com as cores do Kling"), lidas do
   CSS do klingai.com: o fundo quase preto e neutro e o verde neon indo pro
   lima — so a paleta, sem nome nem logo. Celular primeiro: uma coluna, os
   botoes com 40+ px de dedo, e nada passa da tela a 320 px. */
.motion-cartao, #screen-motion {
  --m-fundo: #0e0f0f; --m-cartao: #1a1a1a; --m-cartao2: #202225; --m-linha: rgba(255, 255, 255, .08);
  --m-texto: #fff; --m-fraco: #8c9096; --m-a1: #74ff52; --m-a2: #99eb2f;
  --m-grad: linear-gradient(110deg, var(--m-a1) 0%, var(--m-a1) 40%, var(--m-a2) 100%);
}
.motion-cartao {
  display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 430px;
  margin: 0 auto 14px; padding: 12px 12px 12px 14px; border-radius: 16px; cursor: pointer;
  border: 1px solid rgba(116, 255, 82, .45); background: linear-gradient(135deg, rgba(116, 255, 82, .1), rgba(153, 235, 47, .05)), var(--m-fundo);
  box-shadow: 0 0 18px rgba(116, 255, 82, .12);
  color: var(--m-texto); font-family: inherit; font-size: .86rem; line-height: 1.35; text-align: left;
}
.motion-cartao[hidden] { display: none; }
.motion-cartao:focus-visible { outline: 2px solid var(--m-a1); outline-offset: 3px; }
.motion-cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 2px; }
.motion-cartao-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.motion-cartao-texto b { display: flex; align-items: center; gap: 7px; font-size: .95rem; font-weight: 900; letter-spacing: .05em; color: var(--m-a1); overflow-wrap: anywhere; }
.motion-cartao-texto small { font-size: .74rem; color: var(--m-fraco); }
.motion-onda, .mot-onda { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--m-a1); stroke-width: 2.4; stroke-linecap: round; }
.motion-cartao-entrar {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--m-grad); color: #0e0f0f; font-weight: 800; font-size: .82rem;
}
.motion-cartao-entrar span { font-size: 1.1rem; line-height: 1; }
.motion-cartao-saldo { display: block; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff; font-weight: 700; }

#screen-motion { justify-content: flex-start; padding: 0; background: var(--m-fundo); color: var(--m-texto); }
#screen-motion .mot-tela { width: 100%; max-width: 430px; padding: 14px 16px 36px; }
#screen-motion button { font-family: inherit; }
.mot-topo { display: flex; align-items: center; gap: 10px; }
.mot-voltar { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--m-linha); background: transparent; color: var(--m-fraco); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.mot-marca { flex: 1; min-width: 0; }
.mot-marca b { display: flex; align-items: center; gap: 7px; font-size: 1.12rem; font-weight: 900; letter-spacing: .06em; color: var(--m-a1); }
.mot-marca small { display: block; color: var(--m-fraco); font-size: .74rem; }
.mot-saldo { flex-shrink: 0; padding: 6px 11px; border-radius: 999px; font-weight: 800; font-size: .78rem; color: #0e0f0f; background: var(--m-grad); white-space: nowrap; }
.mot-faixa { height: 3px; border-radius: 3px; margin: 12px 0 6px; background: var(--m-grad); opacity: .85; }
.mot-aviso { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(252, 65, 61, .12); border: 1px solid rgba(252, 65, 61, .4); color: #ffd5d3; font-size: .84rem; }
.mot-aviso[hidden] { display: none; }
.mot-h2 { font-size: .72rem; letter-spacing: .14em; color: var(--m-fraco); font-weight: 800; margin: 18px 0 10px; text-transform: uppercase; }
.mot-h2[hidden] { display: none; }
/* minmax(0, ...) e min-width 0: sem isso a foto empurra a coluna pro tamanho
   dela e a grade passa da tela (mordeu no desenho de 25/10). */
.mot-passos { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 9px; }
.mot-slot { background: var(--m-cartao); border: 1px solid var(--m-linha); border-radius: 14px; padding: 8px; position: relative; min-width: 0; }
.mot-n { font-size: .64rem; font-weight: 800; color: var(--m-a1); letter-spacing: .06em; }
.mot-t { font-size: .8rem; font-weight: 800; margin: 1px 0 6px; }
.mot-caixa { display: block; width: 100%; aspect-ratio: 9 / 14; border-radius: 9px; overflow: hidden; position: relative; padding: 0; background: #111; border: 1.5px dashed rgba(255, 255, 255, .18); color: var(--m-fraco); cursor: pointer; }
.mot-caixa.cheia { border: 0; }
.mot-caixa img, .mot-caixa video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mot-vazio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px; text-align: center; font-size: .7rem; line-height: 1.25; }
.mot-vazio b { color: var(--m-texto); font-size: .74rem; }
.mot-vazio .mot-mais { font-size: 1.4rem; color: var(--m-a1); line-height: 1; }
.mot-enviar { margin-top: 4px; padding: 7px 9px; border-radius: 9px; border: 1px solid rgba(116, 255, 82, .5); background: transparent; color: var(--m-a1); font-weight: 800; font-size: .7rem; cursor: pointer; }
.mot-selo, .mot-tempo { position: absolute; font-size: .62rem; font-weight: 900; padding: 3px 7px; border-radius: 999px; pointer-events: none; }
.mot-selo { left: 6px; bottom: 6px; background: rgba(0, 0, 0, .65); color: var(--m-a2); }
.mot-tempo { right: 6px; top: 6px; background: var(--m-grad); color: #0e0f0f; }
.mot-trocar { position: absolute; right: 6px; bottom: 6px; padding: 4px 8px; border-radius: 999px; border: 0; background: rgba(0, 0, 0, .65); color: #fff; font-size: .62rem; font-weight: 800; cursor: pointer; }
/* O video DELA enviado tem o "Trocar" embaixo: o "sem som" sobe pra baixo do
   "10 s" (no celular de 320 px os dois se encavalavam embaixo). */
.mot-caixa.com-trocar .mot-selo { left: auto; right: 6px; bottom: auto; top: 30px; }
.mot-tirar { display: block; margin: 6px auto 0; min-height: 32px; padding: 4px 8px; border: 0; background: transparent; color: var(--m-fraco); font-size: .68rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.mot-tirar[hidden] { display: none; }
.mot-progresso { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .12); }
.mot-progresso i { display: block; height: 100%; width: 0; background: var(--m-grad); transition: width .2s ease; }
.mot-roupa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: .8rem; color: var(--m-fraco); }
.mot-roupa[hidden] { display: none; }
.mot-chip { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--m-linha); background: var(--m-cartao); color: var(--m-texto); font-weight: 700; font-size: .8rem; cursor: pointer; }
.mot-chip.on { border-color: var(--m-a1); color: var(--m-a1); }
.mot-prontos { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
/* Com muitos (25/10: 18), duas fileiras que correm de lado. */
.mot-prontos.duas { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 86px; gap: 10px 9px; }
.mot-pronto { width: 86px; flex-shrink: 0; scroll-snap-align: start; padding: 0; border: 0; background: transparent; color: var(--m-fraco); text-align: left; cursor: pointer; }
.mot-pronto small { display: block; font-size: .6rem; margin-top: 1px; opacity: .75; }
.mot-pronto img { width: 86px; height: 120px; object-fit: cover; border-radius: 10px; display: block; border: 2px solid transparent; outline: 1px solid var(--m-linha); background: #111; }
.mot-pronto.on img { border-color: var(--m-a1); outline: 0; }
.mot-pronto span { display: block; font-size: .68rem; margin-top: 4px; line-height: 1.2; }
.mot-pronto.on span { color: var(--m-a1); font-weight: 800; }
.mot-fala { background: var(--m-cartao); border: 1px solid var(--m-linha); border-radius: 14px; padding: 10px 12px; }
.mot-fala textarea { width: 100%; min-height: 66px; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--m-texto); font: inherit; font-size: 16px; line-height: 1.4; }
.mot-fala textarea::placeholder { color: #5f6368; }
.mot-conta { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: .72rem; color: var(--m-fraco); }
.mot-conta b { color: var(--m-a2); }
.mot-conta b.longa { color: #fbbc04; }
.mot-dica { margin: 9px 0 0; font-size: .76rem; color: var(--m-fraco); display: flex; gap: 7px; }
.mot-dica[hidden] { display: none; }
.mot-gerar { margin-top: 14px; width: 100%; min-height: 56px; border: 0; border-radius: 14px; padding: 12px 14px; font-weight: 900; font-size: 1rem; color: #0e0f0f; background: var(--m-grad); box-shadow: 0 10px 30px rgba(116, 255, 82, .22); cursor: pointer; }
.mot-gerar small { display: block; font-weight: 700; font-size: .72rem; opacity: .8; }
.mot-gerar:disabled { opacity: .45; cursor: default; box-shadow: none; }
.mot-sem { margin-top: 16px; padding: 14px; border-radius: 14px; background: var(--m-cartao); border: 1px solid var(--m-linha); font-size: .86rem; }
.mot-sem[hidden] { display: none; }
.mot-sem p + p { margin-top: 6px; color: var(--m-fraco); }
.mot-lista { display: flex; flex-direction: column; gap: 12px; }
.mot-item { background: var(--m-cartao2); border: 1px solid var(--m-linha); border-radius: 16px; padding: 10px; }
.mot-ad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; position: relative; }
.mot-ad figure { position: relative; min-width: 0; margin: 0; aspect-ratio: 9 / 14; border-radius: 10px; overflow: hidden; background: #111; }
.mot-ad img, .mot-ad video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mot-ad figcaption { position: absolute; left: 7px; top: 7px; font-size: .62rem; font-weight: 900; letter-spacing: .08em; padding: 3px 7px; border-radius: 999px; background: rgba(0, 0, 0, .65); pointer-events: none; }
.mot-ad .mot-depois figcaption { color: #0e0f0f; background: var(--m-grad); }
.mot-troca { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: var(--m-fundo); border: 2px solid var(--m-a1); display: grid; place-items: center; font-weight: 900; color: var(--m-a1); pointer-events: none; }
.mot-estado { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; text-align: center; font-size: .74rem; line-height: 1.3; color: var(--m-fraco); }
.mot-estado b { color: var(--m-texto); font-size: .8rem; }
.mot-giro { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(116, 255, 82, .25); border-top-color: var(--m-a1); animation: motGira 1s linear infinite; }
@keyframes motGira { to { transform: rotate(360deg); } }
.mot-estado.falhou { color: #ffb4ab; }
.mot-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.mot-rodape span { font-size: .74rem; color: var(--m-fraco); }
.mot-rodape span b { color: var(--m-a2); }
.mot-acoes { display: flex; gap: 8px; }
.mot-baixar, .mot-apagar { min-height: 38px; padding: 0 14px; border-radius: 10px; font-weight: 800; font-size: .8rem; cursor: pointer; }
.mot-baixar { border: 1px solid rgba(116, 255, 82, .5); background: transparent; color: var(--m-a1); }
.mot-apagar { border: 1px solid var(--m-linha); background: transparent; color: var(--m-fraco); }
.mot-fala-dele { margin-top: 6px; font-size: .74rem; color: var(--m-fraco); overflow-wrap: anywhere; }
@media (max-width: 360px) {
  .mot-marca b { font-size: .94rem; letter-spacing: .03em; }
  .mot-passos { gap: 7px; }
  .mot-t { font-size: .72rem; }
  .mot-selo, .mot-tempo { font-size: .56rem; padding: 2px 6px; }
  .mot-caixa.com-trocar .mot-selo { top: 26px; }
  .mot-enviar { font-size: .64rem; padding: 6px 7px; }
}
@media (prefers-reduced-motion: reduce) { .mot-giro { animation: none; } }
/* A PORCENTAGEM do video andando (26/10, pedido dele: "a barrinha de
   porcentagem, igual tem no Flow, com as cores do Kling"): o numero e a barra
   no verde do Motion. A barra estreita (70%) passa longe do ⇄ do meio, e a
   margem da esquerda tira o "Fazendo o seu vídeo…" de baixo dele. */
.mot-estado.andando { gap: 6px; padding: 30px 10px 10px 24px; }
.mot-estado .mot-pct { font-size: 1.3rem; font-weight: 900; line-height: 1; color: var(--m-a1); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(116, 255, 82, .35); }
.mot-barra { display: block; width: min(120px, 70%); height: 6px; border-radius: 99px; background: rgba(116, 255, 82, .16); overflow: hidden; }
.mot-barra > span { display: block; height: 100%; border-radius: 99px; background: var(--m-grad); box-shadow: 0 0 8px rgba(116, 255, 82, .55); transition: width .9s linear; }
.mot-estado .mot-seg { font-size: .7rem; }
@media (prefers-reduced-motion: reduce) { .mot-barra > span { transition: none; } }
@media (max-width: 360px) { .mot-estado.andando .mot-giro { width: 22px; height: 22px; } }
/* O "Salvar no iPhone" e o "Baixando… 42%" (26/10) sao mais compridos que o
   "Baixar": a 320 px a FILEIRA quebra (o Apagar desce) — nunca o texto dentro
   do botao. */
.mot-acoes { flex-wrap: wrap; }
.mot-acoes > button { white-space: nowrap; }
/* O BRILHO PREMIUM DO MOTION (25/10, pedido dele, com os prints: "tem que deixar
   mais bonito esses botoes tipo os outros com brilho"): o mesmo desenho do
   brilho do Gemini, nas cores do Motion (o verde neon #74ff52 e o lima
   #99eb2f) — o aro fino com luz em volta do cartao, o "MOTION CONTROL" com um
   reflexo que passa, a onda respirando com luz, um brilho que atravessa o
   Entrar e o Gerar, e a faixa do topo com uma luz correndo. So no Motion (o
   resto do app nao muda). Parado pra quem pede menos movimento no aparelho. */
.motion-cartao {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(116, 255, 82, .13), rgba(153, 235, 47, .05)) padding-box,
    linear-gradient(var(--m-fundo), var(--m-fundo)) padding-box,
    linear-gradient(115deg, rgba(116, 255, 82, .95), rgba(153, 235, 47, .5) 35%, rgba(214, 255, 140, .45) 62%, rgba(116, 255, 82, .9)) border-box;
  box-shadow: 0 0 18px rgba(116, 255, 82, .2), 0 0 36px rgba(153, 235, 47, .1);
  transition: box-shadow .25s ease;
}
.motion-cartao:hover { box-shadow: 0 0 24px rgba(116, 255, 82, .32), 0 0 44px rgba(153, 235, 47, .16); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .motion-cartao-texto b, #screen-motion .mot-marca b {
    background: linear-gradient(100deg, #74ff52 0%, #74ff52 38%, #e9ffd9 46%, #fff 50%, #e2ff9e 54%, #99eb2f 62%, #99eb2f 100%);
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 8px rgba(116, 255, 82, .35));
    animation: motReflexo 6s ease-in-out infinite;
  }
}
@keyframes motReflexo { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0% 0; } }
.motion-onda, .mot-onda {
  filter: drop-shadow(0 0 3px rgba(116, 255, 82, .9)) drop-shadow(0 0 9px rgba(116, 255, 82, .45));
  animation: motRespira 4.5s ease-in-out infinite;
}
@keyframes motRespira {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(116, 255, 82, .9)) drop-shadow(0 0 9px rgba(116, 255, 82, .45)); }
  50% { filter: drop-shadow(0 0 5px rgba(153, 235, 47, 1)) drop-shadow(0 0 16px rgba(116, 255, 82, .65)); }
}
/* O Entrar e o Gerar: luz em volta e um brilho que atravessa de tempos em tempos. */
.motion-cartao-entrar, #screen-motion .mot-gerar { position: relative; overflow: hidden; }
.motion-cartao-entrar { box-shadow: 0 0 14px rgba(116, 255, 82, .45), 0 0 26px rgba(153, 235, 47, .2); }
#screen-motion .mot-gerar { box-shadow: 0 0 18px rgba(116, 255, 82, .4), 0 10px 34px rgba(116, 255, 82, .25); transition: transform .12s ease, box-shadow .25s ease; }
#screen-motion .mot-gerar:not(:disabled):hover { box-shadow: 0 0 26px rgba(116, 255, 82, .55), 0 12px 40px rgba(116, 255, 82, .32); }
#screen-motion .mot-gerar:not(:disabled):active { transform: scale(.985); }
.motion-cartao-entrar::after, #screen-motion .mot-gerar::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: translateX(-130%) skewX(-20deg); animation: motCorre 5.5s ease-in-out infinite;
}
#screen-motion .mot-gerar:disabled::after { display: none; }
@keyframes motCorre { 0%, 62% { transform: translateX(-130%) skewX(-20deg); } 92%, 100% { transform: translateX(260%) skewX(-20deg); } }
/* TRANCADO (28/10, ele: "todos os cards pra todo mundo... quem nao for assinante
   consegue ver, mas nao consegue clicar"): o cartao aparece inteiro, com as cores
   dele; so o botao vira o cadeado (tracejado, sem brilho) e nada clica. */
.gerar-entrada.trancado, .extras-cartao.trancado, .gemini-cartao.trancado, .motion-cartao.trancado { cursor: default; color: inherit; }
.gerar-entrada.trancado:active { transform: none; }
.gerar-entrada.trancado .gerar-entrada-estado { display: none; }
.gerar-entrada.trancado .gerar-entrada-entrar,
.extras-cartao.trancado .extras-cartao-ver, .gemini-cartao.trancado .gemini-cartao-entrar, .motion-cartao.trancado .motion-cartao-entrar {
  background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .72); border: 1px dashed rgba(255, 255, 255, .28); box-shadow: none;
}
.gerar-entrada.trancado .gerar-entrada-entrar, .extras-cartao.trancado .extras-cartao-ver { font-size: 0; }
.gerar-entrada.trancado .gerar-entrada-entrar span, .extras-cartao.trancado .extras-cartao-ver span { display: none; }
.gerar-entrada.trancado .gerar-entrada-entrar::after { content: "🔒 Não incluso no seu plano"; font-size: .86rem; }
.extras-cartao.trancado .extras-cartao-ver::after { content: "🔒"; font-size: .9rem; }
@media (hover: hover) { .gerar-entrada.trancado:hover .gerar-entrada-entrar { background: rgba(255, 255, 255, .07); } }
.gemini-cartao.trancado .gemini-cartao-entrar span, .motion-cartao.trancado .motion-cartao-entrar span { display: none; }
.gemini-cartao.trancado .gemini-cartao-entrar::before, .gemini-cartao.trancado .gemini-cartao-entrar::after,
.motion-cartao.trancado .motion-cartao-entrar::after { display: none; }
/* A faixa verde do topo: luz em volta e uma luz que corre por ela. */
#screen-motion .mot-faixa { position: relative; overflow: hidden; opacity: 1; box-shadow: 0 0 10px rgba(116, 255, 82, .55), 0 0 20px rgba(116, 255, 82, .25); }
#screen-motion .mot-faixa::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-120%); animation: motFaixa 4s ease-in-out infinite;
}
@keyframes motFaixa { 0%, 40% { transform: translateX(-120%); } 90%, 100% { transform: translateX(440%); } }
/* O resto com luz parada: o saldo, o Enviar, o +, a caixa vazia, o escolhido, o 10 s, o DEPOIS, o Baixar. */
#screen-motion .mot-saldo { box-shadow: 0 0 12px rgba(116, 255, 82, .45), 0 0 22px rgba(153, 235, 47, .2); }
#screen-motion .mot-enviar { box-shadow: 0 0 10px rgba(116, 255, 82, .25), inset 0 0 10px rgba(116, 255, 82, .08); text-shadow: 0 0 8px rgba(116, 255, 82, .45); }
#screen-motion .mot-enviar:hover { background: rgba(116, 255, 82, .1); }
#screen-motion .mot-mais { text-shadow: 0 0 8px rgba(116, 255, 82, .8), 0 0 16px rgba(116, 255, 82, .4); }
#screen-motion .mot-caixa:not(.cheia):hover { border-color: rgba(116, 255, 82, .55); box-shadow: inset 0 0 14px rgba(116, 255, 82, .16); }
#screen-motion .mot-pronto.on img { box-shadow: 0 0 14px rgba(116, 255, 82, .5); }
#screen-motion .mot-chip.on { box-shadow: 0 0 12px rgba(116, 255, 82, .3); text-shadow: 0 0 8px rgba(116, 255, 82, .4); }
#screen-motion .mot-tempo { box-shadow: 0 0 8px rgba(116, 255, 82, .5); }
#screen-motion .mot-ad .mot-depois figcaption { box-shadow: 0 0 10px rgba(116, 255, 82, .5); }
#screen-motion .mot-troca { box-shadow: 0 0 12px rgba(116, 255, 82, .55); }
#screen-motion .mot-baixar { box-shadow: 0 0 10px rgba(116, 255, 82, .22); text-shadow: 0 0 8px rgba(116, 255, 82, .4); }
@media (prefers-reduced-motion: reduce) {
  .motion-cartao-texto b, #screen-motion .mot-marca b, .motion-onda, .mot-onda,
  .motion-cartao-entrar::after, #screen-motion .mot-gerar::after, #screen-motion .mot-faixa::after, #screen-motion .mot-l-juntar::after { animation: none; }
  .motion-cartao-entrar::after, #screen-motion .mot-gerar::after, #screen-motion .mot-faixa::after, #screen-motion .mot-l-juntar::after { display: none; }
}
/* A LINHA DO TEMPO DO MOTION (25/10, pedido dele: "uma timeline, com edicao, e
   juntar videos tipo o do Flow, mas com as cores do Kling"; sem o Estender). O
   editor da Cena do Flow e da linha do Gemini — o player que toca a sequencia,
   a regua, os blocos com a largura dos segundos, as alcas de cortar, a agulha,
   o Dividir — com a paleta e o brilho do Motion: as alcas e o escolhido no
   verde, a agulha branca com a bolinha verde, o Juntar com o brilho do Gerar.
   O --pps e o mesmo da Cena (14 px por segundo; 26 na tela larga): o JS mede
   com o ppsCena. Com o editor aberto, o resto da tela sai da frente (o topo fica). */
#screen-motion .mot-tela.com-linha > :is(.mot-novo, .mot-sem, .mot-lista-topo, .mot-lista) { display: none; }
#screen-motion .mot-linha { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
#screen-motion .mot-linha[hidden] { display: none; }
.mot-l-topo { display: flex; align-items: center; gap: 8px; }
.mot-l-voltar { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--m-linha); background: transparent; color: var(--m-texto); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.mot-l-titulo {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border-radius: 999px; background: var(--m-cartao); border: 1px solid var(--m-linha); font-size: .9rem; font-weight: 800;
}
.mot-l-titulo svg { width: 18px; height: 18px; flex-shrink: 0; fill: var(--m-a1); filter: drop-shadow(0 0 4px rgba(116, 255, 82, .6)); }
.mot-l-titulo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mot-l-juntar {
  flex-shrink: 0; position: relative; overflow: hidden; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--m-grad); color: #0e0f0f; font-weight: 900; font-size: .84rem; white-space: nowrap;
  box-shadow: 0 0 14px rgba(116, 255, 82, .45), 0 0 26px rgba(153, 235, 47, .2);
}
#screen-motion .mot-l-juntar::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: translateX(-130%) skewX(-20deg); animation: motCorre 5.5s ease-in-out infinite;
}
.mot-l-juntar:disabled { background: var(--m-cartao2); color: #5f6368; box-shadow: none; cursor: default; }
#screen-motion .mot-l-juntar:disabled::after { display: none; }
/* O palco: preto, com o aro fino de luz do cartao do Motion. */
.mot-l-palco {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 12px 6px; border-radius: 20px;
  border: 1px solid transparent;
  background: linear-gradient(#000, #000) padding-box,
    linear-gradient(115deg, rgba(116, 255, 82, .6), rgba(153, 235, 47, .12) 38%, rgba(116, 255, 82, .08) 62%, rgba(116, 255, 82, .5)) border-box;
  box-shadow: 0 0 22px rgba(116, 255, 82, .12);
}
.mot-l-player { position: relative; height: min(44vh, 400px); aspect-ratio: 9 / 16; max-width: 100%; border-radius: 12px; overflow: hidden; background: #111; }
.mot-l-player.paisagem { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.mot-l-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.mot-l-formato {
  position: absolute; top: 8px; left: 8px; z-index: 1; font-size: .66rem; font-weight: 900; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: var(--m-a2); pointer-events: none;
}
.mot-l-vazia {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  text-align: center; color: var(--m-fraco); font-size: .86rem; line-height: 1.4;
}
.mot-l-vazia[hidden] { display: none; }
.mot-l-transporte { display: flex; align-items: center; gap: 6px; color: var(--m-fraco); font-size: .8rem; font-variant-numeric: tabular-nums; }
.mot-l-transporte button {
  width: 40px; height: 40px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--m-texto); display: inline-flex; align-items: center; justify-content: center;
}
.mot-l-transporte button svg { width: 22px; height: 22px; fill: currentColor; }
.mot-l-transporte button:disabled { opacity: .35; cursor: default; }
.mot-l-transporte .mot-l-play { background: var(--m-grad); color: #0e0f0f; box-shadow: 0 0 14px rgba(116, 255, 82, .5); }
.mot-l-transporte .mot-l-play:disabled { box-shadow: none; }
.mot-l-tempo { margin-left: 8px; white-space: nowrap; color: var(--m-texto); }
/* A linha: a regua dos segundos (onde a agulha tambem se arrasta), os blocos e o +. */
.mot-l-faixa-topo { display: flex; justify-content: space-between; gap: 8px; margin: 2px 4px -4px; font-size: .72rem; color: var(--m-fraco); }
.mot-l-faixa-topo b { color: var(--m-a2); font-weight: 800; }
.mot-l-rolo {
  --pps: 14px; position: relative; overflow-x: auto; padding: 6px 10px 10px; border-radius: 16px;
  background: var(--m-cartao); border: 1px solid var(--m-linha);
  scrollbar-width: thin; scrollbar-color: rgba(116, 255, 82, .35) transparent;
}
@media (min-width: 900px) { .mot-l-rolo { --pps: 26px; } }
.mot-l-regua {
  display: flex; height: 22px; width: max-content; font-size: 10px; color: var(--m-fraco); white-space: nowrap;
  cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none;
}
.mot-l-regua span { flex: 0 0 calc(var(--pps) * 2); border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 3px; line-height: 12px; }
.mot-l-trilha { display: flex; gap: 4px; height: 64px; width: max-content; }
/* O bloco: a miniatura do video repetida (como a fita da Cena do Flow). */
.mot-l-clipe {
  position: relative; flex: 0 0 auto; width: calc(var(--s) * var(--pps)); min-width: 28px; height: 64px; padding: 0;
  border-radius: 10px; border: 2px solid transparent; cursor: pointer; color: #fff; font-family: inherit;
  background-color: #000; background-repeat: repeat-x; background-size: auto 100%; background-position: left center;
}
.mot-l-clipe.on { border-color: var(--m-a1); box-shadow: 0 0 12px rgba(116, 255, 82, .55); }
.mot-l-clipe:focus-visible { outline: 2px solid var(--m-a1); outline-offset: 2px; }
.mot-l-clipe video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; pointer-events: none; background: #000; }
.mot-l-clipe.falhou {
  display: flex; align-items: center; justify-content: center; background: rgba(242, 139, 130, .12);
  border: 2px dashed rgba(242, 139, 130, .6); color: #f28b82; font-size: 12px; font-weight: 700;
}
.mot-l-dur {
  position: absolute; left: 14px; bottom: 4px; font-size: 11px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95); pointer-events: none;
}
/* As alcas de cortar: 12 px de verde, e o dedo pega 28 (o ::before). */
.mot-l-alca {
  position: absolute; top: -2px; bottom: -2px; width: 12px; z-index: 1; background: var(--m-grad);
  display: flex; align-items: center; justify-content: center; touch-action: none; cursor: ew-resize;
}
.mot-l-alca::before { content: ""; position: absolute; top: 0; bottom: 0; left: -8px; right: -8px; }
.mot-l-alca::after { content: ""; width: 2px; height: 18px; border-radius: 2px; background: #0e0f0f; }
.mot-l-alca.esq { left: -2px; border-radius: 10px 0 0 10px; }
.mot-l-alca.dir { right: -2px; border-radius: 0 10px 10px 0; }
.mot-l-mais {
  flex: 0 0 56px; height: 64px; padding: 0; border-radius: 10px; cursor: pointer;
  border: 1.5px dashed rgba(116, 255, 82, .55); background: rgba(116, 255, 82, .06); color: var(--m-a1);
  display: inline-flex; align-items: center; justify-content: center;
}
.mot-l-mais svg { width: 26px; height: 26px; fill: currentColor; filter: drop-shadow(0 0 6px rgba(116, 255, 82, .7)); }
.mot-l-mais:disabled { opacity: .35; cursor: default; }
/* A agulha: branca, com a bolinha verde em cima; pega 24 px de dedo (o ::after).
   As alcas ficam por cima dela (z-index 1). */
.mot-l-agulha {
  position: absolute; top: 4px; bottom: 6px; width: 2px; border-radius: 2px; background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, .55); cursor: ew-resize; touch-action: none;
}
.mot-l-agulha::before {
  content: ""; position: absolute; top: -4px; left: -5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--m-a1); box-shadow: 0 0 8px rgba(116, 255, 82, .9);
}
.mot-l-agulha::after { content: ""; position: absolute; top: 0; bottom: 0; left: -11px; right: -11px; }
.mot-l-agulha[hidden] { display: none; }
/* O video escolhido: o texto numa linha e os botoes (mover, Dividir, Deletar)
   na de baixo, de ponta a ponta — a tela do Motion tem no maximo 430 px, e o
   texto ao lado dos 4 botoes quebrava em 3 linhas a 390 (medido no desenho). */
.mot-l-selecao { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; font-size: .8rem; color: var(--m-fraco); }
.mot-l-selecao[hidden] { display: none; }
.mot-l-selecao strong { color: var(--m-texto); }
.mot-l-botoes { display: grid; grid-template-columns: 40px 40px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.mot-l-botoes button {
  min-height: 38px; min-width: 0; padding: 0 10px; border-radius: 999px; border: 1px solid var(--m-linha); cursor: pointer;
  background: var(--m-cartao2); color: var(--m-texto); display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-family: inherit; font-size: .8rem; font-weight: 700;
}
.mot-l-botoes button svg { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }
.mot-l-botoes button:disabled { opacity: .35; cursor: default; }
/* Sem o Dividir (o video que nao esta pronto), o Deletar ocupa o lugar dele. */
.mot-l-botoes button[hidden] { display: none; }
.mot-l-botoes button[hidden] + button { grid-column: 3 / 5; }
/* O quadro do juntar: juntando, baixando, pronto, o aviso. */
.mot-l-status {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px;
  background: var(--m-cartao); border: 1px solid rgba(116, 255, 82, .35); box-shadow: inset 0 0 16px rgba(116, 255, 82, .06);
}
.mot-l-status[hidden] { display: none; }
.mot-l-estado { display: flex; align-items: flex-start; gap: 10px; }
.mot-l-estado strong { display: block; font-size: .88rem; }
.mot-l-estado p { margin-top: 2px; font-size: .76rem; color: var(--m-fraco); line-height: 1.4; }
.mot-l-estado .mot-giro { width: 22px; height: 22px; flex-shrink: 0; border-width: 3px; }
.mot-l-ok {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--m-grad); color: #0e0f0f; font-size: .74rem; font-weight: 900; box-shadow: 0 0 10px rgba(116, 255, 82, .55);
}
.mot-l-estado.falhou strong { color: #ffb4ab; }
.mot-l-barra { height: 4px; margin-top: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.mot-l-barra i { display: block; height: 100%; width: 0; background: var(--m-grad); transition: width .2s ease; }
.mot-l-acao {
  min-height: 44px; border: 0; border-radius: 12px; cursor: pointer; background: var(--m-grad); color: #0e0f0f;
  font-family: inherit; font-weight: 900; font-size: .88rem; box-shadow: 0 0 14px rgba(116, 255, 82, .35);
}
.mot-l-erro { padding: 10px 12px; border-radius: 12px; background: rgba(252, 65, 61, .12); border: 1px solid rgba(252, 65, 61, .4); color: #ffd5d3; font-size: .8rem; }
.mot-l-erro[hidden] { display: none; }
.mot-l-dica {
  display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px;
  background: rgba(116, 255, 82, .06); border: 1px solid rgba(116, 255, 82, .18); font-size: .76rem; color: var(--m-fraco); line-height: 1.4;
}
.mot-l-dica b { color: var(--m-a2); }
.mot-l-nota { font-size: .74rem; color: #6f747a; text-align: center; line-height: 1.45; }
.mot-l-limpar { align-self: center; min-height: 40px; padding: 0 14px; border: 0; background: transparent; color: #f28b82; font-family: inherit; font-weight: 700; font-size: .8rem; cursor: pointer; }
.mot-l-limpar:disabled { opacity: .35; cursor: default; }
/* "Seus videos": o botao da linha do tempo (com quantos estao nela), o "+ Linha"
   de cada video e o cartao do video JUNTADO (o video e as capas dos que entraram). */
.mot-lista-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 10px; }
.mot-lista-topo[hidden] { display: none; }
.mot-lista-topo .mot-h2 { margin: 0; }
.mot-linha-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(116, 255, 82, .5); background: rgba(116, 255, 82, .06); color: var(--m-a1);
  font-family: inherit; font-weight: 800; font-size: .78rem; white-space: nowrap; box-shadow: 0 0 10px rgba(116, 255, 82, .2);
}
.mot-linha-btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }
.mot-linha-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--m-grad); color: #0e0f0f;
  font-size: .66rem; font-weight: 900; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.mot-linha-n[hidden] { display: none; }
.mot-por { min-height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--m-linha); background: transparent; color: var(--m-texto); font-weight: 800; font-size: .8rem; cursor: pointer; }
.mot-por.na-linha { color: var(--m-a2); border-color: rgba(153, 235, 47, .4); }
.mot-mosaico { position: relative; min-width: 0; margin: 0; aspect-ratio: 9 / 14; border-radius: 10px; overflow: hidden; background: #111; display: grid; gap: 2px; }
.mot-mosaico.n2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.mot-mosaico.n3, .mot-mosaico.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.mot-mosaico.n3 img:first-child { grid-row: 1 / 3; }
.mot-mosaico img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }
.mot-mosaico figcaption { position: absolute; left: 7px; top: 7px; font-size: .62rem; font-weight: 900; letter-spacing: .08em; padding: 3px 7px; border-radius: 999px; background: rgba(0, 0, 0, .65); pointer-events: none; }
.mot-mosaico .mot-mais-n { position: absolute; right: 7px; bottom: 7px; font-size: .66rem; font-weight: 900; padding: 3px 7px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: var(--m-a2); pointer-events: none; }
/* A janela do "+": os videos prontos dela, em 3 colunas. */
.mot-escolha { position: fixed; inset: 0; z-index: 950; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .66); }
.mot-escolha[hidden] { display: none; }
.mot-escolha-caixa {
  width: 100%; max-width: 430px; max-height: 82vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; color: var(--m-texto);
  background: var(--m-cartao); border: 1px solid rgba(116, 255, 82, .3); border-bottom: 0; box-shadow: 0 -10px 40px rgba(116, 255, 82, .12);
}
.mot-escolha-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mot-escolha-topo h3 { font-size: 1rem; font-weight: 800; }
.mot-escolha-fechar { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--m-cartao2); color: var(--m-texto); font-size: 1rem; font-family: inherit; }
.mot-escolha-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mot-escolha-item { position: relative; aspect-ratio: 9 / 14; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; cursor: pointer; background: #111; }
.mot-escolha-item:hover, .mot-escolha-item:focus-visible { border-color: var(--m-a1); box-shadow: 0 0 12px rgba(116, 255, 82, .45); outline: 0; }
.mot-escolha-item img, .mot-escolha-item video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.mot-escolha-item span { position: absolute; right: 6px; top: 6px; font-size: .62rem; font-weight: 900; padding: 3px 7px; border-radius: 999px; background: var(--m-grad); color: #0e0f0f; pointer-events: none; }
.mot-escolha-aviso { grid-column: 1 / -1; font-size: .82rem; color: var(--m-fraco); }
/* Ate 360 px os espacos apertam: a 320, com o "Juntar e baixar", o "Linha do
   tempo" saia cortado (medido no desenho). */
@media (max-width: 359px) {
  .mot-l-topo { gap: 6px; }
  .mot-l-voltar { width: 34px; }
  .mot-l-titulo { padding: 0 10px; font-size: .8rem; }
  .mot-l-titulo svg { display: none; }
  .mot-l-juntar { padding: 0 10px; font-size: .74rem; font-weight: 800; }
  .mot-l-tempo { margin-left: 4px; font-size: .74rem; }
  .mot-linha-btn { padding: 0 10px; }
}

/* ── O TK LABS - CREATOR (27/10, pedido dele: "quero o nome da nossa automacao
   em um card novo abaixo do MOTION CONTROL") ──────────────────────────────────
   A ferramenta nova (UGC, POV ou Movimento) ainda nao existe: o cartao so
   anuncia — o "EM BREVE" no lugar do Entrar, contornado e nao cheio, pra nao
   parecer botao — e nao abre nada. Nas cores do TK LABS: o roxo (#a855f7,
   #c084fc) e o ciano (#67e8f9) do app dele, e o rosa do logo dele (#f0abfc).
   VIVO (27/10, ele: "o card esta vivo? com brilho iguais os outros? quero bem
   bonito e atrativo"): o que os outros tem (o nome com o reflexo que passa, o
   icone respirando, o brilho que atravessa a pilula) e mais: uma LUZ QUE CORRE
   EM VOLTA do aro, o cartao inteiro respirando luz, o raio piscando como
   eletricidade, e a bolinha do EM BREVE pulsando. Tudo parado pra quem pede menos
   movimento no aparelho; sem @property (aparelho antigo), a luz do aro fica
   parada no alto — o 0deg do var() segura. */
@property --creator-aro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.creator-cartao {
  --c-fundo: #07060d; --c-fraco: #9b93b5; --c-a1: #c084fc; --c-a2: #67e8f9;
  display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 430px;
  margin: 0 auto 14px; padding: 12px 12px 12px 14px; border-radius: 16px; border: 1.5px solid transparent;
  background: linear-gradient(135deg, rgba(168, 85, 247, .16), rgba(103, 232, 249, .06)) padding-box,
    linear-gradient(var(--c-fundo), var(--c-fundo)) padding-box,
    conic-gradient(from var(--creator-aro, 0deg), rgba(168, 85, 247, .5) 0deg, rgba(168, 85, 247, .5) 190deg,
      rgba(103, 232, 249, .95) 250deg, #fff 285deg, rgba(240, 171, 252, .95) 315deg, rgba(168, 85, 247, .5) 360deg) border-box;
  box-shadow: 0 0 18px rgba(168, 85, 247, .25), 0 0 36px rgba(103, 232, 249, .08);
  animation: creatorAro 4.5s linear infinite, creatorLuz 4s ease-in-out infinite;
  color: #fff; font-size: .86rem; line-height: 1.35; text-align: left;
}
@keyframes creatorAro { to { --creator-aro: 360deg; } }
@keyframes creatorLuz {
  0%, 100% { box-shadow: 0 0 18px rgba(168, 85, 247, .25), 0 0 36px rgba(103, 232, 249, .08); }
  50% { box-shadow: 0 0 26px rgba(168, 85, 247, .45), 0 0 50px rgba(103, 232, 249, .18); }
}
.creator-cartao[hidden] { display: none; }
.creator-cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 2px; }
.creator-cartao-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.creator-cartao-texto b { display: flex; align-items: center; gap: 7px; font-size: .95rem; font-weight: 900; letter-spacing: .05em; color: var(--c-a1); overflow-wrap: anywhere; }
.creator-cartao-texto small { font-size: .72rem; font-weight: 800; letter-spacing: .1em; color: var(--c-fraco); }
/* O RAIO (27/10, ele: a estrela "ficou muito parecido com a do GEMINI"; "um
   Raio, alguma coisa que remeta a automacao"): do ciano claro ao roxo, com luz
   respirando e, de tempos em tempos, o PISCA da eletricidade (acende, falha,
   acende de novo) — no lugar do girar da estrela. */
.creator-raio {
  width: 19px; height: 19px; flex-shrink: 0; transform-origin: 50% 50%;
  filter: drop-shadow(0 0 3px rgba(103, 232, 249, .9)) drop-shadow(0 0 9px rgba(168, 85, 247, .5));
  animation: creatorRespira 4.5s ease-in-out infinite, creatorRaio 3s ease-in-out infinite;
}
@keyframes creatorRespira {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(103, 232, 249, .9)) drop-shadow(0 0 9px rgba(168, 85, 247, .5)); }
  50% { filter: drop-shadow(0 0 5px rgba(103, 232, 249, 1)) drop-shadow(0 0 16px rgba(192, 132, 252, .7)); }
}
@keyframes creatorRaio {
  0%, 60%, 100% { transform: scale(1); opacity: 1; }
  63% { transform: scale(1.22); opacity: 1; }
  66% { transform: scale(1.1); opacity: .3; }
  69% { transform: scale(1.18); opacity: 1; }
  72% { transform: scale(1.08); opacity: .5; }
  76% { transform: scale(1); opacity: 1; }
}
/* O EM BREVE: a bolinha pulsando (como o ACESSO ATIVO) e o brilho que
   atravessa (como o Entrar dos outros). */
.creator-cartao-breve {
  position: relative; overflow: hidden;
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
  border: 1px solid rgba(192, 132, 252, .6); background: rgba(168, 85, 247, .12); color: var(--c-a1);
  font-weight: 900; font-size: .68rem; letter-spacing: .1em; white-space: nowrap;
  box-shadow: 0 0 12px rgba(168, 85, 247, .3), inset 0 0 10px rgba(168, 85, 247, .12);
}
.creator-cartao-breve::before {
  content: ""; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%;
  background: var(--c-a2); box-shadow: 0 0 8px var(--c-a2);
  animation: creatorPonto 1.6s ease-in-out infinite;
}
@keyframes creatorPonto { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.creator-cartao-breve::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: translateX(-130%) skewX(-20deg); animation: creatorCorre 5.5s ease-in-out infinite;
}
@keyframes creatorCorre { 0%, 62% { transform: translateX(-130%) skewX(-20deg); } 92%, 100% { transform: translateX(260%) skewX(-20deg); } }
.creator-cartao-info { display: block; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff; font-weight: 700; }
/* Os logos do TikTok Shop e do Kwai (27/10, pedido dele), em pilulas com o nome
   do lado; a fileira quebra antes de passar da tela. A sacola do TikTok Shop e
   branca com a nota escura e o "tremido" ciano e vermelho do TikTok (3 copias
   da nota pelo <use>: o filter do CSS em pecas de SVG falha no Safari). */
.creator-cartao-redes { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 2px; }
.creator-rede {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 3px 12px 3px 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #fff;
  font-size: .76rem; font-weight: 800; white-space: nowrap;
}
.creator-rede-logo { width: 24px; height: 24px; flex-shrink: 0; display: block; filter: drop-shadow(0 0 4px rgba(37, 244, 238, .35)) drop-shadow(0 0 6px rgba(254, 44, 85, .25)); }
.creator-sacola { fill: #fff; }
.creator-sacola-alca { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; }
.creator-rede-kwai {
  width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; background: #fe4529; box-shadow: 0 0 10px rgba(254, 69, 41, .45);
}
.creator-rede-kwai svg { width: 16px; height: 16px; display: block; fill: #fff; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .creator-cartao-texto b {
    background: linear-gradient(100deg, #c084fc 0%, #c084fc 38%, #f3e8ff 46%, #fff 50%, #cffafe 54%, #67e8f9 62%, #67e8f9 100%);
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, .35));
    animation: creatorReflexo 6s ease-in-out infinite;
  }
}
@keyframes creatorReflexo { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0% 0; } }
/* LIBERADO (27/10, o motor no ar): pra quem tem o CREATOR (saldo ou ja usou), a
   tela troca o EM BREVE pelo "Entrar ›" cheio, sem a bolinha, e o cartao abre a
   tela. Pros outros, segue o anuncio. */
.creator-cartao.liberado { cursor: pointer; }
.creator-cartao.liberado:focus-visible { outline: 2px solid #67e8f9; outline-offset: 3px; }
.creator-cartao.liberado .creator-cartao-breve { border-color: transparent; background: linear-gradient(110deg, #a855f7, #c084fc 45%, #67e8f9); color: #0b0912; letter-spacing: .04em; font-size: .78rem; }
.creator-cartao.liberado .creator-cartao-breve::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .creator-cartao, .creator-cartao-texto b, .creator-raio, .creator-cartao-breve::before { animation: none; }
  .creator-cartao-breve::after { display: none; }
}

/* ── A TELA DO TK LABS - CREATOR (27/10, decisoes dele: no FLOW, o cliente manda
   PRODUTO + MODELO + FALA, saldo de videos, "os 3 iguais") ───────────────────
   O prototipo que ele aprovou. CADA FORMATO COM A SUA COR (ele: "clicou no
   movimento, ai o aplicativo mudasse de cor... o movimento ficasse cada cor do
   Kling"): a tela inteira troca o jogo de cores pelo data-formato — UGC no roxo
   e ciano do TK LABS (a marca), POV no ambar e laranja, MOVIMENTO no verde neon
   do Kling. As luzes usam o "r, g, b" (--c-rgb1/--c-rgb2) dentro do rgba().
   Celular primeiro: uma coluna, botoes com 40+ px de dedo, campo de texto com
   16 px (menos o iPhone da zoom), nada passa da tela a 320 px. Tudo preso a
   #screen-creator e as pecas .cre-*. */
#screen-creator {
  --c-fundo: #07060d; --c-cartao: #13101e; --c-campo: #0d0b14; --c-linha: rgba(255, 255, 255, .09);
  --c-texto: #fff; --c-fraco: #9b93b5;
  --c-a1: #c084fc; --c-a2: #67e8f9; --c-rgb1: 168, 85, 247; --c-rgb2: 103, 232, 249; --c-tinta: #0b0912;
  --c-grad: linear-gradient(110deg, #a855f7 0%, #c084fc 45%, #67e8f9 100%);
  justify-content: flex-start; padding: 0; background: var(--c-fundo); color: var(--c-texto);
  transition: background-color .35s ease;
}
#screen-creator[data-formato="pov"] {
  --c-fundo: #0d0905; --c-cartao: #1a130c; --c-campo: #120d08; --c-fraco: #b39d86;
  --c-a1: #ffb23e; --c-a2: #ff7a3d; --c-rgb1: 255, 138, 0; --c-rgb2: 255, 106, 61; --c-tinta: #1a0f00;
  --c-grad: linear-gradient(110deg, #ff6a3d 0%, #ff8a00 45%, #ffc23d 100%);
}
#screen-creator[data-formato="movimento"] {
  --c-fundo: #0e0f0f; --c-cartao: #1a1a1a; --c-campo: #111212; --c-fraco: #8c9096;
  --c-a1: #74ff52; --c-a2: #99eb2f; --c-rgb1: 116, 255, 82; --c-rgb2: 153, 235, 47; --c-tinta: #0e0f0f;
  --c-grad: linear-gradient(110deg, #74ff52 0%, #74ff52 40%, #99eb2f 100%);
}
#screen-creator [hidden] { display: none !important; }
#screen-creator button, #screen-creator input, #screen-creator textarea { font-family: inherit; }
#screen-creator button:focus-visible, #screen-creator textarea:focus-visible, #screen-creator input:focus-visible { outline: 2px solid var(--c-a2); outline-offset: 2px; }
.cre-tela { width: 100%; max-width: 430px; margin: 0 auto; padding: 14px 16px 40px; }
.cre-topo { display: flex; align-items: center; gap: 10px; }
.cre-voltar { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--c-linha); background: transparent; color: var(--c-fraco); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.cre-marca { flex: 1; min-width: 0; }
.cre-marca b { display: flex; align-items: center; gap: 7px; font-size: 1.08rem; font-weight: 900; letter-spacing: .05em; color: var(--c-a1); overflow-wrap: anywhere; transition: color .35s ease; }
.cre-marca small { display: block; color: var(--c-fraco); font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.cre-raio { width: 20px; height: 20px; flex-shrink: 0; filter: drop-shadow(0 0 3px rgba(var(--c-rgb2), .9)) drop-shadow(0 0 9px rgba(var(--c-rgb1), .5)); }
.cre-saldo { flex-shrink: 0; padding: 6px 11px; border-radius: 999px; font-weight: 800; font-size: .78rem; color: var(--c-tinta); background: var(--c-grad); white-space: nowrap;
  box-shadow: 0 0 12px rgba(var(--c-rgb1), .45), 0 0 22px rgba(var(--c-rgb2), .2); }
.cre-faixa { height: 3px; border-radius: 3px; margin: 12px 0 6px; background: var(--c-grad); box-shadow: 0 0 10px rgba(var(--c-rgb1), .55), 0 0 20px rgba(var(--c-rgb2), .2); }
.cre-h2 { font-size: .72rem; letter-spacing: .14em; color: var(--c-fraco); font-weight: 800; margin: 18px 0 10px; text-transform: uppercase; }
.cre-aviso { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 92, 92, .1); border: 1px solid rgba(255, 92, 92, .42); color: #ffd6d6; font-size: .82rem; line-height: 1.4; }

/* 1 · O formato: cada cartao SEMPRE na cor dele; o escolhido ganha o aro e a luz. */
.cre-formatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cre-formato {
  --f-a1: #c084fc; --f-rgb1: 168, 85, 247; --f-grad: linear-gradient(110deg, #a855f7, #c084fc 45%, #67e8f9);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; min-height: 112px; padding: 10px 9px; border-radius: 14px;
  border: 1px solid var(--c-linha); background: var(--c-cartao); color: var(--c-texto); text-align: left; cursor: pointer;
  transition: background-color .35s ease, box-shadow .35s ease;
}
.cre-formato[data-cre-formato="pov"] { --f-a1: #ffb23e; --f-rgb1: 255, 138, 0; --f-grad: linear-gradient(110deg, #ff6a3d, #ff8a00 45%, #ffc23d); }
.cre-formato[data-cre-formato="movimento"] { --f-a1: #74ff52; --f-rgb1: 116, 255, 82; --f-grad: linear-gradient(110deg, #74ff52, #74ff52 40%, #99eb2f); }
.cre-formato b { font-size: .9rem; font-weight: 900; letter-spacing: .04em; color: var(--f-a1); }
.cre-formato small { font-size: .68rem; line-height: 1.3; color: var(--c-fraco); }
.cre-f-ico { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--f-rgb1), .16); margin-bottom: 2px; }
.cre-f-ico svg { width: 18px; height: 18px; fill: var(--f-a1); }
.cre-f-ico svg.traco { fill: none; stroke: var(--f-a1); stroke-width: 2.4; stroke-linecap: round; }
.cre-formato.on { border-color: transparent; box-shadow: 0 0 16px rgba(var(--f-rgb1), .4); }
.cre-formato.on .cre-f-ico { background: var(--f-grad); }
.cre-formato.on .cre-f-ico svg { fill: var(--c-tinta); }
.cre-formato.on .cre-f-ico svg.traco { fill: none; stroke: var(--c-tinta); }

/* 2 · As fotos: "Montar a foto" (o produto, a modelo ou as maos, o lugar) ou "Ja tenho a foto pronta". */
.cre-modo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 10px; border-radius: 12px;
  background: var(--c-cartao); border: 1px solid var(--c-linha); }
.cre-modo button { min-height: 40px; padding: 0 6px; border: 0; border-radius: 9px; background: transparent; color: var(--c-fraco); font-weight: 800; font-size: .78rem; cursor: pointer; }
.cre-modo button.on { background: rgba(var(--c-rgb1), .16); color: var(--c-a1); box-shadow: inset 0 0 0 1px rgba(var(--c-rgb1), .55); }
.cre-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.cre-slot { background: var(--c-cartao); border: 1px solid var(--c-linha); border-radius: 14px; padding: 6px; min-width: 0; }
/* O titulo com altura de 2 linhas: com ou sem o "OPCIONAL", as 3 fotos ficam alinhadas. */
.cre-t { font-size: .74rem; font-weight: 800; margin: 1px 0 6px; min-height: 2.9em; }
/* O "opcional" dos quadros com o MESMO selo dos campos (28/10, ele: "coloque o opcional destacado igual nos outros lugares"). */
.cre-opc { display: table; margin: 3px 0 0; padding: 1px 7px; border-radius: 999px; background: rgba(var(--c-rgb1), .18); border: 1px solid rgba(var(--c-rgb1), .55);
  color: var(--c-a1); font-size: .56rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
.cre-caixa { display: block; width: 100%; aspect-ratio: 9 / 13; border-radius: 9px; overflow: hidden; position: relative; padding: 0; background: var(--c-campo);
  border: 1.5px dashed rgba(var(--c-rgb1), .4); color: var(--c-fraco); cursor: pointer; }
.cre-caixa.cheia { border: 0; }
.cre-caixa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cre-vazio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 6px; text-align: center; font-size: .64rem; line-height: 1.25; }
.cre-vazio b { color: var(--c-texto); font-size: .72rem; }
.cre-mais { font-size: 1.5rem; color: var(--c-a1); line-height: 1; text-shadow: 0 0 8px rgba(var(--c-rgb1), .8); }
.cre-trocar { position: absolute; right: 5px; bottom: 5px; padding: 4px 8px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font-size: .62rem; font-weight: 800; }
/* A foto subindo pro servidor (cada uma vai sozinha) e a que nao subiu. */
.cre-subindo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 6px; text-align: center; background: rgba(0, 0, 0, .55);
  color: #fff; font-size: .66rem; font-weight: 800; }
.cre-subindo.erro { background: rgba(120, 0, 0, .7); }
.cre-tirar { display: block; width: 100%; margin-top: 5px; min-height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--c-fraco); font-size: .66rem; font-weight: 800; cursor: pointer; }
/* As MODELOS PRONTAS no "Eu sei criar" e a AUTORIZACAO da foto dele (28/10, ele: "pode fazer os 2"). */
.cre-prontas { margin-top: 10px; }
.cre-prontas-abrir { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(var(--c-rgb1), .45); background: rgba(var(--c-rgb1), .08); color: var(--c-texto); text-align: left; cursor: pointer; }
.cre-prontas-abrir b { font-size: .82rem; color: var(--c-a1); }
.cre-prontas-abrir small { font-size: .68rem; color: var(--c-fraco); font-weight: 700; }
.cre-prontas-abrir.on { border-color: var(--c-a1); }
.cre-prontas-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.cre-pronta { position: relative; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #111; cursor: pointer; }
.cre-pronta img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.cre-pronta.on { border-color: var(--c-a1); box-shadow: 0 0 12px rgba(var(--c-rgb1), .5); }
.cre-autoriza { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(var(--c-rgb1), .55);
  background: rgba(var(--c-rgb1), .1); color: var(--c-texto); font-size: .8rem; font-weight: 700; line-height: 1.35; cursor: pointer; }
.cre-autoriza input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--c-a1); cursor: pointer; }
.cre-autoriza[hidden] { display: none; }
.cre-slot-pronta { max-width: 230px; margin: 0 auto; padding: 8px; }
.cre-slot-pronta .cre-t { min-height: 0; font-size: .8rem; }
.cre-slot-pronta .cre-caixa { aspect-ratio: 9 / 16; }
.cre-slot-pronta .cre-vazio { font-size: .72rem; }
.cre-pronta-dica { display: block; margin-top: 6px; font-size: .7rem; line-height: 1.3; color: var(--c-fraco); text-align: center; }
/* + Mais fotos (ELEMENTOS): as miniaturas com o "x" e o botao de por mais. */
.cre-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; }
.cre-extra { position: relative; width: 52px; height: 52px; flex-shrink: 0; border-radius: 10px; overflow: hidden; padding: 0; border: 1px solid var(--c-linha); background: var(--c-campo); cursor: pointer; }
.cre-extra img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cre-extra-x { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, .72); color: #fff; font-size: .6rem; line-height: 18px; text-align: center; }
.cre-extra-mais { min-height: 52px; padding: 4px 12px; border-radius: 12px; border: 1.5px dashed rgba(var(--c-rgb1), .45); background: transparent; color: var(--c-a1);
  font-weight: 800; font-size: .76rem; cursor: pointer; text-align: left; }
.cre-extra-mais small { display: block; color: var(--c-fraco); font-weight: 700; font-size: .66rem; }
.cre-extra-mais-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cre-extra-mais .cre-opcional { font-size: .56rem; padding: 1px 7px; }
.cre-campo { width: 100%; min-height: 42px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--c-linha); background: var(--c-campo); color: var(--c-texto); font-size: 16px; }
.cre-campo::placeholder, #screen-creator textarea::placeholder { color: #6e6785; }
.cre-campo-linha { margin-top: 9px; }
/* O produto e o lugar ESCRITOS (28/10): o rotulo com o "opcional" em destaque. */
.cre-rotulo { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: .8rem; font-weight: 800; color: var(--c-texto); }
.cre-rotulo + .cre-campo-linha { margin-top: 6px; }
.cre-opcional { padding: 2px 8px; border-radius: 999px; background: rgba(var(--c-rgb1), .18); border: 1px solid rgba(var(--c-rgb1), .55); color: var(--c-a1);
  font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.cre-dica { display: block; margin-top: 5px; font-size: .7rem; line-height: 1.35; color: var(--c-fraco); }
.cre-ambiente { margin-top: 2px; }
.cre-roupa, .cre-voz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: .8rem; color: var(--c-fraco); }
.cre-lugares { margin-top: 10px; }
.cre-lugares > span { display: block; font-size: .76rem; color: var(--c-fraco); margin-bottom: 7px; }
.cre-lugares p { margin: 0; font-size: .76rem; color: var(--c-fraco); }
.cre-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cre-chip { min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--c-linha); background: var(--c-cartao); color: var(--c-texto); font-weight: 700; font-size: .8rem; cursor: pointer; }
.cre-chip.on { border-color: var(--c-a1); color: var(--c-a1); box-shadow: 0 0 12px rgba(var(--c-rgb1), .3); }

/* 3 · A FOTO: criar, a criada grande pra APROVAR / GERAR OUTRA / AJUSTAR, e a aprovada pequena. */
.cre-criar { width: 100%; min-height: 56px; padding: 8px 14px; border-radius: 14px; border: 1.5px solid var(--c-a1); background: rgba(var(--c-rgb1), .1);
  color: var(--c-a1); font-weight: 900; font-size: .95rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: 0 0 16px rgba(var(--c-rgb1), .3), inset 0 0 12px rgba(var(--c-rgb1), .12); }
.cre-criar small { font-weight: 700; font-size: .7rem; color: var(--c-fraco); }
.cre-criar:disabled { opacity: .5; box-shadow: none; cursor: default; }
.cre-foto-criada { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: var(--c-cartao);
  border: 1px solid rgba(var(--c-rgb1), .45); box-shadow: 0 0 16px rgba(var(--c-rgb1), .18); }
.cre-foto-criada img { width: 100%; max-width: 280px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; display: block; background: var(--c-campo); }
.cre-foto-criada small { font-size: .72rem; color: var(--c-fraco); text-align: center; }
.cre-foto-gerando, .cre-foto-falhou { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 14px; border-radius: 16px; background: var(--c-cartao);
  border: 1px dashed rgba(var(--c-rgb1), .5); text-align: center; }
.cre-foto-gerando b { color: var(--c-a1); font-size: .92rem; }
.cre-foto-gerando small, .cre-foto-falhou small { color: var(--c-fraco); font-size: .74rem; line-height: 1.35; }
.cre-foto-falhou { border-color: rgba(255, 92, 92, .45); }
.cre-foto-falhou b { color: #ffb4b4; font-size: .9rem; }
.cre-giro { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(var(--c-rgb1), .22); border-top-color: var(--c-a1); animation: creGiro 1s linear infinite; }
@keyframes creGiro { to { transform: rotate(360deg); } }
.cre-foto-acoes { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.cre-foto-acoes2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cre-aprovar, .cre-outra { min-height: 46px; padding: 0 8px; border-radius: 12px; font-weight: 900; font-size: .86rem; cursor: pointer; }
.cre-aprovar { border: 0; background: var(--c-grad); color: var(--c-tinta); box-shadow: 0 0 14px rgba(var(--c-rgb1), .45); }
.cre-outra { border: 1px solid rgba(var(--c-rgb1), .55); background: transparent; color: var(--c-a1); }
.cre-outra.on { background: rgba(var(--c-rgb1), .14); box-shadow: inset 0 0 0 1px var(--c-a1); }
.cre-aprovar:disabled, .cre-outra:disabled, .cre-aplicar:disabled { opacity: .5; cursor: default; box-shadow: none; }
/* A faixa da versao: "Versao 2" e o "Voltar a anterior" na 1a linha; o que mudou na linha inteira embaixo
   (a 320 px o texto ficava espremido numa coluna, uma palavra por linha). */
.cre-versao { width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; padding: 7px 10px; border-radius: 10px;
  background: rgba(var(--c-rgb1), .1); font-size: .76rem; }
.cre-versao b { color: var(--c-a1); order: 1; }
.cre-versao button { order: 2; border: 0; background: transparent; color: var(--c-a2); font-weight: 800; font-size: .74rem; cursor: pointer; padding: 4px 0; }
.cre-versao span { order: 3; flex: 1 1 100%; min-width: 0; color: var(--c-texto); overflow-wrap: anywhere; }
.cre-ajuste { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 12px; background: var(--c-campo); border: 1px solid rgba(var(--c-rgb1), .35); }
.cre-ajuste label { font-size: .8rem; font-weight: 800; color: var(--c-texto); }
.cre-ajuste textarea { width: 100%; min-height: 64px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--c-linha); background: var(--c-cartao); color: var(--c-texto); font-size: 16px; line-height: 1.35; resize: vertical; }
.cre-aplicar { min-height: 44px; border: 0; border-radius: 12px; background: var(--c-grad); color: var(--c-tinta); font-weight: 900; font-size: .88rem; cursor: pointer; box-shadow: 0 0 14px rgba(var(--c-rgb1), .4); }
.cre-ajuste small { text-align: center; font-size: .72rem; color: var(--c-fraco); }
.cre-aprovada { display: flex; align-items: center; gap: 11px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--c-cartao);
  border: 1px solid var(--c-a1); box-shadow: 0 0 14px rgba(var(--c-rgb1), .3); }
.cre-aprovada img { width: 54px; height: 96px; flex-shrink: 0; object-fit: cover; border-radius: 9px; }
.cre-aprovada-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cre-aprovada-txt b { color: var(--c-a1); font-size: .86rem; }
.cre-aprovada-txt small { font-size: .72rem; line-height: 1.3; color: var(--c-fraco); }
.cre-aprovada button { flex-shrink: 0; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(var(--c-rgb1), .55); background: transparent; color: var(--c-a1); font-size: .72rem; font-weight: 800; cursor: pointer; }
.cre-trava { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--c-linha);
  background: rgba(255, 255, 255, .03); color: var(--c-fraco); font-size: .8rem; line-height: 1.35; }

/* 4 · O movimento (so no MOVIMENTO): as capas dos 18, em duas fileiras que correm de lado. */
.cre-movs { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 86px; gap: 10px 9px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x proximity; }
.cre-mov { width: 86px; padding: 0; border: 0; background: transparent; color: var(--c-fraco); text-align: left; cursor: pointer; scroll-snap-align: start; }
.cre-mov img { width: 86px; height: 120px; object-fit: cover; border-radius: 10px; display: block; border: 2px solid transparent; outline: 1px solid var(--c-linha); background: #111; }
.cre-mov span { display: block; font-size: .68rem; margin-top: 4px; line-height: 1.2; }
.cre-mov.on img { border-color: var(--c-a1); outline: 0; box-shadow: 0 0 14px rgba(var(--c-rgb1), .55); }
.cre-mov.on span { color: var(--c-a1); font-weight: 800; }

/* 5 · A fala (ou o prompt colado, com a ANALISE antes de gerar). */
.cre-modo-fala { margin-top: -2px; }
.cre-fala { background: var(--c-cartao); border: 1px solid var(--c-linha); border-radius: 14px; padding: 10px 12px; }
.cre-fala textarea { width: 100%; min-height: 108px; resize: vertical; border: 0; background: transparent; color: var(--c-texto); font-size: 16px; line-height: 1.4; outline: none; }
.cre-conta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .72rem; color: var(--c-fraco); margin-top: 4px; }
.cre-conta b { color: var(--c-a2); }
.cre-conta b.passou { color: #ffb4b4; }
.cre-sugerir { margin-top: 9px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(var(--c-rgb2), .55); background: rgba(var(--c-rgb2), .08);
  color: var(--c-a2); font-weight: 800; font-size: .8rem; cursor: pointer; }
.cre-sugerir:disabled { opacity: .55; cursor: default; }
.cre-sugestoes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cre-sugestoes > small { font-size: .72rem; color: var(--c-fraco); }
.cre-sugestao { text-align: left; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--c-linha); background: var(--c-cartao); color: var(--c-texto); font-size: .82rem; line-height: 1.38; cursor: pointer; }
.cre-sugestao:hover { border-color: var(--c-a1); }
.cre-analise { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px 13px; border-radius: 14px; background: var(--c-cartao);
  border: 1px solid rgba(var(--c-rgb1), .5); box-shadow: 0 0 16px rgba(var(--c-rgb1), .2); font-size: .8rem; line-height: 1.42; }
.cre-analise p { margin: 0; color: #ece8f5; overflow-wrap: anywhere; }
.cre-analise b { color: var(--c-texto); }
.cre-analise-topo { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.cre-analise-topo b { color: var(--c-a1); }
.cre-analise-atencao { padding: 8px 10px; border-radius: 10px; background: rgba(255, 196, 61, .08); border: 1px solid rgba(255, 196, 61, .35); color: #ffe7b3; }
.cre-analise-atencao b { color: #ffd166; }
.cre-analise-atencao ul { margin: 4px 0 0; padding-left: 18px; }
.cre-analise-atencao li { margin: 2px 0; }
.cre-analise-sug b { color: var(--c-a2); }
.cre-analise .cre-analise-aviso { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); color: #d9d4e6; }
.cre-analise-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }

/* O Gerar: cheio, com o degrade e a luz do formato. */
.cre-gerar { width: 100%; margin-top: 16px; min-height: 58px; padding: 10px 14px; border: 0; border-radius: 16px; background: var(--c-grad); color: var(--c-tinta);
  font-weight: 900; font-size: 1rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: 0 0 18px rgba(var(--c-rgb1), .45), 0 10px 34px rgba(var(--c-rgb2), .2); }
.cre-gerar small { font-weight: 700; font-size: .72rem; opacity: .8; }
.cre-gerar:disabled { opacity: .45; box-shadow: none; cursor: default; }
.cre-sem { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--c-cartao); border: 1px solid var(--c-linha); font-size: .82rem; line-height: 1.4; }
.cre-sem p { margin: 0 0 4px; color: var(--c-fraco); }
.cre-sem b { color: var(--c-texto); }

/* Seus videos: o video (ou o andamento) do lado, a etiqueta na cor do formato DELE. */
.cre-lista { display: flex; flex-direction: column; gap: 10px; }
.cre-item { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 11px; align-items: start; padding: 8px; border-radius: 14px; background: var(--c-cartao); border: 1px solid var(--c-linha); }
.cre-item-midia { width: 104px; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: var(--c-campo); position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.cre-item-midia video, .cre-item-midia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cre-item-midia .cre-giro { width: 28px; height: 28px; }
.cre-item-midia .cre-pct { font-weight: 900; font-size: .9rem; color: var(--c-a1); }
.cre-item-meio { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-top: 2px; }
.cre-item-meio > b { font-size: .8rem; line-height: 1.3; }
.cre-etq { font-weight: 900; letter-spacing: .06em; color: #67e8f9; }
.cre-etq.pov { color: #ffb23e; }
.cre-etq.movimento { color: #74ff52; }
.cre-etq.juntado { color: #f0abfc; }
.cre-item-meio small { font-size: .72rem; line-height: 1.35; color: var(--c-fraco); overflow-wrap: anywhere; }
.cre-item-meio .cre-fala-dele { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cre-item-meio .cre-erro { color: #ffc2c2; }
.cre-barra { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.cre-barra i { display: block; height: 100%; background: var(--c-grad); transition: width .6s ease; }
.cre-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cre-baixar, .cre-apagar { min-height: 34px; padding: 0 12px; border-radius: 999px; font-weight: 800; font-size: .74rem; cursor: pointer; }
.cre-baixar { border: 1px solid rgba(var(--c-rgb1), .55); background: transparent; color: var(--c-a1); }
.cre-apagar { border: 1px solid var(--c-linha); background: transparent; color: var(--c-fraco); }
.cre-baixar:disabled { opacity: .55; cursor: default; }
/* O HD do video pronto (29/10): o botao com a luz do formato; fazendo, apagado; a nota embaixo. */
.cre-hd { min-height: 34px; padding: 0 12px; border-radius: 999px; font-weight: 800; font-size: .74rem; cursor: pointer;
  border: 1px solid rgba(var(--c-rgb2), .6); color: var(--c-texto); background: linear-gradient(135deg, rgba(var(--c-rgb1), .22), rgba(var(--c-rgb2), .22));
  box-shadow: 0 0 12px rgba(var(--c-rgb2), .25); }
.cre-hd:disabled { opacity: .6; cursor: default; box-shadow: none; }
.cre-item-meio .cre-hd-nota { color: var(--c-a1); }

/* O ASSISTENTE (27/10, ele: "um assistente mesmo de criacao para quem nao sabe
   criar nada"): o caminho no topo ("Me ajude a criar" | "Eu sei criar") e, no
   assistente, UMA pergunta por tela, grande, com botoes de dedo inteiro. */
.cre-caminho { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 4px; }
.cre-caminho button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 58px; padding: 9px 11px; border-radius: 14px; text-align: left;
  border: 1px solid var(--c-linha); background: var(--c-cartao); color: var(--c-fraco); cursor: pointer; }
.cre-caminho button b { font-size: .86rem; color: var(--c-texto); }
.cre-caminho button small { font-size: .68rem; line-height: 1.25; }
.cre-caminho button.on { border-color: var(--c-a1); background: rgba(var(--c-rgb1), .14); box-shadow: 0 0 14px rgba(var(--c-rgb1), .3); }
.cre-caminho button.on b { color: var(--c-a1); }
/* MODELAR DO TIKTOK (31/10): o 3o caminho numa linha inteira embaixo dos 2 (a 320 nao cabem 3 lado a lado). */
.cre-caminho button[data-cre-caminho="tiktok"] { grid-column: 1 / -1; min-height: 0; }
.cre-tk { margin-top: 6px; }
.cre-tk .cre-campo { width: 100%; box-sizing: border-box; }
.cre-tk-titulo { margin: 16px 0 0; font-size: .92rem; font-weight: 800; color: var(--c-texto); }
.cre-tk-resumo { margin: 4px 0 10px; padding: 12px; border-radius: 14px; background: var(--c-cartao); border: 1px solid var(--c-linha); font-size: .84rem; line-height: 1.4; color: var(--c-fraco); }
.cre-tk-resumo p { margin: 0 0 6px; }
.cre-tk-resumo p:last-child { margin: 0; }
.cre-tk-resumo b { color: var(--c-texto); }
.cre-tk-parte { margin: 10px 0; padding: 12px; border-radius: 14px; background: var(--c-cartao); border: 1px solid var(--c-linha); }
.cre-tk-parte h4 { margin: 0 0 6px; font-size: .95rem; color: var(--c-texto); }
.cre-tk-fala { margin: 0 0 8px; font-size: .9rem; line-height: 1.4; color: var(--c-texto); }
.cre-tk-fala.sem { color: var(--c-fraco); font-style: italic; }
.cre-tk-prompt summary { cursor: pointer; font-size: .82rem; color: var(--c-a1); }
.cre-tk-prompt pre { margin: 8px 0 0; padding: 10px; max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: .74rem; line-height: 1.4; background: var(--c-campo); border-radius: 10px; color: var(--c-texto); }
.cre-tk-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.cre-tk-acoes button { min-height: 44px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--c-linha); background: var(--c-campo); color: var(--c-texto); font-weight: 700; font-size: .82rem; cursor: pointer; }
.cre-tk-acoes .cre-tk-gerar { border-color: var(--c-a1); background: rgba(var(--c-rgb1), .16); color: var(--c-a1); }
.cre-tk-acoes button:disabled { opacity: .5; cursor: default; }
.cre-tk-estado { margin: 8px 0 0; font-size: .8rem; line-height: 1.35; color: var(--c-fraco); }
.cre-tk-estado.erro { color: #ff8a8a; }
.cre-tk .cre-aplicar { width: 100%; padding: 0 16px; margin-top: 4px; }
/* O video maior que 10 s (31/10): o aviso do tamanho e do custo, e o cartao do resumo de 10 s em destaque. */
.cre-tk .cre-tk-aviso { margin: 6px 0 0; padding: 9px 11px; border-radius: 10px; background: rgba(var(--c-rgb1), .12); border: 1px solid rgba(var(--c-rgb1), .45);
  color: var(--c-texto); font-size: .82rem; line-height: 1.4; }
.cre-tk-parte.resumo { border-color: var(--c-a1); box-shadow: 0 0 14px rgba(var(--c-rgb1), .25); }
/* O VIDEO DE VARIAS CORES (02/11): o cartao no fim do roteiro, uma linha por cor. */
.cre-tk-cores-dica { margin: 0 0 4px; font-size: .84rem; line-height: 1.4; color: var(--c-fraco); }
.cre-tk-cor { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-linha); }
.cre-tk-cor:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }
.cre-tk-cor b { display: block; margin-bottom: 4px; font-size: .86rem; color: var(--c-texto); }
.cre-tk-cor .cre-tk-fala { margin-bottom: 0; }
.cre-tk-cor .cre-apagar { margin-top: 8px; }
.cre-tk-cores .cre-tk-acoes > :only-child { grid-column: 1 / -1; }
.cre-tk-estado.ok { color: #74ff52; font-weight: 700; }
/* VARIAS CORES NUM VIDEO SO (02/11): falar o nome das cores (desmarcado, o padrao). */
.cre-tk-cv-falar { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; color: var(--c-texto); font-size: .82rem; font-weight: 700; line-height: 1.35; cursor: pointer; }
.cre-tk-cv-falar input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--c-a1); cursor: pointer; }
.cre-tk-cv-falar small { display: block; margin-top: 2px; color: var(--c-fraco); font-size: .74rem; font-weight: 400; }
/* As cores do proprio video ou as fotos dele (02/11): o botao pequeno e a dica ao lado. */
.cre-tk-cv-modo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.cre-tk-cv-modo small { flex: 1 1 140px; font-size: .74rem; line-height: 1.35; color: var(--c-fraco); }
/* A LEGENDA DA PUBLICACAO (01/11): o campo ja preenchido com a descricao e as hashtags do original, pra copiar. */
.cre-tk-legenda { margin: 10px 0; padding: 12px; border-radius: 14px; background: var(--c-cartao); border: 1px solid var(--c-linha); }
.cre-tk-legenda h4 { margin: 0 0 4px; font-size: .95rem; color: var(--c-texto); }
.cre-tk-legenda-sub { margin: 0 0 8px; font-size: .8rem; line-height: 1.4; color: var(--c-fraco); }
.cre-tk-legenda .cre-campo { display: block; min-height: 104px; resize: vertical; line-height: 1.45; font-family: inherit; }
.cre-tk-legenda-linha { display: flex; align-items: center; gap: 10px; min-height: 26px; margin-top: 6px; }
/* Sem aviso e sem o "Voltar" (a original, parada), a linha some: nao fica um buraco entre o campo e o Copiar. */
.cre-tk-legenda-linha:has(> .cre-tk-estado:empty):has(> .cre-tk-legenda-voltar[hidden]) { display: none; }
.cre-tk-legenda-linha .cre-tk-estado { margin: 0; }
.cre-tk-legenda-voltar { flex-shrink: 0; margin-left: auto; padding: 4px 0; border: 0; background: none; color: var(--c-a1); font-size: .8rem; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cre-tk-legenda-voltar[hidden] { display: none; }
.cre-tk-legenda-copiar { width: 100%; min-height: 44px; margin-top: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--c-linha); background: var(--c-campo);
  color: var(--c-texto); font-weight: 700; font-size: .86rem; cursor: pointer; }
/* JUNTAR VIDEOS (02/11): a barra no topo de "Seus videos", o botao de escolher (com a ordem) e o escolhido. */
.cre-juntar-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--c-linha); }
.cre-juntar-barra small { flex: 1 1 180px; font-size: .74rem; line-height: 1.35; color: var(--c-fraco); }
.cre-juntar-barra.on { border-style: solid; border-color: rgba(var(--c-rgb1), .55); background: rgba(var(--c-rgb1), .08); }
.cre-juntar-barra.on b { flex: 1 1 180px; font-size: .84rem; line-height: 1.35; color: var(--c-texto); }
.cre-juntar-abrir, .cre-juntar-escolher { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(var(--c-rgb1), .55); background: transparent;
  color: var(--c-a1); font-weight: 800; font-size: .78rem; cursor: pointer; }
.cre-juntar-acoes { display: flex; gap: 6px; }
.cre-juntar-fazer { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--c-grad); color: var(--c-tinta); font-weight: 800; font-size: .78rem; cursor: pointer; }
.cre-juntar-escolher.on { border-color: transparent; background: var(--c-grad); color: var(--c-tinta); }
.cre-juntar-fazer:disabled, .cre-juntar-escolher:disabled { opacity: .5; cursor: default; }
.cre-item.cre-item-escolhido { border-color: var(--c-a1); box-shadow: 0 0 0 1px var(--c-a1), 0 10px 24px -12px rgba(var(--c-rgb1), .8); }
/* AS INFLUENCERS DELE (01/11): a janela de criar e a das listas (como as janelas do gerador: de baixo
   no celular, no meio na tela grande). */
.cre-inf { position: fixed; inset: 0; z-index: 950; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .66); }
.cre-inf[hidden] { display: none; }
.cre-inf-caixa { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 16px 16px 0; border-radius: 22px 22px 0 0; background: var(--c-fundo); color: var(--c-texto);
  border: 1px solid var(--c-linha); border-bottom: 0; }
/* Os campos com ar entre eles; o botao (Criar / Ficar com esta) PRESO embaixo da janela: com 12 campos,
   ele ficava no fim da rolagem (medido a 390). O fundo dele esconde o que rola por baixo. */
.cre-inf-caixa #cre-inf-corpo, .cre-inf-caixa #cre-pess-corpo { display: flex; flex-direction: column; gap: 16px; }
.cre-inf-caixa #cre-inf-rodape, .cre-inf-caixa #cre-pess-rodape { position: sticky; bottom: 0; z-index: 1; padding: 10px 0 calc(16px + env(safe-area-inset-bottom)); background: var(--c-fundo);
  box-shadow: 0 -14px 18px -6px var(--c-fundo); }
.cre-inf-caixa #cre-inf-rodape:empty, .cre-inf-caixa #cre-pess-rodape:empty { padding: 0 0 calc(16px + env(safe-area-inset-bottom)); box-shadow: none; }
.cre-inf-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cre-inf-topo h3 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.cre-inf-fechar { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--c-campo); color: var(--c-texto); font-size: 1rem; }
.cre-inf-sub { margin: 0; font-size: .82rem; line-height: 1.4; color: var(--c-fraco); }
.cre-inf-campo { display: flex; flex-direction: column; gap: 7px; }
.cre-inf-campo > b { font-size: .8rem; }
.cre-inf-bola { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border-radius: 50%; vertical-align: -2px; border: 1px solid rgba(255, 255, 255, .35); }
.cre-inf-rostos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cre-inf-rosto { position: relative; padding: 0; border: 2px solid transparent; border-radius: 14px; overflow: hidden; background: var(--c-cartao); cursor: pointer; }
.cre-inf-rosto img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.cre-inf-rosto.on { border-color: var(--c-a1); box-shadow: 0 0 16px rgba(var(--c-rgb1), .55); }
.cre-inf-criando { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 8px; text-align: center; }
.cre-inf-criando small { color: var(--c-fraco); font-size: .78rem; line-height: 1.4; }
.cre-inf-giro { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(var(--c-rgb1), .25); border-top-color: var(--c-a1); animation: creInfGiro 1s linear infinite; }
@keyframes creInfGiro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cre-inf-giro { animation: none; } }
/* "Gerar outros 4" e APAGAR (01/11): os novos rostos em cima e os 4 primeiros embaixo, cada grupo com o
   nome; os 4 primeiros apagados enquanto os outros sao feitos; as "Minhas influencers" com o Apagar. */
.cre-inf-grupos { display: flex; flex-direction: column; gap: 8px; }
.cre-inf-grupo { margin: 0; font-size: .8rem; font-weight: 800; color: var(--c-texto); }
.cre-inf-rostos.espera { opacity: .45; }
.cre-inf-rostos.espera .cre-inf-rosto { cursor: default; }
.cre-inf-maisrostos { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 14px; border-radius: 12px;
  border: 1px dashed rgba(var(--c-rgb1), .55); background: rgba(var(--c-rgb1), .08); color: var(--c-texto); font-weight: 700; font-size: .86rem; cursor: pointer; }
.cre-inf-maisrostos small { font-weight: 400; font-size: .74rem; color: var(--c-fraco); text-align: center; }
.cre-inf-maisrostos:disabled { opacity: .55; cursor: default; }
.cre-inf-suas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cre-inf-sua { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: center; }
.cre-inf-sua img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; border-radius: 12px; background: var(--c-cartao); }
.cre-inf-sua b { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cre-inf-sua small { font-size: .66rem; color: var(--c-fraco); }
.cre-inf-sua .cre-apagar { width: 100%; padding: 0 6px; }
.cre-inf-sua .cre-apagar:disabled { opacity: .55; cursor: default; }
/* QUEM APARECE (01/11, ele: "ao inves de aparecer esse monte de imagem, ter um quadradinho onde clica"):
   4 quadradinhos (2 por linha, cabe a 320); a escolhida numa linha com o "Trocar"; na janela, a foto que
   se toca pra usar e a previa da foto enviada. */
.cre-pess-quadros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.cre-pess-quadro { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 66px; padding: 9px 10px; border-radius: 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--c-linha); background: var(--c-cartao); color: var(--c-texto); }
.cre-pess-quadro.novo { border: 1.5px dashed rgba(var(--c-rgb1), .55); background: rgba(var(--c-rgb1), .08); }
.cre-pess-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cre-pess-txt b { font-size: .8rem; line-height: 1.2; color: var(--c-texto); }
.cre-pess-txt small { font-size: .68rem; line-height: 1.25; color: var(--c-fraco); overflow-wrap: anywhere; }
.cre-pess-escolhida { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: 14px;
  border: 1px solid var(--c-a1); background: rgba(var(--c-rgb1), .1); }
.cre-pess-escolhida img { flex-shrink: 0; width: 40px; height: 64px; border-radius: 8px; object-fit: cover; background: #111; }
.cre-pess-escolhida .cre-pess-txt { flex: 1; }
.cre-pess-escolhida .cre-pess-txt b { color: var(--c-a1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cre-pess-escolhida .cre-apagar { flex-shrink: 0; }
.cre-pess-foto { display: block; width: 100%; padding: 0; border: 2px solid transparent; border-radius: 14px; overflow: hidden; background: none; cursor: pointer; }
.cre-pess-foto img { border-radius: 12px; }
.cre-pess-foto.on { border-color: var(--c-a1); box-shadow: 0 0 14px rgba(var(--c-rgb1), .5); }
.cre-pess-previa { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cre-pess-previa img { width: 46%; max-width: 200px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; background: #111; }
.cre-pess-previa small { font-size: .76rem; color: var(--c-fraco); }
.cre-pess-previa small.erro { color: #ff8a8a; }
@media (min-width: 600px) {
  .cre-inf { align-items: center; padding: 24px; }
  .cre-inf-caixa { border-radius: 22px; border-bottom: 1px solid var(--c-linha); }
}
/* O plano B do link (31/10): mandar o video do celular. */
.cre-tk-enviar { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 2px 0 6px; padding: 11px 14px; border-radius: 12px;
  border: 1px dashed var(--c-linha); background: var(--c-campo); color: var(--c-texto); font-weight: 700; font-size: .86rem; cursor: pointer; }
.cre-tk-enviar small { font-weight: 400; font-size: .74rem; color: var(--c-fraco); text-align: center; }
.cre-tk-arquivo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 6px; padding: 9px 12px; border-radius: 12px;
  background: rgba(var(--c-rgb1), .12); border: 1px solid var(--c-a1); font-size: .84rem; color: var(--c-texto); }
.cre-tk-arquivo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cre-tk-arquivo button { flex-shrink: 0; border: 0; background: transparent; color: var(--c-a1); font-weight: 800; font-size: .8rem; cursor: pointer; padding: 4px 2px; }
/* O <video> do quadro do TikTok: na pagina (o Safari nao decodifica video solto), quase invisivel. */
.cre-tk-quadro-video { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: .01; pointer-events: none; }
.cre-tk-ultimos { display: grid; gap: 6px; margin-top: 8px; }
.cre-tk-ultimos button { text-align: left; padding: 10px; border-radius: 12px; border: 1px solid var(--c-linha); background: var(--c-campo); color: var(--c-texto); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.cre-ass { margin-top: 12px; }
.cre-ass-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.cre-ass-voltar { min-height: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--c-fraco); font-weight: 800; font-size: .82rem; cursor: pointer; }
.cre-ass-voltar[disabled] { visibility: hidden; }
.cre-ass-passos { display: flex; gap: 6px; }
.cre-ass-passos i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.cre-ass-passos i.feito { background: rgba(var(--c-rgb1), .6); }
.cre-ass-passos i.agora { width: 22px; border-radius: 6px; background: var(--c-grad); box-shadow: 0 0 8px rgba(var(--c-rgb1), .6); }
.cre-ass-titulo { margin: 10px 0 4px; font-size: 1.32rem; line-height: 1.25; font-weight: 900; color: var(--c-texto); }
.cre-ass-sub { margin: 0 0 14px; font-size: .86rem; line-height: 1.4; color: var(--c-fraco); }
/* A foto do produto: a caixa grande (a camera ou a galeria). */
.cre-ass-produto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 240px; padding: 14px;
  border-radius: 18px; border: 2px dashed rgba(var(--c-rgb1), .5); background: var(--c-cartao); color: var(--c-fraco); cursor: pointer; overflow: hidden; position: relative; }
.cre-ass-produto b { color: var(--c-texto); font-size: 1rem; }
.cre-ass-produto small { font-size: .78rem; }
.cre-ass-produto .cre-mais { font-size: 2.6rem; }
.cre-ass-produto.cheia { border-style: solid; padding: 0; min-height: 0; }
.cre-ass-produto.cheia img { width: 100%; max-height: 340px; object-fit: contain; display: block; background: #fff; }
.cre-ass-produto .cre-subindo, .cre-ass-produto .cre-trocar { font-size: .74rem; }
#screen-creator #cre-ass-nome { margin-top: 10px; }
/* Quem vai aparecer: a galeria das modelos prontas (3 por linha) e as 2 outras escolhas. */
.cre-ass-pessoas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cre-ass-pessoa { position: relative; padding: 0; border: 2px solid transparent; border-radius: 14px; overflow: hidden; background: var(--c-cartao); cursor: pointer; aspect-ratio: 9 / 16; }
.cre-ass-pessoa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cre-ass-pessoa.on { border-color: var(--c-a1); box-shadow: 0 0 16px rgba(var(--c-rgb1), .55); }
.cre-ass-ok { position: absolute; z-index: 1; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-grad); color: var(--c-tinta);
  font-size: .8rem; font-weight: 900; line-height: 24px; text-align: center; }
/* "A minha foto" e "so as maos" na mesma grade, do tamanho das modelos. */
.cre-ass-pessoa-opcao { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px; text-align: center;
  border: 1.5px dashed rgba(var(--c-rgb1), .5); color: var(--c-fraco); font-size: .66rem; line-height: 1.3; }
.cre-ass-pessoa-opcao b { font-size: .8rem; color: var(--c-texto); line-height: 1.2; }
.cre-ass-pessoa-opcao.on { border-style: solid; background: rgba(var(--c-rgb1), .14); }
.cre-ass-pessoa-opcao.on b { color: var(--c-a1); }
.cre-ass-ico { font-size: 1.9rem; line-height: 1; }
/* No POV, "de quem sao as maos": 2 escolhas grandes. */
.cre-ass-pessoas.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cre-ass-pessoas.duas .cre-ass-pessoa { aspect-ratio: 4 / 5; }
/* O TIPO do video (28/10, ele: "o TIPO do VIDEO POV, UGC OU MOVIMENTO"): cada
   cartao com o nome, a frase e 3 exemplos, na COR do tipo (UGC roxo e ciano,
   POV ambar, MOVIMENTO verde do Kling). Sem selo de SUGERIDO (ele: "confunde o cliente"). */
.cre-ass-tipos { display: flex; flex-direction: column; gap: 10px; }
.cre-ass-tipo { --f-a1: #c084fc; --f-rgb1: 168, 85, 247; position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border-radius: 16px; border: 1px solid var(--c-linha); background: var(--c-cartao); color: var(--c-fraco); text-align: left; cursor: pointer;
  font-size: .78rem; line-height: 1.38; }
.cre-ass-tipo[data-tipo="pov"] { --f-a1: #ffb23e; --f-rgb1: 255, 138, 0; }
.cre-ass-tipo[data-tipo="movimento"] { --f-a1: #74ff52; --f-rgb1: 116, 255, 82; }
.cre-ass-tipo-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cre-ass-tipo-txt i { font-style: normal; font-size: .62rem; font-weight: 900; letter-spacing: .12em; color: var(--f-a1); }
.cre-ass-tipo-txt b { font-size: 1.02rem; color: var(--c-texto); }
/* Os 3 exemplos lado a lado (28/10), cada um com o que mostra embaixo. */
.cre-ass-tipo-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cre-ass-tipo-foto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cre-ass-tipo-foto img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; display: block; background: #000; pointer-events: none; }
.cre-ass-tipo-foto span { font-size: .66rem; font-weight: 700; color: var(--c-fraco); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cre-ass-tipo.on { border-color: var(--f-a1); background: rgba(var(--f-rgb1), .12); box-shadow: 0 0 16px rgba(var(--f-rgb1), .35); }
.cre-ass-tipo .cre-ass-ok { top: 10px; bottom: auto; right: 10px; }
/* O movimento (so no Movimento): as capas, 3 por linha; o que combina com o produto primeiro. */
.cre-ass-movs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cre-ass-mov { position: relative; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--c-cartao); color: var(--c-texto);
  cursor: pointer; text-align: left; }
.cre-ass-mov img { width: 100%; aspect-ratio: 9 / 13; object-fit: cover; display: block; background: #111; }
.cre-ass-mov span:not(.cre-ass-ok) { display: block; padding: 5px 6px 7px; font-size: .7rem; font-weight: 700; line-height: 1.2; }
.cre-ass-mov.on { border-color: var(--c-a1); box-shadow: 0 0 14px rgba(var(--c-rgb1), .5); }
/* O plano: "o seu video vai ser assim" (e trocar o estilo ou o lugar). */
.cre-ass-plano { display: flex; flex-direction: column; gap: 0; border-radius: 16px; background: var(--c-cartao); border: 1px solid rgba(var(--c-rgb1), .45); overflow: hidden; }
.cre-ass-linha { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-top: 1px solid var(--c-linha); }
.cre-ass-linha:first-child { border-top: 0; }
.cre-ass-linha > span:first-child { font-size: 1.3rem; width: 30px; text-align: center; flex-shrink: 0; }
.cre-ass-linha > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cre-ass-linha small { font-size: .68rem; color: var(--c-fraco); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.cre-ass-linha b { font-size: .88rem; color: var(--c-texto); line-height: 1.3; overflow-wrap: anywhere; }
.cre-ass-linha img { width: 36px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.cre-ass-mudar { flex-shrink: 0; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(var(--c-rgb1), .55); background: transparent; color: var(--c-a1); font-weight: 800; font-size: .72rem; cursor: pointer; }
.cre-ass-escolhas { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px 53px; }
.cre-ass-lendo { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(var(--c-rgb2), .08);
  border: 1px solid rgba(var(--c-rgb2), .3); color: var(--c-texto); font-size: .82rem; line-height: 1.35; }
.cre-ass-lendo .cre-giro { width: 22px; height: 22px; border-width: 2px; flex-shrink: 0; }
/* A fala: as 3 sugeridas em cartoes (a escolhida acende) e o "escrever a minha". */
.cre-ass-falas { display: flex; flex-direction: column; gap: 8px; }
.cre-ass-fala-card { text-align: left; padding: 12px 13px; border-radius: 14px; border: 1px solid var(--c-linha); background: var(--c-cartao); color: var(--c-texto);
  font-size: .9rem; line-height: 1.42; cursor: pointer; }
.cre-ass-fala-card.on { border-color: var(--c-a1); background: rgba(var(--c-rgb1), .12); box-shadow: 0 0 14px rgba(var(--c-rgb1), .3); }
.cre-ass-escrever { margin-top: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px dashed rgba(var(--c-rgb1), .55); background: transparent; color: var(--c-a1);
  font-weight: 800; font-size: .84rem; cursor: pointer; width: 100%; }
#screen-creator #cre-ass-fala-caixa { margin-top: 10px; }
/* O video do assistente (o ultimo pedido): o andamento grande e, pronto, o video e o Baixar. */
.cre-ass-video { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; background: var(--c-cartao); border: 1px solid rgba(var(--c-rgb1), .45); text-align: center; }
.cre-ass-video video { width: 100%; max-width: 300px; aspect-ratio: 9 / 16; border-radius: 12px; background: #000; display: block; }
.cre-ass-video .cre-giro { width: 46px; height: 46px; border-width: 4px; }
.cre-ass-video .cre-pct { font-size: 1.6rem; font-weight: 900; color: var(--c-a1); }
.cre-ass-video .cre-barra { width: 100%; }
.cre-ass-video small { font-size: .78rem; color: var(--c-fraco); line-height: 1.4; }
.cre-ass-video .cre-acoes { justify-content: center; }
.cre-ass-video .cre-baixar, .cre-ass-video .cre-hd { min-height: 44px; padding: 0 22px; font-size: .9rem; }
.cre-ass-video .cre-hd-nota { color: var(--c-a1); }
#screen-creator #cre-ass-rodape .cre-gerar { margin-top: 18px; }
#screen-creator #cre-ass-rodape .cre-outra { width: 100%; margin-top: 10px; }

/* O BRILHO PREMIUM (27/10, ele: "os botoes e escritos estao bonitos? com brilho?"):
   nas cores do FORMATO — o nome com o reflexo, o raio piscando, a luz correndo
   na faixa, o formato escolhido com a luz girando no aro, o brilho que atravessa
   o Gerar (que afunda no toque), o "+" respirando. Tudo parado pra quem pede
   menos movimento; sem @property, a luz do aro fica parada no alto. */
@property --creator-escolha { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cre-marca b {
    background: linear-gradient(100deg, var(--c-a1) 0%, var(--c-a1) 38%, #fff 50%, var(--c-a2) 62%, var(--c-a2) 100%);
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 8px rgba(var(--c-rgb1), .4));
    animation: creReflexo 6s ease-in-out infinite;
  }
}
@keyframes creReflexo { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0% 0; } }
.cre-raio { transform-origin: 50% 50%; animation: creRaio 3s ease-in-out infinite; }
@keyframes creRaio {
  0%, 60%, 100% { transform: scale(1); opacity: 1; }
  63% { transform: scale(1.22); opacity: 1; }
  66% { transform: scale(1.1); opacity: .3; }
  69% { transform: scale(1.18); opacity: 1; }
  72% { transform: scale(1.08); opacity: .5; }
  76% { transform: scale(1); opacity: 1; }
}
.cre-faixa { position: relative; overflow: hidden; }
.cre-faixa::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  transform: translateX(-120%); animation: creFaixa 4s ease-in-out infinite;
}
@keyframes creFaixa { 0%, 40% { transform: translateX(-120%); } 90%, 100% { transform: translateX(440%); } }
.cre-formato.on {
  background: linear-gradient(160deg, rgba(var(--f-rgb1), .22), rgba(var(--f-rgb1), .05)) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box,
    conic-gradient(from var(--creator-escolha, 0deg), rgba(var(--f-rgb1), .55) 0deg, rgba(var(--f-rgb1), .55) 190deg, var(--f-a1) 250deg, #fff 285deg, var(--f-a1) 320deg, rgba(var(--f-rgb1), .55) 360deg) border-box;
  animation: creAro 3.5s linear infinite;
}
@keyframes creAro { to { --creator-escolha: 360deg; } }
.cre-gerar { position: relative; overflow: hidden; transition: transform .12s ease, box-shadow .25s ease; }
.cre-gerar:not(:disabled):active { transform: scale(.985); }
.cre-gerar::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: translateX(-130%) skewX(-20deg); animation: creCorre 5s ease-in-out infinite;
}
.cre-gerar:disabled::after { display: none; }
@keyframes creCorre { 0%, 62% { transform: translateX(-130%) skewX(-20deg); } 92%, 100% { transform: translateX(280%) skewX(-20deg); } }
.cre-mais { animation: creRespira 2.4s ease-in-out infinite; }
@keyframes creRespira { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) {
  .cre-marca b, .cre-raio, .cre-faixa::after, .cre-formato.on, .cre-gerar::after, .cre-mais, .cre-giro { animation: none; }
  .cre-faixa::after, .cre-gerar::after { display: none; }
}
/* O VISUAL PREMIUM (01/11, ele: "estou achando o APP muito simples, apagado, nao tem como deixar mais
   premium, exclusivo"): a luz do formato no fundo (presa na tela: fica enquanto rola), os cartoes de
   vidro com a borda acesa por cima e a sombra, os icones desenhados no lugar dos emojis, o escolhido com
   o aro em degrade e a luz, o titulo com o degrade, o campo fundo que acende no toque, e o botao principal
   que nao fica mais "lavado": sem poder gerar, ele fica escuro com o aro em degrade (antes era o degrade
   transparente). Nas cores do formato (UGC, POV, MOVIMENTO). O cartao tem 3 camadas: o vidro, o fundo
   SOLIDO (esconde a 3a) e a borda em degrade (so aparece no aro de 1 px). */
#screen-creator {
  --c-fraco: #aaa3c8;
  --c-borda: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .025));
  --c-vidro: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .01) 62%);
  --c-sombra: 0 18px 34px -20px rgba(0, 0, 0, .95);
  isolation: isolate;
}
#screen-creator::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(560px 400px at -8% -110px, rgba(var(--c-rgb1), .36), transparent 70%),
    radial-gradient(460px 340px at 110% -60px, rgba(var(--c-rgb2), .2), transparent 70%),
    radial-gradient(680px 460px at 50% calc(100% + 200px), rgba(var(--c-rgb1), .2), transparent 70%);
}
/* O topo: o voltar de vidro, o "GPT+OMNI+MOTION" espacado, o saldo com o brilho de joia. */
.cre-voltar { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border-color: transparent; color: var(--c-texto);
  background: var(--c-vidro) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, var(--c-borda) border-box; box-shadow: var(--c-sombra); }
.cre-voltar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cre-marca small { margin-top: 2px; font-size: .6rem; letter-spacing: .26em; color: rgba(255, 255, 255, .5); }
.cre-saldo { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px 7px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 0 14px rgba(var(--c-rgb1), .5), 0 0 28px rgba(var(--c-rgb2), .22); }
.cre-saldo::before { content: ""; width: 12px; height: 12px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 3.5h11l4.5 6-10 11-10-11z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 3.5h11l4.5 6-10 11-10-11z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Os titulos: a barrinha acesa antes; o grande com o degrade. */
.cre-h2, .cre-tk-titulo { display: flex; align-items: center; gap: 9px; }
.cre-h2 { color: rgba(255, 255, 255, .7); }
.cre-h2::before, .cre-tk-titulo::before { content: ""; width: 3px; height: 15px; flex-shrink: 0; border-radius: 3px; background: var(--c-grad); box-shadow: 0 0 10px rgba(var(--c-rgb1), .85); }
.cre-ass-titulo { letter-spacing: -.02em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cre-ass-titulo { width: fit-content; max-width: 100%; background: linear-gradient(100deg, #fff 0%, #fff 50%, var(--c-a1) 118%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .cre-caminho button.on b, .cre-pess-escolhida .cre-pess-txt b { background: linear-gradient(100deg, #fff 0%, var(--c-a1) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
/* O icone desenhado (a luz do formato) e a setinha de "abre". O escolhido: o icone cheio no degrade. */
.cre-ico { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; color: var(--c-a1);
  background: linear-gradient(140deg, rgba(var(--c-rgb1), .3), rgba(var(--c-rgb2), .1)); box-shadow: inset 0 0 0 1px rgba(var(--c-rgb1), .4), inset 0 1px 0 rgba(255, 255, 255, .14); }
.cre-ico svg { width: 19px; height: 19px; fill: currentColor; }
.cre-ico svg.traco { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cre-caminho button.on .cre-ico, .cre-pess-quadro.novo .cre-ico { color: var(--c-tinta); background: var(--c-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 16px rgba(var(--c-rgb1), .6); }
.cre-seta { display: inline-flex; flex-shrink: 0; color: rgba(255, 255, 255, .36); }
.cre-seta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
/* O caminho: 3 cartoes de vidro com o icone; o escolhido com o aro em degrade e a luz. */
.cre-caminho { gap: 10px; }
.cre-caminho button { position: relative; gap: 3px; padding: 12px; border-radius: 16px; border-color: transparent;
  background: var(--c-vidro) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, var(--c-borda) border-box;
  box-shadow: var(--c-sombra); transition: transform .15s ease, box-shadow .3s ease; -webkit-tap-highlight-color: transparent; }
.cre-caminho button .cre-ico { margin-bottom: 7px; }
.cre-caminho button[data-cre-caminho="tiktok"] { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 2px; }
.cre-caminho button[data-cre-caminho="tiktok"] .cre-ico { grid-row: 1 / span 2; margin: 0; }
.cre-caminho button.on { border-color: transparent;
  background: linear-gradient(155deg, rgba(var(--c-rgb1), .28), rgba(var(--c-rgb2), .06) 72%) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, var(--c-grad) border-box;
  box-shadow: 0 14px 34px -14px rgba(var(--c-rgb1), .8), 0 0 26px -8px rgba(var(--c-rgb2), .5); }
/* Os campos: fundos, e acendem no toque (o aro do formato no lugar do contorno). O do link com o elo. */
.cre-campo { min-height: 48px; padding: 10px 13px; border-radius: 13px; border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.cre-campo:focus { border-color: rgba(var(--c-rgb1), .8); background-color: rgba(var(--c-rgb1), .06); box-shadow: 0 0 0 3px rgba(var(--c-rgb1), .2), 0 0 24px -6px rgba(var(--c-rgb1), .6); }
#screen-creator .cre-campo:focus-visible { outline: none; }
#screen-creator #cre-tk-link { padding-left: 42px; background-repeat: no-repeat; background-position: 14px 50%; background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a29cbd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1 1M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 0 0 5.66 5.66l1-1'/%3E%3C/svg%3E"); }
/* O "Ou envie o video do celular": uma linha de vidro com o icone e a setinha. */
.cre-tk-enviar { flex-direction: row; align-items: center; gap: 12px; margin: 10px 0 6px; padding: 12px 14px 12px 12px; border-radius: 16px; text-align: left;
  border: 1px solid transparent; background: var(--c-vidro) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, var(--c-borda) border-box;
  box-shadow: var(--c-sombra); transition: transform .15s ease; -webkit-tap-highlight-color: transparent; }
.cre-tk-enviar-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cre-tk-enviar-txt b { font-size: .86rem; }
.cre-tk-enviar small { text-align: left; line-height: 1.35; }
/* Os 4 quadradinhos: o icone (ou ate 3 rostos em roda) em cima, o nome embaixo, a setinha no canto;
   o "Criar influencer" com o aro em degrade. */
.cre-pess-quadros { gap: 10px; margin-top: 10px; }
.cre-pess-quadro { position: relative; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; padding: 12px; border-radius: 16px;
  border: 1px solid transparent; background: var(--c-vidro) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, var(--c-borda) border-box;
  box-shadow: var(--c-sombra); transition: transform .15s ease, box-shadow .3s ease; -webkit-tap-highlight-color: transparent; }
.cre-pess-quadro.novo { border: 1px solid transparent;
  background: linear-gradient(155deg, rgba(var(--c-rgb1), .26), rgba(var(--c-rgb2), .05) 75%) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box,
    linear-gradient(130deg, var(--c-a1), rgba(var(--c-rgb2), .55) 55%, rgba(var(--c-rgb1), .3)) border-box;
  box-shadow: 0 16px 34px -16px rgba(var(--c-rgb1), .85); }
.cre-pess-quadro .cre-seta { position: absolute; top: 13px; right: 10px; }
.cre-pess-quadro .cre-pess-txt b { font-size: .84rem; }
.cre-pess-fotos { display: flex; align-items: center; height: 34px; padding-left: 2px; }
.cre-pess-fotos img { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: #111;
  box-shadow: 0 0 0 2px var(--c-cartao), 0 0 0 3px rgba(var(--c-rgb1), .5); }
.cre-pess-fotos img + img { margin-left: -10px; }
/* A escolhida: o aro em degrade, a foto com sombra, o nome com o degrade; o Trocar de vidro. */
.cre-pess-escolhida { gap: 12px; margin-top: 10px; padding: 10px 12px 10px 10px; border-radius: 16px; border: 1px solid transparent;
  background: linear-gradient(155deg, rgba(var(--c-rgb1), .22), rgba(var(--c-rgb2), .05) 75%) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, var(--c-grad) border-box;
  box-shadow: 0 16px 34px -16px rgba(var(--c-rgb1), .85); }
.cre-pess-escolhida img { width: 44px; height: 70px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 8px 18px -8px rgba(0, 0, 0, .9); }
.cre-apagar { border-color: transparent; color: #ebe7f7; background: var(--c-vidro) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, var(--c-borda) border-box; }
/* "Usar a sua influencer..." do Eu sei criar: a linha com o icone e a setinha (vira pra baixo aberta). */
.cre-prontas-abrir { flex-direction: row; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border-color: transparent;
  background: linear-gradient(155deg, rgba(var(--c-rgb1), .2), rgba(var(--c-rgb2), .04) 75%) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box,
    linear-gradient(130deg, rgba(var(--c-rgb1), .8), rgba(var(--c-rgb2), .4)) border-box;
  box-shadow: var(--c-sombra); transition: transform .15s ease; -webkit-tap-highlight-color: transparent; }
.cre-prontas-abrir.on { border-color: transparent; }
.cre-prontas-abrir .cre-pess-txt { flex: 1; }
.cre-prontas-abrir .cre-pess-txt b { color: var(--c-texto); font-size: .84rem; line-height: 1.3; }
.cre-prontas-abrir.on .cre-seta svg { transform: rotate(90deg); }
/* O botao principal: o degrade com o brilho por cima e a luz; SEM poder gerar, escuro com o aro (nao lavado). */
.cre-gerar { border: 1px solid transparent; background: var(--c-grad) border-box; letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 8px rgba(0, 0, 0, .14), 0 16px 36px -12px rgba(var(--c-rgb1), .8), 0 0 32px -8px rgba(var(--c-rgb2), .55); }
.cre-gerar:disabled { opacity: 1; color: rgba(255, 255, 255, .74);
  background: linear-gradient(160deg, rgba(var(--c-rgb1), .16), rgba(var(--c-rgb2), .05)) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box,
    linear-gradient(110deg, rgba(var(--c-rgb1), .65), rgba(var(--c-rgb2), .45)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--c-sombra); }
.cre-gerar:disabled small { color: var(--c-fraco); opacity: 1; }
.cre-botao-txt { display: inline-flex; align-items: center; gap: 8px; }
.cre-botao-txt svg { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }
.cre-aprovar, .cre-aplicar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 28px -12px rgba(var(--c-rgb1), .85); }
.cre-sugerir { display: inline-flex; align-items: center; gap: 6px; }
.cre-sugerir svg { width: 15px; height: 15px; flex-shrink: 0; fill: currentColor; }
.cre-trava { border-style: solid; border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); }
.cre-trava-ico { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--c-a1); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cre-criar { border: 1px solid transparent; color: var(--c-texto);
  background: linear-gradient(155deg, rgba(var(--c-rgb1), .3), rgba(var(--c-rgb2), .08) 75%) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, var(--c-grad) border-box;
  box-shadow: 0 14px 32px -14px rgba(var(--c-rgb1), .85), inset 0 1px 0 rgba(255, 255, 255, .08); }
/* As escolhas (chips) e o seletor de 2 (Montar a foto | Ja tenho): de vidro; a escolhida acesa. */
.cre-chip { border-color: transparent; color: #ece8f8; background: var(--c-vidro) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, var(--c-borda) border-box;
  transition: transform .12s ease, box-shadow .25s ease; -webkit-tap-highlight-color: transparent; }
.cre-chip.on { border-color: transparent; color: #fff;
  background: linear-gradient(135deg, rgba(var(--c-rgb1), .42), rgba(var(--c-rgb2), .14)) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, var(--c-grad) border-box;
  box-shadow: 0 8px 20px -8px rgba(var(--c-rgb1), .85); }
.cre-modo { border-color: transparent; border-radius: 14px; background: var(--c-vidro) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, var(--c-borda) border-box; }
.cre-modo button.on { color: #fff; background: linear-gradient(135deg, rgba(var(--c-rgb1), .44), rgba(var(--c-rgb2), .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(var(--c-rgb1), .6), 0 6px 18px -6px rgba(var(--c-rgb1), .75); }
/* Os outros cartoes: de vidro; os que mostram o resultado (a foto, a analise, o video) com o aro do formato. */
.cre-formato, .cre-slot, .cre-item, .cre-fala, .cre-sem, .cre-tk-resumo, .cre-tk-parte, .cre-tk-legenda, .cre-tk-ultimos button, .cre-sugestao, .cre-ass-tipo, .cre-ass-fala-card, .cre-ass-plano {
  border-color: transparent; background: var(--c-vidro) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, var(--c-borda) border-box; box-shadow: var(--c-sombra); }
.cre-ass-tipo.on { border-color: transparent;
  background: linear-gradient(155deg, rgba(var(--f-rgb1), .22), rgba(var(--f-rgb1), .04) 75%) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box,
    linear-gradient(130deg, var(--f-a1), rgba(var(--f-rgb1), .35)) border-box;
  box-shadow: 0 16px 34px -16px rgba(var(--f-rgb1), .8); }
.cre-ass-fala-card.on, .cre-tk-parte.resumo { border-color: transparent;
  background: linear-gradient(155deg, rgba(var(--c-rgb1), .2), rgba(var(--c-rgb2), .04) 75%) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, var(--c-grad) border-box;
  box-shadow: 0 16px 34px -16px rgba(var(--c-rgb1), .8); }
.cre-aprovada, .cre-analise, .cre-foto-criada, .cre-ass-video { border-color: transparent;
  background: linear-gradient(160deg, rgba(var(--c-rgb1), .16), rgba(var(--c-rgb2), .03) 70%) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box,
    linear-gradient(125deg, rgba(var(--c-rgb1), .85), rgba(var(--c-rgb2), .5)) border-box; }
.cre-tk-acoes button, .cre-tk-legenda-copiar { border-color: transparent; background: var(--c-vidro) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, var(--c-borda) border-box; }
.cre-tk-acoes .cre-tk-gerar { border-color: transparent; color: var(--c-tinta); font-weight: 800; background: var(--c-grad) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -12px rgba(var(--c-rgb1), .85); }
.cre-tk-acoes .cre-tk-gerar:disabled { opacity: 1; color: rgba(255, 255, 255, .62); box-shadow: none;
  background: var(--c-vidro) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, linear-gradient(110deg, rgba(var(--c-rgb1), .55), rgba(var(--c-rgb2), .4)) border-box; }
.cre-ass-produto { border-color: rgba(var(--c-rgb1), .55); background: radial-gradient(300px 200px at 50% 45%, rgba(var(--c-rgb1), .16), transparent 70%), var(--c-cartao); box-shadow: var(--c-sombra); }
.cre-caixa { background: radial-gradient(120px 120px at 50% 45%, rgba(var(--c-rgb1), .12), transparent 70%), var(--c-campo); }
.cre-formato, .cre-ass-tipo, .cre-ass-fala-card, .cre-tk-ultimos button { transition: transform .15s ease, box-shadow .3s ease; -webkit-tap-highlight-color: transparent; }
.cre-caminho button:active, .cre-pess-quadro:active, .cre-tk-enviar:active, .cre-prontas-abrir:active, .cre-formato:active, .cre-ass-tipo:active,
.cre-ass-fala-card:active, .cre-tk-ultimos button:active { transform: scale(.98); }
.cre-chip:active { transform: scale(.96); }
@media (hover: hover) {
  .cre-caminho button:not(.on):hover, .cre-pess-quadro:hover, .cre-tk-enviar:hover, .cre-chip:not(.on):hover { box-shadow: var(--c-sombra), 0 0 0 1px rgba(var(--c-rgb1), .4); }
}
/* As janelas: o veu com desfoque, a luz do formato no alto, o aro aceso por cima e o "puxador". */
.cre-inf { background: rgba(3, 2, 8, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cre-inf-caixa { border: 1px solid transparent; border-bottom: 0;
  background: radial-gradient(480px 240px at 50% -80px, rgba(var(--c-rgb1), .26), transparent 72%) padding-box, linear-gradient(var(--c-fundo), var(--c-fundo)) padding-box,
    linear-gradient(180deg, rgba(var(--c-rgb1), .8), rgba(255, 255, 255, .08) 24%, rgba(255, 255, 255, .04)) border-box;
  box-shadow: 0 -24px 60px -24px rgba(var(--c-rgb1), .6); }
.cre-inf-caixa::before { content: ""; flex-shrink: 0; width: 40px; height: 4px; margin: -6px auto -4px; border-radius: 4px; background: rgba(255, 255, 255, .24); }
.cre-inf-topo h3 { font-size: 1.14rem; letter-spacing: -.01em; }
.cre-inf-fechar { border: 1px solid transparent; background: var(--c-vidro) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, var(--c-borda) border-box; }
.cre-inf-sua img, .cre-pess-foto img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 12px 24px -14px rgba(0, 0, 0, .9); }
@media (min-width: 600px) {
  .cre-inf-caixa { border-bottom: 1px solid transparent; }
  .cre-inf-caixa::before { display: none; }
}
@media (max-width: 359px) {
  .cre-caminho button, .cre-pess-quadro { padding: 11px 10px; }
  .cre-pess-quadro .cre-pess-txt b { font-size: .8rem; }
  .cre-pess-fotos img { width: 30px; height: 30px; }
}
/* A FOTO DO PRODUTO DELE no modo TikTok (01/11): a linha da escolhida com o Trocar e o Tirar um
   embaixo do outro (lado a lado, a 320 o nome ia pra 2 linhas). */
.cre-tk-produto img { object-fit: cover; }
.cre-tk-produto .cre-pess-txt small.erro { color: #ff8a8a; }
.cre-tk-produto-acoes { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
.cre-tk-produto-acoes .cre-apagar { min-height: 30px; padding: 0 12px; }
.cre-tk-produto-acoes .cre-apagar:disabled { opacity: .55; cursor: default; }
/* As fotos A MAIS do mesmo produto (01/11, ele: "a parte da frente e a de tras"): ate 2 miniaturas com o x, e o +. */
.cre-tk-produto-mais { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cre-tk-produto-mini { position: relative; flex-shrink: 0; width: 54px; height: 54px; border-radius: 12px; overflow: hidden; border: 1px solid var(--c-linha); background: var(--c-campo); }
.cre-tk-produto-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cre-tk-produto-mini.subindo img { opacity: .45; }
.cre-tk-produto-mini.erro { border-color: #ff8a8a; }
.cre-tk-produto-mini-tirar { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .62); color: #fff; font-size: .9rem; line-height: 22px; cursor: pointer; }
.cre-tk-produto-mini-tirar:disabled { opacity: .5; cursor: default; }
.cre-tk-produto-mini-mais { flex-shrink: 0; width: 54px; height: 54px; border-radius: 12px; border: 1px dashed var(--c-linha); background: transparent;
  color: var(--c-a1); font-size: 1.5rem; font-weight: 300; cursor: pointer; }
.cre-tk-produto-mais small { min-width: 0; font-size: .74rem; line-height: 1.35; color: var(--c-fraco); }
/* O TEMA CLARO (01/11, ele: "no creator da pra fazer um tema claro e um escuro?"): o botao sol/lua no topo
   (o escuro e o padrao; o claro fica guardado no aparelho). No claro as cores do formato vao pra um tom mais
   fechado (o roxo, o laranja e o verde neon nao se leem no branco), o vidro vira branco com a borda escura
   fininha, e os textos que eram brancos fixos passam pra cor do texto. Preso ao #screen-creator[data-tema="claro"]. */
.cre-faixa-linha { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.cre-faixa-linha .cre-faixa { flex: 1; min-width: 0; margin: 0; }
.cre-tema { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 1px solid transparent;
  color: var(--c-texto); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease;
  background: var(--c-vidro) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box, var(--c-borda) border-box; box-shadow: var(--c-sombra); }
.cre-tema svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cre-tema:active { transform: scale(.94); }
#screen-creator[data-tema="claro"] {
  --c-fundo: #f6f4fb; --c-cartao: #ffffff; --c-campo: #f3f0f9; --c-linha: rgba(23, 16, 40, .1);
  --c-texto: #17102a; --c-fraco: #5e5578; --c-a1: #7c3aed; --c-a2: #0e7490;
  --c-borda: linear-gradient(180deg, rgba(23, 16, 40, .07), rgba(23, 16, 40, .15));
  --c-vidro: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 60%);
  --c-sombra: 0 14px 30px -18px rgba(23, 16, 40, .32);
}
#screen-creator[data-tema="claro"][data-formato="pov"] { --c-fundo: #fbf7f1; --c-campo: #f8f1e8; --c-fraco: #74604c; --c-a1: #c2410c; --c-a2: #b45309; }
#screen-creator[data-tema="claro"][data-formato="movimento"] { --c-fundo: #f4f7f3; --c-campo: #eef3ec; --c-fraco: #56654f; --c-a1: #15803d; --c-a2: #4d7c0f; }
#screen-creator[data-tema="claro"]::before {
  background: radial-gradient(560px 400px at -8% -110px, rgba(var(--c-rgb1), .18), transparent 70%),
    radial-gradient(460px 340px at 110% -60px, rgba(var(--c-rgb2), .14), transparent 70%),
    radial-gradient(680px 460px at 50% calc(100% + 200px), rgba(var(--c-rgb1), .12), transparent 70%);
}
/* A cor de cada formato no nome do cartao e na etiqueta do video, num tom que se le no branco. */
#screen-creator[data-tema="claro"] .cre-formato, #screen-creator[data-tema="claro"] .cre-ass-tipo { --f-a1: #7c3aed; }
#screen-creator[data-tema="claro"] .cre-formato[data-cre-formato="pov"], #screen-creator[data-tema="claro"] .cre-ass-tipo[data-tipo="pov"] { --f-a1: #c2410c; }
#screen-creator[data-tema="claro"] .cre-formato[data-cre-formato="movimento"], #screen-creator[data-tema="claro"] .cre-ass-tipo[data-tipo="movimento"] { --f-a1: #15803d; }
#screen-creator[data-tema="claro"] .cre-etq { color: #0e7490; }
#screen-creator[data-tema="claro"] .cre-etq.pov { color: #c2410c; }
#screen-creator[data-tema="claro"] .cre-etq.movimento { color: #15803d; }
#screen-creator[data-tema="claro"] .cre-etq.juntado { color: #a21caf; }
#screen-creator[data-tema="claro"] .cre-tk-estado.ok { color: #15803d; }
/* A luz que gira no formato escolhido: no branco o ponto branco sumia — vira a cor viva do formato. */
#screen-creator[data-tema="claro"] .cre-formato.on {
  background: linear-gradient(160deg, rgba(var(--f-rgb1), .16), rgba(var(--f-rgb1), .04)) padding-box, linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box,
    conic-gradient(from var(--creator-escolha, 0deg), rgba(var(--f-rgb1), .45) 0deg, rgba(var(--f-rgb1), .45) 190deg, var(--f-a1) 250deg, rgb(var(--f-rgb1)) 285deg, var(--f-a1) 320deg, rgba(var(--f-rgb1), .45) 360deg) border-box;
}
/* O topo: o raio, o nome e o subtitulo no tom do claro. */
#screen-creator[data-tema="claro"] #cre-raio-cor stop:nth-child(1) { stop-color: #22d3ee; }
#screen-creator[data-tema="claro"] #cre-raio-cor stop:nth-child(2) { stop-color: #0891b2; }
#screen-creator[data-tema="claro"] #cre-raio-cor stop:nth-child(3) { stop-color: #7c3aed; }
#screen-creator[data-tema="claro"] .cre-marca small { color: rgba(23, 16, 40, .5); }
#screen-creator[data-tema="claro"] .cre-h2 { color: rgba(23, 16, 40, .66); }
#screen-creator[data-tema="claro"] .cre-seta { color: rgba(23, 16, 40, .35); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #screen-creator[data-tema="claro"] .cre-marca b { background-image: linear-gradient(100deg, var(--c-a1) 0%, var(--c-a1) 38%, rgba(var(--c-rgb1), .5) 50%, var(--c-a2) 62%, var(--c-a2) 100%);
    filter: drop-shadow(0 0 10px rgba(var(--c-rgb1), .2)); }
  #screen-creator[data-tema="claro"] .cre-ass-titulo { background-image: linear-gradient(100deg, var(--c-texto) 0%, var(--c-texto) 50%, var(--c-a1) 118%); }
  #screen-creator[data-tema="claro"] .cre-caminho button.on b, #screen-creator[data-tema="claro"] .cre-pess-escolhida .cre-pess-txt b {
    background-image: linear-gradient(100deg, var(--c-texto) 0%, var(--c-a1) 90%); }
}
/* Os textos e os botoes que eram claros fixos. O escolhido (chip e "Montar a foto | Ja tenho") cheio no degrade. */
#screen-creator[data-tema="claro"] .cre-chip, #screen-creator[data-tema="claro"] .cre-apagar { color: var(--c-texto); }
#screen-creator[data-tema="claro"] .cre-chip.on, #screen-creator[data-tema="claro"] .cre-modo button.on { color: var(--c-tinta); border-color: transparent; background: var(--c-grad) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 20px -8px rgba(var(--c-rgb1), .7); }
#screen-creator[data-tema="claro"] .cre-campo { border-color: rgba(23, 16, 40, .13); background: #fff; box-shadow: inset 0 1px 3px rgba(23, 16, 40, .07); }
#screen-creator[data-tema="claro"] .cre-campo::placeholder, #screen-creator[data-tema="claro"] textarea::placeholder { color: #8a819e; }
#screen-creator[data-tema="claro"] .cre-gerar:disabled { color: rgba(23, 16, 40, .6); }
#screen-creator[data-tema="claro"] .cre-tk-acoes .cre-tk-gerar:disabled { color: rgba(23, 16, 40, .55); }
#screen-creator[data-tema="claro"] .cre-trava { border-color: rgba(23, 16, 40, .1); background: rgba(255, 255, 255, .7); }
#screen-creator[data-tema="claro"] .cre-barra { background: rgba(23, 16, 40, .08); }
#screen-creator[data-tema="claro"] .cre-ass-passos i:not(.feito):not(.agora) { background: rgba(23, 16, 40, .14); }
#screen-creator[data-tema="claro"] .cre-aviso { color: #9f1239; }
#screen-creator[data-tema="claro"] .cre-foto-falhou b, #screen-creator[data-tema="claro"] .cre-conta b.passou, #screen-creator[data-tema="claro"] .cre-item-meio .cre-erro,
#screen-creator[data-tema="claro"] .cre-tk-estado.erro, #screen-creator[data-tema="claro"] .cre-pess-previa small.erro,
#screen-creator[data-tema="claro"] .cre-tk-produto .cre-pess-txt small.erro { color: #be123c; }
#screen-creator[data-tema="claro"] .cre-analise p { color: var(--c-texto); }
#screen-creator[data-tema="claro"] .cre-analise-atencao { color: #92400e; background: rgba(245, 158, 11, .1); border-color: rgba(217, 119, 6, .35); }
#screen-creator[data-tema="claro"] .cre-analise-atencao b { color: #b45309; }
#screen-creator[data-tema="claro"] .cre-analise .cre-analise-aviso { color: #3f3a52; background: rgba(23, 16, 40, .04); border-color: rgba(23, 16, 40, .12); }
#screen-creator[data-tema="claro"] .cre-pess-escolhida img, #screen-creator[data-tema="claro"] .cre-inf-sua img, #screen-creator[data-tema="claro"] .cre-pess-foto img {
  box-shadow: 0 0 0 1px rgba(23, 16, 40, .08), 0 10px 22px -12px rgba(23, 16, 40, .45); }
/* As janelas: o veu mais leve, o fundo claro com a luz do formato no alto. */
#screen-creator[data-tema="claro"] .cre-inf { background: rgba(23, 16, 40, .34); }
#screen-creator[data-tema="claro"] .cre-inf-caixa { box-shadow: 0 -24px 60px -24px rgba(var(--c-rgb1), .4);
  background: radial-gradient(480px 240px at 50% -80px, rgba(var(--c-rgb1), .16), transparent 72%) padding-box, linear-gradient(var(--c-fundo), var(--c-fundo)) padding-box,
    linear-gradient(180deg, rgba(var(--c-rgb1), .7), rgba(23, 16, 40, .08) 24%, rgba(23, 16, 40, .05)) border-box; }
#screen-creator[data-tema="claro"] .cre-inf-caixa::before { background: rgba(23, 16, 40, .18); }
#screen-creator[data-tema="claro"] .cre-inf-bola { border-color: rgba(23, 16, 40, .25); }
/* Celular pequeno (320 px): o "Movimento" encostava na borda do cartao. */
@media (max-width: 359px) {
  .cre-formato { padding: 9px 7px; }
  .cre-formato b { font-size: .78rem; letter-spacing: .01em; }
  .cre-formato small { font-size: .64rem; }
  .cre-fotos { gap: 5px; }
  .cre-slot { padding: 5px; }
  .cre-item { grid-template-columns: 92px minmax(0, 1fr); }
  .cre-item-midia { width: 92px; }
  /* O "Ajustar a foto" quebrava em 2 linhas. */
  .cre-aprovar, .cre-outra { font-size: .78rem; padding: 0 6px; }
}
/* ── O CLONAR (02/11, ele: "este botao aqui eu quero que tenha um toque especial, nao teria como usar o nome clonar...
   este botao e o que tem mais funcoes de todos e acredito que e o que o pessoal mais vai usar... cor destaque, um emoji
   diferenciado"): o cartao do "Clonar video viral" nas cores do TikTok (o ciano e o rosa do logo) em qualquer formato,
   a luz correndo no aro o tempo todo (a mesma do formato escolhido), o icone no quadrado preto com o "tremido" do TikTok
   (no lugar do emoji: o resto da tela tem icone desenhado), o selo em cima da borda — "💎 AUTOMATICO" (ele trocou o "MAIS COMPLETO":
   "colocar um emoji de um diamante e escreva AUTOMATICO") — e o nome com o degrade.
   Parado pra quem pede menos movimento; no tema claro, o nome escuro. */
.cre-caminho button.cre-clonar { --tk-ciano: #25f4ee; --tk-rosa: #fe2c55; margin-top: 5px; border-width: 1.5px; border-color: transparent;
  background: radial-gradient(150px 100px at 0% 0%, rgba(37, 244, 238, .17), transparent 70%) padding-box,
    radial-gradient(170px 110px at 100% 100%, rgba(254, 44, 85, .17), transparent 70%) padding-box,
    linear-gradient(var(--c-cartao), var(--c-cartao)) padding-box,
    conic-gradient(from var(--creator-escolha, 0deg), var(--tk-ciano) 0deg, rgba(37, 244, 238, .3) 80deg, var(--tk-rosa) 180deg, rgba(254, 44, 85, .3) 260deg, var(--tk-ciano) 360deg) border-box;
  box-shadow: 0 12px 30px -14px rgba(254, 44, 85, .55), 0 0 24px -10px rgba(37, 244, 238, .55);
  animation: creAro 4s linear infinite; }
.cre-caminho button.cre-clonar.on { box-shadow: 0 14px 34px -12px rgba(254, 44, 85, .7), 0 0 30px -8px rgba(37, 244, 238, .7); }
.cre-caminho button.cre-clonar b { width: fit-content; max-width: 100%; font-size: .95rem; letter-spacing: -.01em; color: #fff; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cre-caminho button.cre-clonar b { background: linear-gradient(100deg, #fff 0%, #fff 42%, var(--tk-ciano) 74%, var(--tk-rosa) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.cre-caminho button.cre-clonar .cre-ico { width: 38px; height: 38px; color: #fff; background: #0b0b10;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 18px -4px rgba(254, 44, 85, .55); }
.cre-caminho button.cre-clonar .cre-ico svg { width: 21px; height: 21px; }
.cre-caminho button.cre-clonar .cre-ico .tk-c { stroke: var(--tk-ciano); }
.cre-caminho button.cre-clonar .cre-ico .tk-r { stroke: var(--tk-rosa); }
.cre-clonar-selo { position: absolute; top: -9px; right: 14px; padding: 3px 9px; border-radius: 999px; font-size: .6rem; font-weight: 800;
  letter-spacing: .08em; line-height: 1.2; color: #0b0b10; background: linear-gradient(90deg, var(--tk-ciano), var(--tk-rosa));
  box-shadow: 0 4px 12px -4px rgba(254, 44, 85, .7); pointer-events: none; }
@media (hover: hover) {
  .cre-caminho button.cre-clonar:not(.on):hover { box-shadow: 0 12px 30px -12px rgba(254, 44, 85, .75), 0 0 28px -8px rgba(37, 244, 238, .7); }
}
@media (prefers-reduced-motion: reduce) {
  .cre-caminho button.cre-clonar { animation: none; }
}
#screen-creator[data-tema="claro"] .cre-caminho button.cre-clonar { box-shadow: 0 10px 24px -14px rgba(254, 44, 85, .45), 0 0 18px -10px rgba(37, 244, 238, .45); }
#screen-creator[data-tema="claro"] .cre-caminho button.cre-clonar b { color: #111827; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #screen-creator[data-tema="claro"] .cre-caminho button.cre-clonar b { background: linear-gradient(100deg, #111827 0%, #111827 40%, #0e9fa0 72%, #e11d48 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
}
/* ── O CLONAR POR DENTRO: NEON TIKTOK (02/11, ele: "consegue deixar mais bonito estou achando simples tipo mais premium, cores
   botoes etc... somente neste modo... monte algumas opcoes" — das 3 versoes, "quero a neon TIK TOK"): a tela do Clonar nas cores
   do cartao dele (o ciano e o rosa do TikTok): a luz dos dois atras, o titulo com o degrade, o campo do link com o aro, os
   cartoes de vidro com o fio ciano/rosa, os icones no quadrado preto com o brilho, o "Criar influencer" com a luz girando, o
   produto tracejado e o botao grande no degrade (apagado: escuro com o aro, pra nao parecer que da pra tocar). TUDO preso ao
   #screen-creator #cre-tk (os outros modos nao mudam; o teste do gerador exige a tela na frente). O campo leva o icone do link na mesma regra (a do icone trocava o fundo inteiro).
   O resto do modo (a modelo escolhida, o resultado com o resumo e as partes, o "Gerar o video", o "Clonar outro video") vem
   pelas variaveis do CREATOR trocadas aqui dentro: o ciano e o rosa no lugar do roxo, e o fio dos cartoes nas duas cores. */
#screen-creator #cre-tk { --n-ciano: #25f4ee; --n-rosa: #fe2c55; position: relative; isolation: isolate;
  --c-a1: #25f4ee; --c-a2: #fe2c55; --c-rgb1: 37, 244, 238; --c-rgb2: 254, 44, 85; --c-tinta: #07070b;
  --c-grad: linear-gradient(100deg, #25f4ee 0%, #a8f6ff 34%, #ff8aa1 66%, #fe2c55 100%);
  --c-borda: linear-gradient(135deg, rgba(37, 244, 238, .5), rgba(255, 255, 255, .06) 45%, rgba(254, 44, 85, .5)); }
#screen-creator #cre-tk::before { content: ""; position: absolute; left: 0; right: 0; top: -30px; height: 760px; z-index: -1; pointer-events: none;
  background: radial-gradient(260px 220px at 8% 6%, rgba(37, 244, 238, .2), transparent 70%), radial-gradient(300px 260px at 96% 52%, rgba(254, 44, 85, .18), transparent 70%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
#screen-creator #cre-tk .cre-ass-titulo { font-size: 1.5rem; letter-spacing: -.02em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #screen-creator #cre-tk .cre-ass-titulo { width: fit-content; max-width: 100%; background: linear-gradient(100deg, #fff 0%, #fff 46%, var(--n-ciano) 74%, var(--n-rosa) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
}
#screen-creator #cre-tk .cre-ass-sub { color: rgba(255, 255, 255, .64); }
#screen-creator #cre-tk #cre-tk-link { min-height: 58px; border-radius: 18px; border: 1.5px solid transparent; color: #fff; font-weight: 600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1 1M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 0 0 5.66 5.66l1-1'/%3E%3C/svg%3E"), linear-gradient(#0c0c13, #0c0c13), linear-gradient(110deg, var(--n-ciano), var(--n-rosa));
  background-repeat: no-repeat; background-position: 14px 50%, 0 0, 0 0; background-size: 18px 18px, auto, auto;
  background-origin: padding-box, padding-box, border-box; background-clip: padding-box, padding-box, border-box;
  box-shadow: 0 0 0 5px rgba(37, 244, 238, .06), 0 14px 34px -18px rgba(254, 44, 85, .75); }
#screen-creator #cre-tk #cre-tk-link::placeholder { color: rgba(255, 255, 255, .42); }
#screen-creator #cre-tk #cre-tk-link:focus { box-shadow: 0 0 0 4px rgba(37, 244, 238, .2), 0 0 28px -6px rgba(254, 44, 85, .75); }
#screen-creator #cre-tk .cre-tk-enviar, #screen-creator #cre-tk .cre-pess-quadro { border: 1px solid transparent; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .01)) padding-box, linear-gradient(#101017, #101017) padding-box,
    linear-gradient(135deg, rgba(37, 244, 238, .6), rgba(255, 255, 255, .06) 45%, rgba(254, 44, 85, .6)) border-box;
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, .95); }
#screen-creator #cre-tk .cre-tk-enviar .cre-ico, #screen-creator #cre-tk .cre-pess-quadro .cre-ico { color: #fff; background: #0a0a0f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), -3px -3px 12px -5px rgba(37, 244, 238, .9), 3px 3px 12px -5px rgba(254, 44, 85, .9); }
#screen-creator #cre-tk .cre-pess-quadro.novo { animation: creAro 4s linear infinite;
  background: linear-gradient(160deg, rgba(37, 244, 238, .16), rgba(254, 44, 85, .12)) padding-box, linear-gradient(#101017, #101017) padding-box,
    conic-gradient(from var(--creator-escolha, 0deg), var(--n-ciano), rgba(37, 244, 238, .25) 90deg, var(--n-rosa) 180deg, rgba(254, 44, 85, .25) 270deg, var(--n-ciano)) border-box; }
#screen-creator #cre-tk .cre-pess-quadro.novo .cre-ico { color: #0a0a0f; background: linear-gradient(135deg, var(--n-ciano), var(--n-rosa)); }
#screen-creator #cre-tk .cre-pess-txt b, #screen-creator #cre-tk .cre-tk-enviar-txt b { color: #fff; }
#screen-creator #cre-tk .cre-tk-titulo { font-size: 1rem; }
#screen-creator #cre-tk .cre-tk-titulo::before { width: 4px; height: 18px; background: linear-gradient(180deg, var(--n-ciano), var(--n-rosa)); box-shadow: 0 0 12px rgba(254, 44, 85, .8); }
#screen-creator #cre-tk .cre-tk-enviar[data-cre-tk-produto] { border: 1.5px dashed rgba(254, 44, 85, .6); background: linear-gradient(160deg, rgba(254, 44, 85, .08), rgba(37, 244, 238, .04)); }
#screen-creator #cre-tk .cre-gerar[data-cre-tk="modelar"] { min-height: 66px; border-radius: 20px; }
#screen-creator #cre-tk .cre-gerar[data-cre-tk="modelar"]:not(:disabled) { border: 0; color: #07070b;
  background: linear-gradient(100deg, var(--n-ciano) 0%, #a8f6ff 34%, #ff8aa1 66%, var(--n-rosa) 100%);
  box-shadow: 0 20px 44px -18px rgba(254, 44, 85, .9), 0 0 34px -12px rgba(37, 244, 238, .9); }
#screen-creator #cre-tk .cre-gerar[data-cre-tk="modelar"]:not(:disabled) .cre-botao-txt { font-size: 1.12rem; font-weight: 800; color: #07070b; }
#screen-creator #cre-tk .cre-gerar[data-cre-tk="modelar"]:not(:disabled) .cre-botao-txt svg { color: #07070b; fill: #07070b; }
#screen-creator #cre-tk .cre-gerar[data-cre-tk="modelar"]:not(:disabled) small { color: rgba(7, 7, 11, .72); font-weight: 700; }
#screen-creator #cre-tk .cre-gerar[data-cre-tk="modelar"]:disabled { border: 1.5px solid transparent; color: rgba(255, 255, 255, .55); box-shadow: none;
  background: linear-gradient(#0c0c13, #0c0c13) padding-box, linear-gradient(110deg, rgba(37, 244, 238, .55), rgba(254, 44, 85, .55)) border-box; }
@media (prefers-reduced-motion: reduce) {
  #screen-creator #cre-tk .cre-pess-quadro.novo { animation: none; }
}
/* No tema claro: o fundo branco, o texto escuro, o mesmo aro e os mesmos icones pretos (o jeito do TikTok no claro). */
#screen-creator[data-tema="claro"] #cre-tk { --c-a1: #0b7f86; --c-a2: #e11d48;
  --c-borda: linear-gradient(135deg, rgba(37, 244, 238, .6), rgba(23, 16, 40, .08) 45%, rgba(254, 44, 85, .55)); }
#screen-creator[data-tema="claro"] #cre-tk::before { opacity: .55; }
#screen-creator[data-tema="claro"] #cre-tk .cre-ass-sub { color: var(--c-fraco); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #screen-creator[data-tema="claro"] #cre-tk .cre-ass-titulo { background: linear-gradient(100deg, #111827 0%, #111827 44%, #0e9fa0 74%, #e11d48 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
}
#screen-creator[data-tema="claro"] #cre-tk #cre-tk-link { color: #111827;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1 1M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 0 0 5.66 5.66l1-1'/%3E%3C/svg%3E"), linear-gradient(#fff, #fff), linear-gradient(110deg, var(--n-ciano), var(--n-rosa));
  box-shadow: 0 10px 24px -16px rgba(254, 44, 85, .45); }
#screen-creator[data-tema="claro"] #cre-tk #cre-tk-link::placeholder { color: #8a819e; }
#screen-creator[data-tema="claro"] #cre-tk .cre-tk-enviar, #screen-creator[data-tema="claro"] #cre-tk .cre-pess-quadro {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, rgba(37, 244, 238, .75), rgba(23, 16, 40, .08) 45%, rgba(254, 44, 85, .7)) border-box;
  box-shadow: 0 12px 26px -18px rgba(23, 16, 40, .35); }
#screen-creator[data-tema="claro"] #cre-tk .cre-pess-quadro.novo {
  background: linear-gradient(160deg, rgba(37, 244, 238, .12), rgba(254, 44, 85, .08)) padding-box, linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--creator-escolha, 0deg), var(--n-ciano), rgba(37, 244, 238, .25) 90deg, var(--n-rosa) 180deg, rgba(254, 44, 85, .25) 270deg, var(--n-ciano)) border-box; }
#screen-creator[data-tema="claro"] #cre-tk .cre-pess-txt b, #screen-creator[data-tema="claro"] #cre-tk .cre-tk-enviar-txt b { color: #111827; }
#screen-creator[data-tema="claro"] #cre-tk .cre-tk-enviar[data-cre-tk-produto] { background: linear-gradient(160deg, rgba(254, 44, 85, .06), rgba(37, 244, 238, .04)); }
#screen-creator[data-tema="claro"] #cre-tk .cre-gerar[data-cre-tk="modelar"]:disabled { color: #8a819e;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(110deg, rgba(37, 244, 238, .55), rgba(254, 44, 85, .55)) border-box; }