/* ══════════════════════════════════════════════════════════════
   DESIGN SYSTEM — AI Marketing Agent
   Single source of truth for all design tokens + base components
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Colors: Brand ──────────────────────────────────────── */
  --primary:       #667eea;
  --primary-dark:  #764ba2;
  --primary-light: #7c8eed;

  /* ── Colors: Semantic ───────────────────────────────────── */
  --accent:   #e74c3c;
  --success:  #27ae60;
  --warning:  #f39c12;
  --danger:   #e74c3c;

  /* ── Colors: Text ───────────────────────────────────────── */
  --text-primary:   #333333;
  --text-secondary: #666666;
  --text-tertiary:  #999999;

  /* ── Colors: Borders ────────────────────────────────────── */
  --border:       #dddddd;
  --border-light: #eeeeee;

  /* ── Colors: Backgrounds ────────────────────────────────── */
  --bg-light:   #ffffff;
  --bg-dark:    #f5f5f5;
  --bg-sidebar: #ffffff;

  /* ── Typography ─────────────────────────────────────────── */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-size-3xl: 32px;
  --font-size-2xl: 24px;
  --font-size-xl:  20px;
  --font-size-lg:  18px;
  --font-size-base: 14px;
  --font-size-sm:  12px;

  --font-weight-bold:   700;
  --font-weight-semi:   600;
  --font-weight-medium: 500;
  --font-weight-normal: 400;

  --line-height-tight:  1.2;
  --line-height-snug:   1.4;
  --line-height-normal: 1.6;

  /* ── Spacing ────────────────────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* ── Border Radius ──────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-light:  0 2px 4px rgba(0,0,0,0.10);
  --shadow-medium: 0 4px 8px rgba(0,0,0,0.15);
  --shadow-heavy:  0 10px 40px rgba(0,0,0,0.20);

  /* ── Transition ─────────────────────────────────────────── */
  --transition: all 0.2s ease;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR OVERRIDE — WHITE theme
   ══════════════════════════════════════════════════════════════ */

#sidebar {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border-light) !important;
}

.sidebar-brand {
  background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.05)) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.sidebar-brand-name {
  color: var(--text-primary) !important;
}

.sidebar-brand-sub {
  color: var(--text-tertiary) !important;
}

.sidebar-section-label {
  color: var(--text-tertiary) !important;
}

.nav-item {
  color: var(--text-secondary) !important;
  border-left-color: transparent !important;
}

.nav-item:hover {
  background: rgba(102,126,234,0.08) !important;
  border-left-color: var(--primary) !important;
  color: var(--primary) !important;
  padding-left: 18px !important;
}

.nav-item.active {
  background: rgba(102,126,234,0.10) !important;
  border-left-color: var(--primary) !important;
  color: var(--primary) !important;
  padding-left: 18px !important;
}

/* Preserve per-nav accent on hover/active via colour only */
.nav-item[data-nav="insights"]:hover,
.nav-item[data-nav="insights"].active { border-left-color: #a855f7 !important; color: #a855f7 !important; background: rgba(168,85,247,0.07) !important; }
.nav-item[data-nav="metrics"]:hover,
.nav-item[data-nav="metrics"].active  { border-left-color: #10b981 !important; color: #10b981 !important; background: rgba(16,185,129,0.07) !important; }
.nav-item[data-nav="intelligence"]:hover,
.nav-item[data-nav="intelligence"].active { border-left-color: #f59e0b !important; color: #d97706 !important; background: rgba(245,158,11,0.07) !important; }
.nav-item[data-nav="inbox"]:hover,
.nav-item[data-nav="inbox"].active    { border-left-color: #ff6b35 !important; color: #ea5d28 !important; background: rgba(255,107,53,0.07) !important; }
.nav-item[data-nav="funnels"]:hover,
.nav-item[data-nav="funnels"].active  { border-left-color: #8b5cf6 !important; color: #8b5cf6 !important; background: rgba(139,92,246,0.07) !important; }
.nav-item[data-nav="email"]:hover,
.nav-item[data-nav="email"].active    { border-left-color: #ec4899 !important; color: #ec4899 !important; background: rgba(236,72,153,0.07) !important; }
.nav-item[data-nav="roi"]:hover,
.nav-item[data-nav="roi"].active      { border-left-color: #eab308 !important; color: #ca8a04 !important; background: rgba(234,179,8,0.07) !important; }
.nav-item[data-nav="seo"]:hover,
.nav-item[data-nav="seo"].active      { border-left-color: #10b981 !important; color: #10b981 !important; background: rgba(16,185,129,0.07) !important; }
.nav-item[data-nav="ads"]:hover,
.nav-item[data-nav="ads"].active      { border-left-color: #f43f5e !important; color: #f43f5e !important; background: rgba(244,63,94,0.07) !important; }
.nav-item[data-nav="affiliate"]:hover,
.nav-item[data-nav="affiliate"].active { border-left-color: #16a34a !important; color: #16a34a !important; background: rgba(22,163,74,0.07) !important; }
.nav-item[data-nav="discovery"]:hover,
.nav-item[data-nav="discovery"].active { border-left-color: #f59e0b !important; color: #d97706 !important; background: rgba(245,158,11,0.07) !important; }
.nav-item[data-nav="scale"]:hover,
.nav-item[data-nav="scale"].active    { border-left-color: #10b981 !important; color: #10b981 !important; background: rgba(16,185,129,0.07) !important; }
.nav-item[data-nav="nicho"]:hover,
.nav-item[data-nav="nicho"].active    { border-left-color: #06b6d4 !important; color: #06b6d4 !important; background: rgba(6,182,212,0.07) !important; }
.nav-item[data-nav="voz"]:hover,
.nav-item[data-nav="voz"].active      { border-left-color: #f97316 !important; color: #f97316 !important; background: rgba(249,115,22,0.07) !important; }
.nav-item[data-nav="queue"]:hover,
.nav-item[data-nav="queue"].active    { border-left-color: #22d3ee !important; color: #22d3ee !important; background: rgba(34,211,238,0.07) !important; }
.nav-item[data-nav="intel"]:hover,
.nav-item[data-nav="intel"].active    { border-left-color: #a855f7 !important; color: #a855f7 !important; background: rgba(168,85,247,0.07) !important; }
.nav-item[data-nav="smswa"]:hover,
.nav-item[data-nav="smswa"].active    { border-left-color: #0891b2 !important; color: #0891b2 !important; background: rgba(8,145,178,0.07) !important; }
.nav-item[data-nav="automation"]:hover,
.nav-item[data-nav="automation"].active { border-left-color: #8b5cf6 !important; color: #8b5cf6 !important; background: rgba(139,92,246,0.07) !important; }
.nav-item[data-nav="distribuir"]:hover,
.nav-item[data-nav="distribuir"].active { border-left-color: #f59e0b !important; color: #d97706 !important; background: rgba(245,158,11,0.07) !important; }
.nav-item[data-nav="email-plus"]:hover,
.nav-item[data-nav="email-plus"].active { border-left-color: #8b5cf6 !important; color: #8b5cf6 !important; background: rgba(139,92,246,0.07) !important; }
.nav-item[data-nav="afiliados"]:hover,
.nav-item[data-nav="afiliados"].active  { border-left-color: #f43f5e !important; color: #f43f5e !important; background: rgba(244,63,94,0.07) !important; }
.nav-item[data-nav="landings"]:hover,
.nav-item[data-nav="landings"].active   { border-left-color: #06b6d4 !important; color: #06b6d4 !important; background: rgba(6,182,212,0.07) !important; }
.nav-item[data-nav="revenue"]:hover,
.nav-item[data-nav="revenue"].active    { border-left-color: #10b981 !important; color: #10b981 !important; background: rgba(16,185,129,0.07) !important; }
.nav-item[data-nav="product-intel"]:hover,
.nav-item[data-nav="product-intel"].active { border-left-color: #667eea !important; color: #667eea !important; background: rgba(102,126,234,0.07) !important; }
.nav-item[data-nav="products"]:hover,
.nav-item[data-nav="products"].active   { border-left-color: #f97316 !important; color: #f97316 !important; background: rgba(249,115,22,0.07) !important; }

.sidebar-bottom {
  border-top: 1px solid var(--border-light) !important;
}

.sidebar-version {
  color: var(--text-tertiary) !important;
}

.btn-settings {
  background: rgba(102,126,234,0.05) !important;
  border-color: rgba(102,126,234,0.18) !important;
  color: var(--text-secondary) !important;
}

.btn-settings:hover {
  background: rgba(102,126,234,0.10) !important;
  color: var(--primary) !important;
  border-color: rgba(102,126,234,0.35) !important;
}

.btn-logout {
  background: rgba(231,76,60,0.06) !important;
  border-color: rgba(231,76,60,0.20) !important;
  color: var(--accent) !important;
}

.btn-logout:hover {
  background: rgba(231,76,60,0.12) !important;
  color: #c0392b !important;
}

/* ══════════════════════════════════════════════════════════════
   BASE COMPONENT STYLES
   ══════════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  background: var(--primary);
  color: var(--bg-light);
  text-decoration: none;
}

.ds-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.ds-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-light);
}

.ds-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.ds-btn.danger  { background: var(--accent); }
.ds-btn.danger:hover  { background: #c0392b; }
.ds-btn.success { background: var(--success); }
.ds-btn.success:hover { background: #229954; }
.ds-btn.outline {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}
.ds-btn.outline:hover { background: var(--primary); color: var(--bg-light); }

/* ── Cards ───────────────────────────────────────────────── */
.ds-card {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-light);
  margin-bottom: var(--space-lg);
}

/* ── Alerts ──────────────────────────────────────────────── */
.ds-alert {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  display: none;
}
.ds-alert.visible { display: block; }
.ds-alert.success { background: rgba(39,174,96,0.10); border: 1px solid rgba(39,174,96,0.30); color: #1e8449; }
.ds-alert.error   { background: rgba(231,76,60,0.10); border: 1px solid rgba(231,76,60,0.30); color: #c0392b; }
.ds-alert.warning { background: rgba(243,156,18,0.10); border: 1px solid rgba(243,156,18,0.30); color: #b7770d; }
.ds-alert.info    { background: rgba(102,126,234,0.08); border: 1px solid rgba(102,126,234,0.25); color: #4a5abb; }

/* ── Form inputs ─────────────────────────────────────────── */
.ds-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: var(--bg-light);
  transition: var(--transition);
  outline: none;
  box-sizing: border-box;
}

.ds-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(102,126,234,0.12);
}

.ds-input::placeholder { color: var(--text-tertiary); }

.ds-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
  font-family: var(--font-family);
}

/* ── Modals ──────────────────────────────────────────────── */
.ds-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.50);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.ds-modal-overlay.open { display: flex; }

.ds-modal {
  background: var(--bg-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  width: 100%;
  max-width: 450px;
  box-shadow: var(--shadow-heavy);
}

.ds-modal h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semi);
  color: var(--text-primary);
  margin: 0 0 var(--space-lg);
}

/* ── Tabs ────────────────────────────────────────────────── */
.ds-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-light);
}

.ds-tab {
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  transition: var(--transition);
}

.ds-tab:hover { color: var(--text-primary); }
.ds-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ── Utility classes ─────────────────────────────────────── */
.text-center    { text-align: center; }
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-success   { color: var(--success); }
.text-danger    { color: var(--danger); }
.text-warning   { color: var(--warning); }

.mt-xs  { margin-top: var(--space-xs); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mb-xs  { margin-bottom: var(--space-xs); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }

.p-sm   { padding: var(--space-sm); }
.p-md   { padding: var(--space-md); }
.p-lg   { padding: var(--space-lg); }

.fw-bold   { font-weight: var(--font-weight-bold); }
.fw-medium { font-weight: var(--font-weight-medium); }
.fw-normal { font-weight: var(--font-weight-normal); }

.font-sm   { font-size: var(--font-size-sm); }
.font-base { font-size: var(--font-size-base); }
.font-lg   { font-size: var(--font-size-lg); }

/* ══════════════════════════════════════════════════════════════
   BLOQUE 14B — Dark theme tokens + additional tokens
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Dark modal palette ─────────────────────────────────── */
  --dark-bg-primary:   #13131f;
  --dark-bg-secondary: #1a1a2e;
  --dark-border:       rgba(255,255,255,0.10);
  --dark-text:         rgba(255,255,255,0.90);
  --dark-text-dim:     rgba(255,255,255,0.50);

  /* ── Extended palette ───────────────────────────────────── */
  --indigo:      #6366f1;
  --violet:      #8b5cf6;
  --purple:      #a78bfa;
  --emerald:     #10b981;
  --rose:        #f43f5e;
  --amber:       #f59e0b;
  --sky:         #0ea5e9;

  /* ── Glow shadows ───────────────────────────────────────── */
  --glow-primary: 0 4px 20px rgba(99,102,241,0.35);
  --glow-danger:  0 4px 16px rgba(239,68,68,0.30);
  --glow-success: 0 4px 16px rgba(16,185,129,0.30);

  /* ── Transition variants ────────────────────────────────── */
  --transition-fast:   all 0.15s ease;
  --transition-bounce: all 0.25s cubic-bezier(0.34,1.56,0.64,1);

  /* ── Z-index scale ──────────────────────────────────────── */
  --z-modal:   1000;
  --z-sidebar: 100;
  --z-toast:   99999;

  /* ── Bloque 17: Shorthand aliases ────────────────────────── */
  --color-bg:     var(--bg-light);
  --color-border: var(--border);
  --color-text:   var(--text-primary);
  --color-muted:  var(--text-secondary);
  --shadow-sm:    var(--shadow-light);
  --shadow-md:    var(--shadow-medium);
  --shadow-lg:    var(--shadow-heavy);
  --font-sm:      var(--font-size-sm);
  --font-md:      var(--font-size-base);
  --font-lg:      var(--font-size-lg);
  --font-xl:      var(--font-size-xl);
  --font-bold:    var(--font-weight-bold);
  --secondary:    var(--primary-dark);
}

/* ══════════════════════════════════════════════════════════════
   BLOQUE 17 — Complete Component Library
   ══════════════════════════════════════════════════════════════ */

/* ── Button variants (secondary, ghost, warning) ─────────────── */
.ds-btn.secondary {
  background: var(--bg-dark);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.ds-btn.secondary:hover {
  background: #e8e8e8;
  color: var(--text-primary);
  box-shadow: var(--shadow-light);
  transform: none;
}
.ds-btn.ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.ds-btn.ghost:hover {
  background: var(--bg-dark);
  color: var(--text-primary);
  transform: none;
}
.ds-btn.warning { background: var(--warning); color: #fff; }
.ds-btn.warning:hover { background: #d68910; }
.ds-btn-sm {
  padding: 5px 12px;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}
.ds-btn-lg {
  padding: 13px var(--space-lg);
  font-size: var(--font-size-lg);
}

/* ── Badges / Status chips ────────────────────────────────────── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: var(--font-weight-semi);
  font-family: var(--font-family);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.ds-badge.live         { background: rgba(16,185,129,0.12); color: #059669; border: 1px solid rgba(16,185,129,0.25); }
.ds-badge.live::before { content: "LIVE"; font-size: 9px; }
.ds-badge.in-progress  { background: rgba(245,158,11,0.12); color: #d97706; border: 1px solid rgba(245,158,11,0.25); }
.ds-badge.error        { background: rgba(231,76,60,0.10);  color: #c0392b; border: 1px solid rgba(231,76,60,0.22); }
.ds-badge.pending      { background: rgba(148,163,184,0.12); color: var(--text-secondary); border: 1px solid rgba(148,163,184,0.22); }
.ds-badge.info         { background: rgba(102,126,234,0.10); color: #4a5abb; border: 1px solid rgba(102,126,234,0.22); }
.ds-badge.success      { background: rgba(39,174,96,0.10);  color: #1e8449; border: 1px solid rgba(39,174,96,0.22); }
.ds-badge.warning      { background: rgba(243,156,18,0.10); color: #b7770d; border: 1px solid rgba(243,156,18,0.22); }

/* ── Tables ───────────────────────────────────────────────────── */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--text-primary);
}
.ds-table thead th {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color: var(--text-secondary);
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.ds-table thead th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.ds-table thead th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }
.ds-table tbody tr {
  border-bottom: 1px solid var(--border-light);
  transition: background 0.15s ease;
}
.ds-table tbody tr:last-child  { border-bottom: none; }
.ds-table tbody tr:hover       { background: rgba(102,126,234,0.04); }
.ds-table tbody td {
  padding: var(--space-sm) var(--space-md);
  color: var(--text-primary);
  vertical-align: middle;
}
.ds-table-wrap {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-light);
}

/* ── Cards — extended variants ────────────────────────────────── */
.ds-card-sm {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  box-shadow: var(--shadow-light);
}
.ds-card-stat {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  box-shadow: var(--shadow-light);
}
.ds-card-stat .stat-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.ds-card-stat .stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: 1.1;
}
.ds-card-stat .stat-delta { font-size: var(--font-size-sm); margin-top: 4px; }
.ds-card-stat .stat-delta.up   { color: var(--success); }
.ds-card-stat .stat-delta.down { color: var(--danger); }

/* ── Form validation states ───────────────────────────────────── */
.ds-input.valid   { border-color: var(--success); box-shadow: 0 0 0 3px rgba(39,174,96,0.10); }
.ds-input.invalid { border-color: var(--danger);  box-shadow: 0 0 0 3px rgba(231,76,60,0.10); }
.ds-field-error   { font-size: var(--font-size-sm); color: var(--danger); margin-top: var(--space-xs); display: none; }
.ds-field-error.visible { display: block; }
.ds-field-hint    { font-size: var(--font-size-sm); color: var(--text-tertiary); margin-top: var(--space-xs); }

/* ── Select ───────────────────────────────────────────────────── */
.ds-select {
  width: 100%;
  padding: var(--space-sm) 32px var(--space-sm) var(--space-md);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: var(--bg-light) 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='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  transition: var(--transition);
  outline: none;
  cursor: pointer;
  appearance: none;
  box-sizing: border-box;
}
.ds-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(102,126,234,0.12); }

/* ── Textarea ─────────────────────────────────────────────────── */
.ds-textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: var(--bg-light);
  transition: var(--transition);
  outline: none;
  resize: vertical;
  min-height: 100px;
  box-sizing: border-box;
}
.ds-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(102,126,234,0.12); }

/* ── Divider ──────────────────────────────────────────────────── */
.ds-divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: var(--space-lg) 0;
}

/* ── Progress bar ─────────────────────────────────────────────── */
.ds-progress-wrap {
  height: 6px;
  background: var(--bg-dark);
  border-radius: 99px;
  overflow: hidden;
}
.ds-progress-bar {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  transition: width 0.6s ease;
}

/* ── Spinner ──────────────────────────────────────────────────── */
.ds-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(102,126,234,0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: ds-spin 0.7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ── Section header ───────────────────────────────────────────── */
.ds-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
}
.ds-section-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semi);
  color: var(--text-primary);
  font-family: var(--font-family);
}

/* ── Empty state ──────────────────────────────────────────────── */
.ds-empty { text-align: center; padding: var(--space-2xl) var(--space-lg); color: var(--text-secondary); }
.ds-empty-icon { font-size: 36px; margin-bottom: var(--space-md); }
.ds-empty h3 { font-size: var(--font-size-lg); color: var(--text-primary); margin-bottom: var(--space-sm); }
.ds-empty p  { font-size: var(--font-size-base); }

/* ── Grid utilities ───────────────────────────────────────────── */
.ds-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.ds-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.ds-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
@media (max-width: 640px) {
  .ds-grid-2, .ds-grid-3, .ds-grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .ds-grid-3, .ds-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Flex utilities ───────────────────────────────────────────── */
.ds-flex         { display: flex; align-items: center; }
.ds-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ds-gap-sm { gap: var(--space-sm); }
.ds-gap-md { gap: var(--space-md); }
.ds-gap-lg { gap: var(--space-lg); }

/* ── Responsive helpers ───────────────────────────────────────── */
.ds-hide-mobile { display: block; }
.ds-show-mobile { display: none; }
@media (max-width: 640px) {
  .ds-hide-mobile { display: none; }
  .ds-show-mobile { display: block; }
}

/* ── Dark-surface modifier (landing page, dark overlays) ─────── */
.ds-surface-dark .ds-card {
  background: #1e1e2e;
  border-color: rgba(255,255,255,0.08);
  color: #e8e8f0;
}
.ds-surface-dark .ds-btn.secondary {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.10);
}
.ds-surface-dark .ds-btn.secondary:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
}