/* ============================================================
   Ephesus Academy — Main Stylesheet
   A church learning platform with premium dark navy design.
   Version: 1.0.0
   ============================================================ */

/* ------------------------------------------------------------
   0. DESIGN TOKENS
   ------------------------------------------------------------ */
:root {
  /* Navy palette (brand accent) */
  --ea-navy-50:#F6F6F6; --ea-navy-100:#ECECEC; --ea-navy-200:#DADADA; --ea-navy-300:#BFBFBF;
  --ea-navy-400:#9A9A9A; --ea-navy-500:#6E6E6E; --ea-navy-600:#4B4B4B; --ea-navy-700:#2E2E2E;
  --ea-navy-800:#1A1A1A; --ea-navy-900:#0A0A0A;

  /* Neutral grayscale */
  --ea-neutral-50:#FAFAFA; --ea-neutral-100:#F2F2F2; --ea-neutral-200:#E4E4E4; --ea-neutral-300:#CFCFCF;
  --ea-neutral-400:#9E9E9E; --ea-neutral-500:#707070; --ea-neutral-600:#525252; --ea-neutral-700:#3A3A3A;
  --ea-neutral-800:#262626; --ea-neutral-900:#121212;

  /* Gold accent ramp */
  --ea-gold-50:#FAFAFA; --ea-gold-100:#F0F0F0; --ea-gold-200:#E2E2E2; --ea-gold-300:#CFCFCF;
  --ea-gold-400:#9E9E9E; --ea-gold-500:#0A0A0A; --ea-gold-600:#333333; --ea-gold-700:#3A3A3A;

  /* Accent = navy-700 (links, CTAs) */
  --ea-accent:#4a5b8c; --ea-accent-light:#5f6f9e; --ea-accent-lighter:#8b98c0; --ea-accent-dark:#3a4870;
  --ea-accent-bg:rgba(74,91,140,0.08);

  /* Gold CTA */
  --ea-gold:#4a5b8c; --ea-gold-hover:#3a4870; --ea-gold-bg:rgba(74,91,140,0.08);

  /* Category accents (harmonised) */
  --ea-cat-theology:#0A0A0A; --ea-cat-leadership:#3A3A3A; --ea-cat-family:#242424; --ea-cat-ministry:#4B4B4B;

  /* Status */
  --ea-green:#0F6E56; --ea-red:#B3261E; --ea-pink:#993556; --ea-warn:#B7791F;
  /* The wash behind a warning. Used in 5 places and, until now, DEFINED IN NONE — every
     one fell back to a hardcoded light-mode brown, including in dark mode, where an 8%
     brown on a dark card is invisible. That is why a Held row barely looked different. */
  --ea-warn-soft:rgba(183,121,31,0.10);
  --ea-red-soft:rgba(179,38,30,0.08);
  --ea-green-soft:rgba(15,110,86,0.07);

  /* Page width. .ea-lv-layout already read `var(--ea-container, 1200px)` for a token
     that did not exist — it only looked right because the fallback happened to match
     .ea-container below. Now they are one value, so they cannot drift apart. */
  --ea-container:1200px;
  /* Letterboxing behind video. Dark in BOTH themes on purpose: it is the absence of
     picture, not a surface, and a light bar around a dark frame reads as a bug. */
  --ea-lv-media-bg:#0d0d0d;

  /* Backgrounds / surfaces (light-first) */
  --ea-bg:#FFFFFF; --ea-bg-alt:#FAFAFA; --ea-bg-muted:#F2F2F2;
  --ea-surface:#FFFFFF; --ea-surface-hover:#FAFAFA; --ea-card-bg:#FFFFFF;
  --ea-border:rgba(0,0,0,0.08); --ea-border-hover:rgba(0,0,0,0.16);
  --ea-footer-bg:#0A0A0A; --ea-stats-bg:#FAFAFA; --ea-nav-bg:rgba(255,255,255,0.90);

  /* Text */
  --ea-text:#262626; --ea-text-secondary:#525252; --ea-text-muted:#707070; --ea-text-heading:#121212;

  /* Typography (EGW Diaspora: Jost headings + Barlow body) */
  --ea-font-ui:'Inter','Helvetica Neue',Arial,-apple-system,BlinkMacSystemFont,sans-serif;
  --ea-font-display:'Neue Haas Grotesk Display Pro','Helvetica Neue','Inter Tight','Inter',Arial,sans-serif;

  /* Radius (minimal, diaspora) */
  --ea-radius-sm:2px; --ea-radius:4px; --ea-radius-lg:8px; --ea-radius-xl:12px; --ea-radius-full:9999px;

  /* Shadows (diaspora two-part elevation) */
  --ea-shadow-sm:0 1px 2px rgba(17,24,39,0.06),0 1px 3px rgba(17,24,39,0.08);
  --ea-shadow:0 2px 4px rgba(17,24,39,0.06),0 6px 14px rgba(17,24,39,0.08);
  --ea-shadow-lg:0 4px 8px rgba(17,24,39,0.08),0 16px 32px rgba(17,24,39,0.12);
  --ea-shadow-xl:0 12px 24px rgba(17,24,39,0.12),0 32px 60px rgba(17,24,39,0.16);

  /* Transitions */
  --ea-ease:0.2s ease; --ea-ease-slow:0.35s ease;

  /* Pure black & white light-mode CTA/accent helpers (flip to gold/navy in dark-mode.css) */
  --ea-cta-ink:#FFFFFF; --ea-cta-ink-hover:#FFFFFF;
  --ea-cta-glow:rgba(10,10,10,0.20); --ea-cta-glow-strong:rgba(10,10,10,0.28);
  --ea-underline:rgba(74,91,140,0.22); --ea-accent-glow:rgba(74,91,140,0.20);
}


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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  line-height: 1.15;
}

body {
  background-color: var(--ea-bg);
  color: var(--ea-text);
  font-family: var(--ea-font-ui);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
  /* Sticky footer: .ea-main already declares flex:1 (main.css:4086), but that only works
     inside a flex column — body was never made one, so on a short page (the Course Studio
     gate, empty states, 404) the footer floated up under the content and the viewport's
     bottom showed a band of empty background. This is the missing half of an intended
     layout, and it fixes every short page, not just the Studio. */
  display: flex;
  flex-direction: column;
}

h1, h2 {
  font-family: var(--ea-font-display);
  color: var(--ea-text-heading);
  line-height: 1.25;
  font-weight: 600;
}

h3, h4, h5, h6 {
  font-family: var(--ea-font-ui);
  color: var(--ea-text-heading);
  line-height: 1.35;
  font-weight: 600;
}

h1 { font-size: 56px; font-weight: 600; letter-spacing: -1px; line-height: 1.0; }
h2 { font-size: 38px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.15; }
h3 { font-size: 30px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.2; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }

a {
  color: var(--ea-accent);
  text-decoration: none;
  transition: color var(--ea-ease);
}

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

img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
  color: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

::selection {
  background-color: var(--ea-accent);
  color: #ffffff;
}

::-moz-selection {
  background-color: var(--ea-accent);
  color: #ffffff;
}

/* Container */
.ea-container {
  max-width: var(--ea-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}


/* ------------------------------------------------------------
   2. ANNOUNCEMENT BAR
   ------------------------------------------------------------ */
.ea-announcement-bar {
  background: var(--ea-accent-bg);
  border-bottom: 1px solid rgba(10, 10, 10, 0.2);
  padding: 8px 0;
  font-size: 12px;
  color: var(--ea-text-secondary);
}

.ea-announcement-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ea-announcement-bar__text {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Announcement badge */
.ea-announcement-bar__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--ea-accent);
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--ea-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Announcement close button */
.ea-announcement-bar__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ea-text-muted);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color var(--ea-ease);
}
.ea-announcement-bar__close:hover {
  color: var(--ea-text);
}

.ea-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--ea-accent);
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--ea-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.ea-announcement-bar__link {
  font-size: 12px;
  font-weight: 500;
  color: var(--ea-accent-light);
  white-space: nowrap;
}

.ea-announcement-bar__link:hover {
  color: var(--ea-accent-lighter);
}

.ea-announcement-bar__link svg {
  display: inline;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  margin-left: 4px;
}


/* ------------------------------------------------------------
   3. NAVIGATION
   ------------------------------------------------------------ */
.ea-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(11, 27, 50, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ea-border);
}

.ea-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 24px;
}

/* Logo */
.ea-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.ea-header__logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ea-accent), var(--ea-accent-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.ea-header__logo-icon svg {
  width: 18px;
  height: 18px;
}

.ea-header__logo-text {
  font-family: var(--ea-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ea-text-heading);
  letter-spacing: -0.3px;
}

/* Nav links */
.ea-header__nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ea-header__nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ea-text-secondary);
  border-radius: var(--ea-radius);
  transition: color var(--ea-ease), background var(--ea-ease);
  position: relative;
  white-space: nowrap;
}

.ea-header__nav-link:hover {
  color: var(--ea-text);
  background: var(--ea-surface-hover);
}

.ea-header__nav-link.active {
  color: var(--ea-text-heading);
}

.ea-header__nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--ea-accent);
  border-radius: 1px;
}

.ea-header__nav-link svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

/* Right actions */
.ea-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ea-header__search-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ea-text-secondary);
  transition: color var(--ea-ease), background var(--ea-ease);
}

.ea-header__search-toggle:hover {
  color: var(--ea-text);
  background: var(--ea-surface-hover);
}

.ea-header__search-toggle svg {
  width: 16px;
  height: 16px;
}

.ea-header__theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ea-text-secondary);
  transition: color var(--ea-ease), background var(--ea-ease);
}

.ea-header__theme-toggle:hover {
  color: var(--ea-text);
  background: var(--ea-surface-hover);
}

.ea-header__theme-toggle svg {
  width: 16px;
  height: 16px;
}

/* Theme toggle icon visibility — JS (main.js/app.js) shows exactly one icon per MODE
   (sun=light, moon=dark, monitor=system). These are just the pre-JS defaults. */
.ea-icon-sun { display: none; }
.ea-icon-system { display: none; }

/* Action button base (search & theme toggle shared) */
.ea-header__action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Sticky/scrolled header state */
.ea-header--sticky {
  background: rgba(11, 27, 50, 0.98);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Active nav link (BEM modifier — base CSS used .active) */
.ea-header__nav-link--active {
  color: var(--ea-text-heading);
}
.ea-header__nav-link--active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--ea-accent);
  border-radius: 1px;
}

/* Logo sub-elements */
.ea-header__logo-name {
  display: block;
  font-family: var(--ea-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ea-text-heading);
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.ea-header__logo-tagline {
  display: block;
  font-size: 11px;
  color: var(--ea-text-muted);
  font-weight: 400;
}

/* Dropdown links */
.ea-header__dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--ea-text-secondary);
  transition: background var(--ea-ease), color var(--ea-ease);
}
.ea-header__dropdown-link:hover {
  background: var(--ea-surface-hover);
  color: var(--ea-text);
}
.ea-header__dropdown-link--danger {
  color: var(--ea-red);
}
.ea-header__dropdown-link--danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.ea-header__signup-area {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ea-gold);
  border: 1px solid var(--ea-gold);
  border-radius: var(--ea-radius-full);
  transition: background var(--ea-ease), color var(--ea-ease);
}

.ea-header__signup-area:hover {
  background: var(--ea-gold);
  color: var(--ea-navy-900);
}

.ea-header__signup-area svg {
  width: 14px;
  height: 14px;
}

/* User menu (logged in) */
.ea-header__user-menu {
  position: relative;
}

.ea-header__avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  transition: background var(--ea-ease), box-shadow var(--ea-ease);
}
.ea-header__avatar-btn:hover { box-shadow: 0 0 0 2px var(--ea-border-hover); }

.ea-header__avatar-btn:hover {
  background: var(--ea-surface-hover);
}

.ea-header__avatar-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 0;
  display: block;
}

.ea-header__avatar-placeholder {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ea-accent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ea-accent);
}

.ea-header__avatar-btn svg {
  width: 12px;
  height: 12px;
  color: var(--ea-text-muted);
  transition: transform var(--ea-ease);
}

.ea-header__user-menu.open .ea-header__avatar-btn svg {
  transform: rotate(180deg);
}

.ea-header__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--ea-navy-800);
  border: 1px solid var(--ea-border-hover);
  border-radius: var(--ea-radius-lg);
  box-shadow: var(--ea-shadow-lg);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--ea-ease), visibility var(--ea-ease), transform var(--ea-ease);
  z-index: 100;
}

.ea-header__user-menu.open .ea-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ea-header__dropdown-user {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ea-border);
  margin-bottom: 4px;
}

.ea-header__dropdown-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ea-text-heading);
}

.ea-header__dropdown-email {
  font-size: 11px;
  color: var(--ea-text-muted);
  margin-top: 2px;
}

.ea-header__dropdown a,
.ea-header__dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ea-text-secondary);
  border-radius: var(--ea-radius);
  transition: background var(--ea-ease), color var(--ea-ease);
  text-align: left;
}

.ea-header__dropdown a:hover,
.ea-header__dropdown button:hover {
  background: var(--ea-surface-hover);
  color: var(--ea-text);
}

.ea-header__dropdown a svg,
.ea-header__dropdown button svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.ea-header__dropdown-divider {
  height: 1px;
  background: var(--ea-border);
  margin: 4px 0;
}

/* Hamburger */
.ea-hamburger {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: var(--ea-text-secondary);
  border-radius: var(--ea-radius);
}

.ea-hamburger svg {
  width: 20px;
  height: 20px;
}

/* Mobile nav */
.ea-mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: var(--ea-navy-800);
  border-left: 1px solid var(--ea-border);
  box-shadow: var(--ea-shadow-xl);
  z-index: 2000;
  transform: translateX(100%);
  transition: transform var(--ea-ease-slow);
  overflow-y: auto;
  padding: 20px;
}

.ea-mobile-nav.open {
  transform: translateX(0);
}

.ea-mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.ea-mobile-nav-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ea-text-secondary);
}

.ea-mobile-nav-close:hover {
  background: var(--ea-surface-hover);
  color: var(--ea-text);
}

.ea-mobile-nav-close svg {
  width: 18px;
  height: 18px;
}

.ea-mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ea-mobile-nav-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ea-text-secondary);
  border-radius: var(--ea-radius);
  transition: background var(--ea-ease), color var(--ea-ease);
}

.ea-mobile-nav-links a:hover,
.ea-mobile-nav-links a.active {
  background: var(--ea-surface-hover);
  color: var(--ea-text-heading);
}

.ea-mobile-nav-links a svg {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.ea-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1999;
  opacity: 0;
  transition: opacity var(--ea-ease-slow);
}

.ea-mobile-overlay.open {
  opacity: 1;
}


/* ------------------------------------------------------------
   4. HERO
   ------------------------------------------------------------ */
.ea-hero {
  padding: 80px 0 60px;
  background:
    radial-gradient(ellipse 600px 400px at 50% 0%, rgba(10, 10, 10, 0.12) 0%, transparent 70%),
    linear-gradient(180deg, var(--ea-navy-900) 0%, var(--ea-bg) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ea-hero::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(10, 10, 10, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.ea-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--ea-accent-bg);
  border: 1px solid rgba(10, 10, 10, 0.25);
  border-radius: var(--ea-radius-full);
  font-size: 12px;
  font-weight: 500;
  color: var(--ea-accent-light);
  margin-bottom: 20px;
}

.ea-hero__badge svg {
  width: 14px;
  height: 14px;
}

/* Hero background layers */
.ea-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ea-hero__gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 600px 400px at 50% 0%, rgba(10, 10, 10, 0.12) 0%, transparent 70%);
}
.ea-hero__inner {
  position: relative;
  z-index: 1;
}

/* Hero title */
.ea-hero h1,
.ea-hero__title {
  font-size: 42px;
  font-family: var(--ea-font-display);
  font-weight: 700;
  color: var(--ea-text-heading);
  letter-spacing: -0.5px;
  margin-bottom: 16px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.ea-hero h1 em,
.ea-hero__title-accent {
  font-style: normal;
  color: var(--ea-accent);
}

/* Hero subtitle */
.ea-hero__subtitle {
  font-size: 16px;
  color: var(--ea-text-secondary);
  max-width: 540px;
  margin: 0 auto 32px;
  line-height: 1.7;
}

/* Hero CTA buttons */
.ea-hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Gold CTA button */
.ea-btn--gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--ea-gold), var(--ea-gold-hover));
  color: var(--ea-cta-ink);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--ea-radius-full);
  border: none;
  cursor: pointer;
  transition: transform var(--ea-ease), box-shadow var(--ea-ease);
  box-shadow: 0 4px 16px var(--ea-cta-glow);
}

.ea-btn--gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--ea-cta-glow-strong);
  color: var(--ea-cta-ink);
}

.ea-btn--gold svg {
  width: 16px;
  height: 16px;
}

/* Outline button */
.ea-btn--outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: transparent;
  color: var(--ea-text);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--ea-radius-full);
  border: 1px solid var(--ea-border-hover);
  cursor: pointer;
  transition: border-color var(--ea-ease), background var(--ea-ease);
}

.ea-btn--outline:hover {
  border-color: var(--ea-accent);
  background: var(--ea-accent-bg);
  color: var(--ea-text-heading);
}

.ea-btn--outline svg {
  width: 16px;
  height: 16px;
}

/* Generic accent button */
.ea-btn--accent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--ea-accent);
  color: var(--ea-cta-ink);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--ea-radius-full);
  border: none;
  cursor: pointer;
  transition: background var(--ea-ease), transform var(--ea-ease);
}

.ea-btn--accent:hover {
  background: var(--ea-accent-dark);
  transform: translateY(-1px);
  color: #ffffff;
}

/* Small button variant */
.ea-btn--sm {
  padding: 6px 14px;
  font-size: 12px;
}


/* ------------------------------------------------------------
   5. STATS STRIP
   ------------------------------------------------------------ */
.ea-stats {
  background: var(--ea-accent-bg);
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
  padding: 24px 0;
}

.ea-stats__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.ea-stats__item {
  text-align: center;
}

.ea-stats__value {
  display: block;
  font-size: 24px;
  font-weight: 500;
  color: var(--ea-accent);
  margin-bottom: 2px;
}

.ea-stats__label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ea-text-muted);
}


/* ------------------------------------------------------------
   6. SECTION HEADINGS
   ------------------------------------------------------------ */
.ea-section {
  padding: 48px 0;
}

.ea-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.ea-section__header h2 {
  font-size: 20px;
  font-weight: 500;
  font-family: var(--ea-font-ui);
  color: var(--ea-text-heading);
  margin: 0;
}

.ea-section__footer {
  font-size: 13px;
  font-weight: 500;
  color: var(--ea-accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.ea-section__footer:hover {
  color: var(--ea-accent-light);
}

.ea-section__footer svg {
  width: 14px;
  height: 14px;
}

.ea-section__subtitle {
  font-size: 14px;
  color: var(--ea-text-secondary);
  max-width: 600px;
  margin-bottom: 32px;
  line-height: 1.7;
}


/* ------------------------------------------------------------
   7. COURSE CARDS
   ------------------------------------------------------------ */
.ea-course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ea-course-card {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
  transition: border-color var(--ea-ease), box-shadow var(--ea-ease), transform var(--ea-ease);
}

.ea-course-card:hover {
  border-color: rgba(10, 10, 10, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* Cover */
.ea-course-card__cover {
  position: relative;
  height: 140px;
  background: linear-gradient(135deg, var(--ea-navy-700), var(--ea-navy-800));
  overflow: hidden;
}

.ea-course-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ea-course-card__category {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  color: var(--ea-text);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--ea-radius-sm);
}

.ea-course-card__level {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--ea-radius-sm);
}

.ea-course-card__level.beginner {
  background: rgba(74, 222, 128, 0.2);
  color: var(--ea-green);
}

.ea-course-card__level.intermediate {
  background: rgba(245, 158, 11, 0.2);
  color: var(--ea-gold);
}

.ea-course-card__level.advanced {
  background: rgba(10, 10, 10, 0.2);
  color: var(--ea-pink);
}

/* Body */
.ea-course-card__body {
  padding: 16px;
}

.ea-course-card__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ea-text-heading);
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ea-course-card__title a {
  color: inherit;
}

.ea-course-card__title a:hover {
  color: var(--ea-accent-light);
}

.ea-course-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--ea-text-muted);
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.ea-course-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ea-course-card__meta-item svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

.ea-course-card__instructor {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ea-text-secondary);
  margin-bottom: 12px;
}

/* (removed) `.ea-course-card__instructor img{width:24px}` — a pre-v2.14.0 descendant rule
   at (0,1,1) that outranked the live `.ea-course-card__instructor-img{width:28px}` (6527,
   (0,1,0)) on specificity, so a photo avatar rendered 24px while its initials-fallback
   twin rendered 28px. The live card styles the photo by class; the element rule is gone. */

.ea-course-card__instructor-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ea-accent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--ea-accent);
}

/* Footer */
.ea-course-card__footer {
  padding: 12px 16px;
  border-top: 1px solid var(--ea-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ea-course-card__enroll {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ea-gold);
  border: 1px solid var(--ea-gold);
  border-radius: var(--ea-radius-full);
  transition: background var(--ea-ease), color var(--ea-ease);
}

.ea-course-card__enroll:hover {
  background: var(--ea-gold);
  color: var(--ea-navy-900);
}

.ea-course-card__price {
  font-size: 13px;
  font-weight: 600;
  color: var(--ea-text-heading);
}

.ea-course-card__price.free {
  color: var(--ea-green);
}

/* (removed) legacy `.ea-course-card__progress{...width:100%}` — the live rule at 6539
   restates display/gap but not width, so this width:100% survived and stretched the
   progress cluster across the whole footer. The v2.14.0 block owns the card progress now.
   NOTE: the bare `.ea-progress-bar{flex:1;...}` below is KEPT — it is the shared base for
   the lesson topbar, exam progress and single-course bars; only the CARD variant needs
   flex:none, which is set on `.ea-course-card__progress .ea-progress-bar` at ~6540. */
.ea-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--ea-border);
  border-radius: 2px;
  overflow: hidden;
}

.ea-progress-fill {
  height: 100%;
  background: var(--ea-accent);
  border-radius: 2px;
  transition: width var(--ea-ease-slow);
}

.ea-progress-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--ea-accent);
  white-space: nowrap;
}


/* ------------------------------------------------------------
   8. CATEGORY GRID
   ------------------------------------------------------------ */
.ea-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.ea-category-card {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: 10px;
  padding: 24px 16px;
  text-align: center;
  transition: border-color var(--ea-ease), background var(--ea-ease), transform var(--ea-ease);
  cursor: pointer;
}

.ea-category-card:hover {
  border-color: var(--ea-border-hover);
  background: var(--ea-surface-hover);
  transform: translateY(-2px);
}

.ea-category-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.ea-category-card__icon svg {
  width: 22px;
  height: 22px;
}

.ea-category-card__icon.theology   { background: rgba(10, 10, 10, 0.15); color: var(--ea-accent); }
.ea-category-card__icon.worship    { background: rgba(10, 10, 10, 0.15); color: var(--ea-pink); }
.ea-category-card__icon.leadership { background: rgba(245, 158, 11, 0.15);  color: var(--ea-gold); }
.ea-category-card__icon.missions   { background: rgba(74, 222, 128, 0.15);  color: var(--ea-green); }
.ea-category-card__icon.family     { background: rgba(168, 162, 158, 0.15); color: var(--ea-navy-200); }
.ea-category-card__icon.youth      { background: rgba(56, 189, 248, 0.15);  color: #38bdf8; }
.ea-category-card__icon.stewardship{ background: rgba(251, 146, 60, 0.15);  color: #fb923c; }
.ea-category-card__icon.history    { background: rgba(167, 139, 250, 0.15); color: #a78bfa; }

.ea-category-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ea-text-heading);
  margin-bottom: 4px;
}

.ea-category-card__count {
  font-size: 11px;
  color: var(--ea-text-muted);
}


/* ------------------------------------------------------------
   9. "WHAT TO EXPECT" / FEATURES
   ------------------------------------------------------------ */
.ea-expect {
  padding: 48px 0;
}

.ea-expect__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ea-expect__card {
  text-align: center;
  padding: 24px 16px;
}

.ea-expect__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.ea-expect__icon svg {
  width: 24px;
  height: 24px;
}

.ea-expect__icon.purple { background: rgba(10, 10, 10, 0.12); color: var(--ea-accent); }
.ea-expect__icon.gold   { background: rgba(245, 158, 11, 0.12); color: var(--ea-gold); }
.ea-expect__icon.green  { background: rgba(74, 222, 128, 0.12); color: var(--ea-green); }
.ea-expect__icon.pink   { background: rgba(10, 10, 10, 0.12); color: var(--ea-pink); }
.ea-expect__icon.blue   { background: rgba(56, 189, 248, 0.12); color: #38bdf8; }
.ea-expect__icon.orange { background: rgba(251, 146, 60, 0.12); color: #fb923c; }

.ea-expect__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ea-text-heading);
  margin-bottom: 8px;
}

.ea-expect__desc {
  font-size: 13px;
  color: var(--ea-text-secondary);
  line-height: 1.6;
}


/* ------------------------------------------------------------
   10. TESTIMONIALS
   ------------------------------------------------------------ */
.ea-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.ea-testimonial-card {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-lg);
  padding: 24px;
}

.ea-testimonial-card__text {
  font-family: var(--ea-font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ea-text);
  line-height: 1.7;
  margin-bottom: 16px;
}

.ea-testimonial-card__text::before {
  content: '\201C';
  font-size: 28px;
  color: var(--ea-accent);
  line-height: 0;
  vertical-align: -8px;
  margin-right: 4px;
}

.ea-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ea-testimonial-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ea-border);
}

.ea-testimonial-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ea-accent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ea-accent);
}

.ea-testimonial-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ea-text-heading);
}

.ea-testimonial-card__course {
  font-size: 11px;
  color: var(--ea-text-muted);
}


/* ------------------------------------------------------------
   11. FAQ
   ------------------------------------------------------------ */
.ea-faq {
  padding: 48px 0;
}

.ea-faq__list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ea-faq__item {
  background: var(--ea-card-bg, #fff);
  border: 1px solid var(--ea-border);
  border-radius: 14px;
  transition: border-color var(--ea-ease), box-shadow var(--ea-ease);
}
.ea-faq__item:hover {
  border-color: var(--ea-border-hover, var(--ea-border));
}
.ea-faq__item[open] {
  border-color: var(--ea-border-hover, var(--ea-border));
  box-shadow: var(--ea-shadow-md, 0 4px 16px rgba(20,25,50,.08));
}

.ea-faq__item summary {
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ea-text-heading);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color var(--ea-ease);
}

.ea-faq__item summary::-webkit-details-marker {
  display: none;
}

/* Single chevron only: the inline .ea-faq__chevron SVG. The old summary::after
   duplicate (a second chevron on the right edge) was removed in v2.58.0. */

.ea-faq__item summary:hover {
  color: var(--ea-accent);
}

.ea-faq__answer {
  font-size: 14.5px;
  color: var(--ea-text-secondary);
  line-height: 1.65;
}
.ea-faq__answer p { margin: 0; padding: 2px 22px 20px; }
.ea-faq-js .ea-faq__answer { height: 0; overflow: hidden; transition: height .3s ease; }
@media (prefers-reduced-motion: reduce) {
  .ea-faq-js .ea-faq__answer { transition: none; }
  .ea-faq__chevron { transition: none; }
}


/* ------------------------------------------------------------
   12. CTA SECTION
   ------------------------------------------------------------ */
.ea-cta-section {
  padding: 64px 0;
  text-align: center;
  background:
    radial-gradient(ellipse 500px 300px at 50% 50%, rgba(10, 10, 10, 0.1) 0%, transparent 70%),
    linear-gradient(180deg, transparent, var(--ea-navy-900));
}

.ea-cta-section h2 {
  font-size: 28px;
  font-family: var(--ea-font-display);
  margin-bottom: 12px;
}

.ea-cta-section__text {
  font-size: 15px;
  color: var(--ea-text-secondary);
  max-width: 500px;
  margin: 0 auto 28px;
  line-height: 1.6;
}

.ea-cta-section__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}


/* ------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------ */
.ea-footer {
  border-top: 1px solid var(--ea-border);
  padding: 48px 0 0;
  background: var(--ea-navy-900);
}

.ea-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.ea-footer__desc {
  font-size: 13px;
  color: var(--ea-text-muted);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 280px;
}

.ea-footer__social {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.ea-footer__social-link {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ea-text-muted);
  transition: color var(--ea-ease), border-color var(--ea-ease), background var(--ea-ease);
}

.ea-footer__social-link:hover {
  color: var(--ea-accent);
  border-color: var(--ea-accent);
  background: var(--ea-accent-bg);
}

.ea-footer__social-link svg {
  width: 14px;
  height: 14px;
}

.ea-footer__heading {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ea-text-heading);
  margin-bottom: 16px;
}

.ea-footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ea-footer__link {
  font-size: 13px;
  color: var(--ea-text-muted);
  transition: color var(--ea-ease);
}

.ea-footer__link:hover {
  color: var(--ea-accent);
}

.ea-footer__bottom {
  border-top: 1px solid var(--ea-border);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ea-text-muted);
  gap: 16px;
  flex-wrap: wrap;
}

.ea-footer__legal {
  display: flex;
  gap: 16px;
}

.ea-footer__legal a {
  font-size: 12px;
  color: var(--ea-text-muted);
}

.ea-footer__legal a:hover {
  color: var(--ea-text-secondary);
}


/* ------------------------------------------------------------
   14. COURSE DETAIL PAGE
   ------------------------------------------------------------ */

/* Breadcrumb */
.ea-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ea-text-muted);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ea-breadcrumb a {
  color: var(--ea-accent);
  font-size: 12px;
}

.ea-breadcrumb a:hover {
  color: var(--ea-accent-light);
}

.ea-breadcrumb__sep {
  color: var(--ea-text-muted);
  font-size: 10px;
}

/* Course hero */
.ea-course-hero {
  padding: 48px 0;
  background:
    radial-gradient(ellipse 500px 300px at 30% 50%, rgba(10, 10, 10, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, var(--ea-navy-900), var(--ea-bg));
}

.ea-course-hero__inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}

.ea-course-hero__content h1 {
  font-size: 32px;
  margin-bottom: 12px;
}

.ea-course-hero__desc {
  font-size: 15px;
  color: var(--ea-text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
}

.ea-course-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.ea-course-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-sm);
  font-size: 12px;
  color: var(--ea-text-secondary);
}

.ea-course-hero__meta-item svg {
  width: 12px;
  height: 12px;
  opacity: 0.6;
}

/* Outcomes */
.ea-outcomes {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-lg);
  padding: 24px;
  margin-bottom: 32px;
}

.ea-outcomes h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

.ea-outcomes-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.ea-outcomes-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--ea-text-secondary);
  line-height: 1.5;
}

.ea-outcomes-list li svg {
  width: 16px;
  height: 16px;
  color: var(--ea-green);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Enroll card */
.ea-enroll-card {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border-hover);
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
  position: sticky;
  top: 80px;
  box-shadow: var(--ea-shadow);
}

.ea-enroll-card__cover {
  height: 180px;
  background: linear-gradient(135deg, var(--ea-navy-700), var(--ea-navy-800));
  position: relative;
  overflow: hidden;
}

.ea-enroll-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ea-enroll-card__cover-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: background var(--ea-ease), transform var(--ea-ease);
}

.ea-enroll-card__cover-play:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: translate(-50%, -50%) scale(1.05);
}

.ea-enroll-card__cover-play svg {
  width: 20px;
  height: 20px;
  margin-left: 2px;
}

.ea-enroll-card__body {
  padding: 24px;
}

.ea-enroll-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}

.ea-enroll-card__price {
  font-size: 28px;
  font-weight: 700;
  color: var(--ea-text-heading);
}

.ea-enroll-card__price.free {
  color: var(--ea-green);
}

.ea-enroll-card__original {
  font-size: 16px;
  color: var(--ea-text-muted);
  text-decoration: line-through;
}

.ea-enroll-card__cta {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
}

.ea-enroll-card__guarantee {
  text-align: center;
  font-size: 11px;
  color: var(--ea-text-muted);
  margin-bottom: 20px;
}

.ea-enroll-card__details {
  border-top: 1px solid var(--ea-border);
  padding-top: 16px;
}

.ea-enroll-card__detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
}

.ea-enroll-card__detail-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ea-text-muted);
}

.ea-enroll-card__detail-label svg {
  width: 14px;
  height: 14px;
}

.ea-enroll-card__detail-value {
  color: var(--ea-text);
  font-weight: 500;
}

/* Tabs */
.ea-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ea-border);
  margin-bottom: 32px;
  overflow-x: auto;
}

.ea-tabs__tab {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ea-text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--ea-ease), border-color var(--ea-ease);
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.ea-tabs__tab:hover {
  color: var(--ea-text-secondary);
}

.ea-tabs__tab.active {
  color: var(--ea-text-heading);
  border-bottom-color: var(--ea-accent);
}

.ea-tabs__panel {
  display: none;
}

.ea-tabs__panel.active {
  display: block;
}

/* Modules / Curriculum */
.ea-syllabus {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ea-syllabus__module {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
}

.ea-syllabus__module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  transition: background var(--ea-ease);
  gap: 12px;
  list-style: none;
}

.ea-syllabus__module-header::-webkit-details-marker {
  display: none;
}

.ea-syllabus__module-header:hover {
  background: var(--ea-surface-hover);
}

.ea-syllabus__module-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ea-syllabus__module-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ea-accent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ea-accent);
  flex-shrink: 0;
}

.ea-syllabus__module-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ea-text-heading);
}

.ea-syllabus__module-meta {
  font-size: 11px;
  color: var(--ea-text-muted);
  white-space: nowrap;
}

.ea-syllabus__chevron {
  width: 16px;
  height: 16px;
  color: var(--ea-text-muted);
  transition: transform var(--ea-ease);
  flex-shrink: 0;
}

.ea-syllabus__module[open] .ea-syllabus__chevron {
  transform: rotate(180deg);
}

.ea-syllabus__lessons {
  border-top: 1px solid var(--ea-border);
}

/* Lesson rows */
.ea-syllabus__lesson {
  display: flex;
  align-items: center;
  padding: 12px 20px 12px 32px;
  gap: 12px;
  transition: background var(--ea-ease);
  border-bottom: 1px solid var(--ea-border);
}

.ea-syllabus__lesson:last-child {
  border-bottom: none;
}

.ea-syllabus__lesson:hover {
  background: var(--ea-surface-hover);
}

.ea-lesson-content__type-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--ea-radius-sm);
  background: var(--ea-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ea-lesson-content__type-icon svg {
  width: 14px;
  height: 14px;
  color: var(--ea-text-muted);
}

.ea-lesson-content__type-icon.video   svg { color: var(--ea-accent); }
.ea-lesson-content__type-icon.reading svg { color: var(--ea-gold); }
.ea-lesson-content__type-icon.quiz    svg { color: var(--ea-pink); }
.ea-lesson-content__type-icon.assignment svg { color: var(--ea-green); }

.ea-lesson-info {
  flex: 1;
  min-width: 0;
}

.ea-lesson-content__text {
  font-size: 13px;
  font-weight: 500;
  color: var(--ea-text);
}

.ea-lesson-content__text a {
  color: inherit;
}

.ea-lesson-content__text a:hover {
  color: var(--ea-accent);
}

.ea-lesson-content__subtitle {
  font-size: 11px;
  color: var(--ea-text-muted);
  margin-top: 2px;
}

.ea-lesson-content__dur {
  font-size: 12px;
  color: var(--ea-text-muted);
  white-space: nowrap;
}

.ea-lesson-actions__done {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--ea-border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--ea-ease), border-color var(--ea-ease);
}

.ea-lesson-actions__done.completed {
  background: var(--ea-green);
  border-color: var(--ea-green);
}

.ea-lesson-actions__done.completed svg {
  width: 12px;
  height: 12px;
  color: var(--ea-navy-900);
}

/* Instructor card */
.ea-instructor-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-lg);
  padding: 24px;
}

.ea-instructor-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--ea-border);
}

.ea-instructor-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ea-text-heading);
  margin-bottom: 2px;
}

.ea-instructor-card__title {
  font-size: 13px;
  color: var(--ea-accent);
  margin-bottom: 8px;
}

.ea-instructor-card__bio {
  font-size: 13px;
  color: var(--ea-text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.ea-instructor-card__stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--ea-text-muted);
}

.ea-instructor-card__stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ea-instructor-card__stats svg {
  width: 12px;
  height: 12px;
}

/* Related courses */
.ea-related {
  padding: 48px 0;
  border-top: 1px solid var(--ea-border);
}


/* ------------------------------------------------------------
   15. LESSON VIEWER
   ------------------------------------------------------------ */

/* Top bar */
.ea-lesson-topbar {
  background: var(--ea-navy-900);
  border-bottom: 1px solid var(--ea-border);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 900;
}

.ea-lesson-topbar__back {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ea-lesson-topbar__back-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ea-text-secondary);
  transition: color var(--ea-ease);
}

.ea-lesson-topbar__back-link:hover {
  color: var(--ea-text);
}

.ea-lesson-topbar__back-link svg {
  width: 16px;
  height: 16px;
}

.ea-lesson-topbar__course {
  font-size: 14px;
  font-weight: 500;
  color: var(--ea-text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ea-lesson-topbar__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ea-lesson-topbar__progress .ea-progress-bar {
  width: 120px;
}

/* Main layout */
.ea-lesson-main {
  display: grid;
  grid-template-columns: 1fr 340px;
  min-height: calc(100vh - 56px);
}

/* Video player */
.ea-video-player {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
  overflow: hidden;
}

.ea-video-player video,
.ea-video-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.ea-video-player-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background var(--ea-ease);
}

.ea-video-player-overlay:hover {
  background: rgba(0, 0, 0, 0.15);
}

.ea-video-play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: background var(--ea-ease), transform var(--ea-ease);
}

.ea-video-play-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.ea-video-play-btn svg {
  width: 28px;
  height: 28px;
  margin-left: 3px;
}

/* Video controls */
.ea-video-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--ea-navy-900);
  border-top: 1px solid var(--ea-border);
}

.ea-video-control-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ea-text-secondary);
  transition: color var(--ea-ease), background var(--ea-ease);
}

.ea-video-control-btn:hover {
  color: var(--ea-text);
  background: var(--ea-surface-hover);
}

.ea-video-control-btn svg {
  width: 16px;
  height: 16px;
}

.ea-video-timeline {
  flex: 1;
  height: 4px;
  background: var(--ea-border);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}

.ea-video-timeline-fill {
  height: 100%;
  background: var(--ea-accent);
  border-radius: 2px;
  position: relative;
}

.ea-video-timeline-fill::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ea-accent);
  opacity: 0;
  transition: opacity var(--ea-ease);
}

.ea-video-timeline:hover .ea-video-timeline-fill::after {
  opacity: 1;
}

.ea-video-time {
  font-size: 12px;
  color: var(--ea-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ea-video-volume {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ea-video-volume-slider {
  width: 60px;
  height: 4px;
  background: var(--ea-border);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.ea-video-volume-fill {
  height: 100%;
  background: var(--ea-text-secondary);
  border-radius: 2px;
}

/* Lesson info */
.ea-lesson-content {
  padding: 24px;
  border-bottom: 1px solid var(--ea-border);
}

.ea-lesson-content__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ea-text-heading);
  margin-bottom: 8px;
}

.ea-lesson-content__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--ea-text-muted);
  margin-bottom: 16px;
}

.ea-lesson-content__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ea-lesson-content__meta svg {
  width: 12px;
  height: 12px;
}

.ea-lesson-actions__complete-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--ea-green);
  color: var(--ea-navy-900);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--ea-radius-full);
  border: none;
  cursor: pointer;
  transition: background var(--ea-ease), transform var(--ea-ease);
}

.ea-lesson-actions__complete-btn:hover {
  background: #22c55e;
  transform: translateY(-1px);
}

.ea-lesson-actions__complete-btn svg {
  width: 16px;
  height: 16px;
}

.ea-lesson-actions__complete-btn.completed {
  background: var(--ea-surface);
  color: var(--ea-green);
  border: 1px solid var(--ea-green);
}

/* Lesson sidebar */
.ea-lesson-sidebar {
  border-left: 1px solid var(--ea-border);
  background: var(--ea-navy-900);
  overflow-y: auto;
  max-height: calc(100vh - 56px);
  position: sticky;
  top: 56px;
}

.ea-lesson-sidebar__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ea-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--ea-text-heading);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ea-lesson-sidebar__progress {
  font-size: 12px;
  font-weight: 400;
  color: var(--ea-text-muted);
}

.ea-lesson-sidebar__module {
  border-bottom: 1px solid var(--ea-border);
}

.ea-lesson-sidebar__module-title {
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ea-text-muted);
  background: var(--ea-surface);
}

.ea-lesson-sidebar__lesson {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 13px;
  color: var(--ea-text-secondary);
  border-left: 2px solid transparent;
  transition: background var(--ea-ease), color var(--ea-ease), border-color var(--ea-ease);
  cursor: pointer;
}

.ea-lesson-sidebar__lesson:hover {
  background: var(--ea-surface-hover);
  color: var(--ea-text);
}

.ea-lesson-sidebar__lesson.active {
  background: var(--ea-accent-bg);
  color: var(--ea-text-heading);
  border-left-color: var(--ea-accent);
}

.ea-lesson-sidebar__lesson.completed {
  color: var(--ea-text-muted);
}

.ea-lesson-sidebar__lesson-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ea-lesson-sidebar__lesson-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ea-lesson-sidebar__lesson-dur {
  font-size: 11px;
  color: var(--ea-text-muted);
  flex-shrink: 0;
}


/* ------------------------------------------------------------
   16. EXAM PAGE
   ------------------------------------------------------------ */

/* Exam hero */
.ea-exam-hero {
  padding: 32px 0;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.06), transparent);
  border-bottom: 1px solid var(--ea-border);
}

.ea-exam-hero h1 {
  font-size: 24px;
  margin-bottom: 8px;
}

.ea-exam-hero__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--ea-text-secondary);
  flex-wrap: wrap;
}

.ea-exam-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ea-exam-hero__meta svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

/* Progress bar */
.ea-exam-progress {
  background: var(--ea-surface);
  border-bottom: 1px solid var(--ea-border);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 800;
}

.ea-exam-progress__inner {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ea-exam-progress .ea-progress-bar {
  flex: 1;
  height: 6px;
}

.ea-exam-progress__counter {
  font-size: 13px;
  font-weight: 500;
  color: var(--ea-text);
  white-space: nowrap;
}

.ea-exam-progress__timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ea-gold);
  font-variant-numeric: tabular-nums;
}

.ea-exam-progress__timer svg {
  width: 14px;
  height: 14px;
}

.ea-exam-progress__timer.warning {
  color: var(--ea-red);
  animation: ea-pulse 1s infinite;
}

/* Question card */
.ea-exam-question {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-lg);
  padding: 32px;
  margin: 24px 0;
  max-width: 720px;
}

.ea-exam-question__num {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ea-accent);
  margin-bottom: 8px;
}

.ea-exam-question__text {
  font-size: 16px;
  font-weight: 500;
  color: var(--ea-text-heading);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Options */
.ea-exam-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ea-exam-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius);
  cursor: pointer;
  transition: border-color var(--ea-ease), background var(--ea-ease);
}

.ea-exam-option:hover {
  border-color: var(--ea-accent);
  background: var(--ea-accent-bg);
}

.ea-exam-option.selected {
  border-color: var(--ea-accent);
  background: var(--ea-accent-bg);
}

.ea-exam-option.correct {
  border-color: var(--ea-green);
  background: rgba(74, 222, 128, 0.08);
}

.ea-exam-option.incorrect {
  border-color: var(--ea-red);
  background: rgba(239, 68, 68, 0.08);
}

.ea-exam-option__radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--ea-border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: border-color var(--ea-ease);
}

.ea-exam-option.selected .ea-exam-option__radio {
  border-color: var(--ea-accent);
}

.ea-exam-option.selected .ea-exam-option__radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ea-accent);
}

.ea-exam-option.correct .ea-exam-option__radio {
  border-color: var(--ea-green);
  background: var(--ea-green);
}

.ea-exam-option.correct .ea-exam-option__radio::after {
  content: '';
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230B1B32' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 0;
}

.ea-exam-option.incorrect .ea-exam-option__radio {
  border-color: var(--ea-red);
}

.ea-exam-option__text {
  font-size: 14px;
  color: var(--ea-text);
  line-height: 1.5;
}

/* Navigation */
.ea-exam-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  gap: 16px;
}

.ea-exam-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--ea-radius-full);
  transition: background var(--ea-ease), color var(--ea-ease);
}

.ea-exam-nav__prev {
  color: var(--ea-text-secondary);
  border: 1px solid var(--ea-border);
}

.ea-exam-nav__prev:hover {
  color: var(--ea-text);
  border-color: var(--ea-border-hover);
  background: var(--ea-surface-hover);
}

.ea-exam-nav__next {
  background: var(--ea-accent);
  color: #ffffff;
}

.ea-exam-nav__next:hover {
  background: var(--ea-accent-dark);
}

.ea-exam-nav__btn svg {
  width: 14px;
  height: 14px;
}

.ea-exam-nav__submit {
  background: var(--ea-gold);
  color: var(--ea-navy-900);
  font-weight: 600;
}

.ea-exam-nav__submit:hover {
  background: var(--ea-gold-hover);
}

/* Results */
.ea-exam-results {
  text-align: center;
  padding: 48px 24px;
  max-width: 480px;
  margin: 0 auto;
}

.ea-exam-results__score-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  border: 4px solid;
}

.ea-exam-results__score-circle.pass {
  border-color: var(--ea-green);
  background: rgba(74, 222, 128, 0.08);
}

.ea-exam-results__score-circle.fail {
  border-color: var(--ea-red);
  background: rgba(239, 68, 68, 0.08);
}

.ea-exam-results__score-value {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

.ea-exam-results__score-circle.pass .ea-exam-results__score-value {
  color: var(--ea-green);
}

.ea-exam-results__score-circle.fail .ea-exam-results__score-value {
  color: var(--ea-red);
}

.ea-exam-results__score-label {
  font-size: 12px;
  color: var(--ea-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.ea-exam-results__title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.ea-exam-results__title.pass {
  color: var(--ea-green);
}

.ea-exam-results__title.fail {
  color: var(--ea-red);
}

.ea-exam-results__subtitle {
  font-size: 14px;
  color: var(--ea-text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.ea-exam-results__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}


/* ------------------------------------------------------------
   17. INSTRUCTORS PAGE
   ------------------------------------------------------------ */
.ea-instructors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ea-instructor-grid-card {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-lg);
  padding: 28px 20px;
  text-align: center;
  transition: border-color var(--ea-ease), transform var(--ea-ease);
}

.ea-instructor-grid-card:hover {
  border-color: var(--ea-border-hover);
  transform: translateY(-2px);
}

.ea-instructor-grid-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  border: 3px solid var(--ea-border);
}

.ea-instructor-grid-card__avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--ea-accent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: var(--ea-accent);
  margin: 0 auto 16px;
}

.ea-instructor-grid-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ea-text-heading);
  margin-bottom: 4px;
}

.ea-instructor-grid-card__title {
  font-size: 13px;
  color: var(--ea-accent);
  margin-bottom: 12px;
}

.ea-instructor-grid-card__bio {
  font-size: 13px;
  color: var(--ea-text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ea-instructor-grid-card__meta {
  font-size: 12px;
  color: var(--ea-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ea-instructor-grid-card__meta svg {
  width: 14px;
  height: 14px;
}


/* ------------------------------------------------------------
   18. ABOUT PAGE
   ------------------------------------------------------------ */

/* Mission section */
.ea-about-mission {
  text-align: center;
  padding: 64px 0;
  max-width: 700px;
  margin: 0 auto;
}

.ea-about-mission h1 {
  margin-bottom: 16px;
}

.ea-about-mission__text {
  font-size: 16px;
  color: var(--ea-text-secondary);
  line-height: 1.8;
  margin-bottom: 32px;
}

.ea-about-mission__card {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-left: 3px solid var(--ea-accent);
  border-radius: var(--ea-radius-lg);
  padding: 24px 28px;
  text-align: left;
}

.ea-about-mission__verse {
  font-family: var(--ea-font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--ea-text);
  line-height: 1.7;
  margin-bottom: 8px;
}

.ea-about-mission__label {
  font-size: 13px;
  color: var(--ea-accent);
  font-weight: 500;
}

/* Values grid */
.ea-values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 48px 0;
}

.ea-value__card {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-lg);
  padding: 24px 20px;
  text-align: center;
}

.ea-value__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  background: var(--ea-accent-bg);
  color: var(--ea-accent);
}

.ea-value__icon svg {
  width: 22px;
  height: 22px;
}

.ea-value__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ea-text-heading);
  margin-bottom: 8px;
}

.ea-value__desc {
  font-size: 13px;
  color: var(--ea-text-secondary);
  line-height: 1.6;
}


/* ------------------------------------------------------------
   19. 404 PAGE
   ------------------------------------------------------------ */
.ea-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 48px 24px;
}

.ea-404__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--ea-accent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.ea-404__icon svg {
  width: 36px;
  height: 36px;
  color: var(--ea-accent);
}

.ea-404 h1 {
  font-size: 32px;
  margin-bottom: 12px;
}

.ea-404__desc {
  font-size: 15px;
  color: var(--ea-text-secondary);
  max-width: 400px;
  margin-bottom: 28px;
  line-height: 1.6;
}

.ea-404__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}


/* ------------------------------------------------------------
   20. UTILITY CLASSES
   ------------------------------------------------------------ */

/* Grids */
.ea-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.ea-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ea-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Text */
.ea-text-center { text-align: center; }
.ea-text-left   { text-align: left; }
.ea-text-right  { text-align: right; }
.ea-text-accent { color: var(--ea-accent); }
.ea-text-gold   { color: var(--ea-gold); }
.ea-text-green  { color: var(--ea-green); }
.ea-text-muted  { color: var(--ea-text-muted); }
.ea-text-sm     { font-size: 12px; }
.ea-text-lg     { font-size: 16px; }

/* Spacing */
.ea-mt-0  { margin-top: 0; }
.ea-mt-1  { margin-top: 8px; }
.ea-mt-2  { margin-top: 16px; }
.ea-mt-3  { margin-top: 24px; }
.ea-mt-4  { margin-top: 32px; }
.ea-mt-5  { margin-top: 48px; }

.ea-mb-0  { margin-bottom: 0; }
.ea-mb-1  { margin-bottom: 8px; }
.ea-mb-2  { margin-bottom: 16px; }
.ea-mb-3  { margin-bottom: 24px; }
.ea-mb-4  { margin-bottom: 32px; }
.ea-mb-5  { margin-bottom: 48px; }

.ea-py-0  { padding-top: 0; padding-bottom: 0; }
.ea-py-1  { padding-top: 8px; padding-bottom: 8px; }
.ea-py-2  { padding-top: 16px; padding-bottom: 16px; }
.ea-py-3  { padding-top: 24px; padding-bottom: 24px; }
.ea-py-4  { padding-top: 32px; padding-bottom: 32px; }
.ea-py-5  { padding-top: 48px; padding-bottom: 48px; }

.ea-px-0  { padding-left: 0; padding-right: 0; }
.ea-px-1  { padding-left: 8px; padding-right: 8px; }
.ea-px-2  { padding-left: 16px; padding-right: 16px; }
.ea-px-3  { padding-left: 24px; padding-right: 24px; }

/* Visibility */
.ea-hidden  { display: none !important; }
.ea-visible { display: block !important; }

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Flex helpers */
.ea-flex         { display: flex; }
.ea-flex-center  { display: flex; align-items: center; justify-content: center; }
.ea-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ea-flex-col     { display: flex; flex-direction: column; }
.ea-flex-wrap    { flex-wrap: wrap; }
.ea-gap-1        { gap: 8px; }
.ea-gap-2        { gap: 16px; }
.ea-gap-3        { gap: 24px; }

/* Width */
.ea-w-full { width: 100%; }

/* Overflow */
.ea-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Divider */
.ea-divider {
  height: 1px;
  background: var(--ea-border);
  border: none;
  margin: 24px 0;
}


/* ------------------------------------------------------------
   21. ANIMATIONS
   ------------------------------------------------------------ */
@keyframes ea-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ea-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ea-slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ea-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ea-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

@keyframes ea-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes ea-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Animation classes */
.ea-animate {
  animation: ea-fade-in 0.4s ease both;
}

.ea-animate-up {
  animation: ea-slide-up 0.5s ease both;
}

.ea-animate-down {
  animation: ea-slide-down 0.3s ease both;
}

.ea-animate-scale {
  animation: ea-scale-in 0.3s ease both;
}

/* Staggered children */
.ea-stagger > *:nth-child(1)  { animation-delay: 0.05s; }
.ea-stagger > *:nth-child(2)  { animation-delay: 0.10s; }
.ea-stagger > *:nth-child(3)  { animation-delay: 0.15s; }
.ea-stagger > *:nth-child(4)  { animation-delay: 0.20s; }
.ea-stagger > *:nth-child(5)  { animation-delay: 0.25s; }
.ea-stagger > *:nth-child(6)  { animation-delay: 0.30s; }
.ea-stagger > *:nth-child(7)  { animation-delay: 0.35s; }
.ea-stagger > *:nth-child(8)  { animation-delay: 0.40s; }
.ea-stagger > *:nth-child(9)  { animation-delay: 0.45s; }
.ea-stagger > *:nth-child(10) { animation-delay: 0.50s; }
.ea-stagger > *:nth-child(11) { animation-delay: 0.55s; }
.ea-stagger > *:nth-child(12) { animation-delay: 0.60s; }

/* Loading skeleton */
.ea-skeleton {
  background: linear-gradient(90deg,
    var(--ea-surface) 25%,
    var(--ea-surface-hover) 50%,
    var(--ea-surface) 75%
  );
  background-size: 200% 100%;
  animation: ea-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--ea-radius);
}

/* Spinner */
.ea-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--ea-border);
  border-top-color: var(--ea-accent);
  border-radius: 50%;
  animation: ea-spin 0.6s linear infinite;
}

/* Transition utilities */
.ea-transition {
  transition: all var(--ea-ease);
}

.ea-transition-slow {
  transition: all var(--ea-ease-slow);
}


/* ------------------------------------------------------------
   22. FORM ELEMENTS
   ------------------------------------------------------------ */
.ea-input,
.ea-textarea,
.ea-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius);
  color: var(--ea-text);
  font-size: 14px;
  transition: border-color var(--ea-ease), box-shadow var(--ea-ease);
  outline: none;
}

.ea-input:focus,
.ea-textarea:focus,
.ea-select:focus {
  border-color: var(--ea-accent);
  box-shadow: 0 0 0 3px var(--ea-accent-bg);
}

.ea-input::placeholder,
.ea-textarea::placeholder {
  color: var(--ea-text-muted);
}

.ea-textarea {
  resize: vertical;
  min-height: 100px;
}

.ea-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.ea-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ea-text);
  margin-bottom: 6px;
}

.ea-form-group {
  margin-bottom: 20px;
}

.ea-form-hint {
  font-size: 12px;
  color: var(--ea-text-muted);
  margin-top: 4px;
}

.ea-form-error {
  font-size: 12px;
  color: var(--ea-red);
  margin-top: 4px;
}

.ea-checkbox,
.ea-radio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--ea-text);
  cursor: pointer;
}

.ea-checkbox input,
.ea-radio input {
  accent-color: var(--ea-accent);
  margin-top: 3px;
}

/* Search bar */
.ea-search-overlay__input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-full);
  padding: 8px 16px;
  transition: border-color var(--ea-ease);
}

.ea-search-overlay__input:focus-within {
  border-color: var(--ea-accent);
}

.ea-search-overlay__input svg {
  width: 16px;
  height: 16px;
  color: var(--ea-text-muted);
  flex-shrink: 0;
}

.ea-search-overlay__input input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 13px;
  color: var(--ea-text);
}

.ea-search-overlay__input input::placeholder {
  color: var(--ea-text-muted);
}


/* ------------------------------------------------------------
   23. NOTIFICATION & ALERT COMPONENTS
   ------------------------------------------------------------ */
.ea-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--ea-radius);
  font-size: 13px;
  line-height: 1.5;
}

.ea-alert svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.ea-alert--info {
  background: var(--ea-accent-bg);
  border: 1px solid rgba(10, 10, 10, 0.2);
  color: var(--ea-accent-light);
}

.ea-alert--success {
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.2);
  color: var(--ea-green);
}

.ea-alert--warning {
  background: var(--ea-gold-bg);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: var(--ea-gold);
}

.ea-alert--error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--ea-red);
}

/* Toast */
.ea-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  background: var(--ea-navy-800);
  border: 1px solid var(--ea-border-hover);
  border-radius: var(--ea-radius);
  box-shadow: var(--ea-shadow-lg);
  font-size: 13px;
  color: var(--ea-text);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 5000;
  animation: ea-slide-up 0.3s ease;
}

.ea-toast svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ea-toast-close {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ea-text-muted);
  margin-left: 8px;
}

.ea-toast-close:hover {
  color: var(--ea-text);
}


/* ------------------------------------------------------------
   24. PAGINATION
   ------------------------------------------------------------ */
.ea-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 32px 0;
}

.ea-pagination-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ea-radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--ea-text-secondary);
  transition: background var(--ea-ease), color var(--ea-ease);
}

.ea-pagination-btn:hover {
  background: var(--ea-surface-hover);
  color: var(--ea-text);
}

.ea-pagination-btn.active {
  background: var(--ea-accent);
  color: #ffffff;
}

.ea-pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ea-pagination-btn svg {
  width: 14px;
  height: 14px;
}

.ea-pagination-ellipsis {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--ea-text-muted);
}


/* ------------------------------------------------------------
   25. MODAL / DIALOG
   ------------------------------------------------------------ */
.ea-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ea-ease), visibility var(--ea-ease);
}

.ea-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.ea-modal {
  background: var(--ea-navy-800);
  border: 1px solid var(--ea-border-hover);
  border-radius: var(--ea-radius-xl);
  box-shadow: var(--ea-shadow-xl);
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  animation: ea-scale-in 0.2s ease;
}

.ea-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ea-border);
}

.ea-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ea-text-heading);
}

.ea-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ea-text-muted);
  transition: background var(--ea-ease), color var(--ea-ease);
}

.ea-modal-close:hover {
  background: var(--ea-surface-hover);
  color: var(--ea-text);
}

.ea-modal-close svg {
  width: 16px;
  height: 16px;
}

.ea-modal-body {
  padding: 24px;
}

.ea-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--ea-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}


/* ------------------------------------------------------------
   26. BADGE & TAG COMPONENTS
   ------------------------------------------------------------ */
.ea-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--ea-radius-sm);
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  color: var(--ea-text-secondary);
}

.ea-tag--accent {
  background: var(--ea-accent-bg);
  border-color: rgba(10, 10, 10, 0.2);
  color: var(--ea-accent-light);
}

.ea-tag--gold {
  background: var(--ea-gold-bg);
  border-color: rgba(245, 158, 11, 0.2);
  color: var(--ea-gold);
}

.ea-tag--green {
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.2);
  color: var(--ea-green);
}

.ea-tag--red {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: var(--ea-red);
}

/* Status dot */
.ea-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.ea-status-dot.online  { background: var(--ea-green); }
.ea-status-dot.offline { background: var(--ea-text-muted); }
.ea-status-dot.busy    { background: var(--ea-red); }


/* ------------------------------------------------------------
   27. TOOLTIP
   ------------------------------------------------------------ */
.ea-tooltip {
  position: relative;
}

.ea-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--ea-navy-800);
  border: 1px solid var(--ea-border-hover);
  border-radius: var(--ea-radius-sm);
  font-size: 12px;
  color: var(--ea-text);
  white-space: nowrap;
  box-shadow: var(--ea-shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ea-ease), visibility var(--ea-ease);
  pointer-events: none;
  z-index: 100;
}

.ea-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}


/* ------------------------------------------------------------
   28. EMPTY STATE
   ------------------------------------------------------------ */
.ea-empty-state {
  text-align: center;
  padding: 48px 24px;
}

.ea-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ea-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.ea-empty__icon svg {
  width: 24px;
  height: 24px;
  color: var(--ea-text-muted);
}

.ea-empty__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ea-text-heading);
  margin-bottom: 6px;
}

.ea-empty__desc {
  font-size: 13px;
  color: var(--ea-text-muted);
  max-width: 300px;
  margin: 0 auto 20px;
}


/* ------------------------------------------------------------
   29. RESPONSIVE
   ------------------------------------------------------------ */

/* Tablet */
@media (max-width: 1024px) {
  .ea-course-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ea-categories__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ea-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .ea-course-hero__inner {
    grid-template-columns: 1fr;
  }

  .ea-enroll-card {
    position: static;
    max-width: 400px;
    margin: 0 auto;
  }

  .ea-lesson-main {
    grid-template-columns: 1fr;
  }

  .ea-lesson-sidebar {
    border-left: none;
    border-top: 1px solid var(--ea-border);
    max-height: none;
    position: static;
  }

  .ea-instructors-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ea-values__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ea-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ea-outcomes-list {
    grid-template-columns: 1fr;
  }

  .ea-expect__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  .ea-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  h1 { font-size: 28px; }
  h2 { font-size: 22px; }

  /* Nav */
  .ea-header__nav-list {
    display: none;
  }

  .ea-hamburger {
    display: flex;
  }

  .ea-mobile-nav {
    display: block;
  }

  .ea-mobile-overlay {
    display: block;
  }

  .ea-header__inner {
    height: 56px;
  }

  /* Hero */
  .ea-hero {
    padding: 48px 0 40px;
  }

  .ea-hero h1 {
    font-size: 28px;
  }

  .ea-hero-desc {
    font-size: 14px;
  }

  .ea-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ea-btn--gold,
  .ea-btn--outline {
    justify-content: center;
  }

  /* Stats */
  .ea-stats__grid {
    gap: 24px;
  }

  .ea-stats__value {
    font-size: 20px;
  }

  /* Grids */
  .ea-course-grid,
  .ea-categories__grid,
  .ea-testimonials__grid,
  .ea-instructors-grid,
  .ea-grid-2,
  .ea-grid-3 {
    grid-template-columns: 1fr;
  }

  .ea-values__grid,
  .ea-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ea-expect__grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .ea-footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ea-footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .ea-footer__legal {
    justify-content: center;
  }

  /* Course detail */
  .ea-course-hero h1 {
    font-size: 24px;
  }

  .ea-course-hero__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Lesson viewer */
  .ea-lesson-topbar {
    padding: 0 16px;
    height: 48px;
  }

  .ea-lesson-topbar__progress .ea-progress-bar {
    width: 80px;
  }

  .ea-lesson-content {
    padding: 16px;
  }

  /* Exam */
  .ea-exam-question {
    padding: 20px;
  }

  .ea-exam-nav {
    flex-wrap: wrap;
  }

  /* Section */
  .ea-section {
    padding: 32px 0;
  }

  .ea-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* About */
  .ea-about-mission {
    padding: 40px 0;
  }

  /* 404 */
  .ea-404 h1 {
    font-size: 24px;
  }

  /* CTA */
  .ea-cta-section {
    padding: 40px 0;
  }

  .ea-cta-section__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Announce */
  .ea-announcement-bar__inner {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }

  /* Modal */
  .ea-modal {
    max-width: 100%;
    border-radius: var(--ea-radius-lg);
  }

  /* Pagination */
  .ea-pagination {
    gap: 2px;
  }

  .ea-pagination-btn {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .ea-values__grid,
  .ea-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MISSING BEM BASE STYLES — AUTO-APPENDED
   These styles were missing from main.css, causing unstyled
   elements despite correct BEM class usage in templates.
   ============================================================ */


/* ------------------------------------------------------------
   M1. GLOBAL WRAPPERS & LAYOUT
   ------------------------------------------------------------ */
.ea-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.ea-main {
  flex: 1;
}

.ea-single-course,
.ea-course-archive {
  padding: 0;
}

.ea-nav {
  display: flex;
  align-items: center;
}


/* ------------------------------------------------------------
   M2. HEADER BEM ADDITIONS
   ------------------------------------------------------------ */
.ea-header__nav {
  display: flex;
  align-items: center;
}

.ea-header__nav-item {
  list-style: none;
}

.ea-header__hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--ea-text);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
}

.ea-header__signup-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--ea-radius-full);
  background: var(--ea-gold);
  color: #1a1a2e;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: background var(--ea-ease);
  border: none;
  cursor: pointer;
}

.ea-header__signup-btn:hover {
  background: var(--ea-gold-hover);
}

.ea-hamburger-open,
.ea-hamburger-close {
  display: none;
}


/* ------------------------------------------------------------
   M3. DARK / THEME TOGGLE
   ------------------------------------------------------------ */
.ea-dark-toggle {
  background: none;
  border: none;
  color: var(--ea-text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--ea-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--ea-ease), background var(--ea-ease);
}

.ea-dark-toggle:hover {
  color: var(--ea-text);
  background: var(--ea-surface-hover);
}

.ea-dark-toggle__icon {
  width: 18px;
  height: 18px;
}

.ea-dark-toggle__icon--sun {
  display: none;
}

.ea-dark-toggle__icon--moon {
  display: block;
}

html[data-theme="light"] .ea-dark-toggle__icon--sun {
  display: block;
}

html[data-theme="light"] .ea-dark-toggle__icon--moon {
  display: none;
}

.ea-theme-toggle,
.ea-dark-mode,
.ea-theme {
  /* Utility wrapper classes — no visual styles needed */
}


/* ------------------------------------------------------------
   M4. SEARCH OVERLAY
   ------------------------------------------------------------ */
.ea-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ea-ease), visibility var(--ea-ease);
}

.ea-search-overlay--open {
  opacity: 1;
  visibility: visible;
}

.ea-search-overlay__form {
  width: 100%;
  max-width: 560px;
  position: relative;
}

.ea-search-overlay__input {
  width: 100%;
  padding: 16px 48px 16px 20px;
  background: var(--ea-surface);
  border: 1px solid var(--ea-border-hover);
  border-radius: var(--ea-radius-lg);
  color: var(--ea-text);
  font-size: 16px;
  font-family: var(--ea-font-ui);
  outline: none;
  transition: border-color var(--ea-ease);
}

.ea-search-overlay__input::placeholder {
  color: var(--ea-text-muted);
}

.ea-search-overlay__input:focus {
  border-color: var(--ea-accent);
}

.ea-search-overlay__close,
.ea-search-close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ea-text-muted);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
}

.ea-search-toggle {
  background: none;
  border: none;
  color: var(--ea-text-secondary);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
}


/* ------------------------------------------------------------
   M5. MOBILE NAV
   ------------------------------------------------------------ */
.ea-mobile-nav {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  z-index: 1050;
  background: var(--ea-bg);
  border-left: 1px solid var(--ea-border);
  transition: right var(--ea-ease-slow);
  overflow-y: auto;
  /* This live block slides via `right`, but the superseded legacy block (main.css:680)
     still sets transform:translateX(100%) and nothing here reset it — so an OPEN drawer
     (right:0) was pushed a full 300px back off-screen and mobile nav never appeared. The
     legacy reset .ea-mobile-nav.open never fires because app.js toggles `--open`, not
     `.open`. Own the property so the leftover can't reach us. */
  transform: none;
}

.ea-mobile-nav--open {
  right: 0;
}

.ea-mobile-nav__inner {
  padding: 20px;
}

.ea-mobile-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ea-mobile-nav__link {
  display: block;
  padding: 12px 16px;
  color: var(--ea-text);
  text-decoration: none;
  font-size: 15px;
  border-radius: var(--ea-radius);
  transition: background var(--ea-ease), color var(--ea-ease);
}

.ea-mobile-nav__link:hover {
  background: var(--ea-surface-hover);
}

.ea-mobile-nav__link--active {
  color: var(--ea-accent-light);
  background: var(--ea-accent-bg);
}

.ea-mobile-nav__link--danger {
  color: var(--ea-red);
}

.ea-mobile-nav__divider {
  height: 1px;
  background: var(--ea-border);
  margin: 12px 0;
}

.ea-mobile-nav__auth {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* ------------------------------------------------------------
   M6. USER MENU / DROPDOWN
   ------------------------------------------------------------ */
.ea-user-menu,
.ea-user-dropdown {
  position: relative;
  display: inline-flex;
}

.ea-avatar-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: var(--ea-radius-full);
  outline: none;
}


/* ------------------------------------------------------------
   M7. BUTTON MODIFIERS
   ------------------------------------------------------------ */
.ea-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border: none;
  border-radius: var(--ea-radius);
  font-family: var(--ea-font-ui);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--ea-ease);
  line-height: 1.4;
}

.ea-btn--lg {
  padding: 14px 32px;
  font-size: 16px;
  border-radius: var(--ea-radius-lg);
}

.ea-btn--md {
  padding: 10px 22px;
  font-size: 14px;
}

.ea-btn--sm {
  padding: 6px 14px;
  font-size: 12px;
}

.ea-btn--full {
  width: 100%;
}

.ea-btn--outline-gold {
  background: transparent;
  border: 2px solid var(--ea-gold);
  color: var(--ea-gold);
}

.ea-btn--outline-gold:hover {
  background: var(--ea-gold-bg);
}

.ea-btn--green {
  background: var(--ea-green);
  color: #0B1B32;
}

.ea-btn--green:hover {
  filter: brightness(1.1);
}


/* ------------------------------------------------------------
   M8. BADGE MODIFIERS
   ------------------------------------------------------------ */
.ea-badge--level {
  background: var(--ea-accent-bg);
  color: var(--ea-accent-light);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--ea-radius-full);
  font-weight: 600;
}

.ea-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}


/* ------------------------------------------------------------
   M9. SECTION & PAGE HERO
   ------------------------------------------------------------ */
.ea-section__title {
  font-family: var(--ea-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--ea-text-heading);
}

.ea-page-hero {
  padding: 80px 0 48px;
  text-align: center;
  background: linear-gradient(180deg, var(--ea-navy-900) 0%, var(--ea-bg) 100%);
  border-bottom: 1px solid var(--ea-border);
}

.ea-page-hero__inner {
  max-width: 640px;
  margin: 0 auto;
}

.ea-page-hero__title {
  font-family: var(--ea-font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--ea-text-heading);
  margin-bottom: 12px;
}

.ea-page-hero__subtitle {
  font-size: 16px;
  color: var(--ea-text-secondary);
  line-height: 1.6;
}


/* ------------------------------------------------------------
   M10. CATALOG / ARCHIVE PAGE
   ------------------------------------------------------------ */
.ea-catalog-hero {
  padding: 80px 0 48px;
  text-align: center;
  background: linear-gradient(180deg, var(--ea-navy-900) 0%, var(--ea-bg) 100%);
  border-bottom: 1px solid var(--ea-border);
}

.ea-catalog-hero__inner {
  max-width: 640px;
  margin: 0 auto;
}

.ea-catalog-hero__title {
  font-family: var(--ea-font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--ea-text-heading);
  margin-bottom: 12px;
}

.ea-catalog-hero__subtitle {
  font-size: 16px;
  color: var(--ea-text-secondary);
  line-height: 1.6;
}

.ea-catalog-filters,
.ea-catalog-form {
  padding: 24px 0;
}

.ea-catalog-filters__form,
.ea-catalog-filters__search {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ea-catalog-filters__input {
  flex: 1;
  min-width: 200px;
  padding: 10px 16px;
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius);
  color: var(--ea-text);
  font-size: 14px;
  font-family: var(--ea-font-ui);
  outline: none;
  transition: border-color var(--ea-ease);
}

.ea-catalog-filters__input:focus {
  border-color: var(--ea-accent);
}

.ea-catalog-filters__input::placeholder {
  color: var(--ea-text-muted);
}

.ea-catalog-filters__selects {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ea-catalog-filters__select {
  padding: 10px 32px 10px 12px;
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius);
  color: var(--ea-text);
  font-size: 14px;
  font-family: var(--ea-font-ui);
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.ea-catalog-grid-section {
  padding: 24px 0 64px;
}

.ea-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}


/* ------------------------------------------------------------
   M11. FEATURED COURSES / HOW-IT-WORKS / CATEGORIES wrappers
   ------------------------------------------------------------ */
.ea-featured-courses,
.ea-how-it-works,
.ea-categories,
.ea-testimonials {
  /* Section wrappers — padding handled by .ea-section */
}

.ea-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}


/* ------------------------------------------------------------
   M12. COURSE CARD ADDITIONS
   ------------------------------------------------------------ */
.ea-course-card__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ea-course-card__cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ea-course-card__instructor-name {
  font-size: 13px;
  color: var(--ea-text-secondary);
}

.ea-course-card__instructor-img {
  width: 24px;
  height: 24px;
  border-radius: var(--ea-radius-full);
  object-fit: cover;
}

.ea-course-card__progress-text {
  font-size: 12px;
  color: var(--ea-text-secondary);
  margin-top: 4px;
}

/* Course card cover color modifiers */
.ea-course-card__cover--gold {
  background: linear-gradient(135deg, #92400e 0%, #f59e0b 100%);
}

.ea-course-card__cover--indigo {
  background: linear-gradient(135deg, #312e81 0%, #6366f1 100%);
}

.ea-course-card__cover--pink {
  background: linear-gradient(135deg, #831843 0%, #ec4899 100%);
}

.ea-course-card__cover--green {
  background: linear-gradient(135deg, #064e3b 0%, #10b981 100%);
}

.ea-course-card__cover--teal {
  background: linear-gradient(135deg, #134e4a 0%, #14b8a6 100%);
}

.ea-course-card__cover--purple {
  background: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 100%);
}


/* ------------------------------------------------------------
   M13. CATEGORY CARD COLOR MODIFIERS
   ------------------------------------------------------------ */
.ea-category-card--gold {
  border-color: rgba(245, 158, 11, 0.3);
}

.ea-category-card--gold .ea-category-card__icon {
  color: var(--ea-gold);
  background: var(--ea-gold-bg);
}

.ea-category-card--indigo {
  border-color: rgba(10, 10, 10, 0.3);
}

.ea-category-card--indigo .ea-category-card__icon {
  color: var(--ea-accent);
  background: var(--ea-accent-bg);
}

.ea-category-card--pink {
  border-color: rgba(10, 10, 10, 0.3);
}

.ea-category-card--pink .ea-category-card__icon {
  color: var(--ea-pink);
  background: rgba(10, 10, 10, 0.15);
}

.ea-category-card--green {
  border-color: rgba(74, 222, 128, 0.3);
}

.ea-category-card--green .ea-category-card__icon {
  color: var(--ea-green);
  background: rgba(74, 222, 128, 0.15);
}


/* ------------------------------------------------------------
   M14. EXPECT ICON COLOR MODIFIERS
   ------------------------------------------------------------ */
.ea-expect__icon--gold {
  color: var(--ea-gold);
  background: var(--ea-gold-bg);
}

.ea-expect__icon--indigo {
  color: var(--ea-accent);
  background: var(--ea-accent-bg);
}

.ea-expect__icon--green {
  color: var(--ea-green);
  background: rgba(74, 222, 128, 0.15);
}


/* ------------------------------------------------------------
   M15. FAQ ADDITIONS
   ------------------------------------------------------------ */
.ea-faq__container {
  max-width: 760px;
  margin: 0 auto;
}

.ea-faq__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  background: none;
  border: none;
  color: var(--ea-text-heading);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--ea-font-ui);
  text-align: left;
  cursor: pointer;
  transition: color var(--ea-ease);
}

.ea-faq__question:hover {
  color: var(--ea-accent-light);
}

.ea-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--ea-text-muted);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), color var(--ea-ease);
}

.ea-faq__item[open] .ea-faq__chevron,
.ea-faq__item.active .ea-faq__chevron {
  transform: rotate(180deg);
  color: var(--ea-accent);
}


/* ------------------------------------------------------------
   M16. CTA SECTION ADDITIONS
   ------------------------------------------------------------ */
.ea-cta-section__inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.ea-cta-section__content {
  margin-bottom: 32px;
}

.ea-cta-section__title {
  font-family: var(--ea-font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--ea-text-heading);
  margin-bottom: 16px;
}


/* ------------------------------------------------------------
   M17. TESTIMONIAL ADDITIONS
   ------------------------------------------------------------ */
.ea-testimonial-card__quote {
  font-size: 15px;
  color: var(--ea-text);
  line-height: 1.7;
  margin-bottom: 20px;
}

.ea-testimonial-card__quote-icon {
  color: var(--ea-accent);
  margin-bottom: 12px;
  opacity: 0.5;
}


/* ------------------------------------------------------------
   M18. BREADCRUMB
   ------------------------------------------------------------ */
.ea-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
}

.ea-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ea-breadcrumb__item--current {
  color: var(--ea-text);
}

.ea-breadcrumb__link {
  color: var(--ea-text-secondary);
  text-decoration: none;
  transition: color var(--ea-ease);
}

.ea-breadcrumb__link:hover {
  color: var(--ea-accent-light);
}

.ea-breadcrumb__current {
  color: var(--ea-text);
}


/* ------------------------------------------------------------
   M19. COURSE HERO ADDITIONS
   ------------------------------------------------------------ */
.ea-course-hero__title {
  font-family: var(--ea-font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--ea-text-heading);
  margin-bottom: 16px;
  line-height: 1.25;
}

.ea-course-hero__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ea-course-hero__learn-box {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-lg);
  padding: 24px;
  margin-top: 24px;
}

.ea-course-hero__learn-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ea-text-heading);
  margin-bottom: 12px;
}

.ea-course-hero__learn-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.ea-course-hero__learn-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--ea-text);
  line-height: 1.5;
}

.ea-course-hero__learn-list li::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234ade80'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E") no-repeat center/contain;
}


/* ------------------------------------------------------------
   M20. COURSE TABS
   ------------------------------------------------------------ */
.ea-course-tabs-section {
  padding: 48px 0;
}

.ea-tabs__tab--active {
  color: var(--ea-accent-light);
  border-bottom-color: var(--ea-accent);
}

.ea-tabs__panel--active {
  display: block;
}

/* Named tab buttons */
.ea-tab-btn-syllabus,
.ea-tab-btn-resources,
.ea-tab-btn-reviews {
  /* Inherit from .ea-tabs__tab */
}

/* Named tab panels */
.ea-tab-syllabus,
.ea-tab-resources,
.ea-tab-reviews {
  display: none;
}

.ea-tab-syllabus.ea-tabs__panel--active,
.ea-tab-resources.ea-tabs__panel--active,
.ea-tab-reviews.ea-tabs__panel--active {
  display: block;
}


/* ------------------------------------------------------------
   M21. ENROLL CARD ADDITIONS
   ------------------------------------------------------------ */
.ea-enroll-card__cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ea-enroll-card__progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.ea-enroll-card__progress-text {
  font-size: 12px;
  color: var(--ea-text-secondary);
  white-space: nowrap;
}


/* ------------------------------------------------------------
   M22. SYLLABUS ADDITIONS
   ------------------------------------------------------------ */
.ea-syllabus__module-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ea-text-secondary);
}

.ea-syllabus__lesson-title {
  font-size: 14px;
  color: var(--ea-text);
}

.ea-syllabus__lesson-dur {
  font-size: 12px;
  color: var(--ea-text-muted);
  white-space: nowrap;
}

.ea-syllabus__lesson-type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ea-text-muted);
}

.ea-syllabus__lesson-check {
  width: 18px;
  height: 18px;
  color: var(--ea-green);
  flex-shrink: 0;
}

.ea-syllabus__lesson-icon {
  width: 16px;
  height: 16px;
  color: var(--ea-text-muted);
  flex-shrink: 0;
}


/* ------------------------------------------------------------
   M23. RESOURCES & REVIEWS
   ------------------------------------------------------------ */
.ea-resources {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ea-resource-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius);
  text-decoration: none;
  transition: border-color var(--ea-ease), background var(--ea-ease);
}

.ea-resource-item:hover {
  border-color: var(--ea-border-hover);
  background: var(--ea-surface-hover);
}

.ea-resource-item__name {
  font-size: 14px;
  color: var(--ea-text);
  font-weight: 500;
}

.ea-resource-item__type {
  font-size: 12px;
  color: var(--ea-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ea-reviews {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ea-review-item {
  padding: 20px;
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-lg);
}

.ea-review-item__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ea-review-item__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--ea-radius-full);
  object-fit: cover;
}

.ea-review-item__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ea-text-heading);
}

.ea-review-item__date {
  font-size: 12px;
  color: var(--ea-text-muted);
}

.ea-review-item__text {
  font-size: 14px;
  color: var(--ea-text);
  line-height: 1.6;
}

.ea-related-courses {
  padding: 48px 0;
}


/* ------------------------------------------------------------
   M24. EXAM PAGE ADDITIONS
   ------------------------------------------------------------ */
.ea-exam-section {
  padding: 48px 0;
}

.ea-exam-hero__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.ea-exam-hero__title {
  font-family: var(--ea-font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--ea-text-heading);
  margin-bottom: 8px;
}

.ea-exam-hero__course {
  font-size: 14px;
  color: var(--ea-text-secondary);
  margin-bottom: 16px;
}

.ea-exam-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ea-text-secondary);
}

.ea-exam-card {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-lg);
  padding: 32px;
  text-align: center;
  transition: border-color var(--ea-ease);
}

.ea-exam-card:hover {
  border-color: var(--ea-border-hover);
}

.ea-exam-card__icon {
  color: var(--ea-accent);
  margin-bottom: 16px;
}

.ea-exam-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ea-text-heading);
  margin-bottom: 8px;
}

.ea-exam-card__desc {
  font-size: 14px;
  color: var(--ea-text-secondary);
  margin-bottom: 20px;
  line-height: 1.6;
}

.ea-exam-card__meta {
  font-size: 13px;
  color: var(--ea-text-muted);
}

.ea-exam-card__content {
  padding: 16px 0;
}

.ea-exam-form,
.ea-quiz-form {
  max-width: 720px;
  margin: 0 auto;
}

.ea-exam-questions {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ea-exam-question--active {
  border-color: var(--ea-accent);
}

.ea-exam-question__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.ea-exam-question__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ea-exam-question__points {
  font-size: 12px;
  color: var(--ea-text-muted);
}

.ea-exam-option__input {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ea-border-hover);
  border-radius: var(--ea-radius-full);
  flex-shrink: 0;
  transition: all var(--ea-ease);
  cursor: pointer;
}

.ea-exam-option__input:checked {
  border-color: var(--ea-accent);
  background: var(--ea-accent);
  box-shadow: inset 0 0 0 3px var(--ea-bg);
}

.ea-exam-option__text {
  font-size: 14px;
  color: var(--ea-text);
}

.ea-exam-option__badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--ea-radius-full);
  font-weight: 600;
}

.ea-exam-progress__bar {
  flex: 1;
  height: 6px;
  background: var(--ea-surface);
  border-radius: var(--ea-radius-full);
  overflow: hidden;
}

.ea-exam-progress-fill {
  height: 100%;
  background: var(--ea-accent);
  border-radius: var(--ea-radius-full);
  transition: width 0.4s ease;
}

.ea-exam-progress__timer--warning {
  color: var(--ea-red);
  animation: pulse 1s ease-in-out infinite;
}

.ea-exam-counter,
.ea-exam-timer,
.ea-timer-display {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ea-exam-submit {
  margin-top: 24px;
  text-align: center;
}

.ea-exam-prev,
.ea-exam-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Exam results */
.ea-exam-results__inner {
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
}

.ea-exam-results__card {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-xl);
  padding: 48px 32px;
}

.ea-exam-results__card--pass {
  border-color: rgba(74, 222, 128, 0.3);
}

.ea-exam-results__card--fail {
  border-color: rgba(239, 68, 68, 0.3);
}

.ea-exam-results__icon {
  margin-bottom: 16px;
}

.ea-exam-results__score {
  margin: 24px 0;
}

.ea-exam-results__score-meta {
  font-size: 13px;
  color: var(--ea-text-muted);
  margin-top: 8px;
}

.ea-exam-results__max-attempts {
  font-size: 13px;
  color: var(--ea-text-muted);
  margin-top: 12px;
}


/* ------------------------------------------------------------
   M25. LESSON VIEWER ADDITIONS
   ------------------------------------------------------------ */
.ea-lesson-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100vh - 56px);
}

.ea-lesson-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.ea-lesson-topbar__pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--ea-text-secondary);
  font-variant-numeric: tabular-nums;
}

.ea-lesson-video {
  margin-bottom: 24px;
}

.ea-lesson-video__player {
  width: 100%;
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #000;
}

.ea-lesson-video__placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ea-text-muted);
}

.ea-lesson-text {
  font-size: 15px;
  color: var(--ea-text);
  line-height: 1.7;
}

.ea-lesson-content__header {
  margin-bottom: 24px;
}

.ea-lesson-content__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ea-text-muted);
  margin-bottom: 8px;
}

.ea-lesson-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--ea-border);
}

.ea-lesson-actions__complete {
  margin-left: auto;
}

.ea-lesson-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Lesson sidebar */
.ea-lesson-sidebar__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ea-text-heading);
  padding: 16px 20px;
  border-bottom: 1px solid var(--ea-border);
}

.ea-lesson-sidebar__modules {
  overflow-y: auto;
  flex: 1;
}

.ea-lesson-sidebar__module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  transition: background var(--ea-ease);
}

.ea-lesson-sidebar__module-header:hover {
  background: var(--ea-surface-hover);
}

.ea-lesson-sidebar__count {
  font-size: 12px;
  color: var(--ea-text-muted);
}

.ea-lesson-sidebar__chevron {
  width: 16px;
  height: 16px;
  color: var(--ea-text-muted);
  transition: transform var(--ea-ease);
  flex-shrink: 0;
}

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

.ea-lesson-sidebar__lesson--active {
  background: var(--ea-accent-bg);
  border-left-color: var(--ea-accent);
}

.ea-lesson-sidebar__lesson--done {
  opacity: 0.7;
}

.ea-lesson-sidebar__lesson-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--ea-radius-full);
  background: var(--ea-text-muted);
  flex-shrink: 0;
}

.ea-lesson-sidebar__lesson--active .ea-lesson-sidebar__lesson-dot {
  background: var(--ea-accent);
}

.ea-lesson-sidebar__lesson--done .ea-lesson-sidebar__lesson-dot {
  background: var(--ea-green);
}

.ea-lesson-sidebar__lesson-dur {
  font-size: 11px;
  color: var(--ea-text-muted);
  white-space: nowrap;
}

/* Lesson quiz */
.ea-lesson-quiz {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-lg);
  padding: 24px;
  margin-top: 24px;
}

.ea-lesson-quiz__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ea-lesson-quiz__question {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ea-lesson-quiz__q-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--ea-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ea-lesson-quiz__q-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ea-text-heading);
}

.ea-lesson-quiz__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ea-lesson-quiz__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius);
  cursor: pointer;
  transition: border-color var(--ea-ease), background var(--ea-ease);
}

.ea-lesson-quiz__option:hover {
  border-color: var(--ea-border-hover);
  background: var(--ea-surface-hover);
}

.ea-lesson-quiz__option-radio {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ea-border-hover);
  border-radius: var(--ea-radius-full);
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--ea-ease);
}

.ea-lesson-quiz__option-radio:checked {
  border-color: var(--ea-accent);
  background: var(--ea-accent);
  box-shadow: inset 0 0 0 3px var(--ea-bg);
}

.ea-lesson-quiz__option-text {
  font-size: 14px;
  color: var(--ea-text);
}


/* ------------------------------------------------------------
   M26. INSTRUCTOR PAGE ADDITIONS
   ------------------------------------------------------------ */
.ea-instructors-grid-section {
  padding: 48px 0;
}

.ea-instructor-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ea-instructor-card__avatar-placeholder {
  width: 64px;
  height: 64px;
  border-radius: var(--ea-radius-full);
  background: var(--ea-accent-bg);
  color: var(--ea-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
}

.ea-instructor-bio {
  font-size: 14px;
  color: var(--ea-text-secondary);
  line-height: 1.6;
}

.ea-instructor-grid-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ea-instructor-grid-card__course-count {
  font-size: 13px;
  color: var(--ea-text-secondary);
}


/* ------------------------------------------------------------
   M27. ABOUT PAGE ADDITIONS
   ------------------------------------------------------------ */
.ea-about-values {
  padding: 48px 0;
}

.ea-about-values__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

.ea-about-values__item {
  text-align: center;
  padding: 24px;
}

.ea-about-values__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--ea-accent);
}

.ea-about-values__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ea-text-heading);
  margin-bottom: 8px;
}

.ea-about-values__desc {
  font-size: 14px;
  color: var(--ea-text-secondary);
  line-height: 1.6;
}

.ea-about-mission__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.ea-about-mission__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ea-about-mission__title {
  font-family: var(--ea-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--ea-text-heading);
}

.ea-about-mission__visual {
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
}

.ea-about-mission__card-icon {
  width: 40px;
  height: 40px;
  color: var(--ea-accent);
  margin-bottom: 12px;
}


/* ------------------------------------------------------------
   M28. 404 PAGE ADDITIONS
   ------------------------------------------------------------ */
.ea-404__inner {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  padding: 80px 20px;
}

.ea-404__title {
  font-family: var(--ea-font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--ea-text-heading);
  margin-bottom: 12px;
}

.ea-404__text {
  font-size: 15px;
  color: var(--ea-text-secondary);
  margin-bottom: 24px;
  line-height: 1.6;
}


/* ------------------------------------------------------------
   M29. PROGRESS BAR ADDITIONS
   ------------------------------------------------------------ */
.ea-progress-bar__fill {
  height: 100%;
  background: var(--ea-accent);
  border-radius: var(--ea-radius-full);
  transition: width 0.4s ease;
}

.ea-progress-bar--sm {
  height: 4px;
}

.ea-progress-bar--lg {
  height: 10px;
}


/* ------------------------------------------------------------
   M30. EMPTY STATE ADDITIONS
   ------------------------------------------------------------ */
.ea-empty-state--sm {
  padding: 32px;
}

.ea-empty-state__icon {
  color: var(--ea-text-muted);
  margin-bottom: 16px;
  opacity: 0.5;
}

.ea-empty-state__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ea-text-heading);
  margin-bottom: 8px;
}

.ea-empty-state__text {
  font-size: 14px;
  color: var(--ea-text-secondary);
  line-height: 1.6;
}


/* ------------------------------------------------------------
   M31. PROSE (long-form content)
   ------------------------------------------------------------ */
.ea-prose {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ea-text);
}

.ea-prose h2 {
  font-family: var(--ea-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ea-text-heading);
  margin: 32px 0 12px;
}

.ea-prose h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ea-text-heading);
  margin: 24px 0 8px;
}

.ea-prose p {
  margin-bottom: 16px;
}

.ea-prose ul,
.ea-prose ol {
  margin-bottom: 16px;
  padding-left: 24px;
}

.ea-prose li {
  margin-bottom: 6px;
}

.ea-prose a {
  color: var(--ea-accent-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ea-prose a:hover {
  color: var(--ea-accent-lighter);
}

.ea-prose img {
  max-width: 100%;
  border-radius: var(--ea-radius-lg);
  margin: 16px 0;
}


/* ------------------------------------------------------------
   M32. FOOTER WIDGET & MISC WRAPPERS
   ------------------------------------------------------------ */
.ea-footer-widget {
  margin-bottom: 24px;
}

.ea-footer-widget__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ea-text-heading);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ea-widget {
  margin-bottom: 24px;
}

.ea-widget__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ea-text-heading);
  margin-bottom: 12px;
}

.ea-meta-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ea-text-secondary);
}


/* ------------------------------------------------------------
   M33. RESPONSIVE ADDITIONS FOR NEW ELEMENTS
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .ea-header__hamburger {
    display: flex;
  }

  .ea-header__nav {
    display: none;
  }

  .ea-header__signup-btn {
    display: none;
  }

  .ea-catalog-hero__title,
  .ea-page-hero__title {
    font-size: 28px;
  }

  .ea-catalog-filters__form {
    flex-direction: column;
  }

  .ea-catalog-filters__selects {
    width: 100%;
  }

  .ea-catalog-filters__select {
    width: 100%;
  }

  .ea-lesson-layout {
    grid-template-columns: 1fr;
  }

  .ea-lesson-sidebar {
    display: none;
  }

  .ea-about-mission__grid {
    grid-template-columns: 1fr;
  }

  .ea-course-hero__title {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .ea-catalog-hero__title,
  .ea-page-hero__title {
    font-size: 22px;
  }

  .ea-exam-hero__title {
    font-size: 24px;
  }

  .ea-lesson-quiz {
    padding: 16px;
  }
}


/* ------------------------------------------------------------
   M34. REMAINING MINOR SELECTORS
   ------------------------------------------------------------ */
.ea-stats__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--ea-accent-light);
  flex-shrink: 0;
}

/* Dynamic suffix classes — base handled by the prefix already */
.ea-academy,
.ea-authenticated,
.ea-google-fonts,
.ea-json,
.ea-responsive {
  /* Namespace / utility wrappers — no visual styles needed */
}



/* ════════════════════════════════════════════════════════════════════════
   EGW DIASPORA SKIN  ·  light-first re-theme (appended; wins in light mode)
   Re-skins Ephesus Academy onto the EGW Diaspora design system:
   Jost + Barlow, navy/gold/neutral, elevation shadows, minimal radius.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────────────── */
body { background: var(--ea-bg); color: var(--ea-text); font-family: var(--ea-font-ui); font-size: 16px; }
h1, h2 { font-family: var(--ea-font-display); letter-spacing: -0.01em; }
h1 { font-weight: 600; }
h2 { font-weight: 600; }
a { color: var(--ea-accent); }
a:hover { color: var(--ea-accent-dark); }
::selection { background: var(--ea-navy-100); color: var(--ea-navy-900); }

/* ── Buttons — diaspora (uppercase, minimal radius, elevation) ────────── */
.ea-btn {
  font-family: var(--ea-font-ui);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  border-radius: var(--ea-radius-sm);
  border: 1px solid transparent;
  transition: all var(--ea-ease);
}
.ea-btn--gold {
  background: var(--ea-gold); color: var(--ea-cta-ink); border-color: var(--ea-gold);
  box-shadow: 0 4px 14px var(--ea-cta-glow), 0 2px 4px rgba(0,0,0,.06);
}
.ea-btn--gold:hover { background: var(--ea-gold-hover); border-color: var(--ea-gold-hover); color: var(--ea-cta-ink-hover); transform: translateY(-2px); box-shadow: 0 8px 22px var(--ea-cta-glow-strong); }
.ea-btn--accent { background: var(--ea-accent); color: var(--ea-cta-ink); border-color: var(--ea-accent); box-shadow: 0 4px 14px var(--ea-accent-glow), 0 2px 4px rgba(0,0,0,.06); }
.ea-btn--accent:hover { background: var(--ea-accent-dark); border-color: var(--ea-accent-dark); color: var(--ea-cta-ink); transform: translateY(-2px); box-shadow: 0 8px 22px var(--ea-accent-glow); }
.ea-btn--outline { background: transparent; color: var(--ea-text); border-color: var(--ea-neutral-300); box-shadow: var(--ea-shadow-sm); }
.ea-btn--outline:hover { background: var(--ea-text-heading); color: var(--ea-bg); border-color: var(--ea-text-heading); transform: translateY(-2px); }
.ea-btn--outline-gold { background: transparent; color: var(--ea-gold-700); border-color: var(--ea-gold); }
.ea-btn--outline-gold:hover { background: var(--ea-gold); color: var(--ea-cta-ink); }
.ea-btn--green, .ea-btn--completed { background: var(--ea-green); color: #fff; border-color: var(--ea-green); }
.ea-btn--green:hover { background: #0c5a46; border-color: #0c5a46; color: #fff; transform: translateY(-2px); }

/* ── Announcement bar ─────────────────────────────────────────────────── */
.ea-announcement-bar { background: var(--ea-gold-50); border-bottom: 1px solid var(--ea-gold-100); color: var(--ea-neutral-700); }
.ea-announcement-bar__badge { background: var(--ea-gold); color: #3a2a02; }
.ea-announcement-bar__link { color: var(--ea-gold-700); }
.ea-announcement-bar__link:hover { color: var(--ea-gold-600); }

/* ── Header / nav ─────────────────────────────────────────────────────── */
.ea-header { background: var(--ea-nav-bg); border-bottom: 1px solid var(--ea-border); }
.ea-header--sticky { background: rgba(255,255,255,.96); box-shadow: var(--ea-shadow-sm); }
.ea-header__logo-name { color: var(--ea-text-heading); font-family: var(--ea-font-display); }
.ea-header__logo-icon { color: var(--ea-accent); }
.ea-header__logo-tagline { color: var(--ea-gold-700); font-weight: 700; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }
.ea-header__nav-link { color: var(--ea-neutral-700); }
.ea-header__nav-link:hover, .ea-header__nav-link--active { color: var(--ea-accent); }
.ea-header__action-btn { color: var(--ea-text-secondary); border: 1px solid var(--ea-border); background: transparent; }
.ea-header__action-btn:hover { color: var(--ea-accent); border-color: var(--ea-border-hover); }
.ea-header__avatar-placeholder { background: var(--ea-accent); color: #fff; }
.ea-header__dropdown { background: #fff; border: 1px solid var(--ea-border); box-shadow: var(--ea-shadow-lg); }
.ea-header__dropdown-name { color: var(--ea-text-heading); }
.ea-header__dropdown-email { color: var(--ea-text-muted); }
.ea-header__dropdown-link { color: var(--ea-text-secondary); }
.ea-header__dropdown-link:hover { background: var(--ea-bg-alt); color: var(--ea-accent); }
.ea-header__dropdown-link--danger { color: #b3261e; }
.ea-header__dropdown-link--danger:hover { background: #fdecea; color: #b3261e; }
.ea-header__dropdown-divider { background: var(--ea-border); }
.ea-header__hamburger { color: var(--ea-text); }

/* ── Mobile nav (light panel) ─────────────────────────────────────────── */
.ea-mobile-nav { background: #fff; border-left: 1px solid var(--ea-border); box-shadow: var(--ea-shadow-xl); }
.ea-mobile-nav__link { color: var(--ea-text); }
.ea-mobile-nav__link:hover, .ea-mobile-nav__link--active { color: var(--ea-accent); }
.ea-mobile-nav__link--danger { color: #b3261e; }
.ea-mobile-nav__divider { background: var(--ea-border); }
.ea-search-overlay { background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
.ea-search-overlay__form { border-bottom: 2px solid var(--ea-accent); }
.ea-search-overlay__input { color: var(--ea-text-heading); }

/* ── Hero (home) — light, two-column ──────────────────────────────────── */
.ea-hero { background: linear-gradient(180deg, var(--ea-bg-alt) 0%, var(--ea-bg) 100%); color: var(--ea-text); text-align: center; }
.ea-hero__title { color: var(--ea-text-heading); }
.ea-hero__title-accent { color: var(--ea-accent); }
.ea-hero__subtitle { color: var(--ea-text-secondary); }
.ea-hero__badge { background: var(--ea-navy-50); border: 1px solid var(--ea-navy-100); color: var(--ea-accent); }
.ea-hero--home { text-align: left; }
.ea-hero--home .ea-hero__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.ea-hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ea-accent); background: var(--ea-navy-50); border: 1px solid var(--ea-navy-100); border-radius: var(--ea-radius-full); padding: 6px 13px; margin-bottom: 18px; }
.ea-hero__free { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ea-gold-700); margin: 4px 0 20px; }
.ea-hero__media { position: relative; border-radius: var(--ea-radius-lg); overflow: hidden; aspect-ratio: 16/10; background: linear-gradient(135deg, var(--ea-navy-800), var(--ea-navy-600)); box-shadow: var(--ea-shadow-xl); }
.ea-hero__media img, .ea-hero__media iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.ea-hero__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ea-accent); background: transparent; border: 0; cursor: pointer; }
.ea-hero__play span { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; box-shadow: var(--ea-shadow-lg); transition: transform var(--ea-ease); }
.ea-hero__play:hover span { transform: scale(1.06); }
.ea-hero__vcap { position: absolute; left: 16px; bottom: 13px; color: #fff; font-size: 13px; font-weight: 500; text-shadow: 0 1px 6px rgba(0,0,0,.5); }

/* ── Stats strip ──────────────────────────────────────────────────────── */
.ea-stats { background: var(--ea-bg-alt); border-top: 1px solid var(--ea-border); border-bottom: 1px solid var(--ea-border); }
.ea-stats__value { color: var(--ea-accent); font-family: var(--ea-font-display); font-weight: 700; }
.ea-stats__label { color: var(--ea-text-muted); }
.ea-stats__icon { color: var(--ea-gold-600); }

/* ── Sections ─────────────────────────────────────────────────────────── */
.ea-section__title { font-family: var(--ea-font-display); color: var(--ea-text-heading); }
.ea-section__subtitle { color: var(--ea-text-muted); }
.ea-featured-courses, .ea-categories, .ea-testimonials { background: var(--ea-bg); }
.ea-expect { background: var(--ea-bg-alt); }

/* ── Course cards ─────────────────────────────────────────────────────── */
.ea-course-card { background: var(--ea-card-bg); border: 1px solid var(--ea-border); box-shadow: var(--ea-shadow); border-radius: var(--ea-radius); }
.ea-course-card:hover { box-shadow: var(--ea-shadow-lg); transform: translateY(-4px); }
.ea-course-card__title, .ea-course-card__title a { color: var(--ea-text-heading); }
.ea-course-card__title a:hover { color: var(--ea-accent); }
.ea-course-card__meta-item { color: var(--ea-text-muted); }
.ea-course-card__instructor-name { color: var(--ea-text-secondary); }
.ea-course-card__instructor-avatar { background: var(--ea-accent); color: #fff; }
.ea-course-card__footer { border-top: 1px solid var(--ea-border); }

/* Category cover gradients (harmonised to diaspora palette) */
.ea-course-card__cover--indigo, .ea-enroll-card__cover--indigo { background: linear-gradient(135deg, #1B3A5C, #2A4A74); }
.ea-course-card__cover--gold,   .ea-enroll-card__cover--gold   { background: linear-gradient(135deg, #A86608, #D4850A); }
.ea-course-card__cover--pink,   .ea-enroll-card__cover--pink   { background: linear-gradient(135deg, #7A2A44, #D4537E); }
.ea-course-card__cover--green,  .ea-enroll-card__cover--green  { background: linear-gradient(135deg, #0C5A46, #1D9E75); }
.ea-course-card__cover--teal    { background: linear-gradient(135deg, #0F5A56, #1AA6A0); }
.ea-course-card__cover--purple  { background: linear-gradient(135deg, #3C3489, #7F77DD); }

/* Badges — tinted on light surfaces, frosted on dark covers */
.ea-badge { background: var(--ea-navy-50); color: var(--ea-navy-700); border-radius: var(--ea-radius-sm); font-weight: 700; letter-spacing: .03em; }
.ea-badge--indigo { background: var(--ea-navy-50); color: var(--ea-navy-700); }
.ea-badge--gold   { background: var(--ea-gold-100); color: var(--ea-gold-700); }
.ea-badge--pink   { background: var(--ea-bg-muted); color: var(--ea-text-secondary); }
.ea-badge--green  { background: var(--ea-bg-muted); color: var(--ea-text-secondary); }
.ea-badge--level  { background: var(--ea-neutral-100); color: var(--ea-neutral-600); }
.ea-course-card__cover .ea-badge, .ea-enroll-card__cover .ea-badge {
  background: rgba(255,255,255,.20); color: #fff; border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* Progress bar */
.ea-progress-bar { background: var(--ea-neutral-200); }
.ea-progress-bar__fill { background: linear-gradient(90deg, var(--ea-accent), var(--ea-accent-light)); }

/* ── Featured split (spotlight + minis) ───────────────────────────────── */
.ea-featured-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.ea-spotlight { display: flex; flex-direction: column; background: var(--ea-card-bg); border: 1px solid var(--ea-border); border-radius: var(--ea-radius); overflow: hidden; box-shadow: var(--ea-shadow); transition: all var(--ea-ease); }
.ea-spotlight:hover { box-shadow: var(--ea-shadow-lg); transform: translateY(-3px); }
.ea-spotlight__cover { min-height: 150px; position: relative; display: flex; align-items: flex-start; gap: 7px; padding: 14px; }
.ea-spotlight__cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ea-spotlight__badges { position: relative; z-index: 2; display: flex; gap: 7px; }
.ea-spotlight__body { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; }
.ea-spotlight__title { font-family: var(--ea-font-display); font-weight: 700; font-size: 22px; color: var(--ea-text-heading); margin-bottom: 7px; }
.ea-spotlight__title a { color: inherit; }
.ea-spotlight__desc { font-size: 14px; color: var(--ea-text-secondary); margin-bottom: 14px; }
.ea-spotlight__meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--ea-text-muted); margin-bottom: 16px; }
.ea-spotlight__meta span { display: inline-flex; align-items: center; gap: 5px; }
.ea-spotlight__foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--ea-border); padding-top: 14px; margin-top: auto; }
.ea-new-badge { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--ea-cta-ink); background: var(--ea-gold); border-radius: var(--ea-radius-sm); padding: 3px 8px; }
.ea-mini-list { display: flex; flex-direction: column; gap: 14px; }
.ea-mini-card { display: flex; gap: 13px; background: var(--ea-card-bg); border: 1px solid var(--ea-border); border-radius: var(--ea-radius); padding: 12px; box-shadow: var(--ea-shadow-sm); transition: all var(--ea-ease); }
.ea-mini-card:hover { box-shadow: var(--ea-shadow); transform: translateY(-2px); }
.ea-mini-card__cover { width: 62px; height: 62px; border-radius: var(--ea-radius); flex-shrink: 0; background: linear-gradient(135deg, var(--ea-navy-700), var(--ea-navy-800)); }
.ea-mini-card__tag { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: var(--ea-radius-sm); padding: 2px 7px; margin-bottom: 5px; }
.ea-mini-card__title { font-family: var(--ea-font-display); font-weight: 600; font-size: 14.5px; color: var(--ea-text-heading); margin-bottom: 3px; line-height: 1.25; }
.ea-mini-card__title a { color: inherit; }
.ea-mini-card__title a:hover { color: var(--ea-accent); }
.ea-mini-card__meta { font-size: 11.5px; color: var(--ea-text-muted); }

/* ── Expect / value props ─────────────────────────────────────────────── */
.ea-expect__card { background: var(--ea-card-bg); border: 1px solid var(--ea-border); border-radius: var(--ea-radius); box-shadow: var(--ea-shadow-sm); }
.ea-expect__title { font-family: var(--ea-font-display); color: var(--ea-text-heading); }
.ea-expect__desc { color: var(--ea-text-secondary); }
.ea-expect__icon { border-radius: var(--ea-radius-lg); }
.ea-expect__icon--indigo { background: var(--ea-navy-50); color: var(--ea-accent); }
.ea-expect__icon--gold   { background: var(--ea-gold-100); color: var(--ea-gold-700); }
.ea-expect__icon--green  { background: var(--ea-bg-muted); color: var(--ea-text-heading); }

/* ── Category cards ───────────────────────────────────────────────────── */
.ea-category-card { background: var(--ea-card-bg); border: 1px solid var(--ea-border); box-shadow: var(--ea-shadow-sm); }
.ea-category-card:hover { box-shadow: var(--ea-shadow); transform: translateY(-4px); }
.ea-category-card__title { font-family: var(--ea-font-display); color: var(--ea-text-heading); }
.ea-category-card__count { color: var(--ea-text-muted); }
.ea-category-card--indigo .ea-category-card__icon { background: var(--ea-navy-50); color: var(--ea-accent); }
.ea-category-card--gold .ea-category-card__icon   { background: var(--ea-gold-100); color: var(--ea-gold-700); }
.ea-category-card--pink .ea-category-card__icon   { background: var(--ea-bg-muted); color: var(--ea-text-heading); }
.ea-category-card--green .ea-category-card__icon  { background: var(--ea-bg-muted); color: var(--ea-text-heading); }

/* ── Testimonials ─────────────────────────────────────────────────────── */
.ea-testimonial-card { background: var(--ea-card-bg); border: 1px solid var(--ea-border); box-shadow: var(--ea-shadow); }
.ea-testimonial-card__quote-icon { color: var(--ea-gold); }
.ea-testimonial-card__text { color: var(--ea-text); }
.ea-testimonial-card__name { color: var(--ea-text-heading); }
.ea-testimonial-card__course { color: var(--ea-text-muted); }
.ea-testimonial-card__avatar { background: var(--ea-accent); color: #fff; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.ea-faq__item { background: var(--ea-card-bg); border: 1px solid var(--ea-border); box-shadow: var(--ea-shadow-sm); }
.ea-faq__question { color: var(--ea-text-heading); }
.ea-faq__chevron { color: var(--ea-text-muted); }
.ea-faq__answer p { color: var(--ea-text-secondary); }

/* ── Give band (freely given) ─────────────────────────────────────────── */
.ea-give-band { background: linear-gradient(120deg, var(--ea-navy-800), var(--ea-navy-700)); border-radius: var(--ea-radius-lg); padding: 32px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; box-shadow: var(--ea-shadow-lg); }
.ea-give-band__title { font-family: var(--ea-font-display); font-weight: 700; font-size: 24px; color: #fff; margin-bottom: 6px; }
.ea-give-band__text { font-size: 14px; color: var(--ea-navy-100); max-width: 60ch; }
.ea-give-band__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── CTA band (navy) ──────────────────────────────────────────────────── */
.ea-cta-section { background: linear-gradient(135deg, var(--ea-navy-800), var(--ea-navy-700)); color: #fff; }
.ea-cta-section__title { color: #fff; }
.ea-cta-section__text { color: var(--ea-navy-100); }

/* ── Page / catalog / course heroes (light) ───────────────────────────── */
.ea-page-hero, .ea-catalog-hero { background: linear-gradient(180deg, var(--ea-bg-alt) 0%, var(--ea-bg) 100%); border-bottom: 1px solid var(--ea-border); }
.ea-page-hero__title, .ea-catalog-hero__title { font-family: var(--ea-font-display); color: var(--ea-text-heading); }
.ea-page-hero__subtitle, .ea-catalog-hero__subtitle { color: var(--ea-text-secondary); }
.ea-course-hero { background: linear-gradient(180deg, var(--ea-bg-alt) 0%, var(--ea-bg) 100%); }
.ea-course-hero__title { font-family: var(--ea-font-display); color: var(--ea-text-heading); }
.ea-course-hero__desc { color: var(--ea-text-secondary); }
.ea-course-hero__meta-item { color: var(--ea-text-muted); }
.ea-course-hero__learn-box { background: var(--ea-card-bg); border: 1px solid var(--ea-border); box-shadow: var(--ea-shadow-sm); }
.ea-course-hero__learn-title { color: var(--ea-text-heading); font-family: var(--ea-font-display); }
.ea-course-hero__learn-list li { color: var(--ea-text-secondary); }
.ea-course-hero__learn-list svg { color: var(--ea-green); }

/* ── Catalog filters ──────────────────────────────────────────────────── */
.ea-catalog-filters { background: var(--ea-bg-alt); border-bottom: 1px solid var(--ea-border); }
.ea-catalog-filters__search, .ea-catalog-filters__select { background: var(--ea-card-bg); border: 1px solid var(--ea-border); color: var(--ea-text); }
.ea-catalog-filters__input { color: var(--ea-text); }
.ea-catalog-filters__search svg { color: var(--ea-text-muted); }

/* ── Enroll card ──────────────────────────────────────────────────────── */
.ea-enroll-card { background: var(--ea-card-bg); border: 1px solid var(--ea-border); box-shadow: var(--ea-shadow-lg); }
.ea-enroll-card__price { color: var(--ea-text-heading); }
.ea-enroll-card__details li { color: var(--ea-text-secondary); border-top: 1px solid var(--ea-border); }
.ea-enroll-card__details svg { color: var(--ea-gold-600); }
.ea-enroll-card__progress-text { color: var(--ea-text-muted); }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.ea-tabs { border-bottom: 1px solid var(--ea-border); }
.ea-tabs__tab { color: var(--ea-text-muted); }
.ea-tabs__tab--active { color: var(--ea-accent); border-bottom-color: var(--ea-accent); }
.ea-tabs__tab:hover { color: var(--ea-text); }

/* ── Syllabus ─────────────────────────────────────────────────────────── */
.ea-syllabus__module { background: var(--ea-card-bg); border: 1px solid var(--ea-border); box-shadow: var(--ea-shadow-sm); }
.ea-syllabus__module-header:hover { background: var(--ea-bg-alt); }
.ea-syllabus__module-num { color: var(--ea-accent); }
.ea-syllabus__module-title { color: var(--ea-text-heading); }
.ea-syllabus__module-meta { color: var(--ea-text-muted); }
.ea-syllabus__lesson { border-top: 1px solid var(--ea-border); color: var(--ea-text-secondary); }
.ea-syllabus__lesson:hover { background: var(--ea-bg-alt); }
.ea-syllabus__lesson-title { color: var(--ea-text); }
.ea-syllabus__lesson-type, .ea-syllabus__lesson-dur { color: var(--ea-text-muted); }
.ea-syllabus__lesson-icon { background: var(--ea-navy-50); color: var(--ea-accent); }
.ea-exam-card { background: var(--ea-gold-50); border: 1px solid var(--ea-gold-100); }
.ea-exam-card__icon { background: var(--ea-gold-100); color: var(--ea-gold-700); }
.ea-exam-card__title { color: var(--ea-text-heading); }
.ea-exam-card__desc, .ea-exam-card__meta { color: var(--ea-text-secondary); }

/* ── Instructor cards ─────────────────────────────────────────────────── */
.ea-instructor-card, .ea-instructor-grid-card { background: var(--ea-card-bg); border: 1px solid var(--ea-border); box-shadow: var(--ea-shadow-sm); }
.ea-instructor-grid-card:hover { box-shadow: var(--ea-shadow); transform: translateY(-4px); }
.ea-instructor-card__name, .ea-instructor-grid-card__name { font-family: var(--ea-font-display); color: var(--ea-text-heading); }
.ea-instructor-card__title, .ea-instructor-grid-card__title { color: var(--ea-gold-700); }
.ea-instructor-card__bio, .ea-instructor-grid-card__bio { color: var(--ea-text-secondary); }
.ea-instructor-card__avatar-placeholder, .ea-instructor-grid-card__avatar-placeholder { background: var(--ea-accent); color: #fff; }
.ea-instructor-grid-card__course-count { color: var(--ea-text-muted); }

/* ── Welcome letter (about) ───────────────────────────────────────────── */
.ea-welcome-letter { background: var(--ea-card-bg); border: 1px solid var(--ea-border); border-radius: var(--ea-radius-lg); box-shadow: var(--ea-shadow); padding: 36px; display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: start; }
.ea-welcome-letter__portrait { width: 100%; border-radius: var(--ea-radius-lg); overflow: hidden; box-shadow: var(--ea-shadow-sm); background: var(--ea-navy-50); }
.ea-welcome-letter__portrait img { width: 100%; display: block; }
.ea-welcome-letter__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ea-accent); margin-bottom: 8px; }
.ea-welcome-letter__title { font-family: var(--ea-font-display); font-size: 26px; font-weight: 700; color: var(--ea-text-heading); margin-bottom: 16px; }
.ea-welcome-letter__body p { color: var(--ea-text-secondary); margin-bottom: 14px; line-height: 1.7; }
.ea-welcome-letter__sign { font-family: var(--ea-font-display); font-weight: 600; color: var(--ea-text-heading); margin-top: 8px; }
.ea-welcome-letter__role { font-size: 13px; color: var(--ea-gold-700); }

/* ── About mission / values ───────────────────────────────────────────── */
.ea-about-mission__label { color: var(--ea-gold-700); }
.ea-about-mission__title { font-family: var(--ea-font-display); color: var(--ea-text-heading); }
.ea-about-mission__text { color: var(--ea-text-secondary); }
.ea-about-mission__card { background: var(--ea-navy-800); color: #fff; }
.ea-about-mission__card-icon { color: var(--ea-gold); }
.ea-about-mission__verse p { color: #fff; }
.ea-about-mission__verse cite { color: var(--ea-navy-100); }
.ea-about-values__item { background: var(--ea-card-bg); border: 1px solid var(--ea-border); box-shadow: var(--ea-shadow-sm); }
.ea-about-values__icon { background: var(--ea-navy-50); color: var(--ea-accent); }
.ea-about-values__title { font-family: var(--ea-font-display); color: var(--ea-text-heading); }
.ea-about-values__desc { color: var(--ea-text-secondary); }

/* ── Breadcrumb ───────────────────────────────────────────────────────── */
.ea-breadcrumb { background: var(--ea-bg-alt); border-bottom: 1px solid var(--ea-border); }
.ea-breadcrumb__item a, .ea-breadcrumb__link { color: var(--ea-text-muted); }
.ea-breadcrumb__item a:hover, .ea-breadcrumb__link:hover { color: var(--ea-accent); }
.ea-breadcrumb__item--current, .ea-breadcrumb__current { color: var(--ea-text); }
.ea-breadcrumb__sep { color: var(--ea-neutral-300); }

/* ── Lesson viewer (light) ────────────────────────────────────────────── */
.ea-lesson-topbar { background: var(--ea-card-bg); border-bottom: 1px solid var(--ea-border); }
.ea-lesson-topbar__back { color: var(--ea-text-secondary); }
.ea-lesson-topbar__back:hover { color: var(--ea-accent); }
.ea-lesson-topbar__course { color: var(--ea-text-heading); }
.ea-lesson-topbar__pct { color: var(--ea-text-muted); }
.ea-lesson-layout { background: var(--ea-bg); }
.ea-lesson-content__title { font-family: var(--ea-font-display); color: var(--ea-text-heading); }
.ea-lesson-content__type { background: var(--ea-navy-50); color: var(--ea-accent); }
.ea-lesson-video__placeholder { background: var(--ea-bg-alt); border: 1px solid var(--ea-border); color: var(--ea-text-muted); }
.ea-lesson-text { color: var(--ea-text); }
.ea-lesson-actions { border-top: 1px solid var(--ea-border); }
.ea-lesson-actions__done { color: var(--ea-green); }
.ea-lesson-sidebar { background: var(--ea-bg-alt); border-left: 1px solid var(--ea-border); }
.ea-lesson-sidebar__title { color: var(--ea-text-heading); font-family: var(--ea-font-display); }
.ea-lesson-sidebar__count { color: var(--ea-text-muted); }
.ea-lesson-sidebar__module { border-bottom: 1px solid var(--ea-border); }
.ea-lesson-sidebar__module-title { color: var(--ea-text-heading); }
.ea-lesson-sidebar__lesson a { color: var(--ea-text-secondary); }
.ea-lesson-sidebar__lesson:hover { background: var(--ea-card-bg); }
.ea-lesson-sidebar__lesson--active { background: var(--ea-navy-50); }
.ea-lesson-sidebar__lesson--active a { color: var(--ea-accent); }
.ea-lesson-sidebar__lesson--done .ea-lesson-sidebar__lesson-dot { background: var(--ea-green); color: #fff; border-color: var(--ea-green); }
.ea-lesson-sidebar__lesson-dot { border: 2px solid var(--ea-neutral-300); }
.ea-lesson-sidebar__lesson-dur { color: var(--ea-text-muted); }
.ea-lesson-quiz { background: var(--ea-card-bg); border: 1px solid var(--ea-border); }
.ea-lesson-quiz__q-title { color: var(--ea-text-heading); }
.ea-lesson-quiz__option { border: 1px solid var(--ea-border); color: var(--ea-text); }
.ea-lesson-quiz__option:hover { border-color: var(--ea-accent); background: var(--ea-navy-50); }

/* ── Exam ─────────────────────────────────────────────────────────────── */
.ea-exam-hero { background: linear-gradient(180deg, var(--ea-gold-50), transparent); border-bottom: 1px solid var(--ea-border); }
.ea-exam-hero__title { font-family: var(--ea-font-display); color: var(--ea-text-heading); }
.ea-exam-hero__course { color: var(--ea-text-muted); }
.ea-exam-hero__meta-item { color: var(--ea-text-secondary); }
.ea-exam-progress { background: var(--ea-card-bg); border-bottom: 1px solid var(--ea-border); }
.ea-exam-progress__counter { color: var(--ea-text-muted); }
.ea-exam-progress__timer { color: var(--ea-text); }
.ea-exam-progress__timer--warning { color: #b3261e; }
.ea-exam-question { background: var(--ea-card-bg); border: 1px solid var(--ea-border); box-shadow: var(--ea-shadow-sm); }
.ea-exam-question__num { color: var(--ea-accent); }
.ea-exam-question__points { color: var(--ea-text-muted); }
.ea-exam-question__text { color: var(--ea-text-heading); font-family: var(--ea-font-display); }
.ea-exam-option { border: 1px solid var(--ea-border); color: var(--ea-text); }
.ea-exam-option:hover { border-color: var(--ea-accent); background: var(--ea-navy-50); }
.ea-exam-option__badge { background: var(--ea-neutral-100); color: var(--ea-text-secondary); }
.ea-exam-option__input:checked ~ .ea-exam-option__badge { background: var(--ea-accent); color: #fff; }
.ea-exam-results__card { background: var(--ea-card-bg); border: 1px solid var(--ea-border); box-shadow: var(--ea-shadow-lg); }
.ea-exam-results__card--pass { border-top: 4px solid var(--ea-green); }
.ea-exam-results__card--fail { border-top: 4px solid #b3261e; }
.ea-exam-results__title { font-family: var(--ea-font-display); color: var(--ea-text-heading); }
.ea-exam-results__subtitle { color: var(--ea-text-secondary); }
.ea-exam-results__card--pass .ea-exam-results__icon { color: var(--ea-green); }
.ea-exam-results__card--fail .ea-exam-results__icon { color: #b3261e; }
.ea-exam-results__score-circle { background: var(--ea-navy-50); color: var(--ea-accent); }
.ea-exam-results__score-meta { color: var(--ea-text-muted); }

/* ── Pagination / empty state / 404 ───────────────────────────────────── */
.ea-pagination a, .ea-pagination .page-numbers { color: var(--ea-text-secondary); border: 1px solid var(--ea-border); background: var(--ea-card-bg); }
.ea-pagination a:hover, .ea-pagination .current { background: var(--ea-accent); color: #fff; border-color: var(--ea-accent); }
.ea-empty-state__icon { color: var(--ea-neutral-300); }
.ea-empty-state__title { font-family: var(--ea-font-display); color: var(--ea-text-heading); }
.ea-empty-state__text, .ea-empty-state p { color: var(--ea-text-muted); }
.ea-404__icon { color: var(--ea-neutral-300); }
.ea-404__title { font-family: var(--ea-font-display); color: var(--ea-text-heading); }
.ea-404__text { color: var(--ea-text-secondary); }

/* ── Footer (dark, diaspora) ──────────────────────────────────────────── */
.ea-footer { background: #0A0A0A; border-top: none; color: #9E9E9E; }
.ea-footer__logo { color: #fff; }
.ea-footer__logo span { color: #fff; }
.ea-footer__desc { color: #9E9E9E; }
.ea-footer__heading { color: #fff; font-family: var(--ea-font-display); }
.ea-footer__link { color: #9E9E9E; }
.ea-footer__link:hover { color: #fff; }
.ea-footer__social-link { color: #fff; border: 1px solid rgba(255,255,255,.16); }
.ea-footer__social-link:hover { background: var(--ea-accent); border-color: var(--ea-accent); }
.ea-footer__bottom { border-top: 1px solid rgba(255,255,255,.10); }
.ea-footer__copyright, .ea-footer__legal-link { color: #707070; }
.ea-footer__legal-link:hover { color: #fff; }

/* ── Toast (branded) ──────────────────────────────────────────────────── */
.ea-toast { background: var(--ea-card-bg); border: 1px solid var(--ea-border); box-shadow: var(--ea-shadow-lg); color: var(--ea-text); }
.ea-toast--success { border-left: 4px solid var(--ea-green); }
.ea-toast--error { border-left: 4px solid #b3261e; }

/* ── Responsive: collapse new grids ───────────────────────────────────── */
@media (max-width: 900px) {
  .ea-hero--home .ea-hero__inner { grid-template-columns: 1fr; }
  .ea-hero__media { max-width: 520px; }
  .ea-featured-split { grid-template-columns: 1fr; }
  .ea-welcome-letter { grid-template-columns: 1fr; }
  .ea-welcome-letter__portrait { max-width: 220px; }
}

/* outline-light — for use on dark CTA / give bands */
.ea-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.ea-btn--outline-light:hover { background: #fff; color: var(--ea-navy-900); border-color: #fff; transform: translateY(-2px); }
/* Spotlight cover image legibility overlay */
.ea-spotlight__cover { background: linear-gradient(135deg, var(--ea-navy-700), var(--ea-navy-800)); }
.ea-spotlight__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.28)); pointer-events: none; }
.ea-spotlight__cover .ea-spotlight__badges { position: relative; z-index: 2; }


/* ════════════════════════════════════════════════════════════════════════
   PURE BLACK & WHITE — light-mode monochrome overrides (v2.5.0)
   Dark mode keeps the navy/gold identity; these only touch light mode.
   ════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .ea-course-card__cover--indigo, html[data-theme="light"] .ea-enroll-card__cover--indigo,
html[data-theme="light"] .ea-course-card__cover--gold,   html[data-theme="light"] .ea-enroll-card__cover--gold,
html[data-theme="light"] .ea-course-card__cover--pink,   html[data-theme="light"] .ea-enroll-card__cover--pink,
html[data-theme="light"] .ea-course-card__cover--green,  html[data-theme="light"] .ea-enroll-card__cover--green,
html[data-theme="light"] .ea-course-card__cover--teal,
html[data-theme="light"] .ea-course-card__cover--purple { background: linear-gradient(135deg, var(--ea-neutral-700), var(--ea-neutral-900)); }
html[data-theme="light"] .ea-mini-card__tag { background: var(--ea-bg-muted) !important; color: var(--ea-text-secondary) !important; }
@media (prefers-color-scheme: light){
  html:not([data-theme="dark"]) .ea-course-card__cover--indigo, html:not([data-theme="dark"]) .ea-enroll-card__cover--indigo,
  html:not([data-theme="dark"]) .ea-course-card__cover--gold,   html:not([data-theme="dark"]) .ea-enroll-card__cover--gold,
  html:not([data-theme="dark"]) .ea-course-card__cover--pink,   html:not([data-theme="dark"]) .ea-enroll-card__cover--pink,
  html:not([data-theme="dark"]) .ea-course-card__cover--green,  html:not([data-theme="dark"]) .ea-enroll-card__cover--green,
  html:not([data-theme="dark"]) .ea-course-card__cover--teal,
  html:not([data-theme="dark"]) .ea-course-card__cover--purple { background: linear-gradient(135deg, var(--ea-neutral-700), var(--ea-neutral-900)); }
  html:not([data-theme="dark"]) .ea-mini-card__tag { background: var(--ea-bg-muted) !important; color: var(--ea-text-secondary) !important; }
}


/* ════════════════════════════════════════════════════════════════════════
   v2.8.0 — LANDING LAYOUT SYSTEM  ·  positioning · lining · grouping
   Scoped to the front page (body.home). One shared edge, even section
   rhythm, grouped stacked headers, equal-height card rows.
   ════════════════════════════════════════════════════════════════════════ */
/* 1 — even vertical rhythm for every landing section */
.home .ea-featured-courses,
.home .ea-expect,
.home .ea-categories,
.home .ea-testimonials,
.home .ea-give,
.home .ea-faq { padding: 64px 0; }

/* 2 — section header = grouped title-block (left) + optional action (right) */
.home .ea-section__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; flex-wrap: wrap; text-align: left; }
.home .ea-section__head-text { min-width: 0; max-width: 640px; }
.home .ea-section__header h2,
.home .ea-section__title { font-family: var(--ea-font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.15; color: var(--ea-text-heading); margin: 0; }
.home .ea-section__subtitle { font-size: 15px; color: var(--ea-text-secondary); line-height: 1.55; margin: 9px 0 0; max-width: 560px; }
.home .ea-section__action { flex: none; font-weight: 700; font-size: 14px; color: var(--ea-accent); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* 3 — featured "view all" -> left-aligned under the grid, on the same edge */
.home .ea-featured-courses .ea-section__footer { display: flex; justify-content: flex-start; margin-top: 30px; }

/* 4 — equal-height card rows + consistent gaps (footers line up) */
.home .ea-expect__grid,
.home .ea-categories__grid,
.home .ea-testimonials__grid { gap: 20px; align-items: stretch; }
.home .ea-expect__card,
.home .ea-testimonial-card { display: flex; flex-direction: column; height: 100%; }
.home .ea-category-card { display: flex; flex-direction: column; height: 100%; }
.home .ea-testimonial-card__author { margin-top: auto; }
.home .ea-featured-split { align-items: stretch; }
.home .ea-spotlight { height: 100%; }

/* 5 — one shared left edge: FAQ aligns to the container (no re-centering) */
.home .ea-faq__container { max-width: 1200px; }
.home .ea-faq .ea-section__header { max-width: 760px; }
.home .ea-faq__list { max-width: 760px; margin-left: 0; margin-right: 0; }


/* ============================================================
   v2.10.0 — single course page: surfaced metadata
   ============================================================ */
.ea-course-hero__subtitle{font-size:18px;color:var(--ea-text-secondary);margin:6px 0 0;line-height:1.4}
.ea-course-hero__taughtby{font-size:14px;color:var(--ea-text-secondary);margin:14px 0 0}
.ea-course-hero__taughtby strong{color:var(--ea-text-heading);font-weight:600}
.ea-course-strip{border-top:1px solid var(--ea-border);border-bottom:1px solid var(--ea-border);background:var(--ea-bg-alt)}
.ea-course-strip__inner{display:flex;flex-wrap:wrap;gap:20px;padding:14px 0;font-size:13.5px}
.ea-course-strip__item{display:inline-flex;align-items:center;gap:7px;color:var(--ea-text)}
.ea-course-strip__item svg{color:var(--ea-text-heading);flex:none}
.ea-enroll-card__price-row{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.ea-enroll-card__price-sale{font-size:15px;color:var(--ea-text-muted);text-decoration:line-through}
.ea-enroll-card__price-note{font-size:12px;color:var(--ea-text-muted)}
.ea-overview__block{margin-bottom:26px}
.ea-overview__block:last-child{margin-bottom:0}
.ea-overview__h{font-family:var(--ea-font-display);font-size:22px;font-weight:600;letter-spacing:-.3px;margin:0 0 12px;color:var(--ea-text-heading)}
.ea-overview__p{font-size:15px;line-height:1.65;color:var(--ea-text);max-width:720px}
.ea-overview__p p{margin:0 0 10px}
.ea-overview__learn{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;max-width:760px;padding:0;margin:0}
.ea-overview__learn li{display:flex;gap:9px;font-size:14.5px;color:var(--ea-text)}
.ea-overview__learn svg{color:var(--ea-accent);flex:none;margin-top:2px}
.ea-chips{display:flex;flex-wrap:wrap;gap:7px}
.ea-chip{font-size:12.5px;font-weight:600;background:var(--ea-bg-muted);border:1px solid var(--ea-border);border-radius:999px;padding:5px 12px;color:var(--ea-text-heading)}
.ea-reqs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;max-width:760px}
.ea-reqs__item{border:1px solid var(--ea-border);border-radius:10px;padding:12px 14px}
.ea-reqs__k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ea-text-muted);margin:0 0 5px}
.ea-reqs__v{font-size:14px;color:var(--ea-text);margin:0}
.ea-instructor-tab{display:flex;gap:18px;max-width:720px}
.ea-instructor-tab__avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;background:var(--ea-bg-muted)}
.ea-instructor-tab__name{font-family:var(--ea-font-display);font-size:20px;font-weight:600;margin:0;color:var(--ea-text-heading)}
.ea-instructor-tab__role{font-size:13.5px;color:var(--ea-text-muted);margin:2px 0 10px}
.ea-instructor-tab__bio{font-size:14.5px;line-height:1.6;color:var(--ea-text);margin:0}
@media(max-width:640px){.ea-overview__learn,.ea-reqs{grid-template-columns:1fr}.ea-instructor-tab{flex-direction:column;gap:12px}}


/* Dark mode: neutralise decorative course-cover gradients to grayscale (monochrome parity with light) */
html[data-theme="dark"] .ea-course-card__cover--indigo, html[data-theme="dark"] .ea-enroll-card__cover--indigo,
html[data-theme="dark"] .ea-course-card__cover--gold,   html[data-theme="dark"] .ea-enroll-card__cover--gold,
html[data-theme="dark"] .ea-course-card__cover--pink,   html[data-theme="dark"] .ea-enroll-card__cover--pink,
html[data-theme="dark"] .ea-course-card__cover--green,  html[data-theme="dark"] .ea-enroll-card__cover--green,
html[data-theme="dark"] .ea-course-card__cover--teal,
html[data-theme="dark"] .ea-course-card__cover--purple { background: linear-gradient(135deg, #2A2A2A, #3A3A3A); }
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .ea-course-card__cover--indigo, html:not([data-theme="light"]) .ea-enroll-card__cover--indigo,
  html:not([data-theme="light"]) .ea-course-card__cover--gold,   html:not([data-theme="light"]) .ea-enroll-card__cover--gold,
  html:not([data-theme="light"]) .ea-course-card__cover--pink,   html:not([data-theme="light"]) .ea-enroll-card__cover--pink,
  html:not([data-theme="light"]) .ea-course-card__cover--green,  html:not([data-theme="light"]) .ea-enroll-card__cover--green,
  html:not([data-theme="light"]) .ea-course-card__cover--teal,
  html:not([data-theme="light"]) .ea-course-card__cover--purple { background: linear-gradient(135deg, #2A2A2A, #3A3A3A); }
}

/* ============================================================
   v2.13.0 — Course catalog: sidebar filter system + grid/list
   ============================================================ */
.ea-catalog{padding:8px 0 60px}
.ea-catalog__inner{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start}
.ea-catalog__side{position:sticky;top:90px;border:1px solid var(--ea-border);border-radius:14px;padding:18px 18px 22px;background:var(--ea-card-bg)}
.ea-catalog__searchbox{display:flex;align-items:center;gap:8px;border:1px solid var(--ea-border);border-radius:9px;padding:9px 11px;color:var(--ea-text-muted);margin-bottom:18px}
.ea-catalog__searchbox svg{flex:none}
.ea-catalog__searchbox input{border:0;outline:0;background:transparent;width:100%;font-family:inherit;font-size:14px;color:var(--ea-text)}
.ea-catalog__fg{margin-bottom:18px}
.ea-catalog__fh{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ea-text-muted);margin:0 0 9px}
.ea-catalog__ck{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ea-text);padding:5px 0;cursor:pointer}
.ea-catalog__ck input{width:16px;height:16px;accent-color:var(--ea-text-heading);cursor:pointer;flex:none}
.ea-catalog__cl{min-width:0}
.ea-catalog__n{margin-left:auto;font-size:11.5px;color:var(--ea-text-muted);background:var(--ea-bg-alt);border-radius:999px;padding:1px 8px}
.ea-catalog__clear{font-size:13px;font-weight:600;color:var(--ea-text-heading);background:transparent;border:0;cursor:pointer;text-decoration:underline;padding:4px 0 0}
.ea-catalog__main{min-width:0}
.ea-catalog__toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ea-catalog__count{font-size:14px;color:var(--ea-text-secondary)}
.ea-catalog__tools{margin-left:auto;display:flex;gap:8px;align-items:center}
.ea-catalog__sort{font-size:13px;font-weight:600;border:1px solid var(--ea-border);border-radius:9px;padding:9px 12px;background:var(--ea-bg);color:var(--ea-text-heading);cursor:pointer}
.ea-catalog__vt{display:flex;border:1px solid var(--ea-border);border-radius:9px;overflow:hidden}
.ea-catalog__vt button{border:0;background:var(--ea-bg);color:var(--ea-text-muted);padding:9px 11px;cursor:pointer;display:grid;place-items:center}
.ea-catalog__vt button.is-on{background:var(--ea-text-heading);color:var(--ea-bg)}
.ea-catalog__chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.ea-catalog__chips:empty{display:none}
.ea-catalog__chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--ea-text-heading);background:var(--ea-bg-alt);border:1px solid var(--ea-border);border-radius:999px;padding:5px 6px 5px 12px}
.ea-catalog__chip button{display:grid;place-items:center;border:0;background:transparent;color:var(--ea-text-muted);cursor:pointer;padding:2px;border-radius:50%}
.ea-catalog__chip button:hover{color:var(--ea-text-heading)}
.ea-catalog__main .ea-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ea-catalog__main .ea-course-card{display:flex;flex-direction:column;height:100%}
.ea-catalog__main .ea-course-card__body{display:flex;flex-direction:column;flex:1}
.ea-catalog__main .ea-course-card__footer{margin-top:auto}
.ea-course-grid--list{grid-template-columns:1fr!important;gap:12px!important}
.ea-course-grid--list .ea-course-card{flex-direction:row}
.ea-course-grid--list .ea-course-card__cover{width:210px;min-height:100%;flex:none}
.ea-course-grid--list .ea-course-card__body{flex:1}
.ea-catalog__empty{border:1px dashed var(--ea-border);border-radius:14px;padding:44px 24px;text-align:center;color:var(--ea-text-muted)}
.ea-catalog__empty .ea-empty-state__title{color:var(--ea-text-heading);margin:12px 0 6px}
/* 992, not 900: the desktop 3-col grid (6468, 0,2,0, no media) outranks responsive.css's
   2-col @992 rule (0,1,0), so between 901-992 the catalog kept 3 columns while the sidebar
   was still beside the main — ~180px cards with the Enroll button clipped by the card's
   overflow:hidden. Dropping the sidebar and the grid together at 992 closes that band. */
@media (max-width:992px){
  .ea-catalog__inner{grid-template-columns:1fr;gap:18px}
  .ea-catalog__side{position:static}
  .ea-catalog__main .ea-course-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .ea-catalog__main .ea-course-grid{grid-template-columns:1fr}
  .ea-course-grid--list .ea-course-card{flex-direction:column}
  .ea-course-grid--list .ea-course-card__cover{width:100%}
}

/* ============================================================
 * v2.14.0 — Redesigned course card (catalog / index / related)
 * ============================================================ */
.ea-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }

.ea-course-card { display: flex; flex-direction: column; background: var(--ea-card-bg); border: 1px solid var(--ea-border); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease; }
.ea-course-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -14px rgba(0,0,0,.28); border-color: var(--ea-border-hover); }

/* Cover */
.ea-course-card__cover { position: relative; display: block; height: auto; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ea-bg-muted); }
.ea-course-card__cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.ea-course-card:hover .ea-course-card__cover-img { transform: scale(1.06); }
.ea-course-card__cover-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ea-text-muted); opacity: .5; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.ea-course-card__cover-icon svg { width: 58px; height: 58px; }
.ea-course-card:hover .ea-course-card__cover-icon { transform: scale(1.08); opacity: .68; }
.ea-course-card__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 62%, rgba(0,0,0,.30) 100%); pointer-events: none; }

/* Chips + duration pill (over cover) */
.ea-course-card__chips { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 24px); }
.ea-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ea-font-ui); font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 5px 10px; border-radius: 999px; line-height: 1; white-space: nowrap; }
.ea-chip--cat { background: #fff; color: #111; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.ea-chip--level { background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ea-chip--mand { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(0,0,0,.68); color: #fff; text-transform: uppercase; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ea-chip--feat { position: absolute; top: 12px; left: 12px; z-index: 2; background: #b7791f; color: #fff; text-transform: uppercase; letter-spacing: .03em; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ea-course-card__dur { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; font-family: var(--ea-font-ui); font-size: 12px; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 5px 10px; border-radius: 999px; line-height: 1; }
.ea-course-card__dur svg { width: 13px; height: 13px; }

/* Body */
.ea-course-card__body { display: flex; flex-direction: column; gap: 9px; padding: 18px 18px 20px; flex: 1; }
.ea-course-card__eyebrow { font-family: var(--ea-font-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ea-text-muted); }
.ea-course-card__title { margin: 0; font-family: var(--ea-font-display); font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ea-course-card__title a { color: var(--ea-text-heading); text-decoration: none; transition: color .18s ease; }
.ea-course-card__title a:hover { color: var(--ea-text-muted); }
.ea-course-card__desc { margin: 0; color: var(--ea-text-secondary); font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ea-course-card__meta { display: flex; flex-wrap: wrap; gap: 8px 15px; margin-top: 2px; }
.ea-course-card__meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ea-text-muted); }
.ea-course-card__meta-item svg { width: 14px; height: 14px; opacity: .85; }

/* Footer */
.ea-course-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--ea-border); }
.ea-course-card__instructor { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ea-course-card__instructor-img, .ea-course-card__instructor-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.ea-course-card__instructor-avatar { display: flex; align-items: center; justify-content: center; background: var(--ea-bg-muted); color: var(--ea-text-heading); font-weight: 700; font-size: 12px; }
.ea-course-card__instructor-name { font-size: 13px; font-weight: 600; color: var(--ea-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ea-course-card__cta { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.ea-course-card__price { font-family: var(--ea-font-display); font-size: 15px; font-weight: 600; color: var(--ea-text-heading); }
.ea-course-card__price.free { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ea-text-muted); }
.ea-course-card__progress { display: inline-flex; align-items: center; gap: 8px; }
/* flex:none so the shared base's flex:1 (flex-basis:0%) can't defeat this fixed 72px pill
   inside the inline-flex footer — width only wins when flex-basis is auto. */
.ea-course-card__progress .ea-progress-bar { display: block; flex: none; width: 72px; height: 6px; border-radius: 999px; background: var(--ea-bg-muted); overflow: hidden; }
.ea-course-card__progress .ea-progress-bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--ea-text-heading); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.ea-course-card__progress-text { font-size: 12px; font-weight: 700; color: var(--ea-text-secondary); }

/* List view (toggle adds .ea-course-grid--list) */
.ea-course-grid--list { grid-template-columns: 1fr; gap: 16px; }
.ea-course-grid--list .ea-course-card { flex-direction: row; }
.ea-course-grid--list .ea-course-card__cover { width: 300px; flex: none; aspect-ratio: 16 / 10; }
.ea-course-grid--list .ea-course-card__body { padding: 20px 22px; }
.ea-course-grid--list .ea-course-card__desc { -webkit-line-clamp: 3; }
@media (max-width: 640px) {
	.ea-course-grid--list .ea-course-card { flex-direction: column; }
	.ea-course-grid--list .ea-course-card__cover { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.ea-course-card, .ea-course-card__cover-img, .ea-course-card__cover-icon { transition: none !important; }
	.ea-course-card:hover { transform: none; }
	.ea-course-card:hover .ea-course-card__cover-img { transform: none; }
}

/* ============================================================
 * v2.15.0 — Single course page upgrade
 * ============================================================ */
@keyframes eaScpUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes eaScpFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ea-course-hero__content { animation: eaScpUp .5s cubic-bezier(.2,.7,.2,1) both; }
.ea-course-hero__inner .ea-enroll-card { animation: eaScpUp .5s .08s cubic-bezier(.2,.7,.2,1) both; }

/* Enroll card — sticky + label/value spec list */
.ea-enroll-card { position: sticky; top: 96px; align-self: start; }
.ea-enroll-card__details { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ea-border); display: flex; flex-direction: column; gap: 1px; }
.ea-enroll-card__details li { display: flex; align-items: center; gap: 10px; padding: 9px 0; margin: 0; border: 0; font-size: 13.5px; }
.ea-enroll-card__details li + li { border-top: 1px solid var(--ea-border); }
.ea-enroll-card__k { display: inline-flex; align-items: center; gap: 9px; color: var(--ea-text-secondary); }
.ea-enroll-card__k svg { width: 16px; height: 16px; color: var(--ea-text-muted); flex: none; }
.ea-enroll-card__v { margin-left: auto; color: var(--ea-text-heading); font-weight: 600; text-align: right; }
.ea-enroll-card .ea-btn { transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease; }
.ea-enroll-card .ea-btn:hover { transform: translateY(-2px); }

/* Animated tab bar */
.ea-tabs { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--ea-border); overflow-x: auto; scrollbar-width: none; }
.ea-tabs::-webkit-scrollbar { display: none; }
.ea-tabs__tab { position: relative; border: 0; background: transparent; color: var(--ea-text-secondary); font-family: var(--ea-font-ui); font-weight: 600; font-size: 15px; padding: 14px 18px; cursor: pointer; white-space: nowrap; transition: color .18s ease; }
.ea-tabs__tab:hover { color: var(--ea-text-heading); }
.ea-tabs__tab--active { color: var(--ea-text-heading); }
.ea-tabs__ink { position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background: var(--ea-text-heading); border-radius: 2px; pointer-events: none; transition: left .28s cubic-bezier(.2,.7,.2,1), width .28s cubic-bezier(.2,.7,.2,1); }
.ea-tabs__panel { padding: 26px 0 4px; }
.ea-tabs__panel--active { animation: eaScpFade .32s ease; }

/* Overview */
.ea-overview__block { margin: 0 0 28px; }
.ea-overview__h { font-family: var(--ea-font-display); font-size: 19px; font-weight: 600; margin: 0 0 13px; }
.ea-overview__learn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 24px; }
.ea-overview__learn li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--ea-text-secondary); }
.ea-overview__learn li svg { width: 16px; height: 16px; color: var(--ea-text-heading); flex: none; margin-top: 3px; }
.ea-overview__learn li::before { content: none; }

/* Syllabus accordion polish */
.ea-syllabus__module { border: 1px solid var(--ea-border); border-radius: 12px; margin: 0 0 10px; overflow: hidden; background: var(--ea-card-bg); transition: border-color .18s ease, box-shadow .18s ease; }
.ea-syllabus__module:hover { border-color: var(--ea-border-hover); box-shadow: 0 6px 20px -12px rgba(0,0,0,.24); }
.ea-syllabus__module-header { cursor: pointer; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.ea-syllabus__module-header::-webkit-details-marker { display: none; }
.ea-syllabus__chevron { transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.ea-syllabus__module[open] .ea-syllabus__chevron { transform: rotate(180deg); }
.ea-syllabus__lesson { transition: background .15s ease; }
.ea-syllabus__lesson:hover { background: var(--ea-bg-muted); }

/* Instructor cards */
.ea-instructor-card, .ea-instructor-tab { transition: border-color .18s ease, box-shadow .18s ease; }
.ea-instructor-card:hover { box-shadow: 0 8px 26px -14px rgba(0,0,0,.24); }

@media (max-width: 640px) {
	.ea-overview__learn { grid-template-columns: 1fr; }
	.ea-enroll-card { position: static; }
}
@media (prefers-reduced-motion: reduce) {
	.ea-course-hero__content, .ea-course-hero__inner .ea-enroll-card, .ea-tabs__panel--active { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   HUB SSO — auth UI (monochrome-safe, token-driven)
   ══════════════════════════════════════════════════════════════════════ */

/* Membership tier badge (account menu) — neutral to respect monochrome. */
.ea-tier-badge { display: inline-block; align-self: flex-start; margin-top: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--ea-radius-sm); background: var(--ea-bg-muted); color: var(--ea-text-heading); border: 1px solid var(--ea-border); }

/* Sign-in / welcome toast. */
.ea-toast-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.ea-toast { display: flex; align-items: flex-start; gap: 11px; border-radius: var(--ea-radius-lg); padding: 13px 15px; transform: translateY(12px); opacity: 0; transition: all .3s ease; }
.ea-toast.is-in { transform: translateY(0); opacity: 1; }
.ea-toast__icon { width: 32px; height: 32px; border-radius: 50%; background: var(--ea-bg-muted); color: var(--ea-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ea-toast__title { font-family: var(--ea-font-display); font-weight: 600; font-size: 14px; color: var(--ea-text-heading); }
.ea-toast__text { font-size: 12.5px; color: var(--ea-text-secondary); }

/* Access card (protected content). */
.ea-access-card { max-width: 560px; margin: 0 auto; text-align: center; background: var(--ea-card-bg); border: 1px solid var(--ea-border); border-radius: var(--ea-radius-lg); box-shadow: var(--ea-shadow); padding: 40px 32px; }
.ea-access-card__icon { width: 60px; height: 60px; border-radius: 50%; background: var(--ea-bg-muted); color: var(--ea-text-heading); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.ea-access-card__title { font-family: var(--ea-font-display); font-weight: 700; font-size: 22px; color: var(--ea-text-heading); margin-bottom: 8px; }
.ea-access-card__text { font-size: 14px; color: var(--ea-text-secondary); margin-bottom: 20px; }
.ea-access-card__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ea-access-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ea-text); background: var(--ea-bg-muted); border: 1px solid var(--ea-border); border-radius: var(--ea-radius-full); padding: 5px 12px; margin-bottom: 14px; }

/* Members-only lock overlay on covers. */
.ea-course-card__cover .ea-course-card__lock, .ea-spotlight__cover .ea-course-card__lock, .ea-catalog-card__cover .ea-course-card__lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 3; color: #fff; }
.ea-course-card__lock span { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; }

/* Enroll card — tier-locked state. */
.ea-enroll-card__locked { text-align: center; }
.ea-enroll-card__locked .ea-access-note { margin-bottom: 10px; }
.ea-enroll-card__locked-text { font-size: 13px; color: var(--ea-text-secondary); margin-bottom: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   REAL-TIME SIGNED-IN INDICATOR — cache-proof visibility + hover menu
   ══════════════════════════════════════════════════════════════════════ */
/* Both auth states are always in the DOM; the pre-paint cookie reader adds
   html.ea-auth-yes / .ea-auth-no so the right one shows instantly on every
   page — even a cached signed-out page. */
.ea-acct-user { display: none !important; }
html.ea-auth-yes .ea-acct-user { display: block !important; }
html.ea-auth-yes .ea-acct-anon { display: none !important; }
.ea-header__anon { display: inline-flex; align-items: center; gap: 8px; }

/* Profile icon: open the dropdown on HOVER + keyboard focus (and on click). */
.ea-header__user-menu:hover .ea-header__dropdown,
.ea-header__user-menu:focus-within .ea-header__dropdown,
.ea-header__dropdown.ea-header__dropdown--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Invisible hover bridge across the 8px gap so the menu doesn't drop while
   moving the pointer from the avatar down onto it. */
.ea-header__user-menu:hover::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }

/* Footer emblem (white, on the permanently-dark footer) */
.ea-footer__logo-img { width: 34px; height: 34px; display: block; flex: 0 0 auto; }
.ea-footer__logo { display: inline-flex; align-items: center; gap: 10px; }

/* ══════════════════════════════════════════════════════════════════════
   LESSON VIEWER — "continue learning" workspace (v2.15.5)
   ══════════════════════════════════════════════════════════════════════ */
.ea-lv { background: var(--ea-bg); }
.ea-lv-top { border-bottom: 1px solid var(--ea-border); background: var(--ea-bg-alt); }
.ea-lv-top__inner { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.ea-lv-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ea-text-secondary); }
.ea-lv-back:hover { color: var(--ea-accent); }
.ea-lv-course { font-family: var(--ea-font-display); font-weight: 600; font-size: 14px; color: var(--ea-text-heading); }
.ea-lv-top__right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.ea-lv-eta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ea-text-muted); }
.ea-lv-autoplay { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ea-text-secondary); cursor: pointer; user-select: none; }
.ea-lv-autoplay input { position: absolute; opacity: 0; width: 0; height: 0; }
.ea-lv-sw { width: 32px; height: 18px; border-radius: 99px; background: var(--ea-neutral-300); position: relative; transition: background var(--ea-ease); flex-shrink: 0; }
.ea-lv-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform var(--ea-ease); }
.ea-lv-autoplay input:checked + .ea-lv-sw { background: var(--ea-accent); }
.ea-lv-autoplay input:checked + .ea-lv-sw::after { transform: translateX(14px); }
.ea-lv-ring { width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(var(--ea-accent) calc(var(--pct, 0) * 1%), var(--ea-neutral-200) 0); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ea-lv-ring span { width: 29px; height: 29px; border-radius: 50%; background: var(--ea-bg-alt); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--ea-text-heading); }
.ea-lv-side-toggle { display: none; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--ea-border); background: var(--ea-card-bg); color: var(--ea-text-secondary); align-items: center; justify-content: center; }

/* Layout */
.ea-lv-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; max-width: var(--ea-container, 1200px); margin: 0 auto; }
.ea-lv-main { min-width: 0; padding: 26px clamp(16px, 3vw, 32px); }
.ea-lv-content { max-width: 760px; }
.ea-lv-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
/* Scoped to the eyebrow. Bare `.ea-lv-mod` also matches the rail's <details class="ea-lv-mod">
   (page-lesson.php:523), and text-transform/letter-spacing/font-weight INHERIT — so this
   rule was uppercasing and bolding the entire syllabus rail, and making every inactive
   lesson row heavier than the active one. Scoping keeps the class name, so
   lesson-workspace.js's rail.querySelectorAll('.ea-lv-mod') still works. */
.ea-lv-eyebrow .ea-lv-mod { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ea-text-muted); }
.ea-lv-type { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ea-text-secondary); background: var(--ea-bg-muted); border-radius: var(--ea-radius-sm); padding: 4px 9px; }
.ea-lv-type svg { width: 13px; height: 13px; }
.ea-lv-title-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ea-lv-title { font-family: var(--ea-font-display); font-weight: 700; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; color: var(--ea-text-heading); flex: 1; }
.ea-lv-bookmark { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ea-border); background: var(--ea-card-bg); color: var(--ea-text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--ea-ease); }
.ea-lv-bookmark:hover { color: var(--ea-text-heading); border-color: var(--ea-border-hover); }
.ea-lv-bookmark.is-on { color: var(--ea-accent); border-color: var(--ea-accent); }
.ea-lv-objectives { background: var(--ea-bg-alt); border: 1px solid var(--ea-border); border-radius: var(--ea-radius-lg); padding: 14px 16px; margin-bottom: 18px; }
.ea-lv-objectives h4 { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ea-text-muted); margin-bottom: 9px; }
.ea-lv-objectives div { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--ea-text); margin-bottom: 6px; }
.ea-lv-objectives div:last-child { margin-bottom: 0; }
.ea-lv-objectives svg { color: var(--ea-accent); flex-shrink: 0; margin-top: 3px; }
.ea-lv-media { margin-bottom: 18px; }
/* THE SHELL. Only .ea-lv-embed — never the video itself.
 *
 * .ea-lv-video-el used to be listed in BOTH this rule and the one below, at identical
 * specificity (0,1,0), so the later one won and every raw <video> became
 * position:absolute. page-lesson.php emitted it as a bare child of .ea-lv-media with no
 * wrapper, and nothing in the ancestor chain is positioned — so it resolved against the
 * INITIAL containing block and painted a 100vw x 100vh #0d0d0d rectangle over the whole
 * page. The lesson was still there, underneath it: the header, sidebar and actions bar
 * survived only because they are sticky; the top bar and title are static and vanished
 * beneath it.
 *
 * The oEmbed branch always wrapped its iframe, which is why embedded video never showed
 * the bug — and is the proof this was an authoring slip rather than a design. */
.ea-lv-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--ea-radius-lg); overflow: hidden; background: var(--ea-lv-media-bg, #0d0d0d); }
.ea-lv-embed iframe, .ea-lv-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* A <video> standing on its own is a SHELL, not a fill: in flow, with real box metrics.
   (A bare <video> defaults to 300px wide, so it needs them.) Belt and braces — wrapped
   or unwrapped, it can never be absolute again. */
.ea-lv-video-el { display: block; width: 100%; height: auto; aspect-ratio: 16/9; border-radius: var(--ea-radius-lg); background: var(--ea-lv-media-bg, #0d0d0d); }
.ea-lv-audio { width: 100%; }
.ea-lv-media__placeholder { aspect-ratio: 16/9; border-radius: var(--ea-radius-lg); border: 1px dashed var(--ea-border-hover); background: var(--ea-bg-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ea-text-muted); }
.ea-lv-media__placeholder p { font-size: 13px; }

/* PDF — a tall document viewport, not the 16/9 media ratio. Light backdrop so the page
   edges read; a fallback link below for browsers that refuse to inline a PDF. */
.ea-lv-embed--doc { aspect-ratio: auto; height: 72vh; min-height: 420px; background: var(--ea-bg-muted); }
.ea-lv-filebtn { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ea-accent); }
.ea-lv-filebtn:hover { text-decoration: underline; }

/* Download — a single tappable card. */
.ea-lv-download { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--ea-border); border-radius: var(--ea-radius-lg); background: var(--ea-card-bg); color: var(--ea-text); transition: border-color var(--ea-ease), background var(--ea-ease); }
.ea-lv-download:hover { border-color: var(--ea-accent); background: var(--ea-bg-alt); }
.ea-lv-download__ic { flex: 0 0 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--ea-bg-muted); color: var(--ea-text-heading); }
.ea-lv-download__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ea-lv-download__b strong { font-size: 15px; color: var(--ea-text-heading); }
.ea-lv-download__b small { font-size: 12.5px; color: var(--ea-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ea-lv-download__go { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--ea-accent); }

/* Live session — state-aware join card (upcoming / live / ended). */
.ea-lv-live { border: 1px solid var(--ea-border); border-radius: var(--ea-radius-lg); padding: 20px; background: var(--ea-card-bg); text-align: center; }
.ea-lv-live--live { border-color: var(--ea-red); background: var(--ea-red-soft, rgba(224,106,98,.08)); }
.ea-lv-live__head { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ea-lv-live__badge { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ea-text-muted); }
.ea-lv-live--live .ea-lv-live__badge { color: var(--ea-red); }
.ea-lv-live--ended .ea-lv-live__badge { color: var(--ea-text-muted); }
.ea-lv-live__when { font-size: 13px; font-weight: 600; color: var(--ea-text-heading); }
.ea-lv-live__join { margin: 0 auto; }
.ea-lv-live__msg { margin: 12px 0 0; font-size: 12.5px; color: var(--ea-text-muted); }

/* Knowledge check — the exams-site signpost. */
.ea-lv-check { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--ea-border); border-radius: var(--ea-radius-lg); background: var(--ea-bg-alt); }
.ea-lv-check__ic { flex: 0 0 24px; color: var(--ea-accent); margin-top: 1px; }
.ea-lv-check__t { display: block; font-size: 15px; color: var(--ea-text-heading); margin-bottom: 4px; }
.ea-lv-check__s { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--ea-text-secondary); }
.ea-lv-check__b .ea-btn:last-child { margin: 0; }

/* Survey — learner answer form + the answered state. */
.ea-lv-survey { margin-top: 6px; }
.ea-lv-survey__q { border: 0; padding: 0; margin: 0 0 22px; }
.ea-lv-survey__q legend { padding: 0; font-size: 15px; font-weight: 600; color: var(--ea-text-heading); margin-bottom: 10px; line-height: 1.5; }
.ea-lv-survey__n { color: var(--ea-text-muted); font-weight: 700; margin-right: 4px; }
.ea-lv-survey__req { color: var(--ea-red); }
.ea-lv-survey__opts { display: flex; flex-direction: column; gap: 8px; }
.ea-lv-survey__opt { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--ea-border); border-radius: 10px; cursor: pointer; transition: border-color var(--ea-ease), background var(--ea-ease); font-size: 14px; color: var(--ea-text); }
.ea-lv-survey__opt:hover { border-color: var(--ea-accent); }
.ea-lv-survey__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ea-lv-survey__mark { flex: 0 0 18px; height: 18px; border: 2px solid var(--ea-border-hover); border-radius: 50%; position: relative; transition: border-color var(--ea-ease); }
.ea-lv-survey__opt input[type="checkbox"] + .ea-lv-survey__mark { border-radius: 5px; }
.ea-lv-survey__opt input:checked + .ea-lv-survey__mark { border-color: var(--ea-accent); background: var(--ea-accent); }
.ea-lv-survey__opt input:checked + .ea-lv-survey__mark::after { content: ""; position: absolute; inset: 3px; border-radius: inherit; background: #fff; }
.ea-lv-survey__opt input:focus-visible + .ea-lv-survey__mark { outline: 3px solid var(--ea-accent); outline-offset: 2px; }
.ea-lv-survey__scale { display: flex; flex-wrap: wrap; gap: 8px; }
.ea-lv-survey__num { flex: 1 1 44px; }
.ea-lv-survey__num input { position: absolute; opacity: 0; width: 0; height: 0; }
.ea-lv-survey__num span { display: block; text-align: center; padding: 12px 0; border: 1px solid var(--ea-border); border-radius: 10px; font-weight: 700; color: var(--ea-text); cursor: pointer; transition: border-color var(--ea-ease), background var(--ea-ease), color var(--ea-ease); }
.ea-lv-survey__num input:checked + span { border-color: var(--ea-accent); background: var(--ea-accent); color: #fff; }
.ea-lv-survey__num input:focus-visible + span { outline: 3px solid var(--ea-accent); outline-offset: 2px; }
.ea-lv-survey__text { width: 100%; padding: 11px 13px; border: 1px solid var(--ea-border); border-radius: 10px; background: var(--ea-bg); color: var(--ea-text); font: inherit; font-size: 14px; resize: vertical; }
.ea-lv-survey__text:focus { outline: none; border-color: var(--ea-accent); }
.ea-lv-survey__priv { margin: 12px 0 0; font-size: 12.5px; color: var(--ea-text-muted); }
.ea-lv-survey-done { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border: 1px solid var(--ea-green, #0F6E56); border-radius: var(--ea-radius-lg); background: var(--ea-green-soft, rgba(15,110,86,.07)); color: var(--ea-text); }
.ea-lv-survey-done svg { flex: 0 0 20px; color: var(--ea-green, #0F6E56); margin-top: 1px; }
.ea-lv-survey-done strong { color: var(--ea-text-heading); }
.ea-lv-survey-done span { font-size: 13px; color: var(--ea-text-secondary); }

/* Discussion — a per-lesson threaded board. */
.ea-lv-disc { margin-top: 6px; }
.ea-lv-disc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ea-lv-disc__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; color: var(--ea-text-heading); }
.ea-lv-disc__count { font-size: 12.5px; color: var(--ea-text-muted); }
.ea-lv-disc__form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-bottom: 20px; }
.ea-lv-disc__ta { width: 100%; padding: 11px 13px; border: 1px solid var(--ea-border); border-radius: 10px; background: var(--ea-bg); color: var(--ea-text); font: inherit; font-size: 14px; resize: vertical; }
.ea-lv-disc__ta:focus { outline: none; border-color: var(--ea-accent); }
.ea-lv-disc__empty { font-size: 13.5px; color: var(--ea-text-muted); padding: 8px 0; }
.ea-lv-disc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ea-lv-disc__post { border: 1px solid var(--ea-border); border-radius: 12px; padding: 14px 16px; background: var(--ea-card-bg); }
.ea-lv-disc__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ea-lv-disc__av { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--ea-bg-muted); color: var(--ea-text-heading); font-weight: 700; font-size: 13px; }
.ea-lv-disc__who { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--ea-text); }
.ea-lv-disc__who b { color: var(--ea-text-heading); }
.ea-lv-disc__you { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ea-accent); }
.ea-lv-disc__time { font-size: 12px; color: var(--ea-text-muted); }
.ea-lv-disc__text { font-size: 14px; line-height: 1.6; color: var(--ea-text); overflow-wrap: anywhere; }
.ea-lv-disc__del { display: inline; }
.ea-lv-disc__delbtn { border: 0; background: none; color: var(--ea-text-muted); cursor: pointer; padding: 4px; border-radius: 6px; line-height: 0; }
.ea-lv-disc__delbtn:hover { color: var(--ea-red); background: var(--ea-bg-muted); }
.ea-lv-disc__meta .ea-lv-disc__del { margin-left: auto; }
.ea-lv-disc__replies { margin: 12px 0 0 24px; display: flex; flex-direction: column; gap: 12px; border-left: 2px solid var(--ea-border); padding-left: 14px; }
.ea-lv-disc__replies:empty { display: none; }
.ea-lv-disc__replybox { margin-top: 10px; }
.ea-lv-disc__replybox > summary { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ea-accent); cursor: pointer; list-style: none; }
.ea-lv-disc__replybox > summary::-webkit-details-marker { display: none; }
.ea-lv-disc__form--reply { margin: 10px 0 0; }

/* SCORM player — a bar, the framed content, a completion line. */
.ea-scorm { border: 1px solid var(--ea-border); border-radius: 14px; overflow: hidden; background: var(--ea-card-bg); }
.ea-scorm__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ea-border); background: var(--ea-bg-alt); }
.ea-scorm__badge { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--ea-text-muted); }
.ea-scorm__badge[data-state="running"] { background: var(--ea-green, #3DB88E); box-shadow: 0 0 0 3px rgba(61,184,142,.18); }
.ea-scorm__label { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 13.5px; color: var(--ea-text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ea-scorm__meta { flex: 0 0 auto; font-size: 12px; color: var(--ea-text-muted); display: inline-flex; align-items: center; gap: 6px; }
.ea-scorm__status { color: var(--ea-text-secondary); font-weight: 600; }
.ea-scorm__status.is-done { color: var(--ea-green, #3DB88E); }
.ea-scorm__score { padding-left: 6px; border-left: 1px solid var(--ea-border); }
.ea-scorm__frame { position: relative; aspect-ratio: 16 / 10; background: var(--ea-lv-media-bg, #0d0d0d); }
.ea-scorm__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ea-scorm__complete { display: flex; align-items: center; gap: 7px; margin: 0; padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--ea-green, #3DB88E); background: rgba(61,184,142,.10); border-top: 1px solid var(--ea-border); }
@media (max-width: 560px) { .ea-scorm__frame { aspect-ratio: 4 / 3; } .ea-scorm__label { white-space: normal; } }
.ea-lv-instr { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid var(--ea-border); border-bottom: 1px solid var(--ea-border); margin-bottom: 16px; }
.ea-lv-instr__av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ea-lv-instr__av--ph { background: var(--ea-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.ea-lv-instr__n { font-family: var(--ea-font-display); font-weight: 600; font-size: 13.5px; color: var(--ea-text-heading); }
.ea-lv-instr__r { font-size: 11.5px; color: var(--ea-text-muted); }
.ea-lv-body { font-size: 15px; line-height: 1.75; color: var(--ea-text); margin-bottom: 18px; }
.ea-lv-body p { margin-bottom: 14px; }
.ea-lv-panel { border: 1px solid var(--ea-border); border-radius: var(--ea-radius-lg); margin-bottom: 16px; overflow: hidden; }
.ea-lv-panel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 15px; font-family: var(--ea-font-display); font-weight: 600; font-size: 13px; color: var(--ea-text-heading); }
.ea-lv-panel > summary::-webkit-details-marker { display: none; }
.ea-lv-panel__chev { margin-left: auto; transition: transform var(--ea-ease); }
.ea-lv-panel[open] .ea-lv-panel__chev { transform: rotate(180deg); }
/* No font-size here: the only .ea-lv-panel__body is the transcript, always .ea-prose, so
   `.ea-lv-content .ea-prose` (the reading-size control) governs it — a transcript IS
   reading content and should scale with A+/A-. A font-size here would be dead anyway. */
.ea-lv-panel__body { padding: 0 15px 14px; line-height: 1.7; color: var(--ea-text-secondary); }
.ea-lv-verse { display: flex; gap: 11px; align-items: flex-start; background: var(--ea-bg-alt); border-left: 3px solid var(--ea-accent); border-radius: 0 var(--ea-radius-lg) var(--ea-radius-lg) 0; padding: 14px 16px; margin-bottom: 16px; }
.ea-lv-verse svg { color: var(--ea-accent); flex-shrink: 0; margin-top: 2px; }
.ea-lv-verse p { font-style: italic; font-size: 14.5px; line-height: 1.55; color: var(--ea-text); }
.ea-lv-reflect { border: 1px solid var(--ea-border); border-radius: var(--ea-radius-lg); padding: 14px 16px; margin-bottom: 16px; }
.ea-lv-reflect h4 { display: flex; align-items: center; gap: 7px; font-family: var(--ea-font-display); font-weight: 600; font-size: 13px; color: var(--ea-text-heading); margin-bottom: 6px; }
.ea-lv-reflect p { font-size: 14px; color: var(--ea-text-secondary); }
.ea-lv-notes { border: 1px solid var(--ea-border); border-radius: var(--ea-radius-lg); padding: 14px 16px; margin-bottom: 16px; }
.ea-lv-notes h4 { display: flex; align-items: center; gap: 7px; font-family: var(--ea-font-display); font-weight: 600; font-size: 13px; color: var(--ea-text-heading); margin-bottom: 9px; }
.ea-lv-notes__area { width: 100%; border: 1px solid var(--ea-border); border-radius: var(--ea-radius); padding: 10px 12px; font: inherit; font-size: 14px; color: var(--ea-text); background: var(--ea-card-bg); resize: vertical; }
.ea-lv-notes__area:focus { outline: none; border-color: var(--ea-accent); }
.ea-lv-notes__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.ea-lv-notes__status { font-size: 11.5px; color: var(--ea-text-muted); }
.ea-lv-next-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--ea-border); border-radius: var(--ea-radius-lg); padding: 12px 14px; margin-bottom: 16px; background: var(--ea-bg-alt); transition: all var(--ea-ease); }
.ea-lv-next-card:hover { border-color: var(--ea-border-hover); transform: translateY(-2px); box-shadow: var(--ea-shadow-sm); }
.ea-lv-next-card__ic { width: 40px; height: 40px; border-radius: var(--ea-radius); background: var(--ea-accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ea-lv-next-card__ic svg { width: 18px; height: 18px; }
.ea-lv-next-card__txt { display: flex; flex-direction: column; min-width: 0; }
.ea-lv-next-card__txt .up { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ea-text-muted); }
.ea-lv-next-card__txt .nt { font-family: var(--ea-font-display); font-weight: 600; font-size: 14px; color: var(--ea-text-heading); }
.ea-lv-next-card__txt .nm { font-size: 11px; color: var(--ea-text-muted); }
.ea-lv-next-card__go { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ea-accent); flex-shrink: 0; }
.ea-lv-actions { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 14px 0; margin-top: 8px; background: var(--ea-bg); border-top: 1px solid var(--ea-border); }
.ea-lv-done { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--ea-green); }
/* Completed-state TOGGLE: stays a green "✓ Completed" and reveals an Undo affordance. A
   real <button>, so keyboard and touch reach it (a hover-only control strands touch). */
.ea-lv-done--btn { font-family: inherit; border: 1px solid transparent; background: none; cursor: pointer; padding: 6px 10px; border-radius: var(--ea-radius-lg); transition: background var(--ea-ease), border-color var(--ea-ease); }
.ea-lv-done--btn:hover, .ea-lv-done--btn:focus-visible { background: var(--ea-bg-alt); border-color: var(--ea-border); }
.ea-lv-done--btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ea-bg-muted); }
.ea-lv-done__undo { font-size: 12px; font-weight: 600; color: var(--ea-text-muted); padding-left: 8px; margin-left: 1px; border-left: 1px solid var(--ea-border); }
.ea-lv-done--btn:hover .ea-lv-done__undo, .ea-lv-done--btn:focus-visible .ea-lv-done__undo { color: var(--ea-text-heading); }
.ea-lv-nav { margin-left: auto; display: flex; gap: 8px; }
.ea-lv-quiz { border: 1px solid var(--ea-border); border-radius: var(--ea-radius-lg); padding: 16px; margin-bottom: 18px; }
.ea-lv-quiz__q { margin-bottom: 16px; }
.ea-lv-quiz__q h3 { font-size: 15px; font-weight: 600; color: var(--ea-text-heading); margin-bottom: 10px; }
.ea-lv-quiz__n { color: var(--ea-accent); font-weight: 700; }
.ea-lv-quiz__opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ea-border); border-radius: var(--ea-radius); margin-bottom: 7px; cursor: pointer; font-size: 14px; }
.ea-lv-quiz__opt:hover { border-color: var(--ea-accent); background: var(--ea-bg-alt); }
.ea-lv-quiz__opt input { accent-color: var(--ea-accent); }

/* Syllabus rail */
.ea-lv-side { border-left: 1px solid var(--ea-border); background: var(--ea-bg-alt); align-self: start; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; }
.ea-lv-side__head { padding: 16px; border-bottom: 1px solid var(--ea-border); position: sticky; top: 0; background: var(--ea-bg-alt); z-index: 2; }
.ea-lv-side__title { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--ea-font-display); font-weight: 700; font-size: 14px; color: var(--ea-text-heading); margin-bottom: 10px; }
.ea-lv-side__title span { font-size: 12px; color: var(--ea-text-muted); font-weight: 600; }
.ea-lv-side__bar { height: 6px; border-radius: 99px; background: var(--ea-neutral-200); overflow: hidden; }
.ea-lv-side__bar i { display: block; height: 100%; background: var(--ea-accent); }
/* Scoped to the rail. Unscoped, this border-bottom also landed on the eyebrow <span
   class="ea-lv-mod">, drawing a stray hairline under the module name above every lesson. */
.ea-lv-side .ea-lv-mod { border-bottom: 1px solid var(--ea-border); }
.ea-lv-mod__head { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
.ea-lv-mod__head::-webkit-details-marker { display: none; }
.ea-lv-mod__chev { color: var(--ea-text-muted); transition: transform var(--ea-ease); flex-shrink: 0; }
.ea-lv-mod[open] .ea-lv-mod__chev { transform: rotate(180deg); }
.ea-lv-mod__title { flex: 1; font-family: var(--ea-font-display); font-weight: 600; font-size: 13px; color: var(--ea-text-heading); }
.ea-lv-mod__count { font-size: 11px; color: var(--ea-text-muted); font-weight: 600; }
.ea-lv-lessons { padding-bottom: 6px; }
.ea-lv-les a { display: flex; align-items: center; gap: 9px; padding: 8px 16px; font-size: 13px; color: var(--ea-text-secondary); border-left: 3px solid transparent; }
.ea-lv-les a:hover { background: var(--ea-card-bg); color: var(--ea-text); }
.ea-lv-les__dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ea-neutral-300); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; }
.ea-lv-les--done .ea-lv-les__dot { background: var(--ea-accent); border-color: var(--ea-accent); color: #fff; }
.ea-lv-les--active a { background: var(--ea-card-bg); color: var(--ea-text-heading); font-weight: 600; border-left-color: var(--ea-accent); }
.ea-lv-les--active .ea-lv-les__dot { border-color: var(--ea-accent); color: var(--ea-accent); }
.ea-lv-les__title { flex: 1; min-width: 0; }
.ea-lv-les__mark { color: var(--ea-accent); flex-shrink: 0; }
.ea-lv-les__dur { font-size: 11px; color: var(--ea-text-muted); flex-shrink: 0; }
.ea-lv-exam { margin: 14px 16px; border: 1px dashed var(--ea-border-hover); border-radius: var(--ea-radius-lg); padding: 13px; text-align: center; }
.ea-lv-exam.is-unlocked { border-style: solid; border-color: var(--ea-accent); }
.ea-lv-exam .et { display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--ea-font-display); font-weight: 700; font-size: 13px; color: var(--ea-text-heading); }
.ea-lv-exam .ed { display: block; font-size: 11px; color: var(--ea-text-muted); margin-top: 4px; }
.ea-lv-side-scrim { display: none; }

@media (max-width: 960px) {
  .ea-lv-layout { grid-template-columns: 1fr; }
  /* The top bar is a nowrap row of unshrinkable controls (fixed-size tools, the switch,
     the ring). With no wrap it blew ~154px past a 420px viewport and scrolled the whole
     page sideways, pushing the ring and Autoplay off the right edge. Let it wrap and drop
     the ETA (already treated as non-essential — focus mode hides it). */
  .ea-lv-top__inner { flex-wrap: wrap; row-gap: 8px; }
  .ea-lv-eta { display: none; }
  .ea-lv-side-toggle { display: inline-flex; }
  .ea-lv-side { position: fixed; top: 0; right: 0; bottom: 0; width: 300px; max-width: 86vw; z-index: 1200; transform: translateX(100%); transition: transform .25s ease; border-left: 1px solid var(--ea-border); box-shadow: var(--ea-shadow-xl); max-height: 100vh; }
  .ea-lv-side.is-open { transform: translateX(0); }
  .ea-lv-side-scrim.is-open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1100; }
}

/* Lesson viewer — text-overflow hardening (long titles / pasted URLs must never break layout) */
.ea-lv-content { min-width: 0; }
.ea-lv-title { overflow-wrap: anywhere; word-break: break-word; }
.ea-lv-side { overflow-x: hidden; }
.ea-lv-les a { min-width: 0; }
.ea-lv-les__title { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.ea-lv-mod__title { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.ea-lv-next-card__txt .nt { overflow-wrap: anywhere; }

/* ============================================================
   INSTRUCTORS — public directory + profile + course cards (v2.17.0)
   ============================================================ */
.ea-instructors-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.ea-instructor-dir-card { display:flex; flex-direction:column; align-items:center; text-align:center; padding:26px 18px; background:var(--ea-card-bg); border:1px solid var(--ea-border); border-radius:16px; box-shadow:var(--ea-shadow-sm); text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ea-instructor-dir-card:hover { transform:translateY(-4px); box-shadow:var(--ea-shadow); border-color:var(--ea-border-hover); }
.ea-instructor-dir-card__avatar { position:relative; width:96px; height:96px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--ea-bg-muted); color:var(--ea-text-heading); font-family:var(--ea-font-display); font-size:34px; font-weight:600; margin-bottom:14px; }
.ea-instructor-dir-card__avatar img { width:100%; height:100%; object-fit:cover; }
.ea-instructor-dir-card__star { position:absolute; top:2px; right:2px; width:26px; height:26px; border-radius:50%; background:var(--ea-card-bg); color:#a86608; font-size:14px; display:flex; align-items:center; justify-content:center; box-shadow:var(--ea-shadow-sm); }
.ea-instructor-dir-card__name { font-family:var(--ea-font-display); font-size:18px; font-weight:600; color:var(--ea-text-heading); margin:0 0 3px; }
.ea-instructor-dir-card__title { font-size:13px; color:var(--ea-text-muted); margin:0 0 10px; }
.ea-instructor-dir-card__specs { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-bottom:12px; }
.ea-instructor-dir-card__count { margin-top:auto; font-size:12.5px; font-weight:600; color:var(--ea-accent); }

.ea-instructor-profile__inner { display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:start; }
.ea-instructor-profile__avatar { width:200px; height:200px; border-radius:20px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--ea-bg-muted); color:var(--ea-text-heading); font-family:var(--ea-font-display); font-size:72px; font-weight:600; }
.ea-instructor-profile__avatar img { width:100%; height:100%; object-fit:cover; }
.ea-instructor-profile__socials { display:flex; gap:10px; margin-top:16px; }
.ea-instructor-profile__socials a { width:38px; height:38px; border:1px solid var(--ea-border); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--ea-text-muted); transition:background .15s ease, color .15s ease, border-color .15s ease; }
.ea-instructor-profile__socials a:hover { background:var(--ea-text-heading); color:var(--ea-bg); border-color:var(--ea-text-heading); }
.ea-instructor-profile__socials svg { width:18px; height:18px; }
.ea-instructor-profile__name { font-family:var(--ea-font-display); font-size:34px; font-weight:600; color:var(--ea-text-heading); margin:0 0 6px; }
.ea-instructor-profile__title { font-size:16px; color:var(--ea-accent); font-weight:600; margin:0 0 14px; }
.ea-instructor-profile__specs { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.ea-instructor-profile__bio { color:var(--ea-text-secondary); font-size:15.5px; line-height:1.75; }
.ea-instructor-profile__bio p { margin:0 0 1em; }

/* Course-page instructor cards (primary + co) */
.ea-instructor-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.ea-instructor-card__specs { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 10px; }
.ea-instructor-card__socials { display:flex; gap:8px; margin-top:12px; }
.ea-instructor-card__socials a, .ea-instructor-social { width:34px; height:34px; border:1px solid var(--ea-border); border-radius:9px; display:inline-flex; align-items:center; justify-content:center; color:var(--ea-text-muted); transition:background .15s ease, color .15s ease, border-color .15s ease; }
.ea-instructor-card__socials a:hover { background:var(--ea-text-heading); color:var(--ea-bg); border-color:var(--ea-text-heading); }
.ea-instructor-social svg { width:16px; height:16px; }
@media (max-width:820px){ .ea-instructor-profile__inner { grid-template-columns:1fr; gap:24px; } .ea-instructor-profile__avatar { width:150px; height:150px; font-size:56px; } }

/* ============================================================
   CATEGORY-LED COURSE COLOUR (v2.19.0) — token-driven, light + dark
   Each course wears its category colour; falls back to the global accent.
   Text auto-contrasts via --course-ink.
   ============================================================ */
.ea-course-card{ --c:var(--course,var(--ea-accent)); position:relative; }
.ea-course-card__eyebrow{ color:var(--c); font-weight:700; }
.ea-course-card::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--c); border-radius:16px 16px 0 0; transform:scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.4,0,.2,1); z-index:3; pointer-events:none; }
.ea-course-card:hover::after,.ea-course-card:focus-within::after{ transform:scaleX(1); }
.ea-course-card:hover{ border-color:var(--course-line,var(--ea-border-hover)); }
.ea-course-card .ea-btn--accent{ background:var(--c); border-color:var(--c); color:var(--course-ink,#fff); }
.ea-course-card .ea-btn--accent:hover{ background:var(--course-d,var(--ea-accent-dark)); border-color:var(--course-d,var(--ea-accent-dark)); }
.ea-course-card__price.free{ color:var(--c); }

.ea-cscope{ --c:var(--course,var(--ea-accent)); }
.ea-cscope .ea-btn--accent{ background:var(--c); border-color:var(--c); color:var(--course-ink,#fff); }
.ea-cscope .ea-btn--accent:hover{ background:var(--course-d,var(--ea-accent-dark)); border-color:var(--course-d,var(--ea-accent-dark)); }
.ea-cscope .ea-enroll-card{ border-top:3px solid var(--c); }
.ea-cscope .ea-progress-bar__fill{ background:linear-gradient(90deg,var(--c),var(--course-d,var(--c))); }
.ea-cscope a:not(.ea-btn):hover{ color:var(--c); }

.ea-lv{ --c:var(--course,var(--ea-accent)); }
.ea-lv .ea-btn--accent{ background:var(--c); border-color:var(--c); color:var(--course-ink,#fff); }
.ea-lv .ea-lv-les--active{ background:var(--course-tint,var(--ea-accent-bg)); }
.ea-lv .ea-lv-les--active .ea-lv-les__title{ color:var(--c); }
.ea-lv .ea-lv-les__mark{ color:var(--c); }
.ea-lv .ea-lv-les--active .ea-lv-les__dot,.ea-lv .ea-lv-les--done .ea-lv-les__dot{ background:var(--c); border-color:var(--c); }

.ea-catalog__dot{ width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:7px; vertical-align:middle; box-shadow:0 0 0 1px rgba(0,0,0,.06) inset; }




/* ══════════════════════════════════════════════════════════════════════════
   LESSON VIEWER — the workspace layer (v2.36.0)
   Tokens only. --ea-lv-scale is the one new custom property; it multiplies the
   reading column's type and nothing else, so the chrome never grows with it.
   ══════════════════════════════════════════════════════════════════════════ */

.ea-lv { --ea-lv-scale: 1; }

/* ---- the controls ---- */
.ea-lv-tools { display: flex; gap: 4px; align-items: center; }
.ea-lv-tool {
  width: 30px; height: 30px; border-radius: 8px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ea-border); background: transparent;
  color: var(--ea-text-muted); cursor: pointer; font: inherit;
  transition: color .15s, border-color .15s, background .15s;
}
.ea-lv-tool:hover:not(:disabled) { color: var(--ea-text); border-color: var(--ea-border-hover); }
.ea-lv-tool:disabled { opacity: .38; cursor: default; }
/* is-on must not rely on colour alone — it inverts, so it reads as pressed even
   in greyscale or to someone who cannot separate the two hues. */
.ea-lv-tool.is-on { background: var(--ea-text); color: var(--ea-bg); border-color: transparent; }
.ea-lv-tool__a { font-size: 13px; font-weight: 700; line-height: 1; }
.ea-lv-tool__a--sm { font-size: 10px; }

/* THE FOCUS RING.
   There were exactly two :focus rules across ~145 .ea-lv selectors, and one of them
   was `outline: none` — which removes the only thing telling a keyboard user where
   they are. :focus-visible so a mouse click does not draw it. */
.ea-lv :focus-visible {
  outline: 2px solid var(--ea-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- focus mode ---- */
.ea-lv--focus .ea-lv-eta,
.ea-lv--focus .ea-lv-course { display: none; }
/* Hide the rail with focus mode ONLY where it occupies space. Below 961px the rail is
   already the off-canvas drawer (the @960 block), and an unconditional display:none there
   broke it: the hamburger stays, tapping it opens the scrim, but no rail slides in — a
   learner who once enabled focus mode on desktop then had no syllabus on their phone. */
@media (min-width: 961px) { .ea-lv--focus .ea-lv-side { display: none; } }
.ea-lv--focus .ea-lv-layout { grid-template-columns: 1fr; }
/* Narrow to a reading measure. 68ch is the readable line length — the point of focus
   mode is not "fewer things", it is "easier to read". */
.ea-lv--focus .ea-lv-content { max-width: 68ch; margin-inline: auto; }

/* ---- text size ---- */
/* Scoped to the reading column ONLY. Scaling the whole viewer would push the rail and
   the controls around, which is not what someone asking for bigger text wants. */
.ea-lv-content .ea-prose,
.ea-lv-content .ea-lv-body { font-size: calc(1rem * var(--ea-lv-scale)); }
.ea-lv-content .ea-prose p { line-height: calc(1.6 + (var(--ea-lv-scale) - 1) * .35); }

/* ---- rail search ---- */
.ea-lv-find { display: block; padding: 10px 12px 0; }
.ea-lv-find input {
  width: 100%; padding: 7px 10px; font: inherit; font-size: 13px;
  border: 1px solid var(--ea-border); border-radius: 8px;
  background: var(--ea-bg); color: var(--ea-text);
}
.ea-lv-find input::placeholder { color: var(--ea-text-muted); }
.ea-lv-find__empty { padding: 10px 14px; margin: 0; font-size: 12.5px; color: var(--ea-text-muted); }

/* ---- shortcuts dialog ---- */
.ea-lv-help {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); padding: 20px;
}
.ea-lv-help[hidden] { display: none; }
.ea-lv-help__box {
  background: var(--ea-card-bg); border: 1px solid var(--ea-border);
  border-radius: 14px; padding: 18px 20px; min-width: 260px; max-width: 340px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.ea-lv-help__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ea-lv-help__h h2 { font-size: 15px; margin: 0; color: var(--ea-text); }
.ea-lv-help__l > div { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.ea-lv-help__l dt { font-size: 13px; color: var(--ea-text-muted); }
.ea-lv-help__l dd { margin: 0; }
.ea-lv-help__l kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--ea-border); background: var(--ea-bg); color: var(--ea-text);
}

/* ---- the measured contrast failures ---- */
/* The autoplay knob was #fff on --ea-neutral-300 (#CFCFCF) = 1.56:1, and #fff on the
   checked --ea-accent in dark (#8fa6d9) = 2.44:1. Both are under the 3:1 floor for a
   non-text control, in BOTH themes. --ea-bg is the page, so the knob is always the
   maximum available separation from whatever the track is. */
.ea-lv .ea-lv-sw::after { background: var(--ea-bg); box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.ea-lv .ea-lv-autoplay input:not(:checked) + .ea-lv-sw { background: var(--ea-neutral-500, #8a8a8a); }

/* --ea-text-muted fails AA on TINTED surfaces: #707070 on --ea-bg-muted (#F2F2F2) is
   4.42:1, and #8C8C8C on --ea-bg-alt (#2A2A2A) is 4.27:1 — and --ea-bg-alt is the rail,
   so every lesson duration in it failed AA in dark. --ea-text-secondary clears it on
   both. The token is fine on the page background; it is tinted surfaces it cannot hold. */
.ea-lv-side .ea-lv-les__dur,
.ea-lv-side .ea-lv-mod__count,
.ea-lv-media__placeholder p { color: var(--ea-text-secondary, #4a4a4a); }

/* ---- a locked lesson ---- */
/* Author's-eye view of a lock they are walking through. NOT the learner's locked screen:
   the lesson below stays fully usable. This only reports, because an author who cannot
   see their own lock cannot tell it from a lock that never saved. */
.ea-lv-byp { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; margin: 0 0 18px;
  border: 1px solid var(--ea-warn); border-radius: 10px; background: var(--ea-warn-soft); }
.ea-lv-byp__i { width: 19px; height: 19px; flex: 0 0 19px; color: var(--ea-warn); margin-top: 1px; }
.ea-lv-byp__b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ea-lv-byp__t { font-size: 13.5px; color: var(--ea-text-heading); }
.ea-lv-byp__s { font-size: 12.5px; color: var(--ea-text-secondary); line-height: 1.55; }

/* A bypassed row in the rail: readable, still clickable, plainly shut to learners. The
   shackle carries the meaning — colour is never the only signal. */
.ea-lv-les--byp .ea-lv-les__dur { color: var(--ea-warn); }
.ea-lv-les__lk { flex: 0 0 11px; color: var(--ea-warn); }

.ea-lv-locked { text-align: center; padding: 56px 24px; }
.ea-lv-locked__i { width: 34px; height: 34px; color: var(--ea-warn); margin-bottom: 12px; }
.ea-lv-locked__t { font-size: 19px; margin: 0 0 8px; color: var(--ea-text); }
.ea-lv-locked__s { font-size: 14px; color: var(--ea-text-secondary); max-width: 44ch; margin: 0 auto 18px; line-height: 1.65; }
/* The rail row. Not colour alone — the date replaces the duration, so the row says why
   in words even if the tint is invisible to you. */
.ea-lv-les--locked > a { opacity: .62; }
.ea-lv-les--locked .ea-lv-les__dur { color: var(--ea-warn); font-weight: 600; }

/* ---- in-place navigation ---- */
/* The swap is usually faster than the eye, so this is a HINT, not a spinner: enough to
   say "something is happening" on a slow connection, not enough to add a flicker to a
   150ms swap. Pointer-events off so a second click cannot race the first. */
.ea-lv.is-swapping .ea-lv-content { opacity: .55; pointer-events: none; }
.ea-lv .ea-lv-content { transition: opacity .12s ease-out; }
/* The swap moves focus to the title so a screen reader announces the new lesson. It
   must not draw a ring for a mouse user who never asked for focus. */
.ea-lv .ea-lv-title:focus { outline: none; }
.ea-lv .ea-lv-title:focus-visible { outline: 2px solid var(--ea-accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ea-lv-tool { transition: none; }
  .ea-lv .ea-lv-content { transition: none; }
}

/* Scheduled release — shown instead of the Enrol button before a course opens. */
.ea-enroll-card__soon{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;
  background:var(--ea-warn-soft,rgba(183,121,31,.10));color:var(--ea-text,#1a1a1a);
  font-size:13px;line-height:1.55}
.ea-enroll-card__soon svg{flex:0 0 18px;color:var(--ea-warn,#B7791F);margin-top:1px}

/* Assignments. Tokens only, so it flips with the theme like everything else. */
/* --ea-border, not --ea-line: I invented --ea-line and it is defined NOWHERE, so every
   one of these fell through to the #e5e5e5 fallback — a near-white hairline on a #2A2A2A
   card in dark mode. The exact mistake the hub's --prof-text-muted made: a token used
   many times and declared never. */
.ea-lv-assign{margin:18px 0;padding:16px 18px;border:1px solid var(--ea-border,#e5e5e5);border-radius:12px;background:var(--ea-surface,#fafafa)}
.ea-lv-assign__due{display:flex;align-items:center;gap:6px;margin:0 0 12px;font-size:13px;color:var(--ea-text-muted,#707070)}
.ea-lv-assign__due.is-closed{color:var(--ea-warn,#B7791F);font-weight:600}
.ea-lv-assign__due-i{flex:0 0 15px}
.ea-lv-assign__closed{display:flex;align-items:center;gap:9px;margin:12px 0 0;padding:12px 14px;
  border:1px solid var(--ea-warn,#B7791F);border-radius:10px;background:var(--ea-warn-soft,rgba(183,121,31,.08));
  color:var(--ea-text,#1a1a1a);font-size:13px;line-height:1.5}
.ea-lv-assign__closed svg{flex:0 0 16px;color:var(--ea-warn,#B7791F)}
.ea-lv-assign__l{display:block;font-size:13px;font-weight:600;margin:12px 0 5px;color:var(--ea-text,#1a1a1a)}
.ea-lv-assign__ta,.ea-lv-assign__in{width:100%;padding:10px 12px;border:1px solid var(--ea-border,#e5e5e5);
  border-radius:8px;background:var(--ea-bg,#fff);color:var(--ea-text,#1a1a1a);font:inherit;font-size:14px}
.ea-lv-assign__ta:focus,.ea-lv-assign__in:focus{outline:2px solid var(--ea-gold,#B7791F);outline-offset:1px}
.ea-lv-assign__form button{margin-top:14px}
.ea-lv-assign__note{margin:10px 0 0;font-size:12.5px;color:var(--ea-text-muted,#707070)}
.ea-lv-assign__state{padding:12px 14px;border-radius:9px;font-size:13.5px;line-height:1.6;margin-bottom:14px;
  background:var(--ea-bg,#fff);border:1px solid var(--ea-border,#e5e5e5)}
.ea-lv-assign__state--graded{border-color:var(--ea-green,#0F6E56)}
.ea-lv-assign__state--returned{border-color:var(--ea-warn,#B7791F)}
.ea-lv-assign__fb{margin:8px 0 0;color:var(--ea-text-muted,#707070)}
.ea-lv-assign__meta{display:block;margin-top:6px;font-size:11.5px;color:var(--ea-text-muted,#707070)}
.ea-lv-flash{padding:11px 14px;border-radius:9px;font-size:13.5px;margin:0 0 16px}
.ea-lv-flash.is-ok{background:rgba(15,110,86,.10);color:var(--ea-green,#0F6E56)}
.ea-lv-flash.is-err{background:rgba(179,38,30,.10);color:var(--ea-red,#B3261E)}