/**
 * LMS v2 Styles
 * /assets/css/learn/learn.css
 * 
 * Styles for the Education Hub, Course Detail, and Lesson Player pages.
 * Uses CSS custom properties for theming consistency with GBC design system.
 * 
 * @see docs/06-LMS/LMS_v2_Developer_Guide.md
 */

/* ============================================================================
   CSS VARIABLES - Aligned with GBC Design System (style.css)
   ============================================================================ */

:root {
  /* LMS colors - inherit from app-wide variables with fallbacks */
  --learn-primary: var(--primary-600, var(--gbc-primary, #303E8B));
  --learn-success: var(--success-600, #16A34A);
  --learn-warning: var(--warning-600, #FF9F29);
  --learn-danger: var(--danger-600, #DC2626);
  --learn-info: var(--info-600, #2563EB);
  
  /* Tier colors (GBC-specific) */
  --tier-free: var(--success-500, #22C55E);
  --tier-starter: var(--info-500, #3B82F6);
  --tier-pro: var(--warning-500, #EAB308);
  --tier-platinum: var(--lilac-400, #c48afe);
  --tier-vip: var(--danger-500, #EF4444);
  
  /* Neutral colors - from app design system */
  --learn-neutral-50: var(--neutral-50, #F5F6FA);
  --learn-neutral-100: var(--neutral-100, #F3F4F6);
  --learn-neutral-200: var(--neutral-200, #EBECEF);
  --learn-neutral-300: var(--neutral-300, #D1D5DB);
  --learn-neutral-400: var(--neutral-400, #9CA3AF);
  --learn-neutral-500: var(--neutral-500, #6B7280);
  --learn-neutral-600: var(--neutral-600, #4B5563);
  --learn-neutral-700: var(--neutral-700, #374151);
  
  /* Progress colors */
  --progress-bg: var(--neutral-200, #EBECEF);
  --progress-fill: var(--learn-primary);
  --progress-complete: var(--learn-success);
  
  /* Card styles */
  --card-bg: #ffffff;
  --card-border: var(--neutral-200, #EBECEF);
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  
  /* Spacing - aligned with app spacing scale */
  --learn-spacing-xs: 0.25rem;
  --learn-spacing-sm: 0.5rem;
  --learn-spacing-md: 1rem;
  --learn-spacing-lg: 1.5rem;
  --learn-spacing-xl: 2rem;
  
  /* Border radius - aligned with app radius */
  --learn-radius-sm: 4px;
  --learn-radius-md: 8px;
  --learn-radius-lg: 12px;
}

/* ============================================================================
   BASE LAYOUT
   ============================================================================ */

.learn-page {
  min-height: 100vh;
  background: var(--learn-neutral-50);
  padding-bottom: var(--learn-spacing-xl);
}

.learn-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--learn-spacing-md);
}

/* Loading state */
.learn-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: var(--learn-spacing-md);
}

.learn-loading__spinner {
  font-size: 2rem;
  color: var(--learn-primary);
}

.learn-loading__text {
  color: var(--learn-neutral-500);
  font-size: 1rem;
}

/* Error state */
.learn-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.learn-error__content {
  text-align: center;
  padding: var(--learn-spacing-xl);
}

.learn-error__content i {
  font-size: 3rem;
  color: var(--learn-danger);
  margin-bottom: var(--learn-spacing-md);
}

.learn-error__message {
  color: var(--learn-neutral-500);
  margin-bottom: var(--learn-spacing-lg);
}

/* Utility classes */
.hidden {
  display: none !important;
}

/* ============================================================================
   SKELETON LOADERS
   ============================================================================ */

/* Base skeleton animation */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

@keyframes skeleton-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

/* Skeleton container */
.learn-loading--skeleton {
  min-height: 400px;
  padding: var(--learn-spacing-lg);
}

.learn-skeleton {
  max-width: 1200px;
  margin: 0 auto;
}

/* Skeleton base element */
.learn-skeleton__title,
.learn-skeleton__subtitle,
.learn-skeleton__breadcrumb,
.learn-skeleton__text,
.learn-skeleton__card-img,
.learn-skeleton__card-title,
.learn-skeleton__card-text,
.learn-skeleton__lesson,
.learn-skeleton__player-area,
.learn-skeleton__player-controls,
.learn-skeleton__sidebar-card {
  background: linear-gradient(90deg, var(--learn-neutral-200) 25%, #f1f3f5 50%, var(--learn-neutral-200) 75%);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--learn-radius-sm);
}

/* Skeleton header */
.learn-skeleton__header {
  margin-bottom: var(--learn-spacing-xl);
}

.learn-skeleton__breadcrumb {
  width: 200px;
  height: 14px;
  margin-bottom: var(--learn-spacing-md);
}

.learn-skeleton__title {
  width: 60%;
  height: 32px;
  margin-bottom: var(--learn-spacing-sm);
}

.learn-skeleton__subtitle {
  width: 40%;
  height: 18px;
}

/* Hub skeleton - grid of cards */
.learn-skeleton__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--learn-spacing-lg);
}

.learn-skeleton__card {
  background: var(--card-bg);
  border-radius: var(--learn-radius-md);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.learn-skeleton__card-img {
  width: 100%;
  height: 160px;
  border-radius: 0;
}

.learn-skeleton__card-body {
  padding: var(--learn-spacing-md);
}

.learn-skeleton__card-title {
  width: 70%;
  height: 20px;
  margin-bottom: var(--learn-spacing-sm);
}

.learn-skeleton__card-text {
  width: 100%;
  height: 14px;
  margin-bottom: var(--learn-spacing-xs);
}

.learn-skeleton__card-text--short {
  width: 50%;
}

/* Course/Lesson skeleton - two-column layout */
.learn-skeleton__layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--learn-spacing-xl);
}

@media (max-width: 768px) {
  .learn-skeleton__layout {
    grid-template-columns: 1fr;
  }
}

.learn-skeleton__main {
  min-width: 0;
}

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

/* Lesson list skeleton */
.learn-skeleton__lesson-list {
  display: flex;
  flex-direction: column;
  gap: var(--learn-spacing-sm);
}

.learn-skeleton__lesson {
  height: 60px;
  border-radius: var(--learn-radius-md);
}

/* Player skeleton */
.learn-skeleton__player {
  margin-bottom: var(--learn-spacing-lg);
}

.learn-skeleton__player-area {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--learn-radius-md);
  margin-bottom: var(--learn-spacing-sm);
}

.learn-skeleton__player-controls {
  height: 48px;
  border-radius: var(--learn-radius-sm);
}

/* Content skeleton */
.learn-skeleton__content {
  padding: var(--learn-spacing-md) 0;
}

.learn-skeleton__text {
  width: 100%;
  height: 16px;
  margin-bottom: var(--learn-spacing-sm);
}

.learn-skeleton__text--short {
  width: 60%;
}

/* Sidebar cards skeleton */
.learn-skeleton__sidebar-card {
  height: 150px;
  border-radius: var(--learn-radius-md);
}

.learn-skeleton__sidebar-card--short {
  height: 80px;
}

/* ============================================================================
   BREADCRUMBS
   ============================================================================ */

.learn-breadcrumbs {
  padding: var(--learn-spacing-md) 0;
  margin-bottom: var(--learn-spacing-md);
}

.learn-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--learn-spacing-sm);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
}

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

.learn-breadcrumbs__item:not(:last-child)::after {
  content: '/';
  color: var(--learn-neutral-400);
}

.learn-breadcrumbs__link {
  color: var(--learn-primary);
  text-decoration: none;
}

.learn-breadcrumbs__link:hover {
  text-decoration: underline;
}

.learn-breadcrumbs__item--current span {
  color: var(--learn-neutral-500);
}

/* ============================================================================
   PROGRESS BAR
   ============================================================================ */

.progress-bar {
  height: 8px;
  background: var(--progress-bg);
  border-radius: var(--learn-radius-sm);
  overflow: hidden;
}

.progress-bar--small {
  height: 4px;
}

.progress-bar--large {
  height: 12px;
}

.progress-bar__fill {
  height: 100%;
  background: var(--progress-fill);
  border-radius: var(--learn-radius-sm);
  transition: width 0.3s ease;
}

.progress-bar__fill--complete {
  background: var(--progress-complete);
}

.progress-bar__label,
.progress-bar__percent {
  font-size: 0.75rem;
  color: var(--learn-neutral-500);
}

/* ============================================================================
   EDUCATION HUB
   ============================================================================ */

.learn-hub__header {
  background: linear-gradient(135deg, var(--learn-primary) 0%, #0056b3 100%);
  color: white;
  padding: var(--learn-spacing-xl);
  border-radius: var(--learn-radius-lg);
  margin-bottom: var(--learn-spacing-lg);
}

.learn-hub__title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 var(--learn-spacing-sm);
}

.learn-hub__subtitle {
  font-size: 1.125rem;
  opacity: 0.9;
  margin: 0 0 var(--learn-spacing-md);
}

.learn-hub__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--learn-spacing-md);
}

.learn-hub__meta-item {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-xs);
  font-size: 0.875rem;
  opacity: 0.9;
}

.learn-hub__tier {
  padding: var(--learn-spacing-xs) var(--learn-spacing-sm);
  border-radius: var(--learn-radius-sm);
  background: rgba(255, 255, 255, 0.2);
}

/* Continue Learning */
.learn-hub__continue {
  background: var(--card-bg);
  border-radius: var(--learn-radius-md);
  padding: var(--learn-spacing-lg);
  margin-bottom: var(--learn-spacing-lg);
  box-shadow: var(--card-shadow);
}

.learn-hub__continue-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--learn-spacing-lg);
  flex-wrap: wrap;
}

.learn-hub__continue-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--learn-neutral-500);
}

.learn-hub__continue-title {
  font-size: 1.25rem;
  margin: var(--learn-spacing-xs) 0;
}

.learn-hub__continue-progress {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
  margin-top: var(--learn-spacing-sm);
}

.learn-hub__continue-progress .progress-bar {
  width: 120px;
}

/* Progress section */
.learn-hub__progress {
  background: var(--card-bg);
  border-radius: var(--learn-radius-md);
  padding: var(--learn-spacing-lg);
  margin-bottom: var(--learn-spacing-lg);
  box-shadow: var(--card-shadow);
}

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

.learn-hub__progress-title {
  font-size: 1rem;
  margin: 0;
}

.learn-hub__progress-count {
  font-size: 0.875rem;
  color: var(--learn-neutral-500);
}

/* Course grid */
.learn-hub__courses {
  margin-top: var(--learn-spacing-lg);
}

.learn-hub__section-title {
  font-size: 1.5rem;
  margin: 0 0 var(--learn-spacing-xs);
}

.learn-hub__section-subtitle {
  color: var(--learn-neutral-500);
  margin: 0 0 var(--learn-spacing-lg);
}

.learn-hub__course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--learn-spacing-lg);
}

/* ============================================================================
   COURSE CARD
   ============================================================================ */

.course-card {
  background: var(--card-bg);
  border-radius: var(--learn-radius-md);
  box-shadow: var(--card-shadow);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.course-card:hover:not(.course-card--locked) {
  transform: translateY(-4px);
  box-shadow: var(--card-hover-shadow);
}

.course-card--locked {
  opacity: 0.75;
  cursor: not-allowed;
}

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

.course-card__phase {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--learn-primary);
}

.course-card__lock,
.course-card__completed {
  font-size: 1rem;
}

.course-card__lock {
  color: var(--learn-neutral-500);
}

.course-card__completed {
  color: var(--learn-success);
}

.course-card__body {
  flex: 1;
  padding: var(--learn-spacing-md);
}

.course-card__title {
  font-size: 1.125rem;
  margin: 0 0 var(--learn-spacing-sm);
  line-height: 1.3;
}

.course-card__description {
  font-size: 0.875rem;
  color: var(--learn-neutral-500);
  margin: 0 0 var(--learn-spacing-md);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--learn-spacing-sm);
  font-size: 0.75rem;
  color: var(--learn-neutral-500);
}

.course-card__meta span {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-xs);
}

.course-card__tier {
  padding: 2px 6px;
  border-radius: var(--learn-radius-sm);
  font-weight: 600;
}

.course-card__tier--free { background: #d4edda; color: #155724; }
.course-card__tier--silver { background: var(--learn-neutral-200); color: #495057; }
.course-card__tier--gold { background: #fff3cd; color: #856404; }
.course-card__tier--platinum { background: #e2d9f3; color: #5a3e85; }

.course-card__progress {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
  margin-top: var(--learn-spacing-md);
}

.course-card__progress .progress-bar {
  flex: 1;
}

.course-card__footer {
  padding: var(--learn-spacing-md);
  border-top: 1px solid var(--card-border);
}

.course-card__btn {
  width: 100%;
}

/* ============================================================================
   COURSE DETAIL PAGE
   ============================================================================ */

.learn-course__content {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--learn-spacing-xl);
}

@media (max-width: 992px) {
  .learn-course__content {
    grid-template-columns: 1fr;
  }
}

.learn-course__header {
  background: var(--card-bg);
  border-radius: var(--learn-radius-md);
  padding: var(--learn-spacing-xl);
  margin-bottom: var(--learn-spacing-lg);
  box-shadow: var(--card-shadow);
}

.learn-course__header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--learn-spacing-sm);
  margin-bottom: var(--learn-spacing-md);
}

.learn-course__phase-badge {
  padding: var(--learn-spacing-xs) var(--learn-spacing-sm);
  background: var(--learn-primary);
  color: white;
  border-radius: var(--learn-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.learn-course__tier {
  padding: var(--learn-spacing-xs) var(--learn-spacing-sm);
  border-radius: var(--learn-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.learn-course__tier--free { background: #d4edda; color: #155724; }
.learn-course__tier--silver { background: var(--learn-neutral-200); color: #495057; }
.learn-course__tier--gold { background: #fff3cd; color: #856404; }
.learn-course__tier--platinum { background: #e2d9f3; color: #5a3e85; }

.learn-course__title {
  font-size: 1.75rem;
  margin: 0 0 var(--learn-spacing-sm);
}

.learn-course__description {
  color: var(--learn-neutral-500);
  line-height: 1.6;
  margin: 0;
}

/* Status badge */
.learn-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--learn-spacing-xs);
  padding: var(--learn-spacing-xs) var(--learn-spacing-sm);
  border-radius: var(--learn-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.learn-status-badge--completed {
  background: #d4edda;
  color: #155724;
}

.learn-status-badge--in-progress {
  background: #cce5ff;
  color: #004085;
}

/* Lesson list */
.learn-course__lessons {
  background: var(--card-bg);
  border-radius: var(--learn-radius-md);
  padding: var(--learn-spacing-lg);
  box-shadow: var(--card-shadow);
}

.learn-course__section-title {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
  font-size: 1.25rem;
  margin: 0 0 var(--learn-spacing-lg);
}

.lesson-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lesson-item {
  border-bottom: 1px solid var(--card-border);
}

.lesson-item:last-child {
  border-bottom: none;
}

.lesson-item__link {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-md);
  padding: var(--learn-spacing-md);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}

.lesson-item__link:hover {
  background: var(--learn-neutral-50);
}

.lesson-item--locked .lesson-item__link {
  opacity: 0.6;
  cursor: not-allowed;
}

.lesson-item--locked .lesson-item__link:hover {
  background: transparent;
}

.lesson-item__status {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.lesson-item__status--completed {
  color: var(--learn-success);
}

.lesson-item__status--next {
  color: var(--learn-primary);
}

.lesson-item__status--locked {
  color: var(--learn-neutral-400);
}

.lesson-item__status--restricted {
  color: var(--tier-gold);
}

.lesson-item--restricted .lesson-item__link {
  opacity: 0.75;
  cursor: pointer;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 193, 7, 0.05) 100%);
}

.lesson-item--restricted .lesson-item__link:hover {
  background: rgba(255, 193, 7, 0.1);
}

.lesson-item__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--learn-spacing-xs);
}

.lesson-item__number {
  font-size: 0.75rem;
  color: var(--learn-neutral-500);
}

.lesson-item__title {
  font-weight: 500;
}

.lesson-item__meta {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
  font-size: 0.75rem;
  color: var(--learn-neutral-500);
}

.lesson-item__badge {
  padding: 2px 8px;
  background: var(--learn-primary);
  color: white;
  border-radius: var(--learn-radius-sm);
  font-weight: 600;
}

.lesson-item__badge--upgrade {
  background: var(--tier-gold);
  color: #000;
}

/* Blocker UI */
.learn-course__blocker {
  background: var(--card-bg);
  border-radius: var(--learn-radius-md);
  padding: var(--learn-spacing-xl);
  box-shadow: var(--card-shadow);
}

/* ============================================================================
   SIDEBAR CARDS
   ============================================================================ */

.learn-sidebar-card {
  background: var(--card-bg);
  border-radius: var(--learn-radius-md);
  padding: var(--learn-spacing-lg);
  margin-bottom: var(--learn-spacing-md);
  box-shadow: var(--card-shadow);
}

.learn-sidebar-card__title {
  font-size: 1rem;
  margin: 0 0 var(--learn-spacing-md);
  padding-bottom: var(--learn-spacing-sm);
  border-bottom: 1px solid var(--card-border);
}

.learn-sidebar-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.learn-sidebar-card__item {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
  padding: var(--learn-spacing-sm) 0;
  font-size: 0.875rem;
  color: var(--learn-neutral-500);
}

.learn-sidebar-card__item i {
  width: 20px;
  text-align: center;
  color: var(--learn-primary);
}

.learn-sidebar-card__text {
  font-size: 0.875rem;
  color: var(--learn-neutral-500);
  margin: 0 0 var(--learn-spacing-md);
}

/* Progress card */
.progress-card__stats {
  display: flex;
  justify-content: space-between;
  margin-top: var(--learn-spacing-sm);
}

.progress-card__percent {
  font-weight: 700;
  color: var(--learn-primary);
}

.progress-card__count {
  font-size: 0.875rem;
  color: var(--learn-neutral-500);
}

/* Recommended Actions card */
.learn-sidebar-card__actions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--learn-spacing-sm);
}

.learn-sidebar-card__action-item {
  display: flex;
  align-items: flex-start;
  gap: var(--learn-spacing-sm);
  padding: var(--learn-spacing-sm);
  background: var(--learn-neutral-50);
  border-radius: var(--learn-radius-sm);
  font-size: 0.875rem;
  color: var(--learn-neutral-700);
}

.learn-sidebar-card__action-item i {
  width: 18px;
  color: var(--learn-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.learn-sidebar-card__action-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--learn-spacing-xs);
  width: 100%;
  margin-top: var(--learn-spacing-md);
  padding: var(--learn-spacing-sm) var(--learn-spacing-md);
  background: var(--learn-success);
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--learn-radius-md);
  transition: background 0.2s ease;
}

.learn-sidebar-card__action-cta:hover {
  background: var(--learn-success-dark, #157347);
  color: white;
  text-decoration: none;
}

/* ============================================================================
   LESSON PLAYER PAGE
   ============================================================================ */

.learn-lesson__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--learn-spacing-xl);
}

@media (max-width: 992px) {
  .learn-lesson__layout {
    grid-template-columns: 1fr;
  }
}

.learn-lesson__header {
  margin-bottom: var(--learn-spacing-lg);
}

.learn-lesson__header-meta {
  display: flex;
  gap: var(--learn-spacing-md);
  margin-bottom: var(--learn-spacing-sm);
}

.learn-lesson__lesson-number {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--learn-primary);
}

.learn-lesson__progress-indicator {
  font-size: 0.875rem;
  color: var(--learn-neutral-500);
}

.learn-lesson__title {
  font-size: 1.5rem;
  margin: 0 0 var(--learn-spacing-sm);
}

.learn-lesson__duration {
  font-size: 0.875rem;
  color: var(--learn-neutral-500);
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-xs);
}

/* Player container */
.learn-lesson__player {
  background: #000;
  border-radius: var(--learn-radius-md);
  overflow: hidden;
  position: relative;
  margin-bottom: var(--learn-spacing-md);
}

.learn-lesson__player-video {
  position: relative;
}

.learn-lesson__video {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
}

.learn-lesson__player-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
}

.learn-lesson__play-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--learn-primary);
  font-size: 2rem;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.learn-lesson__play-btn:hover {
  transform: scale(1.1);
  background: white;
}

/* Audio mode */
.learn-lesson__player-audio {
  padding: var(--learn-spacing-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--learn-spacing-md);
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  min-height: 200px;
  justify-content: center;
}

.learn-lesson__audio-visual {
  text-align: center;
  color: white;
}

.learn-lesson__audio-visual i {
  font-size: 3rem;
  margin-bottom: var(--learn-spacing-sm);
  opacity: 0.8;
}

.learn-lesson__audio-label {
  display: block;
  font-size: 1rem;
  opacity: 0.7;
}

.learn-lesson__audio {
  width: 100%;
  max-width: 400px;
}

/* Player controls */
.learn-lesson__player-controls {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
  padding: var(--learn-spacing-sm) var(--learn-spacing-md);
  background: #1a1a1a;
}

.player-control {
  background: transparent;
  border: none;
  color: white;
  padding: var(--learn-spacing-sm);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.player-control:hover {
  opacity: 1;
}

.player-progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
  cursor: pointer;
}

.player-progress__bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.player-progress__fill {
  height: 100%;
  background: var(--learn-primary);
  border-radius: 2px;
  width: 0%;
}

.player-progress__time {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  min-width: 90px;
}

/* ============================================================
   SLIDE VIEWER
   Interactive slide gallery with navigation controls
   ============================================================ */

.learn-lesson__slide-viewer {
  display: flex;
  flex-direction: column;
  background: var(--learn-neutral-900);
  border-radius: var(--learn-radius-md);
  overflow: hidden;
}

.learn-lesson__slide-display {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: #0a0a0a;
  padding: var(--learn-spacing-md);
}

.learn-lesson__slide-image {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
  border-radius: var(--learn-radius-sm);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: transform var(--learn-transition);
}

.learn-lesson__slide-image:hover {
  transform: scale(1.02);
}

.learn-lesson__slide-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--learn-spacing-sm) var(--learn-spacing-md);
  background: var(--learn-neutral-800);
}

.learn-lesson__slide-nav {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-md);
}

.learn-lesson__slide-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--learn-radius-full);
  color: white;
  cursor: pointer;
  transition: all var(--learn-transition);
}

.learn-lesson__slide-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.learn-lesson__slide-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.learn-lesson__slide-counter {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  min-width: 80px;
  text-align: center;
}

.learn-lesson__slide-actions {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
}

.learn-lesson__slide-action {
  display: inline-flex;
  align-items: center;
  gap: var(--learn-spacing-xs);
  padding: var(--learn-spacing-xs) var(--learn-spacing-sm);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--learn-radius-sm);
  cursor: pointer;
  transition: all var(--learn-transition);
  text-decoration: none;
}

.learn-lesson__slide-action:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

/* No slides fallback */
.learn-lesson__no-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--learn-spacing-2xl);
  text-align: center;
}

.learn-lesson__no-media i {
  font-size: 3rem;
  color: var(--learn-neutral-400);
  margin-bottom: var(--learn-spacing-md);
}

.learn-lesson__no-media span {
  color: var(--learn-neutral-500);
  font-size: 0.875rem;
}

/* Mode toggle */
.learn-lesson__mode-toggle {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-md);
  margin-bottom: var(--learn-spacing-lg);
}

.learn-lesson__mode-label {
  font-size: 0.875rem;
  color: var(--learn-neutral-500);
}

.toggle-group {
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: var(--learn-radius-sm);
  overflow: hidden;
}

.toggle-group__btn {
  padding: var(--learn-spacing-sm) var(--learn-spacing-md);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-xs);
  transition: background 0.2s;
}

.toggle-group__btn:hover {
  background: var(--learn-neutral-50);
}

.toggle-group__btn--active {
  background: var(--learn-primary);
  color: white;
}

.toggle-group__btn--active:hover {
  background: var(--learn-primary);
}

/* Lesson content */
.learn-lesson__content {
  background: var(--card-bg);
  border-radius: var(--learn-radius-md);
  padding: var(--learn-spacing-lg);
  box-shadow: var(--card-shadow);
}

.learn-lesson__section {
  margin-bottom: var(--learn-spacing-lg);
}

.learn-lesson__section:last-child {
  margin-bottom: 0;
}

.learn-lesson__section-title {
  font-size: 1rem;
  margin: 0 0 var(--learn-spacing-md);
  color: #495057;
}

.learn-lesson__description {
  line-height: 1.7;
  color: var(--learn-neutral-500);
}

.learn-lesson__key-points {
  margin: 0;
  padding-left: var(--learn-spacing-lg);
}

.learn-lesson__key-points li {
  margin-bottom: var(--learn-spacing-sm);
  line-height: 1.5;
}

/* ============================================================================
   BAE CONTENT STYLES - Phase 3 Integration
   ============================================================================ */

/* Short summary in header */
.learn-lesson__summary {
  margin: var(--learn-spacing-md) 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--learn-neutral-500);
}

/* Learning objectives teaser in header */
.learn-lesson__objectives-teaser {
  margin-top: var(--learn-spacing-md);
  padding: var(--learn-spacing-md);
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: var(--learn-radius-md);
  border-left: 3px solid var(--learn-primary);
}

.learn-lesson__objectives-label {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--learn-primary);
  margin-bottom: var(--learn-spacing-sm);
}

.learn-lesson__objectives-label i {
  font-size: 0.875rem;
}

.learn-lesson__objectives-list--teaser {
  margin: 0;
  padding-left: var(--learn-spacing-lg);
  list-style: disc;
}

.learn-lesson__objectives-list--teaser li {
  font-size: 0.875rem;
  margin-bottom: var(--learn-spacing-xs);
  color: var(--learn-neutral-600);
}

.learn-lesson__objectives-more {
  display: inline-flex;
  align-items: center;
  gap: var(--learn-spacing-xs);
  margin-top: var(--learn-spacing-sm);
  padding: var(--learn-spacing-xs) var(--learn-spacing-sm);
  font-size: 0.75rem;
  color: var(--learn-primary);
  font-weight: 500;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--learn-radius-pill);
  cursor: pointer;
  transition: all var(--learn-transition);
}

.learn-lesson__objectives-more:hover {
  background: rgba(59, 130, 246, 0.2);
  transform: translateY(2px);
}

.learn-lesson__objectives-more i {
  font-size: 0.65rem;
  animation: bounce-down 1.5s ease-in-out infinite;
}

@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* Full learning objectives list in content */
.learn-lesson__section--objectives {
  background: linear-gradient(135deg, #e8f4fd 0%, #dbeafe 100%);
  padding: var(--learn-spacing-lg);
  border-radius: var(--learn-radius-md);
  margin-left: calc(-1 * var(--learn-spacing-lg));
  margin-right: calc(-1 * var(--learn-spacing-lg));
}

.learn-lesson__section--objectives .learn-lesson__section-title {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
  color: var(--learn-primary);
}

.learn-lesson__objectives-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.learn-lesson__objective-item {
  display: flex;
  align-items: flex-start;
  gap: var(--learn-spacing-sm);
  padding: var(--learn-spacing-sm) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.learn-lesson__objective-item:last-child {
  border-bottom: none;
}

.learn-lesson__objective-item i {
  color: var(--learn-success);
  margin-top: 3px;
  flex-shrink: 0;
}

.learn-lesson__objective-item span {
  line-height: 1.5;
}

/* Highlighted section (scroll target) */
.learn-lesson__section--highlighted {
  animation: highlight-pulse 2s ease-out;
}

@keyframes highlight-pulse {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* Section title icons */
.learn-lesson__section-title i {
  color: var(--learn-primary);
}

/* Recommended actions section */
.learn-lesson__section--actions {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  padding: var(--learn-spacing-lg);
  border-radius: var(--learn-radius-md);
  margin-left: calc(-1 * var(--learn-spacing-lg));
  margin-right: calc(-1 * var(--learn-spacing-lg));
}

.learn-lesson__section--actions .learn-lesson__section-title {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
  color: #92400e;
}

.learn-lesson__actions-list {
  margin: 0;
  padding-left: var(--learn-spacing-lg);
  counter-reset: action-counter;
}

.learn-lesson__action-item {
  padding: var(--learn-spacing-sm) 0;
  line-height: 1.5;
  color: #78350f;
  display: flex;
  flex-direction: column;
  gap: var(--learn-spacing-xs);
}

.learn-lesson__action-item::marker {
  color: #92400e;
  font-weight: 600;
}

.learn-lesson__action-text {
  flex: 1;
}

.learn-lesson__action-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--learn-spacing-xs);
  padding: var(--learn-spacing-xs) var(--learn-spacing-sm);
  background: #92400e;
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--learn-radius-sm);
  text-decoration: none;
  transition: all var(--learn-transition);
  width: fit-content;
  margin-top: var(--learn-spacing-xs);
}

.learn-lesson__action-cta:hover {
  background: #78350f;
  transform: translateX(4px);
}

.learn-lesson__action-cta i {
  font-size: 0.7rem;
}

/* Resources card - reference chips */
.learn-sidebar-card__refs {
  margin-top: var(--learn-spacing-md);
  padding-top: var(--learn-spacing-md);
  border-top: 1px solid var(--learn-neutral-200);
}

.learn-sidebar-card__refs-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--learn-neutral-500);
  margin: 0 0 var(--learn-spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-xs);
}

.learn-sidebar-card__refs-chips {
  display: flex;
  flex-direction: column;
  gap: var(--learn-spacing-sm);
}

.ref-chip {
  display: flex;
  align-items: flex-start;
  gap: var(--learn-spacing-sm);
  padding: var(--learn-spacing-sm);
  border-radius: var(--learn-radius-sm);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.ref-chip i {
  margin-top: 2px;
  flex-shrink: 0;
}

.ref-chip__label {
  font-weight: 600;
  white-space: nowrap;
}

.ref-chip__value {
  color: var(--learn-neutral-600);
}

.ref-chip--textbook {
  background: #dbeafe;
  color: #1e40af;
}

.ref-chip--textbook i {
  color: #3b82f6;
}

.ref-chip--workbook {
  background: #d1fae5;
  color: #065f46;
}

.ref-chip--workbook i {
  color: #10b981;
}

/* ============================================================================
   END BAE CONTENT STYLES
   ============================================================================ */

/* Transcript */
.learn-lesson__transcript-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
  font-size: 1rem;
  font-weight: 600;
  color: inherit;
}

.learn-lesson__transcript-toggle i {
  transition: transform 0.2s;
}

.learn-lesson__transcript-content {
  padding-top: var(--learn-spacing-md);
  line-height: 1.7;
  color: var(--learn-neutral-500);
}

/* Navigation */
.lesson-nav {
  display: flex;
  flex-direction: column;
  gap: var(--learn-spacing-sm);
}

.lesson-nav__link {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
  padding: var(--learn-spacing-sm);
  border-radius: var(--learn-radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}

.lesson-nav__link:hover {
  background: var(--learn-neutral-50);
}

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

.lesson-nav__link--next {
  justify-content: flex-end;
}

.lesson-nav__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lesson-nav__label {
  font-size: 0.75rem;
  color: var(--learn-neutral-500);
}

.lesson-nav__title {
  font-size: 0.875rem;
  font-weight: 500;
}

/* Resources */
.resource-link {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
  padding: var(--learn-spacing-sm);
  border-radius: var(--learn-radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}

.resource-link:hover {
  background: var(--learn-neutral-50);
}

.resource-link i:last-child {
  margin-left: auto;
  opacity: 0.5;
}

/* Completion card */
.completion-card {
  text-align: center;
}

.completion-card__text {
  margin: 0 0 var(--learn-spacing-md);
  color: var(--learn-neutral-500);
}

.completion-card--done {
  color: var(--learn-success);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--learn-spacing-sm);
  font-weight: 600;
}

.completion-card--done i {
  font-size: 1.5rem;
}

/* Phase progress card */
.phase-progress-card {
  padding: var(--learn-spacing-sm) 0;
}

.phase-progress-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--learn-spacing-sm);
}

.phase-progress-card__phase {
  font-weight: 600;
  color: var(--learn-primary);
  font-size: 0.875rem;
}

.phase-progress-card__percent {
  font-weight: 700;
  color: var(--learn-neutral-700);
  font-size: 0.875rem;
}

.phase-progress-card__bar {
  height: 8px;
  background: var(--learn-neutral-200);
  border-radius: var(--learn-radius-pill);
  overflow: hidden;
  margin-bottom: var(--learn-spacing-sm);
}

.phase-progress-card__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--learn-primary) 0%, #60a5fa 100%);
  border-radius: var(--learn-radius-pill);
  transition: width 0.5s ease;
}

.phase-progress-card__status {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-xs);
  font-size: 0.75rem;
  color: var(--learn-neutral-500);
  margin: 0 0 var(--learn-spacing-md);
}

.phase-progress-card__status i {
  color: var(--learn-primary);
}

.phase-progress-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--learn-spacing-xs);
  font-size: 0.75rem;
  color: var(--learn-primary);
  font-weight: 500;
  text-decoration: none;
  transition: all var(--learn-transition);
}

.phase-progress-card__link:hover {
  color: var(--learn-primary-dark);
  text-decoration: underline;
}

/* Phase Progress: Wizard Tasks Section */
.phase-progress-card__tasks {
  margin-top: var(--learn-spacing-sm);
  padding-top: var(--learn-spacing-sm);
  border-top: 1px dashed var(--learn-neutral-200);
}

.phase-progress-card__tasks-label {
  font-size: 0.75rem;
  color: var(--learn-neutral-500);
  margin: 0 0 var(--learn-spacing-xs);
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-xs);
}

.phase-progress-card__tasks-label i {
  color: var(--learn-primary);
}

.phase-progress-card__related-task {
  font-size: 0.8rem;
  color: var(--learn-neutral-600);
  margin: var(--learn-spacing-xs) 0 0 0;
  padding: var(--learn-spacing-xs) var(--learn-spacing-sm);
  background: var(--learn-accent-bg);
  border-radius: var(--learn-radius-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--learn-spacing-xs);
}

.phase-progress-card__related-task i {
  color: var(--learn-warning);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================================================
   BLOCKER UI
   ============================================================================ */

.blocker-ui {
  text-align: center;
  padding: var(--learn-spacing-xl);
}

.blocker-ui__icon {
  font-size: 3rem;
  color: var(--learn-warning);
  margin-bottom: var(--learn-spacing-md);
}

.blocker-ui__title {
  font-size: 1.5rem;
  margin: 0 0 var(--learn-spacing-sm);
}

.blocker-ui__message {
  color: var(--learn-neutral-500);
  margin: 0 0 var(--learn-spacing-lg);
}

.blocker-ui__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--learn-spacing-lg);
}

.blocker-ui__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--learn-spacing-sm);
  padding: var(--learn-spacing-sm);
  background: #fff3cd;
  border-radius: var(--learn-radius-sm);
  margin-bottom: var(--learn-spacing-sm);
  color: #856404;
}

.blocker-ui__item--completed {
  background: #d4edda;
  color: #155724;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--learn-spacing-sm);
  padding: var(--learn-spacing-sm) var(--learn-spacing-lg);
  border-radius: var(--learn-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

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

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

.btn--primary:hover {
  background: #0056b3;
}

.btn--secondary {
  background: #6c757d;
  color: white;
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--learn-primary);
  color: var(--learn-primary);
}

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

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

.btn--disabled,
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

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

@media (max-width: 768px) {
  .learn-hub__header {
    padding: var(--learn-spacing-lg);
  }
  
  .learn-hub__title {
    font-size: 1.5rem;
  }
  
  .learn-hub__course-grid {
    grid-template-columns: 1fr;
  }
  
  .learn-course__title,
  .learn-lesson__title {
    font-size: 1.25rem;
  }
  
  .learn-lesson__player-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .player-progress {
    order: 1;
    width: 100%;
    margin-bottom: var(--learn-spacing-sm);
  }
}

/* ============================================================================
   SLIDES VIEWER (BAE Phase C)
   ============================================================================ */

.learn-lesson__player-slides {
  background: var(--learn-neutral-50);
  border-radius: var(--learn-radius-md);
  overflow: hidden;
}

.slides-viewer {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1a1a2e;
}

.slides-viewer__embed {
  width: 100%;
  height: 100%;
  border: none;
}

.slides-viewer__toolbar {
  display: flex;
  justify-content: center;
  gap: var(--learn-spacing-md);
  padding: var(--learn-spacing-md);
  background: white;
  border-top: 1px solid var(--card-border);
}

.slides-viewer__toolbar .btn--sm {
  padding: var(--learn-spacing-xs) var(--learn-spacing-md);
  font-size: 0.8125rem;
}

/* Slides viewer image and navigation (Phase 3.6) */
.slides-viewer__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #1a1a2e;
}

.slides-viewer__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--learn-spacing-md);
  padding: var(--learn-spacing-sm) var(--learn-spacing-md);
  background: var(--learn-neutral-100);
  border-top: 1px solid var(--card-border);
}

.slides-viewer__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: white;
  border: 1px solid var(--card-border);
  border-radius: var(--learn-radius-md);
  color: var(--learn-neutral-700);
  cursor: pointer;
  transition: all 0.2s ease;
}

.slides-viewer__nav:hover:not(:disabled) {
  background: var(--learn-primary);
  border-color: var(--learn-primary);
  color: white;
}

.slides-viewer__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.slides-viewer__counter {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--learn-neutral-600);
  min-width: 60px;
  text-align: center;
}

/* Mobile slides layout */
@media (max-width: 768px) {
  .slides-viewer {
    aspect-ratio: 4 / 3;
  }
  
  .slides-viewer__toolbar {
    flex-direction: column;
  }
  
  .slides-viewer__toolbar .btn {
    width: 100%;
  }
}

/* ============================================================================
   SKELETON LOADERS (BAE Phase C)
   ============================================================================ */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.skeleton {
  background: linear-gradient(90deg, var(--learn-neutral-200) 25%, #f1f3f5 50%, var(--learn-neutral-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--learn-radius-sm);
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton-text--sm { width: 40%; }
.skeleton-text--md { width: 70%; }
.skeleton-text--lg { width: 100%; }

.skeleton-title {
  height: 1.5em;
  margin-bottom: 0.75em;
}

.skeleton-card {
  background: var(--card-bg);
  border-radius: var(--learn-radius-md);
  padding: var(--learn-spacing-lg);
  box-shadow: var(--card-shadow);
}

/* Hub skeleton */
.skeleton-hub__header {
  height: 180px;
  border-radius: var(--learn-radius-lg);
  margin-bottom: var(--learn-spacing-lg);
}

.skeleton-hub__progress {
  height: 100px;
  margin-bottom: var(--learn-spacing-lg);
}

.skeleton-course-card {
  height: 280px;
}

/* Course skeleton */
.skeleton-course__header {
  height: 120px;
  margin-bottom: var(--learn-spacing-lg);
}

.skeleton-lesson-item {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-md);
  padding: var(--learn-spacing-md);
  border-bottom: 1px solid var(--card-border);
}

.skeleton-lesson-item__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.skeleton-lesson-item__content {
  flex: 1;
}

/* Lesson skeleton */
.skeleton-player {
  aspect-ratio: 16 / 9;
  margin-bottom: var(--learn-spacing-md);
}

.skeleton-content {
  padding: var(--learn-spacing-lg);
}

/* ============================================================================
   MODAL (BAE Phase C - Upgrade CTA)
   ============================================================================ */

.learn-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.learn-modal--visible {
  opacity: 1;
  visibility: visible;
}

.learn-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.learn-modal__content {
  position: relative;
  background: var(--card-bg);
  border-radius: var(--learn-radius-lg);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform 0.3s;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.learn-modal--visible .learn-modal__content {
  transform: scale(1);
}

.learn-modal__close {
  position: absolute;
  top: var(--learn-spacing-md);
  right: var(--learn-spacing-md);
  background: transparent;
  border: none;
  font-size: 1.25rem;
  color: var(--learn-neutral-500);
  cursor: pointer;
  padding: var(--learn-spacing-xs);
  z-index: 1;
}

.learn-modal__close:hover {
  color: #343a40;
}

.learn-modal__header {
  text-align: center;
  padding: var(--learn-spacing-xl) var(--learn-spacing-xl) var(--learn-spacing-md);
}

.learn-modal__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--learn-spacing-md);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.learn-modal__icon--success {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: white;
}

.learn-modal__title {
  font-size: 1.5rem;
  margin: 0 0 var(--learn-spacing-xs);
}

.learn-modal__subtitle {
  color: var(--learn-neutral-500);
  margin: 0;
}

.learn-modal__body {
  padding: 0 var(--learn-spacing-xl);
}

.learn-modal__body p {
  color: var(--learn-neutral-500);
  line-height: 1.6;
}

.learn-modal__benefits {
  background: var(--learn-neutral-50);
  border-radius: var(--learn-radius-md);
  padding: var(--learn-spacing-md);
  margin-top: var(--learn-spacing-md);
}

.learn-modal__benefits h3 {
  font-size: 0.875rem;
  margin: 0 0 var(--learn-spacing-sm);
  color: #495057;
}

.learn-modal__benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.learn-modal__benefits li {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
  padding: var(--learn-spacing-xs) 0;
  font-size: 0.875rem;
}

.learn-modal__benefits li i {
  color: var(--learn-success);
}

.learn-modal__footer {
  display: flex;
  flex-direction: column;
  gap: var(--learn-spacing-sm);
  padding: var(--learn-spacing-lg) var(--learn-spacing-xl) var(--learn-spacing-xl);
}

.learn-modal__footer .btn--lg {
  padding: var(--learn-spacing-md) var(--learn-spacing-lg);
}

/* ============================================================================
   UPGRADE CARD (Hub/Course Level CTA)
   ============================================================================ */

.upgrade-card {
  background: linear-gradient(135deg, #6f42c1 0%, #5a3e85 100%);
  color: white;
  border-radius: var(--learn-radius-md);
  padding: var(--learn-spacing-lg);
  margin-bottom: var(--learn-spacing-lg);
  position: relative;
  overflow: hidden;
}

.upgrade-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.upgrade-card__dismiss {
  position: absolute;
  top: var(--learn-spacing-sm);
  right: var(--learn-spacing-sm);
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upgrade-card__dismiss:hover {
  background: rgba(255,255,255,0.3);
}

.upgrade-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--learn-spacing-xs);
  background: rgba(255,255,255,0.2);
  padding: var(--learn-spacing-xs) var(--learn-spacing-sm);
  border-radius: var(--learn-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: var(--learn-spacing-sm);
}

.upgrade-card__title {
  font-size: 1.125rem;
  margin: 0 0 var(--learn-spacing-xs);
}

.upgrade-card__text {
  opacity: 0.9;
  font-size: 0.875rem;
  margin: 0 0 var(--learn-spacing-md);
  line-height: 1.5;
}

.upgrade-card__btn {
  background: white;
  color: #6f42c1;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
  padding: var(--learn-spacing-sm) var(--learn-spacing-lg);
  border-radius: var(--learn-radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.upgrade-card__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ============================================================================
   KEYBOARD SHORTCUTS TOOLTIP
   ============================================================================ */

.keyboard-help {
  position: fixed;
  bottom: var(--learn-spacing-lg);
  right: var(--learn-spacing-lg);
  z-index: 100;
}

.keyboard-help__trigger {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--learn-neutral-500);
  transition: all 0.2s;
}

.keyboard-help__trigger:hover {
  background: var(--learn-primary);
  color: white;
  border-color: var(--learn-primary);
}

.keyboard-help__panel {
  position: absolute;
  bottom: 50px;
  right: 0;
  background: var(--card-bg);
  border-radius: var(--learn-radius-md);
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  padding: var(--learn-spacing-md);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s;
}

.keyboard-help:hover .keyboard-help__panel,
.keyboard-help__panel:focus-within {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.keyboard-help__title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--learn-neutral-500);
  margin: 0 0 var(--learn-spacing-sm);
}

.keyboard-help__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.keyboard-help__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--learn-spacing-xs) 0;
  font-size: 0.8125rem;
}

.keyboard-help__key {
  background: #f1f3f5;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.75rem;
}

/* ============================================================================
   RESUME PROMPT
   ============================================================================ */

.resume-prompt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.9);
  color: white;
  padding: var(--learn-spacing-lg);
  border-radius: var(--learn-radius-md);
  text-align: center;
  z-index: 10;
  max-width: 300px;
}

.resume-prompt__title {
  font-size: 1rem;
  margin: 0 0 var(--learn-spacing-xs);
}

.resume-prompt__time {
  color: var(--learn-primary);
  font-weight: 600;
}

.resume-prompt__text {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.8);
  margin: 0 0 var(--learn-spacing-md);
}

.resume-prompt__actions {
  display: flex;
  gap: var(--learn-spacing-sm);
  justify-content: center;
}

.resume-prompt__actions .btn {
  padding: var(--learn-spacing-xs) var(--learn-spacing-md);
  font-size: 0.8125rem;
}

/* ============================================================================
   UPGRADE CTA CARD
   ============================================================================ */

.learn-upgrade-card {
  position: relative;
  background: linear-gradient(135deg, var(--learn-neutral-50) 0%, var(--learn-neutral-200) 100%);
  border: 2px solid var(--tier-gold);
  border-radius: var(--learn-radius-lg);
  padding: var(--learn-spacing-xl);
  margin-bottom: var(--learn-spacing-xl);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--learn-spacing-lg);
  align-items: center;
  box-shadow: 0 4px 20px rgba(255, 193, 7, 0.15);
}

@media (max-width: 768px) {
  .learn-upgrade-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.learn-upgrade-card__dismiss {
  position: absolute;
  top: var(--learn-spacing-sm);
  right: var(--learn-spacing-sm);
  background: transparent;
  border: none;
  color: var(--learn-neutral-500);
  cursor: pointer;
  padding: var(--learn-spacing-xs);
  border-radius: var(--learn-radius-sm);
  transition: all 0.2s;
}

.learn-upgrade-card__dismiss:hover {
  background: rgba(0,0,0,0.05);
  color: #212529;
}

.learn-upgrade-card__icon {
  width: 64px;
  height: 64px;
  background: var(--tier-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: #000;
}

@media (max-width: 768px) {
  .learn-upgrade-card__icon {
    margin: 0 auto;
  }
}

.learn-upgrade-card__content {
  flex: 1;
}

.learn-upgrade-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--learn-spacing-xs);
  color: #212529;
}

.learn-upgrade-card__text {
  font-size: 1rem;
  margin: 0 0 var(--learn-spacing-xs);
  color: #495057;
}

.learn-upgrade-card__subtext {
  font-size: 0.875rem;
  margin: 0;
  color: var(--learn-neutral-500);
}

.learn-upgrade-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--learn-spacing-sm);
}

@media (max-width: 768px) {
  .learn-upgrade-card__actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
}

.learn-upgrade-card__actions .btn--lg {
  padding: var(--learn-spacing-md) var(--learn-spacing-xl);
}

/* Fadeout animation for dismiss */
@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

/* ============================================================================
   CATALOG PORTAL - /learn Page Refactor v3.0
   Hybrid Course Catalog with Search/Filter, Continue CTA, Primary Curriculum Grid
   ============================================================================ */

/* --- Catalog Container --- */
.learn-catalog {
  padding-bottom: var(--learn-spacing-xl);
}

/* --- Catalog Header --- */
.learn-catalog__header {
  padding: var(--learn-spacing-xl) 0 var(--learn-spacing-lg);
  text-align: center;
}

.learn-catalog__title {
  font-size: 2rem;
  font-weight: 700;
  color: #1F2937;
  margin: 0 0 var(--learn-spacing-sm);
}

.learn-catalog__subtitle {
  font-size: 1rem;
  color: var(--learn-neutral-500);
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .learn-catalog__title {
    font-size: 1.5rem;
  }
  .learn-catalog__subtitle {
    font-size: 0.875rem;
  }
}

/* --- Search & Filters Section --- */
.learn-catalog__search {
  padding: var(--learn-spacing-md) 0 var(--learn-spacing-lg);
}

.learn-catalog__search-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--learn-spacing-md);
  max-width: 800px;
  margin: 0 auto;
}

.learn-catalog__search-box {
  position: relative;
}

.learn-catalog__search-icon {
  position: absolute;
  left: var(--learn-spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--learn-neutral-400);
  font-size: 1rem;
  pointer-events: none;
}

.learn-catalog__search-input {
  width: 100%;
  padding: var(--learn-spacing-md) var(--learn-spacing-md) var(--learn-spacing-md) 2.75rem;
  font-size: 1rem;
  border: 1px solid var(--learn-neutral-300);
  border-radius: var(--learn-radius-lg);
  background: var(--card-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.learn-catalog__search-input:focus {
  outline: none;
  border-color: var(--learn-primary);
  box-shadow: 0 0 0 3px var(--gbc-focus-ring-shadow, rgba(48, 62, 139, 0.15));
}

.learn-catalog__search-input::placeholder {
  color: var(--learn-neutral-400);
}

/* Filter Pills */
.learn-catalog__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--learn-spacing-sm);
  justify-content: center;
}

.learn-catalog__filter-btn {
  padding: var(--learn-spacing-xs) var(--learn-spacing-md);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--learn-neutral-300);
  border-radius: 9999px;
  background: var(--card-bg);
  color: var(--learn-neutral-600);
  cursor: pointer;
  transition: all 0.2s;
}

.learn-catalog__filter-btn:hover {
  border-color: var(--learn-primary);
  color: var(--learn-primary);
}

.learn-catalog__filter-btn--active {
  background: var(--learn-primary);
  border-color: var(--learn-primary);
  color: #fff;
}

.learn-catalog__filter-btn--active:hover {
  background: var(--gbc-primary-dark, #242f6b);
  border-color: var(--gbc-primary-dark, #242f6b);
  color: #fff;
}

/* --- Continue Learning Section --- */
.learn-catalog__continue {
  padding: var(--learn-spacing-md) 0 var(--learn-spacing-xl);
}

.learn-catalog__continue-card {
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-lg);
  padding: var(--learn-spacing-lg) var(--learn-spacing-xl);
  background: linear-gradient(135deg, var(--gbc-primary, #303E8B) 0%, var(--gbc-primary-dark, #242f6b) 100%);
  border-radius: var(--learn-radius-lg);
  color: #fff;
  box-shadow: var(--gbc-shadow-primary-lg, 0 4px 20px rgba(48, 62, 139, 0.35));
}

.learn-catalog__continue-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.learn-catalog__continue-content {
  flex: 1;
  min-width: 0;
}

.learn-catalog__continue-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
  margin-bottom: var(--learn-spacing-xs);
}

.learn-catalog__continue-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 var(--learn-spacing-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.learn-catalog__continue-meta {
  font-size: 0.875rem;
  opacity: 0.85;
}

.learn-catalog__continue-action {
  flex-shrink: 0;
}

.learn-catalog__continue-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
  padding: var(--learn-spacing-md) var(--learn-spacing-xl);
  font-size: 1rem;
  font-weight: 600;
  background: #fff;
  color: var(--learn-primary);
  border: none;
  border-radius: var(--learn-radius-lg);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.learn-catalog__continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  color: var(--learn-primary);
  text-decoration: none;
}

@media (max-width: 768px) {
  .learn-catalog__continue-card {
    flex-direction: column;
    text-align: center;
    padding: var(--learn-spacing-lg);
  }
  .learn-catalog__continue-title {
    white-space: normal;
  }
}

/* --- Section Headers --- */
.learn-catalog__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--learn-spacing-lg);
}

.learn-catalog__section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1F2937;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-sm);
}

.learn-catalog__section-title i {
  color: var(--learn-primary);
}

.learn-catalog__section-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: var(--learn-spacing-xs) var(--learn-spacing-sm);
  background: var(--learn-neutral-100);
  color: var(--learn-neutral-600);
  border-radius: 9999px;
}

/* --- Primary Curriculum Grid --- */
.learn-catalog__primary {
  padding: var(--learn-spacing-md) 0 var(--learn-spacing-xl);
}

.learn-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--learn-spacing-lg);
}

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

/* --- Course Card --- */
.learn-catalog__course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-radius: var(--learn-radius-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.learn-catalog__course-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-hover-shadow);
}

.learn-catalog__course-card--locked {
  opacity: 0.75;
}

.learn-catalog__course-card--locked:hover {
  transform: none;
}

/* Card Header (colored bar) */
.learn-catalog__card-header {
  height: 8px;
  background: var(--learn-neutral-300);
}

.learn-catalog__course-card[data-status="not-started"] .learn-catalog__card-header {
  background: var(--learn-neutral-400);
}

.learn-catalog__course-card[data-status="in-progress"] .learn-catalog__card-header {
  background: var(--learn-primary);
}

.learn-catalog__course-card[data-status="completed"] .learn-catalog__card-header {
  background: var(--learn-success);
}

.learn-catalog__course-card[data-status="locked"] .learn-catalog__card-header {
  background: var(--learn-neutral-300);
}

/* Card Body */
.learn-catalog__card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--learn-spacing-lg);
}

/* Phase Badge */
.learn-catalog__phase-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--learn-spacing-xs);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--learn-primary);
  margin-bottom: var(--learn-spacing-sm);
}

/* Card Title */
.learn-catalog__card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1F2937;
  margin: 0 0 var(--learn-spacing-sm);
  line-height: 1.3;
}

/* Card Description */
.learn-catalog__card-desc {
  font-size: 0.875rem;
  color: var(--learn-neutral-500);
  margin: 0 0 var(--learn-spacing-md);
  line-height: 1.5;
  flex: 1;
}

/* Card Meta (lessons count) */
.learn-catalog__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--learn-spacing-md);
}

.learn-catalog__lessons-count {
  font-size: 0.8125rem;
  color: var(--learn-neutral-500);
  display: flex;
  align-items: center;
  gap: var(--learn-spacing-xs);
}

.learn-catalog__lessons-count i {
  color: var(--learn-neutral-400);
}

/* Status Badge */
.learn-catalog__status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--learn-spacing-xs);
  font-size: 0.75rem;
  font-weight: 600;
  padding: var(--learn-spacing-xs) var(--learn-spacing-sm);
  border-radius: 9999px;
}

.learn-catalog__status-badge--not-started {
  background: var(--learn-neutral-100);
  color: var(--learn-neutral-600);
}

.learn-catalog__status-badge--in-progress {
  background: rgba(48, 62, 139, 0.1);
  color: var(--learn-primary);
}

.learn-catalog__status-badge--completed {
  background: rgba(22, 163, 74, 0.1);
  color: var(--learn-success);
}

.learn-catalog__status-badge--locked {
  background: var(--gbc-lock-upgrade-bg, rgba(255, 138, 0, 0.12));
  color: var(--gbc-lock-upgrade-text, #cc6e00);
}

/* Progress Bar */
.learn-catalog__progress {
  margin-bottom: var(--learn-spacing-md);
}

.learn-catalog__progress-bar {
  height: 6px;
  background: var(--progress-bg);
  border-radius: 3px;
  overflow: hidden;
}

.learn-catalog__progress-fill {
  height: 100%;
  background: var(--learn-primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.learn-catalog__course-card[data-status="completed"] .learn-catalog__progress-fill {
  background: var(--learn-success);
}

.learn-catalog__progress-text {
  font-size: 0.75rem;
  color: var(--learn-neutral-500);
  margin-top: var(--learn-spacing-xs);
  text-align: right;
}

/* Card Footer */
.learn-catalog__card-footer {
  padding: var(--learn-spacing-md) var(--learn-spacing-lg);
  border-top: 1px solid var(--learn-neutral-200);
  background: var(--learn-neutral-50);
}

.learn-catalog__card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--learn-spacing-sm);
  width: 100%;
  padding: var(--learn-spacing-sm) var(--learn-spacing-md);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--learn-radius-md);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.learn-catalog__card-btn--primary {
  background: var(--learn-primary);
  color: #fff;
  border: none;
}

.learn-catalog__card-btn--primary:hover {
  background: #3a6ee0;
  text-decoration: none;
  color: #fff;
}

.learn-catalog__card-btn--outline {
  background: transparent;
  color: var(--learn-neutral-600);
  border: 1px solid var(--learn-neutral-300);
}

.learn-catalog__card-btn--outline:hover {
  border-color: var(--learn-primary);
  color: var(--learn-primary);
  text-decoration: none;
}

.learn-catalog__card-btn--disabled {
  background: var(--learn-neutral-100);
  color: var(--learn-neutral-400);
  border: none;
  cursor: not-allowed;
}

.learn-catalog__card-btn--disabled:hover {
  background: var(--learn-neutral-100);
  color: var(--learn-neutral-400);
}

/* Locked Card Overlay */
.learn-catalog__lock-overlay {
  position: absolute;
  top: var(--learn-spacing-md);
  right: var(--learn-spacing-md);
  width: 32px;
  height: 32px;
  background: rgba(220, 38, 38, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--learn-danger);
  font-size: 0.875rem;
}

/* --- Additional Programs Section --- */
.learn-catalog__additional {
  padding: var(--learn-spacing-xl) 0;
  border-top: 1px solid var(--learn-neutral-200);
  margin-top: var(--learn-spacing-xl);
}

.learn-catalog__coming-soon {
  text-align: center;
  padding: var(--learn-spacing-xl);
  background: var(--learn-neutral-50);
  border-radius: var(--learn-radius-lg);
  border: 2px dashed var(--learn-neutral-300);
}

.learn-catalog__coming-soon-icon {
  font-size: 2.5rem;
  color: var(--learn-neutral-400);
  margin-bottom: var(--learn-spacing-md);
}

.learn-catalog__coming-soon-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--learn-neutral-600);
  margin: 0 0 var(--learn-spacing-sm);
}

.learn-catalog__coming-soon-text {
  font-size: 0.875rem;
  color: var(--learn-neutral-500);
  margin: 0;
}

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

.learn-catalog__empty-icon {
  font-size: 3rem;
  color: var(--learn-neutral-300);
  margin-bottom: var(--learn-spacing-md);
}

.learn-catalog__empty-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--learn-neutral-600);
  margin: 0 0 var(--learn-spacing-sm);
}

.learn-catalog__empty-text {
  font-size: 0.875rem;
  color: var(--learn-neutral-500);
  margin: 0;
}

/* --- Catalog Skeleton Loaders --- */
.learn-catalog__skeleton-search {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--learn-spacing-md) 0;
}

.learn-catalog__skeleton-search-bar {
  height: 48px;
  background: linear-gradient(90deg, var(--learn-neutral-200) 25%, #f1f3f5 50%, var(--learn-neutral-200) 75%);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--learn-radius-lg);
  margin-bottom: var(--learn-spacing-md);
}

.learn-catalog__skeleton-filters {
  display: flex;
  justify-content: center;
  gap: var(--learn-spacing-sm);
}

.learn-catalog__skeleton-filter {
  width: 80px;
  height: 32px;
  background: linear-gradient(90deg, var(--learn-neutral-200) 25%, #f1f3f5 50%, var(--learn-neutral-200) 75%);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 9999px;
}

.learn-catalog__skeleton-card {
  background: var(--card-bg);
  border-radius: var(--learn-radius-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.learn-catalog__skeleton-card-header {
  height: 8px;
  background: linear-gradient(90deg, var(--learn-neutral-200) 25%, #f1f3f5 50%, var(--learn-neutral-200) 75%);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.learn-catalog__skeleton-card-body {
  padding: var(--learn-spacing-lg);
}

.learn-catalog__skeleton-badge {
  width: 80px;
  height: 16px;
  background: linear-gradient(90deg, var(--learn-neutral-200) 25%, #f1f3f5 50%, var(--learn-neutral-200) 75%);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--learn-radius-sm);
  margin-bottom: var(--learn-spacing-sm);
}

.learn-catalog__skeleton-title {
  width: 70%;
  height: 24px;
  background: linear-gradient(90deg, var(--learn-neutral-200) 25%, #f1f3f5 50%, var(--learn-neutral-200) 75%);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--learn-radius-sm);
  margin-bottom: var(--learn-spacing-sm);
}

.learn-catalog__skeleton-desc {
  width: 100%;
  height: 14px;
  background: linear-gradient(90deg, var(--learn-neutral-200) 25%, #f1f3f5 50%, var(--learn-neutral-200) 75%);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--learn-radius-sm);
  margin-bottom: var(--learn-spacing-xs);
}

.learn-catalog__skeleton-desc--short {
  width: 60%;
}

.learn-catalog__skeleton-progress {
  height: 6px;
  background: linear-gradient(90deg, var(--learn-neutral-200) 25%, #f1f3f5 50%, var(--learn-neutral-200) 75%);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 3px;
  margin-top: var(--learn-spacing-md);
  margin-bottom: var(--learn-spacing-md);
}

.learn-catalog__skeleton-card-footer {
  padding: var(--learn-spacing-md) var(--learn-spacing-lg);
  border-top: 1px solid var(--learn-neutral-200);
  background: var(--learn-neutral-50);
}

.learn-catalog__skeleton-btn {
  width: 100%;
  height: 36px;
  background: linear-gradient(90deg, var(--learn-neutral-200) 25%, #f1f3f5 50%, var(--learn-neutral-200) 75%);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--learn-radius-md);
}

/* ============================================================================
   GATING UI - Phase 3B Blockers and Access Control
   ============================================================================ */

/**
 * Gating Inline - Used within course page for access blockers
 * Displays as a highlighted card with icon, message, and action button.
 */
.gating-inline {
  display: flex;
  align-items: flex-start;
  gap: var(--learn-spacing-md);
  padding: var(--learn-spacing-lg);
  background: var(--learn-neutral-50);
  border: 2px solid var(--learn-neutral-200);
  border-radius: var(--learn-radius-lg);
  margin-bottom: var(--learn-spacing-lg);
}

.gating-inline__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--learn-warning);
  color: white;
  font-size: 1.25rem;
}

.gating-inline__content {
  flex: 1;
  min-width: 0;
}

.gating-inline__title {
  margin: 0 0 var(--learn-spacing-xs);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--learn-neutral-700);
}

.gating-inline__message {
  margin: 0 0 var(--learn-spacing-md);
  color: var(--learn-neutral-600);
  line-height: 1.5;
}

.gating-inline__progress {
  margin-bottom: var(--learn-spacing-md);
}

.gating-inline__progress-bar {
  height: 8px;
  background: var(--progress-bg);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--learn-spacing-xs);
}

.gating-inline__progress-fill {
  height: 100%;
  background: var(--learn-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.gating-inline__progress-text {
  font-size: 0.875rem;
  color: var(--learn-neutral-500);
}

.gating-inline__action {
  margin-top: var(--learn-spacing-sm);
}

/* Gating inline variants */
.gating-inline--tier {
  border-color: var(--tier-pro);
  background: rgba(234, 179, 8, 0.05);
}

.gating-inline--tier .gating-inline__icon {
  background: var(--tier-pro);
}

.gating-inline--prereq-course {
  border-color: var(--learn-info);
  background: rgba(37, 99, 235, 0.05);
}

.gating-inline--prereq-course .gating-inline__icon {
  background: var(--learn-info);
}

.gating-inline--prereq-wizard {
  border-color: var(--learn-primary);
  background: rgba(48, 62, 139, 0.05);
}

.gating-inline--prereq-wizard .gating-inline__icon {
  background: var(--learn-primary);
}

/**
 * Gating Fullpage - Used on lesson page when access is blocked
 * Displays as a centered card that replaces the lesson content.
 */
.gating-fullpage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--learn-spacing-xl);
}

.gating-fullpage__card {
  max-width: 480px;
  text-align: center;
  padding: var(--learn-spacing-xl);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--learn-radius-lg);
  box-shadow: var(--card-shadow);
}

.gating-fullpage__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--learn-spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--learn-warning);
  color: white;
  font-size: 2rem;
}

.gating-fullpage__title {
  margin: 0 0 var(--learn-spacing-sm);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--learn-neutral-700);
}

.gating-fullpage__message {
  margin: 0 0 var(--learn-spacing-lg);
  color: var(--learn-neutral-600);
  line-height: 1.6;
}

.gating-fullpage__progress {
  margin-bottom: var(--learn-spacing-lg);
}

.gating-fullpage__progress-bar {
  height: 10px;
  background: var(--progress-bg);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: var(--learn-spacing-xs);
}

.gating-fullpage__progress-fill {
  height: 100%;
  background: var(--learn-primary);
  border-radius: 5px;
  transition: width 0.3s ease;
}

.gating-fullpage__progress-text {
  font-size: 0.875rem;
  color: var(--learn-neutral-500);
}

.gating-fullpage__actions {
  display: flex;
  flex-direction: column;
  gap: var(--learn-spacing-sm);
}

.gating-fullpage__actions .btn {
  width: 100%;
}

/* Fullpage variants */
.gating-fullpage--tier .gating-fullpage__icon {
  background: var(--tier-pro);
}

.gating-fullpage--prereq-course .gating-fullpage__icon {
  background: var(--learn-info);
}

.gating-fullpage--prereq-wizard .gating-fullpage__icon {
  background: var(--learn-primary);
}

/* Blocked page state */
.learn-page--blocked {
  background: var(--learn-neutral-50);
}

/* ============================================================================
   PHASE 3C - VISUAL POLISH
   Course & Lesson Page Enhancements using Wowdash patterns
   ============================================================================ */

/**
 * Course Page - Tabbed Layout Enhancements
 * Applied via course-ui.js using Wowdash nav-pills bordered-tab pattern
 */

/* Custom bordered tab style for course detail page
 * Uses Wowdash bordered-tab pattern with underline indicator for active state.
 * Clear visual distinction: primary color text + bottom border + font-weight bump. */
.learn-course .bordered-tab .nav-link {
  border-radius: 0;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  color: var(--text-secondary-light);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  position: relative;
}

.learn-course .bordered-tab .nav-link:hover:not(.active) {
  background: var(--learn-neutral-50);
  color: var(--text-primary-light);
}

.learn-course .bordered-tab .nav-link.active {
  color: var(--primary-600, var(--gbc-primary, #303E8B));
  font-weight: 600;
  border-bottom-color: var(--primary-600, var(--gbc-primary, #303E8B));
  background: transparent;
}

.learn-course .bordered-tab .nav-link:focus-visible {
  outline: 2px solid var(--primary-600, var(--gbc-primary, #303E8B));
  outline-offset: 2px;
}

/* Course hero card enhancements */
.learn-course .course-hero {
  background: linear-gradient(135deg, var(--learn-neutral-50), white);
}

.learn-course .course-hero__thumbnail {
  border-radius: var(--learn-radius-md);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.learn-course .course-hero__thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.learn-course .course-hero__thumbnail:hover img {
  transform: scale(1.02);
}

/* Lesson list item hover states
 * NOTE: Avoid transform: translateX() on hover - causes scroll jitter/layout shift.
 * Use box-shadow and background changes for visual feedback instead. */
.learn-course .list-group-item {
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border: 1px solid transparent;
}

.learn-course .list-group-item:hover {
  background-color: var(--learn-neutral-50);
  border-color: var(--learn-neutral-200);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ============================================================================
   LESSON ROW CTA ALIGNMENT (Phase 4B)
   Ensures CTA button stays consistently right-aligned and vertically centered
   across all screen sizes without overflow or clipping.
   ============================================================================ */

/* Lesson row link container - flex layout */
.learn-course .list-group-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 72px; /* Consistent row height */
}

/* Left side: status icon + title/meta - takes available space */
.learn-course .list-group-item .flex-grow-1.min-w-0 {
  overflow: hidden; /* Prevent title overflow pushing CTA out */
}

/* Right side: CTA button - fixed position, never shrinks */
.learn-course .list-group-item .flex-shrink-0.ms-12 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 90px; /* Ensure space for button */
}

/* CTA button base styles */
.learn-course .list-group-item .btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Responsive: Stack layout on narrow screens */
@media (max-width: 575px) {
  .learn-course .list-group-item > a {
    flex-wrap: wrap;
    padding: 12px 16px;
    min-height: 0; /* Reset min-height for flexible stacking */
  }
  
  /* Title section takes full width on mobile */
  .learn-course .list-group-item > a > .d-flex.align-items-center.gap-12 {
    width: 100%;
    margin-bottom: 8px;
  }
  
  /* CTA moves below, right-aligned */
  .learn-course .list-group-item .flex-shrink-0.ms-12 {
    width: 100%;
    justify-content: flex-end;
    margin-left: 56px; /* Align with title (past icon) */
  }
}

/* Lesson status indicators */
.learn-course .lesson-item--completed {
  border-left: 3px solid var(--learn-success);
}

.learn-course .lesson-item--locked {
  opacity: 0.7;
}

.learn-course .lesson-item--locked:hover {
  transform: none;
  cursor: not-allowed;
}

/* Progress ring animation for course card */
@keyframes progress-ring-fill {
  from { stroke-dashoffset: 100; }
}

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

.learn-course .progress-ring__progress {
  transition: stroke-dashoffset 0.5s ease;
  animation: progress-ring-fill 1s ease-out;
}

/**
 * Lesson Page - Premium Video Player & Card Layout
 * Applied via lesson-ui.js using Wowdash video/card patterns
 */

/* Lesson player frame enhancements */
.learn-lesson .lesson-player {
  border-radius: var(--learn-radius-lg) var(--learn-radius-lg) 0 0;
  overflow: hidden;
}

.learn-lesson .lesson-player video {
  background: #000;
}

/* Play button overlay */
.learn-lesson .lesson-player__overlay {
  pointer-events: auto;
  transition: opacity 0.2s ease;
}

.learn-lesson .lesson-player__overlay button {
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.learn-lesson .lesson-player__overlay button:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.8) !important;
}

/* Hide play overlay when video is playing */
.learn-lesson .lesson-player video:not([paused]) + .lesson-player__overlay {
  opacity: 0;
  pointer-events: none;
}

/* Audio mode gradient background */
.learn-lesson .lesson-player__audio {
  background: linear-gradient(135deg, var(--learn-primary), var(--learn-info));
  min-height: 200px;
}

/* Slides viewer enhancements */
.learn-lesson .slides-viewer img {
  -webkit-user-select: none;
  user-select: none;
}

.learn-lesson .slides-controls button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.learn-lesson .slides-controls button:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Lesson content card section styling */
.learn-lesson .card-body h3 {
  position: relative;
}

.learn-lesson .card-body h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 40px;
  height: 3px;
  background: var(--learn-primary);
  border-radius: 2px;
  opacity: 0;
}

.learn-lesson .card-body h3:hover::after {
  opacity: 1;
}

/* Numbered objective list animation */
.learn-lesson .card-body ul li {
  transition: transform 0.2s ease;
}

.learn-lesson .card-body ul li:hover {
  transform: translateX(4px);
}

/* Sidebar card hover lift */
.learn-lesson .col-lg-4 .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.learn-lesson .col-lg-4 .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Navigation card link hover */
.learn-lesson .col-lg-4 a.d-flex:hover .w-40-px {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* Phase progress card header gradient */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--learn-primary), #6366F1) !important;
}

/* Completion card pulse animation for CTA */
@keyframes pulse-gentle {
  0%, 100% { box-shadow: 0 0 0 0 rgba(48, 62, 139, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(48, 62, 139, 0); }
}

.learn-lesson .card-body.bg-primary-50 button {
  animation: pulse-gentle 2s infinite;
}

.learn-lesson .card-body.bg-primary-50 button:hover {
  animation: none;
  transform: scale(1.02);
}

/* Lesson complete button - completed state */
.lesson-complete-btn[disabled],
.lesson-complete-btn[aria-disabled="true"] {
  animation: none !important;
  cursor: default;
  pointer-events: none;
  opacity: 1; /* Keep full opacity for visibility */
}

.lesson-complete-btn.bg-success-600 {
  background-color: var(--learn-success) !important;
  border-color: var(--learn-success) !important;
}

/* Resources list item hover */
.learn-lesson .card-body a.radius-8:hover {
  background: var(--learn-neutral-50) !important;
}

/**
 * Mode Toggle Button Enhancement
 */
[data-mode-toggle] button {
  transition: all 0.2s ease;
}

[data-mode-toggle] button:hover:not(.bg-primary-600) {
  background: var(--learn-neutral-100);
  border-color: var(--learn-neutral-300);
}

[data-mode-toggle] button.bg-primary-600 {
  box-shadow: var(--gbc-shadow-primary-md, 0 2px 8px rgba(48, 62, 139, 0.3));
}

/**
 * Responsive Adjustments for Phase 3C
 */
@media (max-width: 991px) {
  /* Stack sidebar below main content on tablet/mobile */
  .learn-lesson .row {
    flex-direction: column;
  }
  
  .learn-lesson .col-lg-8,
  .learn-lesson .col-lg-4 {
    width: 100%;
    max-width: 100%;
  }
  
  /* Navigation card becomes horizontal on mobile */
  .learn-lesson .col-lg-4 .card:first-child .card-body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--learn-spacing-sm);
  }
  
  .learn-lesson .col-lg-4 .card:first-child .card-body > * {
    flex: 1 1 45%;
    min-width: 200px;
  }
}

@media (max-width: 575px) {
  /* Compact mode toggle on very small screens */
  [data-mode-toggle] {
    flex-direction: column;
    width: 100%;
  }
  
  [data-mode-toggle] button {
    width: 100%;
    justify-content: center;
  }
  
  /* Breadcrumb simplification */
  .learn-lesson > div:first-child ul {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  
  .learn-lesson > div:first-child h6 {
    width: 100%;
    margin-bottom: var(--learn-spacing-sm);
  }
}

/**
 * Print styles for lesson content
 */
@media print {
  .learn-lesson .col-lg-4,
  .learn-lesson [data-mode-toggle],
  .learn-lesson .lesson-player,
  .learn-lesson button[data-complete-btn] {
    display: none !important;
  }
  
  .learn-lesson .col-lg-8 {
    width: 100%;
  }
  
  .learn-lesson .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ============================================================================
   PHASE 4B - COURSE PAGE UX POLISH (Dec 2024)
   ============================================================================
   
   Summary of changes:
   
   1. SCROLL STABILITY
      - Removed `transform: translateX(4px)` on lesson list item hover
      - This was causing layout shift/jitter during scroll
      - Replaced with box-shadow for visual feedback without layout impact
      - Selector: .learn-course .list-group-item:hover
   
   2. TAB ACTIVE STATE  
      - Redesigned .bordered-tab .nav-link.active to use underline indicator
      - Clear visual distinction: primary color + bottom border + font-weight 600
      - Added :focus-visible outline for keyboard accessibility
      - Matches Wowdash bordered-tab pattern from style.css
   
   3. LESSON CTA ALIGNMENT
      - Added explicit flex rules for lesson row containers
      - CTA button container has min-width: 90px to prevent overflow
      - Responsive stacking at 575px breakpoint
      - Button stays right-aligned and vertically centered at all sizes
   
   Future considerations:
   - For multi-course support, these styles use .learn-course scope
   - Tab styles can be extended with additional tab variants if needed
   - Lesson row layout is compatible with any number of mode chips
   
   ============================================================================ */