/*
==============================================
* MYGURUKUL - STYLES
* Modern, kid/teen-friendly, warm scholarly palette
* Responsive, accessible, production-ready
==============================================
*/

/* ============================================
   CSS VARIABLES - THEME & DESIGN TOKENS
   ============================================ */
   @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

:root {
  /* Typography - Refined Comic Book Style */
  --font-main: 'Inter', sans-serif;
  --font-devanagari: 'Noto Serif Devanagari', serif;
  --font-comic-heading: 'Poppins', sans-serif;
  --font-comic-body: 'Nunito', sans-serif;
  --font-comic-accent: 'Fredoka One', cursive;
  
  /* Colors - Enhanced Harmonious Palette */
  --saffron: #FF8A50;
  --saffron-light: #FFB085;
  --saffron-dark: #E66B35;
  --indigo: #6366F1;
  --indigo-light: #818CF8;
  --indigo-dark: #4F46E5;
  
  /* Gamification Colors - Kid-Friendly */
  --comic-blue: #4ECDC4;
  --comic-pink: #FF6B6B;
  --comic-purple: #A8E6CF;
  --comic-yellow: #FFD93D;
  --comic-orange: #FFA07A;
  --comic-green: #98D8C8;
  
  /* Primary Color Palette */
  --primary-blue: #2563EB;
  --primary-blue-light: #3B82F6;
  --primary-blue-dark: #1E40AF;
  --primary-purple: #7C3AED;
  --primary-purple-light: #8B5CF6;
  --primary-purple-dark: #6D28D9;
  --primary-pink: #DB2777;
  --primary-pink-light: #EC4899;
  --primary-pink-dark: #BE185D;
  
  /* Accent Colors */
  --accent-teal: #0D9488;
  --accent-emerald: #059669;
  --accent-amber: #D97706;
  --accent-orange: #EA580C;
  
  /* Neutral Colors */
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-tertiary: #6B7280;
  --text-light: #9CA3AF;
  
  /* Background Colors */
  --bg-soft-blue: #EFF6FF;
  --bg-soft-purple: #F5F3FF;
  --bg-soft-pink: #FDF2F8;
  --bg-soft-teal: #F0FDFA;
  --bg-light: #F9FAFB;
  --bg-white: #FFFFFF;
  --warm-neutral: #8B7355;
  --warm-neutral-light: #A0896B;
  --warm-neutral-dark: #6B5A3F;
  
  /* Background Colors - Glassmorphism Ready */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F9FA;
  --bg-tertiary: #F1F3F5;
  --bg-glass: rgba(255, 255, 255, 0.8);
  --bg-glass-dark: rgba(255, 255, 255, 0.15);
  
  /* Text Colors - Fixed for Better Contrast */
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-tertiary: #6B7280;
  --text-on-bg-secondary: #1F2937;
  --text-on-bg-tertiary: #4B5563;
  
  /* Accent Colors */
  --accent-primary: var(--saffron);
  --accent-secondary: var(--indigo);
  --success: #22C55E;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #3B82F6;
  
  /* Gamification Enhancements */
  --xp-glow: rgba(255, 138, 80, 0.4);
  --badge-glow: rgba(99, 102, 241, 0.4);
  --level-up-glow: rgba(34, 197, 94, 0.5);
  --streak-fire: #FF6B6B;
  
  /* Glassmorphism Properties - Light Theme */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
  --backdrop-blur: blur(12px);
  --backdrop-blur-strong: blur(20px);
  
  /* Spacing Scale - Enhanced */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  
  /* Section Spacing */
  --section-spacing: var(--space-4xl);
  --section-spacing-mobile: var(--space-2xl);
  
  /* Typography Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  
  /* Transitions - Enhanced */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-smooth: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Z-index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* Dark Theme - Enhanced Contrast */
[data-theme="dark"] {
  --bg-primary: #000000;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #262626;
  --text-primary: #FFFFFF;
  --text-secondary: #E5E7EB;
  --text-tertiary: #D1D5DB;
  --text-on-bg-secondary: #F3F4F6;
  --text-on-bg-tertiary: #E5E7EB;
  --bg-glass: rgba(0, 0, 0, 0.7);
  --bg-glass-dark: rgba(0, 0, 0, 0.4);
  --glass-bg: rgba(26, 26, 26, 0.85);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-comic-body);
  font-weight: 400;
  font-size: 16px;
  background: 
    linear-gradient(135deg, 
      #FEF9F3 0%, 
      #F0F9FF 25%, 
      #F5F3FF 50%, 
      #F0FDF4 75%, 
      #FFFBEB 100%);
  background-size: 400% 400%;
  animation: gradientShift 30s ease infinite;
  background-attachment: fixed;
  color: var(--text-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--transition-base), color var(--transition-base);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Subtle Texture Overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(251, 191, 36, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(236, 72, 153, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

[data-theme="dark"] body {
  background: linear-gradient(135deg, #000000 0%, #0a0a0a 25%, #141414 50%, #1a1a1a 75%, #000000 100%);
  background-size: 400% 400%;
  color: #ffffff;
}

[data-theme="dark"] body::before {
  background: 
    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ============================================
   HEADER STYLES
   ============================================ */
.site-header {
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  padding: var(--space-md) 0;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  box-shadow: var(--glass-shadow);
  transition: all var(--transition-base);
  backdrop-filter: var(--backdrop-blur-strong);
  -webkit-backdrop-filter: var(--backdrop-blur-strong);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .site-header {
  background: var(--glass-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  position: relative;
  z-index: 10;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 700;
  font-size: var(--text-xl);
  transition: transform var(--transition-fast);
  position: relative;
  z-index: 10;
}

.logo-container:hover {
  transform: scale(1.02);
}

.logo-container:hover .brand-name {
  transform: translateY(-1px) scale(1.01);
}

.logo-img {
  height: 40px;
  width: auto;
}

.brand-name {
  /* Glass morphism container */
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border-radius: 12px;
  position: relative;
  z-index: 10;
  
  /* Glass effect background - using pseudo-element */
  background: transparent;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  
  /* Glass border */
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  
  /* Gradient text */
  background-image: linear-gradient(
    135deg,
    #ff6b35 0%,
    #f7931e 25%,
    #ff6b9d 50%,
    #c77dff 75%,
    #7b2ff7 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  /* Typography */
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: 0.5px;
  text-shadow: none;
  
  /* Ensure visibility */
  color: transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glass background using pseudo-element */
.brand-name::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  z-index: -1;
  pointer-events: none;
}

/* Hover effect for glass morphism */
.brand-name:hover {
  transform: translateY(-1px);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.4);
}

.brand-name:hover::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.15) 100%
  );
}

/* Dark theme adjustments */
[data-theme="dark"] .brand-name {
  /* Darker gradient colors for dark theme */
  background-image: linear-gradient(
    135deg,
    #cc5529 0%,
    #c67a1a 25%,
    #cc5a7a 50%,
    #a064cc 75%,
    #6325c7 100%
  );
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .brand-name::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
}

[data-theme="dark"] .brand-name:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .brand-name:hover::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex: 1;
  justify-content: center;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  position: relative;
}

.nav-link:hover,
.nav-link.active {
  color: var(--accent-primary);
  background: rgba(255, 119, 0, 0.1);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--accent-primary);
  transition: width var(--transition-base);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 80%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.theme-toggle,
.mobile-menu-btn {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  cursor: pointer;
  color: var(--text-primary);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: var(--glass-shadow);
}

.theme-toggle:hover,
.mobile-menu-btn:hover {
  background: var(--accent-primary);
  color: white;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 119, 0, 0.3);
}

.mobile-menu-btn:active {
  transform: scale(0.95);
}

.mobile-menu-btn svg {
  transition: transform var(--transition-fast);
}

.mobile-menu-btn.active svg {
  transform: rotate(90deg);
}

.mobile-menu-btn {
  display: none;
  z-index: 1001;
  position: relative;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile Menu Sidebar */
.nav-links.mobile-open {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur-strong);
  -webkit-backdrop-filter: var(--backdrop-blur-strong);
  border-left: 1px solid var(--glass-border);
  box-shadow: -4px 0 40px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--space-3xl) var(--space-xl);
  gap: var(--space-md);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

[data-theme="dark"] .nav-links.mobile-open {
  box-shadow: -4px 0 40px rgba(0, 0, 0, 0.9);
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Mobile Menu Close Button */
.mobile-menu-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: all var(--transition-fast);
  z-index: 1001;
  box-shadow: var(--glass-shadow);
}

.nav-links.mobile-open .mobile-menu-close {
  display: flex;
}

.mobile-menu-close:hover {
  background: var(--error);
  color: white;
  transform: rotate(90deg);
}

.mobile-menu-close svg {
  width: 24px;
  height: 24px;
}

/* Mobile Menu Links Styling */
.nav-links.mobile-open .nav-link {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nav-links.mobile-open .nav-link::after {
  display: none;
}

.nav-links.mobile-open .btn-logout {
  margin-top: var(--space-xl);
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--error);
  color: white;
  border-radius: var(--radius-md);
  font-weight: 600;
}

.nav-links.mobile-open .btn-logout:hover {
  background: #dc2626;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ============================================
   MAIN CONTENT - Enhanced
   ============================================ */
.main-content {
  min-height: calc(100vh - 200px);
  padding: var(--space-3xl) 0 var(--space-4xl);
  position: relative;
  z-index: 1;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  position: relative;
  z-index: 1;
}

/* Section Spacing */
section {
  margin-bottom: var(--section-spacing);
}

section:last-child {
  margin-bottom: 0;
}

.view-container {
  animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.view-container.hidden {
  display: none;
}

/* Removed - using fadeInUp instead */

/* ============================================
   SCHOOL SELECTOR
   ============================================ */
.school-selector-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.school-selector-header h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

.school-selector-header p {
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

.search-box {
  max-width: 600px;
  margin: 0 auto var(--space-2xl);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-xl);
  padding: var(--space-md) var(--space-lg);
  transition: all var(--transition-smooth);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
  animation: fadeInScale 0.6s ease-out;
}

.search-box:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 
    0 0 0 4px rgba(255, 119, 0, 0.25), 
    0 16px 48px rgba(255, 119, 0, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px) scale(1.02);
  background: rgba(255, 255, 255, 1);
  backdrop-filter: var(--backdrop-blur-strong);
  -webkit-backdrop-filter: var(--backdrop-blur-strong);
  animation: searchBoxPulse 2s ease-in-out infinite;
}

@keyframes searchBoxPulse {
  0%, 100% {
    box-shadow: 
      0 0 0 4px rgba(255, 119, 0, 0.25), 
      0 16px 48px rgba(255, 119, 0, 0.2),
      0 4px 16px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 
      0 0 0 6px rgba(255, 119, 0, 0.3), 
      0 16px 48px rgba(255, 119, 0, 0.25),
      0 4px 16px rgba(0, 0, 0, 0.1);
  }
}

[data-theme="dark"] .search-box:focus-within {
  background: rgba(0, 0, 0, 0.9);
  box-shadow: 0 0 0 4px rgba(255, 119, 0, 0.2), 0 12px 32px rgba(0, 0, 0, 0.9);
}

.search-box svg {
  color: var(--text-secondary);
  flex-shrink: 0;
}

.search-box input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: var(--text-base);
  color: var(--text-primary);
  font-family: inherit;
}

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

.schools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-xl);
}

.school-card {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  cursor: pointer;
  transition: all var(--transition-base);
  text-align: left;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}

.school-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, var(--saffron), var(--indigo));
  transform: scaleY(0);
  transition: transform var(--transition-base);
}

.school-card:hover::before {
  transform: scaleY(1);
}

.school-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  border-color: var(--accent-primary);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--backdrop-blur-strong);
  -webkit-backdrop-filter: var(--backdrop-blur-strong);
}

[data-theme="dark"] .school-card:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: var(--accent-primary);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.9);
}

.school-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.school-card .school-id {
  font-size: var(--text-sm);
  color: var(--accent-primary);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.school-card .school-location {
  color: var(--text-on-bg-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ============================================
   ROLE SELECTION
   ============================================ */
.role-selection-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.role-selection-header h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-md);
}

.role-selection-header p {
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

.role-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.role-card {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  cursor: pointer;
  transition: all var(--transition-base);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}

.role-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 119, 0, 0.05), rgba(75, 0, 130, 0.05));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.role-card:hover::after {
  opacity: 1;
}

.role-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
  border-color: var(--accent-primary);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--backdrop-blur-strong);
  -webkit-backdrop-filter: var(--backdrop-blur-strong);
}

[data-theme="dark"] .role-card:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: var(--accent-primary);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.9);
}

.role-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--saffron), var(--indigo));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: var(--space-sm);
}

.role-card h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-sm);
}

.role-card p {
  color: var(--text-secondary);
  font-size: var(--text-base);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary,
.btn-secondary,
.btn-back {
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-base);
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--saffron), var(--saffron-dark));
  color: white;
  box-shadow: 
    0 4px 16px rgba(255, 119, 0, 0.4),
    0 2px 8px rgba(255, 119, 0, 0.2);
  position: relative;
  overflow: hidden;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-primary:hover::before {
  width: 300px;
  height: 300px;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 8px 24px rgba(255, 119, 0, 0.5),
    0 4px 12px rgba(255, 119, 0, 0.3);
  background: linear-gradient(135deg, var(--saffron-light), var(--saffron));
}

.btn-primary:active {
  transform: translateY(-1px);
  box-shadow: 
    0 4px 12px rgba(255, 119, 0, 0.4),
    0 2px 6px rgba(255, 119, 0, 0.2);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 119, 0, 0.3);
}

.btn-secondary {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
  position: relative;
  box-shadow: var(--glass-shadow);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--backdrop-blur-strong);
  -webkit-backdrop-filter: var(--backdrop-blur-strong);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .btn-secondary:hover {
  background: rgba(0, 0, 0, 0.9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.9);
}

.btn-secondary:active {
  transform: translateY(0);
}

.btn-back {
  background: transparent;
  color: var(--text-secondary);
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-lg);
}

.btn-back:hover {
  color: var(--accent-primary);
}

/* ============================================
   DASHBOARD
   ============================================ */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-3xl);
  flex-wrap: wrap;
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
  position: relative;
}

.dashboard-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--accent-primary) 50%, 
    transparent 100%);
  opacity: 0.3;
}

.dashboard-header h1 {
  font-size: var(--text-4xl);
  font-weight: 800;
  margin-bottom: var(--space-md);
  line-height: 1.2;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.subtitle {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.6;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-4xl);
}

.stat-card {
  background: var(--bg-white);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 2px solid;
  border-image: linear-gradient(135deg, 
    var(--primary-blue) 0%, 
    var(--primary-purple) 50%, 
    var(--primary-pink) 100%) 1;
  border-radius: 24px;
  padding: var(--space-2xl);
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 8px 32px rgba(37, 99, 235, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  cursor: pointer;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, 
    var(--comic-blue) 0%, 
    var(--comic-purple) 50%, 
    var(--comic-pink) 100%);
  transform: scaleX(0);
  transition: transform var(--transition-base);
  border-radius: 16px 16px 0 0;
}

.stat-card:hover::before {
  transform: scaleX(1);
}

.stat-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 16px 48px rgba(99, 102, 241, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  border-image-source: linear-gradient(135deg, 
    var(--comic-purple) 0%, 
    var(--comic-pink) 50%, 
    var(--comic-blue) 100%);
}

.stat-card:active {
  transform: translateY(-4px) scale(1);
}

[data-theme="dark"] .stat-card:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: var(--accent-primary);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.9);
}

.stat-icon {
  font-size: 3.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  position: relative;
  z-index: 1;
}

.stat-content h3 {
  font-family: var(--font-comic-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  color: #1E40AF;
  position: relative;
  z-index: 1;
}

.stat-content p {
  font-family: var(--font-comic-body);
  color: var(--text-on-bg-secondary);
  font-size: var(--text-base);
  font-weight: 600;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .stat-content p {
  color: var(--text-on-bg-secondary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ============================================
   COURSES
   ============================================ */
.courses-section {
  margin-top: var(--section-spacing);
}

.courses-section h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: var(--space-2xl);
  color: var(--text-primary);
  line-height: 1.3;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-2xl);
}

.course-card {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.95) 0%, 
    rgba(168, 85, 247, 0.95) 50%, 
    rgba(236, 72, 153, 0.95) 100%);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-smooth);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 
    0 8px 32px rgba(139, 92, 246, 0.3),
    0 4px 16px rgba(168, 85, 247, 0.2);
  color: #FFFFFF;
}

/* Ensure text colors are always visible */
.course-card * {
  color: inherit;
}

.course-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.course-card:hover::after {
  opacity: 1;
}

.course-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 20px 60px rgba(139, 92, 246, 0.5),
    0 12px 40px rgba(168, 85, 247, 0.4),
    0 4px 16px rgba(236, 72, 153, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 1) 0%, 
    rgba(168, 85, 247, 1) 50%, 
    rgba(236, 72, 153, 1) 100%);
  backdrop-filter: var(--backdrop-blur-strong);
  -webkit-backdrop-filter: var(--backdrop-blur-strong);
  color: #FFFFFF !important;
}

.course-card:hover .course-content h3 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.course-card:hover .course-content p {
  color: rgba(255, 255, 255, 0.95) !important;
}

.course-card:hover .course-meta {
  color: rgba(255, 255, 255, 0.9) !important;
  border-top-color: rgba(255, 255, 255, 0.3) !important;
}

.course-card:active {
  transform: translateY(-6px) scale(1);
}

[data-theme="dark"] .course-card {
  background: linear-gradient(135deg, 
    rgba(124, 58, 237, 0.95) 0%, 
    rgba(139, 92, 246, 0.95) 50%, 
    rgba(219, 39, 119, 0.95) 100%);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .course-card:hover {
  background: linear-gradient(135deg, 
    rgba(124, 58, 237, 1) 0%, 
    rgba(139, 92, 246, 1) 50%, 
    rgba(219, 39, 119, 1) 100%) !important;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 20px 60px rgba(124, 58, 237, 0.6),
    0 12px 40px rgba(139, 92, 246, 0.5),
    0 4px 16px rgba(219, 39, 119, 0.4);
  color: #FFFFFF !important;
}

[data-theme="dark"] .course-card:hover .course-content h3 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .course-card:hover .course-content p {
  color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .course-card:hover .course-meta {
  color: rgba(255, 255, 255, 0.9) !important;
  border-top-color: rgba(255, 255, 255, 0.3) !important;
}

.course-thumbnail {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.8) 0%, 
    rgba(168, 85, 247, 0.8) 50%, 
    rgba(236, 72, 153, 0.8) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--text-4xl);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1);
}

.course-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-content {
  padding: var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  position: relative;
  z-index: 1;
}

.course-content h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
  color: #FFFFFF;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.course-content p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
  flex: 1;
  font-weight: 500;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.course-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  font-size: var(--text-sm);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Dark theme course content */
[data-theme="dark"] .course-content {
  color: #FFFFFF;
}

[data-theme="dark"] .course-content h3 {
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .course-content p {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .course-meta {
  color: rgba(255, 255, 255, 0.95);
  border-top-color: rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.progress-bar {
  width: 100%;
  height: 10px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-sm);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--saffron), var(--indigo));
  transition: width var(--transition-base);
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ============================================
   MODULES
   ============================================ */
.module-card {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.9) 0%, 
    rgba(168, 85, 247, 0.9) 50%, 
    rgba(236, 72, 153, 0.9) 100%);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 8px 24px rgba(139, 92, 246, 0.25),
    0 4px 12px rgba(168, 85, 247, 0.15);
  color: #FFFFFF;
}

.module-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.8) 0%, 
    rgba(255, 255, 255, 0.4) 100%);
  transform: scaleY(0);
  transition: transform var(--transition-base);
  border-radius: 0 4px 4px 0;
}

.module-card:hover::before {
  transform: scaleY(1);
}

.module-card:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 16px 40px rgba(139, 92, 246, 0.4),
    0 8px 20px rgba(168, 85, 247, 0.3),
    0 4px 12px rgba(236, 72, 153, 0.2);
  transform: translateX(6px) translateY(-4px);
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 1) 0%, 
    rgba(168, 85, 247, 1) 50%, 
    rgba(236, 72, 153, 1) 100%);
  backdrop-filter: var(--backdrop-blur-strong);
  -webkit-backdrop-filter: var(--backdrop-blur-strong);
}

[data-theme="dark"] .module-card {
  background: linear-gradient(135deg, 
    rgba(124, 58, 237, 0.9) 0%, 
    rgba(139, 92, 246, 0.9) 50%, 
    rgba(219, 39, 119, 0.9) 100%);
  border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .module-card:hover {
  background: linear-gradient(135deg, 
    rgba(124, 58, 237, 1) 0%, 
    rgba(139, 92, 246, 1) 50%, 
    rgba(219, 39, 119, 1) 100%);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 16px 40px rgba(124, 58, 237, 0.5),
    0 8px 20px rgba(139, 92, 246, 0.4),
    0 4px 12px rgba(219, 39, 119, 0.3);
}

.module-card.locked {
  opacity: 0.6;
  cursor: not-allowed;
  background: linear-gradient(135deg, 
    rgba(107, 114, 128, 0.7) 0%, 
    rgba(75, 85, 99, 0.7) 100%);
}

.module-card.completed {
  border-color: rgba(34, 197, 94, 0.6);
  background: linear-gradient(135deg, 
    rgba(34, 197, 94, 0.85) 0%, 
    rgba(16, 185, 129, 0.85) 100%);
  box-shadow: 
    0 8px 24px rgba(34, 197, 94, 0.3),
    0 4px 12px rgba(16, 185, 129, 0.2);
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

.module-header h3 {
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.module-number {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.module-status {
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.module-status.completed {
  background: rgba(34, 197, 94, 0.3);
  border-color: rgba(34, 197, 94, 0.5);
  color: #FFFFFF;
}

.module-status.locked {
  background: rgba(107, 114, 128, 0.3);
  border-color: rgba(107, 114, 128, 0.5);
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   QUIZ & ASSIGNMENT
   ============================================ */
.quiz-container,
.assignment-container {
  max-width: 800px;
  margin: 0 auto;
}

.question-card {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  box-shadow: var(--glass-shadow);
}

.question-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-lg);
}

.option {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  box-shadow: var(--glass-shadow);
}

.option::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.option:hover {
  border-color: var(--accent-primary);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--backdrop-blur-strong);
  -webkit-backdrop-filter: var(--backdrop-blur-strong);
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .option:hover {
  background: rgba(0, 0, 0, 0.9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.9);
}

.option.selected::before {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: inset 0 0 0 4px white;
}

.option.selected {
  border-color: var(--accent-primary);
  background: rgba(255, 119, 0, 0.1);
}

.option.correct {
  border-color: var(--success);
  background: rgba(34, 197, 94, 0.1);
}

.option.incorrect {
  border-color: var(--error);
  background: rgba(239, 68, 68, 0.1);
}

/* ============================================
   FORUM
   ============================================ */
.forum-container {
  max-width: 1000px;
  margin: 0 auto;
}

.forum-post {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  box-shadow: var(--glass-shadow);
}

.forum-post.pinned {
  border-color: var(--accent-primary);
  background: rgba(255, 119, 0, 0.05);
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.post-author {
  font-weight: 600;
  color: var(--text-primary);
}

.post-date {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.post-content {
  color: var(--text-primary);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.post-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

/* ============================================
   MODAL
   ============================================ */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  padding: var(--space-lg);
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur-strong);
  -webkit-backdrop-filter: var(--backdrop-blur-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--glass-shadow);
  animation: modalSlideIn 0.3s ease;
}

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

.modal-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: var(--text-2xl);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  box-shadow: var(--glass-shadow);
}

.modal-close:hover {
  background: var(--error);
  color: white;
}

/* ============================================
   CERTIFICATE
   ============================================ */
.certificate {
  text-align: center;
  padding: var(--space-3xl);
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur-strong);
  -webkit-backdrop-filter: var(--backdrop-blur-strong);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

.certificate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--saffron), var(--indigo));
}

.certificate h1 {
  font-size: var(--text-4xl);
  color: var(--indigo);
  margin-bottom: var(--space-xl);
  font-family: var(--font-devanagari);
}

.certificate h2 {
  font-size: var(--text-2xl);
  color: var(--saffron);
  margin-bottom: var(--space-lg);
}

.certificate p {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.certificate-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-2xl);
}

/* ============================================
   TABS - Enhanced
   ============================================ */
.dashboard-tabs {
  display: flex;
  gap: var(--space-sm);
  border-bottom: 2px solid var(--glass-border);
  margin-bottom: var(--space-2xl);
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 -2px 0 rgba(255, 119, 0, 0.1);
  overflow-x: auto;
  scrollbar-width: thin;
}

[data-theme="dark"] .dashboard-tabs {
  background: var(--glass-bg);
  border-bottom-color: var(--glass-border);
}

.dashboard-tabs.scrollable-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dashboard-tabs.scrollable-tabs::-webkit-scrollbar {
  height: 6px;
}

.dashboard-tabs.scrollable-tabs::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #FF6B6B, #4ECDC4);
  border-radius: var(--radius-full);
}

.enhanced-tabs {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

[data-theme="dark"] .enhanced-tabs {
  background: var(--glass-bg);
}

.tab-btn {
  padding: var(--space-md) var(--space-lg);
  min-height: 48px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-on-bg-secondary);
  transition: all var(--transition-smooth);
  font-family: inherit;
  font-size: var(--text-sm);
  position: relative;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-width: 80px;
}

.tab-btn span:not(.tab-icon) {
  font-size: var(--text-xs);
  font-weight: 600;
  color: inherit;
  line-height: 1.2;
  text-align: center;
}

.tab-icon {
  font-size: var(--text-lg);
  transition: transform var(--transition-base);
}

.tab-btn:hover .tab-icon {
  transform: scale(1.2) rotate(5deg);
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--accent-primary);
  transition: width var(--transition-base);
}

.tab-btn:hover {
  color: var(--accent-primary) !important;
  background: linear-gradient(135deg, rgba(255, 119, 0, 0.15), rgba(99, 102, 241, 0.15)) !important;
  transform: translateY(-2px);
}

.tab-btn:hover span:not(.tab-icon) {
  color: var(--accent-primary) !important;
}

.tab-btn.active {
  color: var(--accent-primary) !important;
  background: linear-gradient(135deg, rgba(255, 119, 0, 0.2), rgba(99, 102, 241, 0.2)) !important;
  box-shadow: 0 4px 12px rgba(255, 119, 0, 0.3);
  border-color: var(--accent-primary);
}

.tab-btn.active span:not(.tab-icon) {
  color: var(--accent-primary) !important;
  font-weight: 700;
}

/* Dark theme for tabs */
[data-theme="dark"] .tab-btn {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .tab-btn span:not(.tab-icon) {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .tab-btn:hover {
  color: var(--accent-primary) !important;
  background: linear-gradient(135deg, rgba(255, 119, 0, 0.2), rgba(99, 102, 241, 0.2)) !important;
}

[data-theme="dark"] .tab-btn:hover span:not(.tab-icon) {
  color: var(--accent-primary) !important;
}

[data-theme="dark"] .tab-btn.active {
  color: var(--accent-primary) !important;
  background: linear-gradient(135deg, rgba(255, 119, 0, 0.25), rgba(99, 102, 241, 0.25)) !important;
}

[data-theme="dark"] .tab-btn.active span:not(.tab-icon) {
  color: var(--accent-primary) !important;
}

.tab-btn.active::after {
  width: 100%;
}

.tab-btn.active .tab-icon {
  animation: tabIconPulse 2s ease-in-out infinite;
}

@keyframes tabIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.tab-content {
  display: none;
  margin-top: var(--space-2xl);
}

.tab-content.active {
  display: block;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-top: 1px solid var(--glass-border);
  padding: var(--space-3xl) 0 var(--space-xl);
  margin-top: var(--space-4xl);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

[data-theme="dark"] .site-footer {
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.8);
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.footer-section h3,
.footer-section h4 {
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: var(--space-sm);
}

.footer-section a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-section a:hover {
  color: var(--accent-primary);
}

.footer-bottom {
  text-align: center;
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet Styles */
@media (max-width: 1024px) and (min-width: 769px) {
  .header-container {
    padding: 0 var(--space-lg);
  }

  .container {
    padding: 0 var(--space-lg);
  }

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

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

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

  .dashboard-tabs {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .tab-btn {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
  }
}

/* Mobile Styles */
@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex;
  }

  .nav-links:not(.mobile-open) {
    display: none;
  }

  .header-container {
    padding: 0 var(--space-md);
  }

  .container {
    padding: 0 var(--space-md);
  }

  .main-content {
    padding: var(--space-xl) 0;
  }

  .school-selector-header h1,
  .role-selection-header h1,
  .dashboard-header h1 {
    font-size: var(--text-2xl);
    line-height: 1.2;
  }

  .school-selector-header p,
  .role-selection-header p {
    font-size: var(--text-base);
  }

  .schools-grid,
  .courses-grid,
  .role-cards {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .stat-card {
    padding: var(--space-lg);
    flex-direction: column;
    text-align: center;
    gap: var(--space-md);
  }

  .stat-icon {
    font-size: var(--text-2xl);
  }

  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .dashboard-tabs {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    flex-wrap: nowrap;
    padding-bottom: var(--space-xs);
  }

  .dashboard-tabs::-webkit-scrollbar {
    height: 4px;
  }

  .dashboard-tabs::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: var(--radius-full);
  }

  .tab-btn {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .certificate-actions {
    flex-direction: column;
    gap: var(--space-md);
  }

  .certificate-actions button {
    width: 100%;
  }

  .search-box {
    padding: var(--space-sm) var(--space-md);
  }

  .search-box input {
    font-size: var(--text-sm);
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .section-header button {
    width: 100%;
  }

  .modal-content {
    padding: var(--space-xl);
    max-width: 95vw;
    max-height: 90vh;
  }

  .course-thumbnail {
    height: 150px;
  }

  .role-card {
    padding: var(--space-xl);
  }

  .role-icon {
    width: 60px;
    height: 60px;
  }

  .role-card h2 {
    font-size: var(--text-xl);
  }

  .btn-primary,
  .btn-secondary {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-base);
    width: 100%;
  }

  .class-code-input {
    flex-direction: column;
    width: 100%;
  }

  .class-code-input input,
  .class-code-input button {
    width: 100%;
  }
}

/* Small Mobile Styles */
@media (max-width: 480px) {
  .header-container {
    padding: 0 var(--space-sm);
  }

  .container {
    padding: 0 var(--space-sm);
  }

  .main-content {
    padding: var(--space-lg) 0;
  }

  .school-selector-header h1,
  .role-selection-header h1,
  .dashboard-header h1 {
    font-size: var(--text-xl);
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .stat-card {
    padding: var(--space-md);
  }

  .teacher-stats-overview {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    padding: 0;
  }

  .teacher-stat-card {
    padding: var(--space-lg);
    min-height: 100px;
  }

  .dashboard-tabs {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-xs);
  }

  .tab-btn {
    padding: var(--space-sm) var(--space-md);
    min-width: 70px;
    min-height: 60px;
    font-size: var(--text-xs);
  }

  .tab-icon {
    font-size: var(--text-base);
  }

  .tab-btn span:not(.tab-icon) {
    font-size: 0.65rem;
    line-height: 1.1;
  }

  .modal-content {
    padding: var(--space-lg);
    max-width: 100vw;
    border-radius: var(--radius-md);
    margin: var(--space-md);
  }

  .school-card,
  .course-card,
  .role-card {
    padding: var(--space-lg);
  }

  .logo-img {
    height: 32px;
  }

  .brand-name {
    font-size: var(--text-lg);
    padding: 0.4rem 1rem;
    border-radius: 10px;
  }

  .theme-toggle,
  .mobile-menu-btn {
    padding: var(--space-xs);
    width: 36px;
    height: 36px;
  }

  .nav-links.mobile-open {
    width: 280px;
    padding: var(--space-2xl) var(--space-lg);
  }

  .search-box {
    padding: var(--space-sm);
  }

  .search-box svg {
    width: 18px;
    height: 18px;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
*:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip link for screen readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent-primary);
  color: white;
  padding: var(--space-md);
  text-decoration: none;
  z-index: 10000;
}

.skip-link:focus {
  top: 0;
}

/* ============================================
   NEW COMPONENTS - ENHANCED FEATURES
   ============================================ */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--glass-border);
  position: relative;
}

.section-header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-primary), transparent);
  transition: width var(--transition-base);
}

.section-header:hover::after {
  width: 100%;
}

.section-header h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.class-code-input {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.class-code-input input {
  padding: var(--space-md);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  box-shadow: var(--glass-shadow);
  color: var(--text-primary);
}

.student-signin-form,
.exam-generator-form {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--glass-shadow);
}

.student-signin-form label,
.exam-generator-form label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 600;
  color: var(--text-primary);
}

/* These are now handled by the global input styles above */
.student-signin-form input,
.exam-generator-form input,
.exam-generator-form select {
  /* Inherits from global input styles */
}

.notes-section {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-top: var(--space-2xl);
  box-shadow: var(--glass-shadow);
}

.notes-section textarea {
  width: 100%;
  min-height: 200px;
  /* Inherits from global textarea styles */
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(0, 0, 0, 0.15);
  font-weight: 500;
}

.submission-card {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  margin-bottom: var(--space-lg);
  transition: all var(--transition-base);
  box-shadow: var(--glass-shadow);
}

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

.generated-exam {
  background: var(--bg-primary);
  border: 2px solid var(--accent-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.exam-question {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  margin: var(--space-lg) 0;
}

.at-risk-students {
  margin-top: var(--space-2xl);
}

.chart-container {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
  box-shadow: var(--glass-shadow);
}

.chart-container canvas {
  max-width: 100%;
  height: auto;
}

.analytics-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* Modal enhancements */
.modal-content form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Modal inputs inherit from global styles but with enhanced visibility */
.modal-content input[type="text"],
.modal-content input[type="email"],
.modal-content input[type="number"],
.modal-content input[type="password"],
.modal-content input[type="date"],
.modal-content input[type="datetime-local"],
.modal-content input[type="tel"],
.modal-content select,
.modal-content textarea {
  background: var(--glass-bg) !important;
  border: 2px solid var(--glass-border) !important;
  color: var(--text-primary) !important;
  font-weight: 500;
  transition: all var(--transition-base);
}

.modal-content input[type="text"]::placeholder,
.modal-content input[type="email"]::placeholder,
.modal-content input[type="number"]::placeholder,
.modal-content input[type="password"]::placeholder,
.modal-content input[type="date"]::placeholder,
.modal-content input[type="datetime-local"]::placeholder,
.modal-content input[type="tel"]::placeholder,
.modal-content textarea::placeholder {
  color: var(--text-tertiary) !important;
  opacity: 0.7;
}

.modal-content input[type="text"]:focus,
.modal-content input[type="email"]:focus,
.modal-content input[type="number"]:focus,
.modal-content input[type="password"]:focus,
.modal-content input[type="date"]:focus,
.modal-content input[type="datetime-local"]:focus,
.modal-content input[type="tel"]:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  background: var(--glass-bg) !important;
  border-color: var(--accent-primary) !important;
  color: var(--text-primary) !important;
  box-shadow: 
    0 0 0 4px rgba(255, 119, 0, 0.2),
    0 8px 24px rgba(255, 119, 0, 0.25);
  outline: none;
}

/* Dark theme for modal inputs */
[data-theme="dark"] .modal-content input[type="text"],
[data-theme="dark"] .modal-content input[type="email"],
[data-theme="dark"] .modal-content input[type="number"],
[data-theme="dark"] .modal-content input[type="password"],
[data-theme="dark"] .modal-content input[type="date"],
[data-theme="dark"] .modal-content input[type="datetime-local"],
[data-theme="dark"] .modal-content input[type="tel"],
[data-theme="dark"] .modal-content select,
[data-theme="dark"] .modal-content textarea {
  background: rgba(26, 26, 26, 0.95) !important;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .modal-content input[type="text"]::placeholder,
[data-theme="dark"] .modal-content input[type="email"]::placeholder,
[data-theme="dark"] .modal-content input[type="number"]::placeholder,
[data-theme="dark"] .modal-content input[type="password"]::placeholder,
[data-theme="dark"] .modal-content input[type="date"]::placeholder,
[data-theme="dark"] .modal-content input[type="datetime-local"]::placeholder,
[data-theme="dark"] .modal-content input[type="tel"]::placeholder,
[data-theme="dark"] .modal-content textarea::placeholder {
  color: #B0B0B0 !important;
}

[data-theme="dark"] .modal-content input[type="text"]:focus,
[data-theme="dark"] .modal-content input[type="email"]:focus,
[data-theme="dark"] .modal-content input[type="number"]:focus,
[data-theme="dark"] .modal-content input[type="password"]:focus,
[data-theme="dark"] .modal-content input[type="date"]:focus,
[data-theme="dark"] .modal-content input[type="datetime-local"]:focus,
[data-theme="dark"] .modal-content input[type="tel"]:focus,
[data-theme="dark"] .modal-content select:focus,
[data-theme="dark"] .modal-content textarea:focus {
  background: rgba(26, 26, 26, 1) !important;
  border-color: var(--accent-primary) !important;
  color: #FFFFFF !important;
}

/* Override inline styles in HTML - ensure all modal inputs are styled correctly */
.modal-content input[style*="border"],
.modal-content select[style*="border"],
.modal-content textarea[style*="border"] {
  border: 2px solid var(--glass-border) !important;
}

[data-theme="dark"] .modal-content input[style*="border"],
[data-theme="dark"] .modal-content select[style*="border"],
[data-theme="dark"] .modal-content textarea[style*="border"] {
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
}

/* Override inline background colors */
.modal-content select[style*="background: white"],
.modal-content select[style*="background:white"] {
  background: var(--glass-bg) !important;
}

[data-theme="dark"] .modal-content select[style*="background: white"],
[data-theme="dark"] .modal-content select[style*="background:white"] {
  background: rgba(26, 26, 26, 0.95) !important;
  color: #FFFFFF !important;
}

/* Ensure labels are visible in modals */
.modal-content label {
  color: var(--text-primary) !important;
  font-weight: 600;
}

[data-theme="dark"] .modal-content label {
  color: #FFFFFF !important;
}

/* Modal content text colors */
.modal-content p {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .modal-content p {
  color: var(--text-on-bg-secondary) !important;
}

.modal-content h2 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .modal-content h2 {
  color: #FFFFFF !important;
}

/* Enrollment link modal */
#enrollmentLinkInput {
  font-family: monospace;
  font-size: var(--text-sm);
  word-break: break-all;
}

/* Loading spinner */
#generateExamSpinner {
  display: inline-block;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Copy button feedback */
#copyEnrollmentLink.copied {
  background: var(--success);
  color: white;
}

/* At-risk student card */
.at-risk-student-card {
  padding: var(--space-md);
  margin: var(--space-sm) 0;
  background: var(--bg-secondary);
  border-left: 4px solid var(--error);
  border-radius: var(--radius-md);
}

/* Enhanced forum markdown */
.forum-post .post-content strong {
  font-weight: 700;
  color: var(--text-primary);
}

.forum-post .post-content em {
  font-style: italic;
}

.forum-post .post-content a {
  color: var(--accent-primary);
  text-decoration: underline;
}

.forum-post .post-content a:hover {
  color: var(--saffron-dark);
}

/* Responsive enhancements */
@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .class-code-input {
    flex-direction: column;
    width: 100%;
  }

  .class-code-input input,
  .class-code-input button {
    width: 100%;
  }

  .student-signin-form,
  .exam-generator-form {
    padding: var(--space-lg);
  }

  .chart-container canvas {
    width: 100%;
  }

  .modal-content {
    padding: var(--space-lg);
    max-width: 95vw;
  }
}

/* ============================================
   ANIMATIONS & MICRO-INTERACTIONS
   ============================================ */
@keyframes confetti {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(720deg);
    opacity: 0;
  }
}

.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--saffron);
  animation: confetti 3s ease-out forwards;
  z-index: 10000;
}

/* Progress animation */
@keyframes progressPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.progress-fill.animating {
  animation: progressPulse 1s ease-in-out;
}

/* Badge animation */
@keyframes badgeBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: linear-gradient(135deg, var(--saffron), var(--indigo));
  color: white;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  animation: badgeBounce 0.5s ease;
}

/* ============================================
   PDF VIEWER STYLES - Professional & Engaging
   ============================================ */
.pdf-viewer-modal {
  z-index: 1060;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.pdf-viewer-modal.active {
  opacity: 1;
  visibility: visible;
}

.pdf-viewer-modal .modal-content {
  max-width: 95vw;
  width: 1000px;
  max-height: 95vh;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.98) 0%, 
    rgba(168, 85, 247, 0.98) 50%, 
    rgba(236, 72, 153, 0.98) 100%);
  box-shadow: 
    0 30px 60px rgba(139, 92, 246, 0.4),
    0 15px 30px rgba(168, 85, 247, 0.3),
    0 5px 15px rgba(236, 72, 153, 0.2);
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Ensure modal content background updates with theme */
[data-theme="dark"] .pdf-viewer-modal .modal-content {
  background: linear-gradient(135deg, 
    rgba(124, 58, 237, 0.98) 0%, 
    rgba(139, 92, 246, 0.98) 50%, 
    rgba(219, 39, 119, 0.98) 100%) !important;
  border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="light"] .pdf-viewer-modal .modal-content,
:not([data-theme]) .pdf-viewer-modal .modal-content {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.98) 0%, 
    rgba(168, 85, 247, 0.98) 50%, 
    rgba(236, 72, 153, 0.98) 100%) !important;
}

.pdf-viewer-header {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 1) 0%, 
    rgba(168, 85, 247, 1) 50%, 
    rgba(236, 72, 153, 1) 100%);
  color: white;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.pdf-viewer-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pdf-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.5rem;
  border-radius: var(--radius-md);
}

.pdf-brand-info {
  display: flex;
  flex-direction: column;
}

.pdf-brand-name {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: white;
  letter-spacing: -0.5px;
}

.pdf-brand-tagline {
  margin: 0;
  font-size: var(--text-sm);
  opacity: 0.9;
  font-weight: 400;
}

.pdf-viewer-close {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.pdf-viewer-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.pdf-viewer-body {
  flex: 1;
  overflow-y: auto;
  padding: 3rem 4rem;
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.05) 0%, 
    rgba(168, 85, 247, 0.05) 50%, 
    rgba(236, 72, 153, 0.05) 100%);
  position: relative;
  min-height: 500px;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Ensure viewer body background is correct in both themes */
[data-theme="dark"] .pdf-viewer-body {
  background: linear-gradient(135deg, 
    rgba(124, 58, 237, 0.08) 0%, 
    rgba(139, 92, 246, 0.08) 50%, 
    rgba(219, 39, 119, 0.08) 100%) !important;
  color: #FFFFFF !important;
}

[data-theme="light"] .pdf-viewer-body,
:not([data-theme]) .pdf-viewer-body {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.05) 0%, 
    rgba(168, 85, 247, 0.05) 50%, 
    rgba(236, 72, 153, 0.05) 100%) !important;
  color: #000000 !important;
}

/* Override inline styles in PDF container */
#pdfContainer[style*="background"] {
  background: var(--bg-secondary) !important;
}

[data-theme="dark"] #pdfContainer[style*="background"] {
  background: #1a1a1a !important;
}

[data-theme="light"] #pdfContainer[style*="background"],
:not([data-theme]) #pdfContainer[style*="background"] {
  background: #f5f5f5 !important;
}

#pdfLoading[style*="color"] {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] #pdfLoading[style*="color"] {
  color: #E5E7EB !important;
}

[data-theme="light"] #pdfLoading[style*="color"],
:not([data-theme]) #pdfLoading[style*="color"] {
  color: var(--text-secondary) !important;
}

/* PDF Document Styling */
.pdf-document {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 4rem;
  margin: 0 auto;
  max-width: 800px;
  box-shadow: 
    0 20px 60px rgba(139, 92, 246, 0.2),
    0 10px 30px rgba(168, 85, 247, 0.15),
    0 4px 12px rgba(236, 72, 153, 0.1);
  border-radius: 24px;
  position: relative;
  color: var(--text-primary);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

/* Ensure backgrounds are correct in both themes */
[data-theme="dark"] .pdf-document {
  background: rgba(26, 26, 26, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .pdf-document,
:not([data-theme]) .pdf-document {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #000000 !important;
  border-color: rgba(255, 255, 255, 0.5);
}

/* Override inline styles for PDF document */
.pdf-document[style*="background"] {
  background: var(--bg-primary) !important;
}

[data-theme="dark"] .pdf-document[style*="background"] {
  background: #1a1a1a !important;
}

[data-theme="light"] .pdf-document[style*="background"],
:not([data-theme]) .pdf-document[style*="background"] {
  background: #FFFFFF !important;
}

/* Ensure text opacity is always 1 for visibility */
.pdf-content,
.pdf-content * {
  opacity: 1 !important;
}

/* Override all inline styles in PDF documents to ensure theme adaptation */
.pdf-document [style*="background"],
.pdf-document-subtitle[style*="background"],
.pdf-document-meta[style*="background"],
.pdf-document-meta span[style*="color"],
.pdf-document-meta strong[style*="color"] {
  /* These will be overridden by theme-specific rules below */
}

/* Force theme adaptation for inline styles - override any inline background/color */
[data-theme="dark"] .pdf-document-subtitle {
  background: linear-gradient(135deg, 
    rgba(124, 58, 237, 0.2) 0%, 
    rgba(139, 92, 246, 0.2) 50%, 
    rgba(219, 39, 119, 0.2) 100%) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #E5E7EB !important;
  border-radius: 16px;
}

[data-theme="dark"] .pdf-document-meta {
  background: linear-gradient(135deg, 
    rgba(124, 58, 237, 0.18) 0%, 
    rgba(139, 92, 246, 0.18) 50%, 
    rgba(219, 39, 119, 0.18) 100%) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #E5E7EB !important;
  border-radius: 16px;
}

[data-theme="dark"] .pdf-document-meta strong {
  color: #60A5FA !important;
}

[data-theme="dark"] .pdf-document-meta span strong {
  color: #60A5FA !important;
}

[data-theme="light"] .pdf-document-subtitle,
:not([data-theme]) .pdf-document-subtitle {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.15) 0%, 
    rgba(168, 85, 247, 0.15) 50%, 
    rgba(236, 72, 153, 0.15) 100%) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  color: #374151 !important;
  border-radius: 16px;
}

[data-theme="light"] .pdf-document-meta,
:not([data-theme]) .pdf-document-meta {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.12) 0%, 
    rgba(168, 85, 247, 0.12) 50%, 
    rgba(236, 72, 153, 0.12) 100%) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  color: #374151 !important;
  border-radius: 16px;
}

[data-theme="light"] .pdf-document-meta strong,
:not([data-theme]) .pdf-document-meta strong {
  color: var(--primary-blue-dark) !important;
}

.pdf-document::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, 
    rgba(139, 92, 246, 1) 0%, 
    rgba(168, 85, 247, 1) 50%, 
    rgba(236, 72, 153, 1) 100%);
  border-radius: 24px 24px 0 0;
}

.pdf-document-title {
  font-size: var(--text-4xl);
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1.2;
  border-bottom: 3px solid var(--saffron);
  padding-bottom: 1rem;
  color: var(--text-primary);
}

/* Dark theme for title */
[data-theme="dark"] .pdf-document-title {
  color: #60A5FA !important;
}

[data-theme="light"] .pdf-document-title,
:not([data-theme]) .pdf-document-title {
  color: var(--primary-blue-dark) !important;
}

/* Ensure title is visible in both themes */
[data-theme="dark"] .pdf-document-title {
  color: #FFFFFF !important;
}

[data-theme="light"] .pdf-document-title,
:not([data-theme]) .pdf-document-title {
  color: #000000 !important;
}

.pdf-document-subtitle {
  font-size: var(--text-lg);
  margin-bottom: 2rem;
  font-weight: 500;
  color: var(--text-on-bg-secondary) !important;
}

/* Override inline styles for subtitle */
.pdf-document-subtitle[style*="background"],
.pdf-document-subtitle[style*="color"] {
  color: var(--text-on-bg-secondary) !important;
}

/* Ensure subtitle is visible in both themes */
[data-theme="dark"] .pdf-document-subtitle {
  color: #E5E7EB !important;
  background: rgba(26, 26, 26, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .pdf-document-subtitle[style*="background"] {
  background: rgba(26, 26, 26, 0.8) !important;
  color: #E5E7EB !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="light"] .pdf-document-subtitle,
:not([data-theme]) .pdf-document-subtitle {
  color: #374151 !important;
  background: rgba(239, 246, 255, 0.4) !important;
}

[data-theme="light"] .pdf-document-subtitle[style*="background"],
:not([data-theme]) .pdf-document-subtitle[style*="background"] {
  background: rgba(239, 246, 255, 0.4) !important;
  color: #374151 !important;
}

.pdf-document-meta {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-on-bg-secondary) !important;
}

/* Override inline styles for meta */
.pdf-document-meta[style*="background"],
.pdf-document-meta[style*="color"] {
  color: var(--text-on-bg-secondary) !important;
}

/* Ensure meta information background and text update with theme */
[data-theme="dark"] .pdf-document-meta {
  background: rgba(26, 26, 26, 0.9) !important;
  color: #E5E7EB !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .pdf-document-meta[style*="background"] {
  background: rgba(26, 26, 26, 0.9) !important;
  color: #E5E7EB !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .pdf-document-meta strong {
  color: #60A5FA !important;
}

[data-theme="dark"] .pdf-document-meta span strong[style*="color"] {
  color: #60A5FA !important;
}

[data-theme="light"] .pdf-document-meta,
:not([data-theme]) .pdf-document-meta {
  background: rgba(249, 250, 251, 0.9) !important;
  color: #374151 !important;
}

[data-theme="light"] .pdf-document-meta[style*="background"],
:not([data-theme]) .pdf-document-meta[style*="background"] {
  background: rgba(249, 250, 251, 0.9) !important;
  color: #374151 !important;
}

[data-theme="light"] .pdf-document-meta strong,
:not([data-theme]) .pdf-document-meta strong {
  color: var(--primary-blue-dark) !important;
}

.pdf-document-meta span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pdf-content {
  line-height: 1.8;
  color: var(--text-primary);
  font-size: var(--text-base);
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Ensure PDF content text is visible in both themes - base color */
[data-theme="dark"] .pdf-content {
  color: #FFFFFF !important;
}

[data-theme="light"] .pdf-content,
:not([data-theme]) .pdf-content {
  color: #000000 !important;
}

/* Ensure all child elements inherit the correct color */
[data-theme="dark"] .pdf-content *:not(a):not(code):not(pre) {
  color: inherit !important;
}

[data-theme="light"] .pdf-content *:not(a):not(code):not(pre),
:not([data-theme]) .pdf-content *:not(a):not(code):not(pre) {
  color: inherit !important;
}

/* Force all direct text elements in PDF content to be visible - unified colors */
[data-theme="dark"] .pdf-content p,
[data-theme="dark"] .pdf-content span,
[data-theme="dark"] .pdf-content div,
[data-theme="dark"] .pdf-content strong,
[data-theme="dark"] .pdf-content em,
[data-theme="dark"] .pdf-content b,
[data-theme="dark"] .pdf-content i,
[data-theme="dark"] .pdf-content h1,
[data-theme="dark"] .pdf-content h2,
[data-theme="dark"] .pdf-content h3,
[data-theme="dark"] .pdf-content h4,
[data-theme="dark"] .pdf-content h5,
[data-theme="dark"] .pdf-content h6 {
  color: #FFFFFF !important;
}

[data-theme="light"] .pdf-content p,
[data-theme="light"] .pdf-content span,
[data-theme="light"] .pdf-content div,
[data-theme="light"] .pdf-content strong,
[data-theme="light"] .pdf-content em,
[data-theme="light"] .pdf-content b,
[data-theme="light"] .pdf-content i,
[data-theme="light"] .pdf-content h1,
[data-theme="light"] .pdf-content h2,
[data-theme="light"] .pdf-content h3,
[data-theme="light"] .pdf-content h4,
[data-theme="light"] .pdf-content h5,
[data-theme="light"] .pdf-content h6,
:not([data-theme]) .pdf-content p,
:not([data-theme]) .pdf-content span,
:not([data-theme]) .pdf-content div,
:not([data-theme]) .pdf-content strong,
:not([data-theme]) .pdf-content em,
:not([data-theme]) .pdf-content b,
:not([data-theme]) .pdf-content i,
:not([data-theme]) .pdf-content h1,
:not([data-theme]) .pdf-content h2,
:not([data-theme]) .pdf-content h3,
:not([data-theme]) .pdf-content h4,
:not([data-theme]) .pdf-content h5,
:not([data-theme]) .pdf-content h6 {
  color: #000000 !important;
}

/* But allow links to have their own color */
[data-theme="dark"] .pdf-content a {
  color: #FF9933 !important;
}

[data-theme="light"] .pdf-content a,
:not([data-theme]) .pdf-content a {
  color: var(--saffron) !important;
}

.pdf-content h1 {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--saffron-light);
}

[data-theme="dark"] .pdf-content h1 {
  border-bottom-color: var(--saffron-light) !important;
}

.pdf-content h2 {
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.pdf-content h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.pdf-content p {
  margin-bottom: 1.25rem;
  text-align: justify;
}

.pdf-content ul,
.pdf-content ol {
  margin: 1.25rem 0;
  padding-left: 2rem;
}

.pdf-content li {
  margin-bottom: 0.75rem;
  line-height: 1.7;
  color: var(--text-primary);
}

/* Ensure list items are visible in both themes */
[data-theme="dark"] .pdf-content li {
  color: #FFFFFF !important;
}

[data-theme="light"] .pdf-content li,
:not([data-theme]) .pdf-content li {
  color: #000000 !important;
}

.pdf-content blockquote {
  border-left: 4px solid var(--saffron);
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
}

/* Ensure blockquotes are visible in dark mode */
[data-theme="dark"] .pdf-content blockquote {
  color: #E0E0E0 !important;
}

.pdf-content code {
  background: var(--bg-tertiary);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--indigo);
}

/* Ensure code is visible in dark mode */
[data-theme="dark"] .pdf-content code {
  color: #FFFFFF !important;
  background: var(--bg-tertiary) !important;
}

.pdf-content pre {
  background: var(--bg-tertiary);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 1.5rem 0;
  border-left: 4px solid var(--indigo);
}

.pdf-content a {
  color: var(--accent-primary);
  text-decoration: underline;
}

.pdf-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 1.5rem 0;
  box-shadow: var(--shadow-md);
}

.pdf-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  box-shadow: var(--shadow-sm);
}

.pdf-content th,
.pdf-content td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--bg-tertiary);
  color: var(--text-primary);
}

/* Ensure table cells are visible in both themes */
[data-theme="dark"] .pdf-content th,
[data-theme="dark"] .pdf-content td {
  color: #FFFFFF !important;
}

[data-theme="light"] .pdf-content th,
[data-theme="light"] .pdf-content td,
:not([data-theme]) .pdf-content th,
:not([data-theme]) .pdf-content td {
  color: #000000 !important;
}

.pdf-content th {
  background: linear-gradient(135deg, var(--saffron-light), var(--indigo-light));
  color: white;
  font-weight: 600;
}

.pdf-content tr:hover {
  background: var(--bg-secondary);
}

.pdf-highlight {
  background: linear-gradient(120deg, rgba(255, 119, 0, 0.2) 0%, rgba(255, 119, 0, 0.2) 100%);
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-sm);
}

.pdf-viewer-footer {
  background: var(--bg-secondary);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Ensure footer updates with theme */
[data-theme="dark"] .pdf-viewer-footer {
  background: #0a0a0a !important;
  color: #E0E0E0 !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="light"] .pdf-viewer-footer,
:not([data-theme]) .pdf-viewer-footer {
  background: #F8F9FA !important;
  color: #4a4a4a !important;
  border-top-color: rgba(0, 0, 0, 0.1) !important;
}

.pdf-footer-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pdf-separator {
  color: var(--text-tertiary);
}

.pdf-footer-watermark {
  opacity: 0.6;
  font-size: var(--text-xs);
}

/* Scrollbar styling for PDF viewer */
.pdf-viewer-body::-webkit-scrollbar {
  width: 10px;
}

.pdf-viewer-body::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.pdf-viewer-body::-webkit-scrollbar-thumb {
  background: var(--saffron);
  border-radius: var(--radius-full);
}

.pdf-viewer-body::-webkit-scrollbar-thumb:hover {
  background: var(--saffron-dark);
}

/* Watermark overlay for additional protection */

.pdf-document::after {
  content: 'MyGurukul - Confidential';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-size: 3rem;
  color: rgba(255, 119, 0, 0.05);
  pointer-events: none;
  z-index: 1;
  font-weight: 700;
  white-space: nowrap;
  user-select: none;
}

/* Loading state */
.pdf-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 1rem;
}

.pdf-loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--bg-tertiary);
  border-top-color: var(--saffron);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Responsive PDF viewer */
@media (max-width: 768px) {
  .pdf-viewer-modal .modal-content {
    max-width: 100vw;
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }

  .pdf-viewer-body {
    padding: 2rem 1.5rem;
  }

  .pdf-document {
    padding: 2rem 1.5rem;
  }

  .pdf-document-title {
    font-size: var(--text-2xl);
  }

  .pdf-viewer-header {
    padding: 1rem 1.5rem;
  }

  .pdf-viewer-footer {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}

/* ============================================
   COMIC BOOK STYLES - VIBRANT & ENGAGING
   ============================================ */

/* Comic Book Material Cards - Enhanced Design */
.material-text,
.material-pdf {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 2px solid;
  border-image: linear-gradient(135deg, 
    var(--primary-blue) 0%, 
    var(--primary-purple) 50%, 
    var(--primary-pink) 100%) 1;
  border-radius: 18px;
  padding: 2.25rem;
  margin: 1.75rem 0;
  position: relative;
  box-shadow: 
    0 4px 24px rgba(37, 99, 235, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  color: var(--text-primary);
}

/* Dark theme for material cards */
[data-theme="dark"] .material-text,
[data-theme="dark"] .material-pdf {
  background: var(--glass-bg);
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  color: var(--text-primary);
}

.material-text::before,
.material-pdf::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, 
    var(--primary-blue) 0%, 
    var(--primary-purple) 50%, 
    var(--primary-pink) 100%);
  border-radius: 18px 18px 0 0;
}

.material-text::after,
.material-pdf::after {
  content: '';
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  border-radius: 50%;
  opacity: 0.08;
  pointer-events: none;
  filter: blur(8px);
}

@keyframes comicShine {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) rotate(180deg); opacity: 0.6; }
}

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
}

.material-text:hover,
.material-pdf:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 8px 32px rgba(37, 99, 235, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.95) inset;
  border-image-source: linear-gradient(135deg, 
    var(--primary-purple) 0%, 
    var(--primary-pink) 50%, 
    var(--primary-blue) 100%);
  background: rgba(255, 255, 255, 0.98);
}

[data-theme="dark"] .material-text:hover,
[data-theme="dark"] .material-pdf:hover {
  background: rgba(26, 26, 26, 0.95);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.material-text h3,
.material-pdf h3 {
  font-family: var(--font-comic-heading);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--primary-blue-dark);
  margin-bottom: 1.125rem;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .material-text h3,
[data-theme="dark"] .material-pdf h3 {
  color: #60A5FA !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.material-text p,
.material-pdf p {
  font-family: var(--font-comic-body);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--text-on-bg-secondary);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

[data-theme="dark"] .material-text p,
[data-theme="dark"] .material-pdf p {
  color: var(--text-on-bg-secondary) !important;
}

/* Comic Book Buttons - Enhanced */
.material-text .btn-primary,
.material-pdf .btn-primary {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-purple) 100%);
  border: none;
  border-radius: 14px;
  padding: 1rem 2rem;
  font-family: var(--font-comic-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: white;
  letter-spacing: 0.02em;
  box-shadow: 
    0 4px 14px rgba(37, 99, 235, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.material-text .btn-primary::before,
.material-pdf .btn-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.material-text .btn-primary:hover::before,
.material-pdf .btn-primary:hover::before {
  width: 300px;
  height: 300px;
}

.material-text .btn-primary:hover,
.material-pdf .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 6px 24px rgba(37, 99, 235, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-pink) 100%);
}

.material-text .btn-primary:active,
.material-pdf .btn-primary:active {
  transform: translateY(-2px) scale(1.02);
}

/* Comic Book PDF Document Styling - Enhanced */
/* Duplicate removed - using consolidated styles from line 2848 */

.pdf-document::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, 
    var(--primary-blue) 0%, 
    var(--primary-purple) 50%, 
    var(--primary-pink) 100%);
  border-radius: 24px 24px 0 0;
}

.pdf-document-title {
  font-family: var(--font-comic-heading);
  font-size: 2.75rem;
  font-weight: 700;
  margin-bottom: 1.125rem;
  line-height: 1.25;
  color: var(--primary-blue-dark);
  letter-spacing: -0.03em;
  position: relative;
  padding-bottom: 1.125rem;
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, var(--primary-blue), var(--primary-purple)) 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Dark theme for title */
[data-theme="dark"] .pdf-document-title {
  color: #60A5FA !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .pdf-document-title,
:not([data-theme]) .pdf-document-title {
  color: var(--primary-blue-dark) !important;
}

.pdf-content {
  font-family: var(--font-comic-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-primary);
  position: relative;
}

.pdf-content h1 {
  font-family: var(--font-comic-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--primary-blue-dark);
  margin-top: 2.75rem;
  margin-bottom: 1.625rem;
  padding-bottom: 0.875rem;
  border-bottom: 3px solid rgba(37, 99, 235, 0.2);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  line-height: 1.3;
}

[data-theme="dark"] .pdf-content h1 {
  color: #60A5FA !important;
  border-bottom-color: rgba(96, 165, 250, 0.3) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .pdf-content h1,
:not([data-theme]) .pdf-content h1 {
  color: var(--primary-blue-dark) !important;
}

.pdf-content h2 {
  font-family: var(--font-comic-heading);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--primary-purple-dark);
  margin-top: 2.25rem;
  margin-bottom: 1.125rem;
  position: relative;
  padding-left: 0;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  line-height: 1.35;
}

[data-theme="dark"] .pdf-content h2 {
  color: #A78BFA !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .pdf-content h2,
:not([data-theme]) .pdf-content h2 {
  color: var(--primary-purple-dark) !important;
}

.pdf-content h3 {
  font-family: var(--font-comic-heading);
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin-top: 1.75rem;
  margin-bottom: 0.875rem;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  line-height: 1.4;
}

[data-theme="dark"] .pdf-content h3 {
  color: #60A5FA !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .pdf-content h3,
:not([data-theme]) .pdf-content h3 {
  color: var(--primary-blue) !important;
}

.pdf-content p {
  margin-bottom: 1.625rem;
  text-align: left;
  padding: 1.125rem 1.5rem;
  background: rgba(239, 246, 255, 0.4);
  border-left: 4px solid var(--primary-blue);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  position: relative;
  font-weight: 400;
  color: var(--text-primary) !important;
}

/* Dark theme for paragraphs */
[data-theme="dark"] .pdf-content p {
  background: rgba(26, 26, 26, 0.6) !important;
  color: #E5E7EB !important;
  border-left-color: #60A5FA !important;
}

[data-theme="light"] .pdf-content p,
:not([data-theme]) .pdf-content p {
  background: rgba(239, 246, 255, 0.4) !important;
  color: #111827 !important;
}

.pdf-content strong {
  color: var(--primary-blue-dark);
  font-weight: 700;
  font-size: 1.05em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .pdf-content strong {
  color: #60A5FA !important;
}

[data-theme="light"] .pdf-content strong,
:not([data-theme]) .pdf-content strong {
  color: var(--primary-blue-dark) !important;
}

.pdf-content em {
  color: var(--primary-purple-dark);
  font-style: italic;
  font-weight: 500;
}

[data-theme="dark"] .pdf-content em {
  color: #A78BFA !important;
}

[data-theme="light"] .pdf-content em,
:not([data-theme]) .pdf-content em {
  color: var(--primary-purple-dark) !important;
}

/* Comic Book Speech Bubbles - Enhanced */
.pdf-content blockquote {
  background: rgba(239, 246, 255, 0.5);
  border: 2px solid var(--primary-blue);
  border-left: 5px solid var(--primary-purple);
  border-radius: 14px;
  margin: 2.25rem 0;
  padding: 1.625rem 2.25rem;
  position: relative;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.1);
  font-style: italic;
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.75;
}


/* Comic Book Lists */
.pdf-content ul,
.pdf-content ol {
  margin: 2rem 0;
  padding-left: 2.5rem;
  list-style: none;
}

.pdf-content li {
  margin-bottom: 0.875rem;
  padding: 1rem 1.25rem;
  background: rgba(249, 250, 251, 0.9);
  border-left: 4px solid var(--primary-blue);
  border-radius: 10px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-primary);
}

.pdf-content ul li::before {
  content: '•';
  position: absolute;
  left: -1.75rem;
  top: 1rem;
  font-size: 1.75rem;
  color: var(--primary-blue);
  font-weight: 700;
  line-height: 1;
}

.pdf-content ol li::before {
  content: counter(list-item) '.';
  position: absolute;
  left: -2.25rem;
  top: 1rem;
  font-weight: 700;
  color: var(--primary-blue);
  font-family: var(--font-comic-heading);
  font-size: 1.125rem;
}

@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

/* Comic Book Images - Refined */
.pdf-content img,
.material-image-box img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 2rem 0;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(99, 102, 241, 0.1);
  border: 2px solid rgba(99, 102, 241, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pdf-content img:hover,
.material-image-box img:hover {
  transform: scale(1.02);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.12),
    0 0 0 2px rgba(99, 102, 241, 0.2);
}

.material-image-box {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px dashed rgba(99, 102, 241, 0.3);
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}

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

/* Comic Book Module Sections - Enhanced */
.module-section {
  margin: 3rem 0;
  position: relative;
}

.module-section h2 {
  font-family: var(--font-comic-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--primary-blue-dark);
  margin-bottom: 1.75rem;
  letter-spacing: -0.02em;
  position: relative;
  padding-left: 0;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

@keyframes rotate {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Comic Book Quiz Cards - Enhanced */
.quiz-preview {
  background: var(--bg-white);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 2px solid var(--primary-blue);
  border-left: 5px solid var(--primary-blue);
  border-radius: 18px;
  padding: 2.25rem;
  margin: 1.75rem 0;
  box-shadow: 
    0 4px 24px rgba(37, 99, 235, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.quiz-preview:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 8px 32px rgba(37, 99, 235, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.95) inset;
  border-color: var(--primary-purple);
}

.quiz-preview h3 {
  font-family: var(--font-comic-heading);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--primary-blue-dark);
  margin-bottom: 1.125rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* Comic Book Assignment Cards - Enhanced */
.assignment-preview {
  background: var(--bg-white);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 2px solid var(--accent-emerald);
  border-left: 5px solid var(--accent-emerald);
  border-radius: 18px;
  padding: 2.25rem;
  margin: 1.75rem 0;
  box-shadow: 
    0 4px 24px rgba(5, 150, 105, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.assignment-preview:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 8px 32px rgba(5, 150, 105, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.95) inset;
  border-color: var(--accent-teal);
}

.assignment-preview h3 {
  font-family: var(--font-comic-heading);
  font-size: 1.625rem;
  font-weight: 700;
  color: #047857;
  margin-bottom: 1.125rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* Comic Book Summary Cards - Enhanced */
.summary-content {
  background: var(--bg-white);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 2px solid var(--primary-purple);
  border-left: 5px solid var(--primary-purple);
  border-radius: 18px;
  padding: 2.25rem;
  margin: 1.75rem 0;
  box-shadow: 
    0 4px 24px rgba(124, 58, 237, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  position: relative;
}

.summary-content ul {
  list-style: none;
  padding: 0;
}

.summary-content li {
  padding: 1rem 1.25rem;
  margin: 0.625rem 0;
  background: rgba(249, 250, 251, 0.9);
  border-left: 4px solid var(--primary-purple);
  border-radius: 10px;
  font-family: var(--font-comic-body);
  font-size: 1.0625rem;
  font-weight: 400;
  position: relative;
  padding-left: 3rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  color: var(--text-primary);
  line-height: 1.75;
}

.summary-content li::before {
  content: '✓';
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.125rem;
  color: white;
  font-weight: 700;
  background: var(--primary-purple);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

/* Game-like Progress Indicators - Enhanced */
.progress-bar {
  background: rgba(243, 244, 246, 0.9);
  border: 2px solid rgba(37, 99, 235, 0.15);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.04);
  position: relative;
  height: 22px;
}

.progress-fill {
  background: linear-gradient(90deg, 
    var(--primary-blue) 0%, 
    var(--primary-purple) 50%, 
    var(--primary-pink) 100%);
  height: 100%;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 
    inset 0 1px 3px rgba(255, 255, 255, 0.35);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: progressShine 2s infinite;
}

@keyframes progressShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Comic Book Course Cards - Refined (Alternative style - can be used with class modifier) */
.course-card.comic-style {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 3px solid;
  border-image: linear-gradient(135deg, 
    var(--comic-blue) 0%, 
    var(--comic-purple) 50%, 
    var(--comic-pink) 100%) 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 
    0 8px 32px rgba(99, 102, 241, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  color: #111827;
}

.course-card.comic-style:hover {
  transform: translateY(-6px);
  box-shadow: 
    0 12px 40px rgba(99, 102, 241, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  border-image-source: linear-gradient(135deg, 
    var(--comic-purple) 0%, 
    var(--comic-pink) 50%, 
    var(--comic-blue) 100%);
  background: rgba(255, 255, 255, 1);
  color: #111827 !important;
}

.course-card.comic-style:hover .course-content h3 {
  color: #111827 !important;
}

.course-card.comic-style:hover .course-content p {
  color: #374151 !important;
}

[data-theme="dark"] .course-card.comic-style {
  background: rgba(26, 26, 26, 0.95);
  color: #FFFFFF;
}

[data-theme="dark"] .course-card.comic-style:hover {
  background: rgba(26, 26, 26, 1);
  color: #FFFFFF !important;
}

[data-theme="dark"] .course-card.comic-style:hover .course-content h3 {
  color: #FFFFFF !important;
}

[data-theme="dark"] .course-card.comic-style:hover .course-content p {
  color: #E5E7EB !important;
}

.course-thumbnail {
  background: linear-gradient(135deg, 
    var(--comic-red) 0%, 
    var(--comic-orange) 50%, 
    var(--comic-yellow) 100%);
  position: relative;
  overflow: hidden;
}

.course-thumbnail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
  animation: comicShine 3s ease-in-out infinite;
}

/* These styles are now handled by the main course-content styles above */
.course-card.comic-style .course-content h3 {
  font-family: var(--font-comic-heading);
  font-size: 1.6rem;
  color: #1E40AF;
  margin-bottom: 1rem;
  letter-spacing: 0.3px;
  font-weight: 600;
  line-height: 1.4;
}

[data-theme="dark"] .course-card.comic-style .course-content h3 {
  color: #60A5FA;
}

.course-card.comic-style .course-content p {
  font-family: var(--font-comic-body);
  font-size: 0.95rem;
  color: var(--text-on-bg-secondary);
  line-height: 1.7;
  font-weight: 500;
}

/* Badge & Achievement Styles */
.badge,
.achievement-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, 
    var(--comic-red) 0%, 
    var(--comic-orange) 50%, 
    var(--comic-yellow) 100%);
  border: 3px solid white;
  border-radius: 25px;
  font-family: var(--font-comic-heading);
  font-size: 1rem;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 
    0 8px 20px rgba(255, 59, 92, 0.4),
    0 0 0 2px rgba(255, 255, 255, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 20px rgba(255, 59, 92, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.3); }
  50% { transform: scale(1.05); box-shadow: 0 12px 30px rgba(255, 59, 92, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.4); }
}

.badge::before,
.achievement-badge::before {
  content: '🏆';
  font-size: 1.5rem;
  animation: rotate 3s linear infinite;
}

.achievement-badge {
  background: linear-gradient(135deg, 
    var(--comic-blue) 0%, 
    var(--comic-purple) 50%, 
    var(--comic-pink) 100%);
  box-shadow: 
    0 8px 20px rgba(108, 92, 231, 0.4),
    0 0 0 2px rgba(255, 255, 255, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.achievement-badge::before {
  content: '⭐';
}

/* Level Up Animation */
@keyframes levelUp {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
  100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

.level-up-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    var(--comic-red) 0%, 
    var(--comic-orange) 50%, 
    var(--comic-yellow) 100%);
  border: 5px solid white;
  border-radius: 30px;
  padding: 3rem 4rem;
  font-family: var(--font-comic-title);
  font-size: 3rem;
  color: white;
  text-align: center;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 0 0 10px rgba(255, 255, 255, 0.2);
  z-index: 10000;
  animation: levelUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* Comic Book Action Effects */
.action-burst {
  position: relative;
  display: inline-block;
}

.action-burst::before,
.action-burst::after {
  content: '💥';
  position: absolute;
  font-size: 2rem;
  animation: burst 0.6s ease-out;
  pointer-events: none;
}

.action-burst::before {
  top: -20px;
  left: -20px;
  animation-delay: 0s;
}

.action-burst::after {
  bottom: -20px;
  right: -20px;
  animation-delay: 0.2s;
}

@keyframes burst {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  100% { transform: scale(2) rotate(360deg); opacity: 0; }
}

/* Comic Book Panel Effect */
.comic-panel {
  background: white;
  border: 5px solid #000;
  border-radius: 10px;
  padding: 2rem;
  margin: 2rem 0;
  position: relative;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.2),
    inset 0 0 20px rgba(255, 230, 109, 0.1);
  transform: perspective(1000px) rotateX(1deg);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.comic-panel::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(135deg, 
    var(--comic-red), 
    var(--comic-orange), 
    var(--comic-yellow), 
    var(--comic-blue));
  border-radius: 10px;
  z-index: -1;
  opacity: 0.3;
}

.comic-panel:hover {
  transform: perspective(1000px) rotateX(0deg) translateY(-5px);
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.3),
    inset 0 0 30px rgba(255, 230, 109, 0.2);
}

/* Responsive Comic Book Styles */
@media (max-width: 768px) {
  .pdf-document {
    padding: 2rem 1.5rem;
    border-radius: 20px;
  }
  
  .pdf-document-title {
    font-size: 2rem;
  }
  
  .material-text,
  .material-pdf {
    padding: 1.5rem;
    border-radius: 15px;
  }
  
  .module-section h2 {
    font-size: 2rem;
    padding-left: 2.5rem;
  }
  
  .stat-icon {
    font-size: 3rem;
  }
  
  .stat-content h3 {
    font-size: var(--text-2xl);
  }
  
  .badge,
  .achievement-badge {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}

/* ============================================
   TEACHER DASHBOARD - NEW FEATURES STYLES
   ============================================ */

/* PPT Manager Styles */
.ppt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.ppt-card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.ppt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.ppt-viewer-modal .modal-content {
  max-width: 95vw;
  max-height: 95vh;
  padding: 0;
}

.ppt-viewer-header {
  padding: 1rem;
  background: var(--bg-secondary);
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ppt-viewer-body {
  padding: 2rem;
  overflow: auto;
  max-height: calc(95vh - 80px);
}

/* Activity Gallery Styles */
.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.activity-card {
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
}

.activity-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.activity-card img {
  transition: transform 0.3s;
}

.activity-card:hover img {
  transform: scale(1.05);
}

/* Attendance Styles */
.attendance-container {
  width: 100%;
}

.attendance-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.attendance-table thead {
  background: var(--bg-secondary);
}

.attendance-table th,
.attendance-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.attendance-table th {
  font-weight: 600;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.attendance-status {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  display: inline-block;
}

.attendance-status.present {
  background: var(--success);
  color: white;
}

.attendance-status.absent {
  background: var(--error);
  color: white;
}

/* Assignment Styles */
.assignments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.assignment-card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.assignment-card:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.assignment-status {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
}

.assignment-status.draft {
  background: var(--warning);
  color: white;
}

.assignment-status.published {
  background: var(--success);
  color: white;
}

.assignment-status.closed {
  background: var(--text-secondary);
  color: white;
}

/* Announcement Styles */
.announcements-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.announcement-card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.announcement-card:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.announcement-card.important {
  border-left: 4px solid var(--warning);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.1) 0%, var(--bg-secondary) 5%);
}

/* Responsive Styles for New Features */
@media (max-width: 768px) {
  .ppt-grid,
  .activity-grid {
    grid-template-columns: 1fr;
  }

  .ppt-viewer-modal .modal-content {
    max-width: 100vw;
    max-height: 100vh;
  }

  .attendance-table {
    font-size: 0.875rem;
  }

  .attendance-table th,
  .attendance-table td {
    padding: 0.75rem 0.5rem;
  }
}

/* ============================================
   GAMIFICATION ELEMENTS - KID-FRIENDLY DESIGN
   ============================================ */

/* XP Bar & Level System */
.xp-container {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

.xp-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, 
    #FF6B6B 0%, 
    #4ECDC4 25%, 
    #45B7D1 50%, 
    #FFA07A 75%, 
    #98D8C8 100%);
  background-size: 200% 100%;
  animation: rainbowFlow 3s linear infinite;
}

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

.xp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.xp-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.level-badge {
  background: linear-gradient(135deg, #FF6B6B, #FFA07A);
  color: white;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--text-lg);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
  animation: pulse 2s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.level-badge::before {
  content: '⭐';
  position: absolute;
  left: -20px;
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes sparkle {
  0% { left: -20px; opacity: 0; }
  50% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.xp-amount {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.xp-amount::before {
  content: '✨';
  font-size: var(--text-2xl);
  animation: twinkle 1.5s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
}

.xp-bar-wrapper {
  position: relative;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  height: 24px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, 
    #FF6B6B 0%, 
    #4ECDC4 25%, 
    #45B7D1 50%, 
    #FFA07A 75%, 
    #98D8C8 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-full);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  animation: rainbowFlow 3s linear infinite;
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}

.xp-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer 2s infinite;
}

.xp-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  z-index: 1;
}

/* Badges & Achievements */
.badges-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.badge-card {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}

.badge-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}

.badge-card:hover::before {
  opacity: 1;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.badge-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  border-color: var(--accent-primary);
}

.badge-card.earned {
  border-color: #22C55E;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), var(--glass-bg));
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}

.badge-card.earned:hover {
  box-shadow: 0 12px 32px rgba(34, 197, 94, 0.4);
}

.badge-icon {
  font-size: 3.5rem;
  margin-bottom: var(--space-sm);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s;
}

.badge-card:hover .badge-icon {
  transform: scale(1.2) rotate(10deg);
  animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
  0%, 100% { transform: scale(1.2) rotate(10deg) translateY(0); }
  50% { transform: scale(1.3) rotate(10deg) translateY(-10px); }
}

.badge-card.earned .badge-icon {
  animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 10px rgba(34, 197, 94, 0.5)); }
  50% { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 20px rgba(34, 197, 94, 0.8)); }
}

.badge-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.badge-xp {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: 500;
}

.badge-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(100%);
}

.badge-card.locked:hover {
  transform: none;
}

/* Leaderboard */
.leaderboard-container {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
  box-shadow: var(--glass-shadow);
}

.leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--glass-border);
}

.leaderboard-header h3 {
  font-size: var(--text-2xl);
  font-weight: 700;
  background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

.leaderboard-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.leaderboard-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
  transform: scaleY(0);
  transition: transform 0.3s;
}

.leaderboard-item:hover::before {
  transform: scaleY(1);
}

.leaderboard-item:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: var(--glass-bg);
}

.leaderboard-rank {
  font-size: var(--text-2xl);
  font-weight: 700;
  width: 50px;
  text-align: center;
  color: var(--text-secondary);
}

.leaderboard-item.rank-1 .leaderboard-rank {
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.leaderboard-item.rank-2 .leaderboard-rank {
  color: #C0C0C0;
}

.leaderboard-item.rank-3 .leaderboard-rank {
  color: #CD7F32;
}

.leaderboard-item.current-user {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(78, 205, 196, 0.1));
  border: 2px solid var(--accent-primary);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.leaderboard-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.leaderboard-tabs .tab-btn {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 600;
}

.leaderboard-tabs .tab-btn.active {
  background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
  color: white;
  border-color: transparent;
}

.leaderboard-avatar {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: 700;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.leaderboard-info {
  flex: 1;
}

.leaderboard-name {
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: var(--space-xs);
}

.leaderboard-xp {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.leaderboard-xp::before {
  content: '✨';
}

/* Streak System */
.streak-container {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(78, 205, 196, 0.1));
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.streak-container::before {
  content: '🔥';
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 8rem;
  opacity: 0.1;
  animation: float 3s ease-in-out infinite;
}

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

.streak-number {
  font-size: 4rem;
  font-weight: 700;
  background: linear-gradient(135deg, #FF6B6B, #FFA07A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: var(--space-md) 0;
  animation: pulse 2s ease-in-out infinite;
}

.streak-label {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.streak-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Celebration Effects */
.celebration-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #FF6B6B;
  animation: confettiFall 3s linear forwards;
}

.confetti:nth-child(2n) {
  background: #4ECDC4;
  animation-delay: 0.1s;
}

.confetti:nth-child(3n) {
  background: #45B7D1;
  animation-delay: 0.2s;
}

.confetti:nth-child(4n) {
  background: #FFA07A;
  animation-delay: 0.3s;
}

.confetti:nth-child(5n) {
  background: #98D8C8;
  animation-delay: 0.4s;
}

@keyframes confettiFall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

.achievement-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur-strong);
  -webkit-backdrop-filter: var(--backdrop-blur-strong);
  border: 3px solid #22C55E;
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  z-index: 10001;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: achievementPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.achievement-popup.hidden {
  display: none;
}

@keyframes achievementPop {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1) rotate(10deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

.achievement-icon {
  font-size: 5rem;
  margin-bottom: var(--space-md);
  animation: bounce 0.6s ease-in-out;
}

.achievement-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.achievement-description {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

/* Progress Rings */
.progress-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

.progress-ring svg {
  transform: rotate(-90deg);
}

.progress-ring-circle {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-ring-bg {
  stroke: var(--bg-tertiary);
}

.progress-ring-fill {
  stroke: url(#progressGradient);
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
}

.progress-ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
}

/* ============================================
   WAVE BACKGROUND EFFECTS
   ============================================ */
.wave-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0.6;
}

.wave-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.wave-path {
  fill: none;
  stroke: url(#waveGradient);
  stroke-width: 2;
  opacity: 0.4;
  animation: waveAnimation 20s ease-in-out infinite;
}

.wave-1 {
  animation-delay: 0s;
  stroke: rgba(99, 102, 241, 0.3);
}

.wave-2 {
  animation-delay: -5s;
  stroke: rgba(255, 107, 107, 0.3);
}

.wave-3 {
  animation-delay: -10s;
  stroke: rgba(78, 205, 196, 0.3);
}

@keyframes waveAnimation {
  0%, 100% {
    d: path("M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,165.3C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z");
  }
  50% {
    d: path("M0,192L48,197.3C96,203,192,213,288,197.3C384,181,480,139,576,138.7C672,139,768,181,864,197.3C960,213,1056,203,1152,181.3C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z");
  }
}

/* Particle Background - Enhanced */
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.6), rgba(99, 102, 241, 0));
  border-radius: 50%;
  animation: particleFloat 20s infinite;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.particle:nth-child(2n) {
  background: radial-gradient(circle, rgba(255, 107, 107, 0.6), rgba(255, 107, 107, 0));
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
  animation-duration: 25s;
}

.particle:nth-child(3n) {
  background: radial-gradient(circle, rgba(78, 205, 196, 0.6), rgba(78, 205, 196, 0));
  box-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
  animation-duration: 30s;
}

.particle:nth-child(4n) {
  background: radial-gradient(circle, rgba(255, 160, 122, 0.6), rgba(255, 160, 122, 0));
  box-shadow: 0 0 10px rgba(255, 160, 122, 0.5);
  animation-duration: 35s;
}

.particle:nth-child(5n) {
  background: radial-gradient(circle, rgba(152, 216, 200, 0.6), rgba(152, 216, 200, 0));
  box-shadow: 0 0 10px rgba(152, 216, 200, 0.5);
  animation-duration: 40s;
}

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateY(50vh) translateX(50px) rotate(180deg);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(100px) rotate(360deg);
    opacity: 0;
  }
}

/* Enhanced Stat Cards for Kids */
.stat-card {
  position: relative;
  overflow: visible;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1, #FFA07A);
  background-size: 400% 400%;
  border-radius: var(--radius-lg);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
  animation: gradientShift 3s ease infinite;
}

.stat-card:hover::after {
  opacity: 0.3;
}

.stat-icon {
  position: relative;
  z-index: 1;
  transition: transform 0.3s;
}

.stat-card:hover .stat-icon {
  transform: scale(1.2) rotate(10deg);
  animation: wiggle 0.5s ease-in-out;
}

@keyframes wiggle {
  0%, 100% { transform: scale(1.2) rotate(10deg); }
  25% { transform: scale(1.2) rotate(-10deg); }
  50% { transform: scale(1.2) rotate(10deg); }
  75% { transform: scale(1.2) rotate(-10deg); }
}

/* Enhanced Course Cards */
.course-card {
  position: relative;
  overflow: hidden;
}

.course-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1, #FFA07A);
  background-size: 200% 100%;
  transform: scaleX(0);
  transition: transform 0.3s;
  animation: rainbowFlow 3s linear infinite;
}

.course-card:hover::before {
  transform: scaleX(1);
}

.course-thumbnail {
  position: relative;
  overflow: hidden;
}

.course-thumbnail::after {
  content: '🎓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 4rem;
  opacity: 0;
  transition: all 0.3s;
}

.course-card:hover .course-thumbnail::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.2;
  animation: pulse 1s ease-in-out;
}

/* Enhanced Buttons for Kids */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '✨';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 2rem;
  transition: transform 0.3s;
}

.btn-primary:hover::after {
  transform: translate(-50%, -50%) scale(1) rotate(360deg);
  animation: sparkle 0.6s ease-in-out;
}

.btn-primary:active {
  transform: scale(0.95);
}

/* Loading Animations */
.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--bg-tertiary);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: var(--space-xl) auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-dots {
  display: inline-flex;
  gap: var(--space-xs);
}

.loading-dots span {
  width: 12px;
  height: 12px;
  background: var(--accent-primary);
  border-radius: 50%;
  animation: loadingBounce 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes loadingBounce {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Success/Error Messages */
.message-toast {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur-strong);
  -webkit-backdrop-filter: var(--backdrop-blur-strong);
  border: 2px solid;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--glass-shadow);
  z-index: 10000;
  animation: slideInUp 0.3s ease-out;
  max-width: 400px;
}

.message-toast.success {
  border-color: var(--success);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), var(--glass-bg));
}

.message-toast.error {
  border-color: var(--error);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), var(--glass-bg));
}

.message-toast.warning {
  border-color: var(--warning);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), var(--glass-bg));
}

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

/* ============================================
   QUESTS & CHALLENGES
   ============================================ */
.quests-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.quest-card {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
}

.quest-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF6B6B, #4ECDC4);
  transform: scaleX(0);
  transition: transform 0.3s;
}

.quest-card:hover::before {
  transform: scaleX(1);
}

.quest-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.quest-card.completed {
  border-color: var(--success);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), var(--glass-bg));
}

.quest-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.quest-icon {
  font-size: 2.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.quest-xp {
  background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
  color: white;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--text-sm);
}

.quest-title {
  font-weight: 600;
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.quest-description {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
}

.quest-progress {
  width: 100%;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF6B6B, #4ECDC4);
  border-radius: var(--radius-full);
  transition: width 0.3s;
}

.quest-progress-text {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-align: right;
}

/* ============================================
   ACTIVITY TIMELINE
   ============================================ */
.activity-timeline {
  position: relative;
  padding-left: var(--space-xl);
}

.activity-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #FF6B6B, #4ECDC4, #45B7D1);
  border-radius: var(--radius-full);
}

.activity-item {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  margin-left: var(--space-lg);
  transition: all 0.3s;
}

.activity-item::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--accent-primary);
  border-radius: 50%;
  border: 3px solid var(--bg-primary);
  box-shadow: 0 0 0 3px var(--accent-primary);
}

.activity-item:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.activity-title {
  font-weight: 600;
  color: var(--text-primary);
}

.activity-time {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.activity-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ============================================
   DEADLINES
   ============================================ */
.deadlines-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.deadline-card {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.deadline-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #FF6B6B, #FFA07A);
}

.deadline-card.urgent::before {
  background: linear-gradient(180deg, #EF4444, #F87171);
  animation: urgentPulse 2s ease-in-out infinite;
}

@keyframes urgentPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.deadline-card:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.deadline-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.deadline-content {
  flex: 1;
}

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

.deadline-meta {
  display: flex;
  gap: var(--space-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.deadline-time {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
  color: var(--accent-primary);
}

/* ============================================
   QUICK ACTIONS
   ============================================ */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-lg);
}

.quick-action-card {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  position: relative;
  overflow: hidden;
}

.quick-action-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.quick-action-card:hover::before {
  width: 200px;
  height: 200px;
}

.quick-action-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  border-color: var(--accent-primary);
}

.quick-action-icon {
  font-size: 3rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s;
  position: relative;
  z-index: 1;
}

.quick-action-card:hover .quick-action-icon {
  transform: scale(1.2) rotate(10deg);
  animation: bounce 0.6s ease-in-out;
}

.quick-action-label {
  font-weight: 600;
  color: var(--text-primary);
  position: relative;
  z-index: 1;
}

/* ============================================
   REWARDS SHOP
   ============================================ */
.coins-display {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: linear-gradient(135deg, #FFD700, #FFA500);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--text-lg);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.coin-icon {
  font-size: var(--text-xl);
  animation: coinSpin 3s linear infinite;
}

@keyframes coinSpin {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}

.rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-lg);
}

.reward-card {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.reward-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}

.reward-card:hover::after {
  opacity: 1;
  animation: rotate 2s linear infinite;
}

.reward-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  border-color: var(--accent-primary);
}

.reward-icon {
  font-size: 4rem;
  margin-bottom: var(--space-md);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s;
}

.reward-card:hover .reward-icon {
  transform: scale(1.2) rotate(10deg);
}

.reward-name {
  font-weight: 600;
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.reward-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.reward-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-weight: 700;
  font-size: var(--text-lg);
  color: #FFD700;
}

.reward-card.affordable {
  border-color: #22C55E;
}

.reward-card.affordable:hover {
  box-shadow: 0 12px 32px rgba(34, 197, 94, 0.3);
}

.reward-card.unaffordable {
  opacity: 0.5;
  cursor: not-allowed;
}

.reward-card.unaffordable:hover {
  transform: none;
}

/* ============================================
   STREAK CALENDAR
   ============================================ */
.streak-calendar {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--glass-shadow);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.calendar-nav {
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  cursor: pointer;
  transition: all 0.3s;
}

.calendar-nav:hover {
  background: var(--accent-primary);
  color: white;
}

.calendar-month {
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--text-primary);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-sm);
}

.calendar-day-header {
  text-align: center;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--space-sm);
}

.calendar-day {
  aspect-ratio: 1;
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: all 0.3s;
  position: relative;
  background: var(--bg-secondary);
}

.calendar-day.learned {
  background: linear-gradient(135deg, #22C55E, #16A34A);
  border-color: #22C55E;
  color: white;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.calendar-day.streak {
  background: linear-gradient(135deg, #FF6B6B, #FFA07A);
  border-color: #FF6B6B;
  color: white;
  box-shadow: 0 0 15px rgba(255, 107, 107, 0.6);
  animation: streakGlow 2s ease-in-out infinite;
}

@keyframes streakGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(255, 107, 107, 0.6); }
  50% { box-shadow: 0 0 25px rgba(255, 107, 107, 0.9); }
}

.calendar-day.today {
  border-color: var(--accent-primary);
  border-width: 3px;
  transform: scale(1.1);
}

.calendar-day.other-month {
  opacity: 0.3;
}

/* Additional Badge Types */
.badge-card.rare {
  border-color: #7C3AED;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), var(--glass-bg));
}

.badge-card.epic {
  border-color: #EC4899;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), var(--glass-bg));
}

.badge-card.legendary {
  border-color: #F59E0B;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), var(--glass-bg));
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}

/* ============================================
   ENHANCED TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

h1 {
  font-size: var(--text-4xl);
  font-weight: 800;
}

h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
}

h3 {
  font-size: var(--text-2xl);
  font-weight: 600;
}

p {
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Global fix for text on secondary/tertiary backgrounds */
[style*="background: var(--bg-secondary)"],
[style*="background: var(--bg-tertiary)"],
.bg-secondary,
.bg-tertiary {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] [style*="background: var(--bg-secondary)"],
[data-theme="dark"] [style*="background: var(--bg-tertiary)"],
[data-theme="dark"] .bg-secondary,
[data-theme="dark"] .bg-tertiary {
  color: var(--text-on-bg-secondary) !important;
}

/* ============================================
   ENHANCED CARDS
   ============================================ */
.card-enhanced {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  transition: all var(--transition-smooth);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
}

.card-enhanced:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.06);
  border-color: var(--accent-primary);
}

/* ============================================
   ENHANCED INPUTS
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-base);
  transition: all var(--transition-base);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 
    0 0 0 4px rgba(255, 119, 0, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.95);
}

/* ============================================
   ENHANCED LOADING STATES
   ============================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 0%,
    var(--bg-tertiary) 50%,
    var(--bg-secondary) 100%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

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

/* ============================================
   ENHANCED SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  margin: var(--space-sm);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
  border-radius: var(--radius-full);
  border: 3px solid var(--bg-secondary);
  transition: background var(--transition-base);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #FF5252, #26A69A);
}

/* Enhanced Mobile Responsiveness for Gamification */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-md);
  }

  .main-content {
    padding: var(--space-xl) 0 var(--space-2xl);
  }

  section {
    margin-bottom: var(--section-spacing-mobile);
  }

  .dashboard-header {
    margin-bottom: var(--space-2xl);
    padding: var(--space-lg) 0;
  }

  .dashboard-header h1 {
    font-size: var(--text-2xl);
  }

  .section-header {
    margin-bottom: var(--space-xl);
  }

  .section-header h2 {
    font-size: var(--text-2xl);
  }

  .xp-container {
    padding: var(--space-md);
  }

  .level-badge {
    font-size: var(--text-base);
    padding: var(--space-xs) var(--space-md);
  }

  .badges-container {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-md);
  }

  .badge-icon {
    font-size: 2.5rem;
  }

  .leaderboard-item {
    padding: var(--space-sm);
  }

  .leaderboard-avatar {
    width: 40px;
    height: 40px;
    font-size: var(--text-base);
  }

  .streak-number {
    font-size: 3rem;
  }

  .achievement-popup {
    padding: var(--space-lg);
    max-width: 90vw;
  }

  .achievement-icon {
    font-size: 3rem;
  }

  .message-toast {
    bottom: var(--space-md);
    right: var(--space-md);
    left: var(--space-md);
    max-width: none;
  }

  .quests-container {
    grid-template-columns: 1fr;
  }

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

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

  .calendar-grid {
    gap: var(--space-xs);
  }

  .calendar-day {
    font-size: var(--text-xs);
  }

  .admin-stats-overview,
  .teacher-stats-overview {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .admin-stat-card,
  .teacher-stat-card {
    padding: var(--space-lg);
    flex-direction: column;
    text-align: center;
  }

  .dashboard-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .dashboard-tabs::-webkit-scrollbar {
    height: 4px;
  }

  .dashboard-tabs::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #FF6B6B, #4ECDC4);
    border-radius: var(--radius-full);
  }

  .teachers-list,
  .students-list,
  .classes-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .analytics-container {
    grid-template-columns: 1fr;
  }

  .ppt-grid,
  .activity-grid {
    grid-template-columns: 1fr;
  }
}

/* Additional Kid-Friendly Enhancements */

/* Fun Scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #FF5252, #26A69A);
}

/* Removed duplicate - using consolidated styles above */

/* Fun Loading States */
.loading-skeleton {
  background: linear-gradient(90deg, 
    var(--bg-secondary) 0%, 
    var(--bg-tertiary) 50%, 
    var(--bg-secondary) 100%);
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

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

/* Enhanced Cards with 3D Effect */
.card-3d {
  transform-style: preserve-3d;
  transition: transform var(--transition-smooth);
}

.card-3d:hover {
  transform: perspective(1000px) rotateY(5deg) rotateX(5deg) translateZ(10px);
}

/* Apply 3D effect to all cards */
.course-card,
.school-card,
.role-card,
.stat-card,
.badge-card,
.quest-card,
.reward-card,
.teacher-card,
.student-card,
.class-card {
  transform-style: preserve-3d;
  transition: all var(--transition-smooth);
}

.course-card:hover,
.school-card:hover,
.role-card:hover,
.stat-card:hover,
.badge-card:hover,
.quest-card:hover,
.reward-card:hover,
.teacher-card:hover,
.student-card:hover,
.class-card:hover {
  transform: perspective(1000px) rotateY(2deg) rotateX(2deg) translateZ(5px) translateY(-8px);
}

/* Fun Emoji Animations */
.emoji-bounce {
  display: inline-block;
  animation: emojiBounce 1s ease-in-out infinite;
}

@keyframes emojiBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(-10deg); }
  75% { transform: translateY(-10px) rotate(10deg); }
}

/* Gradient Text Effect */
.gradient-text {
  background: linear-gradient(135deg, #FF6B6B, #4ECDC4, #45B7D1, #FFA07A);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease infinite;
}

/* Enhanced Focus States for Accessibility */
*:focus-visible {
  outline: 3px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Smooth Page Transitions with Enhanced Effects */
.view-container {
  animation: pageFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.view-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1, #FFA07A);
  background-size: 200% 100%;
  transform: scaleX(0);
  animation: pageLoadBar 0.6s ease-out forwards;
  border-radius: var(--radius-full);
}

@keyframes pageLoadBar {
  to {
    transform: scaleX(1);
  }
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Enhanced Button Press Effect with Ripple */
.btn-primary,
.btn-secondary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after,
.btn-secondary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-primary:active::after,
.btn-secondary:active::after {
  width: 300px;
  height: 300px;
}

.btn-primary:active,
.btn-secondary:active {
  transform: scale(0.96);
  transition: transform 0.1s;
}

/* Fun Hover Effects for Links */
a:not(.btn-primary):not(.btn-secondary):hover {
  color: var(--accent-primary);
  text-decoration: underline;
  text-decoration-color: var(--accent-primary);
  text-underline-offset: 4px;
}

/* Enhanced Modal Backdrop with Scale Animation */
.modal.active {
  animation: modalFadeIn 0.3s ease;
}

.modal.active .modal-content {
  animation: modalSlideScale 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes modalFadeIn {
  from { 
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to { 
    opacity: 1;
    backdrop-filter: blur(12px);
  }
}

@keyframes modalSlideScale {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Improved Form Validation Styles */
input:invalid:not(:placeholder-shown) {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

input:valid:not(:placeholder-shown) {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* Enhanced Tooltip with Animation */
.tooltip {
  position: relative;
  cursor: help;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--space-sm));
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: linear-gradient(135deg, var(--text-primary), #333);
  color: white;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all var(--transition-base);
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + var(--space-xs));
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--text-primary);
  opacity: 0;
  transition: all var(--transition-base);
  z-index: 1001;
}

.tooltip:hover::after,
.tooltip:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Enhanced Selection with Gradient */
::selection {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.4), rgba(78, 205, 196, 0.4));
  color: var(--text-primary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

::-moz-selection {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.4), rgba(78, 205, 196, 0.4));
  color: var(--text-primary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ============================================
   ENHANCED ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-fade-in-down {
  animation: fadeInDown 0.6s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.4s ease-out;
}

/* Stagger animations for lists */
.animate-stagger > * {
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
  opacity: 0;
}

.animate-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.animate-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.animate-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.animate-stagger > *:nth-child(4) { animation-delay: 0.2s; }
.animate-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.animate-stagger > *:nth-child(6) { animation-delay: 0.3s; }
.animate-stagger > *:nth-child(7) { animation-delay: 0.35s; }
.animate-stagger > *:nth-child(8) { animation-delay: 0.4s; }

/* Floating Animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

/* Pulse Glow Animation */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 107, 107, 0.8);
  }
}

.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* Shimmer Effect */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* Rotate Animation */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate-animation {
  animation: rotate 3s linear infinite;
}

/* Bounce In Animation */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.bounce-in {
  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Slide In From Right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  animation: slideInRight 0.5s ease-out;
}

/* Slide In From Left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slideInLeft 0.5s ease-out;
}

/* Zoom In Animation */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.zoom-in {
  animation: zoomIn 0.4s ease-out;
}

/* Fade In with Scale */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.fade-in-scale {
  animation: fadeInScale 0.5s ease-out;
}

/* ============================================
   NOTIFICATION SYSTEM
   ============================================ */
.notification-bell {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: all 0.3s;
  color: white;
  font-size: var(--text-xl);
}

.notification-bell:hover {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.notification-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #EF4444;
  color: white;
  border-radius: var(--radius-full);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  border: 2px solid white;
  animation: pulse 2s ease-in-out infinite;
}

.notification-center {
  position: fixed;
  bottom: 100px;
  right: var(--space-xl);
  width: 400px;
  max-width: 90vw;
  max-height: 500px;
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur-strong);
  -webkit-backdrop-filter: var(--backdrop-blur-strong);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
  z-index: 999;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.notification-center.active {
  display: flex;
  animation: slideUp 0.3s ease-out;
}

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

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

.notification-list {
  overflow-y: auto;
  flex: 1;
}

.notification-item {
  padding: var(--space-md);
  border-bottom: 1px solid var(--glass-border);
  transition: all 0.3s;
  cursor: pointer;
}

.notification-item:hover {
  background: var(--bg-secondary);
}

.notification-item.unread {
  background: rgba(59, 130, 246, 0.1);
  border-left: 4px solid var(--info);
}

.notification-title {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
}

.notification-message {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.notification-time {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-xs);
}

/* ============================================
   ADMIN & TEACHER STATS OVERVIEW
   ============================================ */
.admin-stats-overview,
.teacher-stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
  padding: 0 var(--space-md);
}

.admin-stat-card,
.teacher-stat-card {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  min-height: 120px;
}

[data-theme="dark"] .admin-stat-card,
[data-theme="dark"] .teacher-stat-card {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

.admin-stat-card::before,
.teacher-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1);
  background-size: 200% 100%;
  transform: scaleX(0);
  transition: transform var(--transition-base);
  animation: rainbowFlow 3s linear infinite;
}

.admin-stat-card:hover::before,
.teacher-stat-card:hover::before {
  transform: scaleX(1);
}

.admin-stat-card:hover,
.teacher-stat-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 16px 48px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.06);
  border-color: var(--accent-primary);
}

.admin-stat-icon,
.teacher-stat-icon {
  font-size: 3rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  transition: transform var(--transition-base);
}

.admin-stat-card:hover .admin-stat-icon,
.teacher-stat-card:hover .teacher-stat-icon {
  transform: scale(1.2) rotate(10deg);
  animation: bounce 0.6s ease-in-out;
}

.admin-stat-content h3,
.teacher-stat-content h3 {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="dark"] .admin-stat-content h3,
[data-theme="dark"] .teacher-stat-content h3 {
  background: linear-gradient(135deg, var(--saffron), var(--indigo-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.admin-stat-content p,
.teacher-stat-content p {
  font-size: var(--text-sm);
  color: var(--text-on-bg-secondary);
  font-weight: 600;
}

[data-theme="dark"] .admin-stat-content p,
[data-theme="dark"] .teacher-stat-content p {
  color: var(--text-on-bg-secondary) !important;
}

/* ============================================
   ENHANCED LISTS & GRIDS
   ============================================ */
.enhanced-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.enhanced-list-item {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.enhanced-list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #FF6B6B, #4ECDC4);
  transform: scaleY(0);
  transition: transform var(--transition-base);
}

.enhanced-list-item:hover::before {
  transform: scaleY(1);
}

.enhanced-list-item:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--accent-primary);
}

.enhanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-xl);
}

.enhanced-grid-item {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.enhanced-grid-item::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}

.enhanced-grid-item:hover::after {
  opacity: 1;
  animation: rotate 2s linear infinite;
}

.enhanced-grid-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
  border-color: var(--accent-primary);
}

/* ============================================
   TEACHER & ADMIN SPECIFIC STYLES
   ============================================ */
.teachers-list,
.students-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-xl);
}

.teacher-card,
.student-card,
.class-card {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

.teacher-card::before,
.student-card::before,
.class-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1);
  background-size: 200% 100%;
  transform: scaleX(0);
  transition: transform var(--transition-base);
  animation: rainbowFlow 3s linear infinite;
}

.teacher-card:hover::before,
.student-card:hover::before,
.class-card:hover::before {
  transform: scaleX(1);
}

.teacher-card:hover,
.student-card:hover,
.class-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 16px 48px rgba(0, 0, 0, 0.16),
    0 4px 16px rgba(0, 0, 0, 0.08);
  border-color: var(--accent-primary);
}

.classes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-xl);
}

/* Enhanced Analytics Cards */
.analytics-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-2xl);
}

.chart-container {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-smooth);
}

.chart-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  border-color: var(--accent-primary);
}

.at-risk-students {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--error);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
}

/* Enhanced PPT Grid */
.ppt-grid,
.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-xl);
}

.ppt-card,
.activity-card {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-smooth);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.ppt-card:hover,
.activity-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
  border-color: var(--accent-primary);
}

/* Enhanced Attendance Table */
.attendance-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.attendance-table thead {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(78, 205, 196, 0.1));
}

.attendance-table th {
  padding: var(--space-lg);
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 2px solid var(--glass-border);
}

.attendance-table td {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--glass-border);
  transition: background var(--transition-fast);
}

.attendance-table tbody tr:hover {
  background: rgba(255, 107, 107, 0.05);
}

.attendance-table tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================
   ENHANCED GAMIFICATION ELEMENTS
   ============================================ */

/* Leaderboard Styles */
.leaderboard-container {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--glass-shadow);
  margin-top: var(--space-2xl);
}

.leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--glass-border);
}

.leaderboard-header h3 {
  color: var(--text-primary);
  font-size: var(--text-2xl);
  font-weight: 700;
  background: linear-gradient(135deg, var(--saffron), var(--indigo));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.leaderboard-item {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.leaderboard-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(135deg, var(--saffron), var(--indigo));
  transform: scaleY(0);
  transition: transform var(--transition-base);
}

.leaderboard-item:hover::before {
  transform: scaleY(1);
}

.leaderboard-item:hover {
  transform: translateX(8px);
  border-color: var(--accent-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .leaderboard-item:hover {
  background: rgba(0, 0, 0, 0.8);
}

.leaderboard-rank {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--accent-primary);
  min-width: 50px;
  text-align: center;
}

.leaderboard-rank.top-1 {
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.leaderboard-rank.top-2 {
  color: #C0C0C0;
  text-shadow: 0 0 10px rgba(192, 192, 192, 0.5);
}

.leaderboard-rank.top-3 {
  color: #CD7F32;
  text-shadow: 0 0 10px rgba(205, 127, 50, 0.5);
}

.leaderboard-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--saffron), var(--indigo));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: white;
  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.leaderboard-info {
  flex: 1;
}

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

.leaderboard-stats {
  display: flex;
  gap: var(--space-lg);
  font-size: var(--text-sm);
}

.leaderboard-stat {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-on-bg-secondary);
  font-weight: 600;
}

.leaderboard-xp {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--accent-primary);
  min-width: 100px;
  text-align: right;
}

/* Achievement Popup */
.achievement-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: linear-gradient(135deg, var(--saffron), var(--indigo));
  color: white;
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  text-align: center;
  animation: achievementPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  border: 4px solid white;
}

@keyframes achievementPop {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1) rotate(10deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

.achievement-popup-icon {
  font-size: 4rem;
  margin-bottom: var(--space-md);
  animation: bounce 1s ease-in-out infinite;
}

.achievement-popup-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  margin-bottom: var(--space-sm);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.achievement-popup-description {
  font-size: var(--text-lg);
  opacity: 0.95;
}

/* Level Up Animation */
.level-up-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.level-up-content {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: white;
  padding: var(--space-3xl);
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: 0 20px 60px rgba(255, 215, 0, 0.5);
  animation: levelUpPop 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border: 4px solid white;
}

@keyframes levelUpPop {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.level-up-icon {
  font-size: 5rem;
  margin-bottom: var(--space-lg);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.level-up-title {
  font-size: var(--text-4xl);
  font-weight: 900;
  margin-bottom: var(--space-md);
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Enhanced XP Bar */
.xp-bar-wrapper {
  position: relative;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  height: 32px;
  overflow: hidden;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05);
  border: 2px solid var(--glass-border);
}

.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, 
    var(--saffron) 0%, 
    var(--indigo) 50%, 
    var(--primary-pink) 100%);
  border-radius: var(--radius-full);
  position: relative;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    inset 0 1px 3px rgba(255, 255, 255, 0.4),
    0 0 20px rgba(255, 138, 80, 0.4);
  animation: xpGlow 2s ease-in-out infinite;
}

@keyframes xpGlow {
  0%, 100% {
    box-shadow: 
      inset 0 1px 3px rgba(255, 255, 255, 0.4),
      0 0 20px rgba(255, 138, 80, 0.4);
  }
  50% {
    box-shadow: 
      inset 0 1px 3px rgba(255, 255, 255, 0.4),
      0 0 30px rgba(255, 138, 80, 0.6);
  }
}

.xp-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  animation: xpShine 2s infinite;
}

@keyframes xpShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.xp-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  z-index: 1;
}

/* Streak Fire Animation */
.streak-container {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 160, 122, 0.1));
  border: 2px solid var(--streak-fire);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.streak-container::before {
  content: '🔥';
  position: absolute;
  font-size: 3rem;
  opacity: 0.2;
  animation: fireFloat 3s ease-in-out infinite;
}

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

.streak-number {
  font-size: var(--text-4xl);
  font-weight: 900;
  color: var(--streak-fire);
  text-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
  animation: streakPulse 2s ease-in-out infinite;
}

@keyframes streakPulse {
  0%, 100% {
    transform: scale(1);
    text-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
  }
  50% {
    transform: scale(1.1);
    text-shadow: 0 0 30px rgba(255, 107, 107, 0.8);
  }
}

.streak-label {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-top: var(--space-xs);
}

/* Challenge Cards */
.challenge-card {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.challenge-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--saffron), var(--indigo));
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.challenge-card:hover::before {
  transform: scaleX(1);
}

.challenge-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  border-color: var(--accent-primary);
}

.challenge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.challenge-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
}

.challenge-reward {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 700;
  color: var(--accent-primary);
  font-size: var(--text-lg);
}

.challenge-progress {
  margin-top: var(--space-md);
}

.challenge-progress-bar {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-sm);
}

.challenge-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--saffron), var(--indigo));
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

/* Enhanced Badge Cards */
.badge-card {
  position: relative;
  overflow: visible;
}

.badge-card.earned::after {
  content: '✨';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 2rem;
  animation: sparkle 2s ease-in-out infinite;
  z-index: 10;
}

@keyframes sparkle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.3) rotate(180deg);
    opacity: 0.8;
  }
}

.badge-card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

.badge-card-description {
  font-size: var(--text-sm);
  color: var(--text-on-bg-secondary);
  font-weight: 500;
  line-height: 1.5;
}

/* Quest System */
.quest-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.quest-card {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.quest-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 138, 80, 0.05), rgba(99, 102, 241, 0.05));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.quest-card:hover::after {
  opacity: 1;
}

.quest-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  border-color: var(--accent-primary);
}

.quest-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  display: block;
  text-align: center;
}

.quest-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  text-align: center;
}

.quest-description {
  font-size: var(--text-sm);
  color: var(--text-on-bg-secondary);
  text-align: center;
  margin-bottom: var(--space-lg);
  line-height: 1.6;
  font-weight: 500;
}

.quest-reward {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: linear-gradient(135deg, rgba(255, 138, 80, 0.1), rgba(99, 102, 241, 0.1));
  border-radius: var(--radius-md);
  font-weight: 700;
  color: var(--accent-primary);
}

/* Progress Celebration */
.progress-celebration {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10000;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--saffron);
  animation: confettiFall 3s ease-out forwards;
}

.confetti:nth-child(2n) {
  background: var(--indigo);
}

.confetti:nth-child(3n) {
  background: var(--primary-pink);
}

.confetti:nth-child(4n) {
  background: var(--comic-yellow);
}

@keyframes confettiFall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Enhanced Text Visibility Fixes - Comprehensive */
/* Ensure all text in course cards has proper contrast */
.course-card,
.course-card * {
  transition: color var(--transition-base);
}

/* Light theme - course cards */
.course-card {
  color: var(--text-primary);
}

.course-card .course-content h3 {
  color: var(--text-primary) !important;
}

.course-card .course-content p {
  color: var(--text-on-bg-secondary) !important;
}

.course-card .course-meta {
  color: var(--text-on-bg-secondary) !important;
}

/* Dark theme - course cards */
[data-theme="dark"] .course-card {
  color: var(--text-primary);
}

[data-theme="dark"] .course-card .course-content h3 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .course-card .course-content p {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .course-card .course-meta {
  color: var(--text-on-bg-secondary) !important;
}

/* Other elements */
[data-theme="dark"] .school-card .school-location,
[data-theme="dark"] .module-card p,
[data-theme="dark"] .badge-card-description {
  color: var(--text-on-bg-secondary);
}

/* Fix for elements with bg-secondary */
.bg-secondary-text {
  color: var(--text-on-bg-secondary) !important;
  font-weight: 500;
}

/* Enhanced Course Cards with Gamification */
.course-card {
  position: relative;
}

.course-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--saffron), var(--indigo), var(--primary-pink));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.course-card:hover::before {
  opacity: 1;
}

.course-progress-indicator {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: rgba(34, 197, 94, 0.95);
  color: #FFFFFF !important;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .course-progress-indicator {
  background: rgba(34, 197, 94, 1);
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.6);
}

/* ============================================
   COMPREHENSIVE FONT & BACKGROUND VISIBILITY FIXES
   ============================================ */

/* Global fix: All text on secondary/tertiary backgrounds */
[style*="background: var(--bg-secondary)"] p,
[style*="background: var(--bg-secondary)"] span,
[style*="background: var(--bg-secondary)"] div,
[style*="background: var(--bg-secondary)"] label,
.bg-secondary p,
.bg-secondary span,
.bg-secondary div,
.bg-secondary label {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] [style*="background: var(--bg-secondary)"] p,
[data-theme="dark"] [style*="background: var(--bg-secondary)"] span,
[data-theme="dark"] [style*="background: var(--bg-secondary)"] div,
[data-theme="dark"] [style*="background: var(--bg-secondary)"] label,
[data-theme="dark"] .bg-secondary p,
[data-theme="dark"] .bg-secondary span,
[data-theme="dark"] .bg-secondary div,
[data-theme="dark"] .bg-secondary label {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix all elements with var(--text-secondary) on secondary backgrounds */
[style*="background: var(--bg-secondary)"] [style*="color: var(--text-secondary)"],
.bg-secondary [style*="color: var(--text-secondary)"] {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix teacher cards, student cards, and all card elements */
.teacher-card p,
.teacher-card span,
.student-card p,
.student-card span,
.class-card p,
.class-card span,
.forum-card p,
.forum-card span,
.assignment-card p,
.assignment-card span {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .teacher-card p,
[data-theme="dark"] .teacher-card span,
[data-theme="dark"] .student-card p,
[data-theme="dark"] .student-card span,
[data-theme="dark"] .class-card p,
[data-theme="dark"] .class-card span,
[data-theme="dark"] .forum-card p,
[data-theme="dark"] .forum-card span,
[data-theme="dark"] .assignment-card p,
[data-theme="dark"] .assignment-card span {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix admin dashboard stat cards */
.admin-stat-card p,
.admin-stat-card span {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .admin-stat-card p,
[data-theme="dark"] .admin-stat-card span {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix all list items and empty state messages */
.enhanced-list p,
.teachers-list p,
.students-list p,
.classes-grid p {
  color: var(--text-on-bg-secondary) !important;
  font-weight: 500;
}

[data-theme="dark"] .enhanced-list p,
[data-theme="dark"] .teachers-list p,
[data-theme="dark"] .students-list p,
[data-theme="dark"] .classes-grid p {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix module cards and content */
.module-card p,
.module-card span,
.module-card div {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .module-card p,
[data-theme="dark"] .module-card span,
[data-theme="dark"] .module-card div {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix summary content and quiz previews */
.summary-content p,
.summary-content li,
.quiz-preview p {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .summary-content p,
[data-theme="dark"] .summary-content li,
[data-theme="dark"] .quiz-preview p {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix assignment previews */
.assignment-preview p,
.assignment-preview span {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .assignment-preview p,
[data-theme="dark"] .assignment-preview span {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix all hardcoded white backgrounds to adapt to theme */
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background: #FFFFFF"] {
  background: var(--bg-primary) !important;
}

[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background: #FFFFFF"] {
  background: var(--bg-primary) !important;
}

/* Fix all elements with var(--bg-white) */
[style*="background: var(--bg-white)"] {
  background: var(--bg-primary) !important;
}

[data-theme="dark"] [style*="background: var(--bg-white)"] {
  background: var(--bg-primary) !important;
}

/* Ensure text on white backgrounds is visible */
[style*="background: white"] p,
[style*="background: white"] span,
[style*="background: white"] div,
[style*="background: #fff"] p,
[style*="background: #fff"] span,
[style*="background: #fff"] div {
  color: var(--text-primary) !important;
}

[data-theme="dark"] [style*="background: white"] p,
[data-theme="dark"] [style*="background: white"] span,
[data-theme="dark"] [style*="background: white"] div,
[data-theme="dark"] [style*="background: #fff"] p,
[data-theme="dark"] [style*="background: #fff"] span,
[data-theme="dark"] [style*="background: #fff"] div {
  color: var(--text-primary) !important;
}

/* Fix all subtitle and description text */
.subtitle,
.description,
.meta-text,
.helper-text {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .subtitle,
[data-theme="dark"] .description,
[data-theme="dark"] .meta-text,
[data-theme="dark"] .helper-text {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix activity timeline and deadlines */
.activity-timeline p,
.activity-timeline span,
.deadlines-list p,
.deadlines-list span {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .activity-timeline p,
[data-theme="dark"] .activity-timeline span,
[data-theme="dark"] .deadlines-list p,
[data-theme="dark"] .deadlines-list span {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix quick actions */
.quick-action-card,
.quick-action-label {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .quick-action-card,
[data-theme="dark"] .quick-action-label {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix analytics and chart containers */
.analytics-container p,
.chart-container p,
.analytics-container span,
.chart-container span {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .analytics-container p,
[data-theme="dark"] .chart-container p,
[data-theme="dark"] .analytics-container span,
[data-theme="dark"] .chart-container span {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix at-risk student cards */
.at-risk-student-card p,
.at-risk-student-card span {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .at-risk-student-card p,
[data-theme="dark"] .at-risk-student-card span {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix forum posts */
.forum-post p,
.forum-post span,
.forum-post-content p {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .forum-post p,
[data-theme="dark"] .forum-post span,
[data-theme="dark"] .forum-post-content p {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix PPT and activity cards */
.ppt-card p,
.ppt-card span,
.activity-card p,
.activity-card span {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .ppt-card p,
[data-theme="dark"] .ppt-card span,
[data-theme="dark"] .activity-card p,
[data-theme="dark"] .activity-card span {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix attendance table */
.attendance-table td,
.attendance-table th {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .attendance-table td,
[data-theme="dark"] .attendance-table th {
  color: var(--text-primary) !important;
}

/* Fix exam generator */
.exam-generator-form p,
.exam-question p,
.generated-exam p {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .exam-generator-form p,
[data-theme="dark"] .exam-question p,
[data-theme="dark"] .generated-exam p {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix notes section */
.notes-section p,
.notes-section span {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .notes-section p,
[data-theme="dark"] .notes-section span {
  color: var(--text-on-bg-secondary) !important;
}

/* Fix submission cards */
.submission-card p,
.submission-card span {
  color: var(--text-on-bg-secondary) !important;
}

[data-theme="dark"] .submission-card p,
[data-theme="dark"] .submission-card span {
  color: var(--text-on-bg-secondary) !important;
}

/* Print Styles */
@media print {
  .site-header,
  .site-footer,
  .btn-primary,
  .btn-secondary,
  .mobile-menu-btn,
  .theme-toggle,
  .notification-bell,
  .notification-center {
    display: none;
  }
  
  body {
    background: white;
  }
}

/* =====================================================
   COURSE CATALOG – VIDEO BACKGROUND (50% + 50%)
===================================================== */

#viewCourseCatalog {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.3) 0%, 
    rgba(168, 85, 247, 0.3) 50%, 
    rgba(236, 72, 153, 0.3) 100%);
}

/* Video background wrapper */
.catalog-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  opacity: 0.4;
}

.catalog-video-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.6) 0%, 
    rgba(168, 85, 247, 0.6) 50%, 
    rgba(236, 72, 153, 0.6) 100%);
  z-index: 1;
}

/* Each half */
.video-half {
  height: 50%;
  width: 100%;
  overflow: hidden;
}

.video-half video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content above video */
#viewCourseCatalog .container {
  position: relative;
  z-index: 1;
}

/* =====================================================
   COURSE DETAIL – IMAGE BACKGROUND
===================================================== */

#viewCourseDetail {
  position: relative;
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.15) 0%, 
    rgba(168, 85, 247, 0.15) 50%, 
    rgba(236, 72, 153, 0.15) 100%),
    url("course_bg.png") center / cover no-repeat;
}

/* Optional overlay for readability */
#viewCourseDetail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.4) 0%, 
    rgba(168, 85, 247, 0.4) 50%, 
    rgba(236, 72, 153, 0.4) 100%);
  z-index: 0;
}

#viewCourseDetail .container {
  position: relative;
  z-index: 1;
}

/* 
catalog font colour
/*
/* =====================================================
   NEON COURSE CATALOG HEADER
===================================================== */

#viewCourseCatalog .catalog-header h1 {
  color: #FFFFFF;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(139, 92, 246, 0.5);
}

/* Subtitle – softer */
#viewCourseCatalog .catalog-header p {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.1rem;
  font-weight: 500;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(168, 85, 247, 0.4);
}
/* =====================================================
   HEADER / NAVBAR – ONLY BACKGROUND IMAGE
   (NO TEXT / SIZE / PADDING CHANGE)
===================================================== */

/* Apply image only */
.site-header,
header,
.top-nav,
.navbar {
  background-image: url("main_top.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Light overlay so text remains readable */
.site-header::before,
header::before,
.top-nav::before,
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  z-index: 0;
}

/* Ensure content stays above overlay */
.site-header *,
header *,
.top-nav *,
.navbar * {
  position: relative;
  z-index: 1;
}
/* =====================================================
   SINGLE HEADER FIX – NO DUPLICATE
===================================================== */

.site-header {
  background-image: url("main_top.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Light overlay */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  z-index: 0;
}

/* Keep text above overlay */
.site-header > * {
  position: relative;
  z-index: 1;
}
/* =====================================================
   FOOTER VIDEO BACKGROUND – LIGHT (70% VISIBILITY)
===================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
}

/* Video container */
.site-footer .footer-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Video itself */
.site-footer .footer-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7; /* 🔥 70% visibility */
}

/* Light overlay for readability */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 1;
}

/* Footer content above video */
.site-footer .footer-container {
  position: relative;
  z-index: 2;
}
/* =====================================================
   TOP NAVBAR – TEXT VISIBILITY & BOLD FIX
===================================================== */

/* Logo text */
.site-header .logo,
.site-header .brand,
.site-header h1 {
  color: #1f2937 !important;   /* dark slate */
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}

/* Ensure brand-name is not affected by generic logo styles */
.site-header .brand-name {
  /* Override any conflicting styles - glass morphism takes precedence */
  color: transparent !important;
  text-shadow: none !important;
}

/* Nav links */
.site-header a,
.site-header .nav-link {
  color: #111827 !important;   /* near-black */
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}

/* Active tab */
.site-header .active,
.site-header .nav-link.active {
  color: #ea580c !important;   /* strong orange */
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}

/* Icons (theme, notification) */
.site-header button,
.site-header .icon-btn {
  color: #111827 !important;
}
/* =====================================================
   NEON LOGO TEXT – MyGurukul
===================================================== */

.site-header .logo,
.site-header .brand,
.site-header h1 {
  color: #ff6a00 !important; /* neon orange base */
  font-weight: 900 !important;
  letter-spacing: 0.5px;

  /* Neon glow layers */
  text-shadow:
    0 0 4px rgba(255, 106, 0, 0.9),
    0 0 8px rgba(255, 140, 0, 0.8),
    0 0 16px rgba(255, 165, 0, 0.6),
    0 0 28px rgba(255, 186, 73, 0.4);

  transition: text-shadow 0.3s ease, transform 0.3s ease;
}

/* Ensure brand-name glass effect is not overridden */
.site-header .brand-name {
  color: transparent !important;
  text-shadow: none !important;
}

/* Optional hover glow boost */
.site-header .logo:hover,
.site-header .brand:hover,
.site-header h1:hover {
  text-shadow:
    0 0 6px rgba(255, 106, 0, 1),
    0 0 14px rgba(255, 140, 0, 0.95),
    0 0 30px rgba(255, 165, 0, 0.8),
    0 0 50px rgba(255, 186, 73, 0.6);
}
/*calandar/*
/* ===============================
   Learning Calendar Day Background
================================ */

.calendar-day {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  overflow: hidden;
  color: #ffffff;
}

/* soft overlay to control visibility */
.calendar-day::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2); /* adjust if needed */
  z-index: 1;
}

/* date number above image */
.calendar-day span {
  position: relative;
  z-index: 2;
  font-weight: 600;
}
.calendar-day {
  position: relative;
  overflow: hidden;
}

/* Dark overlay for readability */
.calendar-day::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2); /* 80% visibility image */
  z-index: 1;
}

/* Day number on top */
.calendar-day-number {
  position: relative;
  z-index: 2;
  color: #ffffff;
  font-weight: 600;
}
/* ===============================
   Learning Calendar – Visual Boost
================================ */

/* Make background image lighter */
.calendar-day::before {
  background: rgba(255, 255, 255, 0.25); /* lighter overlay */
}

/* Make date numbers bolder & clearer */
.calendar-day-number {
  font-weight: 800;              /* ~30% bolder */
  font-size: 1.1em;              /* slight size boost */
  color: #111827;                /* dark, readable */
  text-shadow: 
    0 1px 2px rgba(255,255,255,0.9),
    0 0 4px rgba(255,255,255,0.6);
}

/* Extra emphasis for today */
.calendar-day.today .calendar-day-number {
  font-weight: 900;
  color: #000000;
}

/* Learned days stand out a bit more */
.calendar-day.learned::before {
  background: rgba(255, 255, 255, 0.15);
}
/* =========================================
   Learning Calendar – BIG BOLD DATE NUMBERS
========================================= */

/* Calendar cell base */
.calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Lighter background overlay */
.calendar-day::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.35); /* lighter bg */
  z-index: 1;
}

/* BIG date number */
.calendar-day-number {
  position: relative;
  z-index: 2;

  font-size: 3.5rem;        /* 🔥 covers ~70% height */
  font-weight: 900;         /* extra bold */
  line-height: 1;

  color: #0f172a;           /* deep dark */
  text-shadow:
    0 2px 6px rgba(255,255,255,0.9),
    0 0 12px rgba(255,255,255,0.7);
}

/* Today extra emphasis */
.calendar-day.today .calendar-day-number {
  font-size: 3.8rem;
  color: #000000;
}

/* Learned days slightly stronger */
.calendar-day.learned::before {
  background: rgba(255, 255, 255, 0.25);
}
/* =========================================
   LEARNING CALENDAR – NEON DATE STYLE
========================================= */

.calendar-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease;
}

/* Light background so image stays visible */
.calendar-day::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.35);
  z-index: 1;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* BIG neon date number */
.calendar-day-number {
  position: relative;
  z-index: 2;

  font-family: "Poppins", sans-serif;
  font-size: 3.6rem;     /* ~70% of block */
  font-weight: 900;
  line-height: 1;

  color: #00eaff;        /* neon cyan */
  text-shadow:
    0 0 4px rgba(0,234,255,0.8),
    0 0 10px rgba(0,234,255,0.9),
    0 0 22px rgba(0,234,255,0.7),
    0 0 40px rgba(0,234,255,0.5);

  transition: text-shadow 0.3s ease, transform 0.3s ease;
}

/* TODAY – strong neon identity */
.calendar-day.today .calendar-day-number {
  color: #ff3df5; /* neon pink */
  text-shadow:
    0 0 6px rgba(255,61,245,1),
    0 0 14px rgba(255,61,245,0.9),
    0 0 30px rgba(255,61,245,0.8),
    0 0 55px rgba(255,61,245,0.6);
}

/* 🔥 HOVER EFFECT – same neon as TODAY */
.calendar-day:hover::before {
  background: rgba(255, 61, 245, 0.18);
  box-shadow:
    inset 0 0 25px rgba(255,61,245,0.35),
    0 0 35px rgba(255,61,245,0.6),
    0 0 70px rgba(255,61,245,0.4);
}

/* Hover zoom */
.calendar-day:hover {
  transform: scale(1.06);
}

/* Hover glow on number */
.calendar-day:hover .calendar-day-number {
  text-shadow:
    0 0 8px rgba(255,61,245,1),
    0 0 18px rgba(255,61,245,0.95),
    0 0 40px rgba(255,61,245,0.85),
    0 0 70px rgba(255,61,245,0.7);
}
/* =========================================
   LEARNING CALENDAR – FINAL DATE STYLING
========================================= */

/* Base calendar cell */
.calendar-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Default background overlay (light) */
.calendar-day::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.35);
  z-index: 1;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* =====================
   DATE NUMBER – DEFAULT
===================== */
.calendar-day-number {
  position: relative;
  z-index: 2;

  font-family: "Poppins", sans-serif;
  font-size: 3.6rem;        /* ~70% coverage */
  font-weight: 900;
  line-height: 1;

  color: #000000;           /* BLACK dates */
  text-shadow:
    0 1px 2px rgba(255,255,255,0.9);
}

/* =====================
   TODAY – SOFT LIGHT BLUE NEON (READABLE)
===================== */
.calendar-day.today .calendar-day-number {
  color: #4da3ff; /* soft light blue */

  text-shadow:
    0 0 2px rgba(77,163,255,0.8),
    0 0 6px rgba(77,163,255,0.6),
    0 0 12px rgba(77,163,255,0.4);
}

/* TODAY – FULL IMAGE VISIBILITY */
.calendar-day.today::before {
  background: rgba(255, 255, 255, 0); /* no fade */
  box-shadow: none;
}


/* =====================
   HOVER EFFECT (SUBTLE)
===================== */
.calendar-day:hover::before {
  background: rgba(0, 123, 255, 0.12);
  box-shadow:
    inset 0 0 18px rgba(0,123,255,0.25),
    0 0 28px rgba(0,123,255,0.35);
}

/* Slight zoom on hover */
.calendar-day:hover {
  transform: scale(1.05);
}
/* =========================
   FOOTER – BLACK & BOLD TEXT
========================= */

.site-footer,
.site-footer h3,
.site-footer h4,
.site-footer p,
.site-footer a,
.site-footer li,
.site-footer span {
  color: #000000 !important;
  font-weight: 700 !important;
}

/* Remove any opacity or fade */
.site-footer * {
  opacity: 1 !important;
}

/* Optional: improve link hover clarity */
.site-footer a:hover {
  text-decoration: underline;
}
/* =========================
   FOOTER – BLACK & BOLD TEXT
========================= */

.site-footer,
.site-footer h3,
.site-footer h4,
.site-footer p,
.site-footer a,
.site-footer li,
.site-footer span {
  color: #000000 !important;
  font-weight: 700 !important;
}

/* Remove any opacity or fade */
.site-footer * {
  opacity: 1 !important;
}

/* Optional: improve link hover clarity */
.site-footer a:hover {
  text-decoration: underline;
}
/* =========================
   TOP NAV – SINGLE LINE + FULL WIDTH
========================= */

/* Header nav container */
.site-header nav,
.nav-links,
.nav-menu {
  display: flex;
  justify-content: space-between; /* max distribution */
  align-items: center;
  width: 100%;
  padding: 0 60px; /* extra side spacing */
}

/* Each nav item */
.site-header nav a,
.nav-links a,
.nav-menu li a {
  font-size: 1.35rem;   /* enlarged */
  font-weight: 700;
  color: #000;
  padding: 14px 26px;
  white-space: nowrap; /* 🔥 THIS PREVENTS LINE BREAK */
  text-align: center;
  flex-shrink: 0;      /* prevents compression */
}

/* Optional: even MORE spacing feel */
.nav-links a:not(:last-child),
.nav-menu li:not(:last-child) {
  margin-right: 40px;
}

/* Active item (Dashboard) */
.nav-links a.active,
.nav-menu a.active {
  border: 2px solid #ff8c42;
  border-radius: 14px;
}
/* =========================
   TOP NAV – SINGLE LINE + FULL WIDTH
========================= */

/* Header nav container */
.site-header nav,
.nav-links,
.nav-menu {
  display: flex;
  justify-content: space-between; /* max distribution */
  align-items: center;
  width: 100%;
  padding: 0 60px; /* extra side spacing */
}

/* Each nav item */
.site-header nav a,
.nav-links a,
.nav-menu li a {
  font-size: 1.35rem;   /* enlarged */
  font-weight: 700;
  color: #000;
  padding: 14px 26px;
  white-space: nowrap; /* 🔥 THIS PREVENTS LINE BREAK */
  text-align: center;
  flex-shrink: 0;      /* prevents compression */
}

/* Optional: even MORE spacing feel */
.nav-links a:not(:last-child),
.nav-menu li:not(:last-child) {
  margin-right: 40px;
}

/* Active item (Dashboard) */
.nav-links a.active,
.nav-menu a.active {
  border: 2px solid #ff8c42;
  border-radius: 14px;
}

.hidden {
  display: none !important;
}
/* =========================================
   COURSE CATALOG – ALWAYS BLACK TEXT
========================================= */

#viewCourseCatalog .catalog-header h1,
#viewCourseCatalog .catalog-header p {
  color: #000000 !important;
  font-weight: 700;
}

/* ============================================
   EXAM GENERATOR STYLES
   ============================================ */

.exam-generator-card {
  background: var(--bg-secondary, #ffffff);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  border: 1px solid var(--border, #e2e8f0);
}

.exam-section-title {
  font-size: 1.5em;
  font-weight: 600;
  color: var(--primary, #2563eb);
  margin-bottom: 24px;
  margin-top: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border, #e2e8f0);
  display: flex;
  align-items: center;
  gap: 10px;
}

.exam-section-title:first-child {
  margin-top: 0;
}

.exam-section-title::before {
  content: '';
  width: 4px;
  height: 24px;
  background: var(--primary, #2563eb);
  border-radius: 2px;
}

.exam-form-group {
  margin-bottom: 24px;
}

.exam-form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text, #1e293b);
  font-size: 0.95em;
}

.exam-form-group input,
.exam-form-group select,
.exam-form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 1em;
  transition: all 0.2s;
  font-family: inherit;
}

.exam-form-group input:focus,
.exam-form-group select:focus,
.exam-form-group textarea:focus {
  outline: none;
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.exam-form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.exam-form-group small {
  display: block;
  margin-top: 6px;
  color: var(--text-light, #64748b);
  font-size: 0.85em;
}

.exam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.file-upload-area {
  border: 3px dashed var(--primary, #2563eb);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  background: #f0f4ff;
  cursor: pointer;
  transition: all 0.3s;
}

.file-upload-area:hover {
  background: #e0e7ff;
  border-color: var(--secondary, #7c3aed);
}

.file-upload-area.dragover {
  background: #dbeafe;
  border-color: var(--primary, #2563eb);
  transform: scale(1.01);
}

.file-upload-area input[type="file"] {
  display: none;
}

.file-upload-icon {
  font-size: 3.5em;
  margin-bottom: 16px;
  color: var(--primary, #2563eb);
}

.file-upload-text {
  font-size: 1.1em;
  color: var(--text, #1e293b);
  margin-bottom: 8px;
  font-weight: 500;
}

.file-upload-hint {
  font-size: 0.9em;
  color: var(--text-light, #64748b);
}

.file-selected {
  margin-top: 16px;
  padding: 16px;
  background: #d1fae5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--success, #10b981);
}

.file-selected span {
  color: #065f46;
  font-weight: 600;
}

.file-selected button {
  background: var(--danger, #ef4444);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
  transition: background 0.2s;
}

.file-selected button:hover {
  background: #dc2626;
}

.question-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.exam-checkbox-label {
  display: flex;
  align-items: center;
  padding: 14px;
  background: #f8fafc;
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.exam-checkbox-label:hover {
  background: #f1f5f9;
  border-color: var(--primary, #2563eb);
}

.exam-checkbox-label input[type="checkbox"],
.exam-checkbox-label input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  cursor: pointer;
  accent-color: var(--primary, #2563eb);
}

.exam-checkbox-label:has(input:checked) {
  background: #eff6ff;
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.exam-checkbox-label span {
  font-weight: 500;
  color: var(--text, #1e293b);
}

.exam-checkbox-label:has(input:checked) span {
  color: var(--primary, #2563eb);
  font-weight: 600;
}

.exam-btn {
  background: linear-gradient(135deg, var(--primary, #2563eb) 0%, var(--secondary, #7c3aed) 100%);
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 1.05em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  width: 100%;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.exam-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.exam-btn:active {
  transform: translateY(0);
}

.exam-btn-primary {
  background: linear-gradient(135deg, var(--primary, #2563eb) 0%, var(--secondary, #7c3aed) 100%);
}

.exam-btn-success {
  background: linear-gradient(135deg, var(--success, #10b981) 0%, #059669 100%);
}

.exam-btn-warning {
  background: linear-gradient(135deg, var(--warning, #f59e0b) 0%, #d97706 100%);
}

.exam-btn-danger {
  background: linear-gradient(135deg, var(--danger, #ef4444) 0%, #dc2626 100%);
}

.exam-btn-info {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.exam-btn-secondary {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.exam-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
}

.exam-loading {
  display: none;
  text-align: center;
  padding: 40px 20px;
}

.exam-loading.active {
  display: block;
}

.exam-spinner {
  border: 4px solid #f3f4f6;
  border-top: 4px solid var(--primary, #2563eb);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.exam-error-message,
.exam-success-message {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  border-left: 4px solid;
  font-weight: 500;
}

.exam-error-message {
  background: #fef2f2;
  color: #991b1b;
  border-color: var(--danger, #ef4444);
}

.exam-success-message {
  background: #f0fdf4;
  color: #166534;
  border-color: var(--success, #10b981);
}

.exam-paper-header {
  text-align: center;
  padding: 40px 20px 30px;
  background: #ffffff;
  color: #1e293b;
  border: 2px solid #1e293b;
  border-bottom: 4px solid #1e293b;
  margin-bottom: 40px;
  page-break-after: avoid;
}

.exam-paper-header h1 {
  font-size: 1.8em;
  margin-bottom: 12px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.exam-paper-header .subtitle {
  font-size: 1em;
  color: #475569;
  margin-bottom: 25px;
  font-weight: 500;
}

.exam-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.exam-meta-item {
  background: #f8fafc;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  text-align: left;
}

.exam-meta-item strong {
  display: block;
  font-size: 0.75em;
  color: #64748b;
  margin-bottom: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.exam-meta-item span {
  font-size: 0.95em;
  font-weight: 500;
  color: #1e293b;
}

.question-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-left: 3px solid #1e293b;
  padding: 20px;
  margin-bottom: 30px;
  page-break-inside: avoid;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.question-number-badge {
  font-size: 1.1em;
  font-weight: 700;
  color: #1e293b;
  font-family: 'Times New Roman', serif;
}

.question-badges {
  display: flex;
  gap: 15px;
  align-items: center;
  font-size: 0.9em;
  color: #64748b;
}

.badge {
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: 400;
  background: transparent;
  color: inherit;
  border: none;
}

.badge-type {
  background: transparent;
  color: #64748b;
  font-style: italic;
}

.badge-marks {
  background: transparent;
  color: #1e293b;
  font-weight: 600;
  font-family: 'Times New Roman', serif;
}

.question-content {
  font-size: 1em;
  line-height: 1.7;
  color: #1e293b;
  margin-bottom: 15px;
  font-family: 'Times New Roman', serif;
}

.question-options-list {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.question-options-list li {
  padding: 10px 15px;
  margin: 8px 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 2px solid #cbd5e1;
  font-size: 0.95em;
  line-height: 1.6;
  list-style-position: inside;
}

.option-label {
  font-weight: 700;
  color: #1e293b;
  margin-right: 12px;
  min-width: 25px;
  display: inline-block;
  font-family: 'Times New Roman', serif;
}

.answer-display {
  margin-top: 15px;
  padding: 12px 15px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-left: 3px solid #475569;
}

.answer-display strong {
  color: #1e293b;
  display: block;
  margin-bottom: 6px;
  font-size: 0.9em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.answer-display p {
  color: #1e293b;
  margin: 0;
  line-height: 1.6;
  font-size: 0.95em;
}

.exam-action-buttons {
  display: flex;
  gap: 12px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 2px solid #e5e7eb;
  flex-wrap: wrap;
  justify-content: center;
}

.exam-btn-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.exam-action-dropdown {
  position: relative;
  display: inline-block;
}

.exam-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 5px;
  background: white;
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 180px;
  overflow: hidden;
}

.exam-dropdown-menu button {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: white;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 500;
  color: var(--text, #1e293b);
  transition: background 0.2s;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.exam-dropdown-menu button:last-child {
  border-bottom: none;
}

.exam-dropdown-menu button:hover {
  background: #f8fafc;
  color: var(--primary, #2563eb);
}

.exam-dropdown-menu button:active {
  background: #f1f5f9;
}

.presentation-mode {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #1e293b;
  z-index: 10000;
  overflow-y: auto;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.presentation-mode #examPaper {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.presentation-mode.question-presentation,
.presentation-mode.activity-presentation {
  padding: 20px;
}

.presentation-mode.question-presentation .exam-paper-header,
.presentation-mode.activity-presentation .exam-paper-header {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto 30px;
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.presentation-question-container,
.presentation-activity-container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  min-height: 400px;
  max-height: 70vh;
  overflow-y: auto;
}

.presentation-question-container .question-card,
.presentation-activity-container .question-card {
  margin: 0;
  border: none;
  box-shadow: none;
  padding: 0;
}

.presentation-controls {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 10001;
  background: rgba(30, 41, 59, 0.95);
  padding: 15px 25px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.presentation-controls .exam-btn {
  padding: 12px 24px;
  font-size: 14px;
}

.presentation-counter {
  color: white;
  font-weight: 600;
  font-size: 16px;
  padding: 0 15px;
  min-width: 80px;
  text-align: center;
}

@media print {
  /* Hide everything by default */
  body > * {
    display: none !important;
  }
  
  /* Only show exam paper or activity sheet */
  #examPaper,
  #activitySheet {
    display: block !important;
    position: relative !important;
    box-shadow: none !important;
    border: none !important;
    padding: 20px !important;
    margin: 0 !important;
    max-width: 100% !important;
    page-break-after: auto !important;
  }
  
  /* Hide presentation containers */
  #examPresentationContainer,
  #activityPresentationContainer {
    display: none !important;
  }
  
  /* Hide action buttons and other UI elements */
  .no-print,
  .exam-action-buttons,
  .exam-action-dropdown,
  #examInputForm,
  #activityInputForm,
  .exam-btn,
  .exam-loading,
  .presentation-controls,
  .presentation-counter {
    display: none !important;
  }
  
  /* Answers visibility is controlled by JavaScript before printing */
  .exam-answer-content[style*="display: none"] {
    display: none !important;
  }

  .exam-paper-header {
    background: white !important;
    color: #000 !important;
    border-bottom: 3px solid #000;
    padding-bottom: 20px;
    margin-bottom: 30px;
    page-break-after: avoid;
  }

  .exam-paper-header h1 {
    font-size: 24pt;
    margin-bottom: 10px;
    color: #000 !important;
  }

  .exam-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    font-size: 10pt;
    margin-top: 15px;
  }

  .exam-meta-item {
    border: 1px solid #ddd;
    padding: 8px;
    background: #f9fafb !important;
    color: #000 !important;
  }

  /* For exam: show all questions */
  #examPaper .question-card {
    page-break-inside: avoid;
    margin-bottom: 25px;
    padding: 15px;
    border: 1px solid #cbd5e1;
    border-left: 3px solid #1e293b;
  }

  /* For activities: one activity per page */
  #activitySheet .question-card {
    page-break-before: always;
    page-break-inside: avoid;
    margin-bottom: 0;
    padding: 20px;
    border: 1px solid #cbd5e1;
    border-left: 3px solid #f59e0b;
  }
  
  #activitySheet .question-card:first-child {
    page-break-before: auto;
  }

  .question-header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 12px;
  }

  .question-content {
    font-size: 11pt;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  .question-options-list li {
    margin: 6px 0;
    font-size: 10pt;
    line-height: 1.5;
    border: 1px solid #ddd;
  }

  .answer-display {
    border-top: 1px solid #ccc;
    margin-top: 15px;
    padding-top: 12px;
    page-break-before: avoid;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-left: 3px solid #475569 !important;
  }

  @page {
    size: A4;
    margin: 2cm;
  }
}

@media (max-width: 768px) {
  .exam-grid {
    grid-template-columns: 1fr;
  }
  .exam-generator-card {
    padding: 24px;
  }
  .question-types-grid {
    grid-template-columns: 1fr;
  }
  
  .exam-dropdown-menu {
    right: 0;
    left: auto;
  }
  
  .exam-action-buttons {
    flex-direction: column;
  }
  
  .exam-btn-group {
    width: 100%;
  }
  
  .exam-action-dropdown {
    width: 100%;
  }
  
  .exam-action-dropdown .exam-btn {
    width: 100%;
  }
}