/* ==========================================================================
   AgentCause — Vibrant theme for standalone pages
   Body classes: .ac-auth (sign-in, sign-up, 2FA, resets), .ac-error (404/500),
   .ac-marketing (public site), .ac-shell (onboarding, help center, status,
   changelog). Loaded after each page's own inline <style>, so these rules win.
   ========================================================================== */

/* ---------- Shared vibrant backdrop ---------- */
body.ac-auth, body.ac-error {
  min-height: 100vh;
  background: var(--grad-hero) !important;
  background-attachment: fixed !important;
  color: var(--text);
  position: relative;
}
body.ac-auth::before, body.ac-error::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 85%);
  mask-image: radial-gradient(ellipse at center, transparent 30%, #000 85%);
}
body.ac-auth > *, body.ac-error > * { position: relative; z-index: 1; }

/* ---------- Auth pages ---------- */
.ac-auth .auth-card, .ac-auth .card {
  background: rgba(255, 255, 255, .94) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .6) !important;
  border-radius: 26px !important;
  box-shadow: 0 40px 100px rgba(30, 6, 60, .5), 0 2px 0 rgba(255, 255, 255, .6) inset !important;
  color: var(--text) !important;
  max-width: calc(100vw - 32px);
}
.ac-auth .auth-card::before, .ac-auth .card:first-of-type::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; border-radius: 26px 26px 0 0;
  background: linear-gradient(90deg, #8b5cf6, #ec4899, #f97316);
}
.ac-auth .auth-icon, .ac-auth .fa-robot {
  background: linear-gradient(135deg, #8b5cf6, #ec4899 60%, #f97316);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.ac-auth .auth-title, .ac-auth h1, .ac-auth h2, .ac-auth h3, .ac-auth h4, .ac-auth h5 { color: var(--text) !important; font-weight: 800; letter-spacing: -0.025em; }
.ac-auth .auth-subtitle, .ac-auth .text-muted, .ac-auth .auth-footer-text, .ac-auth .form-text, .ac-auth small { color: var(--muted) !important; }
.ac-auth .auth-card .form-label, .ac-auth .form-label, .ac-auth label { color: var(--text-2) !important; font-weight: 600; }
.ac-auth .auth-card .form-control, .ac-auth .form-control, .ac-auth .form-select {
  background: #fff !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; border-radius: 12px !important;
  padding-top: .7rem; padding-bottom: .7rem;
}
.ac-auth .auth-card .form-control::placeholder, .ac-auth .form-control::placeholder { color: var(--muted-light) !important; }
.ac-auth .auth-card .form-control:focus, .ac-auth .form-control:focus, .ac-auth .form-select:focus {
  background: #fff !important; color: var(--text) !important;
  border-color: var(--primary) !important; box-shadow: 0 0 0 4px var(--primary-ring) !important;
}
.ac-auth .input-group > .form-control { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.ac-auth .auth-card .input-group .btn-outline-secondary, .ac-auth .input-group .btn, .ac-auth .input-group-text {
  background: var(--surface-2) !important; border: 1px solid var(--border) !important; color: var(--muted) !important;
  border-radius: 0 12px 12px 0 !important;
}
.ac-auth .btn-toggle-password { color: var(--muted) !important; }
.ac-auth .btn-toggle-password:hover { color: var(--primary) !important; }
.ac-auth .btn-primary {
  background: var(--grad) !important; border: 0 !important; color: #fff !important;
  border-radius: 12px !important; padding-top: .75rem; padding-bottom: .75rem; font-weight: 700;
  box-shadow: 0 10px 26px rgba(219, 39, 119, .35) !important;
}
.ac-auth .btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.ac-auth a:not(.btn), .ac-auth .auth-footer-text a { color: var(--primary) !important; font-weight: 600; text-decoration: none; }
.ac-auth a:not(.btn):hover, .ac-auth .auth-footer-text a:hover { color: var(--primary-2) !important; text-decoration: underline; }
.ac-auth .alert { border-radius: 12px; }
.ac-auth .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

/* ---------- Error pages ---------- */
.ac-error .card, .ac-error .error-card, .ac-error .error-container {
  background: rgba(255, 255, 255, .95) !important; border: 0 !important; border-radius: 26px !important;
  box-shadow: 0 40px 100px rgba(30, 6, 60, .5) !important; color: var(--text);
}
.ac-error .error-code, .ac-error h1 {
  background: linear-gradient(135deg, #8b5cf6, #ec4899 55%, #f97316);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  font-weight: 900 !important; letter-spacing: -0.05em;
}
.ac-error h2, .ac-error h3 { color: var(--text) !important; font-weight: 800; }
.ac-error p, .ac-error .text-muted { color: var(--muted) !important; }
.ac-error .btn-primary { background: var(--grad) !important; border: 0 !important; border-radius: 12px !important; padding: .7rem 1.4rem; font-weight: 700; box-shadow: 0 10px 26px rgba(219, 39, 119, .35); }
.ac-error code { color: var(--pink); background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }

/* ---------- Marketing site ---------- */
.ac-marketing { background: #fff; }
.ac-marketing .navbar, .ac-marketing .navbar-marketing, .ac-marketing nav.sticky-top, .ac-marketing header nav {
  background: rgba(255, 255, 255, .82) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-light) !important;
}
.ac-marketing .navbar-brand { font-weight: 800 !important; letter-spacing: -0.02em; }
.ac-marketing .navbar-brand, .ac-marketing .navbar-brand i {
  background: linear-gradient(135deg, #7c3aed, #db2777 70%, #f97316);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.ac-marketing .nav-link { color: var(--text-2) !important; font-weight: 600; }
.ac-marketing .nav-link:hover { color: var(--primary) !important; }
.ac-marketing .hero, .ac-marketing .hero-section, .ac-marketing .page-hero, .ac-marketing .cta-section, .ac-marketing .cta-band, .ac-marketing .bg-gradient-primary {
  background: var(--grad-hero) !important; position: relative; overflow: hidden;
}
.ac-marketing .hero::after, .ac-marketing .hero-section::after, .ac-marketing .page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.ac-marketing .hero > *, .ac-marketing .hero-section > *, .ac-marketing .page-hero > * { position: relative; z-index: 1; }
.ac-marketing .btn-primary {
  background: var(--grad) !important; border: 0 !important; color: #fff !important; font-weight: 700;
  box-shadow: 0 10px 26px rgba(219, 39, 119, .32) !important;
}
.ac-marketing .btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.ac-marketing .btn-outline-primary { color: var(--violet) !important; border-color: color-mix(in srgb, var(--violet) 50%, transparent) !important; font-weight: 700; }
.ac-marketing .btn-outline-primary:hover { background: var(--violet) !important; color: #fff !important; }
.ac-marketing .card, .ac-marketing .feature-card, .ac-marketing .pricing-card, .ac-marketing .plan-card {
  border-radius: 20px !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ac-marketing .card:hover, .ac-marketing .feature-card:hover, .ac-marketing .pricing-card:hover, .ac-marketing .plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md) !important; }
.ac-marketing .pricing-card.featured, .ac-marketing .pricing-card.popular, .ac-marketing .plan-card.featured, .ac-marketing .card.border-primary {
  border: 2px solid transparent !important;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box !important;
  box-shadow: 0 20px 50px rgba(124, 58, 237, .22) !important;
}
.ac-marketing .feature-icon, .ac-marketing .icon-box, .ac-marketing .step-number, .ac-marketing .feature-card .icon {
  background: linear-gradient(135deg, #8b5cf6, #ec4899) !important; color: #fff !important;
  box-shadow: 0 10px 24px rgba(219, 39, 119, .3);
}
.ac-marketing .feature-icon i, .ac-marketing .icon-box i { color: #fff !important; }
.ac-marketing .text-primary { color: var(--violet) !important; }
.ac-marketing .badge.bg-primary { background: var(--grad) !important; color: #fff !important; }
.ac-marketing footer, .ac-marketing .footer, .ac-marketing .site-footer { background: #120d2b !important; color: #b9b3dc; }
.ac-marketing footer a, .ac-marketing .footer a { color: #d9d4f5 !important; }
.ac-marketing footer a:hover, .ac-marketing .footer a:hover { color: #fff !important; }

/* ---------- App-adjacent shells (onboarding, help, status, changelog) ---------- */
.ac-shell { background: var(--bg) !important; }
.ac-shell .btn-primary { background: var(--grad) !important; border: 0 !important; color: #fff !important; }
.ac-shell .progress-bar { background: var(--grad) !important; }
.ac-shell .hero, .ac-shell .help-hero, .ac-shell .search-hero, .ac-shell .header-gradient, .ac-shell .status-hero, .ac-shell header.bg-primary {
  background: var(--grad-hero) !important; color: #fff;
}
.ac-shell .hero h1, .ac-shell .help-hero h1, .ac-shell .search-hero h1, .ac-shell .status-hero h1 { color: #fff !important; }
.ac-shell .navbar { background: rgba(255, 255, 255, .85) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-light); }

/* Onboarding wizard (uses .ac-auth backdrop) */
.ac-auth .step-dot { width: 28px !important; height: 6px !important; border-radius: 999px !important; background: var(--border) !important; }
.ac-auth .step-dot.active { background: var(--grad) !important; width: 44px !important; }
.ac-auth .step-dot.done { background: var(--emerald) !important; }