:root { --brand: #1a71b0; }
html { scroll-behavior: smooth; }
body { font-family: 'Open Sans', system-ui, sans-serif; }

/* Toast slide-in animation */
@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.animate-slide-in-right { animation: slideInRight 220ms cubic-bezier(0.16, 1, 0.3, 1); }

/* Subtle hover lift for course/learner/trainer cards */
.card-hover { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.18);
  border-color: #c7d2fe;
}

/* ----- Interactive quiz animations ----- */

/* New question slides in from the right when the learner clicks Next */
@keyframes quizSlideIn {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.quiz-slide-in { animation: quizSlideIn 280ms cubic-bezier(0.16, 1, 0.3, 1); }

/* Correct-answer option: brief scale-bounce */
@keyframes correctBounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  60%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
.quiz-correct-bounce { animation: correctBounce 460ms ease; }

/* Wrong-answer option: shake left-right */
@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}
.quiz-wrong-shake { animation: wrongShake 420ms ease; }

/* Streak flame: pulse when streak goes up */
@keyframes streakPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
.streak-pulse { animation: streakPulse 600ms ease; }
.prose-lesson { line-height: 1.75; font-size: 1rem; }
.prose-lesson h2 { font-weight: 700; font-size: 1.35rem; margin-top: 1.5rem; margin-bottom: 0.6rem; color: #0f172a; }
.prose-lesson h3 { font-weight: 700; font-size: 1.15rem; margin-top: 1.25rem; margin-bottom: 0.5rem; color: #0f172a; }
.prose-lesson p { margin-bottom: 0.85rem; color: #334155; }
.prose-lesson ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 0.85rem; color: #334155; }
.prose-lesson li { margin-bottom: 0.35rem; }
.prose-lesson strong { color: #0f172a; }
.prose-lesson img,
.prose-lesson video,
.prose-lesson iframe { max-width: 100%; height: auto; border-radius: 10px; margin: 0.75rem auto; display: block; box-shadow: 0 4px 14px -6px rgba(15, 23, 42, 0.18); }
.prose-lesson video,
.prose-lesson iframe { background: #0f172a; }
.prose-lesson a[download] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border-radius: 8px; background: #f1f5f9; border: 1px solid #cbd5e1; color: #1a71b0; text-decoration: none; font-weight: 500; }
.prose-lesson a[download]:hover { background: #e2e8f0; }
.prose-lesson figure { margin: 1.5rem 0; padding: 1rem; background: linear-gradient(135deg, #f8fafc 0%, #eef4ff 100%); border: 1px solid #e2e8f0; border-radius: 14px; }
.prose-lesson figure svg { display: block; width: 100%; height: auto; max-width: 720px; margin: 0 auto; }
.prose-lesson figcaption { text-align: center; font-size: 0.85rem; color: #64748b; margin-top: 0.75rem; font-style: italic; }
.prose-lesson .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.prose-lesson .stat-card { padding: 0.85rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; }
.prose-lesson .stat-card .n { font-size: 1.5rem; font-weight: 800; color: #1a71b0; display: block; }
.prose-lesson .stat-card .l { font-size: 0.78rem; color: #64748b; }
.prose-lesson .compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.prose-lesson .compare .item { padding: 1rem; background: #fff; border: 2px solid #e2e8f0; border-radius: 12px; transition: border-color .15s; }
.prose-lesson .compare .item:hover { border-color: #1a71b0; }
.prose-lesson .compare .item .ico { font-size: 2rem; display: block; margin-bottom: 0.35rem; }
.prose-lesson .compare .item .t { font-weight: 700; color: #0f172a; font-size: 0.95rem; }
.prose-lesson .compare .item .d { font-size: 0.82rem; color: #475569; margin-top: 0.25rem; }
.prose-lesson .timeline { position: relative; padding-left: 1.75rem; margin: 1rem 0; }
.prose-lesson .timeline::before { content: ''; position: absolute; left: 0.5rem; top: 0; bottom: 0; width: 2px; background: #cbd5e1; }
.prose-lesson .timeline .evt { position: relative; padding: 0.5rem 0 0.5rem 0; }
.prose-lesson .timeline .evt::before { content: ''; position: absolute; left: -1.4rem; top: 1rem; width: 10px; height: 10px; border-radius: 50%; background: #1a71b0; border: 2px solid #fff; box-shadow: 0 0 0 2px #1a71b0; }
.prose-lesson .timeline .evt .yr { font-weight: 700; color: #1a71b0; font-size: 0.82rem; }

/* Lesson hero — colorful gradient banner at top of each lesson */
.lesson-hero {
  display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap;
  padding: 1.15rem 1.25rem; border-radius: 14px;
  background: linear-gradient(135deg, #1a71b0 0%, #7c3aed 50%, #ec4899 100%);
  color: #fff; box-shadow: 0 10px 30px -10px rgba(31, 59, 245, 0.3);
  margin-bottom: 1.5rem;
  min-width: 0;
}
@media (min-width: 768px) {
  .lesson-hero { padding: 1.4rem 1.75rem; }
}
.lesson-hero.hero-acoustic { background: linear-gradient(135deg, #0fa36b 0%, #0891b2 50%, #1d4ed8 100%); }
.lesson-hero.hero-tile     { background: linear-gradient(135deg, #e85a1a 0%, #c2410c 50%, #7c2d12 100%); }
.lesson-hero.hero-sound    { background: linear-gradient(135deg, #7c3aed 0%, #2563eb 50%, #06b6d4 100%); }
.lesson-hero.hero-install  { background: linear-gradient(135deg, #ea580c 0%, #eab308 100%); }
.lesson-hero.hero-market   { background: linear-gradient(135deg, #059669 0%, #0891b2 100%); }
.lesson-hero.hero-cert     { background: linear-gradient(135deg, #d97706 0%, #dc2626 100%); }
.lesson-hero .hero-icon { font-size: 2.25rem; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2)); flex-shrink: 0; }
.lesson-hero .hero-text { flex: 1; min-width: 0; }
.lesson-hero .hero-kicker { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.lesson-hero h1 { font-size: 1.35rem !important; font-weight: 800 !important; margin: 0.15rem 0 0 !important; color: #fff !important; line-height: 1.25 !important; }
@media (min-width: 768px) { .lesson-hero h1 { font-size: 1.6rem !important; } .lesson-hero .hero-icon { font-size: 2.75rem; } }
.lesson-hero .hero-sub { font-size: 0.85rem; opacity: 0.9; margin-top: 0.35rem; line-height: 1.4; }

/* Colored callouts (consolidated) */
.prose-lesson .callout {
  position: relative;
  background: #eef4ff;
  border-left: 4px solid #1a71b0;
  padding: 0.85rem 1rem 0.85rem 2.75rem;
  border-radius: 6px;
  margin: 1rem 0;
  color: #334155;
}
.prose-lesson .callout::before {
  content: "💡";
  position: absolute; left: 0.75rem; top: 0.8rem;
  font-size: 1.1rem; line-height: 1;
}
.prose-lesson .callout.warning { background: #fff7ed; border-left-color: #ea580c; }
.prose-lesson .callout.warning::before { content: "⚠️"; }
.prose-lesson .callout.success { background: #ecfdf5; border-left-color: #059669; }
.prose-lesson .callout.success::before { content: "✅"; }
.prose-lesson .callout.fact    { background: #fdf4ff; border-left-color: #a855f7; }
.prose-lesson .callout.fact::before    { content: "🔬"; }
.prose-lesson .callout.story   { background: #fefce8; border-left-color: #eab308; }
.prose-lesson .callout.story::before   { content: "📖"; }
.prose-lesson .callout.tryit   { background: #fce7f3; border-left-color: #ec4899; }
.prose-lesson .callout.tryit::before   { content: "🎯"; }
.prose-lesson .callout p:last-child { margin-bottom: 0; }

/* Key term chips */
.prose-lesson .chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eef4ff; color: #1a71b0; font-size: 0.78rem; font-weight: 600; margin: 0 2px; }
.prose-lesson .chip.chip-tile { background: #fff1eb; color: #c2410c; }
.prose-lesson .chip.chip-green { background: #ecfdf5; color: #047857; }
.prose-lesson .chip.chip-purple { background: #faf5ff; color: #7c3aed; }

/* Better tables */
.prose-lesson table { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; }
.prose-lesson th { background: linear-gradient(to bottom, #f8fafc, #f1f5f9); }
.prose-lesson tr:nth-child(even) td { background: #fafbfc; }
.prose-lesson tr:hover td { background: #eef4ff; }

/* Stat-card variations (colorful) */
.prose-lesson .stat-card.sc-brand { background: linear-gradient(135deg, #eef4ff 0%, #dbeafe 100%); border-color: #bfdbfe; }
.prose-lesson .stat-card.sc-brand .n { color: #1d4ed8; }
.prose-lesson .stat-card.sc-green { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-color: #a7f3d0; }
.prose-lesson .stat-card.sc-green .n { color: #047857; }
.prose-lesson .stat-card.sc-amber { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-color: #fde68a; }
.prose-lesson .stat-card.sc-amber .n { color: #b45309; }
.prose-lesson .stat-card.sc-pink { background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%); border-color: #fbcfe8; }
.prose-lesson .stat-card.sc-pink .n { color: #be185d; }
.prose-lesson .stat-card.sc-purple { background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%); border-color: #ddd6fe; }
.prose-lesson .stat-card.sc-purple .n { color: #6d28d9; }

/* Did-you-know banner */
.prose-lesson .dyk {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 1rem; margin: 1rem 0; border-radius: 12px;
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 50%, #fce7f3 100%);
  border: 1px solid #fecdd3;
}
.prose-lesson .dyk .icon { font-size: 1.75rem; line-height: 1; }
.prose-lesson .dyk .title { font-weight: 700; color: #be185d; font-size: 0.85rem; letter-spacing: 0.03em; text-transform: uppercase; }
.prose-lesson .dyk .body  { color: #881337; font-size: 0.92rem; margin-top: 0.25rem; }

/* Animated video placeholder thumb */
@keyframes pulse-play { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.yt-play-btn { animation: pulse-play 2.5s ease-in-out infinite; }

/* Audio exercise meter */
.meter {
  height: 8px; background: linear-gradient(to right, #10b981 0%, #10b981 60%, #eab308 80%, #ef4444 100%);
  border-radius: 4px; position: relative; overflow: hidden;
}
.meter .fill { position: absolute; top: 0; left: 0; bottom: 0; background: rgba(255,255,255,0.6); transition: width 0.1s; }

/* callouts — consolidated (colored variants + icon prefix) see further down */
.prose-lesson table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.92rem; }
.prose-lesson th, .prose-lesson td { border: 1px solid #e2e8f0; padding: 0.5rem 0.75rem; text-align: left; }
.prose-lesson th { background: #f1f5f9; font-weight: 600; }

.flashcard {
  perspective: 1000px;
  height: 240px;
  cursor: pointer;
}
.flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flashcard.flipped .flashcard-inner {
  transform: rotateY(180deg);
}
.flashcard-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 4px 18px -4px rgba(15, 23, 42, 0.12);
}
.flashcard-back {
  transform: rotateY(180deg);
}

.dragging { opacity: 0.5; }
.drop-zone.over { background: #eef4ff; border-color: #1a71b0; }

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(31, 59, 245, 0.5); }
  70% { box-shadow: 0 0 0 14px rgba(31, 59, 245, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 59, 245, 0); }
}
.hotspot-dot { animation: pulse-ring 2s infinite; }

.confetti {
  position: fixed; pointer-events: none; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999;
}

.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ===========================================================================
 * Dark mode — applied via [data-theme="dark"] on <html> by the useTheme hook.
 * Targeted CSS overrides for the most common Tailwind utility classes used
 * across the app. This is intentionally a thin layer (not a full per-component
 * dark: variant pass) — covers ~80% of surfaces. Edge cases (gradients, custom
 * decorations) are progressively refined here as we notice them.
 * =========================================================================== */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: #0f172a; color: #e2e8f0; }

/* Backgrounds */
html[data-theme="dark"] .bg-white         { background-color: #1e293b !important; }
html[data-theme="dark"] .bg-slate-50      { background-color: #0f172a !important; }
html[data-theme="dark"] .bg-slate-100     { background-color: #334155 !important; }

/* Text colours */
html[data-theme="dark"] .text-slate-900   { color: #f1f5f9 !important; }
html[data-theme="dark"] .text-slate-800   { color: #e2e8f0 !important; }
html[data-theme="dark"] .text-slate-700   { color: #cbd5e1 !important; }
html[data-theme="dark"] .text-slate-600   { color: #94a3b8 !important; }
html[data-theme="dark"] .text-slate-500   { color: #94a3b8 !important; }

/* Borders */
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-300 { border-color: #334155 !important; }

/* Hover backgrounds */
html[data-theme="dark"] .hover\:bg-slate-50:hover,
html[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: #334155 !important; }

/* Inputs */
html[data-theme="dark"] .input { background: #0f172a; color: #e2e8f0; border-color: #334155; }
html[data-theme="dark"] .input::placeholder { color: #64748b; }

/* Prose-lesson dark adjustments */
html[data-theme="dark"] .prose-lesson p,
html[data-theme="dark"] .prose-lesson li,
html[data-theme="dark"] .prose-lesson ul { color: #cbd5e1; }
html[data-theme="dark"] .prose-lesson h2,
html[data-theme="dark"] .prose-lesson h3,
html[data-theme="dark"] .prose-lesson strong { color: #f1f5f9; }

/* Brand logo — swap between colored (light) and white (dark) based on theme. */
.brand-logo-dark { display: none !important; }
html[data-theme="dark"] .brand-logo-light { display: none !important; }
html[data-theme="dark"] .brand-logo-dark  { display: block !important; }