/* ============================================
   PSYCHOLOGY EDUCATIONAL WEBSITE - MAIN STYLES
   Premium, Calm, Academic, Modern Design
   Mobile-First Approach
   ============================================ */

/* ============================================
   CSS VARIABLES & ROOT SETTINGS
   ============================================ */
:root {
  /* Navy Blue Gradient Colors */
  --navy-dark: #1a237e;
  --navy-primary: #283593;
  --navy-medium: #3949ab;
  --navy-light: #5c6bc0;
  --navy-soft: #7986cb;
  --navy-pale: #9fa8da;
  
  /* Pearl White Gradient Colors */
  --pearl-white: #ffffff;
  --pearl-soft: #f8f9ff;
  --pearl-cream: #f0f2ff;
  --pearl-light: #e8ebff;
  --pearl-medium: #dde1ff;
  
  /* Accent Colors */
  --glow-navy: rgba(63, 81, 181, 0.3);
  --glow-pearl: rgba(255, 255, 255, 0.8);
  --shadow-soft: rgba(26, 35, 126, 0.1);
  --shadow-medium: rgba(26, 35, 126, 0.15);
  --shadow-strong: rgba(26, 35, 126, 0.25);
  
  /* Highlight Colors */
  --highlight-term: linear-gradient(135deg, #e8ebff 0%, #dde1ff 100%);
  --highlight-date: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  --highlight-name: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  --highlight-theory: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
  
  /* Pastel Chapter Backgrounds */
  --chapter-bg-1: linear-gradient(135deg, #f8f9ff 0%, #e8ebff 100%);
  --chapter-bg-2: linear-gradient(135deg, #fff8f0 0%, #ffe8d6 100%);
  --chapter-bg-3: linear-gradient(135deg, #f0fff4 0%, #d4edda 100%);
  --chapter-bg-4: linear-gradient(135deg, #fff0f5 0%, #ffd6e7 100%);
  --chapter-bg-5: linear-gradient(135deg, #f0f8ff 0%, #d6eaff 100%);
  --chapter-bg-6: linear-gradient(135deg, #fffff0 0%, #fff8d6 100%);
  --chapter-bg-7: linear-gradient(135deg, #f8f0ff 0%, #e8d6ff 100%);
  
  /* Typography */
  --font-primary: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-heading: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-reading: 'Source Sans Pro', 'Segoe UI', system-ui, sans-serif;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 50px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================
   FONT IMPORTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&family=Source+Sans+Pro:wght@300;400;600;700&display=swap');

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

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

body {
  font-family: var(--font-reading);
  font-weight: 400;
  line-height: 1.7;
  color: var(--navy-dark);
  background: linear-gradient(135deg, var(--pearl-soft) 0%, var(--pearl-cream) 50%, var(--pearl-light) 100%);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
  color: #000000;
  margin-bottom: var(--space-md);
}

/* Main headings - Black */
h1, h2 {
  color: #000000;
}

/* Sub-headings - Dark Brown */
h3, h4, h5, h6 {
  color: #4a2c2a;
}

/* Make all headings and topics bold in chapter content */
.chapter-content h2,
.chapter-content h3,
.chapter-content h4,
.lesson-content h2,
.lesson-content h3,
.lesson-content h4,
.summary-content h2,
.summary-content h3,
.summary-content h4,
.main-points-content h2,
.main-points-content h3,
.main-points-content h4 {
  font-weight: 700;
}

h1 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  color: #000000;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  color: #000000;
}

h3 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 600;
  color: #4a2c2a;
}

h4 {
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  font-weight: 500;
  color: #4a2c2a;
}

p {
  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.8;
  margin-bottom: var(--space-md);
  color: var(--navy-primary);
}

a {
  color: var(--navy-medium);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--navy-light);
}

/* ============================================
   LAYOUT CONTAINERS
   ============================================ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-md);
}

@media (min-width: 768px) {
  .container {
    padding: var(--space-xl);
  }
}

.page-wrapper {
  min-height: 100vh;
  padding-bottom: var(--space-3xl);
}

/* ============================================
   HEADER & LOGO
   ============================================ */
.site-header {
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,249,255,0.9) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(26, 35, 126, 0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: var(--space-md) var(--space-lg);
}

.logo {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.logo > span:not(.logo-icon) {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-medium) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 15px var(--shadow-medium);
  line-height: 1;
  padding: 2px;
  flex-shrink: 0;
}

/* ============================================
   GLASSMORPHISM CARDS
   ============================================ */
.glass-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-xl);
  box-shadow: 
    0 8px 32px var(--shadow-soft),
    0 4px 16px var(--shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: var(--transition-medium);
  overflow: hidden;
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 16px 48px var(--shadow-medium),
    0 8px 24px var(--shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ============================================
   SHINY SUBJECT CARDS (HOME PAGE)
   ============================================ */
.subjects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
}

@media (min-width: 640px) {
  .subjects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .subjects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.subject-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(221,225,255,0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(63, 81, 181, 0.15);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: all var(--transition-medium);
  box-shadow: 
    0 10px 40px rgba(26, 35, 126, 0.12),
    0 6px 20px rgba(63, 81, 181, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(63, 81, 181, 0.05);
}

.subject-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, 
    #1a237e 0%, 
    #283593 25%, 
    #3949ab 50%, 
    #5c6bc0 75%, 
    #7986cb 100%);
  opacity: 0.8;
  transition: all var(--transition-medium);
}

.subject-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top right,
    rgba(92, 107, 192, 0.08) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: var(--transition-medium);
  pointer-events: none;
}

.subject-card:hover {
  transform: translateY(-12px) scale(1.03);
  border-color: rgba(63, 81, 181, 0.3);
  background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(232,235,255,0.98) 100%);
  box-shadow: 
    0 20px 60px rgba(26, 35, 126, 0.2),
    0 12px 35px rgba(63, 81, 181, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(63, 81, 181, 0.1),
    0 0 0 1px rgba(63, 81, 181, 0.1);
}

.subject-card:hover::before {
  opacity: 1;
  height: 6px;
}

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

.subject-card:active {
  transform: translateY(-4px) scale(0.99);
}

.subject-code {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pearl-white);
  background: linear-gradient(135deg, #283593 0%, #3949ab 50%, #5c6bc0 100%);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);
  letter-spacing: 0.8px;
  box-shadow: 0 4px 20px rgba(63, 81, 181, 0.35);
  transition: all var(--transition-medium);
}

.subject-card:hover .subject-code {
  transform: scale(1.05);
  box-shadow: 0 6px 25px rgba(63, 81, 181, 0.45);
}

.subject-title {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  font-weight: 600;
  color: var(--navy-dark);
  line-height: 1.4;
  margin-bottom: var(--space-sm);
  transition: all var(--transition-medium);
}

.subject-card:hover .subject-title {
  color: var(--navy-primary);
  transform: scale(1.02);
}

.subject-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  filter: drop-shadow(0 6px 12px rgba(26, 35, 126, 0.15));
  transition: all var(--transition-medium);
}

.subject-card:hover .subject-icon {
  transform: scale(1.1) translateY(-4px);
  filter: drop-shadow(0 8px 16px rgba(26, 35, 126, 0.25));
}

.subject-desc {
  color: var(--navy-medium);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: var(--space-sm);
  transition: all var(--transition-medium);
}

.subject-card:hover .subject-desc {
  color: var(--navy-primary);
}

/* ============================================
   SECTION CARDS (SUBJECT LANDING PAGE)
   ============================================ */
.sections-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  padding: var(--space-lg) 0;
}

@media (min-width: 768px) {
  .sections-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }
}

.section-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(221,225,255,0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(63, 81, 181, 0.15);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: all var(--transition-medium);
  box-shadow: 
    0 10px 40px rgba(26, 35, 126, 0.12),
    0 6px 20px rgba(63, 81, 181, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(63, 81, 181, 0.05);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}

.section-card:hover {
  transform: translateY(-8px) scale(1.05);
  border-color: rgba(63, 81, 181, 0.3);
  background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(232,235,255,0.98) 100%);
  box-shadow: 
    0 20px 60px rgba(26, 35, 126, 0.2),
    0 12px 35px rgba(63, 81, 181, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(63, 81, 181, 0.1);
}

.section-card:active {
  transform: translateY(-4px) scale(1.0);
}

.section-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  transition: all var(--transition-medium);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}

/* Colorful icon backgrounds for each section type */
.section-card:nth-child(1) .section-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.section-card:nth-child(2) .section-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.section-card:nth-child(3) .section-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.section-card:nth-child(4) .section-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.section-icon::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  transform: rotate(45deg);
  transition: all 0.6s ease;
}

.section-card:hover .section-icon {
  transform: scale(1.15) translateY(-4px) rotate(5deg);
  box-shadow: 0 12px 35px rgba(0,0,0,0.2);
}

.section-card:hover .section-icon::before {
  animation: iconShine 1.5s ease-in-out infinite;
}

@keyframes iconShine {
  0% { transform: rotate(45deg) translateX(-100%); }
  100% { transform: rotate(45deg) translateX(100%); }
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 600;
  color: var(--navy-dark);
  transition: all var(--transition-medium);
}

.section-card:hover .section-title {
  color: var(--navy-primary);
}

.section-count {
  font-size: 0.85rem;
  color: var(--navy-soft);
  margin-top: var(--space-xs);
  transition: all var(--transition-medium);
}

.section-card:hover .section-count {
  color: var(--navy-medium);
}

/* ============================================
   CHAPTER CARDS GRID
   ============================================ */
.chapters-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  padding: var(--space-lg) 0;
}

@media (min-width: 640px) {
  .chapters-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .chapters-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .chapters-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-lg);
  }
}

.chapter-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(248,249,255,0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(63, 81, 181, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: all var(--transition-medium);
  box-shadow: 
    0 6px 25px rgba(26, 35, 126, 0.1),
    0 3px 12px rgba(63, 81, 181, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  gap: var(--space-sm);
}

.chapter-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #43e97b 100%);
  opacity: 0;
  transition: opacity var(--transition-medium);
}

.chapter-card:hover {
  transform: translateY(-6px) scale(1.08);
  border-color: rgba(63, 81, 181, 0.25);
  background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(240,242,255,0.98) 100%);
  box-shadow: 
    0 15px 45px rgba(26, 35, 126, 0.15),
    0 8px 25px rgba(63, 81, 181, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.chapter-card:hover::before {
  opacity: 1;
}

.chapter-number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  transition: all var(--transition-medium);
  position: relative;
  display: block;
}

.chapter-card:hover .chapter-number {
  transform: scale(1.1);
  filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
}

.chapter-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--navy-medium);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  transition: all var(--transition-medium);
  display: block;
  margin-top: var(--space-xs);
}

.chapter-card:hover .chapter-label {
  color: var(--navy-primary);
  transform: translateY(-2px);
}

/* ============================================
   CHAPTER HEADER (CHAPTER PAGES)
   ============================================ */
.chapter-header {
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,249,255,0.9) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
  text-align: center;
  box-shadow: 
    0 8px 32px var(--shadow-soft),
    inset 0 2px 0 rgba(255, 255, 255, 0.9);
}

@media (min-width: 768px) {
  .chapter-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-2xl);
  }
}

.chapter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(145deg, var(--navy-primary) 0%, var(--navy-medium) 100%);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  box-shadow: 
    0 8px 25px var(--shadow-medium),
    inset 0 2px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .chapter-badge {
    width: 100px;
    height: 100px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
}

.chapter-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

.chapter-badge-number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
  .chapter-badge-number {
    font-size: 2.5rem;
  }
}

.chapter-info {
  flex: 1;
}

.chapter-type-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--navy-medium);
  background: var(--pearl-light);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.chapter-title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: 700;
  color: #000000;
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

.chapter-subtitle {
  font-size: 0.95rem;
  color: var(--navy-soft);
}

/* ============================================
   CHAPTER CONTENT AREA
   ============================================ */
.chapter-content {
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,249,255,0.9) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  box-shadow: 
    0 8px 32px var(--shadow-soft),
    inset 0 2px 0 rgba(255, 255, 255, 0.9);
}

@media (min-width: 768px) {
  .chapter-content {
    padding: var(--space-2xl);
  }
}

.chapter-content h2 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  color: #000000;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--pearl-medium);
}

.chapter-content h2:first-child {
  margin-top: 0;
}

.chapter-content h3 {
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  color: #4a2c2a;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
}

.chapter-content h4 {
  font-size: 1.05rem;
  color: #4a2c2a;
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

.chapter-content p {
  font-size: clamp(1rem, 2vw, 1.05rem);
  line-height: 1.85;
  color: var(--navy-primary);
  margin-bottom: var(--space-md);
}

.chapter-content ul,
.chapter-content ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}

.chapter-content li {
  font-size: clamp(1rem, 2vw, 1.05rem);
  line-height: 1.8;
  color: var(--navy-primary);
  margin-bottom: var(--space-sm);
}

/* ============================================
   AUTOMATIC CONTENT HIGHLIGHTING
   ============================================ */

/* Word-level colored highlights - SMALL BOXES */

/* Green boxes for main topic word */
.text-green {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  color: #2e7d32;
  box-shadow: 0 1px 4px rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.2);
}

/* Purple boxes for psychologist names */
.text-purple,
.highlight-name {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  color: #7b1fa2;
  box-shadow: 0 1px 4px rgba(123, 31, 162, 0.15);
  border: 1px solid rgba(123, 31, 162, 0.2);
}

/* Pink boxes for theories/contributions */
.text-pink,
.highlight-theory {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  font-style: italic;
  color: #c2185b;
  box-shadow: 0 1px 4px rgba(194, 24, 91, 0.15);
  border: 1px solid rgba(194, 24, 91, 0.2);
}

/* Blue boxes for important terms/keywords */
.text-blue,
.highlight-term {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  color: #1565c0;
  box-shadow: 0 1px 4px rgba(21, 101, 192, 0.15);
  border: 1px solid rgba(21, 101, 192, 0.2);
}

/* Red boxes for diseases/disorders/problems */
.text-red {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  color: #c62828;
  box-shadow: 0 1px 4px rgba(198, 40, 40, 0.15);
  border: 1px solid rgba(198, 40, 40, 0.2);
}

/* Orange boxes for dates/time periods */
.text-orange,
.highlight-date {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  color: #e65100;
  box-shadow: 0 1px 4px rgba(255, 152, 0, 0.15);
  border: 1px solid rgba(255, 152, 0, 0.2);
}

/* Additional Colorful Content Boxes */

/* Important/Alert Box - Red/Orange */
.important-box,
.alert-box {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.15) 0%, rgba(255, 193, 7, 0.12) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  margin: var(--space-lg) 0;
  border: 2px solid rgba(255, 152, 0, 0.3);
  border-left: 5px solid #ff9800;
  box-shadow: 
    0 4px 20px rgba(255, 152, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #e65100;
  position: relative;
  transition: all var(--transition-medium);
}

.important-box::before,
.alert-box::before {
  content: '⚠️';
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-size: 2rem;
  opacity: 0.3;
}

.important-box:hover,
.alert-box:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 30px rgba(255, 152, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Note/Info Box - Blue */
.note-box,
.info-box {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, rgba(66, 165, 245, 0.12) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  margin: var(--space-lg) 0;
  border: 2px solid rgba(33, 150, 243, 0.3);
  border-left: 5px solid #2196f3;
  box-shadow: 
    0 4px 20px rgba(33, 150, 243, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #0d47a1;
  position: relative;
  transition: all var(--transition-medium);
}

.note-box::before,
.info-box::before {
  content: 'ℹ️';
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-size: 2rem;
  opacity: 0.3;
}

.note-box:hover,
.info-box:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 30px rgba(33, 150, 243, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Tip/Success Box - Green (lighter than definition) */
.tip-box,
.success-box {
  background: linear-gradient(135deg, rgba(139, 195, 74, 0.15) 0%, rgba(156, 204, 101, 0.12) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  margin: var(--space-lg) 0;
  border: 2px solid rgba(139, 195, 74, 0.3);
  border-left: 5px solid #8bc34a;
  box-shadow: 
    0 4px 20px rgba(139, 195, 74, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #33691e;
  position: relative;
  transition: all var(--transition-medium);
}

.tip-box::before,
.success-box::before {
  content: '✅';
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-size: 2rem;
  opacity: 0.3;
}

.tip-box:hover,
.success-box:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 30px rgba(139, 195, 74, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Example/Practice Box - Purple */
.example-box,
.practice-box {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.15) 0%, rgba(171, 71, 188, 0.12) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  margin: var(--space-lg) 0;
  border: 2px solid rgba(156, 39, 176, 0.3);
  border-left: 5px solid #9c27b0;
  box-shadow: 
    0 4px 20px rgba(156, 39, 176, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #4a148c;
  position: relative;
  transition: all var(--transition-medium);
}

.example-box::before,
.practice-box::before {
  content: '📝';
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-size: 2rem;
  opacity: 0.3;
}

.example-box:hover,
.practice-box:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 30px rgba(156, 39, 176, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Common styling for all content boxes */
.important-box h3,
.important-box h4,
.alert-box h3,
.alert-box h4,
.note-box h3,
.note-box h4,
.info-box h3,
.info-box h4,
.tip-box h3,
.tip-box h4,
.success-box h3,
.success-box h4,
.example-box h3,
.example-box h4,
.practice-box h3,
.practice-box h4 {
  margin-top: 0;
  font-weight: 700;
}

.important-box p:last-child,
.alert-box p:last-child,
.note-box p:last-child,
.info-box p:last-child,
.tip-box p:last-child,
.success-box p:last-child,
.example-box p:last-child,
.practice-box p:last-child {
  margin-bottom: 0;
}

/* ============================================
   NAVIGATION BUTTONS
   ============================================ */
.nav-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.nav-row {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .nav-row {
    gap: var(--space-md);
  }
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(248,249,255,0.85) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--navy-dark);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-medium);
  box-shadow: 
    0 4px 15px var(--shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  min-width: 48px;
  min-height: 48px;
  position: relative;
  overflow: visible;
}

@media (min-width: 768px) {
  .nav-btn {
    padding: var(--space-md) var(--space-lg);
    font-size: 0.9rem;
    min-width: auto;
  }
}

.nav-btn:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 8px 25px var(--shadow-medium),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  background: linear-gradient(145deg, var(--pearl-white) 0%, var(--pearl-soft) 100%);
}

.nav-btn:active {
  transform: translateY(-1px);
}

.nav-btn.primary {
  background: linear-gradient(145deg, var(--navy-primary) 0%, var(--navy-medium) 100%);
  color: white;
  border: none;
  box-shadow: 
    0 4px 15px var(--shadow-medium),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nav-btn.primary:hover {
  background: linear-gradient(145deg, var(--navy-medium) 0%, var(--navy-light) 100%);
}

.nav-btn-icon {
  font-size: 1.2rem;
  position: relative;
  z-index: 2;
}

.nav-btn-text {
  display: none;
  position: relative;
  z-index: 2;
}

/* Mobile: Show text on active/touch */
@media (max-width: 767px) {
  .nav-btn:active .nav-btn-text,
  .nav-btn:focus .nav-btn-text {
    display: inline;
    animation: fadeInText 0.2s ease;
  }
  
  .nav-btn:active,
  .nav-btn:focus {
    min-width: auto;
    padding: var(--space-sm) var(--space-lg);
  }
  
  /* Show tooltip on hover for touch devices */
  .nav-btn::after {
    content: attr(data-label);
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background: var(--navy-dark);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1000;
  }
  
  .nav-btn::before {
    content: '';
    position: absolute;
    bottom: 105%;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    border: 5px solid transparent;
    border-top-color: var(--navy-dark);
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 1000;
  }
  
  .nav-btn:hover::after,
  .nav-btn:focus::after,
  .nav-btn:active::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  
  .nav-btn:hover::before,
  .nav-btn:focus::before,
  .nav-btn:active::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@media (min-width: 768px) {
  .nav-btn-text {
    display: inline;
  }
  
  .nav-btn::after,
  .nav-btn::before {
    display: none;
  }
}

@keyframes fadeInText {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   QUIZ SYSTEM STYLES
   ============================================ */
.quiz-container {
  max-width: 800px;
  margin: 0 auto;
}

.quiz-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,249,255,0.9) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  box-shadow: 0 4px 20px var(--shadow-soft);
}

.quiz-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--pearl-medium);
  border-radius: var(--radius-full);
  margin: 0 var(--space-md);
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--navy-primary) 0%, var(--navy-light) 100%);
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
  width: 0%;
}

.quiz-progress-text {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-dark);
  white-space: nowrap;
}

.quiz-question-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,249,255,0.9) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  box-shadow: 
    0 8px 32px var(--shadow-soft),
    inset 0 2px 0 rgba(255, 255, 255, 0.9);
  animation: fadeInUp 0.5s ease;
}

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

.quiz-question-number {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy-medium);
  background: var(--pearl-light);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);
}

.quiz-question-text {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  font-weight: 600;
  color: #000000;
  margin-bottom: var(--space-xl);
  line-height: 1.5;
}

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

.quiz-option {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(145deg, var(--pearl-white) 0%, var(--pearl-soft) 100%);
  border: 2px solid var(--pearl-medium);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-medium);
  overflow: hidden;
}

.quiz-option:hover:not(.disabled) {
  transform: translateX(8px);
  border-color: var(--navy-soft);
  box-shadow: 0 4px 20px var(--shadow-soft);
}

.quiz-option.selected {
  border-color: var(--navy-medium);
  background: linear-gradient(145deg, var(--pearl-light) 0%, var(--pearl-medium) 100%);
}

.quiz-option.correct {
  border-color: #4caf50;
  background: linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 100%);
}

.quiz-option.incorrect {
  border-color: #f44336;
  background: linear-gradient(145deg, #ffebee 0%, #ffcdd2 100%);
}

.quiz-option.disabled {
  cursor: default;
  opacity: 0.7;
}

.quiz-option-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(145deg, var(--navy-soft) 0%, var(--navy-medium) 100%);
  color: white;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 50%;
  margin-right: var(--space-md);
  flex-shrink: 0;
  transition: var(--transition-medium);
}

.quiz-option.correct .quiz-option-letter {
  background: linear-gradient(145deg, #4caf50 0%, #388e3c 100%);
}

.quiz-option.incorrect .quiz-option-letter {
  background: linear-gradient(145deg, #f44336 0%, #d32f2f 100%);
}

.quiz-option-text {
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  color: var(--navy-dark);
  line-height: 1.5;
}

.quiz-option-icon {
  position: absolute;
  right: var(--space-md);
  font-size: 1.5rem;
  opacity: 0;
  transition: var(--transition-medium);
}

.quiz-option.correct .quiz-option-icon,
.quiz-option.incorrect .quiz-option-icon {
  opacity: 1;
}

/* Quiz Explanation */
.quiz-explanation {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: linear-gradient(145deg, var(--pearl-soft) 0%, var(--pearl-light) 100%);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--navy-medium);
  animation: fadeInUp 0.5s ease;
}

.quiz-explanation-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy-dark);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.quiz-explanation-text {
  font-size: 0.95rem;
  color: var(--navy-primary);
  line-height: 1.7;
  margin-bottom: 0;
}

.quiz-next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-xl);
  background: linear-gradient(145deg, var(--navy-primary) 0%, var(--navy-medium) 100%);
  color: white;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-medium);
  box-shadow: 0 4px 20px var(--shadow-medium);
}

.quiz-next-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px var(--shadow-strong);
}

/* Quiz Results */
.quiz-results {
  text-align: center;
  padding: var(--space-2xl);
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,249,255,0.9) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px var(--shadow-soft);
  animation: fadeInUp 0.5s ease;
}

.quiz-results-score {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-md);
}

.quiz-results-message {
  font-size: clamp(1.1rem, 3vw, 1.25rem);
  color: var(--navy-dark);
  margin-bottom: var(--space-xl);
}

.quiz-restart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-2xl);
  background: linear-gradient(145deg, var(--navy-primary) 0%, var(--navy-medium) 100%);
  color: white;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-medium);
  box-shadow: 0 4px 20px var(--shadow-medium);
  margin: var(--space-sm);
}

.quiz-restart-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px var(--shadow-strong);
}

/* ============================================
   BREADCRUMB NAVIGATION
   ============================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  font-size: 0.9rem;
}

.breadcrumb a {
  color: var(--navy-soft);
  transition: var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--navy-medium);
}

.breadcrumb-separator {
  color: var(--navy-pale);
}

.breadcrumb-current {
  color: var(--navy-dark);
  font-weight: 500;
}

/* ============================================
   PAGE TITLE SECTION
   ============================================ */
.page-title-section {
  text-align: center;
  padding: var(--space-xl) 0;
}

.page-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  color: #000000;
  margin-bottom: var(--space-sm);
}

.page-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  color: var(--navy-soft);
  max-width: 600px;
  margin: 0 auto;
}

/* ============================================
   BACK BUTTON
   ============================================ */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(248,249,255,0.8) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  color: var(--navy-dark);
  text-decoration: none;
  transition: var(--transition-medium);
  margin-bottom: var(--space-lg);
}

.back-link:hover {
  transform: translateX(-4px);
  box-shadow: 0 4px 15px var(--shadow-soft);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,249,255,0.9) 100%);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(26, 35, 126, 0.08);
  padding: var(--space-xl);
  text-align: center;
  margin-top: auto;
}

.footer-text {
  font-size: 0.9rem;
  color: var(--navy-soft);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

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

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

.hidden { display: none !important; }
.visible { display: block !important; }

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

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

@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px var(--glow-navy); }
  50% { box-shadow: 0 0 40px var(--glow-navy); }
}

.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-glow { animation: glow 2s ease-in-out infinite; }

/* Fade in on scroll */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   LOADING STATE
   ============================================ */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--pearl-medium);
  border-top-color: var(--navy-medium);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* ============================================
   SCROLLBAR STYLING
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--pearl-soft);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--navy-soft) 0%, var(--navy-medium) 100%);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--navy-medium) 0%, var(--navy-primary) 100%);
}

/* ============================================
   TEXT-TO-SPEECH (TTS) AUDIO FEATURE
   ============================================ */

/* Word highlight - follows along with speech */
.tts-word {
  transition: background-color 0.15s ease, color 0.15s ease;
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 -2px;
}

.tts-word.speaking {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white !important;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
  border-radius: 4px;
  padding: 1px 4px;
  margin: 0 -4px;
}

.tts-sentence.active {
  background: rgba(102, 126, 234, 0.08);
  border-radius: 6px;
  padding: 2px 0;
  margin: -2px 0;
}

/* Smooth scroll to highlighted word */
.tts-word.speaking {
  scroll-margin-top: 120px;
  scroll-margin-bottom: 120px;
}

/* Listen Button - Glossy Style */
.nav-btn.listen-btn {
  background: linear-gradient(145deg, #667eea 0%, #764ba2 50%, #6B73FF 100%);
  color: white;
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 4px 15px rgba(102, 126, 234, 0.4),
    0 2px 8px rgba(118, 75, 162, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.nav-btn.listen-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

.nav-btn.listen-btn:hover::before {
  left: 100%;
}

.nav-btn.listen-btn:hover {
  background: linear-gradient(145deg, #7B85F0 0%, #8B5FC7 50%, #7D84FF 100%);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 8px 25px rgba(102, 126, 234, 0.5),
    0 4px 12px rgba(118, 75, 162, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.nav-btn.listen-btn:active {
  transform: translateY(-1px) scale(0.98);
}

.nav-btn.listen-btn.playing {
  background: linear-gradient(145deg, #43e97b 0%, #38f9d7 50%, #4ade80 100%);
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 
      0 4px 15px rgba(67, 233, 123, 0.4),
      0 2px 8px rgba(56, 249, 215, 0.3);
  }
  50% {
    box-shadow: 
      0 6px 25px rgba(67, 233, 123, 0.6),
      0 4px 15px rgba(56, 249, 215, 0.5);
  }
}

/* Listen button icon animation when playing */
.nav-btn.listen-btn.playing .nav-btn-icon {
  animation: sound-wave 1s ease-in-out infinite;
}

@keyframes sound-wave {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* TTS Modal Overlay */
.tts-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 35, 126, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.tts-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* TTS Modal Container */
.tts-modal {
  background: linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(248,249,255,0.95) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  max-width: 380px;
  width: 90%;
  box-shadow: 
    0 25px 80px rgba(26, 35, 126, 0.3),
    0 15px 40px rgba(63, 81, 181, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(20px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tts-modal-overlay.active .tts-modal {
  transform: translateY(0) scale(1);
}

.tts-modal-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.tts-modal-icon {
  font-size: 3rem;
  margin-bottom: var(--space-sm);
  display: block;
}

.tts-modal-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy-dark);
  margin: 0;
}

.tts-modal-subtitle {
  font-size: 0.9rem;
  color: var(--navy-soft);
  margin-top: var(--space-xs);
}

/* Voice Selection Options */
.tts-voice-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.tts-voice-btn {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(248,249,255,0.85) 100%);
  border: 2px solid rgba(63, 81, 181, 0.15);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-medium);
  position: relative;
  overflow: hidden;
}

.tts-voice-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(102, 126, 234, 0.1),
    transparent
  );
  transition: left 0.4s ease;
}

.tts-voice-btn:hover::before {
  left: 100%;
}

.tts-voice-btn:hover {
  transform: translateX(8px);
  border-color: rgba(63, 81, 181, 0.4);
  box-shadow: 
    0 8px 25px rgba(63, 81, 181, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.tts-voice-btn:active {
  transform: translateX(4px) scale(0.98);
}

.tts-voice-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.tts-voice-btn.male .tts-voice-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.tts-voice-btn.female .tts-voice-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.tts-voice-info {
  flex: 1;
  text-align: left;
}

.tts-voice-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy-dark);
  margin-bottom: 2px;
}

.tts-voice-desc {
  font-size: 0.85rem;
  color: var(--navy-soft);
}

.tts-voice-arrow {
  font-size: 1.2rem;
  color: var(--navy-soft);
  transition: transform 0.3s ease;
}

.tts-voice-btn:hover .tts-voice-arrow {
  transform: translateX(5px);
  color: var(--navy-medium);
}

/* TTS Cancel Button */
.tts-cancel-btn {
  width: 100%;
  padding: var(--space-md);
  background: transparent;
  border: 2px solid rgba(63, 81, 181, 0.2);
  border-radius: var(--radius-lg);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--navy-soft);
  cursor: pointer;
  transition: all var(--transition-medium);
}

.tts-cancel-btn:hover {
  background: rgba(63, 81, 181, 0.05);
  border-color: rgba(63, 81, 181, 0.3);
  color: var(--navy-dark);
}

/* TTS Player Controls (shown when playing) */
.tts-player-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(248,249,255,0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(63, 81, 181, 0.1);
  padding: var(--space-md) var(--space-lg);
  padding-top: calc(var(--space-md) + 4px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 -4px 30px rgba(26, 35, 126, 0.15);
}

/* Mobile layout for player */
@media (max-width: 600px) {
  .tts-player-controls {
    padding: 10px 12px;
    padding-top: 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* Hide chapter info on mobile */
  .tts-player-info {
    display: none;
  }
  
  /* Row 1: Playback controls - full width centered */
  .tts-playback-controls {
    order: 1;
    width: 100%;
    justify-content: center;
    gap: 8px;
  }
  
  /* Row 2: Speed, Volume, Stop */
  .tts-controls-group {
    order: 2;
  }
  
  .tts-control-btn.tts-stop-btn {
    order: 3;
  }
}

.tts-player-controls.active {
  transform: translateY(0);
}

/* Progress Bar */
.tts-progress-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(63, 81, 181, 0.1);
  cursor: pointer;
}

.tts-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  width: 0%;
  transition: width 0.05s linear;
  position: relative;
  will-change: width;
}

.tts-progress-bar::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: white;
  border: 2px solid #764ba2;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tts-progress-container:hover .tts-progress-bar::after {
  opacity: 1;
}

/* Skip Controls */
.tts-skip-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tts-skip-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(63, 81, 181, 0.15);
  background: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(248,249,255,0.9) 100%);
  color: var(--navy-dark);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: relative;
}

.tts-skip-btn:hover {
  background: linear-gradient(145deg, var(--navy-light) 0%, var(--navy-medium) 100%);
  color: white;
  border-color: transparent;
  transform: scale(1.1);
}

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

.tts-skip-btn.prev-chunk { order: 1; }
.tts-skip-btn.back-10 { order: 2; }
.tts-play-pause-btn { order: 3; }
.tts-skip-btn.forward-10 { order: 4; }
.tts-skip-btn.next-chunk { order: 5; }

.tts-skip-label {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: var(--navy-soft);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tts-skip-btn:hover .tts-skip-label {
  opacity: 1;
}

/* Main playback controls group */
.tts-playback-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tts-player-info {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.tts-player-title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tts-player-status {
  font-size: 0.75rem;
  color: var(--navy-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.tts-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #43e97b;
  animation: status-blink 1.5s ease-in-out infinite;
}

@keyframes status-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.tts-player-status.paused .tts-status-dot {
  background: #fbbf24;
  animation: none;
}

/* Player Control Buttons */
.tts-control-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all var(--transition-medium);
}

.tts-play-pause-btn {
  width: 56px;
  height: 56px;
  background: linear-gradient(145deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 1.5rem;
  box-shadow: 
    0 4px 15px rgba(102, 126, 234, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.tts-play-pause-btn:hover {
  transform: scale(1.08);
  box-shadow: 
    0 6px 20px rgba(102, 126, 234, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.tts-play-pause-btn:active {
  transform: scale(0.95);
}

.tts-stop-btn {
  background: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(248,249,255,0.8) 100%);
  color: var(--navy-dark);
  border: 1px solid rgba(63, 81, 181, 0.2);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.tts-stop-btn:hover {
  background: linear-gradient(145deg, #f87171 0%, #ef4444 100%);
  color: white;
  border-color: transparent;
  transform: scale(1.05);
}

/* Mobile Bottom Sheet Style */
@media (max-width: 767px) {
  .tts-modal-overlay {
    align-items: flex-end;
  }
  
  .tts-modal {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
  }
  
  .tts-modal-overlay.active .tts-modal {
    transform: translateY(0);
  }
  
  .tts-player-controls {
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
  }
  
  .tts-voice-btn {
    padding: var(--space-sm) var(--space-md);
  }
  
  .tts-voice-icon {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
  
  .tts-voice-name {
    font-size: 1rem;
  }
  
  .tts-voice-desc {
    font-size: 0.8rem;
  }
}

/* Speed & Volume Controls */
.tts-controls-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.tts-speed-control,
.tts-volume-control {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.9);
  border-radius: var(--radius-full);
  border: 1px solid rgba(63, 81, 181, 0.1);
}

.tts-control-label {
  font-size: 0.7rem;
  color: var(--navy-soft);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tts-speed-value,
.tts-volume-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy-dark);
  min-width: 32px;
  text-align: center;
}

.tts-speed-btn,
.tts-volume-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(63, 81, 181, 0.2);
  background: white;
  color: var(--navy-dark);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  line-height: 1;
}

.tts-speed-btn:hover,
.tts-volume-btn:hover {
  background: var(--navy-primary);
  color: white;
  border-color: var(--navy-primary);
  transform: scale(1.1);
}

.tts-volume-icon {
  font-size: 0.9rem;
  margin-right: 2px;
}

/* Responsive: Mobile control sizes */
@media (max-width: 600px) {
  .tts-controls-group {
    flex-direction: row;
    gap: 8px;
  }
  
  .tts-speed-control,
  .tts-volume-control {
    padding: 5px 8px;
    gap: 4px;
  }
  
  .tts-control-label {
    display: none;
  }
  
  .tts-volume-icon {
    font-size: 0.85rem;
    margin-right: 2px;
  }
  
  .tts-speed-value,
  .tts-volume-value {
    font-size: 0.75rem;
    min-width: 28px;
  }
  
  .tts-speed-btn,
  .tts-volume-btn {
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
  }
  
  /* Playback buttons - larger for easy tapping */
  .tts-skip-btn {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
  
  .tts-skip-label {
    display: none;
  }
  
  .tts-play-pause-btn {
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
  }
  
  .tts-stop-btn {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
  
  .tts-playback-controls {
    gap: 6px;
  }
}

/* ============================================
   TABLE STYLES - Beautiful & Attractive Tables
   ============================================ */

/* Base table styling */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--space-lg) 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248,249,255,0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 
    0 8px 32px var(--shadow-soft),
    0 4px 16px var(--shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border: 3px solid transparent;
  background-image: 
    linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248,249,255,0.95) 100%),
    linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #43e97b 75%, #4facfe 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Table header styling */
thead {
  background: linear-gradient(145deg, var(--navy-primary) 0%, var(--navy-medium) 100%);
  position: relative;
}

thead::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

thead th {
  color: white;
  font-family: var(--font-heading);
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  font-weight: 700;
  text-align: left;
  padding: var(--space-md) var(--space-lg);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-bottom: 3px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.15);
  position: relative;
}

thead th:last-child {
  border-right: none;
}

/* Table body styling */
tbody tr {
  transition: all var(--transition-fast);
  position: relative;
}

tbody tr:nth-child(6n+1) {
  background: linear-gradient(135deg, rgba(232,235,255,0.4) 0%, rgba(221,225,255,0.3) 100%);
}

tbody tr:nth-child(6n+2) {
  background: linear-gradient(135deg, rgba(255,243,224,0.3) 0%, rgba(255,224,178,0.2) 100%);
}

tbody tr:nth-child(6n+3) {
  background: linear-gradient(135deg, rgba(232,245,233,0.3) 0%, rgba(200,230,201,0.2) 100%);
}

tbody tr:nth-child(6n+4) {
  background: linear-gradient(135deg, rgba(252,228,236,0.3) 0%, rgba(248,187,208,0.2) 100%);
}

tbody tr:nth-child(6n+5) {
  background: linear-gradient(135deg, rgba(227,242,253,0.3) 0%, rgba(187,222,251,0.2) 100%);
}

tbody tr:nth-child(6n+6) {
  background: linear-gradient(135deg, rgba(237,231,246,0.3) 0%, rgba(209,196,233,0.2) 100%);
}

tbody tr:hover {
  background: linear-gradient(135deg, rgba(255,235,59,0.25) 0%, rgba(255,193,7,0.2) 100%);
  transform: scale(1.02);
  box-shadow: 
    0 6px 25px rgba(255, 193, 7, 0.3),
    inset 0 0 0 2px rgba(255, 193, 7, 0.4);
  z-index: 1;
  border-left: 4px solid #ffc107;
}

tbody td {
  padding: var(--space-md) var(--space-lg);
  color: var(--navy-dark);
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  line-height: 1.6;
  border-bottom: 2px solid rgba(102, 126, 234, 0.15);
  border-right: 2px solid rgba(102, 126, 234, 0.1);
  position: relative;
}

tbody td:last-child {
  border-right: none;
}

tbody tr:last-child td {
  border-bottom: none;
}

/* First column styling (often contains headers/labels) */
tbody td:first-child,
tbody th:first-child {
  font-weight: 700;
  color: #1a237e;
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.12) 0%, transparent 100%);
  border-left: 4px solid transparent;
}

tbody tr:nth-child(6n+1) td:first-child {
  border-left-color: #667eea;
}

tbody tr:nth-child(6n+2) td:first-child {
  border-left-color: #ff9800;
}

tbody tr:nth-child(6n+3) td:first-child {
  border-left-color: #4caf50;
}

tbody tr:nth-child(6n+4) td:first-child {
  border-left-color: #e91e63;
}

tbody tr:nth-child(6n+5) td:first-child {
  border-left-color: #2196f3;
}

tbody tr:nth-child(6n+6) td:first-child {
  border-left-color: #9c27b0;
}

/* Table footer styling (if applicable) */
tfoot {
  background: linear-gradient(145deg, rgba(240,242,255,0.9) 0%, rgba(232,235,255,0.85) 100%);
  border-top: 2px solid var(--navy-soft);
}

tfoot td,
tfoot th {
  padding: var(--space-md) var(--space-lg);
  font-weight: 600;
  color: var(--navy-dark);
  font-size: 1rem;
}

/* Centered table content (useful for data tables) */
table.center-content td,
table.center-content th {
  text-align: center;
}

/* Compact table variant */
table.compact {
  margin: var(--space-md) 0;
}

table.compact th,
table.compact td {
  padding: var(--space-sm) var(--space-md);
  font-size: 0.95rem;
}

/* Bordered table variant */
table.bordered tbody td {
  border: 1px solid rgba(63, 81, 181, 0.12);
}

/* Striped emphasis variant */
table.striped tbody tr:nth-child(odd) {
  background: linear-gradient(135deg, rgba(232,235,255,0.5) 0%, rgba(221,225,255,0.4) 100%);
}

table.striped tbody tr:nth-child(even) {
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,255,0.8) 100%);
}

/* Highlight important rows */
tbody tr.highlight {
  background: linear-gradient(135deg, rgba(255, 243, 224, 0.9) 0%, rgba(255, 224, 178, 0.8) 100%);
  border-left: 4px solid #ff9800;
}

tbody tr.success {
  background: linear-gradient(135deg, rgba(232, 245, 233, 0.9) 0%, rgba(200, 230, 201, 0.8) 100%);
  border-left: 4px solid #4caf50;
}

tbody tr.warning {
  background: linear-gradient(135deg, rgba(255, 249, 196, 0.9) 0%, rgba(255, 241, 118, 0.8) 100%);
  border-left: 4px solid #ffc107;
}

tbody tr.info {
  background: linear-gradient(135deg, rgba(227, 242, 253, 0.9) 0%, rgba(187, 222, 251, 0.8) 100%);
  border-left: 4px solid #2196f3;
}

/* Responsive table wrapper */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin: var(--space-lg) 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px var(--shadow-soft);
}

.table-wrapper table {
  margin: 0;
  box-shadow: none;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  table {
    font-size: 0.9rem;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  
  thead th,
  tbody td,
  tfoot td,
  tfoot th {
    padding: var(--space-sm) var(--space-md);
  }
  
  /* Stack tables on very small screens */
  @media (max-width: 480px) {
    table.responsive {
      border: 0;
    }
    
    table.responsive thead {
      display: none;
    }
    
    table.responsive tbody,
    table.responsive tr,
    table.responsive td {
      display: block;
      width: 100%;
    }
    
    table.responsive tr {
      margin-bottom: var(--space-lg);
      border: 1px solid rgba(63, 81, 181, 0.15);
      border-radius: var(--radius-md);
      overflow: hidden;
    }
    
    table.responsive td {
      text-align: right;
      padding-left: 50%;
      position: relative;
      border-bottom: 1px solid rgba(63, 81, 181, 0.08);
    }
    
    table.responsive td:last-child {
      border-bottom: none;
    }
    
    table.responsive td::before {
      content: attr(data-label);
      position: absolute;
      left: var(--space-md);
      width: 45%;
      padding-right: var(--space-sm);
      text-align: left;
      font-weight: 600;
      color: var(--navy-primary);
    }
  }
}

/* Special styling for tables within chapter content */
.chapter-content table,
.lesson-content table,
.summary-content table,
.main-points-content table {
  margin: var(--space-xl) 0;
}

/* Table caption styling */
caption {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy-dark);
  text-align: left;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(135deg, rgba(232,235,255,0.5) 0%, rgba(221,225,255,0.4) 100%);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  caption-side: top;
}

/* Alternating column colors for data-heavy tables */
table.column-striped tbody td:nth-child(odd) {
  background: linear-gradient(180deg, rgba(248,249,255,0.3) 0%, rgba(240,242,255,0.2) 100%);
}

/* Sticky table header for long tables */
table.sticky-header {
  position: relative;
}

table.sticky-header thead {
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(26, 35, 126, 0.15);
}

/* Animation for table rows */
@keyframes tableRowFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

tbody tr {
  animation: tableRowFadeIn 0.3s ease forwards;
}

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

/* Print table styles */
@media print {
  table {
    page-break-inside: auto;
    box-shadow: none;
    border: 1px solid #ddd;
  }
  
  thead {
    display: table-header-group;
  }
  
  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  
  tbody tr:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .site-header,
  .nav-buttons,
  .back-link,
  .quiz-container,
  .tts-modal-overlay,
  .tts-player-controls {
    display: none;
  }
  
  body {
    background: white;
  }
  
  .chapter-content {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ============================================
   CHAPTER BACKGROUND VARIATIONS
   ============================================ */
.chapter-bg-19, .chapter-bg-26, .chapter-bg-33, .chapter-bg-40 { background: var(--chapter-bg-1); }
.chapter-bg-20, .chapter-bg-27, .chapter-bg-34, .chapter-bg-41 { background: var(--chapter-bg-2); }
.chapter-bg-21, .chapter-bg-28, .chapter-bg-35, .chapter-bg-42 { background: var(--chapter-bg-3); }
.chapter-bg-22, .chapter-bg-29, .chapter-bg-36, .chapter-bg-43 { background: var(--chapter-bg-4); }
.chapter-bg-23, .chapter-bg-30, .chapter-bg-37, .chapter-bg-44 { background: var(--chapter-bg-5); }
.chapter-bg-24, .chapter-bg-31, .chapter-bg-38, .chapter-bg-45 { background: var(--chapter-bg-6); }
.chapter-bg-25, .chapter-bg-32, .chapter-bg-39 { background: var(--chapter-bg-7); }

/* Apply to page wrapper */
.page-wrapper[data-chapter] {
  min-height: 100vh;
}
/* ============================================
   FLOATING NAVIGATION BUTTONS
   ============================================ */
.floating-nav {
  position: fixed;
  right: 20px;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9998;
  transition: bottom 0.3s ease;
}

/* Adjust position when TTS player is visible */
body.tts-player-active .floating-nav {
  bottom: 180px;
}

.floating-nav-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 
    0 4px 15px rgba(26, 35, 126, 0.25),
    0 2px 8px rgba(63, 81, 181, 0.2);
  position: relative;
  overflow: hidden;
}

/* Shimmer effect on hover */
.floating-nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.5s ease;
}

.floating-nav-btn:hover::before {
  left: 100%;
}

.floating-nav-btn:hover {
  transform: scale(1.15) translateY(-3px);
  box-shadow: 
    0 8px 25px rgba(26, 35, 126, 0.35),
    0 4px 12px rgba(63, 81, 181, 0.3);
}

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

/* Home Button - Purple Gradient */
.floating-nav-btn.home-btn {
  background: linear-gradient(145deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.floating-nav-btn.home-btn:hover {
  background: linear-gradient(145deg, #7B85F0 0%, #8B5FC7 100%);
}

/* Scroll to Top Button - Blue Gradient */
.floating-nav-btn.scroll-top-btn {
  background: linear-gradient(145deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
}

.floating-nav-btn.scroll-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.floating-nav-btn.scroll-top-btn:hover {
  background: linear-gradient(145deg, #6CBEFF 0%, #33F5FF 100%);
}

/* Scroll to Bottom Button - Green Gradient */
.floating-nav-btn.scroll-bottom-btn {
  background: linear-gradient(145deg, #43e97b 0%, #38f9d7 100%);
  color: white;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px) scale(0.8);
}

.floating-nav-btn.scroll-bottom-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.floating-nav-btn.scroll-bottom-btn:hover {
  background: linear-gradient(145deg, #5FED8F 0%, #5BFBE2 100%);
}

/* Tooltip for floating buttons */
.floating-nav-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 110%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--navy-dark);
  color: white;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.floating-nav-btn[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Mobile Styles */
@media (max-width: 767px) {
  .floating-nav {
    right: 15px;
    bottom: 90px;
    gap: 10px;
  }
  
  .floating-nav-btn {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
  
  /* Hide tooltip on mobile - use tap instead */
  .floating-nav-btn[data-tooltip]::after {
    display: none;
  }
  
  body.tts-player-active .floating-nav {
    bottom: 160px;
  }
}

/* Desktop large screens */
@media (min-width: 1200px) {
  .floating-nav {
    right: 30px;
    bottom: 120px;
  }
  
  .floating-nav-btn {
    width: 55px;
    height: 55px;
    font-size: 1.4rem;
  }
}

/* Print - hide floating nav */
@media print {
  .floating-nav {
    display: none;
  }
}