/* =====================================================
   ARCA ACADEMY - PREMIUM DARK MODE DESIGN SYSTEM
   Unified visual identity for Landing & Member Area
   Version: 2.1 | December 2025
   ===================================================== */

/* ===========================================
   1. DESIGN TOKENS (CSS Custom Properties)
   =========================================== */
:root {
  /* Brand Colors - Core Palette */
  --aa-primary: #667eea;
  --aa-primary-rgb: 102, 126, 234;
  --aa-secondary: #764ba2;
  --aa-secondary-rgb: 118, 75, 162;
  --aa-accent: #a855f7;
  --aa-accent-rgb: 168, 85, 247;
  
  /* Dark Mode Base - Slightly transparent for gradient visibility */
  --aa-dark-deep: #0a0a0f;
  --aa-dark-base: #12121a;
  --aa-dark-surface: rgba(26, 26, 46, 0.7);
  --aa-dark-surface-solid: #1a1a2e;
  --aa-dark-elevated: rgba(37, 37, 66, 0.8);
  --aa-dark-elevated-solid: #252542;
  --aa-dark-border: rgba(255, 255, 255, 0.1);
  
  /* Gradients */
  --aa-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --aa-gradient-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  --aa-gradient-glow: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
  --aa-gradient-hero: linear-gradient(180deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
  
  /* Text Colors */
  --aa-text-primary: #ffffff;
  --aa-text-secondary: rgba(255, 255, 255, 0.85);
  --aa-text-muted: rgba(255, 255, 255, 0.6);
  --aa-text-subtle: rgba(255, 255, 255, 0.4);
  
  /* Glass Effect */
  --aa-glass-bg: rgba(255, 255, 255, 0.05);
  --aa-glass-border: rgba(255, 255, 255, 0.1);
  --aa-glass-blur: blur(20px);
  
  /* Shadows & Glows */
  --aa-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --aa-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --aa-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
  --aa-glow-primary: 0 0 30px rgba(102, 126, 234, 0.3);
  --aa-glow-accent: 0 0 30px rgba(168, 85, 247, 0.3);
  
  /* Spacing Scale */
  --aa-space-xs: 0.25rem;
  --aa-space-sm: 0.5rem;
  --aa-space-md: 1rem;
  --aa-space-lg: 1.5rem;
  --aa-space-xl: 2rem;
  --aa-space-2xl: 3rem;
  --aa-space-3xl: 4rem;
  
  /* Border Radius */
  --aa-radius-sm: 8px;
  --aa-radius-md: 12px;
  --aa-radius-lg: 16px;
  --aa-radius-xl: 24px;
  --aa-radius-full: 9999px;
  
  /* Typography */
  --aa-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --aa-font-size-xs: 0.75rem;
  --aa-font-size-sm: 0.875rem;
  --aa-font-size-base: 1rem;
  --aa-font-size-lg: 1.125rem;
  --aa-font-size-xl: 1.25rem;
  --aa-font-size-2xl: 1.5rem;
  --aa-font-size-3xl: 2rem;
  --aa-font-size-4xl: 2.5rem;
  --aa-font-size-5xl: 3.5rem;
  
  /* Transitions */
  --aa-transition-fast: 150ms ease;
  --aa-transition-base: 250ms ease;
  --aa-transition-slow: 400ms ease;
  --aa-transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ===========================================
   2. GLASSMORPHISM NAVBAR
   =========================================== */

/* Reset Bootstrap navbar styles */
.navbar.aa-navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  padding: var(--aa-space-md) 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: all var(--aa-transition-base);
}

/* Glass effect when scrolled */
.navbar.aa-navbar.scrolled {
  background: rgba(10, 10, 15, 0.8) !important;
  backdrop-filter: var(--aa-glass-blur);
  -webkit-backdrop-filter: var(--aa-glass-blur);
  border-bottom: 1px solid var(--aa-glass-border) !important;
  box-shadow: var(--aa-shadow-md) !important;
}

/* Force glass on member area (always scrolled look) */
.navbar.aa-navbar.aa-navbar-solid {
  background: rgba(10, 10, 15, 0.95) !important;
  backdrop-filter: var(--aa-glass-blur);
  -webkit-backdrop-filter: var(--aa-glass-blur);
  border-bottom: 1px solid var(--aa-glass-border) !important;
}

/* Navbar container */
.navbar.aa-navbar .container {
  max-width: 1280px;
}

/* Logo styling */
.navbar.aa-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--aa-space-sm);
  font-weight: 700;
  font-size: var(--aa-font-size-lg);
  color: var(--aa-text-primary) !important;
  text-decoration: none;
  transition: opacity var(--aa-transition-fast);
}

.navbar.aa-navbar .navbar-brand:hover {
  opacity: 0.9;
}

.navbar.aa-navbar .navbar-brand img {
  width: 36px;
  height: 36px;
  border-radius: var(--aa-radius-sm);
  box-shadow: var(--aa-shadow-sm);
}

/* Nav links */
.navbar.aa-navbar .nav-link {
  color: var(--aa-text-secondary) !important;
  font-weight: 500;
  font-size: var(--aa-font-size-sm);
  padding: var(--aa-space-sm) var(--aa-space-md) !important;
  border-radius: var(--aa-radius-sm);
  transition: all var(--aa-transition-fast);
  position: relative;
}

.navbar.aa-navbar .nav-link:hover {
  color: var(--aa-text-primary) !important;
  background: var(--aa-glass-bg);
}

.navbar.aa-navbar .nav-link.active {
  color: var(--aa-text-primary) !important;
}

.navbar.aa-navbar .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--aa-gradient-primary);
  border-radius: var(--aa-radius-full);
}

/* Nav buttons */
.navbar.aa-navbar .btn-aa-outline {
  background: transparent;
  border: 1px solid var(--aa-glass-border);
  color: var(--aa-text-primary);
  padding: var(--aa-space-sm) var(--aa-space-lg);
  border-radius: var(--aa-radius-full);
  font-weight: 600;
  font-size: var(--aa-font-size-sm);
  transition: all var(--aa-transition-base);
}

.navbar.aa-navbar .btn-aa-outline:hover {
  background: var(--aa-glass-bg);
  border-color: var(--aa-primary);
  color: var(--aa-text-primary);
}

.navbar.aa-navbar .btn-aa-primary {
  background: var(--aa-gradient-primary);
  border: none;
  color: white;
  padding: var(--aa-space-sm) var(--aa-space-lg);
  border-radius: var(--aa-radius-full);
  font-weight: 600;
  font-size: var(--aa-font-size-sm);
  box-shadow: var(--aa-glow-primary);
  transition: all var(--aa-transition-base);
}

.navbar.aa-navbar .btn-aa-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(102, 126, 234, 0.5);
  color: white;
}

/* Dropdown styling */
.navbar.aa-navbar .dropdown-menu {
  background: rgba(20, 20, 35, 0.95);
  backdrop-filter: var(--aa-glass-blur);
  -webkit-backdrop-filter: var(--aa-glass-blur);
  border: 1px solid var(--aa-glass-border);
  border-radius: var(--aa-radius-lg);
  box-shadow: var(--aa-shadow-lg);
  padding: var(--aa-space-sm);
  min-width: 200px;
}

.navbar.aa-navbar .dropdown-item {
  color: var(--aa-text-secondary);
  padding: var(--aa-space-sm) var(--aa-space-md);
  border-radius: var(--aa-radius-sm);
  font-size: var(--aa-font-size-sm);
  transition: all var(--aa-transition-fast);
}

.navbar.aa-navbar .dropdown-item:hover {
  background: var(--aa-glass-bg);
  color: var(--aa-text-primary);
  transform: translateX(4px);
}

.navbar.aa-navbar .dropdown-item i {
  width: 20px;
  opacity: 0.7;
}

.navbar.aa-navbar .dropdown-divider {
  border-color: var(--aa-dark-border);
  margin: var(--aa-space-xs) 0;
}

/* User avatar in navbar */
.navbar.aa-navbar .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--aa-radius-full);
  border: 2px solid var(--aa-glass-border);
  object-fit: cover;
}

.navbar.aa-navbar .user-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: var(--aa-radius-full);
  background: var(--aa-gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--aa-font-size-sm);
  color: white;
}

/* Notification badges */
.navbar.aa-navbar .notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  background: #ef4444;
  color: white;
  border-radius: var(--aa-radius-full);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

/* Mobile toggler */
.navbar.aa-navbar .navbar-toggler {
  border: 1px solid var(--aa-glass-border);
  padding: var(--aa-space-sm);
  border-radius: var(--aa-radius-sm);
}

.navbar.aa-navbar .navbar-toggler:focus {
  box-shadow: none;
  outline: 2px solid var(--aa-primary);
  outline-offset: 2px;
}

.navbar.aa-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* ===========================================
   3. MEMBER AREA - PREMIUM DARK THEME
   =========================================== */

/* Body offset for fixed navbar */
body.aa-dark-theme {
  padding-top: 72px;
  background: var(--aa-gradient-hero);
  background-attachment: fixed;
  color: var(--aa-text-primary);
  min-height: 100vh;
}

/* Member Hero Section */
.aa-member-hero {
  background: var(--aa-gradient-dark);
  padding: var(--aa-space-3xl) var(--aa-space-lg);
  position: relative;
  overflow: hidden;
}

/* Animated background elements */
.aa-member-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 20s ease-in-out infinite;
}

.aa-member-hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(118, 75, 162, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 25s ease-in-out infinite reverse;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(10deg); }
}

/* Hero Content */
.aa-hero-content {
  position: relative;
  z-index: 10;
  max-width: 800px;
  margin: 0 auto;
}

.aa-greeting {
  font-size: var(--aa-font-size-lg);
  font-weight: 400;
  color: var(--aa-text-muted);
  margin-bottom: var(--aa-space-xs);
}

.aa-greeting-name {
  font-size: var(--aa-font-size-3xl);
  font-weight: 800;
  background: var(--aa-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--aa-space-lg);
}

/* Journey Banner - Premium Card */
.aa-journey-banner {
  background: var(--aa-gradient-glow);
  border: 1px solid var(--aa-glass-border);
  border-radius: var(--aa-radius-xl);
  padding: var(--aa-space-xl);
  display: flex;
  align-items: center;
  gap: var(--aa-space-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  transition: all var(--aa-transition-base);
}

.aa-journey-banner:hover {
  transform: translateY(-4px);
  box-shadow: var(--aa-glow-primary);
  border-color: rgba(102, 126, 234, 0.3);
}

/* Glow effect on banner */
.aa-journey-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.5), transparent);
}

.aa-journey-icon {
  width: 64px;
  height: 64px;
  background: var(--aa-gradient-primary);
  border-radius: var(--aa-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--aa-font-size-2xl);
  color: white;
  box-shadow: var(--aa-glow-primary);
  flex-shrink: 0;
}

.aa-journey-content {
  flex: 1;
}

.aa-journey-title {
  font-size: var(--aa-font-size-lg);
  font-weight: 700;
  color: var(--aa-text-primary);
  margin-bottom: var(--aa-space-xs);
}

.aa-journey-subtitle {
  font-size: var(--aa-font-size-sm);
  color: var(--aa-text-muted);
  margin: 0;
}

.aa-journey-action {
  background: var(--aa-gradient-primary);
  border: none;
  color: white;
  padding: var(--aa-space-sm) var(--aa-space-xl);
  border-radius: var(--aa-radius-full);
  font-weight: 600;
  font-size: var(--aa-font-size-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--aa-space-sm);
  transition: all var(--aa-transition-base);
  box-shadow: var(--aa-glow-primary);
}

.aa-journey-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(102, 126, 234, 0.5);
  color: white;
}

/* Stats Grid */
.aa-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--aa-space-md);
  margin-top: var(--aa-space-xl);
}

.aa-stat-card {
  background: var(--aa-glass-bg);
  border: 1px solid var(--aa-glass-border);
  border-radius: var(--aa-radius-lg);
  padding: var(--aa-space-lg);
  text-align: center;
  transition: all var(--aa-transition-base);
}

.aa-stat-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(102, 126, 234, 0.3);
}

.aa-stat-value {
  font-size: var(--aa-font-size-3xl);
  font-weight: 800;
  background: var(--aa-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--aa-space-xs);
}

.aa-stat-label {
  font-size: var(--aa-font-size-sm);
  color: var(--aa-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* ===========================================
   4. PREMIUM CARDS
   =========================================== */

.aa-content-section {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--aa-space-xl) var(--aa-space-lg);
}

.aa-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--aa-space-lg);
  padding-bottom: var(--aa-space-md);
  border-bottom: 1px solid var(--aa-dark-border);
}

.aa-section-title {
  font-size: var(--aa-font-size-lg);
  font-weight: 700;
  color: var(--aa-text-primary);
  display: flex;
  align-items: center;
  gap: var(--aa-space-sm);
  margin: 0;
}

.aa-section-title i {
  color: var(--aa-primary);
}

.aa-section-link {
  color: var(--aa-primary);
  font-size: var(--aa-font-size-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--aa-transition-fast);
}

.aa-section-link:hover {
  color: var(--aa-accent);
}

/* Feature Card */
.aa-card {
  background: var(--aa-dark-surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--aa-dark-border);
  border-radius: var(--aa-radius-xl);
  padding: var(--aa-space-xl);
  transition: all var(--aa-transition-base);
  position: relative;
  overflow: hidden;
}

.aa-card:hover {
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateY(-4px);
  box-shadow: var(--aa-shadow-lg);
}

/* Card with glow border */
.aa-card-glow {
  position: relative;
}

.aa-card-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--aa-gradient-primary);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--aa-transition-base);
}

.aa-card-glow:hover::before {
  opacity: 1;
}

.aa-card-glow > * {
  position: relative;
  z-index: 1;
}

/* Card Grid */
.aa-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--aa-space-lg);
}

/* Vertical Feature Card */
.aa-feature-card {
  background: var(--aa-dark-surface);
  border: 1px solid var(--aa-dark-border);
  border-radius: var(--aa-radius-xl);
  overflow: hidden;
  transition: all var(--aa-transition-base);
  text-decoration: none;
  color: inherit;
  display: block;
}

.aa-feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(102, 126, 234, 0.4);
  box-shadow: var(--aa-glow-primary);
}

.aa-feature-card-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-bottom: 1px solid var(--aa-dark-border);
}

.aa-feature-card-body {
  padding: var(--aa-space-lg);
}

.aa-feature-card-icon {
  width: 48px;
  height: 48px;
  background: var(--aa-gradient-glow);
  border: 1px solid var(--aa-glass-border);
  border-radius: var(--aa-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--aa-font-size-xl);
  margin-bottom: var(--aa-space-md);
}

.aa-feature-card-title {
  font-size: var(--aa-font-size-lg);
  font-weight: 700;
  color: var(--aa-text-primary);
  margin-bottom: var(--aa-space-sm);
}

.aa-feature-card-description {
  font-size: var(--aa-font-size-sm);
  color: var(--aa-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Locked Card State */
.aa-card-locked {
  filter: grayscale(0.8);
  opacity: 0.6;
  pointer-events: none;
}

.aa-card-locked .aa-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}

.aa-card-locked .aa-lock-icon {
  width: 48px;
  height: 48px;
  background: var(--aa-dark-elevated);
  border-radius: var(--aa-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--aa-font-size-xl);
  color: var(--aa-text-muted);
}


/* ===========================================
   5. FOOTER - DARK THEME
   =========================================== */

.aa-footer {
  background: var(--aa-dark-deep);
  border-top: 1px solid var(--aa-dark-border);
  padding: var(--aa-space-lg) 0;
  margin-top: auto;
}

.aa-footer-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--aa-space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.aa-footer-text {
  color: var(--aa-text-muted);
  font-size: var(--aa-font-size-sm);
}

.aa-footer-tagline {
  color: var(--aa-text-subtle);
  font-size: var(--aa-font-size-sm);
}


/* ===========================================
   6. BUTTONS - PREMIUM STYLE
   =========================================== */

.aa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aa-space-sm);
  padding: var(--aa-space-sm) var(--aa-space-xl);
  border-radius: var(--aa-radius-full);
  font-weight: 600;
  font-size: var(--aa-font-size-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--aa-transition-base);
}

.aa-btn-primary {
  background: var(--aa-gradient-primary);
  color: white;
  box-shadow: var(--aa-glow-primary);
}

.aa-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(102, 126, 234, 0.5);
  color: white;
}

.aa-btn-secondary {
  background: var(--aa-glass-bg);
  border: 1px solid var(--aa-glass-border);
  color: var(--aa-text-primary);
}

.aa-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--aa-primary);
  color: white;
}

.aa-btn-ghost {
  background: transparent;
  color: var(--aa-text-secondary);
}

.aa-btn-ghost:hover {
  color: var(--aa-text-primary);
  background: var(--aa-glass-bg);
}

.aa-btn-lg {
  padding: var(--aa-space-md) var(--aa-space-2xl);
  font-size: var(--aa-font-size-base);
}


/* ===========================================
   7. UTILITIES
   =========================================== */

.aa-text-gradient {
  background: var(--aa-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.aa-glass {
  background: var(--aa-glass-bg);
  backdrop-filter: var(--aa-glass-blur);
  -webkit-backdrop-filter: var(--aa-glass-blur);
  border: 1px solid var(--aa-glass-border);
}

.aa-glow {
  box-shadow: var(--aa-glow-primary);
}

.aa-surface {
  background: var(--aa-dark-surface);
  border: 1px solid var(--aa-dark-border);
  border-radius: var(--aa-radius-lg);
}


/* ===========================================
   8. RESPONSIVE ADJUSTMENTS
   =========================================== */

@media (max-width: 768px) {
  :root {
    --aa-font-size-5xl: 2.5rem;
    --aa-font-size-4xl: 2rem;
    --aa-font-size-3xl: 1.5rem;
  }
  
  .aa-member-hero {
    padding: var(--aa-space-2xl) var(--aa-space-md);
  }
  
  .aa-journey-banner {
    flex-direction: column;
    text-align: center;
    gap: var(--aa-space-md);
  }
  
  .aa-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .aa-content-section {
    padding: var(--aa-space-lg) var(--aa-space-md);
  }
  
  .aa-card-grid {
    grid-template-columns: 1fr;
  }
  
  .navbar.aa-navbar .navbar-collapse {
    background: rgba(10, 10, 15, 0.98);
    backdrop-filter: var(--aa-glass-blur);
    border-radius: var(--aa-radius-lg);
    margin-top: var(--aa-space-md);
    padding: var(--aa-space-md);
    border: 1px solid var(--aa-glass-border);
  }
}


/* ===========================================
   9. ANIMATIONS
   =========================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.aa-animate-fadeInUp {
  animation: fadeInUp 0.5s ease forwards;
}

.aa-animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* Skeleton loading state */
.aa-skeleton {
  background: linear-gradient(90deg, var(--aa-dark-surface) 25%, var(--aa-dark-elevated) 50%, var(--aa-dark-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--aa-radius-sm);
}


/* ===========================================
   10. OVERRIDE BOOTSTRAP FOR DARK THEME
   =========================================== */

body.aa-dark-theme .card {
  background: var(--aa-dark-surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--aa-dark-border);
  color: var(--aa-text-primary);
}

body.aa-dark-theme .card-header {
  background: var(--aa-dark-elevated);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--aa-dark-border);
  color: var(--aa-text-primary);
}

body.aa-dark-theme .form-control {
  background: var(--aa-dark-elevated);
  border-color: var(--aa-dark-border);
  color: var(--aa-text-primary);
}

body.aa-dark-theme .form-control:focus {
  background: var(--aa-dark-surface);
  border-color: var(--aa-primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
  color: var(--aa-text-primary);
}

body.aa-dark-theme .form-control::placeholder {
  color: var(--aa-text-subtle);
}

body.aa-dark-theme .btn-light {
  background: var(--aa-glass-bg);
  border-color: var(--aa-glass-border);
  color: var(--aa-text-primary);
}

body.aa-dark-theme .btn-light:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--aa-text-primary);
}

body.aa-dark-theme .modal-content {
  background: var(--aa-dark-surface);
  border-color: var(--aa-dark-border);
  color: var(--aa-text-primary);
}

body.aa-dark-theme .modal-header {
  border-color: var(--aa-dark-border);
}

body.aa-dark-theme .modal-footer {
  border-color: var(--aa-dark-border);
}

body.aa-dark-theme .dropdown-menu {
  background: rgba(20, 20, 35, 0.98);
  border-color: var(--aa-dark-border);
}

body.aa-dark-theme .dropdown-item {
  color: var(--aa-text-secondary);
}

body.aa-dark-theme .dropdown-item:hover {
  background: var(--aa-glass-bg);
  color: var(--aa-text-primary);
}

body.aa-dark-theme .text-muted {
  color: var(--aa-text-muted) !important;
}

body.aa-dark-theme .border {
  border-color: var(--aa-dark-border) !important;
}

body.aa-dark-theme hr {
  border-color: var(--aa-dark-border);
  opacity: 1;
}

/* ===========================================
   FIX: Cards e elementos com fundo branco/claro
   Texto preto para legibilidade
   =========================================== */

/* Cards Bootstrap com fundo claro - texto preto */
body.aa-dark-theme .card,
body.aa-dark-theme .bg-white,
body.aa-dark-theme .bg-light,
body.aa-dark-theme [style*="background: white"],
body.aa-dark-theme [style*="background-color: white"],
body.aa-dark-theme [style*="background:#fff"],
body.aa-dark-theme [style*="background: #fff"] {
  color: #1a1a2e !important;
}

body.aa-dark-theme .card h1,
body.aa-dark-theme .card h2,
body.aa-dark-theme .card h3,
body.aa-dark-theme .card h4,
body.aa-dark-theme .card h5,
body.aa-dark-theme .card h6,
body.aa-dark-theme .card p,
body.aa-dark-theme .card span,
body.aa-dark-theme .card label,
body.aa-dark-theme .card td,
body.aa-dark-theme .card th,
body.aa-dark-theme .bg-white h1,
body.aa-dark-theme .bg-white h2,
body.aa-dark-theme .bg-white h3,
body.aa-dark-theme .bg-white h4,
body.aa-dark-theme .bg-white h5,
body.aa-dark-theme .bg-white h6,
body.aa-dark-theme .bg-white p,
body.aa-dark-theme .bg-white span,
body.aa-dark-theme .bg-white label,
body.aa-dark-theme .bg-light h1,
body.aa-dark-theme .bg-light h2,
body.aa-dark-theme .bg-light h3,
body.aa-dark-theme .bg-light h4,
body.aa-dark-theme .bg-light h5,
body.aa-dark-theme .bg-light h6,
body.aa-dark-theme .bg-light p,
body.aa-dark-theme .bg-light span,
body.aa-dark-theme .bg-light label {
  color: #1a1a2e !important;
}

/* Texto muted dentro de cards */
body.aa-dark-theme .card .text-muted,
body.aa-dark-theme .bg-white .text-muted,
body.aa-dark-theme .bg-light .text-muted {
  color: #6c757d !important;
}

/* Form inputs dentro de cards */
body.aa-dark-theme .card input,
body.aa-dark-theme .card select,
body.aa-dark-theme .card textarea {
  color: #1a1a2e !important;
  background-color: #fff !important;
}

/* Botões dentro de cards - manter texto visível */
body.aa-dark-theme .card .btn-primary,
body.aa-dark-theme .card .btn-success,
body.aa-dark-theme .card .btn-danger,
body.aa-dark-theme .card .btn-warning,
body.aa-dark-theme .card .btn-info {
  color: #fff !important;
}

body.aa-dark-theme .card .btn-outline-primary,
body.aa-dark-theme .card .btn-outline-secondary {
  color: var(--aa-primary) !important;
}

body.aa-dark-theme .card .btn-outline-primary:hover,
body.aa-dark-theme .card .btn-outline-secondary:hover {
  color: #fff !important;
}

/* ===========================================
   FIX: Navbar sólida (não transparente)
   =========================================== */

.navbar.aa-navbar,
.navbar.aa-navbar.scrolled,
.navbar.aa-navbar.aa-navbar-solid {
  background: linear-gradient(135deg, #0a0a0f 0%, #12121a 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--aa-dark-border) !important;
  box-shadow: var(--aa-shadow-md) !important;
}

/* ===========================================
   FIX: Footer sólido (não transparente)
   =========================================== */

.aa-footer,
footer,
.footer {
  background: linear-gradient(135deg, #0a0a0f 0%, #12121a 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid var(--aa-dark-border) !important;
}

/* Tabelas dentro de cards */
body.aa-dark-theme .card table,
body.aa-dark-theme .card .table {
  color: #1a1a2e !important;
}

body.aa-dark-theme .card .table thead th {
  color: #1a1a2e !important;
  border-color: #dee2e6 !important;
}

body.aa-dark-theme .card .table td {
  color: #1a1a2e !important;
  border-color: #dee2e6 !important;
}

/* Badges dentro de cards */
body.aa-dark-theme .card .badge {
  color: #fff !important;
}

/* Links dentro de cards */
body.aa-dark-theme .card a:not(.btn) {
  color: var(--aa-primary) !important;
}

body.aa-dark-theme .card a:not(.btn):hover {
  color: var(--aa-secondary) !important;
}

/* ===========================================
   CONTRASTE GLOBAL - TEXTO LEGÍVEL
   =========================================== */

/* REGRA 1: Todo texto em fundo escuro = BRANCO */
body.aa-dark-theme,
body.aa-dark-theme .aa-main-content,
body.aa-dark-theme .container-fluid {
  color: #fff !important;
}

body.aa-dark-theme h1,
body.aa-dark-theme h2,
body.aa-dark-theme h3,
body.aa-dark-theme h4,
body.aa-dark-theme h5,
body.aa-dark-theme h6 {
  color: #fff !important;
}

body.aa-dark-theme p,
body.aa-dark-theme span:not(.badge),
body.aa-dark-theme label,
body.aa-dark-theme li {
  color: rgba(255, 255, 255, 0.9) !important;
}

body.aa-dark-theme .text-muted {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* REGRA 2: Texto em fundos BRANCOS/CLAROS = PRETO */
.card,
.card-body,
.bg-white,
.bg-light,
.modal-content,
.dropdown-menu,
.timeline-card,
.timeline-card-body,
.journey-card-content,
.journey-card {
  color: #1a1a2e !important;
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4, .bg-white h5, .bg-white h6,
.bg-light h1, .bg-light h2, .bg-light h3, .bg-light h4, .bg-light h5, .bg-light h6,
.modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4, .modal-content h5, .modal-content h6,
.timeline-card h3, .timeline-card-body h3 {
  color: #1a1a2e !important;
}

.card p, .card span:not(.badge), .card label,
.bg-white p, .bg-white span:not(.badge), .bg-white label,
.bg-light p, .bg-light span:not(.badge), .bg-light label,
.modal-content p, .modal-content span:not(.badge), .modal-content label,
.timeline-card p, .timeline-card-body p {
  color: #4a5568 !important;
}

/* Journey/Trilha - Cards */
.journey-card {
  background: #fff !important;
}

.journey-card-content {
  /* Este fica sobre o gradiente escuro, então texto branco */
  color: #fff !important;
}

.journey-card-content h3,
.journey-card-content .journey-card-title {
  color: #fff !important;
}

.journey-card-content p,
.journey-card-content .journey-card-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Timeline cards na trilha - fundo branco = texto preto */
.timeline-card-body {
  background: #fff !important;
}

.timeline-card-body h3 {
  color: #1a1a2e !important;
}

.timeline-card-body p {
  color: #6c757d !important;
}

/* Hero sections - fundo escuro = texto branco */
.journey-hero,
.journey-header,
.hero-section,
.aa-hero {
  color: #fff !important;
}

.journey-hero h1,
.journey-header h1,
.hero-section h1,
.aa-hero h1 {
  color: #fff !important;
}

.journey-hero p,
.journey-header p,
.hero-section p,
.aa-hero p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Botão CTA branco com texto escuro */
.journey-cta {
  background: #fff !important;
  color: #1a1a2e !important;
}

.journey-cta:hover {
  background: #f8f9fa !important;
  color: #1a1a2e !important;
}

/* Alerts e mensagens */
.alert {
  color: inherit;
}

.alert-success {
  color: #0f5132 !important;
}

.alert-danger {
  color: #842029 !important;
}

.alert-warning {
  color: #664d03 !important;
}

.alert-info {
  color: #055160 !important;
}