/* ============================================================
   Learn4D Plugin — Scoped Stylesheet v2
   ALL rules are scoped under .learn4d-app.
   Zero :root pollution — no conflict with Astra or Elementor.
   Class prefix: l4d- (avoids collisions with any theme).
   ============================================================ */

/* ── Custom properties — scoped to the app wrapper ─────────── */
.learn4d-app {
  /* Neutral */
  --l4d-c-bg:           #FAF9F7;
  --l4d-c-surface:      #FFFFFF;
  --l4d-c-border:       #E2DDD8;
  --l4d-c-text:         #2C2C2C;
  --l4d-c-text-mid:     #555555;
  --l4d-c-text-light:   #888888;
  --l4d-c-shadow:       rgba(0,0,0,.07);

  /* Subject pastels */
  --l4d-c-hebrew:       #B8D4E8;
  --l4d-c-hebrew-dark:  #1a4d6e;
  --l4d-c-math:         #F5E6A3;
  --l4d-c-math-dark:    #5a4a00;
  --l4d-c-english:      #B8E4C8;
  --l4d-c-english-dark: #1a5c34;
  --l4d-c-science:      #F5C9B3;
  --l4d-c-science-dark: #6b2c00;

  /* Learning style pastels */
  --l4d-c-text-style:     #EDE0FF;
  --l4d-c-media-style:    #FFE0F0;
  --l4d-c-practice-style: #E0FFE8;

  /* Challenge level pastels */
  --l4d-c-knowledge:     #F0E8FF;
  --l4d-c-comprehension: #E8F4FF;
  --l4d-c-application:   #E8FFF0;

  /* Typography */
  --l4d-font:    'Heebo', 'Arial Hebrew', 'David', Arial, sans-serif;
  --l4d-fs-xs:   .75rem;
  --l4d-fs-sm:   .875rem;
  --l4d-fs-base: 1rem;
  --l4d-fs-md:   1.125rem;
  --l4d-fs-lg:   1.25rem;
  --l4d-fs-xl:   1.5rem;
  --l4d-fs-2xl:  2rem;
  --l4d-fs-3xl:  2.5rem;
  --l4d-fw-4: 400;
  --l4d-fw-5: 500;
  --l4d-fw-7: 700;
  --l4d-fw-9: 900;
  --l4d-lh-tight: 1.25;
  --l4d-lh-base:  1.6;
  --l4d-lh-loose: 1.8;

  /* Spacing (8px grid) */
  --l4d-sp-1: .5rem;
  --l4d-sp-2: 1rem;
  --l4d-sp-3: 1.5rem;
  --l4d-sp-4: 2rem;
  --l4d-sp-6: 3rem;
  --l4d-sp-8: 4rem;

  /* Radii */
  --l4d-r-sm:   .5rem;
  --l4d-r-md:   1rem;
  --l4d-r-lg:   1.5rem;
  --l4d-r-full: 999px;

  /* Transitions */
  --l4d-t-fast: 120ms ease;
  --l4d-t-base: 200ms ease;

  /* ── Base layout for this component ── */
  direction: rtl;
  font-family: var(--l4d-font);
  font-size: var(--l4d-fs-base);
  line-height: var(--l4d-lh-base);
  color: var(--l4d-c-text);
  -webkit-font-smoothing: antialiased;
}

/* Box-sizing reset — scoped */
.learn4d-app *,
.learn4d-app *::before,
.learn4d-app *::after { box-sizing: border-box; }

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

.learn4d-app ul,
.learn4d-app ol { padding-right: var(--l4d-sp-3); padding-left: 0; }

/* Focus — accessibility */
.learn4d-app a:focus-visible,
.learn4d-app button:focus-visible {
  outline: 3px solid var(--l4d-c-hebrew-dark);
  outline-offset: 2px;
  border-radius: var(--l4d-r-sm);
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.learn4d-app .l4d-breadcrumb {
  font-size: var(--l4d-fs-sm);
  color: var(--l4d-c-text-light);
  padding-block: var(--l4d-sp-2);
}
.learn4d-app .l4d-breadcrumb a {
  color: var(--l4d-c-text-mid);
  text-decoration: none;
}
.learn4d-app .l4d-breadcrumb a:hover { text-decoration: underline; }

/* ── Container (shortcode/embedded context) ─────────────────── */
.learn4d-app .l4d-container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--l4d-sp-3);
}

/* ── Section headings ───────────────────────────────────────── */
.learn4d-app .l4d-section__title {
  font-size: var(--l4d-fs-xl);
  font-weight: var(--l4d-fw-7);
  margin: 0 0 var(--l4d-sp-3);
  color: var(--l4d-c-text);
}
.learn4d-app .l4d-section__title--center { text-align: center; }
.learn4d-app .l4d-section__quiz-badge {
  display: inline-block;
  font-size: var(--l4d-fs-sm);
  font-weight: var(--l4d-fw-5);
  background: var(--l4d-c-application);
  color: #1a5c34;
  border-radius: var(--l4d-r-sm);
  padding: .1em .5em;
  margin-inline-start: .5rem;
  vertical-align: middle;
}

/* ── Buttons ────────────────────────────────────────────────── */
.learn4d-app .l4d-btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .75em 1.75em;
  border-radius: var(--l4d-r-full);
  border: none;
  font-family: var(--l4d-font);
  font-size: var(--l4d-fs-md);
  font-weight: var(--l4d-fw-7);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--l4d-t-fast), box-shadow var(--l4d-t-fast);
  line-height: 1;
}
.learn4d-app .l4d-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px var(--l4d-c-shadow); }
.learn4d-app .l4d-btn--primary   { background: var(--l4d-c-text); color: #fff; }
.learn4d-app .l4d-btn--secondary { background: var(--l4d-c-hebrew); color: var(--l4d-c-hebrew-dark); }
.learn4d-app .l4d-btn--lg        { font-size: var(--l4d-fs-lg); padding: .9em 2.2em; }
.learn4d-app .l4d-btn--sm        { font-size: var(--l4d-fs-xs); padding: .35em 1em; border-radius: var(--l4d-r-sm); }
.learn4d-app .l4d-btn:disabled   { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Badge ──────────────────────────────────────────────────── */
.learn4d-app .l4d-badge {
  display: inline-flex;
  align-items: center;
  gap: .2em;
  padding: .15em .5em;
  border-radius: var(--l4d-r-full);
  font-size: var(--l4d-fs-xs);
  font-weight: var(--l4d-fw-5);
  background: var(--l4d-c-border);
  color: var(--l4d-c-text-mid);
  white-space: nowrap;
}

/* ── Audience selector ──────────────────────────────────────── */
.learn4d-app .l4d-audience-selector {
  display: flex;
  justify-content: center;
  gap: var(--l4d-sp-2);
  flex-wrap: wrap;
}
.learn4d-app .l4d-audience-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--l4d-sp-1);
  padding: var(--l4d-sp-3) var(--l4d-sp-4);
  border: 2px solid var(--l4d-c-border);
  border-radius: var(--l4d-r-lg);
  background: var(--l4d-c-surface);
  cursor: pointer;
  font-family: var(--l4d-font);
  font-size: var(--l4d-fs-md);
  font-weight: var(--l4d-fw-5);
  color: var(--l4d-c-text);
  transition: transform var(--l4d-t-base), border-color var(--l4d-t-base), box-shadow var(--l4d-t-base);
  min-width: 130px;
}
.learn4d-app .l4d-audience-btn__icon { font-size: 2.5rem; line-height: 1; }
.learn4d-app .l4d-audience-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px var(--l4d-c-shadow); }
.learn4d-app .l4d-audience-btn[aria-pressed="true"] {
  border-color: var(--l4d-c-hebrew-dark);
  background: var(--l4d-c-hebrew);
  box-shadow: 0 4px 12px var(--l4d-c-shadow);
}

/* ── Grade selector ─────────────────────────────────────────── */
.learn4d-app .l4d-grade-selector {
  display: flex;
  justify-content: center;
  gap: var(--l4d-sp-1);
  flex-wrap: wrap;
}
.learn4d-app .l4d-grade-btn {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--l4d-r-full);
  border: 2px solid var(--l4d-c-border);
  background: var(--l4d-c-surface);
  font-family: var(--l4d-font);
  font-size: var(--l4d-fs-md);
  font-weight: var(--l4d-fw-7);
  cursor: pointer;
  color: var(--l4d-c-text);
  transition: background var(--l4d-t-base), border-color var(--l4d-t-base), transform var(--l4d-t-base);
}
.learn4d-app .l4d-grade-btn:hover { background: var(--l4d-c-bg); transform: scale(1.1); }
.learn4d-app .l4d-grade-btn[aria-pressed="true"] {
  background: var(--l4d-c-text);
  color: #fff;
  border-color: var(--l4d-c-text);
}

/* ── Subject cards ──────────────────────────────────────────── */
.learn4d-app .l4d-subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--l4d-sp-2);
}
.learn4d-app .l4d-subject-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--l4d-sp-1);
  padding: var(--l4d-sp-4);
  border-radius: var(--l4d-r-lg);
  border: 2px solid transparent;
  background: var(--_l4d-card-bg, #eee);
  cursor: pointer;
  font-family: var(--l4d-font);
  font-size: var(--l4d-fs-lg);
  font-weight: var(--l4d-fw-7);
  color: var(--_l4d-card-text, var(--l4d-c-text));
  text-decoration: none;
  transition: transform var(--l4d-t-base), box-shadow var(--l4d-t-base);
  text-align: center;
}
.learn4d-app .l4d-subject-card__icon  { font-size: 3rem; line-height: 1; }
.learn4d-app .l4d-subject-card:hover  { transform: translateY(-4px); box-shadow: 0 10px 28px var(--l4d-c-shadow); }
.learn4d-app .l4d-subject-card[aria-pressed="true"],
.learn4d-app .l4d-subject-card.active { border-color: currentColor; }

.learn4d-app .l4d-subject-card--hebrew  { --_l4d-card-bg: var(--l4d-c-hebrew);  --_l4d-card-text: var(--l4d-c-hebrew-dark); }
.learn4d-app .l4d-subject-card--math    { --_l4d-card-bg: var(--l4d-c-math);    --_l4d-card-text: var(--l4d-c-math-dark); }
.learn4d-app .l4d-subject-card--english { --_l4d-card-bg: var(--l4d-c-english); --_l4d-card-text: var(--l4d-c-english-dark); }
.learn4d-app .l4d-subject-card--science { --_l4d-card-bg: var(--l4d-c-science); --_l4d-card-text: var(--l4d-c-science-dark); }

/* ── Step wizard ────────────────────────────────────────────── */
.learn4d-app .l4d-step-flow { display: flex; flex-direction: column; gap: var(--l4d-sp-4); }
.learn4d-app .l4d-step {
  background: var(--l4d-c-surface);
  border-radius: var(--l4d-r-lg);
  padding: var(--l4d-sp-4);
  box-shadow: 0 2px 12px var(--l4d-c-shadow);
}
.learn4d-app .l4d-step__header {
  display: flex;
  align-items: center;
  gap: var(--l4d-sp-2);
  margin-bottom: var(--l4d-sp-3);
}
.learn4d-app .l4d-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: var(--l4d-r-full);
  background: var(--l4d-c-text);
  color: #fff;
  font-weight: var(--l4d-fw-7);
  font-size: var(--l4d-fs-sm);
  flex-shrink: 0;
}
.learn4d-app .l4d-step__title {
  font-size: var(--l4d-fs-lg);
  font-weight: var(--l4d-fw-7);
  margin: 0;
  color: var(--l4d-c-text);
  font-family: var(--l4d-font);
}

/* ── Matrix ─────────────────────────────────────────────────── */
.learn4d-app .l4d-matrix-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.learn4d-app .l4d-matrix {
  display: grid;
  gap: 2px;
  min-width: 600px;
  background: var(--l4d-c-border);
  border-radius: var(--l4d-r-md);
  overflow: hidden;
}
.learn4d-app .l4d-matrix__corner    { background: var(--l4d-c-bg); }
.learn4d-app .l4d-matrix__col-header {
  padding: var(--l4d-sp-2);
  text-align: center;
  font-family: var(--l4d-font);
  font-weight: var(--l4d-fw-7);
  font-size: var(--l4d-fs-sm);
  line-height: var(--l4d-lh-tight);
}
.learn4d-app .l4d-matrix__col-header--knowledge     { background: var(--l4d-c-knowledge); }
.learn4d-app .l4d-matrix__col-header--comprehension { background: var(--l4d-c-comprehension); }
.learn4d-app .l4d-matrix__col-header--application   { background: var(--l4d-c-application); }

.learn4d-app .l4d-matrix__row-header {
  padding: var(--l4d-sp-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  font-family: var(--l4d-font);
  font-weight: var(--l4d-fw-7);
  font-size: var(--l4d-fs-sm);
  text-align: center;
  line-height: var(--l4d-lh-tight);
}
.learn4d-app .l4d-matrix__row-header--text     { background: var(--l4d-c-text-style); }
.learn4d-app .l4d-matrix__row-header--media    { background: var(--l4d-c-media-style); }
.learn4d-app .l4d-matrix__row-header--practice { background: var(--l4d-c-practice-style); }

.learn4d-app .l4d-matrix__cell {
  background: var(--l4d-c-surface);
  padding: var(--l4d-sp-2);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: var(--l4d-sp-1);
  transition: background var(--l4d-t-fast);
}
.learn4d-app .l4d-matrix__cell:hover { background: #FFFEF8; }
.learn4d-app .l4d-matrix__cell--empty {
  align-items: center;
  justify-content: center;
}
.learn4d-app .l4d-matrix__empty-label {
  color: var(--l4d-c-text-light);
  font-size: var(--l4d-fs-sm);
}

/* ── Lesson card (inside matrix cell) ───────────────────────── */
.learn4d-app .l4d-lesson-card {
  display: block;
  padding: var(--l4d-sp-1) var(--l4d-sp-2);
  border-radius: var(--l4d-r-sm);
  background: var(--l4d-c-bg);
  border: 1px solid var(--l4d-c-border);
  text-decoration: none;
  font-size: var(--l4d-fs-sm);
  font-weight: var(--l4d-fw-5);
  color: var(--l4d-c-text);
  line-height: var(--l4d-lh-tight);
  transition: background var(--l4d-t-fast), box-shadow var(--l4d-t-fast);
  font-family: var(--l4d-font);
}
.learn4d-app .l4d-lesson-card:hover {
  background: var(--l4d-c-surface);
  box-shadow: 0 2px 8px var(--l4d-c-shadow);
}
.learn4d-app .l4d-lesson-card__badges {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  margin-top: .25rem;
}
.learn4d-app .l4d-cell-quiz-btn {
  display: block;
  width: 100%;
  margin-top: var(--l4d-sp-1);
  padding: .25rem .5rem;
  border-radius: var(--l4d-r-sm);
  background: var(--l4d-c-knowledge);
  color: #3a2a00;
  font-size: var(--l4d-fs-xs);
  font-weight: var(--l4d-fw-7);
  text-align: center;
  text-decoration: none;
  transition: opacity var(--l4d-t-fast);
}
.learn4d-app .l4d-cell-quiz-btn:hover { opacity: .8; }

/* ── Filter bar ─────────────────────────────────────────────── */
.learn4d-app .l4d-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--l4d-sp-1);
  flex-wrap: wrap;
  background: var(--l4d-c-surface);
  padding: var(--l4d-sp-2) var(--l4d-sp-3);
  border-radius: var(--l4d-r-md);
  box-shadow: 0 2px 8px var(--l4d-c-shadow);
  margin-bottom: var(--l4d-sp-4);
}
.learn4d-app .l4d-filter-bar__label { font-weight: var(--l4d-fw-7); font-size: var(--l4d-fs-sm); }
.learn4d-app .l4d-filter-pill {
  padding: .35em 1em;
  border-radius: var(--l4d-r-full);
  border: 2px solid var(--l4d-c-border);
  background: var(--l4d-c-bg);
  font-family: var(--l4d-font);
  font-size: var(--l4d-fs-sm);
  font-weight: var(--l4d-fw-5);
  cursor: pointer;
  color: var(--l4d-c-text);
  text-decoration: none;
  transition: background var(--l4d-t-fast), border-color var(--l4d-t-fast), color var(--l4d-t-fast);
}
.learn4d-app .l4d-filter-pill:hover,
.learn4d-app .l4d-filter-pill--active {
  background: var(--l4d-c-text);
  color: #fff;
  border-color: var(--l4d-c-text);
}

/* ── Single lesson ──────────────────────────────────────────── */
.learn4d-app .l4d-lesson-header {
  background: var(--l4d-c-surface);
  border-radius: var(--l4d-r-lg);
  padding: var(--l4d-sp-4);
  margin-bottom: var(--l4d-sp-4);
  box-shadow: 0 2px 12px var(--l4d-c-shadow);
}
.learn4d-app .l4d-lesson-header h1 {
  font-family: var(--l4d-font);
  font-size: var(--l4d-fs-2xl);
  margin: 0 0 var(--l4d-sp-2);
  color: var(--l4d-c-text);
}
.learn4d-app .l4d-lesson-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l4d-sp-1);
}
.learn4d-app .l4d-lesson-content {
  background: var(--l4d-c-surface);
  border-radius: var(--l4d-r-lg);
  padding: var(--l4d-sp-4);
  box-shadow: 0 2px 12px var(--l4d-c-shadow);
  line-height: var(--l4d-lh-loose);
  font-family: var(--l4d-font);
}
.learn4d-app .l4d-lesson-content h2,
.learn4d-app .l4d-lesson-content h3 { font-weight: var(--l4d-fw-7); }
.learn4d-app .l4d-lesson-content a { color: var(--l4d-c-hebrew-dark); text-decoration: underline; }

/* Ministry info */
.learn4d-app .l4d-ministry-info {
  margin-top: var(--l4d-sp-4);
  padding: var(--l4d-sp-3);
  background: var(--l4d-c-bg);
  border-radius: var(--l4d-r-md);
  border: 1px solid var(--l4d-c-border);
  font-size: var(--l4d-fs-sm);
  font-family: var(--l4d-font);
}
.learn4d-app .l4d-ministry-info__label {
  font-weight: var(--l4d-fw-7);
  font-size: var(--l4d-fs-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--l4d-c-text-light);
  margin-bottom: .25rem;
}

/* ── Assessment ─────────────────────────────────────────────── */
.learn4d-app .l4d-assessment-card {
  background: var(--l4d-c-surface);
  border-radius: var(--l4d-r-lg);
  padding: var(--l4d-sp-4);
  box-shadow: 0 4px 20px var(--l4d-c-shadow);
  max-width: 680px;
  margin-inline: auto;
}
.learn4d-app .l4d-assessment-card__title {
  font-family: var(--l4d-font);
  font-size: var(--l4d-fs-xl);
  font-weight: var(--l4d-fw-7);
  margin-bottom: var(--l4d-sp-4);
  text-align: center;
  color: var(--l4d-c-text);
}
.learn4d-app .l4d-choice-group {
  display: flex;
  flex-direction: column;
  gap: var(--l4d-sp-1);
  margin-bottom: var(--l4d-sp-4);
}
.learn4d-app .l4d-choice-group__label {
  font-family: var(--l4d-font);
  font-weight: var(--l4d-fw-7);
  font-size: var(--l4d-fs-md);
  margin-bottom: var(--l4d-sp-1);
  color: var(--l4d-c-text);
}
.learn4d-app .l4d-choice-btn {
  display: flex;
  align-items: center;
  gap: var(--l4d-sp-2);
  padding: var(--l4d-sp-2) var(--l4d-sp-3);
  border: 2px solid var(--l4d-c-border);
  border-radius: var(--l4d-r-md);
  background: var(--l4d-c-surface);
  font-family: var(--l4d-font);
  font-size: var(--l4d-fs-md);
  font-weight: var(--l4d-fw-5);
  cursor: pointer;
  color: var(--l4d-c-text);
  transition: border-color var(--l4d-t-fast), background var(--l4d-t-fast);
  text-align: right;
  width: 100%;
}
.learn4d-app .l4d-choice-btn__icon { font-size: 1.75rem; flex-shrink: 0; }
.learn4d-app .l4d-choice-btn__sub  { font-size: var(--l4d-fs-sm); color: var(--l4d-c-text-mid); margin-top: .1em; }
.learn4d-app .l4d-choice-btn:hover { border-color: var(--l4d-c-text); background: var(--l4d-c-bg); }
.learn4d-app .l4d-choice-btn[aria-pressed="true"] {
  border-color: var(--l4d-c-text);
  background: var(--l4d-c-knowledge);
}

/* ── Notice / toast ─────────────────────────────────────────── */
.learn4d-app .l4d-notice {
  padding: var(--l4d-sp-2) var(--l4d-sp-3);
  border-radius: var(--l4d-r-md);
  font-family: var(--l4d-font);
  font-weight: var(--l4d-fw-5);
  font-size: var(--l4d-fs-sm);
  margin-block: var(--l4d-sp-2);
}
.learn4d-app .l4d-notice--success { background: var(--l4d-c-application); color: #1a5c34; }
.learn4d-app .l4d-notice--error   { background: #FFE0E0; color: #8B0000; }
.learn4d-app .l4d-notice--info    { background: #E8F4FD; color: #1a3a5c; }

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

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .learn4d-app .l4d-matrix     { min-width: 480px; }
  .learn4d-app .l4d-matrix__row-header,
  .learn4d-app .l4d-matrix__col-header { font-size: var(--l4d-fs-xs); padding: var(--l4d-sp-1); }
  .learn4d-app .l4d-subject-grid { grid-template-columns: 1fr 1fr; }
  .learn4d-app .l4d-audience-selector { flex-direction: column; align-items: center; }
  .learn4d-app .l4d-filter-bar { flex-direction: column; align-items: flex-start; }
  .learn4d-app .l4d-step { padding: var(--l4d-sp-3); }
}
@media (max-width: 480px) {
  .learn4d-app .l4d-subject-grid { grid-template-columns: 1fr; }
  .learn4d-app .l4d-matrix__col-header,
  .learn4d-app .l4d-matrix__row-header { display: none; } /* show only cells on very small screens */
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .learn4d-app .l4d-filter-bar { display: none; }
  .learn4d-app .l4d-matrix { border: 1px solid #999; }
}

/* ============================================================
   Quiz & Feedback — v2
   ============================================================ */

/* ── CTA button variant ──────────────────────────────────────── */
.learn4d-app .l4d-btn--cta {
  background: #2E86AB;
  color: #fff;
}
.learn4d-app .l4d-btn--cta:hover { background: #256a88; }

/* ── Quiz container ──────────────────────────────────────────── */
.learn4d-app .l4d-quiz {
  max-width: 740px;
  margin-inline: auto;
  padding: var(--l4d-sp-4) var(--l4d-sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--l4d-sp-4);
}

/* ── Progress bar ────────────────────────────────────────────── */
.learn4d-app .l4d-quiz__progress {
  display: flex;
  flex-direction: column;
  gap: var(--l4d-sp-1);
}
.learn4d-app .l4d-progress-bar {
  height: .5rem;
  background: var(--l4d-c-border);
  border-radius: var(--l4d-r-full);
  overflow: hidden;
}
.learn4d-app .l4d-progress-fill {
  height: 100%;
  background: #2E86AB;
  border-radius: var(--l4d-r-full);
  transition: width .35s ease;
}
.learn4d-app .l4d-progress-text {
  font-size: var(--l4d-fs-sm);
  color: var(--l4d-c-text-mid);
  text-align: center;
}
.learn4d-app .l4d-quiz__difficulty {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--l4d-fs-sm);
  font-weight: var(--l4d-fw-5);
  color: var(--l4d-c-text-mid);
  margin-block-end: var(--l4d-sp-1);
}

/* ── Question card ───────────────────────────────────────────── */
.learn4d-app .l4d-question {
  background: var(--l4d-c-surface);
  border-radius: var(--l4d-r-lg);
  padding: var(--l4d-sp-4);
  box-shadow: 0 2px 16px var(--l4d-c-shadow);
  display: flex;
  flex-direction: column;
  gap: var(--l4d-sp-2);
}
.learn4d-app .l4d-question__num {
  font-size: var(--l4d-fs-xs);
  font-weight: var(--l4d-fw-7);
  color: var(--l4d-c-text-light);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.learn4d-app .l4d-question__text {
  font-size: var(--l4d-fs-lg);
  font-weight: var(--l4d-fw-7);
  margin: 0;
  line-height: var(--l4d-lh-tight);
  color: var(--l4d-c-text);
}
.learn4d-app .l4d-question__body {
  font-size: var(--l4d-fs-base);
  color: var(--l4d-c-text-mid);
  line-height: var(--l4d-lh-base);
}

/* ── Answer options ──────────────────────────────────────────── */
.learn4d-app .l4d-options {
  display: flex;
  flex-direction: column;
  gap: var(--l4d-sp-1);
}
.learn4d-app .l4d-options--tf {
  flex-direction: row;
  gap: var(--l4d-sp-2);
}
.learn4d-app .l4d-option-btn {
  display: flex;
  align-items: center;
  gap: var(--l4d-sp-2);
  padding: var(--l4d-sp-2) var(--l4d-sp-3);
  border: 2px solid var(--l4d-c-border);
  border-radius: var(--l4d-r-md);
  background: var(--l4d-c-bg);
  font-family: var(--l4d-font);
  font-size: var(--l4d-fs-base);
  font-weight: var(--l4d-fw-5);
  color: var(--l4d-c-text);
  cursor: pointer;
  text-align: right;
  width: 100%;
  transition: border-color var(--l4d-t-fast), background var(--l4d-t-fast), box-shadow var(--l4d-t-fast);
}
.learn4d-app .l4d-option-btn:hover {
  border-color: #2E86AB;
  background: var(--l4d-c-comprehension);
}
.learn4d-app .l4d-option-btn--selected,
.learn4d-app .l4d-option-btn[aria-pressed="true"] {
  border-color: #2E86AB;
  background: #D6EDF7;
  box-shadow: 0 0 0 3px rgba(46,134,171,.2);
}
.learn4d-app .l4d-option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem; height: 1.8rem;
  border-radius: var(--l4d-r-full);
  background: var(--l4d-c-border);
  font-size: var(--l4d-fs-sm);
  font-weight: var(--l4d-fw-7);
  flex-shrink: 0;
}
.learn4d-app .l4d-option-btn--selected .l4d-option-letter,
.learn4d-app .l4d-option-btn[aria-pressed="true"] .l4d-option-letter {
  background: #2E86AB;
  color: #fff;
}
.learn4d-app .l4d-option-btn--tf {
  flex: 1;
  justify-content: center;
  font-size: var(--l4d-fs-md);
  font-weight: var(--l4d-fw-7);
}
.learn4d-app .l4d-option-tf-icon { font-size: 1.3em; }

/* Short answer */
.learn4d-app .l4d-sa-wrapper {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.learn4d-app .l4d-sa-label {
  font-weight: var(--l4d-fw-7);
  font-size: var(--l4d-fs-sm);
}
.learn4d-app .l4d-sa-input {
  width: 100%;
  padding: var(--l4d-sp-2);
  border: 2px solid var(--l4d-c-border);
  border-radius: var(--l4d-r-md);
  font-family: var(--l4d-font);
  font-size: var(--l4d-fs-base);
  resize: vertical;
  background: var(--l4d-c-bg);
  color: var(--l4d-c-text);
  transition: border-color var(--l4d-t-fast);
}
.learn4d-app .l4d-sa-input:focus {
  outline: none;
  border-color: #2E86AB;
}

/* ── Quiz nav ────────────────────────────────────────────────── */
.learn4d-app .l4d-quiz__nav {
  display: flex;
  gap: var(--l4d-sp-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ── Inline result panel ─────────────────────────────────────── */
.learn4d-app .l4d-quiz__result {
  background: var(--l4d-c-surface);
  border-radius: var(--l4d-r-lg);
  padding: var(--l4d-sp-4);
  box-shadow: 0 2px 16px var(--l4d-c-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--l4d-sp-3);
  text-align: center;
}
.learn4d-app .l4d-quiz__result-msg {
  font-size: var(--l4d-fs-lg);
  font-weight: var(--l4d-fw-7);
  margin: 0;
}
.learn4d-app .l4d-quiz__feedback-hint {
  color: var(--l4d-c-text-mid);
  font-size: var(--l4d-fs-sm);
  margin: 0;
}
.learn4d-app .l4d-result-sub-title {
  font-weight: var(--l4d-fw-7);
  font-size: var(--l4d-fs-sm);
  margin: var(--l4d-sp-1) 0 .2rem;
  text-align: right;
  width: 100%;
}
.learn4d-app .l4d-result-list {
  margin: 0;
  font-size: var(--l4d-fs-sm);
  text-align: right;
  width: 100%;
}

/* ── Score badge ─────────────────────────────────────────────── */
.learn4d-app .l4d-score-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 6rem; height: 6rem;
  border-radius: var(--l4d-r-full);
  border: 4px solid currentColor;
}
.learn4d-app .l4d-score-value {
  font-size: var(--l4d-fs-2xl);
  font-weight: var(--l4d-fw-9);
  line-height: 1;
}
.learn4d-app .l4d-score-label {
  font-size: var(--l4d-fs-xs);
  font-weight: var(--l4d-fw-5);
  color: inherit;
}
.learn4d-app .l4d-score-pct {
  font-size: var(--l4d-fs-xs);
  opacity: .75;
  margin-top: .1rem;
}
.learn4d-app .l4d-score-badge--high { color: #1a5c34; background: var(--l4d-c-application); }
.learn4d-app .l4d-score-badge--mid  { color: #5a4a00; background: var(--l4d-c-math); }
.learn4d-app .l4d-score-badge--low  { color: #8B0000; background: #FFE0E0; }

/* ── Feedback page ───────────────────────────────────────────── */
.learn4d-app .l4d-feedback {
  max-width: 800px;
  margin-inline: auto;
  padding: var(--l4d-sp-4) var(--l4d-sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--l4d-sp-4);
}
.learn4d-app .l4d-feedback__header {
  display: flex;
  align-items: center;
  gap: var(--l4d-sp-4);
  background: var(--l4d-c-surface);
  border-radius: var(--l4d-r-lg);
  padding: var(--l4d-sp-4);
  box-shadow: 0 2px 16px var(--l4d-c-shadow);
}
.learn4d-app .l4d-feedback__intro {
  font-size: var(--l4d-fs-lg);
  font-weight: var(--l4d-fw-5);
  margin: 0;
}
.learn4d-app .l4d-feedback__section {
  background: var(--l4d-c-surface);
  border-radius: var(--l4d-r-lg);
  padding: var(--l4d-sp-4);
  box-shadow: 0 2px 12px var(--l4d-c-shadow);
}
.learn4d-app .l4d-feedback__section-title {
  font-size: var(--l4d-fs-md);
  font-weight: var(--l4d-fw-7);
  margin: 0 0 var(--l4d-sp-3);
}

/* Score bars */
.learn4d-app .l4d-score-bars {
  display: flex;
  flex-direction: column;
  gap: var(--l4d-sp-2);
}
.learn4d-app .l4d-score-bar {
  display: grid;
  grid-template-columns: 7rem 1fr 3rem;
  align-items: center;
  gap: var(--l4d-sp-2);
}
.learn4d-app .l4d-score-bar__label {
  font-size: var(--l4d-fs-sm);
  font-weight: var(--l4d-fw-7);
  white-space: nowrap;
}
.learn4d-app .l4d-score-bar__track {
  height: 1rem;
  background: var(--l4d-c-border);
  border-radius: var(--l4d-r-full);
  overflow: hidden;
}
.learn4d-app .l4d-score-bar__fill {
  height: 100%;
  border-radius: var(--l4d-r-full);
  min-width: 2px;
  transition: width .5s ease;
}
.learn4d-app .l4d-score-bar__pct {
  font-size: var(--l4d-fs-sm);
  font-weight: var(--l4d-fw-7);
  text-align: left;
  color: var(--l4d-c-text-mid);
}

/* Strengths & Weaknesses columns */
.learn4d-app .l4d-feedback__sw {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--l4d-sp-3);
}
.learn4d-app .l4d-feedback__sw-col h3 {
  font-size: var(--l4d-fs-md);
  font-weight: var(--l4d-fw-7);
  margin: 0 0 var(--l4d-sp-1);
}
.learn4d-app .l4d-feedback__sw-col--strong { border-right: 3px solid var(--l4d-c-application); padding-right: var(--l4d-sp-2); }
.learn4d-app .l4d-feedback__sw-col--weak   { border-right: 3px solid #FFE0E0;                   padding-right: var(--l4d-sp-2); }
.learn4d-app .l4d-feedback__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.learn4d-app .l4d-feedback__list li { font-size: var(--l4d-fs-sm); }

/* Recommendation reason */
.learn4d-app .l4d-feedback__rec-reason {
  margin: 0 0 var(--l4d-sp-3);
  color: var(--l4d-c-text-mid);
  font-size: var(--l4d-fs-sm);
}

/* Unit cards */
.learn4d-app .l4d-unit-cards {
  display: flex;
  flex-direction: column;
  gap: var(--l4d-sp-2);
}
.learn4d-app .l4d-unit-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--l4d-sp-2);
  padding: var(--l4d-sp-2) var(--l4d-sp-3);
  border: 2px solid var(--l4d-c-border);
  border-radius: var(--l4d-r-md);
  background: var(--l4d-c-bg);
  text-decoration: none;
  color: var(--l4d-c-text);
  transition: border-color var(--l4d-t-fast), box-shadow var(--l4d-t-fast);
}
.learn4d-app .l4d-unit-card:hover {
  border-color: #2E86AB;
  box-shadow: 0 4px 16px var(--l4d-c-shadow);
}
.learn4d-app .l4d-unit-card__thumb img {
  width: 60px; height: 60px;
  object-fit: cover;
  border-radius: var(--l4d-r-sm);
}
.learn4d-app .l4d-unit-card__title {
  font-size: var(--l4d-fs-md);
  font-weight: var(--l4d-fw-7);
  margin: 0 0 .25rem;
}
.learn4d-app .l4d-unit-card__tags {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
}
.learn4d-app .l4d-unit-card__arrow {
  font-size: var(--l4d-fs-lg);
  color: var(--l4d-c-text-light);
  flex-shrink: 0;
}

/* ── Responsive (V2) ────────────────────────────────────────── */
@media (max-width: 600px) {
  .learn4d-app .l4d-feedback__sw   { grid-template-columns: 1fr; }
  .learn4d-app .l4d-score-bar      { grid-template-columns: 5rem 1fr 2.5rem; }
  .learn4d-app .l4d-options--tf    { flex-direction: column; }
  .learn4d-app .l4d-feedback__header { flex-direction: column; align-items: flex-start; }
  .learn4d-app .l4d-unit-card      { grid-template-columns: 1fr auto; }
  .learn4d-app .l4d-unit-card__thumb { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   Phase 3 — Archive navigation, hints, video, stats, teacher dash
   ════════════════════════════════════════════════════════════════ */

/* ── Archive: intro + empty states ──────────────────────────── */
.learn4d-app .l4d-archive-intro {
  text-align: center;
  padding: var(--l4d-sp-6) var(--l4d-sp-4);
  color: var(--l4d-c-text-mid);
  font-size: var(--l4d-fs-lg);
}
.learn4d-app .l4d-archive-empty {
  text-align: center;
  padding: var(--l4d-sp-5) var(--l4d-sp-4);
  background: var(--l4d-c-surface);
  border-radius: var(--l4d-r-lg);
  color: var(--l4d-c-text-mid);
  font-size: var(--l4d-fs-md);
  margin-top: var(--l4d-sp-4);
}

/* ── Grade picker grid ───────────────────────────────────────── */
.learn4d-app .l4d-grade-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--l4d-sp-3);
  margin-top: var(--l4d-sp-4);
}
.learn4d-app .l4d-grade-pill-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--l4d-sp-3) var(--l4d-sp-2);
  background: var(--l4d-c-surface);
  border: 2px solid var(--l4d-c-border);
  border-radius: var(--l4d-r-lg);
  text-decoration: none;
  color: var(--l4d-c-text);
  font-weight: var(--l4d-fw-7);
  font-size: var(--l4d-fs-md);
  transition: border-color var(--l4d-t-fast), box-shadow var(--l4d-t-fast), background var(--l4d-t-fast);
}
.learn4d-app .l4d-grade-pill-card:hover,
.learn4d-app .l4d-grade-pill-card--active {
  border-color: #2E86AB;
  background: #EBF5FB;
  box-shadow: 0 4px 14px var(--l4d-c-shadow);
}

/* ── Video embed wrapper (responsive 16:9) ───────────────────── */
.learn4d-app .l4d-question__video {
  margin-bottom: var(--l4d-sp-3);
}
.learn4d-app .l4d-video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--l4d-r-md);
  overflow: hidden;
  background: #000;
}
.learn4d-app .l4d-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Hint UI ─────────────────────────────────────────────────── */
.learn4d-app .l4d-hint-row {
  margin-top: var(--l4d-sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--l4d-sp-2);
}
.learn4d-app .l4d-hint-btn {
  align-self: flex-start;
  padding: .4rem .9rem;
  border: 2px solid #F9CA24;
  border-radius: var(--l4d-r-full);
  background: #FFFDE7;
  color: #7D6608;
  font-size: var(--l4d-fs-sm);
  font-weight: var(--l4d-fw-7);
  cursor: pointer;
  transition: background var(--l4d-t-fast), border-color var(--l4d-t-fast);
}
.learn4d-app .l4d-hint-btn:hover {
  background: #FFF9C4;
  border-color: #F0B429;
}
.learn4d-app .l4d-hint-btn--used {
  background: #FFF3CD;
  border-color: #F0B429;
  color: #856404;
  cursor: default;
}
.learn4d-app .l4d-hint-text {
  padding: var(--l4d-sp-2) var(--l4d-sp-3);
  background: #FFFDE7;
  border-right: 4px solid #F9CA24;
  border-radius: var(--l4d-r-sm);
  font-size: var(--l4d-fs-sm);
  color: var(--l4d-c-text);
  line-height: 1.6;
}

/* ── Stats dashboard ─────────────────────────────────────────── */
.learn4d-app .l4d-stats-dash {
  max-width: 900px;
  margin-inline: auto;
  padding: var(--l4d-sp-4) var(--l4d-sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--l4d-sp-5);
}

/* Student selector bar */
.learn4d-app .l4d-stats__student-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--l4d-sp-2);
  padding: var(--l4d-sp-2) var(--l4d-sp-3);
  background: var(--l4d-c-surface);
  border-radius: var(--l4d-r-lg);
  border: 1px solid var(--l4d-c-border);
}
.learn4d-app .l4d-stats__viewing-banner {
  margin: 0;
  padding: var(--l4d-sp-2) var(--l4d-sp-3);
  background: #EBF5FB;
  border-radius: var(--l4d-r-md);
  font-size: var(--l4d-fs-sm);
  color: #154360;
  border-right: 4px solid #2E86AB;
}

/* Overview row */
.learn4d-app .l4d-stats__overview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l4d-sp-3);
}
.learn4d-app .l4d-stat-card {
  flex: 1 1 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: var(--l4d-sp-3) var(--l4d-sp-2);
  background: var(--l4d-c-surface);
  border-radius: var(--l4d-r-lg);
  box-shadow: 0 2px 10px var(--l4d-c-shadow);
  min-width: 8rem;
  text-align: center;
}
.learn4d-app .l4d-stat-card__num {
  font-size: 2rem;
  font-weight: var(--l4d-fw-9);
  line-height: 1;
  color: var(--l4d-c-text);
}
.learn4d-app .l4d-stat-card__lbl {
  font-size: var(--l4d-fs-sm);
  color: var(--l4d-c-text-mid);
}

/* Stats sections */
.learn4d-app .l4d-stats__section {
  background: var(--l4d-c-surface);
  border-radius: var(--l4d-r-lg);
  padding: var(--l4d-sp-4);
  box-shadow: 0 2px 12px var(--l4d-c-shadow);
}

/* Two-column layout for style + challenge */
.learn4d-app .l4d-stats__two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--l4d-sp-4);
}

/* Hint analysis row */
.learn4d-app .l4d-stats__hint-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l4d-sp-3);
  margin-bottom: var(--l4d-sp-3);
}
.learn4d-app .l4d-hint-stat {
  flex: 1 1 8rem;
  text-align: center;
  padding: var(--l4d-sp-2);
  background: #FFFDE7;
  border-radius: var(--l4d-r-md);
  border: 1px solid #F9CA24;
}
.learn4d-app .l4d-hint-stat__num {
  font-size: 1.6rem;
  font-weight: var(--l4d-fw-9);
  color: #856404;
}
.learn4d-app .l4d-hint-stat__lbl {
  font-size: var(--l4d-fs-sm);
  color: #7D6608;
  margin-top: .2rem;
}
.learn4d-app .l4d-stats__hint-insight {
  margin: 0;
  padding: var(--l4d-sp-2) var(--l4d-sp-3);
  background: #F0F9FF;
  border-radius: var(--l4d-r-sm);
  font-size: var(--l4d-fs-sm);
  color: #0B4F7E;
  border-right: 4px solid #2E86AB;
}

/* ── Tables ──────────────────────────────────────────────────── */
.learn4d-app .l4d-table-wrap {
  overflow-x: auto;
  border-radius: var(--l4d-r-md);
  border: 1px solid var(--l4d-c-border);
}
.learn4d-app .l4d-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--l4d-fs-sm);
}
.learn4d-app .l4d-table th,
.learn4d-app .l4d-table td {
  padding: .55rem var(--l4d-sp-2);
  text-align: right;
  border-bottom: 1px solid var(--l4d-c-border);
  white-space: nowrap;
}
.learn4d-app .l4d-table th {
  background: var(--l4d-c-surface);
  font-weight: var(--l4d-fw-7);
  color: var(--l4d-c-text-mid);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.learn4d-app .l4d-table tbody tr:last-child td { border-bottom: none; }
.learn4d-app .l4d-table tbody tr:hover td { background: #F8FBFE; }

/* Score pills */
.learn4d-app .l4d-score-pill {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: var(--l4d-r-full);
  font-size: .72rem;
  font-weight: var(--l4d-fw-7);
  line-height: 1.4;
}
.learn4d-app .l4d-score-pill--high { background: #D1FAE5; color: #065F46; }
.learn4d-app .l4d-score-pill--mid  { background: #FEF3C7; color: #92400E; }
.learn4d-app .l4d-score-pill--low  { background: #FEE2E2; color: #991B1B; }

/* ── Teacher dashboard ───────────────────────────────────────── */
.learn4d-app .l4d-teacher-dash {
  max-width: 900px;
  margin-inline: auto;
  padding: var(--l4d-sp-4) var(--l4d-sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--l4d-sp-5);
}
.learn4d-app .l4d-teacher-dash h2 {
  font-size: var(--l4d-fs-xl);
  font-weight: var(--l4d-fw-9);
  margin: 0;
}

/* Link-student form */
.learn4d-app .l4d-link-form {
  display: flex;
  gap: var(--l4d-sp-2);
  align-items: flex-end;
  flex-wrap: wrap;
  padding: var(--l4d-sp-3);
  background: var(--l4d-c-surface);
  border-radius: var(--l4d-r-lg);
  border: 1px solid var(--l4d-c-border);
}
.learn4d-app .l4d-link-form label {
  font-size: var(--l4d-fs-sm);
  font-weight: var(--l4d-fw-7);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1 1 15rem;
}
.learn4d-app .l4d-link-form input[type="text"] {
  padding: .45rem .75rem;
  border: 1px solid var(--l4d-c-border);
  border-radius: var(--l4d-r-sm);
  font-size: var(--l4d-fs-sm);
  width: 100%;
  box-sizing: border-box;
}
.learn4d-app .l4d-link-form input[type="text"]:focus {
  outline: 2px solid #2E86AB;
  outline-offset: 1px;
  border-color: #2E86AB;
}
.learn4d-app .l4d-link-status {
  font-size: var(--l4d-fs-sm);
  margin: 0;
  min-height: 1.4em;
}
.learn4d-app .l4d-link-status--ok    { color: #065F46; }
.learn4d-app .l4d-link-status--error { color: #991B1B; }

/* Unlink button (inside table) */
.learn4d-app .l4d-btn--unlink {
  padding: .25rem .6rem;
  font-size: .72rem;
  border: 1px solid #FECACA;
  border-radius: var(--l4d-r-sm);
  background: #FFF5F5;
  color: #991B1B;
  cursor: pointer;
  transition: background var(--l4d-t-fast);
}
.learn4d-app .l4d-btn--unlink:hover {
  background: #FEE2E2;
}

/* ── Responsive (Phase 3) ────────────────────────────────────── */
@media (max-width: 700px) {
  .learn4d-app .l4d-stats__two-col   { grid-template-columns: 1fr; }
  .learn4d-app .l4d-stats__overview  { gap: var(--l4d-sp-2); }
  .learn4d-app .l4d-stat-card        { flex-basis: calc(50% - var(--l4d-sp-2)); }
  .learn4d-app .l4d-grade-picker-grid { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
  .learn4d-app .l4d-link-form        { flex-direction: column; }
}
@media (max-width: 480px) {
  .learn4d-app .l4d-stat-card        { flex-basis: 100%; }
  .learn4d-app .l4d-stats__hint-row  { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════
   Phase 4 — Name input, greeting bar, quiz pre-selector, grade lock
   ════════════════════════════════════════════════════════════════ */

/* ── Name input (wizard step 1) ──────────────────────────────── */
.learn4d-app .l4d-name-input-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--l4d-sp-2);
  max-width: 480px;
  margin-inline: auto;
}
.learn4d-app .l4d-name-label {
  font-weight: var(--l4d-fw-7);
  font-size: var(--l4d-fs-md);
  color: var(--l4d-c-text);
}
.learn4d-app .l4d-name-row {
  display: flex;
  gap: var(--l4d-sp-2);
  align-items: stretch;
}
.learn4d-app .l4d-name-input {
  flex: 1;
  padding: .65rem 1rem;
  border: 2px solid var(--l4d-c-border);
  border-radius: var(--l4d-r-full);
  font-family: var(--l4d-font);
  font-size: var(--l4d-fs-md);
  color: var(--l4d-c-text);
  background: var(--l4d-c-surface);
  direction: auto;
  transition: border-color var(--l4d-t-fast);
}
.learn4d-app .l4d-name-input:focus {
  outline: none;
  border-color: var(--l4d-c-hebrew-dark);
}
.learn4d-app .l4d-name-note {
  font-size: var(--l4d-fs-xs);
  color: var(--l4d-c-text-light);
  margin: 0;
}
.learn4d-app .l4d-name-error {
  font-size: var(--l4d-fs-sm);
  color: #c0392b;
  margin: 0;
  font-weight: var(--l4d-fw-5);
}
@media (max-width: 480px) {
  .learn4d-app .l4d-name-row { flex-direction: column; }
}

/* ── Greeting bar (global, outside .learn4d-app scope) ───────── */
.l4d-greeting-bar {
  position: fixed;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 1.25rem;
  background: #1a4d6e;
  color: #fff;
  font-family: 'Heebo', 'Arial Hebrew', Arial, sans-serif;
  font-size: .875rem;
  direction: rtl;
  box-shadow: 0 -2px 12px rgba(0,0,0,.2);
}
.l4d-greeting-bar[hidden] { display: none; }
.l4d-greeting-bar__text   { line-height: 1.4; }
.l4d-greeting-bar__clear  {
  flex-shrink: 0;
  padding: .3rem .85rem;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: .8rem;
  cursor: pointer;
  transition: background 150ms ease;
  white-space: nowrap;
}
.l4d-greeting-bar__clear:hover {
  background: rgba(255,255,255,.15);
}
/* Push page content up so bar doesn't overlap footer content */
body { padding-bottom: 2.8rem; }

/* ── Quiz pre-selector ───────────────────────────────────────── */
.learn4d-app .l4d-quiz-pre {
  max-width: 680px;
  margin-inline: auto;
  padding: var(--l4d-sp-4) var(--l4d-sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--l4d-sp-4);
}
.learn4d-app .l4d-quiz-pre__grade-badge {
  text-align: center;
  font-weight: var(--l4d-fw-7);
  font-size: var(--l4d-fs-md);
  padding: .4rem 1.25rem;
  background: var(--l4d-c-comprehension);
  border-radius: var(--l4d-r-full);
  display: inline-block;
  align-self: center;
  color: #0B4F7E;
}
.learn4d-app .l4d-quiz-pre__section {
  background: var(--l4d-c-surface);
  border-radius: var(--l4d-r-lg);
  padding: var(--l4d-sp-3) var(--l4d-sp-4);
  box-shadow: 0 2px 10px var(--l4d-c-shadow);
}
.learn4d-app .l4d-quiz-pre__label {
  font-size: var(--l4d-fs-md);
  font-weight: var(--l4d-fw-7);
  margin: 0 0 var(--l4d-sp-3);
}
.learn4d-app .l4d-quiz-pre__start-row {
  text-align: center;
}
.learn4d-app .l4d-quiz-pre__msg {
  min-height: 1.4em;
  font-size: var(--l4d-fs-sm);
  color: #8B0000;
  text-align: center;
}

/* Difficulty selector */
.learn4d-app .l4d-difficulty-selector {
  display: flex;
  gap: var(--l4d-sp-2);
  flex-wrap: wrap;
  justify-content: center;
}
.learn4d-app .l4d-difficulty-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: var(--l4d-sp-2) var(--l4d-sp-4);
  border: 2px solid var(--l4d-c-border);
  border-radius: var(--l4d-r-lg);
  background: var(--l4d-c-surface);
  font-family: var(--l4d-font);
  font-size: var(--l4d-fs-md);
  font-weight: var(--l4d-fw-5);
  cursor: pointer;
  color: var(--l4d-c-text);
  transition: border-color var(--l4d-t-base), background var(--l4d-t-base), transform var(--l4d-t-base);
  min-width: 7rem;
}
.learn4d-app .l4d-difficulty-btn__icon { font-size: 1.75rem; line-height: 1; }
.learn4d-app .l4d-difficulty-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px var(--l4d-c-shadow); }
.learn4d-app .l4d-difficulty-btn[aria-pressed="true"] {
  border-color: var(--l4d-c-hebrew-dark);
  background: var(--l4d-c-hebrew);
}

/* ── Quiz result actions & recommendation ────────────────────── */
.learn4d-app .l4d-quiz__rec-text {
  font-size: var(--l4d-fs-sm);
  color: var(--l4d-c-text-mid);
  text-align: center;
  margin: 0;
  padding: var(--l4d-sp-2) var(--l4d-sp-3);
  background: var(--l4d-c-bg);
  border-radius: var(--l4d-r-md);
  border: 1px solid var(--l4d-c-border);
  width: 100%;
}
.learn4d-app .l4d-quiz__result-actions {
  display: flex;
  gap: var(--l4d-sp-2);
  justify-content: center;
  flex-wrap: wrap;
}