/* ============================================================
   v53 -- ZOOM Marketing Funnels
   Full funnel builder with 10 funnel types, AI generation,
   speed-to-lead, behavioral branching, QR codes, retargeting
   ============================================================ */

/* Funnel Theme */
.fn-section {
  --fn-primary: #7C4DFF;
  --fn-primary-light: #B388FF;
  --fn-primary-dark: #5E35B1;
  --fn-accent: #00E5FF;
  --fn-accent-dark: #00B8D4;
  --fn-glow: rgba(124,77,255,0.12);
  --fn-border: rgba(124,77,255,0.15);
  --fn-card: rgba(14,12,28,0.7);
  --fn-bg: #0a0816;
}

/* Section Header */
.fn-header {
  text-align:center; padding:24px 20px 22px; position:relative;
  background:linear-gradient(180deg,rgba(124,77,255,0.06) 0%,transparent 100%);
}
.fn-header::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:140px; height:2px; background:linear-gradient(90deg,transparent,var(--fn-primary),transparent);
}
.fn-brand-mark {
  font-size:0.62rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--fn-primary); font-weight:700; margin-bottom:6px;
}
.fn-brand-title {
  font-family:'Clash Display','Satoshi',sans-serif; font-size:1.9rem;
  font-weight:800; color:#E8EDFB; letter-spacing:-0.01em; margin-bottom:4px;
}
.fn-brand-title span { color:var(--fn-primary-light); }
.fn-brand-sub {
  font-size:0.68rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--fn-primary-dark); font-weight:600;
}

/* Tabs */
.fn-tabs {
  display:flex; gap:4px; flex-wrap:wrap; margin-bottom:24px;
  padding:6px; background:rgba(10,8,22,0.5); border-radius:14px;
  border:1px solid var(--fn-border);
}
.fn-tab {
  padding:10px 16px; border-radius:10px; border:none; cursor:pointer;
  font-size:0.72rem; font-weight:700; font-family:'Satoshi',sans-serif;
  color:#6A6890; background:transparent; transition:all 0.25s; white-space:nowrap;
}
.fn-tab:hover { color:#B388FF; background:rgba(124,77,255,0.08); }
.fn-tab.fn-active { color:#fff; background:linear-gradient(135deg,var(--fn-primary-dark),var(--fn-primary)); box-shadow:0 2px 12px rgba(124,77,255,0.3); }

/* Tab Content */
.fn-tab-panel { display:none; }
.fn-tab-panel.fn-panel-active { display:block; }

/* Cards */
.fn-card {
  background:var(--fn-card); border:1px solid var(--fn-border);
  border-radius:16px; padding:24px; margin-bottom:16px; position:relative; overflow:hidden;
}
.fn-card::before {
  content:''; position:absolute; top:0; right:0; width:200px; height:200px;
  background:radial-gradient(circle,rgba(124,77,255,0.03) 0%,transparent 70%); pointer-events:none;
}
.fn-card-title {
  font-size:0.62rem; color:var(--fn-primary); text-transform:uppercase;
  letter-spacing:0.12em; font-weight:700; margin-bottom:12px;
}

/* Funnel Template Cards */
.fn-template-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-bottom:20px;
}
.fn-template-card {
  background:rgba(14,12,28,0.6); border:1px solid rgba(124,77,255,0.1);
  border-radius:14px; padding:20px; cursor:pointer; transition:all 0.3s;
  position:relative; overflow:hidden;
}
.fn-template-card:hover {
  border-color:var(--fn-primary); transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(124,77,255,0.15);
}
.fn-template-card.fn-selected {
  border-color:var(--fn-primary); background:rgba(124,77,255,0.08);
  box-shadow:0 0 20px rgba(124,77,255,0.2);
}
.fn-template-icon { font-size:1.8rem; margin-bottom:10px; }
.fn-template-name { font-size:0.88rem; font-weight:800; color:#E8EDFB; margin-bottom:4px; }
.fn-template-desc { font-size:0.75rem; color:#8A96B8; line-height:1.5; }
.fn-template-badge {
  position:absolute; top:12px; right:12px; font-size:0.55rem; font-weight:800;
  padding:3px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:0.05em;
}

/* Analytics */
.fn-stat-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:20px;
}
.fn-stat-card {
  background:rgba(14,12,28,0.6); border:1px solid var(--fn-border);
  border-radius:12px; padding:16px; text-align:center;
}
.fn-stat-value { font-size:1.6rem; font-weight:900; color:#E8EDFB; }
.fn-stat-label { font-size:0.62rem; color:#6A6890; text-transform:uppercase; letter-spacing:0.1em; margin-top:4px; }

/* Speed Grade */
.fn-grade-A { color:#34D399; }
.fn-grade-B { color:#FBBF24; }
.fn-grade-C { color:#FB923C; }
.fn-grade-F { color:#F87171; }

/* Branch Tree */
.fn-branch { padding-left:20px; border-left:2px solid rgba(124,77,255,0.2); margin:10px 0; }
.fn-branch-node {
  background:rgba(14,12,28,0.6); border:1px solid var(--fn-border);
  border-radius:10px; padding:12px 16px; margin-bottom:8px; font-size:0.8rem; color:#B0B8D0;
}
.fn-branch-label {
  font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
  margin-bottom:6px; display:inline-block; padding:2px 8px; border-radius:6px;
}
.fn-branch-open { background:rgba(52,211,153,0.15); color:#34D399; }
.fn-branch-no-open { background:rgba(248,113,113,0.15); color:#F87171; }
.fn-branch-click { background:rgba(124,77,255,0.15); color:#B388FF; }

/* QR Code */
.fn-qr-container {
  display:inline-block; background:#fff; padding:16px; border-radius:12px; margin:12px 0;
}

/* Buttons */
.fn-btn-primary {
  width:100%; background:linear-gradient(135deg,var(--fn-primary-dark),var(--fn-primary));
  border:none; color:#fff; font-weight:800; padding:15px; border-radius:14px;
  font-size:0.9rem; cursor:pointer; font-family:'Satoshi',sans-serif;
  transition:all 0.3s; letter-spacing:0.02em;
}
.fn-btn-primary:hover { box-shadow:0 6px 24px rgba(124,77,255,0.35); transform:translateY(-1px); }
.fn-btn-sm {
  background:rgba(124,77,255,0.12); border:1px solid var(--fn-border);
  color:var(--fn-primary-light); padding:8px 16px; border-radius:10px;
  font-size:0.72rem; font-weight:700; cursor:pointer; font-family:'Satoshi',sans-serif;
  transition:all 0.2s;
}
.fn-btn-sm:hover { background:rgba(124,77,255,0.2); }
.fn-btn-primary:disabled { opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none; }

/* Funnel "building" state: indeterminate looping sweep + cycling status copy */
.fn-building {
  background:rgba(255,255,255,0.03); border:1px solid rgba(124,77,255,0.25);
  border-radius:12px; padding:16px 18px; margin-top:16px; text-align:center;
}
.fn-building-label { font-size:0.9rem; font-weight:800; color:var(--fn-primary-light); margin-bottom:6px; }
.fn-building-msg { font-size:0.78rem; color:#8A96B8; margin-bottom:12px; min-height:1.1em; }
.fn-building-track { height:6px; background:rgba(255,255,255,0.08); border-radius:6px; overflow:hidden; }
.fn-building-fill {
  height:100%; width:40%; border-radius:6px;
  background:linear-gradient(90deg,var(--fn-primary-dark),var(--fn-primary));
  animation:fnBuildingSweep 1.3s ease-in-out infinite;
}
@keyframes fnBuildingSweep { 0% { margin-left:-40%; } 100% { margin-left:100%; } }
/* Premium on-brand button: depth + glow + sheen + hover lift. Shared by the HSO
   Auto-Generate Copy and Generate Landing Page buttons. */
.hso-premium-btn {
  position: relative; overflow: hidden;
  border: none; border-radius: 12px; padding: 15px; cursor: pointer;
  font-weight: 800; font-size: 0.92rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff !important; -webkit-text-fill-color: #fff;
  background: linear-gradient(145deg, #2d7af8 0%, #0065f1 45%, #3b2fd1 100%);
  box-shadow: 0 6px 22px rgba(0,101,241,0.4), 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Force white text over the blanket "#funnels *" dark-text !important rule (specificity 1,0,0);
   scoping under #funnels (1,1,0) is the same approach as the .fn-btn-primary fix below. */
#funnels .hso-premium-btn { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.hso-premium-btn::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg); pointer-events: none; animation: hsoGenSheen 3.5s ease-in-out infinite;
}
.hso-premium-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,101,241,0.55), 0 2px 4px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
/* Layout only for the full-width Auto-Generate Copy button. */
#hso-generate-all-btn { width: 100%; margin-bottom: 16px; }
@keyframes hsoGenSheen { 0% { left:-60%; } 55% { left:130%; } 100% { left:130%; } }
/* Premium select control for the HSO page-type dropdown (blue gradient pill, matches .hso-premium-btn).
   Scoped #funnels #hso-page-type (specificity 2,0,0) with !important so it beats the
   #funnels select rule (1,0,1, !important) that otherwise forces a white background. */
#funnels #hso-page-type {
  appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center, linear-gradient(145deg, #2d7af8 0%, #0065f1 45%, #3b2fd1 100%) !important;
  background-size: 12px 8px, auto !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  font-size: 0.8rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important;
  padding: 10px 40px 10px 16px !important;
  border: 0.5px solid rgba(255,255,255,0.25) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 22px rgba(0,101,241,0.4), 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  cursor: pointer !important; outline: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
#funnels #hso-page-type:hover, #funnels #hso-page-type:focus {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 30px rgba(0,101,241,0.55), 0 2px 4px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  border-color: rgba(255,255,255,0.4) !important;
}
/* OS-rendered option list: dark text on white for readability. */
#hso-page-type option { color: #111827; background: #fff; }
/* Shared secondary button for Preview + Draft, tuned for the light #funnels theme. */
.hso-secondary-btn {
  background: rgba(255,255,255,0.9);
  border: 0.5px solid rgba(0,101,241,0.2);
  border-radius: 10px;
  padding: 14px 20px;
  font-size: 0.85rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,101,241,0.08);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.hso-secondary-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(0,101,241,0.45);
  box-shadow: 0 6px 18px rgba(0,101,241,0.18);
}
/* Dark readable text on the light glass button, beating the blanket "#funnels *" override. */
#funnels .hso-secondary-btn { color: #1a2440 !important; -webkit-text-fill-color: #1a2440 !important; }

/* Retargeting Ladder */
.fn-ladder-tier {
  display:flex; align-items:center; gap:14px; padding:14px 18px;
  background:rgba(14,12,28,0.5); border:1px solid var(--fn-border);
  border-radius:12px; margin-bottom:10px;
}
.fn-ladder-num {
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:900; font-size:0.85rem; flex-shrink:0;
}

/* Pixel Checklist */
.fn-checklist-item {
  display:flex; align-items:flex-start; gap:10px; padding:10px 0;
  border-bottom:1px solid rgba(124,77,255,0.06); font-size:0.8rem; color:#B0B8D0;
}
.fn-checklist-num {
  width:24px; height:24px; border-radius:50%; background:var(--fn-primary);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:0.65rem; font-weight:800; flex-shrink:0;
}

/* Speed Protocol Alert */
.fn-speed-alert {
  background:linear-gradient(135deg,rgba(248,113,113,0.08),rgba(255,0,0,0.03));
  border:1px solid rgba(248,113,113,0.25); border-radius:12px; padding:16px;
  margin-bottom:16px; animation:fnPulse 2s infinite;
}
@keyframes fnPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(248,113,113,0); }
  50% { box-shadow:0 0 16px 4px rgba(248,113,113,0.1); }
}

/* Responsive */
@media(max-width:768px) {
  .fn-template-grid { grid-template-columns:1fr; }
  .fn-stat-grid { grid-template-columns:repeat(2,1fr); }
  .fn-tabs { gap:2px; padding:4px; }
  .fn-tab { padding:8px 12px; font-size:0.65rem; }
}

/* ═══ $100B PREMIUM — Marketing Funnels (scoped to #funnels) ═══
   Section uses .fn-* classes with purple/cyan theme vars. The only
   existing global rule at line 5937 just sets padding — NO text/bg
   coverage. Full light-theme conversion here. */

/* ── Base: force light page + dark text ── */
#funnels { background: #f0f2f7 !important; color: #111827 !important; }
#funnels, #funnels * {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* Remap .fn-section CSS variables so inheriting rules flow blue */
#funnels.fn-section, .fn-section#funnels {
  --fn-primary: #0065f1 !important;
  --fn-primary-light: #2d7af8 !important;
  --fn-primary-dark: #0055d4 !important;
  --fn-accent: #0065f1 !important;
  --fn-accent-dark: #0055d4 !important;
  --fn-glow: rgba(0,101,241,0.12) !important;
  --fn-border: rgba(0,101,241,0.18) !important;
  --fn-card: rgba(255,255,255,0.96) !important;
  --fn-bg: transparent !important;
}

/* ── Hero title "Marketing Funnels" — was color:#E8EDFB (ghost white) ── */
#funnels .fn-brand-title {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  text-shadow: none !important;
}
/* "Funnels" span emphasis — ZOOM blue */
#funnels .fn-brand-title span {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
}
/* Subtitle "AI-Powered Lead Generation · 10 Proven Funnel Types · All 22 Coaches" */
#funnels .fn-brand-sub {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}
#funnels .fn-brand-mark {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
}

/* ── Header section — premium white glass with blue top glow ── */
#funnels .fn-header {
  background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(0,101,241,0.04)) !important;
  border: 0.5px solid rgba(0,101,241,0.18) !important;
  border-radius: 20px !important;
  padding: 28px 44px 26px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 14px 40px rgba(0,101,241,0.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  margin-bottom: 20px !important;
}
#funnels .fn-header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: auto !important;
  height: 3px !important;
  transform: none !important;
  background: linear-gradient(90deg, #0055d4, #0065f1, #2d7af8, #0065f1, #0055d4) !important;
  background-size: 200% 100% !important;
  animation: z100bCardGlow 4s ease-in-out infinite !important;
  z-index: 2 !important;
}

/* ── TABS: dark container → transparent; inactive → glass; active → animated blue ── */
#funnels .fn-tabs {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
#funnels .fn-tab {
  background: rgba(255,255,255,0.72) !important;
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  border: 0.5px solid rgba(0,101,241,0.10) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}
#funnels .fn-tab:hover {
  background: rgba(0,101,241,0.06) !important;
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
  border-color: rgba(0,101,241,0.22) !important;
}
#funnels .fn-tab.fn-active {
  background: linear-gradient(135deg, #0055d4, #0065f1, #2d7af8) !important;
  background-size: 200% 100% !important;
  animation: z100bCardGlow 6s ease-in-out infinite !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0,101,241,0.30) !important;
}
#funnels .fn-tab.fn-active * { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ── Cards — premium white glass + animated blue top glow ── */
#funnels .fn-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(0,101,241,0.03)) !important;
  border: 0.5px solid rgba(0,101,241,0.14) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 10px 28px rgba(0,101,241,0.07) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#funnels .fn-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  height: 3px !important;
  background: linear-gradient(90deg, #0055d4, #0065f1, #2d7af8, #0065f1, #0055d4) !important;
  background-size: 200% 100% !important;
  animation: z100bCardGlow 4s ease-in-out infinite !important;
  z-index: 1 !important;
  /* Override the original ::before radial purple glow */
  border-radius: 0 !important;
}
#funnels .fn-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,101,241,0.10), 0 12px 32px rgba(0,101,241,0.08) !important;
  border-color: rgba(0,101,241,0.25) !important;
}
#funnels .fn-card-title {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
  font-weight: 700 !important;
}
/* Behavioral Decision Tree: light theme to match the funnel cards */
#funnels .fn-branch-node {
  background: #ffffff !important;
  border: 1px solid rgba(0,101,241,0.14) !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 6px 18px rgba(0,101,241,0.06) !important;
}
#funnels .fn-branch { border-left-color: rgba(0,101,241,0.25) !important; }
/* Re-assert pill colors over the blanket #funnels * dark-text rule, darkened for contrast on white */
#funnels .fn-branch-open { background: rgba(34,197,94,0.14) !important; color: #15803d !important; -webkit-text-fill-color: #15803d !important; }
#funnels .fn-branch-no-open { background: rgba(239,68,68,0.12) !important; color: #b91c1c !important; -webkit-text-fill-color: #b91c1c !important; }
#funnels .fn-branch-click { background: rgba(0,101,241,0.12) !important; color: #0065f1 !important; -webkit-text-fill-color: #0065f1 !important; }
/* 3-Tier Video Retargeting Ladder: light theme to match the funnel cards */
#funnels .fn-ladder-tier {
  background: #ffffff !important;
  border: 1px solid rgba(0,101,241,0.14) !important;
  color: #111827 !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 6px 18px rgba(0,101,241,0.06) !important;
}
/* Numbered circles: keep colored fills with white numbers (re-assert over the blanket dark-text rule) */
#funnels .fn-ladder-num { background: #0065f1 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
#funnels .fn-ladder-num[style*="34D399"] { background: #15803d !important; }

/* ── Purple/Cyan accent text tokens → ZOOM blue ── */
#funnels [style*="color:#7C4DFF"], #funnels [style*="color: #7C4DFF"],
#funnels [style*="color:#B388FF"], #funnels [style*="color: #B388FF"],
#funnels [style*="color:#5E35B1"], #funnels [style*="color: #5E35B1"],
#funnels [style*="color:#00E5FF"], #funnels [style*="color: #00E5FF"],
#funnels [style*="color:#00B8D4"], #funnels [style*="color: #00B8D4"] {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
}

/* Purple tints → blue */
#funnels [style*="background:rgba(124,77,255"],
#funnels [style*="background: rgba(124,77,255"],
#funnels [style*="background:rgba(179,136,255"],
#funnels [style*="background: rgba(179,136,255"],
#funnels [style*="background:rgba(94,53,177"],
#funnels [style*="background: rgba(94,53,177"] {
  background: rgba(0,101,241,0.08) !important;
}
#funnels [style*="border:1px solid rgba(124,77,255"],
#funnels [style*="border: 1px solid rgba(124,77,255"],
#funnels [style*="border:1px solid rgba(179,136,255"],
#funnels [style*="border: 1px solid rgba(179,136,255"] {
  border-color: rgba(0,101,241,0.28) !important;
}

/* Cyan tints → blue */
#funnels [style*="rgba(0,229,255"],
#funnels [style*="rgba(100,200,255"] {
  border-color: rgba(0,101,241,0.28) !important;
}

/* ── Purple gradient buttons → ZOOM blue ── */
#funnels button[style*="linear-gradient(135deg,#7C4DFF"],
#funnels button[style*="linear-gradient(135deg, #7C4DFF"],
#funnels button[style*="linear-gradient(135deg,#5E35B1"],
#funnels button[style*="linear-gradient(135deg, #5E35B1"] {
  background: linear-gradient(135deg, #0055d4, #0065f1) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0,101,241,0.28) !important;
}
#funnels button[style*="linear-gradient(135deg,#7C4DFF"] *,
#funnels button[style*="linear-gradient(135deg, #7C4DFF"] *,
#funnels button[style*="linear-gradient(135deg,#5E35B1"] *,
#funnels button[style*="linear-gradient(135deg, #5E35B1"] * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Gold tab-border hints (Hook-Story-Offer) → blue */
#funnels [style*="border-color:rgba(201,168,76"],
#funnels [style*="border-color: rgba(201,168,76"] {
  border-color: rgba(0,101,241,0.30) !important;
}
#funnels [style*="border-color:rgba(100,200,255"],
#funnels [style*="border-color: rgba(100,200,255"] {
  border-color: rgba(0,101,241,0.30) !important;
}

/* ── Dark solid backgrounds (rgba(14,12,28,…) / rgba(10,8,22,…) / #0a0816) → white glass ── */
#funnels [style*="background:rgba(14,12,28"],
#funnels [style*="background: rgba(14,12,28"],
#funnels [style*="background:rgba(10,8,22"],
#funnels [style*="background: rgba(10,8,22"],
#funnels [style*="background:#0a0816"],
#funnels [style*="background: #0a0816"] {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(0,101,241,0.14) !important;
  color: #111827 !important;
}

/* ── Muted text tokens ── */
#funnels [style*="color:#6A6890"], #funnels [style*="color: #6A6890"],
#funnels [style*="color:#8A96B8"], #funnels [style*="color: #8A96B8"],
#funnels [style*="color:#E8EDFB"], #funnels [style*="color: #E8EDFB"],
#funnels [style*="color:#aaa"], #funnels [style*="color: #aaa"],
#funnels [style*="color:#888"], #funnels [style*="color: #888"],
#funnels [style*="color:#999"], #funnels [style*="color: #999"],
#funnels [style*="color:#ccc"], #funnels [style*="color: #ccc"],
#funnels [style*="color:#ddd"], #funnels [style*="color: #ddd"] {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}
/* #E8EDFB near-white headings → dark */
#funnels [style*="color:#E8EDFB"][style*="font-weight:8"],
#funnels [style*="color: #E8EDFB"][style*="font-weight:8"],
#funnels [style*="color:#E8EDFB"][style*="font-weight:9"],
#funnels [style*="color: #E8EDFB"][style*="font-weight:9"] {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* Any remaining #fff text on non-gradient elements → dark */
#funnels [style*="color:#fff"], #funnels [style*="color: #fff"] {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}
/* But gradient buttons MUST be white — override above */
#funnels button[style*="linear-gradient"] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
#funnels button[style*="linear-gradient"] * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* fn-btn-primary buttons get their gradient from the class (not inline style),
   so the selector above misses them; force white text over the #funnels * override */
#funnels .fn-btn-primary, #funnels .fn-btn-primary * { color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* ── Form labels, inputs, selects, textareas ── */
#funnels .form-group label, #funnels label {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
#funnels input, #funnels select, #funnels textarea {
  background: rgba(255,255,255,0.96) !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border: 0.5px solid rgba(0,101,241,0.18) !important;
  border-radius: 10px !important;
}
#funnels input:focus, #funnels select:focus, #funnels textarea:focus {
  outline: none !important;
  border-color: #0065f1 !important;
  box-shadow: 0 0 0 3px rgba(0,101,241,0.10) !important;
}
#funnels input[type="checkbox"], #funnels input[type="radio"] {
  accent-color: #0065f1 !important;
}
#funnels input[type="color"] {
  border-radius: 10px !important;
  border: 0.5px solid rgba(0,101,241,0.18) !important;
}

/* Brand & Signature section reuses the Funnels light-theme card + input styling so the
   relocated Brand Profile card looks identical to how it did inside Funnels. */
#brandprofile { background:#f0f2f7 !important; color:#111827 !important; }
#brandprofile.fn-section { --fn-primary:#0065f1 !important; --fn-primary-light:#2d7af8 !important; --fn-border:rgba(0,101,241,0.18) !important; --fn-card:#ffffff !important; }
#brandprofile .fn-card { background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(0,101,241,0.03)) !important; border:0.5px solid rgba(0,101,241,0.14) !important; box-shadow:0 1px 3px rgba(0,101,241,0.05), 0 10px 28px rgba(0,101,241,0.07) !important; }
#brandprofile .fn-card-title { color:#0065f1 !important; -webkit-text-fill-color:#0065f1 !important; font-weight:700 !important; }
#brandprofile input, #brandprofile select, #brandprofile textarea { background:rgba(255,255,255,0.96) !important; color:#111827 !important; -webkit-text-fill-color:#111827 !important; border:0.5px solid rgba(0,101,241,0.18) !important; border-radius:10px !important; }
#brandprofile input:focus, #brandprofile select:focus, #brandprofile textarea:focus { outline:none !important; border-color:#0065f1 !important; box-shadow:0 0 0 3px rgba(0,101,241,0.10) !important; }
#brandprofile input[type="color"] { border-radius:10px !important; border:0.5px solid rgba(0,101,241,0.18) !important; }

/* Dark borders → blue-tint */
#funnels [style*="border:1px solid #1e2028"],
#funnels [style*="border: 1px solid #1e2028"],
#funnels [style*="border:1px solid #2a2d38"],
#funnels [style*="border: 1px solid #2a2d38"] {
  border-color: rgba(0,101,241,0.18) !important;
}

      #funnels .fn-build-nav { margin-bottom:18px; }
      #funnels .fn-stepper { display:flex; gap:0; align-items:flex-start; background:rgba(124,77,255,0.05); border:1px solid var(--fn-border); border-radius:14px; padding:14px 8px; overflow-x:auto; }
      #funnels .fn-step { flex:1 1 0; min-width:92px; position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; background:none; border:none; cursor:pointer; padding:4px; font-family:'Satoshi',sans-serif; }
      #funnels .fn-step + .fn-step::before { content:''; position:absolute; top:17px; left:-50%; width:100%; height:2px; background:rgba(124,77,255,0.18); z-index:0; }
      #funnels .fn-step.is-complete::before, #funnels .fn-step.is-active::before { background:linear-gradient(90deg,var(--fn-primary),var(--fn-primary-light)); }
      #funnels .fn-step-num { position:relative; z-index:1; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:800; color:#8A82B8; background:rgba(124,77,255,0.10); border:2px solid rgba(124,77,255,0.25); transition:color 0.25s,background 0.25s,border-color 0.25s; }
      #funnels .fn-step-label { font-size:0.66rem; font-weight:700; color:#8A82B8; text-align:center; line-height:1.2; max-width:90px; transition:color 0.25s; }
      #funnels .fn-step.is-complete .fn-step-num { background:var(--fn-primary); border-color:var(--fn-primary); color:#fff; font-size:0; }
      #funnels .fn-step.is-complete .fn-step-num::after { content:'\2713'; font-size:0.95rem; color:#fff; }
      #funnels .fn-step.is-complete .fn-step-label { color:#C9BEFF; }
      #funnels .fn-step.is-active .fn-step-num { color:#fff; border-color:var(--fn-primary-light); animation:fnStepPulse 1.5s ease-in-out infinite; }
      #funnels .fn-step.is-active .fn-step-label { color:#fff; }
      @keyframes fnStepPulse {
        0%   { background:var(--fn-primary-dark); box-shadow:0 0 0 0 rgba(124,77,255,0.55); }
        50%  { background:var(--fn-primary-light); box-shadow:0 0 0 7px rgba(124,77,255,0); }
        100% { background:var(--fn-primary-dark); box-shadow:0 0 0 0 rgba(124,77,255,0); }
      }
      #funnels .fn-secondary-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; padding-left:2px; }
      #funnels .fn-secondary-label { font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color:#6B6390; margin-right:4px; }