/* ============================================================================
   AURORA — FunnelNinja's design system.
   Light, vibrant, premium SaaS: indigo→violet gradient accents, big rounding,
   soft tinted shadows, aurora glows, calm lavender-white surfaces, system/Inter
   type. Linked AFTER each page's inline <style> so it retunes the shared tokens
   (--blue, --bg, --surface, --border, --text-*) and refines common components
   app-wide — color/type/shape/gradient only, no layout changes, so it layers
   safely over every page.

   ── COLORS ARE EASY TO CHANGE: edit the :root tokens below. ──
   ============================================================================ */

:root {
  /* Brand accents (the gradient is built from these two) */
  --accent-1: #6D5EF6;          /* indigo/violet — primary */
  --accent-2: #EC4899;          /* pink — secondary */
  --blue: #6D5EF6;              /* app's action color maps to accent-1 */
  --blue-press: #5B4EE0;
  --grad: linear-gradient(135deg, var(--accent-1), #8B7DF8);
  --grad-vivid: linear-gradient(120deg, var(--accent-1), var(--accent-2));

  /* Surfaces */
  --bg: #FFFFFF;                /* cards / panels */
  --surface: #F5F6FB;          /* app / content background */
  --surface-2: #F7F8FE;
  --border: #E7E8F3;           /* hairline */
  --border-soft: #EEEFF7;

  /* Text */
  --text-primary: #141527;
  --text-secondary: #6B6F8C;
  --text-muted: #9AA0BC;

  /* State */
  --success: #12B981;
  --warning: #F59E0B;
  --error: #F5476B;

  /* Shape + depth */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-pill: 980px;
  --shadow-sm: 0 2px 8px rgba(87,70,220,.06), 0 1px 2px rgba(20,21,39,.04);
  --shadow-md: 0 12px 34px rgba(87,70,220,.10), 0 2px 8px rgba(20,21,39,.05);
  --shadow-lg: 0 24px 60px rgba(60,50,160,.18), 0 6px 16px rgba(20,21,39,.08);
  --ease: cubic-bezier(.22,.61,.36,1);

  --sf: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display", system-ui,
        "Helvetica Neue", sans-serif;
}

[data-theme="dark"] {
  --bg: #16172270;
  --bg: #191A2A;
  --surface: #0F1020;
  --surface-2: #171830;
  --border: #2A2C46;
  --border-soft: #232541;
  --text-primary: #EDEEF7;
  --text-secondary: #A4A8C6;
  --text-muted: #767BA0;
  --blue: #8B7DF8;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 14px 40px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.6);
}

/* ── Typography ── */
body, button, input, select, textarea, .btn {
  font-family: var(--sf) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { letter-spacing: -0.01em; }
h1, h2, h3, .page-header h1, .page-title, .step-title, .phead h1, .stat-value {
  letter-spacing: -0.025em; font-weight: 800;
}

/* Signature gradient headline on the main page titles + wordmark */
.page-title, .page-header h1, .phead h1, .logo-text, .sb-title {
  background: var(--grad-vivid);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ── Aurora glow behind content ── */
.content {
  background:
    radial-gradient(720px 380px at 100% -6%, rgba(236,72,153,.07), transparent 60%),
    radial-gradient(760px 420px at -2% 0%, rgba(109,94,246,.10), transparent 55%),
    var(--surface) !important;
}

/* ── Buttons ── */
.btn, .btn-primary, .social-btn, .connect-btn, .copy-btn {
  border-radius: var(--r-sm);
  transition: transform .12s var(--ease), box-shadow .2s var(--ease),
              filter .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.btn-primary {
  background: var(--grad) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(109,94,246,.28);
}
.btn-primary:hover { filter: brightness(1.05); opacity: 1; box-shadow: 0 10px 26px rgba(109,94,246,.36); }
.btn-primary:active, .btn:active { transform: scale(.975); }

/* ── Cards ── */
.card, .stat-card, .brand-card, .team-card, .map-card, .pixel-box, .summary-card,
.connect-card, .type-card, .tbl-wrap, .kpi-card, .chart-card {
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
}
.brand-card:hover, .card[data-q]:hover, .type-card:hover, .connect-card:hover, .stat-card:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent-1) 30%, var(--border));
  transform: translateY(-2px);
}

/* ── Inputs ── */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
select, textarea, .modal-field input, .modal-field select, .modal-field textarea,
.fld input, .fld select, .fld textarea, .map-select, .topbar-search input {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--border) !important;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-1) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-1) 16%, transparent) !important;
  outline: none !important;
}

/* ── Pills / badges / chips ── */
.pill, .badge, .brand-card-status, .account-chip, .chip, .tag,
.status-active, .status-paused, .status-setup {
  border-radius: var(--r-pill);
  font-weight: 600;
}
.pill-blue, .tag { background: color-mix(in srgb, var(--accent-1) 12%, transparent); color: var(--accent-1); }

/* ── Nav ── */
.nav-item, .sb-item { border-radius: var(--r-sm); margin: 1px 8px; transition: background .15s var(--ease), color .15s var(--ease); }
.nav-item { padding-left: 14px; }
.nav-item::before { display: none !important; }
.nav-item.active, .sb-item.active {
  background: color-mix(in srgb, var(--accent-1) 12%, transparent) !important;
  color: var(--accent-1) !important;
}

/* ── Clean left menu: text only, no icons ── */
.sidebar .nav-item .nav-icon,
.sidebar .nav-item > i,
.sidebar .nav-item > svg,
.sb-item .sb-dot { display: none !important; }
.sidebar .nav-item { gap: 0 !important; }

/* ── Bars: hairline + light blur ── */
.topbar, .top {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--border-soft);
}
.sidebar { border-right: 1px solid var(--border-soft); }

/* ── Logo mark / avatars get the gradient ── */
.logo-mark, .brand-dot, .user-avatar, .avatar, .team-avatar, .av, .brandmark .dot {
  background: var(--grad) !important;
}
.avatar, .user-avatar, .team-avatar, .av { border-radius: 50%; }
.logo-mark { border-radius: var(--r-sm); }

/* ── Modals ── */
.modal, .mod, .modal-overlay .modal {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-soft);
}
.modal-overlay, .ov { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ── Tables ── */
th { letter-spacing: .04em; font-weight: 600; }
.tbl-wrap { box-shadow: var(--shadow-sm); }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent-1) 30%, transparent); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent-1) 50%, transparent); background-clip: padding-box; }

/* ── Links ── */
a { color: var(--accent-1); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }