.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.10) 37%, rgba(0,0,0,0.06) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 0.375rem;
}
@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

:focus-visible { outline: 2px solid #C17F3E; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.card-hover { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(22,48,43,0.18); }

.spinner {
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  border-radius: 9999px; width: 14px; height: 14px;
  animation: spin 0.7s linear infinite; display: inline-block;
}
.spinner-dark { border-color: rgba(22,48,43,0.15); border-top-color: #16302B; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Moodle-style collapsible module/topic sections ---- */
.section-header {
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #F2EDE3;
  border-radius: 0.5rem;
  user-select: none;
}
.section-header:hover { background: #ece5d6; }
.section-chevron { transition: transform 0.2s ease; }
.section-collapsed .section-chevron { transform: rotate(-90deg); }
.section-body { overflow: hidden; transition: max-height 0.25s ease; }
.section-collapsed .section-body { max-height: 0 !important; }

/* ---- Lesson row (Moodle "activity" row look) ---- */
.lesson-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-left: 2px solid transparent;
}
.lesson-row:hover { background: rgba(193,127,62,0.05); border-left-color: #C17F3E; }
.lesson-complete-toggle {
  width: 20px; height: 20px; border-radius: 9999px;
  border: 2px solid #cbd0ce; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.lesson-complete-toggle.is-complete { background: #2F6F4F; border-color: #2F6F4F; color: white; }

/* ---- Progress bar ---- */
.progress-bar-track { height: 8px; border-radius: 9999px; background: rgba(42,42,40,0.08); overflow: hidden; }
.progress-bar-fill { height: 100%; background: #C17F3E; border-radius: 9999px; transition: width 0.4s ease; }

/* ---- Course thumbnail card ---- */
.course-thumb {
  aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-radius: 0.75rem 0.75rem 0 0;
  background: #16302B;
}
.course-thumb-placeholder {
  aspect-ratio: 16 / 9; width: 100%; border-radius: 0.75rem 0.75rem 0 0;
  background: linear-gradient(135deg, #16302B, #2F6F4F);
  display: flex; align-items: center; justify-content: center; color: rgba(242,237,227,0.5);
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
}

/* ---- Modal ---- */
.modal-backdrop { background: rgba(22,48,43,0.45); }