:root {
  /* Global palette */
  --color-primary: #f7ce46;           /* Yellow accent */
  --color-primary-contrast: #000000;  /* Black text on yellow */
  --color-bg: #f8f9fa;                /* App background */
  --color-surface: #3e8bc8;           /* Blue sidebar background */
  --color-border: #2c6ba0;            /* Darker blue divider lines */
  --color-muted: #ffffff;             /* White secondary text */
  --color-hover: #336aa8;             /* Darker blue hover tint */
  --color-black: #000000;             /* Pure black */
  --text-white: #ffffff;              /* White text */

  /* Interactive Video Player accent hooks */
  --ivp-accent: var(--color-primary);

  /* Feedback row layout */
  --ivp-feedback-actions-min: 220px;  /* reserved width for CTA column */
  --ivp-feedback-safe-gap: 16px;      /* extra breathing room between text and button */

  /* === COURSE NAVIGATION COLORS === */
  /* Lesson Text */
  --course-title-text: #f7ce46;
  --course-instructor-text: #ffffff;
  --course-meta-text: #cccccc;
  --current-lesson-meta-text: #666666;
  --course-lesson-title: #ffffff;
  --course-lesson-description: #ffffff;
  --course-lesson-duration: #e6f2ff;
  
  /* Progress Bar */
  --course-progress-bg: #2c6ba0;
  --course-progress-track: #2c6ba0;
  --course-progress-text: #ffffff;
  
  /* Lesson States */
  --course-lesson-border: #2c6ba0;
  --course-lesson-hover-bg: #336aa8;
  --course-lesson-hover-border: #f7ce46;
  --course-lesson-number-bg: rgba(255, 255, 255, 0.2);
  --course-lesson-number-text: #ffffff;
  
  /* Scrollbar */
  --course-scrollbar-track: #2c6ba0;
  --course-scrollbar-thumb: #5aa3d1;
  --course-scrollbar-thumb-hover: #7bb5dc;
  
  /* Main Content */
  --course-main-bg: #f8f9fa;
  --course-header-bg: #ffffff;
  --course-header-text: #1c1d1f;
  --course-header-border: #e5e5e5;
  
  /* Loading State */
  --course-loading-text: #666;

  /* === VIDEO PLAYER COLORS === */
  /* Player Background */
  --player-bg-light: #f0f4ff;
  --player-bg-dark: #000;
  
  /* Controls */
  --player-controls-gradient-start: rgba(0, 0, 0, 0.8);
  --player-controls-gradient-end: transparent;
  --player-controls-text: #fff;
  --player-time-text: #fff;
  
  /* Progress Bar */
  --player-progress-track: rgba(255, 255, 255, 0.3);
  --player-progress-handle: #fff;
  --player-progress-handle-shadow: rgba(0, 0, 0, 0.3);
  --player-progress-handle-shadow-active: rgba(0, 0, 0, 0.4);
  
  /* Volume Slider */
  --player-volume-popup-bg: rgba(0, 0, 0, 0.85);
  --player-volume-popup-shadow: rgba(0, 0, 0, 0.3);
  --player-volume-track: rgba(255, 255, 255, 0.3);
  --player-volume-thumb: #fff;
  --player-volume-thumb-shadow: rgba(0, 0, 0, 0.3);
  
  /* Thumbnail Preview */
  --player-thumbnail-bg: #000;
  --player-thumbnail-shadow: rgba(0, 0, 0, 0.5);
  --player-thumbnail-border: rgba(255, 255, 255, 0.1);
  
  /* Interaction Markers */
  --player-marker-color: #FFC107;
  
  /* Loading Spinner */
  --player-spinner-track: rgba(255, 255, 255, 0.3);
  --player-spinner-active: #fff;
  
  /* Error State */
  --player-error-icon: #f44336;
  --player-error-text: #fff;
  
  /* Theme Variants */
  --player-theme-dark-bg: #1a1a1a;
  --player-theme-light-bg: #f5f5f5;

  /* === SETTINGS/REPLAY MENU === */
  --settings-menu-bg: #fff;
  --settings-menu-shadow: rgba(0, 0, 0, 0.15);
  --settings-menu-caret: #fff;
  --settings-menu-item-hover: #f5f5f5;
  --settings-menu-item-text: #333;
  
  /* Dark Theme Settings */
  --settings-menu-bg-dark: #2a2a2a;
  --settings-menu-shadow-dark: rgba(0, 0, 0, 0.5);
  --settings-menu-caret-dark: #2a2a2a;
  --settings-menu-item-hover-dark: #3a3a3a;
  --settings-menu-item-text-dark: #fff;

  /* === QUIZ INTERACTIONS === */
  /* Overlay */
  --quiz-overlay-bg: rgba(0, 0, 0, 0.85);
  
  /* Question Card */
  --quiz-card-bg: #fff;
  --quiz-card-shadow: rgba(0, 0, 0, 0.3);
  --quiz-skip-btn-color: #666;
  --quiz-skip-btn-hover-bg: #f5f5f5;
  --quiz-skip-btn-hover-color: #333;
  
  /* Question Text */
  --quiz-question-text: #333;
  
  /* Answer Options */
  --quiz-option-bg: #f8f9fa;
  --quiz-option-border: #e9ecef;
  --quiz-option-text: #333;
  --quiz-option-hover-bg: #e9ecef;
  --quiz-option-hover-border: #dee2e6;
  --quiz-option-hover-shadow: rgba(0, 0, 0, 0.1);
  --quiz-option-active-shadow: rgba(0, 0, 0, 0.1);
  
  /* Correct Answer State */
  --quiz-correct-bg: #d4edda;
  --quiz-correct-border: #28a745;
  --quiz-correct-text: #155724;
  
  /* Incorrect Answer State */
  --quiz-incorrect-bg: #f8d7da;
  --quiz-incorrect-border: #dc3545;
  --quiz-incorrect-text: #721c24;
  
  /* Feedback Band */
  --quiz-feedback-border: #e9ecef;
  --quiz-feedback-shadow: rgba(0, 0, 0, 0.15);
  --quiz-feedback-correct-bg: #d4edda;
  --quiz-feedback-correct-text: #155724;
  --quiz-feedback-incorrect-bg: #f8d7da;
  --quiz-feedback-incorrect-text: #721c24;
  
  /* Dark Theme Quiz */
  --quiz-card-bg-dark: #2a2a2a;
  --quiz-question-text-dark: #fff;
  --quiz-option-bg-dark: #3a3a3a;
  --quiz-option-border-dark: #4a4a4a;
  --quiz-option-text-dark: #fff;
  --quiz-option-hover-bg-dark: #4a4a4a;
  --quiz-option-hover-border-dark: #5a5a5a;
  --quiz-feedback-border-dark: #4a4a4a;
  --quiz-skip-btn-color-dark: #aaa;
  --quiz-skip-btn-hover-bg-dark: #3a3a3a;
  --quiz-skip-btn-hover-color-dark: #fff;
  
  /* Dark Theme Answer States */
  --quiz-incorrect-bg-dark: #e57373;
  --quiz-incorrect-border-dark: #ef9a9a;
  --quiz-incorrect-text-dark: #fff;
  --quiz-correct-bg-dark: #81c784;
  --quiz-correct-border-dark: #66bb6a;
  --quiz-correct-text-dark: #0b2f0b;

  /* === ACTION BUTTONS === */
  /* Next Button (Correct) */
  --btn-next-bg: #28a745;
  --btn-next-bg-hover: #218838;
  
  /* Try Again Button */
  --btn-try-again-bg: #e57373;
  --btn-try-again-bg-hover: #ef5350;
  --btn-try-again-bg-active: #e53935;

  /* === REPLAY MODE === */
  --replay-indicator-text: #666;
  --replay-indicator-text-dark: #aaa;
  --replay-card-border: #2196F3;
  --replay-card-border-dark: #4CAF50;
  
  /* Previous Answer Markers */
  --replay-marker-bg: #2196F3;
  --replay-marker-text: var(--text-white);
  --replay-marker-shadow: rgba(0, 0, 0, 0.2);
  --replay-marker-correct-bg: #28a745;
  --replay-marker-incorrect-bg: #dc3545;

  /* === REMAINING QUIZ SPECIFICS === */
  /* Quiz Card Extended */
  --quiz-card-bg-main: #fff;
  --quiz-card-shadow-main: rgba(0, 0, 0, 0.3);
  --quiz-skip-color: #666;
  --quiz-skip-hover-bg: #f5f5f5;
  --quiz-skip-hover-color: #333;

  /* Quiz Options Extended */
  --quiz-option-bg-main: #f8f9fa;
  --quiz-option-border-main: #e9ecef;
  --quiz-option-text-main: #333;
  --quiz-option-hover-bg-main: #e9ecef;
  --quiz-option-hover-border-main: #dee2e6;
  --quiz-option-hover-shadow-main: rgba(0, 0, 0, 0.1);
  --quiz-option-active-shadow-main: rgba(0, 0, 0, 0.1);

  /* Quiz Option Selected State (Before Submission) */
  --quiz-option-selected-bg-main: rgb(246, 195, 67);
  --quiz-option-selected-border-main: rgb(214, 158, 46);
  --quiz-option-selected-text-main: #1f2933;
  --quiz-option-selected-hover-bg-main: rgb(240, 180, 41);

  /* Quiz States Extended */
  --quiz-correct-bg-main: #d4edda;
  --quiz-correct-border-main: #28a745;
  --quiz-correct-text-main: #155724;
  --quiz-incorrect-bg-main: #f8d7da;
  --quiz-incorrect-border-main: #dc3545;
  --quiz-incorrect-text-main: #721c24;

  /* Quiz Feedback Extended */
  --quiz-feedback-border-main: #e9ecef;
  --quiz-feedback-shadow-main: rgba(0, 0, 0, 0.15);
  --quiz-feedback-correct-bg-main: #d4edda;
  --quiz-feedback-correct-text-main: #155724;
  --quiz-feedback-incorrect-bg-main: #f8d7da;
  --quiz-feedback-incorrect-text-main: #721c24;

  /* === EXTENDED DARK THEME QUIZ === */
  --quiz-card-bg-dark-main: #2a2a2a;
  --quiz-option-bg-dark-main: #3a3a3a;
  --quiz-option-border-dark-main: #4a4a4a;
  --quiz-option-hover-bg-dark-main: #4a4a4a;
  --quiz-option-hover-border-dark-main: #5a5a5a;
  --quiz-feedback-border-dark-main: #4a4a4a;
  --quiz-skip-color-dark-main: #aaa;
  --quiz-skip-hover-bg-dark-main: #3a3a3a;

  /* Dark Theme Answer States Extended */
  --quiz-incorrect-bg-dark-main: #e57373;
  --quiz-incorrect-border-dark-main: #ef9a9a;
  --quiz-correct-bg-dark-main: #81c784;
  --quiz-correct-border-dark-main: #66bb6a;
  --quiz-correct-text-dark-main: #0b2f0b;

  /* === BUTTON STATES EXTENDED === */
  --btn-success-main: #28a745;
  --btn-success-hover-main: #218838;
  --btn-error-main: #e57373;
  --btn-error-hover-main: #ef5350;
  --btn-error-active-main: #e53935;

  /* === REPLAY EXTENDED === */
  --replay-indicator-main: #666;
  --replay-indicator-dark-main: #aaa;
  --replay-border-main: #2196F3;
  --replay-border-dark-main: #4CAF50;
  --replay-marker-main: #2196F3;
  --replay-marker-correct-main: #28a745;
  --replay-marker-incorrect-main: #dc3545;
  --replay-marker-shadow-main: rgba(0, 0, 0, 0.2);

  /* === UTILITY COLORS === */
  --border-transparent: transparent;
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.2);
  --shadow-heavy: rgba(0, 0, 0, 0.3);
}

/* App base - Main document body styling */
body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* App Header - Top application header container */
.app-header {
  position: relative;
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
  height: 80px;
}

/* Header inner wrapper - Centers logo and positions email */
.app-header-inner {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
}

/* Logo link container - Full height for logo sizing */
.app-header-logo {
  height: 100%;
  display: flex;
  align-items: center;
}

/* Logo image styling - Fixed height with aspect ratio preservation */
.app-header-logo img {
  max-height: calc(100% - 8px);  /* touch header edges with small margin */
  max-width: 100%;   /* prevent horizontal overflow */
  width: auto;   /* do not stretch */
  height: auto;  /* maintain aspect ratio */
  object-fit: contain;
  display: block;
}

/* Contact email link - Positioned at right side of header */
.app-header-email {
  position: absolute;
  right: 20px;
  color: #000000;
  font-size: 14px;
  text-decoration: none;
}

/* Email link hover state - Yellow color on hover */
.app-header-email:hover {
  color: var(--color-primary);
}

/* Course Layout - Main flex container for sidebar and content */
.course-container {
  display: flex;
  flex: 1;
  min-height: 100vh;
}

/* Sidebar Styling - Left navigation panel with fixed width */
.course-sidebar {
  width: 320px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Course info header - Top section of sidebar with course details */
.course-header {
  padding: 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* Course title - Main course name heading */
.course-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--course-title-text);
}

/* Instructor name - Course instructor display text */
.course-instructor {
  font-size: 13px;
  color: var(--course-instructor-text);
  margin: 0 0 4px 0;
}

/* Course metadata - Level, duration, and lesson count info */
.course-meta {
  font-size: 13px;
  color: var(--course-meta-text);
  margin: 0;
}

/* Progress tracking section - Contains progress bar and stats */
.course-progress {
  padding: 16px 20px;
  background: var(--course-progress-bg);
  border-bottom: 1px solid var(--color-border);
}

/* Progress bar container - Gray background track */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--course-progress-track);
  border-radius: 3px;
  overflow: hidden;
}

/* Progress bar fill - Yellow indicator showing completion percentage */
.progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: width 0.3s ease;
  width: 0%;
}

/* Progress percentage text - Small text below progress bar */
.progress-text {
  font-size: 12px;
  color: var(--course-progress-text);
  margin-top: 8px;
}

/* Lesson List - Scrollable container for lesson items */
.lessons-container {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--course-scrollbar-thumb) var(--course-scrollbar-track);
}

/* Webkit scrollbar track width */
.lessons-container::-webkit-scrollbar { width: 6px; }
/* Webkit scrollbar track background color */
.lessons-container::-webkit-scrollbar-track { background: var(--course-scrollbar-track); }
/* Webkit scrollbar thumb styling */
.lessons-container::-webkit-scrollbar-thumb { background: var(--course-scrollbar-thumb); border-radius: 3px; }
/* Webkit scrollbar thumb hover state */
.lessons-container::-webkit-scrollbar-thumb:hover { background: var(--course-scrollbar-thumb-hover); }

/* Individual lesson row - Clickable lesson entry with number and details */
.lesson-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--course-lesson-border);
  transition: background-color 0.2s ease, border-left-color 0.2s ease;
  position: relative;
  border-left: 3px solid transparent;
}

/* Lesson item hover state - Light background and border accent */
.lesson-item:hover { background-color: var(--course-lesson-hover-bg); border-left-color: var(--course-lesson-hover-border); }

/* Active lesson state - Yellow accent and darker blue background */
.lesson-item.active {
  background-color: var(--color-hover);
  border-left: 3px solid var(--color-primary);
}

/* Completed lesson state - Slightly faded opacity */
.lesson-item.completed { opacity: 0.8; }

/* Lesson number badge - Circular number indicator */
.lesson-number {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--course-lesson-number-bg);
  color: var(--course-lesson-number-text);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  margin-top: 2px;
}

/* Active lesson number - Yellow background with black text */
.lesson-item.active .lesson-number {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

/* Completed lesson number - Yellow background with checkmark */
.lesson-item.completed .lesson-number {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-size: 10px;
  font-weight: 700;
}

/* Lesson content wrapper - Flexible text content area */
.lesson-content { flex: 1; min-width: 0; }

/* Lesson title - Main lesson name heading */
.lesson-title {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 4px 0;
  color: var(--course-lesson-title);
  line-height: 1.3;
}

/* Active lesson title - Yellow color for selected lesson */
.lesson-item.active .lesson-title {
  color: #f7ce46;
}

/* Lesson description - Brief lesson summary text */
.lesson-description {
  font-size: 12px;
  color: var(--course-lesson-description);
  margin: 0 0 4px 0;
  line-height: 1.3;
}

/* Lesson duration - Small time indicator text */
.lesson-duration { font-size: 11px; color: var(--course-lesson-duration); margin: 0; }

/* Main Content Area - Right side video and lesson display */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--course-main-bg);
  position: relative;
  padding-bottom: 20px; /* Add some bottom padding */
}

/* Current lesson header - Top bar showing active lesson info */
.lesson-header {
  padding: 20px 30px;
  background: var(--course-header-bg);
  color: var(--course-header-text);
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--course-header-border);
}

/* Current lesson title - Large heading for active lesson */
.current-lesson-title { font-size: 24px; font-weight: 500; margin: 0 0 8px 0; color: #336aa8; }
/* Current lesson metadata - Duration and description for active lesson */
.current-lesson-meta { font-size: 14px; color: var(--current-lesson-meta-text); margin: 0; }

/* Video player container - Centers player with fixed height */
.player-wrapper {
  background: var(--player-bg-light); /* Very light blue instead of black */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60vh;      /* Set fixed height instead of flex: 1 */
  min-height: 400px;
  max-height: 600px;
}

/* Ensure IVP fits the course layout container */
/* IVP player wrapper integration - Full size within main content */
.main-content .ivp-player-wrapper { width: 100%; height: 100%; background: var(--player-bg-light); }
/* IVP video container integration - Override aspect ratio for layout */
.main-content .ivp-video-container { padding-bottom: 0; height: 100%; }
/* IVP interaction overlay - High z-index for quiz popups */
.main-content .ivp-interaction-overlay { z-index: 1000; }

/* Loading State - Centered loading indicator */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--course-loading-text);
  font-size: 14px;
  padding: 40px;
}

/* Loading text styling - Small gray text below spinner */
.loading small { font-size: 14px; color: var(--course-loading-text); margin-top: 8px; }

/* Mobile Responsive - Tablet and mobile layout adjustments */
@media (max-width: 768px) {
  /* Stack sidebar below content on mobile */
  .course-container { flex-direction: column; }
  /* Full width sidebar moved to bottom */
  .course-sidebar { width: 100%; max-height: 200px; order: 2; }
  /* Move main content to top on mobile */
  .main-content { order: 1; min-height: 60vh; }
  /* Smaller player height on mobile */
  .player-wrapper { height: 50vh; min-height: 250px; max-height: 400px; }
  /* Reduced lesson header padding on mobile */
  .lesson-header { padding: 15px 20px; }
  /* Smaller lesson title on mobile */
  .current-lesson-title { font-size: 20px; }

  /* Sidebar + lessons tightening - Compact lesson list */
  .lessons-container { max-height: 180px; padding: 4px 0; }
  /* Compact lesson items on mobile */
  .lesson-item { padding: 10px 16px; }
  /* Smaller lesson numbers on mobile */
  .lesson-number { width: 20px; height: 20px; font-size: 11px; margin-right: 10px; }
  /* Smaller lesson titles on mobile */
  .lesson-title { font-size: 13px; }
  /* Smaller lesson descriptions on mobile */
  .lesson-description { font-size: 11px; }
  /* Smaller lesson duration text on mobile */
  .lesson-duration { font-size: 10px; }
  /* Compact course header on mobile */
  .course-header { padding: 16px; }
  /* Compact progress section on mobile */
  .course-progress { padding: 12px 16px; }
}

/* Theme override - Intentionally keep course UI light regardless of OS theme */