/*
 * Viral Design System v7.0
 * Modern Blue-based Color System
 * Premium light/dark themes with semantic tokens
 */

/* ========================================
   BLUE COLOR SCALE - Foundation
   ======================================== */

:root {
  /* Blue Scale - Brand Foundation */
  --blue-50: #e7f3ff;
  --blue-100: #d0e5ff;
  --blue-200: #a8d1ff;
  --blue-300: #7ab5ff;
  --blue-400: #60a5fa;    /* Dark mode primary */
  --blue-500: #2563eb;    /* Light mode primary */
  --blue-600: #1d4ed8;    /* Hover states */
  --blue-700: #1e40af;    /* Strong emphasis */
  --blue-800: #1e3a8a;    /* Extra dark */
}

/* ========================================
   LIGHT MODE (Default) - Clean & Professional
   ======================================== */

:root {
  /* Backgrounds */
  --bg: #f5f7fb;
  --bg-muted: #ffffff;
  --bg-soft: #edf1f7;
  --bg-elevated: #ffffff;
  --bg-hover: #e5e9f0;
  --bg-page: #f5f7fb;

  /* Foreground / Text */
  --fg: #0f172a;
  --fg-muted: #6b7280;
  --fg-subtle: #9ca3af;
  --fg-on-primary: #ffffff;
  --fg-on-danger: #ffffff;

  /* Borders */
  --border-subtle: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-focus: var(--blue-500);

  /* Primary - Blue */
  --primary: var(--blue-500);
  --primary-soft: var(--blue-50);
  --primary-strong: var(--blue-600);
  --primary-muted: var(--blue-100);

  /* Semantic Colors */
  --success: #16a34a;
  --success-soft: rgba(22, 163, 74, 0.08);
  --success-strong: #15803d;

  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.1);
  --warning-strong: #d97706;

  --danger: #e11d48;
  --danger-soft: rgba(225, 29, 72, 0.12);
  --danger-strong: #be123c;

  --info: var(--blue-500);
  --info-soft: rgba(37, 99, 235, 0.1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.03);

  /* Spacing Scale */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Z-index Scale */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-toast: 60;
}

/* ========================================
   DARK MODE - Deep & Sophisticated
   ======================================== */

:root[data-theme="dark"] {
  /* Backgrounds */
  --bg: #020617;
  --bg-muted: #0b1220;
  --bg-soft: #0f1729;
  --bg-elevated: #0b1220;
  --bg-hover: #1a2332;
  --bg-page: #020617;

  /* Foreground / Text */
  --fg: #e5e7eb;
  --fg-muted: #9ca3af;
  --fg-subtle: #6b7280;
  --fg-on-primary: #0b1120;
  --fg-on-danger: #020617;

  /* Borders */
  --border-subtle: #1f2937;
  --border-strong: #374151;
  --border-focus: var(--blue-400);

  /* Primary - Brighter blue for dark bg */
  --primary: var(--blue-400);
  --primary-soft: #0b1a32;
  --primary-strong: var(--blue-300);
  --primary-muted: #0f1f3a;

  /* Semantic Colors */
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.16);
  --success-strong: #4ade80;

  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.18);
  --warning-strong: #fcd34d;

  --danger: #fb7185;
  --danger-soft: rgba(248, 113, 113, 0.16);
  --danger-strong: #fca5a5;

  --info: var(--blue-400);
  --info-soft: rgba(96, 165, 250, 0.16);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.7);
}

/* ========================================
   2. BASE STYLES
   ======================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  font-size: 0.95rem;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  width: 100%;
  max-width: 100vw;
}

/* ========================================
   3. TYPOGRAPHY
   ======================================== */

.h1 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg);
}

.h2 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg);
}

.h3 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg);
}

.text-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg);
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.5;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1.4;
}

.text-muted {
  color: var(--fg-muted);
}

.text-secondary {
  color: var(--fg-subtle);
}

.text-primary {
  color: var(--fg);
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/* Mobile Typography Adjustments */
@media (max-width: 768px) {
  .h1 {
    font-size: 1.375rem;
  }

  .h2 {
    font-size: 1.125rem;
  }

  .h3 {
    font-size: 1rem;
  }
}

/* ========================================
   3.5 SUBTLE ACCENT UTILITIES
   Strategic touches - use teal sparingly for visual interest
   ======================================== */

/* Subtle Accent Backgrounds */
.accent-hint {
  background: var(--primary-muted);
}

.hover-accent-hint {
  transition: all 0.2s ease;
}

.hover-accent-hint:hover {
  background: var(--primary-muted);
  border-color: var(--primary);
}

/* Decorative Accents - Small teal touches */
.accent-dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  margin-right: 0.5rem;
}

.accent-line-left {
  border-left: 2px solid var(--primary);
  padding-left: 0.75rem;
}

/* Gradient Underline - Elegant teal accent for headings */
.accent-underline {
  position: relative;
  display: inline-block;
}

.accent-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 40px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

/* ========================================
   4. CORE COMPONENTS
   ======================================== */

/* Cards */
.card {
  background: var(--bg-muted);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  transition: all 0.2s ease;
}

.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

.card-soft {
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-subtle);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-subtle);
}

.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--fg);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  border-radius: var(--radius-full);
  font-weight: 500;
  padding: 0.6rem 1.2rem;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

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

.btn-primary {
  background: var(--primary);
  color: var(--fg-on-primary);
  box-shadow: 0 4px 14px rgba(15, 159, 168, 0.25);
  font-weight: 600;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-strong);
  box-shadow: 0 6px 20px rgba(15, 159, 168, 0.35);
  transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
  background: var(--primary-strong);
  transform: translateY(0);
}

.btn-secondary {
  background: var(--bg-muted);
  color: var(--fg);
  border: 1px solid var(--border-strong);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.btn-outline {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border-subtle);
}

.btn-outline:hover:not(:disabled) {
  background: var(--bg-soft);
  color: var(--fg);
  border-color: var(--border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--fg-muted);
  border: none;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-soft);
  color: var(--fg);
}

.btn-ghost.active {
  background: var(--bg-muted);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

/* Danger Button */
.btn-danger {
  background: var(--danger);
  color: var(--fg-on-danger);
  font-weight: 600;
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-strong);
  transform: translateY(-1px);
}

/* Success Button */
.btn-success {
  background: var(--success);
  color: #FFFFFF;
  font-weight: 600;
}

.btn-success:hover:not(:disabled) {
  background: var(--success-strong);
  transform: translateY(-1px);
}

.btn-sm {
  padding: 0.4rem 0.9rem;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 0.8rem 1.6rem;
  font-size: 1rem;
}

.btn-block {
  width: 100%;
  display: flex;
}

.btn-mobile-full {
  /* Full width only on mobile */
}

@media (max-width: 768px) {
  .btn {
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
  }

  .btn-sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
  }

  .btn-mobile-full {
    width: 100%;
    display: flex;
  }
}

/* Icon Buttons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--fg-muted);
  position: relative;
  text-decoration: none;
}

.icon-btn:hover {
  background: var(--bg-soft);
  color: var(--fg);
}

.badge-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg);
}

/* Pills / Badges */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  border-radius: var(--radius-full);
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--border-subtle);
  color: var(--fg-muted);
  white-space: nowrap;
}

.pill-success {
  border-color: var(--success);
  color: var(--success);
  background: rgba(70, 230, 166, 0.1);
}

.pill-warning {
  border-color: var(--warning);
  color: var(--warning);
  background: rgba(255, 200, 87, 0.1);
}

.pill-danger {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(255, 107, 107, 0.1);
}

.pill-info {
  border-color: var(--info);
  color: var(--info);
  background: rgba(92, 179, 255, 0.1);
}

.pill-accent {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(15, 159, 168, 0.1);
}

.pill-active {
  border-color: var(--success);
  color: var(--success);
  background: rgba(70, 230, 166, 0.15);
  font-weight: 600;
}

.pill-ending-soon {
  border-color: var(--warning);
  color: var(--warning);
  background: rgba(255, 200, 87, 0.15);
  font-weight: 600;
  animation: pulse-warning 2s ease-in-out infinite;
}

@keyframes pulse-warning {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.pill-platform {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-color: var(--info);
  color: var(--info);
  background: rgba(92, 179, 255, 0.1);
}

.pill-draft {
  border-color: var(--fg-subtle);
  color: var(--fg-subtle);
  background: rgba(108, 117, 125, 0.1);
}

.pill-completed {
  border-color: var(--info);
  color: var(--info);
  background: rgba(92, 179, 255, 0.1);
}

.pill-cancelled {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(255, 107, 107, 0.1);
}

/* Filter Tabs */
.filter-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 0.625rem 1rem;
  background: transparent;
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-tab:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.filter-tab.active {
  font-weight: 600;
}

.filter-tab.active:not(.filter-tab-active):not(.filter-tab-draft):not(.filter-tab-completed) {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(15, 159, 168, 0.1);
}

.filter-tab-active.active {
  border-color: var(--success);
  color: var(--success);
  background: rgba(70, 230, 166, 0.15);
}

.filter-tab-draft.active {
  border-color: var(--fg-subtle);
  color: var(--fg-subtle);
  background: rgba(108, 117, 125, 0.1);
}

.filter-tab-completed.active {
  border-color: var(--info);
  color: var(--info);
  background: rgba(92, 179, 255, 0.1);
}

.tab-count {
  padding: 0.125rem 0.5rem;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
}

.filter-tab.active .tab-count {
  background: currentColor;
  color: var(--bg-elevated);
  opacity: 0.9;
}

/* Campaigns Filter Header */
.campaigns-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.filter-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Active Filter Pills (inline) */
.active-filters-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--spacing-md);
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: var(--primary);
  color: white;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 500;
}

.filter-pill button {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.filter-pill button:hover {
  opacity: 1;
}

/* Dropdown Item Active State */
.dropdown-item.active {
  background: var(--primary);
  color: white;
  font-weight: 600;
}

.dropdown-item.active:hover {
  background: var(--primary);
  opacity: 0.9;
}

/* Avatars */
.avatar {
  border-radius: var(--radius-full);
  overflow: hidden;
  width: 40px;
  height: 40px;
  object-fit: cover;
  background: var(--bg-elevated);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  font-weight: 600;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}

.avatar-lg {
  width: 56px;
  height: 56px;
  font-size: 1.25rem;
}

.avatar-xl {
  width: 80px;
  height: 80px;
  font-size: 1.75rem;
}

/* ========================================
   5. LAYOUT SYSTEM
   ======================================== */

.app-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  width: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-subtle);
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
  line-height: 1.2;
}

.page-subtitle {
  color: var(--fg-muted);
  margin: 0.5rem 0 0 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: var(--spacing-lg);
  padding-left: 0.25rem;
}

.page-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 4.5rem;
  width: 100%;
}

.row {
  display: flex;
  gap: 1.25rem;
}

.row--wrap {
  flex-wrap: wrap;
}

.row--center {
  align-items: center;
}

.row--between {
  justify-content: space-between;
}

.col {
  flex: 1;
  min-width: 0;
}

.col-auto {
  flex: 0 0 auto;
}

/* Grid System */
.grid {
  display: grid;
  gap: 1.25rem;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Spacing Utilities */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

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

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* ========================================
   6. TOP BAR
   ======================================== */

.topbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--bg-elevated);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-sm);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.topbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.logo {
  font-size: 1.25rem;
  font-weight: 700;
  background-image: linear-gradient(135deg, var(--primary), var(--primary-strong));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  white-space: nowrap;
}

.topbar-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
}

/* Desktop Navigation */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--fg);
  background: var(--bg-soft);
}

.nav-link.active {
  color: var(--fg);
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

/* ========================================
   7. BOTTOM NAVIGATION (Mobile)
   ======================================== */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--bg-elevated);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: var(--z-fixed);
  padding: 0 var(--spacing-sm);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  text-decoration: none;
  color: var(--fg-subtle);
  font-size: 0.65rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border-radius: var(--radius-sm);
  flex: 1;
  min-width: 0;
}

.bottom-nav-item span:first-child {
  font-size: 1.25rem;
  line-height: 1;
}

.bottom-nav-item:hover {
  color: var(--fg-muted);
  background: var(--bg-soft);
}

.bottom-nav-item.active {
  color: var(--primary);
}

.bottom-nav-item.active span:first-child {
  transform: scale(1.1);
}

/* Hide on desktop */
@media (min-width: 769px) {
  .bottom-nav {
    display: none;
  }
}

/* Small phones: Icons only to prevent text overlap */
@media (max-width: 380px) {
  .bottom-nav {
    height: 56px;
    padding: 0 0.25rem;
  }

  .bottom-nav-item {
    gap: 0;
    padding: 0.5rem 0.25rem;
    font-size: 0.625rem;
  }

  .bottom-nav-item span {
    display: none; /* Hide text labels */
  }

  .bottom-nav-item i {
    font-size: 1.5rem; /* Slightly larger icons to compensate */
  }

  .bottom-nav-item.active i {
    transform: scale(1.15);
  }
}

/* Extra small phones: Additional optimizations for very small screens */
@media (max-width: 360px) {
  .bottom-nav {
    height: 52px;
    padding: 0 0.125rem;
  }

  .bottom-nav-item {
    padding: 0.375rem 0.125rem;
    min-width: 48px; /* Ensure minimum touch target size */
  }

  .bottom-nav-item i {
    font-size: 1.375rem;
  }
}

/* ========================================
   8. RESPONSIVE UTILITIES
   ======================================== */

/* Mobile: Stack columns */
@media (max-width: 768px) {
  .page-container {
    padding: 1rem 1rem 4.5rem;
  }

  .row {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .row--mobile-row {
    flex-direction: row;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .grid-2.grid--mobile-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .card {
    padding: 1rem;
  }

  .card-soft {
    padding: 0.875rem 1rem;
  }

  .card-header {
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
  }

  .topbar {
    padding: 0 1rem;
  }

  /* Prevent overly wide content on mobile */
  .w-full-mobile {
    width: 100%;
  }

  /* Better touch targets for pills */
  .pill {
    padding: 0.25rem 0.7rem;
    font-size: 0.7rem;
  }

  /* Improve row wrapping */
  .row--wrap {
    flex-wrap: wrap;
  }
}

/* Small phones: Optimize for compact screens (iPhone SE, 12 mini) */
@media (max-width: 380px) {
  .page-container {
    padding: 0.875rem 0.75rem 3.75rem;
  }

  .card {
    padding: 0.875rem;
  }

  .topbar {
    padding: 0 0.75rem;
  }
}

/* Extra small phones: Maximum space efficiency */
@media (max-width: 360px) {
  .page-container {
    padding: 0.75rem 0.625rem 3.5rem;
  }

  .card {
    padding: 0.75rem;
  }

  .card-soft {
    padding: 0.625rem 0.75rem;
  }

  .topbar {
    padding: 0 0.625rem;
  }

  /* Ensure buttons remain tappable */
  .btn {
    min-height: 44px; /* iOS minimum touch target */
    padding: 0.625rem 0.875rem;
  }

  .btn-sm {
    min-height: 40px;
    padding: 0.5rem 0.75rem;
  }

  /* Tighter typography for small screens */
  .h1 {
    font-size: 1.25rem;
  }

  .h2 {
    font-size: 1rem;
  }

  .h3 {
    font-size: 0.9375rem;
  }

  /* Carousel adjustments for very small screens */
  .campaign-carousel-item {
    min-width: 260px;
    max-width: 260px;
    padding: 0.75rem;
  }
}

/* Hide on mobile */
.hide-mobile {
  display: block;
}

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide on desktop */
.hide-desktop {
  display: none;
}

@media (max-width: 768px) {
  .hide-desktop {
    display: block;
  }
}

/* ========================================
   9. UTILITY CLASSES
   ======================================== */

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.text-center {
  text-align: center;
}

.w-full {
  width: 100%;
}

.cursor-pointer {
  cursor: pointer;
}

/* Divider */
.divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--spacing-lg) 0;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  opacity: 0.5;
}

.empty-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: var(--spacing-sm);
}

.empty-text {
  color: var(--fg-subtle);
  margin-bottom: var(--spacing-lg);
}

/* ========================================
   10. DROPDOWN MENU
   ======================================== */

.topbar-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  min-width: 200px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  overflow: hidden;
}

.dropdown-header {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-soft);
}

.dropdown-item {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--fg);
  text-decoration: none;
  transition: background 0.2s;
}

.dropdown-item:hover {
  background: var(--bg-soft);
}

.dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--spacing-xs) 0;
}

/* Professional Icon Button */
.icon-btn-pro {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--fg-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-btn-pro:hover {
  background: var(--bg-soft);
  color: var(--fg);
}

.icon-btn-pro svg {
  flex-shrink: 0;
}

/* Avatar Button with Dropdown Indicator */
.avatar-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border: none;
  background: transparent;
  color: var(--fg-muted);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.2s ease;
}

.avatar-btn:hover {
  background: var(--bg-soft);
}

.avatar-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* Enhanced Dropdown Menu Variants */
.dropdown-menu-wide {
  min-width: 280px;
}

.dropdown-menu-right {
  right: 0;
}

/* Dropdown Item with Icon */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--fg);
  text-decoration: none;
  transition: background 0.2s;
  position: relative;
}

.dropdown-item svg {
  flex-shrink: 0;
  color: var(--fg-subtle);
}

.dropdown-item:hover svg {
  color: var(--fg);
}

.dropdown-item span {
  flex: 1;
}

/* Badge Count */
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--primary);
  color: white;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

/* Theme Toggle in Dropdown */
.theme-toggle-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
}

.theme-toggle-container:hover {
  background: transparent;
}

.theme-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.theme-switch {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 32px;
  flex-shrink: 0;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  transition: all 0.3s ease;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
}

.theme-slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 50px;
  left: 3px;
  bottom: 3px;
  background: var(--primary);
  transition: all 0.3s ease;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-switch input:checked + .theme-slider:before {
  transform: translateX(52px);
}

.theme-slider-label {
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 1;
  padding: 0 4px;
  transition: all 0.3s ease;
}

.theme-slider-label-dark {
  color: #ffffff;
}

.theme-slider-label-light {
  color: var(--fg-subtle);
}

.theme-switch input:checked + .theme-slider .theme-slider-label-dark {
  color: var(--fg-subtle);
}

.theme-switch input:checked + .theme-slider .theme-slider-label-light {
  color: #ffffff;
}

/* ========================================
   MODAL OVERLAY & CONTENT
   ======================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--spacing-lg);
}

.modal-content {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-subtle);
}

.modal-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.75rem;
  color: var(--fg-subtle);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

.modal-body {
  padding: var(--spacing-lg);
}

.modal-footer {
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
  padding: var(--spacing-lg);
  border-top: 1px solid var(--border-subtle);
}

/* ========================================
   SUBMISSION CARDS
   ======================================== */

.my-submissions-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.my-submission-card {
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  transition: all 0.2s ease;
}

.my-submission-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.submission-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.submission-url-display {
  font-size: 0.9rem;
}

.content-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  word-break: break-all;
}

.content-link:hover {
  color: var(--primary-strong);
  text-decoration: underline;
}

.submission-meta {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  flex-wrap: wrap;
}

/* ========================================
   FORMS & INPUTS
   ======================================== */

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: var(--spacing-xs);
}

.form-hint {
  display: block;
  font-size: 0.8rem;
  color: var(--fg-subtle);
  margin-top: var(--spacing-xs);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  line-height: 1.5;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--fg-subtle);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15, 159, 168, 0.1);
  background: var(--bg);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-soft);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23b3b3c7' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.form-error {
  color: var(--danger);
  font-size: 0.85rem;
  margin-top: var(--spacing-xs);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.form-input.error,
.form-textarea.error,
.form-select.error {
  border-color: var(--danger);
}

.form-input.error:focus,
.form-textarea.error:focus,
.form-select.error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.form-check-input {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary);
}

.form-check-label {
  font-size: 0.95rem;
  color: var(--fg);
  cursor: pointer;
}

/* Mobile form improvements */
@media (max-width: 768px) {
  .form-input,
  .form-textarea,
  .form-select {
    padding: 0.85rem 1rem;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .form-label {
    font-size: 0.9rem;
  }
}

/* ========================================
   MOBILE & RESPONSIVE IMPROVEMENTS
   ======================================== */

/* Better touch targets on mobile */
@media (max-width: 768px) {
  .icon-btn,
  .icon-btn-pro {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  
  .btn {
    min-height: 44px;
    padding: 0.7rem 1.2rem;
  }
  
  .btn-sm {
    min-height: 40px;
  }
  
  /* Better card spacing on mobile */
  .card {
    padding: 1rem;
    margin-bottom: var(--spacing-md);
  }
  
  /* Page container adjustments */
  .page-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .app-shell {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Improve bottom nav spacing */
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(60px + env(safe-area-inset-bottom));
  }
  
  /* Better modal on mobile */
  .modal-content {
    max-width: calc(100vw - 2rem);
    margin: 1rem;
  }
}

/* Tablet breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
  .topbar {
    padding: 0 1.25rem;
  }
  
  .page-container,
  .app-shell {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Large desktop improvements */
@media (min-width: 1440px) {
  .page-container,
  .app-shell {
    max-width: 1400px;
    margin: 0 auto;
  }
  
  .topbar {
    padding: 0 2rem;
  }
}

/* ========================================
   IMPROVED LIGHT MODE SUPPORT
   ======================================== */

/* Ensure proper contrast in light mode */
:root[data-theme="light"] .card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .modal-overlay {
  background: rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] .topbar,
:root[data-theme="light"] .bottom-nav {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .dropdown-menu {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Better form contrast in light mode */
:root[data-theme="light"] .form-input,
:root[data-theme="light"] .form-textarea,
:root[data-theme="light"] .form-select {
  background: var(--bg-muted);
  border-color: var(--border-subtle);
}

:root[data-theme="light"] .form-input:focus,
:root[data-theme="light"] .form-textarea:focus,
:root[data-theme="light"] .form-select:focus {
  background: var(--bg-elevated);
  border-color: var(--primary);
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: var(--spacing-sm) var(--spacing-md);
  text-decoration: none;
  z-index: 9999;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-to-main:focus {
  top: 0;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn {
    border: 2px solid currentColor;
  }
  
  .card {
    border-width: 2px;
  }
}

/* ========================================
   MODERN NAVIGATION LINKS (Brand)
   ======================================== */

.nav-link-modern {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg-muted);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: all 0.2s ease;
  white-space: nowrap;
  border: 1.5px solid transparent;
}

.nav-link-modern svg {
  flex-shrink: 0;
  opacity: 0.8;
  transition: all 0.2s ease;
}

.nav-link-modern:hover {
  color: var(--fg);
  background: var(--bg-soft);
  border-color: var(--border-subtle);
}

.nav-link-modern:hover svg {
  opacity: 1;
  transform: translateY(-1px);
}

.nav-link-modern.active {
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  box-shadow: 0 2px 8px rgba(15, 159, 168, 0.3);
  border-color: transparent;
}

.nav-link-modern.active svg {
  opacity: 1;
}

/* ========================================
   CAMPAIGN CARDS & GRID
   ======================================== */

.campaigns-search-bar {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  align-items: flex-start;
}

.search-input-wrapper {
  flex: 1;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 3rem;
  font-size: 0.95rem;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--fg);
  transition: all 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15, 159, 168, 0.1);
}

.search-icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-subtle);
  pointer-events: none;
}

.filters-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--fg);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.filters-button:hover {
  border-color: var(--primary);
  background: var(--bg-hover);
}

.filters-button.active {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(15, 159, 168, 0.08);
}

.filter-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  min-width: 240px;
  z-index: 100;
  padding: var(--spacing-sm);
}

.filter-dropdown-section {
  padding: var(--spacing-sm);
}

.filter-dropdown-section + .filter-dropdown-section {
  border-top: 1px solid var(--border-subtle);
}

.filter-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg-subtle);
  margin-bottom: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 0.75rem;
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  color: var(--fg);
  font-weight: 500;
}

.filter-tag button {
  background: none;
  border: none;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-subtle);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.15s ease;
}

.filter-tag button:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

/* Campaign Cards */
.campaign-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.campaign-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.campaign-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.campaign-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 0.25rem 0;
  line-height: 1.3;
}

.campaign-card-hashtag {
  font-size: 0.85rem;
  color: var(--fg-subtle);
  font-weight: 500;
}

.notification-badge {
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.campaign-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}

.campaign-card-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.campaign-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.progress-bar-container {
  width: 100%;
  height: 6px;
  background: var(--bg-soft);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 0.25rem;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.campaign-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Compact Campaign Cards (for "All Campaigns") */
.campaign-card-compact {
  padding: 1rem;
  gap: 0.75rem;
}

.campaign-card-compact .campaign-card-title {
  font-size: 0.95rem;
}

.campaign-card-compact .campaign-card-stats {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 0.75rem 0;
}

.campaign-card-compact .stat-value {
  font-size: 1.05rem;
}

.campaign-card-compact .stat-label {
  font-size: 0.7rem;
}

/* Platform Icons */
.platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  padding: 6px;
}

.platform-icon svg {
  width: 100%;
  height: 100%;
}

.platform-icon.instagram {
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}

.platform-icon.instagram svg {
  fill: white;
}

.platform-icon.tiktok {
  background: #000000;
}

.platform-icon.tiktok svg {
  fill: white;
}

.platform-icon.youtube {
  background: #ff0000;
}

.platform-icon.youtube svg {
  fill: white;
}

.platform-icon.twitter {
  background: #000000;
}

.platform-icon.twitter svg {
  fill: white;
}

/* Campaign Info Row (for small metadata) */
.campaign-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  font-size: 0.75rem;
  color: var(--fg-subtle);
  margin-top: 0.25rem;
}

.campaign-info-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.campaign-info-item svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.campaign-info-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.25rem;
}

/* Grid Layouts - Vertical Stack */
.campaigns-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.campaigns-grid-large {
  gap: 1rem;
}

.campaigns-grid-compact {
  gap: 0.75rem;
}

/* Compact Campaign Cards (for "All Campaigns") */
.campaign-card-compact {
  padding: 1rem;
  gap: 0.75rem;
}

.campaign-card-compact .campaign-card-title {
  font-size: 0.95rem;
}

.campaign-card-compact .campaign-card-stats {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 0.75rem 0;
}

.campaign-card-compact .stat-value {
  font-size: 1.05rem;
}

.campaign-card-compact .stat-label {
  font-size: 0.7rem;
}

.campaign-card-compact .platform-icon {
  width: 28px;
  height: 28px;
  font-size: 1rem;
}

/* Campaign Carousel */
.campaign-carousel-container {
  position: relative;
  padding: 0 3rem;
}

.campaign-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  padding: 0.5rem 0;
}

.campaign-carousel::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.campaign-carousel-item {
  min-width: 300px;
  max-width: 300px;
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
  flex-shrink: 0;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  box-shadow: var(--shadow-md);
}

.carousel-arrow:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  transform: translateY(-50%) scale(1.1);
}

.carousel-arrow-left {
  left: 0;
}

.carousel-arrow-right {
  right: 0;
}

/* Dashboard Two Column Layout */
.dashboard-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: var(--spacing-xl);
}

.dashboard-square-card {
  aspect-ratio: 1.2 / 1;
  display: flex;
  flex-direction: column;
}

.dashboard-square-card .card-header {
  flex-shrink: 0;
}

.creator-list,
.activity-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.creator-item,
.activity-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  transition: all 0.2s ease;
}

.creator-item:hover,
.activity-item:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.creator-info,
.activity-info {
  flex: 1;
  min-width: 0;
}

.creator-name,
.activity-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creator-meta,
.activity-meta {
  font-size: 0.75rem;
  color: var(--fg-subtle);
  margin-top: 0.15rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .campaigns-grid-large,
  .campaigns-grid-compact {
    grid-template-columns: 1fr;
  }

  .campaigns-search-bar {
    flex-direction: column;
  }

  .filters-button {
    width: 100%;
    justify-content: center;
  }

  .platform-icon {
    width: 24px;
    height: 24px;
    font-size: 0.95rem;
  }

  .campaign-carousel-container {
    padding: 0 2.5rem;
  }

  .campaign-carousel-item {
    min-width: 260px;
    max-width: 260px;
  }

  .carousel-arrow {
    width: 36px;
    height: 36px;
  }

  .dashboard-two-col {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .dashboard-square-card {
    aspect-ratio: auto;
    min-height: 300px;
  }
}

/* ========================================
   MOBILE POLISH - Modern Minimalist Design
   Inspired by Uber Eats, Cineplex, modern apps
   ======================================== */

/* Modern Small Buttons (Mobile-First) */
@media (max-width: 768px) {
  .btn-sm,
  .btn.btn-sm {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    min-height: 32px;
    border-radius: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  /* Compact icon buttons */
  .icon-btn-compact {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
  }

  .icon-btn-compact:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
  }

  /* Minimal connect/disconnect buttons */
  .btn-connect {
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    color: white;
    font-weight: 600;
    border: none;
    box-shadow: 0 2px 8px rgba(15, 159, 168, 0.25);
  }

  .btn-disconnect {
    padding: 0.35rem 0.75rem;
    font-size: 0.7rem;
    border-radius: 16px;
    background: transparent;
    color: var(--fg-subtle);
    border: 1px solid var(--border-subtle);
    font-weight: 500;
  }

  .btn-disconnect:hover {
    background: var(--bg-soft);
    color: var(--danger);
    border-color: var(--danger);
  }
}

/* Ultra-Clean Light Mode (Pure White) */
/* Light mode overrides removed - using semantic variables from main theme definition */

/* Clean minimal cards on mobile */
@media (max-width: 768px) {
  .card {
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .card-soft {
    border-radius: 12px;
    padding: 0.875rem;
  }

  /* Reduce visual clutter */
  .card-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

/* Modern Search/Input Fields (Mobile) */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  select,
  textarea {
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    border: 1.5px solid var(--border-subtle);
    background: var(--bg);
  }

  input:focus,
  select:focus,
  textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(15, 159, 168, 0.1);
  }
}

/* Clean Spacing & Layout (Mobile) */
@media (max-width: 768px) {
  /* Tighter spacing for mobile */
  .mb-lg {
    margin-bottom: 1rem !important;
  }

  .mb-md {
    margin-bottom: 0.75rem !important;
  }

  .gap-md {
    gap: 0.75rem !important;
  }

  .gap-sm {
    gap: 0.5rem !important;
  }

  /* Cleaner grid layouts */
  .grid {
    gap: 0.75rem;
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* Modern Pills/Tags (Mobile) */
@media (max-width: 768px) {
  .pill {
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    border-radius: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }

  .pill-accent {
    background: linear-gradient(135deg, rgba(15, 159, 168, 0.15), rgba(11, 124, 131, 0.15));
    color: var(--primary);
    border: 1px solid rgba(15, 159, 168, 0.2);
  }
}

/* Clean Status Indicators */
@media (max-width: 768px) {
  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .status-badge.verified {
    background: rgba(70, 230, 166, 0.15);
    color: var(--success);
  }

  .status-badge.pending {
    background: rgba(255, 200, 87, 0.15);
    color: var(--warning);
  }
}

/* ========================================
   TOP 4 MOBILE UX IMPROVEMENTS
   ======================================== */

/* 1. Smoother Animations & Transitions */
@media (max-width: 768px) {
  * {
    -webkit-tap-highlight-color: rgba(15, 159, 168, 0.1);
  }

  .btn,
  .card,
  input,
  select {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .btn:active {
    transform: scale(0.97);
  }
}

/* 2. Better Touch Feedback */
@media (max-width: 768px) {
  .btn:active,
  .card:active,
  a:active {
    opacity: 0.8;
  }

  /* Visual feedback for taps */
  .interactive:active {
    background: var(--bg-hover);
  }
}

/* 3. Improved Readability & Typography */
@media (max-width: 768px) {
  body {
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .text-body {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .text-sm {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .text-xs {
    font-size: 0.7rem;
    line-height: 1.3;
  }
}

/* 4. Clean Minimal Navigation */
@media (max-width: 768px) {
  .bottom-nav {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-subtle);
    backdrop-filter: blur(20px);
    padding: 0.5rem 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  }

  .nav-item {
    padding: 0.5rem;
    border-radius: 12px;
    transition: all 0.2s ease;
  }

  .nav-item.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    color: white;
  }

  .nav-item:not(.active):hover {
    background: var(--bg-hover);
  }
}

/* Light Mode - Ensure Pure White */
:root[data-theme="light"] .bottom-nav,
:root[data-theme="light"] .topbar {
  background: var(--bg-muted) !important;
  border-color: var(--border-subtle) !important;
}

:root[data-theme="light"] .nav-item:not(.active) {
  color: var(--fg-muted);
}

:root[data-theme="light"] .nav-item:not(.active):hover {
  background: var(--bg-hover) !important;
  color: var(--fg);
}

/* Prevent any dark backgrounds sneaking through */
:root[data-theme="light"] * {
  color-scheme: light;
}

:root[data-theme="light"] .bg-page,
:root[data-theme="light"] [style*="background: var(--bg)"],
:root[data-theme="light"] [style*="background-color: var(--bg)"] {
  background: var(--bg-muted) !important;
  background-color: var(--bg-muted) !important;
}


/* ========================================
   COMPREHENSIVE LIGHT MODE FIX
   Fix ALL black boxes in light mode
   ======================================== */

/* Force white backgrounds on ALL elements in light mode */
:root[data-theme="light"] {
  /* Override ALL possible dark backgrounds */
  color-scheme: light only;
}

/* Generic overrides for common elements - using semantic variables */
:root[data-theme="light"] .card,
:root[data-theme="light"] .card-soft,
:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .dropdown-menu,
:root[data-theme="light"] .popover {
  background: var(--bg-muted) !important;
  color: var(--fg) !important;
}

/* Form elements - using semantic variables */
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .form-input,
:root[data-theme="light"] .form-select,
:root[data-theme="light"] .form-textarea {
  background: var(--bg-muted) !important;
  color: var(--fg) !important;
  border-color: var(--border-subtle) !important;
}

/* Buttons - using semantic variables */
:root[data-theme="light"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success) {
  background: var(--bg-muted) !important;
  color: var(--fg) !important;
  border-color: var(--border-strong) !important;
}

/* Content areas - using semantic variables */
:root[data-theme="light"] .tab-content,
:root[data-theme="light"] .tab-pane {
  background: var(--bg) !important;
  color: var(--fg) !important;
}

/* Navigation - using semantic variables */
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .bottom-nav {
  background: var(--bg-muted) !important;
  border-color: var(--border-subtle) !important;
}

/* Page background - using semantic variables */
:root[data-theme="light"] body {
  background: var(--bg) !important;
  color: var(--fg) !important;
}

/* Text colors - semantic variables */
:root[data-theme="light"] .text-primary {
  color: var(--fg) !important;
}

:root[data-theme="light"] .text-secondary {
  color: var(--fg-muted) !important;
}

:root[data-theme="light"] .text-muted {
  color: var(--fg-subtle) !important;
}


/* ========================================
   CINEPLEX-STYLE MODERN BOTTOM NAVIGATION
   Floating, blurred, smooth with 3D depth
   ======================================== */

/* Modern Floating Bottom Nav */
@media (max-width: 768px) {
  .bottom-nav {
    /* Floating with glass morphism */
    position: fixed;
    bottom: 12px;
    left: 12px;
    right: 12px;
    height: 68px;
    
    /* Glass/frosted effect */
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* Floating shadow (3D depth) */
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.12),
      0 2px 8px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
    
    /* Rounded like a pill */
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    
    /* Smooth animations */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Safe area for notched phones */
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    
    /* Ensure it floats above content */
    z-index: 100;
  }

  /* Dark mode variant */
  :root:not([data-theme="light"]) .bottom-nav {
    background: rgba(16, 16, 32, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.4),
      0 2px 8px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  /* Navigation items container */
  .bottom-nav .row,
  .bottom-nav > div {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    padding: 8px 12px;
    height: 100%;
  }

  /* Individual nav items - Morphing icon buttons */
  .nav-item,
  .bottom-nav a,
  .bottom-nav button {
    /* Sizing */
    min-width: 64px;
    height: 48px;
    padding: 8px 12px;
    
    /* Pill shape */
    border-radius: 16px;
    
    /* Layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    
    /* Base state - transparent */
    background: transparent;
    border: none;
    color: var(--fg-muted);
    
    /* Typography */
    font-size: 0.65rem;
    font-weight: 600;
    text-decoration: none;
    
    /* Smooth morphing animation */
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Remove default styles */
    cursor: pointer;
    outline: none;
  }

  /* Icon styling */
  .nav-item .icon,
  .nav-item span:first-child,
  .bottom-nav a > *:first-child,
  .bottom-nav button > *:first-child {
    font-size: 1.3rem;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
  }

  /* Hover state - subtle lift */
  .nav-item:hover:not(.active) {
    background: rgba(0, 0, 0, 0.04);
    transform: translateY(-2px) scale(1.02);
  }

  :root:not([data-theme="light"]) .nav-item:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08);
  }

  /* Active state - Cineplex glow */
  .nav-item.active {
    /* Gradient background */
    background: var(--primary);
    color: white;
    
    /* 3D depth shadow */
    box-shadow: 
      0 4px 16px rgba(15, 159, 168, 0.4),
      0 2px 8px rgba(11, 124, 131, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    
    /* Subtle lift */
    transform: translateY(-3px) scale(1.05);
  }

  /* Active icon - enlarge and brighten */
  .nav-item.active .icon,
  .nav-item.active span:first-child {
    transform: scale(1.15);
    filter: brightness(1.2) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  }

  /* Press animation - haptic feedback simulation */
  .nav-item:active {
    transform: translateY(-1px) scale(0.96);
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Ripple effect on tap (optional enhancement) */
  .nav-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(15, 159, 168, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s, opacity 0.6s;
    opacity: 0;
    pointer-events: none;
  }

  .nav-item:active::before {
    width: 100px;
    height: 100px;
    opacity: 0.4;
    transition: 0s;
  }

  /* Badge/notification indicator */
  .nav-item .badge,
  .nav-item .notification-dot {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: #ff4444;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  /* Label text */
  .nav-item .label,
  .nav-item span:last-child {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    opacity: 0.8;
    transition: opacity 0.3s ease;
  }

  .nav-item.active .label {
    opacity: 1;
  }

  /* Smooth entrance animation */
  @keyframes navItemFadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .nav-item {
    animation: navItemFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
  }

  .nav-item:nth-child(1) { animation-delay: 0.05s; }
  .nav-item:nth-child(2) { animation-delay: 0.1s; }
  .nav-item:nth-child(3) { animation-delay: 0.15s; }
  .nav-item:nth-child(4) { animation-delay: 0.2s; }
  .nav-item:nth-child(5) { animation-delay: 0.25s; }
}

/* Morphing icon animation - outline to filled */
@media (max-width: 768px) {
  /* Define icon states */
  .nav-item .icon {
    position: relative;
  }

  /* Icon morph on activation */
  .nav-item:not(.active) .icon {
    /* Outline style */
    font-variation-settings: 'FILL' 0, 'wght' 300;
  }

  .nav-item.active .icon {
    /* Filled style */
    font-variation-settings: 'FILL' 1, 'wght' 600;
  }

  /* If using emoji/unicode icons instead of icon fonts */
  .nav-item:not(.active) {
    filter: grayscale(0.3);
  }

  .nav-item.active {
    filter: grayscale(0);
  }
}

/* ========================================
   ELASTIC MOTION & HAPTIC FEEDBACK
   ======================================== */

@media (max-width: 768px) {
  /* Add spring physics to all interactions */
  .nav-item,
  .nav-item .icon,
  .btn,
  .card {
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* Haptic-style pulse on tap */
  @keyframes hapticPulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.94); }
    100% { transform: scale(1); }
  }

  .nav-item:active,
  .btn:active {
    animation: hapticPulse 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Subtle parallax on scroll (optional) */
  .bottom-nav {
    will-change: transform, opacity;
  }
}

/* ========================================
   3D DEPTH ENHANCEMENTS (Cineplex style)
   ======================================== */

@media (max-width: 768px) {
  /* Cards with depth */
  .card {
    box-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.08),
      0 1px 2px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }

  .card:hover {
    box-shadow: 
      0 4px 16px rgba(0, 0, 0, 0.12),
      0 2px 4px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
  }

  /* Buttons with depth */
  .btn-primary {
    box-shadow: 
      0 4px 14px rgba(15, 159, 168, 0.3),
      0 2px 6px rgba(11, 124, 131, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .btn-primary:active {
    box-shadow: 
      0 2px 8px rgba(15, 159, 168, 0.3),
      0 1px 3px rgba(11, 124, 131, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  /* Input fields with depth */
  input:focus,
  select:focus,
  textarea:focus {
    box-shadow: 
      0 0 0 3px rgba(15, 159, 168, 0.1),
      0 2px 8px rgba(0, 0, 0, 0.08);
  }
}

/* ========================================
   SMOOTH SCROLL BEHAVIOR
   ======================================== */

@media (max-width: 768px) {
  html {
    scroll-behavior: smooth;
  }

  /* Prevent layout shift when bottom nav appears */
  body {
    padding-bottom: 88px; /* Bottom nav height + margin */
  }
}


/* ========================================
   MODERN VECTOR ICONS - Phosphor Icons
   Replacing emoji with professional vector icons
   ======================================== */

/* Override previous nav styling for Phosphor icons */
@media (max-width: 768px) {
  /* Bottom nav with gradient background */
  .bottom-nav {
    /* Gradient background (dark immersive theme) */
    background: linear-gradient(
      to bottom,
      rgba(20, 20, 30, 0.75) 0%,
      rgba(10, 10, 15, 0.92) 100%
    ) !important;
    
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    
    /* Enhanced depth shadow */
    box-shadow: 
      0 -2px 20px rgba(0, 0, 0, 0.3),
      0 -1px 4px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    
    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Light mode gradient */
  :root[data-theme="light"] .bottom-nav {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(248, 248, 250, 0.95) 100%
    ) !important;
    
    box-shadow: 
      0 -2px 16px rgba(0, 0, 0, 0.08),
      0 -1px 3px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  /* Navigation items - Reset for icon support */
  .bottom-nav-item,
  .bottom-nav a {
    /* Layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    
    /* Sizing */
    flex: 1;
    min-width: 64px;
    height: 56px;
    padding: 6px 8px;
    
    /* Shape */
    border-radius: 14px;
    
    /* Base state */
    background: transparent;
    border: none;
    color: rgba(156, 163, 175, 0.7); /* Soft gray */
    
    /* Typography */
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    
    /* Smooth transitions */
    transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Remove outline */
    outline: none;
    cursor: pointer;
    position: relative;
  }

  /* Phosphor Icons styling */
  .bottom-nav-item i.ph,
  .bottom-nav a i.ph {
    /* Icon size */
    font-size: 24px;
    
    /* Stroke weight (2.5px via font-weight) */
    font-weight: 300;
    
    /* Smooth transitions for morph effect */
    transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Transform origin for scaling */
    transform-origin: center;
    
    /* Filter for glow effects */
    filter: drop-shadow(0 0 0 transparent);
  }

  /* Label text */
  .bottom-nav-item span:not(.ph),
  .bottom-nav a span {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.2s ease;
  }

  /* Hover state (desktop/tablet) */
  .bottom-nav-item:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(156, 163, 175, 0.9);
    transform: translateY(-1px);
  }

  :root[data-theme="light"] .bottom-nav-item:hover:not(.active) {
    background: rgba(0, 0, 0, 0.03);
    color: rgba(75, 85, 99, 0.9);
  }

  .bottom-nav-item:hover:not(.active) i.ph {
    transform: scale(1.05);
  }

  /* Active state - GLOW MAGIC ✨ */
  .bottom-nav-item.active {
    /* Subtle background */
    background: rgba(15, 159, 168, 0.08);
    
    /* White text */
    color: #ffffff;
    
    /* Lift up slightly */
    transform: translateY(-2px);
  }

  /* Active icon - Fill + Glow */
  .bottom-nav-item.active i.ph {
    /* Switch to filled icons */
    font-weight: 700;
    
    /* Scale up 1.1x */
    transform: scale(1.1);
    
    /* Gradient glow (B066FF → FF70C3) */
    filter: drop-shadow(0 0 8px rgba(38, 188, 197, 0.6))
            drop-shadow(0 0 16px rgba(255, 112, 195, 0.4))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    
    /* Color with gradient (pseudo-element below) */
    position: relative;
  }

  /* Gradient color for active icons */
  .bottom-nav-item.active {
    background: linear-gradient(
      135deg,
      rgba(38, 188, 197, 0.12) 0%,
      rgba(255, 112, 195, 0.12) 100%
    );
  }

  /* Active label */
  .bottom-nav-item.active span {
    opacity: 1;
    font-weight: 700;
  }

  /* Glow ring underneath active item */
  .bottom-nav-item.active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--primary), var(--primary-strong));
    opacity: 0.8;
    box-shadow: 0 0 12px rgba(38, 188, 197, 0.6);
  }

  /* TAP ANIMATION - Micro-motion */
  @keyframes iconPop {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.15);
    }
    100% {
      transform: scale(1.1);
    }
  }

  .bottom-nav-item.active i.ph {
    animation: iconPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  /* Press feedback */
  .bottom-nav-item:active {
    transform: scale(0.96) translateY(0);
    transition: all 0.1s ease;
  }

  .bottom-nav-item:active i.ph {
    transform: scale(1.05);
  }

  /* Pulse glow on tap */
  @keyframes glowPulse {
    0% {
      filter: drop-shadow(0 0 0 transparent);
      opacity: 0.6;
    }
    50% {
      filter: drop-shadow(0 0 12px rgba(38, 188, 197, 0.8))
              drop-shadow(0 0 20px rgba(255, 112, 195, 0.6));
      opacity: 1;
    }
    100% {
      filter: drop-shadow(0 0 8px rgba(38, 188, 197, 0.6))
              drop-shadow(0 0 16px rgba(255, 112, 195, 0.4));
      opacity: 1;
    }
  }

  .bottom-nav-item.active i.ph {
    animation: 
      iconPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
      glowPulse 0.6s ease-out forwards;
  }

  /* Ripple effect on tap */
  .bottom-nav-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(38, 188, 197, 0.4) 0%,
      rgba(255, 112, 195, 0.2) 50%,
      transparent 100%
    );
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
  }

  .bottom-nav-item:active::after {
    width: 120px;
    height: 120px;
    opacity: 0.6;
    transition: 0s;
  }

  /* Icon morph transition - outline to filled */
  .bottom-nav-item:not(.active) i.ph {
    /* Light outline weight */
    font-weight: 300;
  }

  .bottom-nav-item.active i.ph {
    /* Bold filled weight */
    font-weight: 700;
  }

  /* Staggered entrance animation */
  @keyframes navItemSlideIn {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .bottom-nav-item {
    animation: navItemSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
  }

  .bottom-nav-item:nth-child(1) { animation-delay: 0.05s; }
  .bottom-nav-item:nth-child(2) { animation-delay: 0.1s; }
  .bottom-nav-item:nth-child(3) { animation-delay: 0.15s; }
  .bottom-nav-item:nth-child(4) { animation-delay: 0.2s; }
  .bottom-nav-item:nth-child(5) { animation-delay: 0.25s; }

  /* Ensure icons have consistent bounding box */
  .ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }

  /* Light mode adjustments */
  :root[data-theme="light"] .bottom-nav-item {
    color: rgba(107, 114, 128, 0.7);
  }

  :root[data-theme="light"] .bottom-nav-item.active {
    color: var(--fg);
    background: linear-gradient(
      135deg,
      rgba(15, 159, 168, 0.1) 0%,
      rgba(38, 188, 197, 0.1) 100%
    );
  }

  :root[data-theme="light"] .bottom-nav-item.active::before {
    background: linear-gradient(90deg, var(--primary-strong), var(--primary));
  }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
  /* Hardware acceleration for smooth animations */
  .bottom-nav-item,
  .bottom-nav-item i.ph {
    will-change: transform, filter;
  }

  /* Reduce motion for accessibility */
  @media (prefers-reduced-motion: reduce) {
    .bottom-nav-item,
    .bottom-nav-item i.ph,
    .bottom-nav-item::before,
    .bottom-nav-item::after {
      animation: none !important;
      transition: none !important;
    }
  }
}


:root[data-theme="light"] .grid-3 > *,
:root[data-theme="light"] .grid-4 > * {
  background: #ffffff !important;
}

/* ========================================
   CREATOR PROFILE MOBILE OPTIMIZATIONS
   v3.7 - CUTIE COMPACT VERSION
   ======================================== */

/* Desktop default - 80px to match current design */
.profile-avatar-custom {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    /* Add depth with shadow */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.profile-avatar-custom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder-custom {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Modern blue gradient matching design system */
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
    color: white;
    font-size: 2rem;
    font-weight: 700;
}

/* Checklist Items - Desktop */
.checklist-item-row {
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
}

.checklist-completed {
    background: var(--success-bg);
}

.checklist-incomplete {
    background: var(--bg-page);
}

.checklist-icon {
    font-size: 1.25rem;
}

.checklist-icon-completed {
    color: var(--success);
}

.checklist-icon-incomplete {
    color: var(--text-muted);
}

/* Mobile: Beautiful balanced sizing - TABLET */
@media (max-width: 768px) {
    .profile-avatar-custom {
        width: 64px;
        height: 64px;
        /* Circular on mobile for modern look */
        border-radius: var(--radius-full);
        /* Enhanced shadow on mobile for better depth */
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.08);
    }

    .avatar-placeholder-custom {
        font-size: 1.75rem;
    }

    .profile-header-card {
        padding: 1.25rem !important;
    }

    .profile-header-card .h2 {
        font-size: 1.25rem !important;
    }

    .profile-header-card .text-sm {
        font-size: 0.813rem !important;
    }

    .profile-header-card .pill {
        font-size: 0.75rem !important;
        padding: 0.313rem 0.625rem !important;
    }

    .profile-tabs-card {
        padding: 0.75rem !important;
    }

    .profile-tabs-card .btn {
        font-size: 0.813rem !important;
        padding: 0.625rem 1rem !important;
    }

    #profile-completeness-card {
        padding: 1.125rem !important;
    }

    #profile-completeness-card .card-header {
        padding-bottom: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    #profile-completeness-card .card-title {
        font-size: 0.938rem !important;
    }

    #profile-completeness-card .h3 {
        font-size: 1.375rem !important;
    }

    #profile-completeness-card .text-sm {
        font-size: 0.813rem !important;
    }

    /* Cute compact checklist items */
    .checklist-item-row {
        padding: 0.75rem !important;
    }

    .checklist-item-row span {
        font-size: 0.875rem !important;
    }

    .checklist-icon {
        font-size: 1.125rem !important;
    }

    /* Cute purple Complete buttons */
    .checklist-item-row .btn-sm {
        padding: 0.5rem 0.875rem !important;
        font-size: 0.813rem !important;
        font-weight: 600 !important;
        border-radius: var(--radius-md) !important;
        white-space: nowrap !important;
    }

    .grid.grid-3 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .grid.grid-3 .card {
        padding: 1rem !important;
    }

    .grid.grid-3 .h2 {
        font-size: 1.5rem !important;
    }

    .grid.grid-3 .text-sm {
        font-size: 0.813rem !important;
    }

    .card.mb-lg {
        margin-bottom: 1.25rem !important;
    }
}

/* Mobile: Beautiful balanced sizing - PHONE */
@media (max-width: 480px) {
    .profile-avatar-custom {
        width: 56px;
        height: 56px;
        /* Fully circular on small phones */
        border-radius: var(--radius-full);
        /* Slightly reduced shadow on smaller screens */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.06);
    }

    .avatar-placeholder-custom {
        font-size: 1.5rem;
    }

    .profile-header-card .h2 {
        font-size: 1.125rem !important;
    }

    .profile-header-card .text-sm {
        font-size: 0.75rem !important;
    }

    .profile-header-card .pill {
        font-size: 0.688rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    .profile-tabs-card .btn {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.875rem !important;
    }

    #profile-completeness-card {
        padding: 1rem !important;
    }

    #profile-completeness-card .card-title {
        font-size: 0.875rem !important;
    }

    #profile-completeness-card .h3 {
        font-size: 1.25rem !important;
    }

    /* Extra compact checklist on phone */
    .checklist-item-row {
        padding: 0.625rem !important;
    }

    .checklist-item-row span {
        font-size: 0.813rem !important;
    }

    .checklist-icon {
        font-size: 1rem !important;
    }

    /* Smaller Complete buttons on phone */
    .checklist-item-row .btn-sm {
        padding: 0.438rem 0.75rem !important;
        font-size: 0.75rem !important;
    }

    .grid.grid-3 .h2 {
        font-size: 1.25rem !important;
    }

    .grid.grid-3 .card {
        padding: 0.875rem !important;
    }
}

/* ==========================================
   MVP URGENCY BADGES
   ========================================== */

.badge-urgent {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.badge-tonight {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    animation: pulse-urgent 2s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

@keyframes pulse-urgent {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.02);
    }
}

.badge-warning {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
}

/* Montreal Branding Accent */
.montreal-accent {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Perk Card Enhancements */
.perk-card {
    position: relative;
}

.perk-card .badge-urgent,
.perk-card .badge-warning {
    position: relative;
    z-index: 2;
}

/* ==========================================
   BRAND DASHBOARD - CLAIMS LIST
   ========================================== */

.claims-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.claim-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    gap: var(--spacing-md);
}

.claim-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.claim-info {
    flex: 1;
    min-width: 0;
}

.claim-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    flex-wrap: wrap;
}

.claim-details {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.claim-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.brand-kpi-icon {
    font-size: 1.5rem;
    margin-right: var(--spacing-sm);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .claim-card {
        flex-direction: column;
        align-items: stretch;
    }

    .claim-actions {
        width: 100%;
        flex-direction: column;
    }

    .claim-actions .btn {
        width: 100%;
    }
}

/* ==========================================
   LANDING PAGE STYLES
   ========================================== */

.landing-page {
    min-height: 100vh;
}

.hero-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    padding: var(--spacing-2xl);
    min-height: 80vh;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .hero-section {
        grid-template-columns: 1fr;
        text-align: center;
        padding: var(--spacing-xl) var(--spacing-md);
        min-height: auto;
    }
}

.hero-badge {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--spacing-lg);
    color: var(--fg);
}

.hero-subtitle {
    font-size: 1.125rem;
    color: var(--fg-muted);
    margin-bottom: var(--spacing-xl);
    max-width: 480px;
}

@media (max-width: 768px) {
    .hero-subtitle {
        margin: 0 auto var(--spacing-xl);
    }
}

.hero-cta {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

@media (max-width: 768px) {
    .hero-cta {
        flex-direction: column;
    }
}

.hero-note {
    font-size: 14px;
    color: var(--fg-muted);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

@media (max-width: 768px) {
    .hero-note {
        justify-content: center;
    }
}

.hero-visual {
    display: flex;
    justify-content: center;
}

.hero-mockup {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.mockup-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-lg);
    position: relative;
    min-width: 280px;
}

.mockup-card .badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
}

.mockup-card h3 {
    margin-bottom: var(--spacing-xs);
    font-size: 1.125rem;
}

.mockup-card p {
    color: var(--fg-muted);
    margin-bottom: var(--spacing-sm);
}

/* How It Works */
.how-it-works {
    padding: var(--spacing-2xl);
    background: var(--bg-soft);
}

.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: var(--spacing-2xl);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }
}

.step-card {
    text-align: center;
    padding: var(--spacing-lg);
}

.step-number {
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    margin: 0 auto var(--spacing-md);
}

.step-card i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: var(--spacing-md);
    display: block;
}

.step-card h3 {
    margin-bottom: var(--spacing-sm);
}

.step-card p {
    color: var(--fg-muted);
    font-size: 14px;
}

/* For Venues */
.for-venues {
    padding: var(--spacing-2xl);
    max-width: 800px;
    margin: 0 auto;
}

.for-venues .lead {
    font-size: 1.25rem;
    color: var(--fg-muted);
    margin-bottom: var(--spacing-xl);
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin-bottom: var(--spacing-xl);
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    font-size: 1.0625rem;
}

.benefits-list i {
    color: var(--success);
    font-size: 1.25rem;
}

/* Footer CTA */
.footer-cta {
    text-align: center;
    padding: var(--spacing-2xl);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
    color: white;
}

.footer-cta h2 {
    color: white;
    margin-bottom: var(--spacing-sm);
}

.footer-cta p {
    opacity: 0.9;
    margin-bottom: var(--spacing-xl);
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

@media (max-width: 480px) {
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

.footer-cta .btn-primary {
    background: white;
    color: var(--primary);
}

.footer-cta .btn-outline {
    border-color: white;
    color: white;
}

.footer-cta .btn-outline:hover {
    background: white;
    color: var(--primary);
}

/* Montreal Branding Accent */
.montreal-accent {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}