/* Shared auth modal styles — used across voicefame.com surfaces */
:root {
  --vfa-bg: #0D1117;
  --vfa-bg2: #161B22;
  --vfa-bg3: #22272E;
  --vfa-border: #30363D;
  --vfa-tx: #F0F6FC;
  --vfa-tx2: #C9D1D9;
  --vfa-tx3: #8B949E;
  --vfa-accent: #0C9B8D;
  --vfa-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
.vf-auth-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
}
.vf-auth-overlay.show { display: flex; }
.vf-auth-modal {
  background: var(--bg2, var(--vfa-bg2));
  border: 1px solid var(--border, var(--vfa-border));
  border-radius: 20px;
  padding: 32px;
  max-width: 380px; width: 90%;
  box-shadow: 0 12px 48px rgba(0,0,0,.4);
  text-align: center;
  position: relative;
  font-family: var(--font, var(--vfa-font));
  color: var(--tx, var(--vfa-tx));
}
.vf-auth-modal h2 { font-size: 20px; font-weight: 800; margin: 0 0 6px; color: var(--tx, var(--vfa-tx)); }
.vf-auth-modal p { font-size: 13px; color: var(--tx2, var(--vfa-tx2)); margin: 0 0 20px; line-height: 1.5; }
.vf-auth-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none;
  color: var(--tx3, var(--vfa-tx3));
  font-size: 20px; cursor: pointer;
}
.vf-auth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px; border-radius: 50px; border: none;
  font-family: var(--font, var(--vfa-font));
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform .15s;
  margin-bottom: 10px;
}
.vf-auth-btn:hover { transform: scale(1.02); }
.vf-auth-btn.google { background: #fff; color: #333; }
.vf-auth-btn.email { background: var(--accent, var(--vfa-accent)); color: #fff; }
.vf-auth-btn.ceed { background: linear-gradient(135deg, #FFD700, #FF8C00); color: #000; }
.vf-auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0;
  color: var(--tx3, var(--vfa-tx3));
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
}
.vf-auth-divider::before, .vf-auth-divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border, var(--vfa-border));
}
.vf-auth-input {
  width: 100%; padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border, var(--vfa-border));
  background: var(--bg3, var(--vfa-bg3));
  color: var(--tx, var(--vfa-tx));
  font-family: var(--font, var(--vfa-font));
  font-size: 14px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.vf-auth-input:focus { outline: none; border-color: var(--accent, var(--vfa-accent)); }
.vf-auth-toggle {
  font-size: 12px;
  color: var(--accent, var(--vfa-accent));
  cursor: pointer;
  margin-top: 8px;
  background: none; border: none;
  font-family: var(--font, var(--vfa-font));
}
.vf-auth-error { font-size: 12px; color: #FF5252; margin-bottom: 10px; }
.vf-auth-pwd-wrap { position: relative; }
.vf-auth-pwd-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: 16px;
  color: var(--tx3, var(--vfa-tx3));
  padding: 4px;
}