/* Learner curriculum lesson — blueprint enhancements (bio G12 L01+) */

.lrn-lesson-page {
  overflow-x: hidden;
  max-width: 100%;
}

.lrn-lesson-page .learn-layout,
.lrn-lesson-page .learn-content-shell,
.lrn-lesson-page .cv-content-html {
  overflow-x: hidden;
  max-width: 100%;
}

.lrn-lesson-page .cv-content-html img,
.lrn-lesson-page .cv-content-html svg,
.lrn-lesson-page .cv-content-html table {
  max-width: 100%;
  height: auto;
}

/* Compact hero — original overlay layout, shorter height */
.lrn-lesson-page .cv-lesson-cover.cv-index-cover {
  aspect-ratio: 1624 / 420;
}

.lrn-lesson-page .cv-lesson-cover .cv-index-cover-top {
  bottom: 96px;
  padding: 18px 24px;
}

.lrn-lesson-page .cv-lesson-cover .cv-index-cover-title {
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
}

.lrn-lesson-page .cv-lesson-cover .cv-index-cover-desc {
  font-size: 0.78rem;
  line-height: 1.65;
}

.lrn-lesson-page .cv-lesson-cover .cv-index-cover-desc p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lrn-lesson-page .cv-lesson-cover .cv-index-cover-actions {
  padding: 2px 16px 10px;
}

.lrn-lesson-page .cv-lesson-cover .cv-index-gen-row {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.lrn-lesson-page .cv-lesson-cover .cv-index-gen-card {
  min-height: 92px;
  padding: 10px 8px 8px;
  border-radius: 16px;
  border: 2px solid #ebebeb;
  background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
  box-shadow: 0 4px 0 #e5e7eb, 0 2px 8px rgba(88, 108, 255, 0.06);
}

.lrn-lesson-page .cv-lesson-cover .cv-index-gen-card:hover {
  transform: translateY(-3px);
  border-color: #586cff;
  box-shadow: 0 6px 0 #c4b5fd, 0 8px 20px rgba(88, 108, 255, 0.16);
}

.lrn-lesson-page .cv-lesson-cover .cv-index-gen-card:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #c4b5fd;
}

.lrn-lesson-page .cv-lesson-cover .cv-index-gen-card img {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

.lrn-lesson-page .cv-lesson-cover .cv-index-gen-card span {
  font-size: 0.68rem;
  font-weight: 900;
  color: #334155;
}

@media (max-width: 768px) {
  .lrn-lesson-page .cv-lesson-cover.cv-index-cover {
    aspect-ratio: 1624 / 480;
  }

  .lrn-lesson-page .cv-lesson-cover .cv-index-cover-top {
    bottom: 108px;
    padding: 14px 16px;
  }

  .lrn-lesson-page .cv-lesson-cover .cv-index-gen-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Sidebar lesson emoji */
.learn-lesson-nav__emoji {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--neutral-100);
  font-size: 1.05rem;
  line-height: 1;
}

.learn-lesson-nav a.is-active .learn-lesson-nav__emoji {
  background: rgba(88, 108, 255, 0.15);
}

.learn-lesson-nav__text {
  text-align: start;
}

/* ── Green guide-hero + section index (in-content, not page cover) ── */
.lrn-lesson-page .cv-content-html > .guide-wrap > .guide-hero.lrn-guide-hero--fused {
  margin-bottom: 14px;
  padding-bottom: 16px;
}

.lrn-lesson-page .guide-hero .lrn-guide-hero-index {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.lrn-lesson-page .guide-hero .lrn-guide-hero-index .lrn-lesson-index__head {
  margin-bottom: 8px;
}

.lrn-lesson-page .guide-hero .lrn-guide-hero-index .lrn-lesson-index__title {
  color: rgba(255, 255, 255, 0.95);
}

.lrn-lesson-page .guide-hero .lrn-guide-hero-index .lrn-lesson-index__count {
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.14);
}

.lrn-lesson-page .guide-hero .lrn-guide-hero-index .lrn-lesson-index__track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.lrn-lesson-page .guide-hero .lrn-guide-hero-index .lrn-lesson-index__pill {
  flex-shrink: 0;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.lrn-lesson-page .guide-hero .lrn-guide-hero-index .lrn-lesson-index__pill:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.5);
}

.lrn-lesson-page .guide-hero .lrn-guide-hero-index .lrn-lesson-index__pill.is-active {
  background: #fff;
  color: #065f46;
  border-color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.lrn-lesson-page .guide-hero .lrn-guide-hero-index .lrn-lesson-index__pill-num {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.lrn-lesson-page .guide-hero .lrn-guide-hero-index .lrn-lesson-index__pill.is-active .lrn-lesson-index__pill-num {
  background: rgba(5, 150, 105, 0.12);
  color: #065f46;
}

.lrn-section--hidden {
  display: none !important;
}

/* ── Next lesson teaser ── */
.lrn-next-lesson-teaser {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 20px 0 8px;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ecfdf5 0%, #fff 55%, #eef2ff 100%);
  border: 1px solid #a7f3d0;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}

.lrn-next-lesson-teaser:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(5, 150, 105, 0.14);
}

.lrn-next-lesson-teaser__glow {
  position: absolute;
  inset: auto auto -30px -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.35), transparent 70%);
  pointer-events: none;
}

.lrn-next-lesson-teaser__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.15);
  flex-shrink: 0;
}

.lrn-next-lesson-teaser__body {
  flex: 1;
  min-width: 0;
}

.lrn-next-lesson-teaser__label {
  display: block;
  font-size: 0.65rem;
  font-weight: 900;
  color: #059669;
  margin-bottom: 2px;
}

.lrn-next-lesson-teaser__title {
  display: block;
  font-size: 0.95rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.45;
}

.lrn-next-lesson-teaser__desc {
  margin: 6px 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  line-height: 1.55;
}

.lrn-next-lesson-teaser__cta {
  font-size: 0.78rem;
  font-weight: 900;
  color: #059669;
  flex-shrink: 0;
}

/* ── Flashcard studio — 3D stacked deck ── */
.lrn-lesson-page .bio-g12-flash-deck.mw-widget.is-flash-mounted {
  width: 100%;
  max-width: 100%;
  margin: 14px 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.lrn-lesson-page .bio-g12-flash-deck.is-flash-mounted::before {
  display: none;
}

.lrn-lesson-flash-wrap.is-flash-mounted {
  width: 100%;
  max-width: 100%;
  padding: 0;
  display: grid;
  place-items: center;
  justify-items: center;
}

.lrn-flash-studio {
  --flash-front-a: #047857;
  --flash-front-b: #10b981;
  --flash-back-a: #065f46;
  --flash-back-b: #059669;
  --flash-stack-a: #064e3b;
  --flash-stack-b: #047857;
  --flash-accent: #34d399;
  --flash-text: #fff;
  --flash-text-soft: rgba(255, 255, 255, 0.78);
  --flash-chip-bg: rgba(255, 255, 255, 0.14);
  --flash-chip-border: rgba(255, 255, 255, 0.28);
  --flash-chip-lead: rgba(255, 255, 255, 0.26);
  --flash-warn-bg: rgba(127, 29, 29, 0.35);
  --flash-warn-text: #fecaca;
  width: min(100%, 480px);
  max-width: 100%;
  margin-inline: auto;
  justify-self: center;
}

.lrn-flash-studio__shell {
  position: relative;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.lrn-flash-studio__shell::before {
  display: none;
}

/* Header */
.lrn-flash-studio__head {
  margin-bottom: 10px;
}

.lrn-flash-studio__head-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}

.lrn-flash-studio__ctr {
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--flash-accent) 16%, #fff);
  color: color-mix(in srgb, var(--flash-front-a) 70%, #0f172a);
  font-size: 0.68rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.lrn-flash-studio__head-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lrn-flash-studio__themes {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.lrn-flash-studio__theme {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(135deg, var(--swatch-a), var(--swatch-b));
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
  transition: transform 0.15s, box-shadow 0.15s;
}

.lrn-flash-studio__theme:hover {
  transform: scale(1.1);
}

.lrn-flash-studio__theme.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--flash-accent);
}

.lrn-flash-studio__progress {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  overflow: hidden;
  min-width: 60px;
}

.lrn-flash-studio__progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--flash-front-a), var(--flash-accent));
  transition: width 0.35s ease;
}

/* Deck zone — side nav flanking 3D stack */
.lrn-flash-studio__deck-zone {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

.lrn-flash-studio__side-spacer {
  width: 44px;
}

.lrn-flash-studio__side-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--flash-accent) 12%, #fff);
  color: color-mix(in srgb, var(--flash-front-a) 55%, #334155);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, color 0.15s;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.lrn-flash-studio__side-btn:hover {
  transform: scale(1.06);
  background: linear-gradient(145deg, var(--flash-front-a), var(--flash-front-b));
  color: #fff;
}

.lrn-flash-studio__deck {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-top: 8px;
  padding-bottom: 16px;
}

/* Stacked cards behind active card */
.lrn-flash-studio__stack {
  position: absolute;
  inset: 6px 0 14px;
  pointer-events: none;
}

.lrn-flash-studio__stack-card {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(155deg, var(--flash-stack-a), var(--flash-stack-b));
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
  transform:
    translateY(calc(var(--stack-i) * 5px))
    translateX(calc(var(--stack-i) * -2px))
    scale(calc(1 - var(--stack-i) * 0.028))
    rotate(calc(var(--stack-i) * -0.6deg));
  opacity: calc(1 - var(--stack-i) * 0.14);
  transition: opacity 0.3s, transform 0.35s ease;
}

.lrn-flash-studio__stack-card.is-hidden {
  opacity: 0;
  transform:
    translateY(calc(var(--stack-i) * 5px + 8px))
    scale(calc(1 - var(--stack-i) * 0.04));
}

/* 3D flip card */
.lrn-flash-studio__scene {
  position: relative;
  z-index: 2;
  perspective: 1100px;
}

.lrn-flash-studio__card {
  position: relative;
  min-height: 210px;
  transform-style: preserve-3d;
  transition: transform 0.52s cubic-bezier(0.4, 0.15, 0.2, 1);
  cursor: pointer;
  will-change: transform;
}

.lrn-flash-studio__card.is-flipped {
  transform: rotateY(180deg);
}

.lrn-flash-studio__card.is-exit-next {
  transform: translateX(-28px) rotateY(-8deg) scale(0.96);
  opacity: 0;
}

.lrn-flash-studio__card.is-exit-prev {
  transform: translateX(28px) rotateY(8deg) scale(0.96);
  opacity: 0;
}

.lrn-flash-studio__card.is-enter-next {
  transform: translateX(22px) scale(0.97);
  opacity: 0.6;
}

.lrn-flash-studio__card.is-enter-prev {
  transform: translateX(-22px) scale(0.97);
  opacity: 0.6;
}

.lrn-flash-studio__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 12px;
  border-radius: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  color: var(--flash-text);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 16px 34px rgba(15, 23, 42, 0.22);
}

.lrn-flash-studio__face--front {
  background: linear-gradient(148deg, var(--flash-front-a) 0%, var(--flash-front-b) 100%);
}

.lrn-flash-studio__face--back {
  background: linear-gradient(148deg, var(--flash-back-a) 0%, var(--flash-back-b) 100%);
  transform: rotateY(180deg);
}

.lrn-flash-studio__shine {
  position: absolute;
  top: -40%;
  right: -20%;
  width: 70%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 68%);
  pointer-events: none;
}

.lrn-flash-studio__badge {
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--flash-text);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lrn-flash-studio__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  overflow-y: auto;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.62;
  text-align: center;
  color: var(--flash-text);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.12);
}

.lrn-flash-studio__body--back {
  text-align: right;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.55;
}

.lrn-flash-studio__hint {
  margin-top: 8px;
  text-align: center;
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--flash-text-soft);
}

/* Back content — glass chips on gradient, theme-aware */
.lrn-flash-studio__body--back .lrn-flash-back {
  color: var(--flash-text);
}

.lrn-flash-back__quote {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-right: 3px solid var(--flash-accent);
  background: var(--flash-chip-lead);
  border-radius: 10px;
  font-weight: 900;
  color: var(--flash-text);
}

.lrn-flash-back__list {
  margin: 0;
  padding: 0 16px 0 0;
  display: grid;
  gap: 5px;
}

.lrn-flash-back__list li {
  font-weight: 800;
  color: var(--flash-text);
}

.lrn-flash-back__body {
  margin: 0;
  font-weight: 800;
  color: var(--flash-text);
  line-height: 1.65;
  text-align: center;
}

.lrn-flash-back__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
  font-size: 0.68rem;
}

.lrn-flash-back__table th,
.lrn-flash-back__table td {
  padding: 6px 8px;
  text-align: right;
  color: var(--flash-text);
  background: var(--flash-chip-bg);
  border: 1px solid var(--flash-chip-border);
}

.lrn-flash-back__table th {
  border-radius: 0 8px 8px 0;
  font-weight: 900;
  width: 36%;
}

.lrn-flash-back__table td {
  border-radius: 8px 0 0 8px;
}

.lrn-flash-back__warn {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--flash-warn-bg);
  color: var(--flash-warn-text);
  font-weight: 900;
  margin-bottom: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.lrn-flash-back--duo,
.lrn-flash-back--grid {
  display: grid;
  gap: 6px;
}

.lrn-flash-back--grid {
  grid-template-columns: 1fr 1fr;
}

.lrn-flash-back__chip,
.lrn-flash-back__cell {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--flash-chip-bg);
  border: 1px solid var(--flash-chip-border);
  font-weight: 800;
  color: var(--flash-text);
  backdrop-filter: blur(4px);
}

.lrn-flash-back__chip--accent,
.lrn-flash-back__cell--lead {
  background: var(--flash-chip-lead);
  border-color: rgba(255, 255, 255, 0.38);
}

/* Footer actions */
.lrn-flash-studio__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.lrn-flash-studio__flip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--flash-accent) 30%, #e2e8f0);
  background: #fff;
  color: color-mix(in srgb, var(--flash-front-a) 60%, #4338ca);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.lrn-flash-studio__flip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--flash-accent) 20%, transparent);
}

.lrn-flash-studio__actions-slot {
  display: inline-flex;
}

.lrn-flash-save {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--flash-front-a), var(--flash-front-b));
  color: var(--flash-text);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.15s;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
}

.lrn-flash-save:hover {
  transform: translateY(-1px);
}

.lrn-flash-save.is-saved {
  background: color-mix(in srgb, var(--flash-accent) 18%, #fff);
  color: color-mix(in srgb, var(--flash-front-a) 65%, #0f172a);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--flash-accent) 35%, #e2e8f0);
}

.lrn-flash-save a {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 640px) {
  .lrn-flash-studio {
    width: 100%;
  }

  .lrn-flash-studio__deck-zone {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 8px;
  }

  .lrn-flash-studio__side-btn,
  .lrn-flash-studio__side-spacer {
    width: 38px;
    height: 38px;
  }

  .lrn-flash-studio__card {
    min-height: 190px;
  }

  .lrn-flash-back--grid {
    grid-template-columns: 1fr;
  }
}

/* ── Completion rings on subject index ── */
.lrn-lesson-ring {
  position: relative;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 4px;
}

.lrn-lesson-ring svg {
  width: 34px;
  height: 34px;
  transform: rotate(-90deg);
}

.lrn-lesson-ring__track {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 3;
}

.lrn-lesson-ring__fill {
  fill: none;
  stroke: #58cc02;
  stroke-width: 3;
  stroke-linecap: round;
}

.lrn-lesson-ring--progress .lrn-lesson-ring__fill {
  stroke: #586cff;
}

.lrn-lesson-ring--complete .lrn-lesson-ring__fill {
  stroke: #059669;
}

.lrn-lesson-ring__pct {
  position: absolute;
  font-size: 0.48rem;
  font-weight: 900;
  color: #475569;
}

.cv-dash-lesson-num {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 2.5rem;
}

.mw-quiz--review-missed .mw-quiz-head h4 {
  color: #dc2626;
}

/* ── فهرس الدرس (standalone fallback if no guide-hero in content) ── */
.lrn-lesson-index {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  max-width: 100%;
}

.lrn-lesson-index__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.lrn-lesson-index__title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 900;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lrn-lesson-index__count {
  font-size: 0.62rem;
  font-weight: 800;
  color: #64748b;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f9;
}

.lrn-lesson-index__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding-bottom: 4px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.lrn-lesson-index__pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-size: 0.68rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, background 0.12s;
  white-space: nowrap;
}

.lrn-lesson-index__pill:hover {
  border-color: #586cff;
  color: #586cff;
  transform: translateY(-1px);
}

.lrn-lesson-index__pill.is-active {
  border-color: #586cff;
  background: linear-gradient(135deg, #eef0ff, #f5f3ff);
  color: #4338ca;
}

.lrn-lesson-index__pill-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  font-size: 0.58rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lrn-lesson-index__pill.is-active .lrn-lesson-index__pill-num {
  background: #586cff;
  color: #fff;
}

/* ── Section ask Atum (hover only, single button) ── */
.lrn-lesson-page .guide-section .section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  text-align: start;
}

.lrn-lesson-page .guide-section .section-title {
  flex: 0 1 auto;
  text-align: start;
}

.lrn-lesson-page .guide-section .section-num {
  flex-shrink: 0;
}

.lrn-lesson-page .guide-section .learn-section-ask--inline {
  margin-inline-start: auto;
  flex-shrink: 0;
  position: static;
  flex: 0 0 auto;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s, background 0.12s;
  pointer-events: none;
}

.lrn-lesson-page .guide-section:hover .learn-section-ask--inline,
.lrn-lesson-page .guide-section .learn-section-ask--inline:focus {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Prev / next lesson pager ── */
.lrn-lesson-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
}

.lrn-lesson-pager__link {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 2px solid #e2e8f0;
  background: #fff;
  text-decoration: none;
  color: #334155;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.lrn-lesson-pager__link:hover {
  border-color: #586cff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(88, 108, 255, 0.12);
}

.lrn-lesson-pager__link--next {
  text-align: left;
  margin-right: auto;
}

.lrn-lesson-pager__label {
  font-size: 0.62rem;
  color: #64748b;
  font-weight: 800;
}

.lrn-lesson-pager__title {
  font-size: 0.82rem;
  color: #0f172a;
  font-weight: 900;
  line-height: 1.45;
}

/* ── Mind map ── */
.bio-g12-mindmap {
  position: relative;
  min-height: 380px;
  padding: 16px 8px 12px;
  background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(52, 211, 153, 0.12), transparent 70%),
    linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
  border: 2px solid #6ee7b7;
  border-radius: 20px;
  overflow: hidden;
  max-width: 100%;
}

.bio-g12-mindmap svg.bio-g12-mindmap-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.bio-g12-mindmap-nodes {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 340px;
  min-height: 340px;
  max-width: 100%;
  contain: layout style;
}

.bio-g12-mindmap-node {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  padding: 8px 12px;
  border-radius: 14px;
  border: 2px solid #a7f3d0;
  background: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  color: #065f46;
  text-align: center;
  line-height: 1.45;
  max-width: 130px;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.12);
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.4s, box-shadow 0.2s;
  cursor: pointer;
}

.bio-g12-mindmap-node.is-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.bio-g12-mindmap-node.is-root {
  font-size: 0.82rem;
  padding: 12px 18px;
  max-width: 160px;
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
  border-color: #047857;
  box-shadow: 0 10px 28px rgba(5, 150, 105, 0.35);
}

.bio-g12-mindmap-node.is-active {
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.45), 0 8px 20px rgba(5, 150, 105, 0.2);
  transform: translate(-50%, -50%) scale(1.06);
}

.bio-g12-mindmap-caption {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  margin: 8px 0 0;
  min-height: 1.4em;
}

.bio-g12-mindmap-hint {
  text-align: center;
  font-size: 0.65rem;
  color: #94a3b8;
  margin: 4px 0 0;
}

.bio-g12-mindmap-ask {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 10px 0 0;
}

.bio-g12-mindmap-ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #586cff, #4338ca);
  color: #fff;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(88, 108, 255, 0.28);
  transition: transform 0.15s, box-shadow 0.15s;
}

.bio-g12-mindmap-ask-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(88, 108, 255, 0.34);
}

.bio-g12-mindmap-ask-btn span {
  font-size: 0.82rem;
}

/* ── Achievement streak ── */
.bio-g12-streak-path {
  position: relative;
}

.bio-g12-streak-progress {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  margin-bottom: 12px;
}

.bio-g12-streak-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #34d399, #059669);
  transition: width 0.55s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.bio-g12-streak-step.is-done {
  animation: lrnStreakPop 0.45s ease;
}

@keyframes lrnStreakPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25); }
  100% { transform: scale(1); }
}

.bio-g12-streak-celebrate {
  text-align: center;
  padding: 14px;
  margin-top: 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 2px solid #34d399;
  font-weight: 900;
  color: #047857;
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s, transform 0.4s;
}

.bio-g12-streak-celebrate.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* Legacy community flashcards (compact) */
.lrn-cp-flash3d {
  text-align: center;
  padding: 8px 0;
}

.lrn-cp-flash3d__scene {
  margin: 0 auto 12px;
  perspective: 1000px;
  width: min(260px, 92%);
}

.lrn-cp-flash3d__inner {
  position: relative;
  min-height: 120px;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
  cursor: pointer;
}

.lrn-cp-flash3d__inner.is-flipped {
  transform: rotateY(180deg);
}

.lrn-cp-flash3d__face {
  position: absolute;
  inset: 0;
  padding: 16px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 12px 30px rgba(88, 108, 255, 0.28);
}

.lrn-cp-flash3d__face--front {
  background: linear-gradient(145deg, #586cff, #6b7fff);
  color: #fff;
}

.lrn-cp-flash3d__face--back {
  background: linear-gradient(145deg, #059669, #7fe0c2);
  color: #fff;
  transform: rotateY(180deg);
}

.lrn-cp-flash3d__text {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.55;
  margin: 0;
}

.lrn-cp-flash3d__side {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.25);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 24px;
  margin-bottom: 8px;
}

.lrn-cp-flash3d__flip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(88, 108, 255, 0.25);
  background: #fff;
  color: var(--color-indigo, #586cff);
  font-weight: 800;
  font-size: 0.72rem;
  cursor: pointer;
  font-family: inherit;
}

.lrn-cp-flash3d__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.lrn-cp-flash3d__nav-btn {
  padding: 6px 12px;
  border-radius: 10px;
  border: none;
  background: var(--color-indigo, #586cff);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
}

.lrn-cp-flash3d__nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lrn-cp-flash3d__ctr {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--neutral-500, #64748b);
}

/* ── Points toast ── */
.lrn-points-toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 10060;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #58cc02, #46a302);
  color: #fff;
  font-weight: 900;
  font-size: 0.82rem;
  box-shadow: 0 8px 24px rgba(88, 204, 2, 0.35);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}

.lrn-points-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.lrn-points-toast--mini {
  padding: 6px 14px;
  font-size: 0.72rem;
  bottom: auto;
  top: 50%;
  left: 50%;
}

/* Green in-content guide hero — full size on learner pages (do not shrink) */

/* Millionaire-style quiz grid on learner lesson pages */
.lrn-lesson-page .mw-quiz-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lrn-lesson-page .mw-quiz-opt {
  display: block;
  min-height: 52px;
  padding: 12px 14px;
  text-align: right;
  line-height: 1.45;
  position: relative;
  overflow: hidden;
}

.lrn-lesson-page .mw-quiz-opt:disabled,
.lrn-lesson-page .mw-quiz-opt[aria-disabled="true"] {
  cursor: default;
  opacity: 1;
}

.lrn-lesson-page .mw-quiz-card.is-answered .mw-quiz-opt:not(.is-picked):not(.is-correct-opt):not(.is-wrong-opt) {
  opacity: 0.72;
}

.lrn-lesson-page .mw-quiz-input:disabled,
.lrn-lesson-page .mw-quiz-check:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .lrn-lesson-page .mw-quiz-opts {
    grid-template-columns: 1fr;
  }
}

/* ── Lesson mastery bar ── */
.lrn-mastery-bar {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8faff 0%, #fff 55%);
  border: 1px solid rgba(88, 108, 255, 0.18);
  box-shadow: 0 4px 18px rgba(88, 108, 255, 0.06);
}

.lrn-mastery-bar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.lrn-mastery-bar__title {
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--text, #1a1d2e);
}

.lrn-mastery-bar__pct {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--primary, #586cff);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(88, 108, 255, 0.1);
}

.lrn-mastery-bar__track {
  height: 6px;
  border-radius: 999px;
  background: #e8ecf4;
  overflow: hidden;
  margin-bottom: 10px;
}

.lrn-mastery-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #586cff, #58cc02);
  transition: width 0.35s ease;
}

.lrn-mastery-bar__pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lrn-mastery-pillar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--text3, #64748b);
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.lrn-mastery-pillar.is-done {
  color: #15803d;
  background: #ecfdf5;
  border-color: #bbf7d0;
}

.lrn-mastery-pillar__icon {
  font-size: 0.68rem;
  line-height: 1;
}

.lrn-mastery-pillar__label {
  white-space: nowrap;
}

@media (max-width: 520px) {
  .lrn-mastery-pillar__label {
    display: none;
  }

  .lrn-mastery-pillar {
    padding: 5px 8px;
  }
}