/* ═══════════════════════════════════════════════════════
   Fulgurite - style.css (V8 - Premium Design Upgrade)
   ═══════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ─────────────────────────────────────────── */
:root {
  --bg:          #F8FAFC;
  --surface:     #FFFFFF;
  --surface-hover: #F9FAFB;
  --surface-alt: #F3F4F6;

  --accent:      #4F46E5;
  --accent-hover:#4338CA;
  --accent-subtle:#EEF2FF;

  --success:     #059669;
  --success-bg:  #D1FAE5;
  --success-icon:#065F46;

  --error:       #DC2626;
  --error-bg:    #FEF2F2;
  --warning-bg:  #FFF7ED;
  --warning-bdr: #FED7AA;
  --warning-text:#92400E;

  /* 3-level text hierarchy */
  --text-1:      #111827;  /* primary - weight 600 */
  --text-2:      #374151;  /* secondary - weight 400 */
  --text-3:      #6B7280;  /* muted - weight 400 */
  --text-4:      #9CA3AF;  /* whisper */

  --bdr:         #E5E7EB;
  --bdr-focus:   #D1D5DB;

  --width:       768px;

  --shadow-rest: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-hover:0 4px 12px rgba(0,0,0,0.08);
  --shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:   var(--shadow-rest);
  --shadow-lg:   var(--shadow-hover);
  --ring:        0 0 0 3px rgba(79, 70, 229, 0.1);

  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:      0.15s var(--ease);
}

/* ── Dark Mode Variables ─────────────────────────────── */
[data-theme="dark"] {
  --bg:          #0A0A0A;
  --surface:     #111111;
  --surface-hover: #161616;
  --surface-alt: #1A1A1A;
  --bdr:         #1E1E1E;
  --bdr-focus:   #2A2A2A;
  --text-1:      #F9FAFB;
  --text-2:      #D1D5DB;
  --text-3:      #9CA3AF;
  --text-4:      #6B7280;
  --accent:      #818CF8;
  --accent-hover:#6366F1;
  --accent-subtle:rgba(129, 140, 248, 0.1);
  --success:     #34D399;
  --success-bg:  rgba(52, 211, 153, 0.1);
  --success-icon:#34D399;
  --error:       #F87171;
  --error-bg:    rgba(248, 113, 113, 0.1);
  --warning-bg:  rgba(251, 191, 36, 0.1);
  --warning-bdr: #92400E;
  --warning-text:#FBBF24;
  --shadow-rest: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-hover:0 8px 24px rgba(0,0,0,0.5);
}
[data-theme="dark"] body {
  background-image: radial-gradient(circle, #3A3A3A 1px, transparent 1px);
}

/* ── Base ────────────────────────────────────────────── */
@keyframes dotFlow {
  0%   { background-position: 0 0; }
  100% { background-position: 24px 24px; }
}

body {
  min-height: 100vh;
  background: var(--bg);
  background-image: radial-gradient(circle, var(--text-4) 1px, transparent 1px);
  background-size: 24px 24px;
  animation: dotFlow 4s linear infinite;
  color: var(--text-2);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }

/* ═══════════════════════════════════════════
   AUTH GATE
   ═══════════════════════════════════════════ */
/* Both hidden by default -JS reveals the correct one after auth check */
#auth-gate { display: none; }
#app        { display: none; }

/* ── Auth Gate Background ─────────────────────────────── */
.auth-bg {
  width: 100%;
  min-height: 100vh;
  background: #080810;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 10vh;
  padding-bottom: 40px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
[data-theme="light"] .auth-bg {
  background: #F8FAFC;
}

/* Lightning canvas + gradient blobs (fixed, z-index 0 behind content) */
.auth-lightning-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.auth-blob {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.auth-blob-1 { background: radial-gradient(circle at 20% 20%, rgba(79,70,229,0.08) 0%, transparent 60%); }
.auth-blob-2 { background: radial-gradient(circle at 80% 80%, rgba(124,58,237,0.06) 0%, transparent 60%); }
.auth-blob-3 { background: radial-gradient(circle at 50% 50%, rgba(59,130,246,0.04) 0%, transparent 50%); }
[data-theme="light"] .auth-blob-1 { background: radial-gradient(circle at 20% 20%, rgba(79,70,229,0.05) 0%, transparent 60%); }
[data-theme="light"] .auth-blob-2 { background: radial-gradient(circle at 80% 80%, rgba(124,58,237,0.04) 0%, transparent 60%); }
[data-theme="light"] .auth-blob-3 { background: radial-gradient(circle at 50% 50%, rgba(59,130,246,0.03) 0%, transparent 50%); }

/* ── Auth Logo ─────────────────────────────────────────── */
.auth-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

/* ── Auth Card ─────────────────────────────────────────── */
.auth-card {
  width: 100%;
  max-width: 480px;
  background: rgba(15,15,20,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(79,70,229,0.1), 0 32px 64px rgba(0,0,0,0.4), 0 0 80px rgba(79,70,229,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 52px 48px;
  text-align: center;
  position: relative;
  z-index: 2;
}
[data-theme="light"] .auth-card {
  background: #ffffff;
  box-shadow: 0 8px 40px rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.06);
}

/* ── Auth Card Icon ─────────────────────────────────────── */
.auth-card-icon {
  width: 100px;
  height: 100px;
  background: rgba(79,70,229,0.10);
  border-radius: 50%;
  border: 1px solid rgba(79,70,229,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  animation: iconPulse 2s ease-in-out infinite;
}
@keyframes iconPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(79,70,229,0.2); }
  50%       { box-shadow: 0 0 28px rgba(79,70,229,0.5); }
}

/* ── Auth Typography ─────────────────────────────────────── */
.auth-title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
[data-theme="light"] .auth-title { color: #111827; }

.auth-subtitle {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  margin: 0 auto 24px;
  max-width: 320px;
  line-height: 1.6;
}
[data-theme="light"] .auth-subtitle { color: rgba(0,0,0,0.5); }

.auth-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin: 0 0 20px;
}
[data-theme="light"] .auth-divider { border-color: rgba(0,0,0,0.08); }

.auth-connect-label {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  margin: 0 0 16px;
}
[data-theme="light"] .auth-connect-label { color: rgba(0,0,0,0.4); }

/* ── Connect Gmail Button ─────────────────────────────────── */
.auth-connect-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  background: #4F46E5;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.4,0,0.2,1), transform 200ms cubic-bezier(0.4,0,0.2,1), box-shadow 200ms cubic-bezier(0.4,0,0.2,1);
  margin-bottom: 20px;
}
.auth-connect-btn:hover {
  background: #5b52f0;
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(79,70,229,0.4);
}
.auth-connect-btn:active {
  transform: translateY(0) scale(0.98);
}

/* ── Security Note + Footer ─────────────────────────────── */
.auth-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  margin: 0;
  line-height: 1.5;
}
[data-theme="light"] .auth-security-note { color: rgba(0,0,0,0.3); }

.auth-footer {
  position: absolute;
  bottom: 24px;
  font-size: 12px;
  color: rgba(255,255,255,0.2);
  text-align: center;
  line-height: 1.8;
}
.auth-footer a {
  color: rgba(255,255,255,0.25);
  text-decoration: none;
  transition: color 0.2s;
}
.auth-footer a:hover { color: var(--accent); }
[data-theme="light"] .auth-footer { color: rgba(0,0,0,0.2); }
[data-theme="light"] .auth-footer a { color: rgba(0,0,0,0.25); }
.auth-topbar {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
}
.auth-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}
.auth-lang-toggle a { color: rgba(255,255,255,0.3); text-decoration: none; transition: color 0.2s; }
.auth-lang-toggle a.active { color: var(--accent); font-weight: 600; }
.auth-lang-toggle a:hover { color: rgba(255,255,255,0.7); }
.auth-lang-toggle span { color: rgba(255,255,255,0.15); }
[data-theme="light"] .auth-lang-toggle a { color: rgba(0,0,0,0.3); }
[data-theme="light"] .auth-lang-toggle a.active { color: var(--accent); }
[data-theme="light"] .auth-lang-toggle a:hover { color: rgba(0,0,0,0.6); }

/* ── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2A2A2A; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3A3A3A; }

/* ── Animations ──────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-8px); }
  40%  { transform: translateX(8px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Tab Transition Animations ───────────────────────── */
@keyframes tabExitAnim {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
@keyframes tabEnterAnim {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tab-pane.tab-exit {
  animation: tabExitAnim 0.12s ease-out forwards;
  pointer-events: none;
}
.tab-pane.tab-enter {
  animation: tabEnterAnim 0.18s ease-out forwards;
}

.fade-up { animation: fadeUp 0.4s var(--ease) backwards; }
.fade-in { animation: fadeIn var(--t-fast) backwards; }
.shake   { animation: shake 0.4s ease; }

/* ── Navbar ──────────────────────────────────────────── */
.top-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: rgba(255,255,255,0.70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: none;
  z-index: 50;
}
[data-theme="dark"] .top-nav {
  background: rgba(10,10,10,0.70);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Logo theme swap: light mode shows black text, dark mode shows white text */
.nav-logo-dark  { display: none; }
.nav-logo-light { display: inline-block; }
[data-theme="dark"] .nav-logo-dark  { display: inline-block; }
[data-theme="dark"] .nav-logo-light { display: none; }

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.nav-left { display: flex; align-items: center; gap: 4px; }
.logo-icon { margin-right: 4px; }
.logo-text { font-size: 16px; letter-spacing: -0.01em; }
.logo-dark { color: var(--text-1); font-weight: 700; }
.logo-indigo {
  font-weight: 700;
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-center {
  display: flex;
  height: 100%;
  gap: 32px;
  margin-left: 48px;
  flex: 1;
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-3);
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s var(--ease);
  position: relative;
}
.nav-link:hover { color: var(--text-1); }
.nav-link.active { color: var(--accent); }

/* Pulsing dot for running campaign */
.nav-link.running::after {
  content: '';
  position: absolute;
  top: 14px;
  right: -6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}

/* Sliding underline element */
.nav-underline {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transition: left 0.2s ease, width 0.2s ease;
  pointer-events: none;
}

.nav-right { display: flex; align-items: center; }

/* ── Dark Mode Toggle ────────────────────────────────── */
.dark-toggle {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: none;
  border: 1px solid var(--bdr);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  transition: all 0.15s ease;
  margin-right: 8px;
  flex-shrink: 0;
}
.dark-toggle:hover { background: var(--surface-alt); color: var(--text-1); }
.dark-toggle svg {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ── Pills & Badges ──────────────────────────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--bdr);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status-dot.success { background: var(--success); }
.status-dot.error { background: var(--error); }

/* ── Nav User Menu ───────────────────────────────────── */
.nav-user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 5px;
  background: var(--surface-alt);
  border: 1px solid var(--bdr);
  border-radius: 99px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  transition: background 0.15s;
}
.nav-user-btn:hover { background: var(--surface); }
.nav-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.nav-avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.nav-avatar-logo {
  border-radius: 4px;
  object-fit: contain;
  background: #fff;
  padding: 1px;
}
.nav-user-name {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 999;
  padding: 8px 0;
}
.nav-user-dropdown-email {
  padding: 6px 14px 8px;
  font-size: 12px;
  color: var(--text-3);
  word-break: break-all;
  white-space: normal;
}
.nav-user-dropdown-divider {
  border: none;
  border-top: 1px solid var(--bdr);
  margin: 0;
}
.nav-user-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.12s;
}
.nav-user-dropdown-item:hover { background: var(--surface-alt); }
.nav-user-dropdown-disconnect { color: var(--error); }
.nav-user-dropdown-admin { color: var(--accent); font-weight: 600; text-decoration: none; display: block; }

.badge-success {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--success-bg);
  color: var(--success-icon);
  font-size: 12px;
  font-weight: 600;
  border-radius: 99px;
}

/* ── Progress Steps ──────────────────────────────────── */
.progress-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  animation: fadeUp 0.35s var(--ease) backwards;
}

.progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 99px;
  background: var(--surface-alt);
  border: 1px solid var(--bdr);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  transition: all var(--t-fast);
}

.progress-step.active {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

.progress-step.completed {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.pstep-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bdr-focus);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--t-fast);
}

.progress-step.active .pstep-num {
  background: var(--accent);
  color: #fff;
}

.progress-step.completed .pstep-num {
  background: rgba(255,255,255,0.3);
  color: #fff;
}

.pstep-label { white-space: nowrap; }

.pstep-connector {
  width: 32px;
  height: 1px;
  background: var(--bdr);
  flex-shrink: 0;
}

/* ── Layout ──────────────────────────────────────────── */
.main-container {
  max-width: var(--width);
  margin: 0 auto;
  padding: 96px 24px 140px 24px;
  position: relative;
  z-index: 1;
}

.tab-pane {
  opacity: 0;
  transition: opacity 0.12s ease;
}
.tab-pane.active { opacity: 1; }
.tab-pane.hidden { visibility: hidden; height: 0; overflow: hidden; }

.card {
  background: var(--surface);
  border-radius: 8px;
  box-shadow: var(--shadow-rest, 0 1px 3px rgba(0,0,0,0.08));
  padding: 32px;
  margin-bottom: 32px;
  transition: box-shadow 200ms cubic-bezier(0.4,0,0.2,1), transform 200ms cubic-bezier(0.4,0,0.2,1), border-color 200ms;
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
  z-index: 1;
}
.card:hover { border-color: rgba(124,58,237,0.3); }

.campaign-card:hover, .card[onclick]:hover, .card.card--interactive:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

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

.card-body {
  padding-top: 16px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 4px;
}

.card-subtitle {
  font-size: 13px;
  color: var(--text-3);
  font-weight: 400;
}

/* ── Forms & Inputs ──────────────────────────────────── */
.field-group { margin-bottom: 24px; }

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 8px;
}

.input-field {
  width: 100%;
  height: 42px;
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  color: var(--text-1);
  font-size: 14px;
  font-family: inherit;
  padding: 0 12px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.input-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
  outline: none;
}
.input-field::placeholder { color: var(--text-4); }
[data-theme="dark"] .input-field { border-color: #2A2A2A; background: #111111; }
[data-theme="dark"] .input-field:focus { border-color: #4F46E5; }

.field-help {
  font-size: 13px;
  color: var(--text-4);
  margin-top: 8px;
}

/* Counter text for subject + word count */
.counter-text {
  font-size: 11px;
  color: var(--text-4);
  font-weight: 400;
  margin-top: 6px;
  text-align: right;
  transition: color var(--t-fast);
}
.counter-text.warn { color: #D97706; }

/* ── Toggles ─────────────────────────────────────────── */
.toggle-container { margin-bottom: 20px; }

.pill-toggle {
  display: inline-flex;
  background: var(--surface-alt);
  border-radius: 99px;
  padding: 4px;
}

.pill-btn {
  background: transparent;
  border: none;
  border-radius: 99px;
  color: var(--text-4);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 16px;
  cursor: pointer;
  transition: all var(--t-fast);
}

.pill-btn.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-md);
}

/* ── Dropzone ────────────────────────────────────────── */
.dropzone {
  height: 120px;
  background: var(--surface-hover);
  border: 2px dashed var(--bdr-focus);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--t-fast);
}

.dropzone:hover,
.dropzone.dragging {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.dropzone.error-state {
  border-color: var(--error);
  background: var(--error-bg);
}

.drop-icon {
  color: var(--text-4);
  margin-bottom: 8px;
}

.drop-text-primary { font-size: 14px; color: var(--text-2); font-weight: 500; }
.drop-text-secondary { font-size: 13px; color: var(--accent); text-decoration: underline; cursor: pointer; }

/* Paste from clipboard button */
.paste-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-4);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color var(--t-fast);
}
.paste-btn:hover { color: var(--accent); }

/* ── Table ───────────────────────────────────────────── */
.table-container { margin-top: 20px; }
.table-scroll { overflow-x: auto; overflow-y: scroll; max-height: 280px; }

.data-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  table-layout: fixed;
}
.data-table th, .data-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 16px;
}

.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--surface-alt);
}

.data-table td {
  height: 44px;
  font-size: 14px;
  color: var(--text-2);
  border-bottom: 1px solid var(--surface-alt);
  vertical-align: middle;
}

.link-clear {
  display: inline-flex;
  align-items: center;
  background: none; border: none;
  color: var(--text-3); font-size: 13px; font-family: inherit; font-weight: 500;
  cursor: pointer; margin-top: 16px;
  transition: color var(--t-fast);
}
.link-clear:hover { color: var(--error); }

/* ── Sliders ─────────────────────────────────────────── */
.flex-full { flex: 1; margin-bottom: 0; }

.delay-picks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}
.delay-seg {
  display: flex;
  gap: 6px;
}
.delay-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  border-radius: var(--radius, 8px);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--bdr);
  color: var(--text-3);
  transition: all 0.2s ease;
}
.delay-btn:hover {
  border-color: var(--accent);
  color: var(--text-1);
}
.delay-btn.active {
  background: rgba(79, 70, 229, 0.12);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}


/* ── Template Box ────────────────────────────────────── */
.template-wrapper { position: relative; }

.template-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 8px;
}
.template-header .field-label { margin-bottom: 0; }

.preview-link {
  background: none; border: none;
  color: var(--accent); font-size: 12px; font-family: inherit; font-weight: 500;
  cursor: pointer;
  transition: color var(--t-fast);
}
.preview-link:hover { color: var(--accent-hover); text-decoration: underline; }

.template-box {
  width: 100%;
  min-height: 220px;
  background: var(--surface-hover);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  color: var(--text-2);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  padding: 16px;
  outline: none;
  resize: vertical;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.template-box:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* Autosave indicator */
.autosave-msg {
  font-size: 11px;
  color: var(--text-4);
  text-align: right;
  margin-top: 4px;
  animation: fadeIn 0.2s ease;
}

/* Writing tips */
.tips-wrap { margin-top: 12px; }

.tips-toggle {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.tips-toggle:hover { opacity: 0.75; }

.tips-card {
  background: var(--accent-subtle);
  border: 1px solid #C7D2FE;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeUp 0.2s ease backwards;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

.tip-item svg { flex-shrink: 0; margin-top: 2px; }
.tip-item code { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: rgba(79,70,229,0.1); padding: 1px 4px; border-radius: 4px; }

/* ── Warning & Completion ────────────────────────────── */
.gmail-warning-card {
  background: var(--warning-bg);
  border: 1px solid var(--warning-bdr);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.warning-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.warning-title { font-size: 14px; font-weight: 600; color: var(--warning-text); margin-bottom: 2px; }
.warning-subtitle { font-size: 13px; color: #B45309; }

.completion-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--success-bg);
  border: 1px solid #A7F3D0;
  border-radius: 12px;
  padding: 20px;
}

.completion-left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--success-icon);
  font-weight: 600;
}

/* ── Buttons ─────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--t-fast);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79,70,229,0.25), 0 0 20px rgba(79,70,229,0.30);
  transition: all 150ms cubic-bezier(0.4,0,0.2,1);
}
[data-theme="dark"] .btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(79,70,229,0.35), 0 0 24px rgba(79,70,229,0.40);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
  transition: all 80ms cubic-bezier(0.4,0,0.2,1);
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Sticky CTA Button ──────────────────────────────── */
.btn-xl {
  position: fixed;
  bottom: 48px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Ghost/disabled state: dimmed, nudged down */
  transform: translateX(-50%) translateY(12px) scale(0.97);
  width: min(640px, calc(100% - 48px));
  height: 52px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 12px;
  z-index: 40;
  background: var(--accent);
  color: #fff;
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
  transition: opacity 0.45s cubic-bezier(0.34,1.56,0.64,1),
              transform 0.45s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.45s ease,
              background 200ms ease;
}
/* Prevent any hover effect while in ghost/disabled state */
.btn-xl.btn-xl:not(.btn-xl--ready):not(.btn-xl--loading):hover {
  transform: translateX(-50%) translateY(12px) scale(0.97);
  box-shadow: none;
}

/* Ready state: spring in, full brightness */
.btn-xl.btn-xl--ready {
  opacity: 1;
  cursor: pointer;
  transform: translateX(-50%) translateY(0) scale(1);
  box-shadow: 0 4px 24px rgba(79,70,229,0.40);
}
.btn-xl.btn-xl--ready:hover {
  background: var(--accent-hover);
  transform: translateX(-50%) translateY(-2px) scale(1);
  box-shadow: 0 8px 32px rgba(79,70,229,0.50);
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

/* Loading state */
.btn-xl.btn-xl--loading {
  opacity: 0.75;
  cursor: not-allowed;
  transform: translateX(-50%) translateY(0) scale(1);
}
.btn-xl.btn-xl--loading:hover {
  transform: translateX(-50%) translateY(0) scale(1);
  box-shadow: none;
}

/* Success flash */
.btn-xl.btn-xl--success {
  background: #059669;
  box-shadow: 0 4px 24px rgba(5,150,105,0.45);
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
  transition: background 300ms ease, box-shadow 300ms ease;
}

/* Spinner */
@keyframes btnSpin { to { transform: rotate(360deg); } }
.btn-xl-spinner {
  animation: btnSpin 0.75s linear infinite;
  flex-shrink: 0;
}

/* Keyboard shortcut badge */
.kbd-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: 0;
  margin-left: 4px;
}

.btn-lg { height: 44px; padding: 0 24px; font-size: 14px; border-radius: 8px; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 13px; border-radius: 6px; }

.btn-outline {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--bdr-focus);
  color: var(--text-2);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--t-fast);
}

.btn-outline.btn-lg { border-radius: 8px; }
.btn-outline.btn-sm { border-radius: 6px; }
.btn-outline:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgba(79,70,229,0.06);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 4px 12px rgba(79,70,229,0.12);
}
.btn-outline:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.btn-outline-accent {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--t-fast);
}
.btn-outline-accent.btn-sm { border-radius: 6px; }
.btn-outline-accent:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}

.btn-danger {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--surface);
  border: 1px solid #FECACA;
  color: var(--error);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--t-fast);
  border-radius: 8px;
}
.btn-danger:hover {
  background: var(--error-bg);
  border-color: var(--error);
  transform: translateY(-1px);
}
.btn-danger:active {
  transform: translateY(0) scale(0.98);
}

/* Sticky gradient fade above CTA */
.sticky-fade {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, #F8FAFC);
  pointer-events: none;
  z-index: 39;
}

.create-hint {
  text-align: center;
  font-size: 13px;
  color: var(--text-4);
  margin-top: 8px;
  font-weight: 400;
}

/* Step number prefix in card titles */
.card-step {
  font-size: 11px;
  font-weight: 600;
  color: #7C3AED;
  margin-right: 6px;
  letter-spacing: 0.02em;
}

.campaign-controls { display: flex; gap: 10px; justify-content: center; margin: 12px 0; }
.campaign-controls button { min-width: 110px; }
.campaign-status-banner {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  margin: 8px 0 4px;
}
.campaign-status-banner.status-paused {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}
.campaign-status-banner.status-stopped {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}
[data-theme="dark"] .campaign-status-banner.status-paused {
  background: #451A03;
  color: #FCD34D;
  border-color: #92400E;
}
[data-theme="dark"] .campaign-status-banner.status-stopped {
  background: #450A0A;
  color: #FCA5A5;
  border-color: #991B1B;
}
#progress-container.paused .progress-fill {
  background: #F59E0B;
  animation: none;
}
#progress-container.stopped .progress-fill {
  background: #EF4444;
  animation: none;
}

/* ── Progress and Log ────────────────────────────────── */
.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
}
.progress-title { color: var(--text-1); }
.progress-count { color: var(--text-3); }

.progress-track {
  height: 6px;
  background: var(--bdr);
  border-radius: 99px;
  margin-bottom: 24px;
  overflow: hidden;
}

@keyframes progressShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4F46E5 0%, #7C3AED 50%, #4F46E5 100%);
  background-size: 200% 100%;
  animation: progressShimmer 2s linear infinite;
  border-radius: 99px;
  transition: width 0.4s ease-out;
}

.log-container {
  max-height: 200px;
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  overflow-y: auto;
  padding: 12px;
}

.log-line {
  display: flex;
  align-items: center;
  height: 32px;
  gap: 12px;
  animation: logEnter 0.15s ease-out backwards;
}

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

.log-ts { color: var(--text-4); font-size: 12px; font-family: 'JetBrains Mono', monospace; }
.log-name { color: var(--text-1); font-size: 13px; font-weight: 500; flex: 1; }
.log-status { width: 16px; display: flex; align-items: center; justify-content: center; }
.log-ok { color: var(--success); }
.log-err { color: var(--error); }

/* ── Common / Specific ───────────────────────────────── */
.model-display { padding: 8px 0 4px 0; }
.model-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text-2);
  background: var(--surface-hover);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--bdr);
  display: inline-block;
}

.settings-ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.auth-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inline-error {
  padding: 12px 16px;
  background: var(--error-bg);
  border-radius: 8px;
  color: var(--error);
  font-size: 13px;
  margin-bottom: 24px;
  font-weight: 500;
  animation: fadeIn var(--t-fast);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  text-align: center;
}
.empty-icon { margin-bottom: 16px; }
.empty-title { font-size: 14px; font-weight: 500; color: var(--text-4); margin-bottom: 4px; }
.empty-subtitle { font-size: 13px; color: var(--bdr-focus); }
.empty-cell { display: none; }

.sheets-row { display: flex; gap: 8px; }
.btn-load { height: 42px; padding: 0 20px; border-radius: 8px; }

/* ── History Summary Stats ───────────────────────────── */
.history-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
  animation: fadeUp 0.35s var(--ease) backwards;
}

.hstat-card {
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-rest);
}

.hstat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
}

.hstat-label {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 400;
}

/* ── Toast Notifications ─────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 90px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}
@keyframes toastProgress {
  from { width: 100%; }
  to   { width: 0%; }
}

.toast {
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.08);
  padding: 12px 16px;
  min-width: 280px;
  max-width: 360px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: all;
  animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  border-left: 3px solid transparent;
  position: relative;
  overflow: hidden;
}

.toast.removing {
  animation: toastOut 0.2s ease-in forwards;
}

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 0 0;
  animation: toastProgress 4s linear forwards;
}
.toast:hover .toast-progress { animation-play-state: paused; }

.toast.success { border-left-color: #10B981; }
.toast.error   { border-left-color: #EF4444; }
.toast.info    { border-left-color: #4F46E5; }
.toast.warning { border-left-color: #F59E0B; }

.toast.success .toast-progress { background: #10B981; }
.toast.error .toast-progress   { background: #EF4444; }
.toast.info .toast-progress    { background: #4F46E5; }
.toast.warning .toast-progress { background: #F59E0B; }

.toast-icon { flex-shrink: 0; margin-top: 1px; }
.toast-body { flex: 1; }
.toast-title { font-size: 13px; font-weight: 600; color: var(--text-1); line-height: 1.4; }
.toast-subtitle { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ── Preview Modal ───────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 16px;
  animation: overlayIn 0.15s ease forwards;
}

@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.modal-card {
  background: var(--surface);
  border-radius: 12px;
  max-width: 560px;
  width: 100%;
  padding: 32px;
  position: relative;
  margin: auto;
  animation: modalIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

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

.modal-title { font-size: 16px; font-weight: 600; color: var(--text-1); }

.modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-4);
  transition: color var(--t-fast);
  padding: 4px;
  display: flex; align-items: center;
}
.modal-close:hover { color: var(--text-1); }

.modal-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.modal-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.modal-contact-name { font-size: 13px; font-weight: 500; color: var(--text-1); }
.modal-contact-email { font-size: 12px; color: var(--text-4); }

.modal-divider { border: none; border-top: 1px solid var(--bdr); margin: 0 0 16px 0; }

.modal-subject-row { display: flex; gap: 8px; align-items: baseline; margin-bottom: 12px; }
.modal-field-label { font-size: 13px; color: var(--text-3); }
.modal-subject-val  { font-size: 13px; font-weight: 500; color: var(--text-1); }

.modal-body-container {
  background: var(--surface-hover);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 20px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.8;
  white-space: pre-wrap;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
  font-family: 'Inter', sans-serif;
}

/* ── Skeleton shimmer upgrade ───────────────────────── */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-line, .skeleton-block {
  background: linear-gradient(90deg, #F3F4F6 25%, #E9EAEC 50%, #F3F4F6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
[data-theme="dark"] .skeleton-line,
[data-theme="dark"] .skeleton-block {
  background: linear-gradient(90deg, #1A1A1A 25%, #222222 50%, #1A1A1A 75%);
  background-size: 200% 100%;
}

.skeleton-line {
  height: 14px;
  margin-bottom: 12px;
}
.skeleton-line:last-child { width: 60%; }

.modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Campaign Name ───────────────────────────────────── */
.campaign-name-wrapper {
  margin-bottom: 24px;
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

.campaign-name-inner {
  display: flex;
  align-items: center;
  position: relative;
  cursor: text;
}

.campaign-name-input {
  max-width: 300px;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-1);
  padding: 4px 0 2px 0;
  transition: border-bottom-color var(--t-fast);
  caret-color: var(--accent);
}

.campaign-name-input::placeholder { color: #D1D5DB; }

.campaign-name-inner:hover .campaign-name-input:not(:focus) {
  border-bottom: 1px solid #E5E7EB;
}

.campaign-name-input:focus {
  border-bottom-color: var(--accent);
}

.campaign-name-icon {
  margin-left: 8px;
  cursor: pointer;
  transition: opacity var(--t-fast);
}

.campaign-name-input:focus + .campaign-name-icon {
  opacity: 0;
  pointer-events: none;
}

.campaign-hint {
  font-size: 11px;
  color: #9CA3AF;
  margin-top: 4px;
  opacity: 0;
  transition: opacity var(--t-fast);
}

.campaign-name-wrapper:hover .campaign-hint {
  opacity: 1;
}

.campaign-name-inner:focus-within ~ .campaign-hint {
  opacity: 0;
}

/* ── Stats Bar ───────────────────────────────────────── */
.stats-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.stat-card {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-num { font-size: 24px; font-weight: 700; line-height: 1; }
.stat-label { font-size: 12px; color: var(--text-3); font-weight: 400; }

/* ── Onboarding ──────────────────────────────────────── */
.onboarding-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  box-shadow: var(--shadow-md);
  max-width: 480px;
  margin: 0 auto 32px auto;
  animation: fadeUp 0.4s var(--ease) backwards;
  border: 1px solid var(--bdr);
}

.onboarding-icon { margin-bottom: 20px; }
.onboarding-title { font-size: 20px; font-weight: 700; color: var(--text-1); margin-bottom: 8px; }
.onboarding-subtitle {
  font-size: 14px; color: var(--text-3); font-weight: 400;
  max-width: 320px; margin: 0 auto 32px auto; line-height: 1.6;
}

.onboarding-steps { text-align: left; display: flex; flex-direction: column; gap: 16px; }

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--bdr);
  border-radius: 8px;
  background: var(--surface-hover);
}

.ob-step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ob-step-num--inactive { background: var(--bdr-focus); }
.ob-step-num--complete { background: var(--success); }

.ob-step-content { flex: 1; }
.ob-step-title { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 2px; }
.ob-step-desc  { font-size: 13px; color: var(--text-3); font-weight: 400; }

/* ── Actionable Errors ───────────────────────────────── */
.columns-error {
  margin-top: 8px;
  font-size: 13px;
  color: var(--error);
  font-weight: 500;
}
.link-btn {
  background: none; border: none;
  color: var(--accent); font-size: 13px; font-family: inherit; font-weight: 500;
  cursor: pointer; text-decoration: underline;
}

.session-banner {
  background: var(--error-bg);
  border-top: 1px solid #FECACA;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--error);
  font-weight: 500;
}
.session-reconnect {
  background: none; border: none;
  color: var(--error); font-weight: 600; font-size: 13px; font-family: inherit;
  cursor: pointer; text-decoration: underline;
}

.settings-alert-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--error);
}

/* ── Column Tooltip ──────────────────────────────────── */
.tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tooltip-trigger {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--surface-alt);
  border: 1px solid var(--bdr);
  color: var(--text-4);
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
  padding: 0;
}
.tooltip-trigger:hover { background: var(--bdr-focus); color: var(--text-2); }

.tooltip-card {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  max-width: 280px;
  width: 280px;
  z-index: 200;
  animation: fadeIn 0.15s ease;
}

.tooltip-section-header {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.tooltip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
  align-items: baseline;
}

.tooltip-col-name {
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-1);
  background: var(--surface-alt);
  border-radius: 4px;
  padding: 1px 5px;
  border: 1px solid var(--bdr);
}

.tooltip-col-desc { font-size: 12px; color: var(--text-3); }

.tooltip-divider {
  border: none;
  border-top: 1px solid var(--bdr);
  margin: 8px 0;
}

.tooltip-footer {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  margin-top: 6px;
}

.tooltip-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--surface);
  border-right: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
}

/* ── Column Mapping Pills ────────────────────────────── */

/* ── Template Download Link ──────────────────────────── */
.tmpl-dl-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--t-fast);
  white-space: nowrap;
  padding: 0;
}
.tmpl-dl-btn:hover { opacity: 0.75; }

/* ── Segmented AI Mode Control ──────────────────────── */
.seg-control {
  display: flex;
  gap: 0;
  background: var(--surface-hover);
  border-radius: 99px;
  padding: 4px;
  width: fit-content;
}
.seg-btn {
  background: none;
  border: none;
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  color: var(--text-4);
  cursor: pointer;
  transition: all 0.18s var(--ease);
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.seg-btn.active {
  background: #7C3AED;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
}
.seg-btn:not(.active):hover { color: var(--text-2); }
.seg-cost {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.65;
  background: rgba(0,0,0,0.08);
  border-radius: 99px;
  padding: 1px 6px;
}
.seg-btn.active .seg-cost {
  background: rgba(255,255,255,0.2);
  opacity: 1;
}

/* ── No-AI badge ────────────────────────────────────── */
.no-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #D1FAE5;
  color: #065F46;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid #A7F3D0;
}

/* ── Per-row preview button ─────────────────────────── */
.preview-row-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: var(--text-4);
  display: inline-flex;
  align-items: center;
  transition: color var(--t-fast), background var(--t-fast);
}
.preview-row-btn:hover {
  color: var(--accent);
  background: var(--accent-subtle);
}


/* ── Language Toggle ────────────────────────────────── */
.lang-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.lang-toggle a { color: var(--text-4); text-decoration: none; transition: color 0.15s; padding: 0 2px; }
.lang-toggle a:hover { color: var(--text-1); }
.lang-toggle a.active { color: var(--text-1); font-weight: 600; }
.lang-toggle .separator { color: var(--text-4); }

/* ── Campaign Summary Card ──────────────────────────── */
@keyframes summarySlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.campaign-summary {
  background: var(--surface);
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 10px;
}
.summary-grid {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.summary-label {
  font-size: 11px;
  color: var(--text-4);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.summary-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}

/* ── AI mode description area ───────────────────────── */
.ai-mode-desc {
  animation: fadeInDown 0.2s ease;
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Sender Account Selector ────────────────────────── */
.sender-selector {
  margin-bottom: 24px;
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sender-selector-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}
.sender-accounts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sender-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--bg);
  border: 1px solid var(--bdr);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t-fast);
}
.sender-pill:hover {
  border-color: var(--text-4);
}
.sender-pill.active {
  background: #ffffff;
  border-color: var(--accent);
  color: #111827;
  font-weight: 500;
}
[data-theme="dark"] .sender-pill.active {
  background: #1A1A1A;
  color: #F9FAFB;
}
.sender-pill-remove {
  background: none;
  border: none;
  color: var(--text-4);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all var(--t-fast);
}
.sender-pill-remove:hover {
  background: #fecaca;
  color: #ef4444;
}
.add-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px dashed var(--bdr);
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-3);
  cursor: pointer;
  transition: all var(--t-fast);
  width: fit-content;
}
.add-account-btn:hover {
  border-color: var(--text-2);
  color: var(--text-1);
}

/* ══════════════════════════════════════════════════════
   CAMPAIGN MANAGER
   ══════════════════════════════════════════════════════ */

/* ── Container width override for Campaigns tab ─── */
.main-container {
  transition: max-width 0.2s ease;
}
.main-container[data-tab="campaigns"] {
  max-width: 960px;
}

/* ── Welcome Banner (theme-aware) ─────────────────── */
.welcome-banner {
  margin-bottom: 16px;
  padding: 16px 20px;
  background: var(--surface-alt, #F3F4F6);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  color: var(--text-2);
}

/* ── Campaigns Header ─────────────────────────────── */
.campaigns-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.campaigns-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 3px;
}
.campaigns-subtitle {
  font-size: 13px;
  color: var(--text-3);
}

/* ── Stats Row ────────────────────────────────────── */
.cmp-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
/* Always exactly 4 stat cards */
.cmp-stats-row > .cmp-stat-card:nth-child(n+5) { display: none; }
.cmp-stat-card {
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--shadow-rest);
  transition: box-shadow 200ms cubic-bezier(0.4,0,0.2,1), transform 200ms cubic-bezier(0.4,0,0.2,1);
}
.cmp-stat-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.cmp-stat-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.cmp-stat-num  { font-size: 20px; font-weight: 700; color: var(--text-1); line-height: 1; }
.cmp-stat-lbl  { font-size: 11px; color: var(--text-3); font-weight: 400; margin-top: 2px; }

/* ── Filter Pills ─────────────────────────────────── */
.campaigns-filter-row {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filter-pill {
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: 99px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: inherit;
}
.filter-pill:hover          { border-color: var(--accent); color: var(--accent); }
.filter-pill.active         { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Campaign Cards Grid ─────────────────────────── */
.campaigns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  justify-content: center;
}
@media (max-width: 600px) {
  .campaigns-grid { grid-template-columns: 1fr; }
  .campaign-card { min-width: 0; max-width: 100%; }
  .kpi-row { grid-template-columns: repeat(4, 1fr); padding: 10px 8px; }
  .kpi-label { font-size: 9px; }
}

/* ── Campaign Card ────────────────────────────────── */
.campaign-card {
  background: var(--surface);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow-rest);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
  animation: fadeUp 0.3s var(--ease) backwards;
  cursor: pointer;
  min-width: 320px;
  max-width: 420px;
  position: relative;
}
.campaign-card:hover {
  box-shadow: 0 0 20px rgba(79, 70, 229, 0.15);
  border-color: rgba(79, 70, 229, 0.4);
}
.campaign-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cmp-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-4);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
  z-index: 2;
}
.campaign-card:hover .cmp-card-delete { opacity: 1; }
.cmp-card-delete:hover {
  color: var(--error, #DC2626);
  background: rgba(220, 38, 38, 0.08);
}
.cmp-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.cmp-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.4;
}
.cmp-card-seller {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

/* AE Badges */
.ae-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.ae-badge--michael { background: #DBEAFE; color: #1D4ED8; }
.ae-badge--sarah   { background: #F3E8FF; color: #7E22CE; }
.ae-badge--gerard  { background: #D1FAE5; color: #065F46; }

/* Goal pill */
.goal-pill {
  display: inline-flex;
  align-items: center;
  background: var(--accent-subtle);
  border: 1px solid var(--accent);
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Contact stats */
.cmp-contact-stats {
  display: flex;
  gap: 10px;
  font-size: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.cmp-stat-total  { color: var(--text-2); font-weight: 500; }
.cmp-stat-ok     { color: var(--success); display: flex; align-items: center; gap: 3px; }
.cmp-stat-miss   { color: var(--error);   display: flex; align-items: center; gap: 3px; }
.cmp-stat-none   { color: var(--text-4);  font-size: 12px; font-style: italic; }

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.status-badge--new              { background: var(--surface-alt); color: var(--text-3); border: 1px solid var(--bdr); }
.status-badge--needs-enrichment { background: #FFF7ED; color: #92400E; }
.status-badge--ready            { background: #D1FAE5; color: #065F46; }
.status-badge--in-progress      { background: #EDE9FE; color: #5B21B6; }
.status-badge--sent             { background: #DBEAFE; color: #1E40AF; }
.status-badge--complete         { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
/* Unified campaign status badges: draft=gray, active=blue, running=green(pulse), paused=yellow, completed=green, archived=gray */
.status-badge--draft     { background: var(--surface-alt); color: var(--text-3); border: 1px solid var(--bdr); }
.status-badge--active    { background: #DBEAFE; color: #1E40AF; border: 1px solid #BFDBFE; }
.status-badge--running   { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; position: relative; padding-left: 20px; }
.status-badge--running::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #059669;
  animation: cmp-pulse 1.4s infinite;
}
.status-badge--paused           { background: #FEF9C3; color: #92400E; border: 1px solid #FDE68A; }
.status-badge--paused-no-credits { background: #FFEDD5; color: #9A3412; border: 1px solid #FDBA74; }
.status-badge--error            { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.status-badge--completed { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
.status-badge--archived  { background: var(--surface-alt); color: var(--text-4); border: 1px solid var(--bdr); }
@keyframes cmp-pulse {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50%       { opacity: 0.4; transform: translateY(-50%) scale(0.7); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Inline form field errors */
.field-error-msg {
  font-size: 12px;
  color: var(--error, #DC2626);
  margin-top: 4px;
  display: none;
}
.field-error-msg.visible { display: block; }
.input-field.field-error,
.template-box.field-error { border-color: var(--error, #DC2626) !important; }

/* Waiting on chip */
.waiting-chip {
  font-size: 11px;
  color: var(--text-4);
  font-style: italic;
}

/* Card footer + action buttons - all on one row */
.cmp-card-footer {
  display: flex;
  gap: 6px;
  border-top: 1px solid var(--bdr);
  margin-top: auto;
  flex-wrap: nowrap;
  padding-top: 10px;
}
.cmp-btn-start {
  flex: 2;
  height: 34px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.cmp-btn-start:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}
.cmp-btn-contacts, .cmp-btn-edit {
  flex: 1;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast);
  background: var(--surface);
  border: 1px solid var(--bdr-focus);
  color: var(--text-2);
}
.cmp-btn-contacts:hover { border-color: var(--accent); color: var(--accent); }
.cmp-btn-edit:hover     { border-color: var(--accent); color: var(--accent); }
.cmp-btn-archive {
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast);
  background: transparent;
  border: 1px solid #FECACA;
  color: var(--error);
}
.cmp-btn-archive:hover { background: var(--error-bg); }

/* Days chip */
.cmp-days { font-size: 11px; color: var(--text-4); }

/* Campaign progress bar */
.cmp-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmp-progress-wrap {
  flex: 1;
  height: 4px;
  background: var(--surface-alt);
  border-radius: 99px;
  overflow: hidden;
}
.cmp-progress-bar {
  height: 100%;
  background: #22c55e;
  border-radius: 99px;
  transition: width 0.4s ease;
  min-width: 0;
}
.cmp-progress-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
  min-width: 28px;
  text-align: right;
}

/* ── Campaigns Empty State ────────────────────────── */
.campaigns-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  text-align: center;
  gap: 12px;
}
.campaigns-empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
}
.campaigns-empty-state p {
  font-size: 14px;
  color: var(--text-3);
  max-width: 360px;
  line-height: 1.6;
  margin: 0;
}

/* ── Campaign Form Modal ─────────────────────────── */
.cmp-form-card {
  max-width: 640px;
  width: 94%;
  padding: 0;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cmp-form-card .modal-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--bdr);
  margin-bottom: 0;
  flex-shrink: 0;
}
.cmp-form-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}
.cmp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cmp-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

/* CSV mini dropzone inside form */
.cmp-csv-zone {
  border: 2px dashed var(--bdr-focus);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all var(--t-fast);
}
.cmp-csv-zone:hover,
.cmp-csv-zone.dragging {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
}
.cmp-csv-zone.loaded {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success-icon);
}

/* Contact analysis row */
.cmp-contact-analysis {
  margin-top: 8px;
  display: flex;
  gap: 12px;
  font-size: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--surface-alt);
  border-radius: 6px;
  border: 1px solid var(--bdr);
}
.cmp-analysis-total { color: var(--text-2); font-weight: 600; }
.cmp-analysis-ok    { color: var(--success); display: flex; align-items: center; gap: 3px; font-weight: 500; }
.cmp-analysis-miss  { color: var(--error);   display: flex; align-items: center; gap: 3px; font-weight: 500; }
.cmp-analysis-sep   { color: var(--text-4); }

/* ── Daily Report Modal ───────────────────────────── */
.report-pre {
  background: var(--surface-hover);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 20px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 440px;
  overflow-y: auto;
  margin-bottom: 16px;
}

/* ── Contacts Full-Page View ─────────────────────── */
#contacts-view {
  padding-bottom: 80px;
}
.cv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bdr);
}
.cv-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.cv-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--bdr-focus);
  color: var(--text-2);
  white-space: nowrap;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.cv-back-btn:hover { border-color: var(--accent); color: var(--accent); }
.cv-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cv-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-hover);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  margin-bottom: 12px;
}
.cv-select-all-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.cv-select-all-label input { cursor: pointer; }
.cv-table-wrap {
  border: 1px solid var(--bdr);
  border-radius: 8px;
  overflow: hidden;
  overflow-x: auto;
}
.contacts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.contacts-table th {
  position: sticky;
  top: 0;
  background: var(--surface-hover);
  padding: 8px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  border-bottom: 1px solid var(--bdr);
  z-index: 1;
}
.contacts-table td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--bdr);
  vertical-align: middle;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-row--nopersonalize td { opacity: 0.55; }
.contact-row--nopersonalize td:last-child { opacity: 1; }

/* ── Personalize toggle switch ───────────────────── */
.cmp-toggle-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
  cursor: pointer;
}
.cmp-toggle-switch input { opacity: 0; width: 0; height: 0; }
.cmp-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bdr-focus);
  border-radius: 20px;
  transition: background var(--t-fast);
}
.cmp-toggle-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  left: 3px;
  top: 3px;
  transition: transform var(--t-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cmp-toggle-switch input:checked + .cmp-toggle-slider { background: var(--accent); }
.cmp-toggle-switch input:checked + .cmp-toggle-slider::before { transform: translateX(18px); }

/* ── Contacts estimate bar ───────────────────────── */
.cv-estimate-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 16px;
  background: var(--surface-hover);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.cv-estimate-sep { color: var(--text-4); }

/* ── Skeleton loading cards ──────────────────────── */
.campaign-card--skeleton {
  pointer-events: none;
}

/* ── Contact status pill ─────────────────────────── */
.contact-status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  background: var(--surface-alt);
  color: var(--text-3);
  border: 1px solid var(--bdr);
  white-space: nowrap;
}
.contact-status-pill--drafted {
  background: #ECFDF5;
  color: #065F46;
  border-color: #A7F3D0;
}
.contact-status-pill--noemail {
  background: #FEF2F2;
  color: #991B1B;
  border-color: #FECACA;
}

/* ── Excluded contact rows ─────────────────────────── */
.contact-excluded td { opacity: 0.45; }
.contact-excluded td:first-child,
.contact-excluded td:nth-child(2) { opacity: 1; }
.contact-excluded { background: var(--surface-alt); }

/* ── Include toggle (green when on) ────────────────── */
.cmp-toggle-include input:checked + .cmp-toggle-slider { background: #16A34A; }

/* ── Contact search input ──────────────────────────── */
#cv-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--bdr);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text-1);
  outline: none;
  transition: border-color var(--t-fast);
  margin-bottom: 8px;
}
#cv-search-input:focus { border-color: var(--accent); }
#cv-search-input::placeholder { color: var(--text-4); }

/* ── Excluded contacts tooltip ──────────────────────── */
.excluded-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-width: 360px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 8px 0;
  z-index: 100;
  font-size: 12px;
  color: var(--text-2);
}
.excluded-tooltip-row {
  padding: 4px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.excluded-tooltip-row:hover {
  background: var(--surface-hover);
}

/* ── Count summary badges ──────────────────────────── */
.cv-count-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.cv-count-badge--ready { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.cv-count-badge--excluded { background: #FFF7ED; color: #9A3412; border: 1px solid #FED7AA; }
.cv-count-badge--invalid { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* ══════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ══════════════════════════════════════════════════════ */

/* Toast dark mode */
[data-theme="dark"] .toast {
  background: #161616;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
/* Modal dark mode */
[data-theme="dark"] .modal-card { background: #111111; }
/* Seg control dark mode */
[data-theme="dark"] .seg-control { background: var(--surface-alt); }
[data-theme="dark"] .seg-btn.active { background: #7C3AED; color: #fff; }
/* No-AI badge dark */
[data-theme="dark"] .no-ai-badge { background: #064E3B; border-color: #065F46; color: #6EE7B7; }
/* Completion banner dark */
[data-theme="dark"] .completion-banner { background: #064E3B; border-color: #065F46; }
/* Progress container dark */
[data-theme="dark"] .progress-track { background: #1E1E1E; }
/* Tips card dark */
[data-theme="dark"] .tips-card { background: #1a1a2e; border-color: #2d2d5e; }
/* Campaign summary dark */
[data-theme="dark"] .campaign-summary { border-color: #064E3B; }
/* Settings alt dark */
[data-theme="dark"] .cv-bulk-bar { background: var(--surface-hover); }
/* Cmp form dark */
[data-theme="dark"] .cmp-csv-zone { border-color: #2A2A2A; }
/* Filter pills dark */
[data-theme="dark"] .filter-pill { background: var(--surface); }
/* Onboarding step dark */
[data-theme="dark"] .onboarding-step { background: var(--surface-hover); }
/* Hstat card dark */
[data-theme="dark"] .hstat-card { background: var(--surface); }
/* Stat card dark */
[data-theme="dark"] .stat-card { background: var(--surface); }
/* Column tooltip dark */
[data-theme="dark"] .tooltip-card { background: var(--surface); border-color: var(--bdr); }
[data-theme="dark"] .tooltip-arrow { background: var(--surface); border-color: var(--bdr); }
/* Inline error dark */
[data-theme="dark"] .inline-error { background: #2D1B1B; }
/* Warning card dark */
[data-theme="dark"] .gmail-warning-card { background: #2D1B00; border-color: #713F12; }
/* Sender selector dark */
[data-theme="dark"] .sender-selector { border-color: var(--bdr); }
/* Log container dark */
[data-theme="dark"] .log-container { background: var(--surface); }
/* Modal body container dark */
[data-theme="dark"] .modal-body-container { background: var(--surface-hover); }
/* Input alt background dark */
[data-theme="dark"] .template-box { background: var(--surface-hover); border-color: var(--bdr); color: var(--text-2); }
[data-theme="dark"] .template-box:focus { background: var(--surface); }
/* Dropzone dark */
[data-theme="dark"] .dropzone { background: var(--surface-hover); border-color: var(--bdr-focus); }
/* Btn outline dark */
[data-theme="dark"] .btn-outline { background: var(--surface); border-color: var(--bdr-focus); color: #ffffff; }
[data-theme="dark"] .btn-danger { background: var(--surface); }
/* Campaign card dark */
[data-theme="dark"] .campaign-card { background: var(--surface); border-color: var(--bdr); }
/* CMP stat card dark */
[data-theme="dark"] .cmp-stat-card { background: var(--surface); border-color: var(--bdr); }
/* Goal pill dark */
[data-theme="dark"] .goal-pill { background: #1e1e3f; border-color: #2d2d5e; color: #818CF8; }
/* Status badges dark */
[data-theme="dark"] .status-badge--new { background: #1A1A1A; color: var(--text-3); border-color: var(--bdr); }
[data-theme="dark"] .status-badge--needs-enrichment { background: #2D1B00; color: #FCD34D; }
[data-theme="dark"] .status-badge--ready { background: #064E3B; color: #6EE7B7; }
[data-theme="dark"] .status-badge--in-progress { background: #1e1e3f; color: #A78BFA; }
[data-theme="dark"] .status-badge--sent { background: #1e3a5f; color: #93C5FD; }
[data-theme="dark"] .status-badge--complete { background: #064E3B; color: #6EE7B7; border-color: #065F46; }
[data-theme="dark"] .status-badge--draft    { background: #1A1A1A; color: var(--text-3); border-color: var(--bdr); }
[data-theme="dark"] .status-badge--active   { background: #1e3a5f; color: #93C5FD; border-color: #1e4a7f; }
[data-theme="dark"] .status-badge--running  { background: #064E3B; color: #6EE7B7; border-color: #065F46; }
[data-theme="dark"] .status-badge--paused           { background: #2D1B00; color: #FCD34D; border-color: #44300A; }
[data-theme="dark"] .status-badge--paused-no-credits { background: #431407; color: #FDBA74; border-color: #7C2D12; }
[data-theme="dark"] .status-badge--error            { background: #450A0A; color: #FCA5A5; border-color: #7F1D1D; }
[data-theme="dark"] .status-badge--completed { background: #064E3B; color: #6EE7B7; border-color: #065F46; }
[data-theme="dark"] .status-badge--archived  { background: #111; color: var(--text-4); border-color: var(--bdr); }

/* Start Drafts button disabled state */
.cmp-btn-start:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.cmp-btn-start.loading { opacity: 0.8; cursor: wait; }
/* Progress step dark */
[data-theme="dark"] .progress-step { background: var(--surface-alt); border-color: var(--bdr); }
[data-theme="dark"] .progress-step.active { background: #1e1e3f; border-color: var(--accent); }
[data-theme="dark"] .progress-step.completed { background: var(--accent); }
/* Pill btn dark */
[data-theme="dark"] .pill-toggle { background: var(--surface-alt); }
[data-theme="dark"] .pill-btn.active { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
/* Status pill dark */
[data-theme="dark"] .status-pill { background: var(--surface-alt); border-color: var(--bdr); }
/* Nav user menu dark */
[data-theme="dark"] .nav-user-btn { background: var(--surface-alt); border-color: var(--bdr); color: var(--text-2); }
[data-theme="dark"] .nav-user-btn:hover { background: var(--surface); }
[data-theme="dark"] .nav-user-dropdown { background: var(--surface); border-color: var(--bdr); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
[data-theme="dark"] .nav-user-dropdown-item:hover { background: var(--surface-alt); }
/* Badge success dark */
[data-theme="dark"] .badge-success { background: #064E3B; color: #6EE7B7; }
/* Table dark */
[data-theme="dark"] .data-table th { color: var(--text-4); border-color: var(--surface-alt); }
[data-theme="dark"] .data-table td { border-color: var(--bdr); }
/* Contacts table dark */
[data-theme="dark"] .contacts-table th { background: var(--surface-hover); border-color: var(--bdr); }
[data-theme="dark"] .contacts-table td { border-color: var(--bdr); }
/* Cmp contact analysis dark */
[data-theme="dark"] .cmp-contact-analysis { background: var(--surface-alt); border-color: var(--bdr); }
/* Model val dark */
[data-theme="dark"] .model-val { background: var(--surface-hover); border-color: var(--bdr); }
/* Slider dark -keep gradient fill, use dark track color */
/* CV table wrap dark */
[data-theme="dark"] .cv-table-wrap { border-color: var(--bdr); }
/* Report pre dark */
[data-theme="dark"] .report-pre { background: var(--surface-hover); border-color: var(--bdr); }
/* Campaign name input dark */
[data-theme="dark"] .campaign-name-input { color: var(--text-1); }
/* Sticky fade dark */
[data-theme="dark"] .sticky-fade { background: linear-gradient(to bottom, transparent, #0A0A0A 70%); }

/* ═══════════════════════════════════════════
   EMAIL VARIANTS
   ═══════════════════════════════════════════ */
.variant-count-badge {
  font-size: 11px;
  font-weight: 500;
  color: #6B7280;
  background: #F3F4F6;
  padding: 2px 8px;
  border-radius: 99px;
}
.variant-card-a,
.variant-card {
  background: var(--surface-hover);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 16px;
}
.variant-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.variant-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: 0.02em;
}
.variant-pill-active {
  background: #4F46E5;
  color: #ffffff;
}
.variant-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #9CA3AF;
  border-radius: 4px;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.variant-remove-btn:hover {
  background: #FEE2E2;
  color: #EF4444;
}
.variant-or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: #9CA3AF;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.variant-or-divider::before,
.variant-or-divider::after {
  content: '';
  flex: 1;
  border-top: 1.5px dashed #E5E7EB;
}
.variant-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  border: 1.5px dashed #C7D2FE;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #6366F1;
  cursor: pointer;
  font-family: inherit;
  transition: all 150ms;
}
.variant-add-btn:hover {
  background: #EEF2FF;
  border-color: #818CF8;
  color: #4F46E5;
}
.variant-max-msg {
  text-align: center;
  font-size: 11px;
  color: #9CA3AF;
  margin: 8px 0 0 0;
  padding: 6px 0;
}
.variant-explainer {
  font-size: 12px;
  color: #9CA3AF;
  margin: 10px 0 0 0;
  line-height: 1.5;
}
/* Dark mode */
[data-theme="dark"] .variant-count-badge { background: #1F2937; color: #9CA3AF; }
[data-theme="dark"] .variant-card-a,
[data-theme="dark"] .variant-card { background: var(--surface-hover); border-color: var(--bdr-focus); }
[data-theme="dark"] .variant-or-divider { color: #4B5563; }
[data-theme="dark"] .variant-or-divider::before,
[data-theme="dark"] .variant-or-divider::after { border-color: #2A2A2A; }
[data-theme="dark"] .variant-add-btn { border-color: #3730A3; color: #818CF8; }
[data-theme="dark"] .variant-add-btn:hover { background: #1E1B4B; border-color: #4F46E5; color: #A5B4FC; }
[data-theme="dark"] .variant-remove-btn:hover { background: #3B0F0F; color: #F87171; }

/* ═══ BLOB BACKGROUND + DARK MODE CARD OVERRIDES ═══ */
/* .card now uses CSS variables -- no dark override needed */
/* Auth gate base styles are already dark -dark mode overrides not needed */
[data-theme="dark"] body {
  background-image: radial-gradient(circle, #3A3A3A 1px, transparent 1px);
}

/* ═══ DANGER ZONE ═══ */
.danger-zone-card {
  border: 1px solid #FECACA !important;
}
.danger-zone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #FEF2F2;
  border-radius: 8px;
  border: 1px solid #FECACA;
}
[data-theme="dark"] .danger-zone-card {
  border: 1px solid #450A0A !important;
}
[data-theme="dark"] .danger-zone-row {
  background: #1C0A0A;
  border-color: #450A0A;
}
[data-theme="dark"] .btn-danger {
  background: #1C0A0A;
  border-color: #7F1D1D;
  color: #FCA5A5;
}
[data-theme="dark"] .btn-danger:hover {
  background: #2D1010;
  border-color: #DC2626;
  color: #FCA5A5;
}

.auth-logo-text { color: #F9FAFB; }
[data-theme="light"] .auth-logo-text { color: #111827; }

/* ── Signature Editor ────────────────────────────────── */
.sig-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.sig-toggle-cb {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.sig-logo-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Signature Warning Banner ─────────────────────────── */
.sig-warning-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-alt, #F3F4F6);
  border: 1px solid var(--bdr, #E5E7EB);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 16px;
}
.sig-warning-link {
  color: var(--accent);
  text-decoration: underline;
}
.sig-warning-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-4);
  padding: 2px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.sig-warning-dismiss:hover { color: var(--text-2); }

/* ── How It Works -inline row cards ─────────────────── */
.hiw-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.hiw-card {
  background: var(--surface-alt, #F9FAFB);
  border: 1px solid var(--bdr, #E5E7EB);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hiw-icon {
  color: var(--accent);
  margin-bottom: 2px;
}
.hiw-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.hiw-card-desc {
  font-size: 12px;
  color: var(--text-3);
}

/* ── How It Works -navbar button ────────────────────── */
.hiw-nav-btn {
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  padding: 5px 10px;
  cursor: pointer;
  transition: color var(--t-fast);
  position: relative;
}
.hiw-nav-btn::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s var(--ease);
  border-radius: 1px;
}
.hiw-nav-btn:hover { color: var(--text-1); }
.hiw-nav-btn:hover::after { transform: scaleX(1); }

/* ── How It Works -fullscreen slideshow ─────────────── */
.hiw-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 28px;
  opacity: 0;
  transition: opacity 200ms ease;
  padding: 24px;
  box-sizing: border-box;
}
.hiw-overlay.hiw-open { opacity: 1; }

.hiw-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.22s ease;
}
.hiw-close:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
  transform: rotate(90deg);
}

.hiw-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 370px;
  overflow: hidden;
  border-radius: 20px;
  flex-shrink: 0;
}

.hiw-slide {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 20px;
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  opacity: 0;
  transform: translateX(60px);
  pointer-events: none;
  box-sizing: border-box;
}

.hiw-step-label {
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 60px;
  font-weight: 300;
  background: linear-gradient(180deg, rgba(99,102,241,0.6) 0%, rgba(99,102,241,0.1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -2px;
  opacity: 0.7;
}

/* Illustrations */
.hiw-illus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  width: 100%;
  margin-bottom: 20px;
}

/* Slide 1: envelope bounce + signature draw */
.hiw-envelope { opacity: 0; }
.hiw-illus-1.animated .hiw-envelope {
  animation: hiwBounceIn 0.55s ease-out forwards;
}
@keyframes hiwBounceIn {
  0%   { transform: translateY(-18px); opacity: 0; }
  60%  { transform: translateY(3px);   opacity: 1; }
  80%  { transform: translateY(-3px); }
  100% { transform: translateY(0);    opacity: 1; }
}
.hiw-sig-line-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 14px;
  width: 160px;
}
.hiw-sig-name {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  font-style: italic;
  margin-bottom: 5px;
}
.hiw-sig-underline {
  display: block;
  height: 2px;
  background: var(--accent);
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
}
.hiw-illus-1.animated .hiw-sig-underline {
  animation: hiwSigDraw 0.5s 0.45s ease-out forwards;
}
@keyframes hiwSigDraw { to { transform: scaleX(1); } }

/* Slide 2: spreadsheet rows stagger in */
.hiw-spreadsheet {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  overflow: hidden;
  width: 260px;
}
.hiw-sheet-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: rgba(79,70,229,0.22);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 6px 10px;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  font-size: 11px;
  gap: 4px;
}
.hiw-sheet-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  gap: 4px;
  opacity: 0;
  transform: translateY(4px);
}
.hiw-sheet-row:last-child { border-bottom: none; }
.hiw-illus-2.animated .hiw-sheet-row {
  animation: hiwRowIn 0.35s ease-out forwards;
  animation-delay: calc(var(--row-i) * 150ms + 80ms);
}
@keyframes hiwRowIn { to { opacity: 1; transform: translateY(0); } }

/* Slide 3: email card with blinking cursor */
.hiw-email-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 14px 18px;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.hiw-email-line-dim {
  height: 9px;
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
}
.hiw-line-short { width: 55%; }
.hiw-email-highlight {
  display: flex;
  align-items: center;
  background: rgba(79,70,229,0.18);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.75);
  gap: 2px;
}
.hiw-email-text { flex: 1; }
.hiw-cursor {
  display: inline-block;
  width: 2px;
  height: 13px;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0;
  flex-shrink: 0;
}
.hiw-illus-3.animated .hiw-cursor {
  animation: hiwCursorBlink 0.85s 0.3s step-end infinite;
}
@keyframes hiwCursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Slide 4: lightning bolt pulse + envelope pop-in */
.hiw-illus-4.animated .hiw-bolt {
  animation: hiwBoltPulse 1.8s ease-in-out infinite;
}
@keyframes hiwBoltPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(79,70,229,0.5)); }
  50%      { filter: drop-shadow(0 0 22px rgba(79,70,229,0.95)); }
}
.hiw-env-row {
  display: flex;
  gap: 14px;
  margin-top: 12px;
}
.hiw-mini-env {
  opacity: 0;
  transform: scale(0.5);
}
.hiw-illus-4.animated .hiw-mini-env {
  animation: hiwEnvPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--env-i) * 150ms + 400ms);
}
@keyframes hiwEnvPop { to { opacity: 1; transform: scale(1); } }

/* Slide text */
.hiw-title {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  margin: 0 0 10px;
  line-height: 1.3;
}
.hiw-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.52);
  line-height: 1.65;
  max-width: 360px;
  margin: 0;
}

/* Controls: arrows + dots */
.hiw-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}
.hiw-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  flex-shrink: 0;
}
.hiw-arrow:hover:not(:disabled) {
  background: rgba(79,70,229,0.22);
  box-shadow: 0 0 18px rgba(79,70,229,0.35);
  color: #fff;
}
.hiw-arrow:disabled { opacity: 0.28; cursor: default; }
.hiw-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hiw-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width 0.2s ease, border-radius 0.2s ease, background 0.2s ease;
}
.hiw-dot.hiw-dot-active {
  width: 22px;
  border-radius: 4px;
  background: var(--accent);
  cursor: default;
}

@media (max-width: 520px) {
  .hiw-stage  { height: 400px; }
  .hiw-slide  { padding: 28px 20px 22px; }
  .hiw-title  { font-size: 17px; }
  .hiw-desc   { font-size: 13px; }
  .hiw-email-card   { width: 240px; }
  .hiw-spreadsheet  { width: 220px; }
}

/* ── Campaign Goal Badges ─────────────────────────── */
.badge-goal-meeting            { background:#3B82F6; color:#fff; }
.badge-goal-invite             { background:#F59E0B; color:#fff; }
.badge-goal-awareness          { background:#6B7280; color:#fff; }
.badge-goal-custom             { background:#8B5CF6; color:#fff; }

/* ── Enrichment Status Badges ────────────────────── */
.badge-enrichment-needs     { background:#EF4444; color:#fff; }
.badge-enrichment-partial   { background:#F59E0B; color:#1F2937; }
.badge-enrichment-full      { background:#10B981; color:#fff; }
.badge-enrichment-ready     { background:#22C55E; color:#fff; }
.badge-enrichment-completed { background:#6B7280; color:#fff; }

/* Shared badge pill base */
.badge-goal-meeting,
.badge-goal-invite,
.badge-goal-awareness,
.badge-goal-custom,
.badge-enrichment-needs,
.badge-enrichment-partial,
.badge-enrichment-full,
.badge-enrichment-ready,
.badge-enrichment-completed {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  line-height: 1.5;
  white-space: nowrap;
}

/* ── KPI Row ─────────────────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 12px 20px;
  margin-top: auto;
  border-top: 1px solid var(--bdr);
  overflow: hidden;
}
.kpi-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.kpi-label {
  font-size: 9px;
  color: var(--text-4);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.2;
}
.kpi-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 4px;
  transition: background var(--t-fast);
  min-width: 28px;
  text-align: center;
}
.kpi-value:hover {
  background: var(--surface-alt);
}
.kpi-item input[type="number"] {
  width: 48px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 1px 2px;
  background: var(--surface);
  color: var(--text-1);
  outline: none;
  -moz-appearance: textfield;
}
.kpi-item input[type="number"]::-webkit-inner-spin-button,
.kpi-item input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Archived Campaigns (Settings) ──────────────────── */
.archived-campaign-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bdr);
}
.archived-campaign-row:last-child { border-bottom: none; }
.archived-campaign-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.archived-campaign-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.archived-campaign-meta {
  font-size: 11px;
  color: var(--text-4);
}
.archived-campaign-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ── AI Analysis Card ───────────────────────────────── */
.cmp-ai-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--bdr);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: cmp-spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes cmp-spin {
  to { transform: rotate(360deg); }
}
.cmp-ai-card {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--surface-alt, #F9FAFB);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.cmp-ai-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cmp-ai-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  color: #fff;
}
.cmp-ai-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.cmp-ai-pill {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 8px;
  background: var(--surface, #E5E7EB);
  color: var(--text-2);
  border: 1px solid var(--bdr);
}
.cmp-ai-count {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 4px;
}

/* ── Variable Insertion Buttons ─────────────────────── */
.var-insert-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.var-insert-label {
  font-size: 11px;
  color: var(--text-4);
  margin-right: 2px;
}
.var-insert-btn {
  display: inline-block;
  font-size: 12px;
  font-family: monospace;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(123, 57, 252, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(123, 57, 252, 0.3);
  cursor: pointer;
  line-height: 1.3;
  transition: background 0.2s;
}
.var-insert-btn:hover {
  background: rgba(123, 57, 252, 0.25);
  border-color: rgba(123, 57, 252, 0.4);
}

/* ═══════════════════════════════════════════
   ADDITIONAL DARK MODE OVERRIDES
   ═══════════════════════════════════════════ */
/* Campaigns empty state SVG */
[data-theme="dark"] .campaigns-empty-state svg rect { fill: #1e1e3f; }
/* AE badges dark */
[data-theme="dark"] .ae-badge--michael { background: #1e3a5f; color: #93C5FD; }
[data-theme="dark"] .ae-badge--sarah   { background: #2e1065; color: #C4B5FD; }
[data-theme="dark"] .ae-badge--gerard  { background: #064E3B; color: #6EE7B7; }
/* History empty state icon dark */
[data-theme="dark"] .empty-state svg { stroke: #4B5563; }
/* Signature preview box dark */
[data-theme="dark"] #sig-preview-box { background: var(--surface-hover) !important; }

/* ═══════════════════════════════════════════
   MOBILE POLISH
   ═══════════════════════════════════════════ */
@media (max-width: 600px) {
  .main-container { padding: 80px 12px 100px; }
  .card { padding: 20px 16px; }
  .nav-center { gap: 4px; }
  .nav-link { font-size: 12px; padding: 6px 8px; }
  .seg-control { flex-wrap: wrap; }
  .seg-btn { font-size: 12px; padding: 5px 10px; }
  .sheets-row { flex-direction: column; }
  .sheets-row .btn-load { width: 100%; }
  .modal-card { margin: 8px; max-height: calc(100vh - 16px); max-width: calc(100vw - 16px); }
  .history-stats-row { grid-template-columns: 1fr 1fr; }
  .toast-container { left: 8px; right: 8px; width: auto; }
  .toast { max-width: 100%; min-width: 0; }
  .var-insert-row { gap: 4px; }
  .var-insert-btn { font-size: 11px; padding: 2px 6px; }
}

/* ── Prefer dark color scheme fallback ──────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0A0A;
    --surface: #111111;
    --surface-hover: #1A1A1A;
    --surface-alt: #161616;
    --text-1: #F9FAFB;
    --text-2: #D1D5DB;
    --text-3: #9CA3AF;
    --text-4: #6B7280;
    --bdr: #1E1E1E;
    --bdr-focus: #2D2D2D;
    --ring: rgba(99, 102, 241, 0.25);
  }
}

/* ── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Credit Balance Widget (004-subscription-credits) ─── */
.credit-widget {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-alt);
  border: 1px solid var(--bdr);
  border-radius: 99px;
  padding: 0 0.75rem;
  height: 32px;
  font-size: 0.8rem;
  white-space: nowrap;
}
.credit-widget__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.credit-widget__balance {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.credit-widget__available {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-1);
}
.credit-widget__sep,
.credit-widget__total {
  font-size: 0.75rem;
  color: var(--text-3);
}
.credit-widget__bar {
  width: 48px;
  height: 4px;
  background: var(--bdr);
  border-radius: 99px;
  overflow: hidden;
}
.credit-widget__bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.3s ease;
}
.credit-widget__meta {
  font-size: 0.68rem;
  color: var(--text-3);
}
.credit-widget__history-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.68rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════
   Billing / Pricing Modal
   ═══════════════════════════════════════════════════════ */

/* ── Nav credits pill ───────────────────────────── */
.nav-credits-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  user-select: none;
  white-space: nowrap;
}
.nav-credits-pill:hover {
  background: var(--surface);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.nav-credits-pill svg {
  color: var(--accent);
  flex-shrink: 0;
}
.nav-credits-pill.low-credits {
  border-color: #F59E0B;
}
.nav-credits-pill.low-credits svg {
  color: #F59E0B;
}
.nav-credits-pill.no-credits {
  border-color: var(--error);
}
.nav-credits-pill.no-credits svg {
  color: var(--error);
}

/* ── Upgrade nav button ─────────────────────────── */
.upgrade-nav-btn {
  background: #7C3AED;
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.upgrade-nav-btn:hover {
  background: #6D28D9;
  transform: translateY(-1px);
}

/* ── Trial banner ───────────────────────────────── */
.trial-banner {
  background: linear-gradient(90deg, rgba(124,58,237,0.12), rgba(124,58,237,0.06));
  border-bottom: 1px solid rgba(124,58,237,0.2);
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 8px 16px;
  font-size: 13px;
}
.trial-banner-dismiss {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.trial-banner-dismiss:hover { color: var(--text-1); }

/* ── Pricing modal ──────────────────────────────── */
.pricing-modal-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 40px 32px 32px;
  max-width: 640px;
  width: 90vw;
  position: relative;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
  animation: modalSlideUp 0.2s var(--ease);
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pricing-modal-header {
  text-align: center;
  margin-bottom: 24px;
}
.pricing-modal-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 6px;
}
.pricing-subtitle {
  font-size: 14px;
  color: var(--text-3);
}

/* ── Currency toggle ────────────────────────────── */
.currency-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 24px;
  background: var(--surface-alt);
  border-radius: 8px;
  padding: 3px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.currency-btn {
  padding: 6px 18px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: var(--text-3);
  transition: all var(--t-fast);
}
.currency-btn.active {
  background: var(--surface);
  color: var(--text-1);
  box-shadow: var(--shadow-sm);
}

/* ── Plan cards ─────────────────────────────────── */
.pricing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) {
  .pricing-cards { grid-template-columns: 1fr; }
}
.pricing-card {
  border: 1px solid var(--bdr);
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.pricing-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 4px;
}
.pricing-card-featured {
  border-color: #7C3AED;
  box-shadow: 0 0 0 1px #7C3AED;
}
.pricing-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #7C3AED;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing-amount {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-1);
  margin: 12px 0 16px;
}
.pricing-amount span {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-3);
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex: 1;
}
.pricing-features li {
  font-size: 13px;
  color: var(--text-2);
  padding: 5px 0;
  padding-left: 20px;
  position: relative;
}
.pricing-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #059669;
  font-weight: 600;
}

/* ── CTA buttons ────────────────────────────────── */
.pricing-cta {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--bdr);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
}
.pricing-cta:hover {
  border-color: var(--text-3);
  background: var(--surface-hover);
}
.pricing-cta-featured {
  background: #7C3AED;
  color: #fff;
  border-color: #7C3AED;
}
.pricing-cta-featured:hover {
  background: #6D28D9;
  border-color: #6D28D9;
}
.pricing-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Onboarding questionnaire overlay (007) ─────── */
.ob-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ob-card {
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  width: 100%;
  max-width: 520px;
  padding: 32px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}
.ob-header {
  margin-bottom: 28px;
}
.ob-overlay-topbar {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 10;
}
.ob-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}
.ob-lang-toggle a { color: var(--text-4); text-decoration: none; transition: color 0.2s; }
.ob-lang-toggle a.active { color: var(--accent); font-weight: 600; }
.ob-lang-toggle a:hover { color: var(--text-1); }
.ob-lang-toggle span { color: var(--bdr); }
.ob-progress-bar {
  height: 4px;
  background: var(--bdr);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 10px;
}
.ob-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.ob-step-counter {
  font-size: 12px;
  color: var(--text-4);
  text-align: right;
}
.ob-step-content {
  min-height: 200px;
}
.ob-step-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 20px;
  line-height: 1.3;
}
.ob-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ob-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1.5px solid var(--bdr);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
  font-size: 14px;
  color: var(--text-1);
  background: var(--surface);
  text-align: left;
  width: 100%;
}
.ob-option:hover {
  border-color: var(--text-3);
  background: var(--surface-hover);
}
.ob-option--selected {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--text-1);
}
.ob-option-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--bdr);
  flex-shrink: 0;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.ob-option--selected .ob-option-icon {
  background: var(--accent);
  border-color: var(--accent);
}
.ob-market-toggle {
  display: flex;
  gap: 12px;
}
.ob-market-btn {
  flex: 1;
  padding: 14px;
  border: 1.5px solid var(--bdr);
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  text-align: center;
}
.ob-market-btn:hover {
  border-color: var(--text-3);
  background: var(--surface-hover);
}
.ob-market-btn--selected {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
}
.ob-sublabel {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 8px;
  margin-top: 16px;
}
.ob-textarea-group {
  margin-top: 8px;
}
.ob-textarea-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 8px;
}
.ob-textarea {
  width: 100%;
  resize: vertical;
}
.ob-other-input {
  margin-top: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--bdr);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-1);
  font-size: 14px;
  display: none;
}
.ob-other-input:focus {
  outline: none;
  border-color: var(--accent);
}
.ob-error {
  color: var(--error);
  font-size: 13px;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.ob-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
}
.ob-required-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.2);
  border-radius: 20px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}
.ob-tos-block {
  background: var(--surface-2, rgba(79,70,229,0.04));
  border: 1px solid var(--bdr);
  border-radius: 10px;
  padding: 14px 16px;
}
.ob-tos-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.ob-tos-block:has(input:checked) {
  border-color: var(--accent);
  background: rgba(79,70,229,0.06);
}

/* ── Settings: onboarding profile editor (007) ───── */
.ob-settings-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ob-settings-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.ob-settings-label {
  flex: 0 0 140px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  padding-top: 8px;
}
.ob-settings-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ob-settings-select {
  max-width: 280px;
  font-size: 13px;
}
.ob-settings-other {
  max-width: 280px;
  font-size: 13px;
}
.ob-settings-status {
  font-size: 12px;
  padding: 2px 0;
}
.ob-settings-status--ok    { color: #22c55e; }
.ob-settings-status--error { color: var(--error); }

/* ── Optional badge ─────────────────────────────── */
.optional-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-4);
  background: var(--surface-hover);
  border: 1px solid var(--bdr);
  border-radius: 4px;
  padding: 1px 7px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* ── Campaign context fields (007) ──────────────── */
.cmp-context-block {
  margin-bottom: 16px;
}
.cmp-context-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.06);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.cmp-context-tip svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #7C3AED;
}
.cmp-context-tip--done {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.06);
  color: var(--text-3);
}
.cmp-context-tip--done svg {
  color: #22c55e;
}

.app-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 16px 32px;
  border-top: 1px solid var(--bdr);
  margin-top: 48px;
}
.contact-us-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  background: transparent;
  border: 1px solid var(--bdr);
  border-radius: 6px;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.contact-us-btn:hover {
  color: var(--text-1, #111);
  border-color: var(--bdr-focus);
  background: var(--bg);
}