/* SocialPulse Frontend — High Specificity CSS
   All rules prefixed with #sp-fe-root to beat any WP theme styles.
   Auth/pricing pages use body.sp-fe-auth-body since they have no #sp-fe-root.
*/
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Mono:wght@400;500&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ── Global resets inside our root ──────────────────────── */
#sp-fe-root,
#sp-fe-root *,
#sp-fe-root *::before,
#sp-fe-root *::after {
  box-sizing: border-box !important;
  font-family: 'Instrument Sans', sans-serif;
}

#sp-fe-root a { text-decoration: none; }

/* ── CSS variables (scoped) ──────────────────────────────── */
#sp-fe-root {
  --sp-bg:      #f4f6fb;
  --sp-white:   #ffffff;
  --sp-border:  #dde1ef;
  --sp-text:    #1a1d2e;
  --sp-muted:   #7a80a0;
  --sp-accent:  #7b5cfa;
  --sp-success: #0db875;
  --sp-danger:  #e63155;
  --sp-warning: #e0a800;
  --sp-sidebar: 240px;
  --sp-radius:  12px;
  display: flex !important;
  min-height: 100vh !important;
  background: #f4f6fb !important;
  color: #1a1d2e !important;
  position: relative !important;
  width: 100% !important;
}

/* ── Sidebar ─────────────────────────────────────────────── */
#sp-fe-root .sp-fe-sidebar {
  width: 240px !important;
  background: #ffffff !important;
  border-right: 1px solid #dde1ef !important;
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; bottom: 0 !important;
  z-index: 1000 !important;
  overflow-y: auto !important;
  box-shadow: 1px 0 0 #dde1ef !important;
}

#sp-fe-root .sp-fe-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 22px 20px 18px !important;
  border-bottom: 1px solid #dde1ef !important;
}

#sp-fe-root .sp-fe-logo-icon {
  width: 34px !important; height: 34px !important;
  background: linear-gradient(135deg, #7b5cfa, #0abfa3) !important;
  border-radius: 9px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 16px !important; flex-shrink: 0 !important;
}

#sp-fe-root .sp-fe-logo-text {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  letter-spacing: -0.02em !important;
  color: #1a1d2e !important;
  background: none !important;
}

#sp-fe-root .sp-fe-logo-text span { color: #7b5cfa !important; }

#sp-fe-root .sp-fe-nav { padding: 12px 10px !important; flex: 1 !important; }
#sp-fe-root .sp-fe-nav-section { margin-bottom: 4px !important; }

#sp-fe-root .sp-fe-nav-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.12em !important;
  color: #7a80a0 !important;
  text-transform: uppercase !important;
  padding: 10px 10px 5px !important;
  display: block !important;
  background: none !important;
}

#sp-fe-root .sp-fe-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 9px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  color: #7a80a0 !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  transition: all 0.15s !important;
  margin-bottom: 2px !important;
  background: none !important;
  width: 100% !important;
}

#sp-fe-root .sp-fe-nav-item:hover {
  background: #f4f6fb !important;
  color: #1a1d2e !important;
}

#sp-fe-root .sp-fe-nav-item.active {
  background: #ede8ff !important;
  color: #7b5cfa !important;
  border-color: #cfc4fd !important;
  font-weight: 600 !important;
}

#sp-fe-root .sp-fe-nav-badge {
  margin-left: auto !important;
  background: #7b5cfa !important;
  color: #fff !important;
  font-size: 0.62rem !important;
  font-family: 'DM Mono', monospace !important;
  padding: 1px 6px !important;
  border-radius: 20px !important;
}

#sp-fe-root .sp-fe-plan-badge {
  margin: 8px 12px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1.5px solid !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 0.8rem !important;
  background: none !important;
}

#sp-fe-root .sp-fe-upgrade-link {
  font-size: 0.72rem !important;
  color: #7b5cfa !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

#sp-fe-root .sp-fe-user {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px !important;
  border-top: 1px solid #dde1ef !important;
  margin-top: auto !important;
  background: #ffffff !important;
}

#sp-fe-root .sp-fe-avatar {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important; flex-shrink: 0 !important;
}

#sp-fe-root .sp-fe-user-info { flex: 1 !important; min-width: 0 !important; }

#sp-fe-root .sp-fe-user-name {
  font-size: 0.82rem !important; font-weight: 600 !important;
  white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important; color: #1a1d2e !important;
  background: none !important;
}

#sp-fe-root .sp-fe-user-email {
  font-size: 0.68rem !important; color: #7a80a0 !important;
  white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important; background: none !important;
}

#sp-fe-root .sp-fe-logout-btn {
  background: none !important; border: none !important;
  color: #7a80a0 !important; cursor: pointer !important;
  font-size: 1rem !important; padding: 4px !important;
  border-radius: 6px !important; transition: color 0.15s !important;
}
#sp-fe-root .sp-fe-logout-btn:hover { color: #e63155 !important; }

/* ── Main ────────────────────────────────────────────────── */
#sp-fe-root .sp-fe-main {
  margin-left: 240px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  background: #f4f6fb !important;
}

#sp-fe-root .sp-fe-topbar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 28px !important;
  background: rgba(255,255,255,0.96) !important;
  border-bottom: 1px solid #dde1ef !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

#sp-fe-root .sp-fe-menu-btn {
  display: none !important;
  background: none !important; border: none !important;
  font-size: 1.2rem !important; cursor: pointer !important;
  color: #1a1d2e !important; padding: 4px !important;
}

#sp-fe-root .sp-fe-topbar-title {
  flex: 1 !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #1a1d2e !important;
  background: none !important;
}

#sp-fe-root .sp-fe-topbar-actions { display: flex !important; gap: 8px !important; }
#sp-fe-root .sp-fe-content { padding: 24px 28px !important; flex: 1 !important; background: #f4f6fb !important; }

/* ── Pages ───────────────────────────────────────────────── */
#sp-fe-root .sp-fe-page { display: none !important; animation: fe-fade 0.2s ease; }
#sp-fe-root .sp-fe-page.active { display: block !important; }
@keyframes fe-fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ── Buttons ─────────────────────────────────────────────── */
#sp-fe-root .sp-fe-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 18px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  transition: all 0.15s !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  outline: none !important;
}

#sp-fe-root .sp-fe-btn-primary {
  background: #7b5cfa !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(123,92,250,0.3) !important;
}
#sp-fe-root .sp-fe-btn-primary:hover { background: #6747f0 !important; color: #fff !important; }

#sp-fe-root .sp-fe-btn-ghost {
  background: #ffffff !important;
  color: #3a3f5a !important;
  border: 1px solid #c8cde6 !important;
}
#sp-fe-root .sp-fe-btn-ghost:hover {
  background: #f4f6fb !important;
  border-color: #7b5cfa !important;
  color: #7b5cfa !important;
}

#sp-fe-root .sp-fe-btn-success {
  background: #edfaf4 !important;
  color: #0a7a4e !important;
  border: 1px solid #a3e8cc !important;
}
#sp-fe-root .sp-fe-btn-danger {
  background: #fef0f2 !important;
  color: #c02040 !important;
  border: 1px solid #f4aab8 !important;
}
#sp-fe-root .sp-fe-btn-sm { padding: 5px 12px !important; font-size: 0.74rem !important; }
#sp-fe-root .sp-fe-btn-full { width: 100% !important; justify-content: center !important; }
#sp-fe-root .sp-fe-filter-active {
  background: #ede8ff !important;
  border-color: #7b5cfa !important;
  color: #5030d0 !important;
}

/* ── Cards ───────────────────────────────────────────────── */
#sp-fe-root .sp-fe-card {
  background: #ffffff !important;
  border: 1px solid #dde1ef !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04) !important;
}
#sp-fe-root .sp-fe-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid #eef0f7 !important;
  background: #ffffff !important;
}
#sp-fe-root .sp-fe-card-title {
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: #1a1d2e !important;
  background: none !important;
}
#sp-fe-root .sp-fe-card-body {
  padding: 18px 20px !important;
  background: #ffffff !important;
  color: #1a1d2e !important;
}

/* ── Stat cards ──────────────────────────────────────────── */
#sp-fe-root .sp-fe-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}
#sp-fe-root .sp-fe-stat-card {
  background: #ffffff !important;
  border: 1px solid #dde1ef !important;
  border-radius: 12px !important;
  padding: 18px 16px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  color: #1a1d2e !important;
}
#sp-fe-root .sp-fe-stat-card::before {
  content: '' !important;
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: var(--c, #7b5cfa) !important;
}
#sp-fe-root .sp-fe-stat-icon { font-size: 1.3rem !important; display: block !important; margin-bottom: 10px !important; }
#sp-fe-root .sp-fe-stat-value {
  font-family: 'Syne', sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
  color: #1a1d2e !important;
  background: none !important;
}
#sp-fe-root .sp-fe-stat-label {
  font-size: 0.7rem !important;
  color: #7a80a0 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  background: none !important;
}

/* ── Grids ───────────────────────────────────────────────── */
#sp-fe-root .sp-fe-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

/* ── Forms ───────────────────────────────────────────────── */
#sp-fe-root .sp-fe-form-group { margin-bottom: 14px !important; }
#sp-fe-root .sp-fe-form-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

#sp-fe-root .sp-fe-label {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #7a80a0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 5px !important;
  background: none !important;
}

#sp-fe-root .sp-fe-input,
#sp-fe-root .sp-fe-textarea,
#sp-fe-root .sp-fe-select {
  width: 100% !important;
  background: #ffffff !important;
  border: 1.5px solid #c8cde6 !important;
  border-radius: 8px !important;
  padding: 10px 13px !important;
  color: #1a1d2e !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 0.88rem !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.15s !important;
}
#sp-fe-root .sp-fe-input:focus,
#sp-fe-root .sp-fe-textarea:focus,
#sp-fe-root .sp-fe-select:focus {
  border-color: #7b5cfa !important;
  box-shadow: 0 0 0 3px rgba(123,92,250,0.1) !important;
  outline: none !important;
}
#sp-fe-root .sp-fe-textarea { min-height: 110px !important; resize: vertical !important; line-height: 1.6 !important; }
#sp-fe-root .sp-fe-help { font-size: 0.74rem !important; color: #7a80a0 !important; margin-top: 4px !important; }
#sp-fe-root .sp-fe-help a { color: #7b5cfa !important; cursor: pointer !important; }
#sp-fe-root .sp-fe-actions-row { display: flex !important; gap: 10px !important; margin-top: 18px !important; flex-wrap: wrap !important; }

/* ── Platform selector ───────────────────────────────────── */
#sp-fe-root .sp-fe-platform-grid { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
#sp-fe-root .sp-fe-platform-check {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  border: 1.5px solid #c8cde6 !important;
  cursor: pointer !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: #7a80a0 !important;
  background: #ffffff !important;
  transition: all 0.15s !important;
}
#sp-fe-root .sp-fe-platform-check:hover { border-color: #7b5cfa !important; background: #f5f2ff !important; color: #5030d0 !important; }
#sp-fe-root .sp-fe-platform-check.sp-selected { border-color: #7b5cfa !important; background: #ede8ff !important; color: #5030d0 !important; font-weight: 700 !important; }

/* ── Platform pills (dashboard) ──────────────────────────── */
#sp-fe-root .sp-fe-platforms-row { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
#sp-fe-root .sp-fe-platform-pill {
  display: flex !important; align-items: center !important; gap: 7px !important;
  padding: 8px 14px !important; border-radius: 20px !important;
  font-size: 0.8rem !important; font-weight: 600 !important;
}
#sp-fe-root .sp-fe-platform-pill.connected { background: #edfaf4 !important; color: #0a7a4e !important; border: 1px solid #a3e8cc !important; }
#sp-fe-root .sp-fe-platform-pill.disconnected { background: #f4f6fb !important; color: #7a80a0 !important; border: 1px solid #dde1ef !important; }

/* ── AI Panel ────────────────────────────────────────────── */
#sp-fe-root .sp-fe-ai-panel {
  background: linear-gradient(135deg,#f8f6ff,#f0fdfa) !important;
  border: 1.5px solid #cfc4fd !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  margin-bottom: 18px !important;
}
#sp-fe-root .sp-fe-ai-title {
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  color: #1a1d2e !important;
  background: none !important;
}
#sp-fe-root .sp-fe-ai-badge {
  background: linear-gradient(135deg,#7b5cfa,#0abfa3) !important;
  color: #fff !important;
  font-size: 0.62rem !important;
  font-family: 'DM Mono', monospace !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
}

/* ── Post list ───────────────────────────────────────────── */
#sp-fe-root .sp-fe-post-list { display: flex !important; flex-direction: column !important; gap: 10px !important; }
#sp-fe-root .sp-fe-post-item {
  background: #ffffff !important;
  border: 1px solid #dde1ef !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  transition: border-color 0.15s !important;
  color: #1a1d2e !important;
}
#sp-fe-root .sp-fe-post-item:hover { border-color: #7b5cfa !important; }

#sp-fe-root .sp-fe-post-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; margin-top: 6px !important; flex-shrink: 0 !important; }
#sp-fe-root .sp-fe-dot-published { background: #0db875 !important; box-shadow: 0 0 0 3px rgba(13,184,117,0.15) !important; }
#sp-fe-root .sp-fe-dot-scheduled { background: #e0a800 !important; }
#sp-fe-root .sp-fe-dot-failed    { background: #e63155 !important; }
#sp-fe-root .sp-fe-dot-draft     { background: #c0c4d6 !important; }

#sp-fe-root .sp-fe-post-body { flex: 1 !important; min-width: 0 !important; }
#sp-fe-root .sp-fe-post-text {
  font-size: 0.83rem !important; color: #5a607a !important; line-height: 1.5 !important;
  overflow: hidden !important; display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  background: none !important;
}
#sp-fe-root .sp-fe-post-meta { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; align-items: center !important; margin-top: 6px !important; }
#sp-fe-root .sp-fe-post-actions { display: flex !important; gap: 5px !important; }

/* ── Tags / Pills ────────────────────────────────────────── */
#sp-fe-root .sp-fe-tag {
  font-size: 0.67rem !important; font-family: 'DM Mono', monospace !important;
  padding: 2px 7px !important; border-radius: 20px !important;
  border: 1px solid #c8cde6 !important; color: #7a80a0 !important;
  background: #ffffff !important;
}
#sp-fe-root .sp-fe-tag-platform { border-color: #c5b9fc !important; color: #5030d0 !important; background: #ede8ff !important; }
#sp-fe-root .sp-fe-tag-ai { border-color: #9ce8df !important; color: #0a7a6a !important; background: #edfaf8 !important; }

#sp-fe-root .sp-fe-pill { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 0.67rem !important; font-family: 'DM Mono', monospace !important; padding: 2px 8px !important; border-radius: 20px !important; font-weight: 500 !important; }
#sp-fe-root .sp-fe-pill-published { background: #e6f9f0 !important; color: #0a7a4e !important; }
#sp-fe-root .sp-fe-pill-scheduled { background: #fef8e0 !important; color: #8a6200 !important; }
#sp-fe-root .sp-fe-pill-failed    { background: #fdedf0 !important; color: #c02040 !important; }
#sp-fe-root .sp-fe-pill-draft     { background: #f0f1f7 !important; color: #6a70a0 !important; }

/* ── Calendar ────────────────────────────────────────────── */
#sp-fe-root .sp-fe-calendar-grid { display: grid !important; grid-template-columns: repeat(7,1fr) !important; gap: 4px !important; }
#sp-fe-root .sp-fe-cal-day-label { text-align: center !important; font-size: 0.65rem !important; font-family: 'DM Mono', monospace !important; color: #7a80a0 !important; padding: 6px 0 !important; font-weight: 700 !important; }
#sp-fe-root .sp-fe-cal-day {
  aspect-ratio: 1 !important; display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  border-radius: 8px !important; cursor: pointer !important; font-size: 0.82rem !important;
  background: #ffffff !important; border: 1px solid #dde1ef !important;
  color: #1a1d2e !important; transition: all 0.15s !important;
}
#sp-fe-root .sp-fe-cal-day:hover { border-color: #7b5cfa !important; background: #f5f2ff !important; }
#sp-fe-root .sp-fe-cal-day.today { background: #7b5cfa !important; border-color: #7b5cfa !important; color: #fff !important; font-weight: 700 !important; }
#sp-fe-root .sp-fe-cal-day.has-post { border-color: #c5b9fc !important; background: #f5f2ff !important; }
#sp-fe-root .sp-fe-cal-dot { width: 5px !important; height: 5px !important; background: #7b5cfa !important; border-radius: 50% !important; margin-top: 2px !important; }
#sp-fe-root .sp-fe-cal-day.today .sp-fe-cal-dot { background: rgba(255,255,255,0.8) !important; }

/* ── Campaigns ───────────────────────────────────────────── */
#sp-fe-root .sp-fe-campaigns-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 14px !important; }
#sp-fe-root .sp-fe-campaign-card {
  background: #ffffff !important; border: 1px solid #dde1ef !important;
  border-radius: 12px !important; padding: 18px !important;
  cursor: pointer !important; transition: border-color 0.15s, box-shadow 0.15s !important;
  color: #1a1d2e !important;
}
#sp-fe-root .sp-fe-campaign-card:hover { border-color: #7b5cfa !important; box-shadow: 0 4px 16px rgba(123,92,250,0.1) !important; }

/* ── Variants ────────────────────────────────────────────── */
#sp-fe-root .sp-fe-variants-title { font-size: 0.72rem !important; font-weight: 700 !important; color: #7a80a0 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; margin: 16px 0 10px !important; }
#sp-fe-root .sp-fe-variant-card { background: #f7f8fc !important; border: 1px solid #dde1ef !important; border-radius: 8px !important; padding: 12px 14px !important; margin-bottom: 8px !important; }

/* ── Skeleton / Spinner / Empty ──────────────────────────── */
#sp-fe-root .sp-fe-skeleton { background: linear-gradient(90deg,#e6e8f4 25%,#f4f6fb 50%,#e6e8f4 75%) !important; background-size: 200% 100% !important; animation: fe-shimmer 1.5s infinite !important; border-radius: 6px !important; }
@keyframes fe-shimmer { to { background-position: -200% 0; } }
#sp-fe-root .sp-fe-spinner { display: inline-block !important; animation: fe-spin 0.7s linear infinite !important; font-style: normal !important; }
@keyframes fe-spin { to { transform: rotate(360deg); } }
#sp-fe-root .sp-fe-empty { text-align: center !important; padding: 40px !important; color: #7a80a0 !important; }
#sp-fe-root .sp-fe-empty-icon { font-size: 2.5rem !important; display: block !important; margin-bottom: 10px !important; }

/* ── Modal ───────────────────────────────────────────────── */
.sp-fe-modal-overlay {
  position: fixed !important; inset: 0 !important;
  background: rgba(10,15,50,0.45) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 99999 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  opacity: 0 !important; pointer-events: none !important;
  transition: opacity 0.2s !important;
}
.sp-fe-modal-overlay.open { opacity: 1 !important; pointer-events: all !important; }
.sp-fe-modal {
  background: #ffffff !important;
  border: 1px solid #dde1ef !important;
  border-radius: 16px !important;
  width: 520px !important; max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 60px) !important; overflow-y: auto !important;
  transform: scale(0.95) translateY(10px) !important;
  transition: transform 0.2s !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
  color: #1a1d2e !important;
}
.sp-fe-modal-overlay.open .sp-fe-modal { transform: none !important; }
.sp-fe-modal-header { padding: 18px 20px !important; border-bottom: 1px solid #eef0f7 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; background: #fff !important; }
.sp-fe-modal-title { font-family: 'Syne',sans-serif !important; font-weight: 700 !important; font-size: 0.95rem !important; color: #1a1d2e !important; }
.sp-fe-modal-close { background: none !important; border: none !important; color: #7a80a0 !important; font-size: 1rem !important; cursor: pointer !important; }
.sp-fe-modal-body   { padding: 20px !important; background: #fff !important; }
.sp-fe-modal-footer { padding: 12px 20px !important; border-top: 1px solid #eef0f7 !important; background: #f4f6fb !important; display: flex !important; justify-content: flex-end !important; gap: 8px !important; }

/* ── Toast ───────────────────────────────────────────────── */
#sp-fe-toast-container { position: fixed !important; bottom: 20px !important; right: 20px !important; z-index: 999999 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.sp-fe-toast { background: #ffffff !important; border: 1px solid #dde1ef !important; border-radius: 8px !important; padding: 10px 16px !important; font-size: 0.83rem !important; display: flex !important; align-items: center !important; gap: 8px !important; animation: fe-slide 0.25s ease !important; max-width: 300px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important; color: #1a1d2e !important; }
.sp-fe-toast.success { border-left: 3px solid #0db875 !important; }
.sp-fe-toast.error   { border-left: 3px solid #e63155 !important; }
.sp-fe-toast.info    { border-left: 3px solid #7b5cfa !important; }
@keyframes fe-slide { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ════════════════════════════════════════════════════════════
   AUTH PAGES (login, register) — no #sp-fe-root wrapper
   ════════════════════════════════════════════════════════════ */
.sp-fe-auth-wrap {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background: linear-gradient(135deg, #f4f6fb 0%, #edeaff 100%) !important;
  font-family: 'Instrument Sans', sans-serif !important;
}

.sp-fe-auth-card {
  background: #ffffff !important;
  border: 1px solid #dde1ef !important;
  border-radius: 16px !important;
  padding: 36px 40px !important;
  width: 100% !important;
  max-width: 420px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08) !important;
}

.sp-fe-auth-logo { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 24px !important; }
.sp-fe-auth-title { font-family: 'Syne',sans-serif !important; font-weight: 800 !important; font-size: 1.4rem !important; margin-bottom: 6px !important; color: #1a1d2e !important; }
.sp-fe-auth-subtitle { font-size: 0.86rem !important; color: #7a80a0 !important; margin-bottom: 24px !important; }

.sp-fe-auth-error   { background: #fdedf0 !important; border: 1px solid #f4aab8 !important; color: #c02040 !important; padding: 10px 14px !important; border-radius: 8px !important; font-size: 0.84rem !important; margin-bottom: 14px !important; }
.sp-fe-auth-success { background: #e6f9f0 !important; border: 1px solid #a3e8cc !important; color: #0a7a4e !important; padding: 10px 14px !important; border-radius: 8px !important; font-size: 0.84rem !important; margin-bottom: 14px !important; }

.sp-fe-auth-divider { display: flex !important; align-items: center !important; gap: 12px !important; margin: 18px 0 !important; color: #7a80a0 !important; font-size: 0.8rem !important; }
.sp-fe-auth-divider::before, .sp-fe-auth-divider::after { content: '' !important; flex: 1 !important; height: 1px !important; background: #dde1ef !important; }

.sp-fe-auth-footer { display: flex !important; gap: 12px !important; align-items: center !important; margin-top: 16px !important; font-size: 0.8rem !important; color: #7a80a0 !important; font-family: 'Instrument Sans', sans-serif !important; }
.sp-fe-auth-footer a { color: #7b5cfa !important; text-decoration: none !important; }

.sp-fe-link { color: #7b5cfa !important; text-decoration: none !important; font-size: 0.83rem !important; }

.sp-fe-auth-card .sp-fe-form-group { margin-bottom: 14px !important; }
.sp-fe-auth-card .sp-fe-label { display: block !important; font-size: 0.72rem !important; font-weight: 700 !important; color: #7a80a0 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; margin-bottom: 5px !important; }
.sp-fe-auth-card .sp-fe-input { width: 100% !important; background: #ffffff !important; border: 1.5px solid #c8cde6 !important; border-radius: 8px !important; padding: 10px 13px !important; color: #1a1d2e !important; font-family: 'Instrument Sans', sans-serif !important; font-size: 0.88rem !important; outline: none !important; box-shadow: none !important; -webkit-appearance: none !important; }
.sp-fe-auth-card .sp-fe-input:focus { border-color: #7b5cfa !important; box-shadow: 0 0 0 3px rgba(123,92,250,0.1) !important; }
.sp-fe-auth-card .sp-fe-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 10px 18px !important; border-radius: 8px !important; border: none !important; cursor: pointer !important; font-family: 'Instrument Sans', sans-serif !important; font-size: 0.88rem !important; font-weight: 600 !important; width: 100% !important; }
.sp-fe-auth-card .sp-fe-btn-primary { background: #7b5cfa !important; color: #fff !important; box-shadow: 0 2px 8px rgba(123,92,250,0.3) !important; }
.sp-fe-auth-card .sp-fe-btn-ghost { background: #fff !important; color: #3a3f5a !important; border: 1px solid #c8cde6 !important; }

.sp-fe-free-perks { background: #f8f6ff !important; border: 1px solid #cfc4fd !important; border-radius: 8px !important; padding: 12px 14px !important; margin-bottom: 16px !important; display: flex !important; flex-direction: column !important; gap: 5px !important; }
.sp-fe-free-perk { font-size: 0.82rem !important; color: #5030d0 !important; }

/* ════════════════════════════════════════════════════════════
   PRICING PAGE
   ════════════════════════════════════════════════════════════ */
.sp-fe-pricing-wrap { min-height: 100vh !important; padding: 40px 20px !important; background: linear-gradient(135deg,#f4f6fb,#edeaff) !important; font-family: 'Instrument Sans', sans-serif !important; }
.sp-fe-pricing-header { text-align: center !important; margin-bottom: 40px !important; }
.sp-fe-pricing-title { font-family: 'Syne',sans-serif !important; font-weight: 800 !important; font-size: 2rem !important; margin-bottom: 8px !important; color: #1a1d2e !important; }
.sp-fe-pricing-subtitle { font-size: 1rem !important; color: #7a80a0 !important; }
.sp-fe-plans-grid { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 16px !important; max-width: 1100px !important; margin: 0 auto 32px !important; }
.sp-fe-plan-card { background: #ffffff !important; border: 1.5px solid #dde1ef !important; border-radius: 16px !important; padding: 28px 22px !important; position: relative !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; }
.sp-fe-plan-card.sp-fe-plan-popular { border-color: #7b5cfa !important; box-shadow: 0 8px 32px rgba(123,92,250,0.15) !important; }
.sp-fe-plan-badge { background: #7b5cfa !important; color: #fff !important; font-size: 0.7rem !important; font-family: 'DM Mono',monospace !important; padding: 3px 10px !important; border-radius: 20px !important; position: absolute !important; top: -12px !important; left: 50% !important; transform: translateX(-50%) !important; white-space: nowrap !important; }
.sp-fe-plan-name  { font-family: 'Syne',sans-serif !important; font-weight: 800 !important; font-size: 1rem !important; margin-bottom: 8px !important; color: #7b5cfa !important; }
.sp-fe-plan-price { font-family: 'Syne',sans-serif !important; font-weight: 800 !important; font-size: 2.2rem !important; line-height: 1 !important; margin-bottom: 6px !important; color: #1a1d2e !important; }
.sp-fe-plan-price span { font-size: 1rem !important; font-weight: 400 !important; color: #7a80a0 !important; }
.sp-fe-plan-desc { font-size: 0.82rem !important; color: #7a80a0 !important; margin-bottom: 18px !important; }
.sp-fe-plan-features { list-style: none !important; margin-bottom: 20px !important; display: flex !important; flex-direction: column !important; gap: 7px !important; padding: 0 !important; }
.sp-fe-plan-features li { font-size: 0.83rem !important; color: #1a1d2e !important; }
.sp-fe-plan-no { color: #7a80a0 !important; }
.sp-fe-pricing-footer { text-align: center !important; color: #7a80a0 !important; font-size: 0.84rem !important; }
.sp-fe-pricing-footer a { color: #7b5cfa !important; text-decoration: none !important; }
.sp-fe-plan-card .sp-fe-btn { display: flex !important; align-items: center !important; justify-content: center !important; padding: 10px 18px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 0.88rem !important; text-decoration: none !important; }
.sp-fe-plan-card .sp-fe-btn-primary { background: #7b5cfa !important; color: #fff !important; border: none !important; }
.sp-fe-plan-card .sp-fe-btn-ghost { background: #fff !important; color: #3a3f5a !important; border: 1px solid #c8cde6 !important; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  #sp-fe-root .sp-fe-stats-grid { grid-template-columns: repeat(2,1fr) !important; }
  #sp-fe-root .sp-fe-campaigns-grid { grid-template-columns: repeat(2,1fr) !important; }
  .sp-fe-plans-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 768px) {
  #sp-fe-root .sp-fe-sidebar { transform: translateX(-100%) !important; transition: transform 0.25s !important; }
  #sp-fe-root .sp-fe-sidebar.open { transform: none !important; }
  #sp-fe-root .sp-fe-main { margin-left: 0 !important; }
  #sp-fe-root .sp-fe-menu-btn { display: block !important; }
  #sp-fe-root .sp-fe-grid-2 { grid-template-columns: 1fr !important; }
  #sp-fe-root .sp-fe-form-row { grid-template-columns: 1fr !important; }
  #sp-fe-root .sp-fe-campaigns-grid { grid-template-columns: 1fr !important; }
  #sp-fe-root .sp-fe-content { padding: 16px !important; }
  .sp-fe-plans-grid { grid-template-columns: 1fr !important; }
  .sp-fe-auth-card { padding: 24px 20px !important; }
}