:root {
  --paper: #f5efdf;
  --paper-deep: #e8dfc7;
  --ink: #13231f;
  --muted: #51635c;
  --line: rgba(19, 35, 31, 0.12);
  --accent: #0f8b74;
  --accent-soft: #d8f2ec;
  --warn: #c96f2d;
  --warm: #d4a037;
  --card-shadow: 0 12px 38px rgba(28, 42, 39, 0.12);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  color: var(--ink);
  font-family: "Work Sans", "Work Sans Fallback", sans-serif;
  background:
    radial-gradient(circle at 15% 18%, #fff8e7 0%, transparent 38%),
    radial-gradient(circle at 85% 6%, #e9fff4 0%, transparent 45%),
    linear-gradient(160deg, var(--paper), #f0e7cf 48%, #f3ead4 100%);
}

.texture {
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: 0.32;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 14px,
      rgba(20, 37, 31, 0.035) 14px,
      rgba(20, 37, 31, 0.035) 15px
    );
}

/* --------------- Floating Navbar --------------- */

/* Spacer reserves vertical room so content never sits behind the nav.
   Hidden when the full-viewport landing hero is shown (hero has its own padding). */
.nav-spacer {
  height: var(--nav-h, 5.2rem);
}
.nav-spacer[hidden] { display: none; }

.floating-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding: 0.75rem 1rem;
  pointer-events: none;
  transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 360ms cubic-bezier(0.4, 0, 0.2, 1);
  animation: nav-slide-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.floating-nav[data-hidden] {
  transform: translateY(-110%);
  opacity: 0;
}

@keyframes nav-slide-in {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem 0.6rem;
  background: rgba(240, 248, 244, 0.62);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-radius: 999px;
  border: 1px solid rgba(15, 139, 116, 0.12);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  pointer-events: auto;
}

.nav-logo {
  display: flex;
  flex-shrink: 0;
  border-radius: 50%;
  transition: transform 200ms ease;
}

.nav-logo:hover {
  transform: scale(1.06);
}

.nav-logo svg {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.4rem;
}

.nav-link {
  color: rgba(19, 35, 31, 0.6);
  text-decoration: none;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: "Work Sans", "Work Sans Fallback", sans-serif;
  transition: color 200ms, background 200ms;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.nav-link:hover {
  color: var(--ink);
  background: rgba(15, 139, 116, 0.08);
}

.nav-link--active {
  color: var(--ink);
  background: rgba(15, 139, 116, 0.1);
}

.nav-end {
  display: flex;
  align-items: center;
  margin-left: 0.2rem;
}

.nav-login-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.3rem 0.6rem 0.85rem;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: "Work Sans", "Work Sans Fallback", sans-serif;
  transition: background 200ms, transform 120ms, box-shadow 200ms;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 4px rgba(15, 139, 116, 0.2);
}

.nav-login-btn:hover {
  background: #0a7560;
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(15, 139, 116, 0.3);
}

.nav-login-btn .material-symbols-rounded {
  font-size: 1.2rem;
}

.nav-login-text {
  line-height: 1;
}

/* When logged in, the auth JS changes the button — adjust for icon-only state */
.nav-login-btn:not(:has(.nav-login-text)) {
  padding: 0.5rem 0.65rem;
}

/* Account menu positioning override when inside floating nav */
.floating-nav .account-menu {
  top: calc(100% + 0.65rem);
  right: 0;
}

/* Burger button — hidden on desktop */
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 50%;
  transition: background 200ms;
  flex-shrink: 0;
}

.nav-burger:hover {
  background: rgba(15, 139, 116, 0.08);
}

.nav-burger .material-symbols-rounded {
  font-size: 1.4rem;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .floating-nav {
    padding: 0.6rem 0.75rem;
  }

  .nav-pill {
    position: relative;
    width: 100%;
    gap: 0.5rem;
    padding: 0.4rem 0.45rem;
  }

  .nav-logo svg {
    width: 38px;
    height: 38px;
  }

  /* Logo stays left, push burger + CTA to the right */
  .nav-burger {
    display: flex;
    margin-left: auto;
  }

  .nav-burger .material-symbols-rounded {
    font-size: 1.6rem;
  }

  /* Hide inline links, show as dropdown */
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    flex-direction: column;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid rgba(15, 139, 116, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    gap: 0.15rem;
    z-index: 10;
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-link {
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    border-radius: 0.75rem;
  }

  .nav-login-btn {
    padding: 0.5rem 1rem 0.5rem 0.7rem;
    font-size: 0.9rem;
  }
}

.hero {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  margin: 0 auto;
  padding: 1.5rem 1rem 0.8rem;
}

.hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.eyebrow {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 0.73rem;
  margin: 0;
}

.hero h1 {
  margin: 0.35rem 0 0;
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 0.95;
}

.hamburger-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 252, 243, 0.92);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background 160ms ease, transform 160ms ease;
}

.hamburger-btn:hover {
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.hamburger-btn[aria-expanded="true"] {
  background: var(--accent);
  color: #fff;
}

.level-drawer[hidden] {
  display: none;
}

.level-drawer {
  margin-top: 0.7rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 252, 243, 0.95);
  box-shadow: var(--card-shadow);
  animation: drawer-in 200ms ease;
}

@keyframes drawer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.level-drawer-copy {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Lesson Viewer */
.lesson-view[hidden] { display: none; }

.lesson-view {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 0.5rem 1rem 2rem;
}

.lesson-view-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.lesson-view-title {
  margin: 0;
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.3rem;
}

.practice-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.lesson-back-btn {
  flex-shrink: 0;
}

.remaining-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: var(--muted);
  padding: 0.3rem 0.6rem;
  background: rgba(255, 252, 243, 0.7);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.lesson-view-content {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 252, 243, 0.95);
  box-shadow: var(--card-shadow);
  padding: 1.2rem;
  margin-bottom: 1rem;
}

.lesson-view-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

/* Text Content Articles */
.text-content-article {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink);
}

.text-content-article h2 {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.2rem;
  margin: 1.8rem 0 0.6rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.35rem;
}

.text-content-article h2:first-child { margin-top: 0.4rem; }

.text-content-article h3 {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.05rem;
  margin: 1.4rem 0 0.5rem;
  color: var(--ink);
}

.text-content-article p {
  margin: 0 0 0.7rem;
}

.text-content-article ul,
.text-content-article ol {
  margin: 0 0 0.8rem;
  padding-left: 1.4rem;
}

.text-content-article li {
  margin-bottom: 0.3rem;
}

.text-content-article strong {
  color: var(--ink);
  font-weight: 600;
}

.text-content-article em {
  font-style: italic;
}

.text-content-article code {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.88em;
}

.text-content-article .text-callout {
  border-left: 3px solid var(--gold);
  background: rgba(198, 169, 95, 0.08);
  padding: 0.6rem 0.9rem;
  margin: 0.8rem 0;
  border-radius: 0 8px 8px 0;
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Custom PT blocks: callout */
.text-content-article .pt-callout {
  border-left: 3px solid var(--warm, #c6a95f);
  background: rgba(198, 169, 95, 0.08);
  padding: 0.7rem 0.9rem;
  margin: 0.8rem 0;
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
  line-height: 1.6;
}
.text-content-article .pt-callout.callout--accent {
  border-left-color: var(--accent, #0f8b74);
  background: rgba(15, 139, 116, 0.06);
}

/* Custom PT blocks: letter group */
.text-content-article .letter-group {
  background: #fff;
  border: 1px solid var(--line, #e5e0d5);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  margin: 0.8rem 0;
}
.text-content-article .lg-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted, #7a7062);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.4rem;
}
.text-content-article .lg-row {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  align-items: center;
}
.text-content-article .lg-item {
  text-align: center;
}
.text-content-article .lg-letter {
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: 1.8rem;
  line-height: 2.2;
  direction: rtl;
  display: block;
  padding-bottom: 0.5rem;
}
.text-content-article .lg-name {
  font-size: 0.75rem;
  color: var(--muted, #7a7062);
}

/* Inline Urdu inside lesson prose was inheriting the 0.95rem body size and
   no Nastaliq family, making diacritics/dots illegible. Render it in Nastaliq
   at a clearly readable size. (LEA-180) */
.text-content-article .urdu-inline {
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: 1.35em;
  line-height: 2;
  direction: rtl;
  unicode-bidi: isolate;
}

/* Quiz Card */
.quiz-card {
  position: relative;
  border-radius: 18px;
  background:
    linear-gradient(165deg, rgba(212, 160, 55, 0.06), rgba(15, 139, 116, 0.05)),
    rgba(255, 252, 243, 0.97);
  box-shadow: var(--card-shadow);
  padding: 1.5rem 1.2rem 1.2rem;
  text-align: center;
  margin-bottom: 1rem;
  overflow: hidden;
}
.quiz-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(135deg, var(--accent), var(--warm));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.4;
  pointer-events: none;
}
.quiz-card[hidden] { display: none; }

.quiz-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0 0 0.6rem;
  font-weight: 700;
}
.quiz-question {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1.2rem;
  line-height: 1.5;
}
/* Render inline Urdu in questions with Nastaliq */
.quiz-question .urdu-inline {
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: 1.25em;
  line-height: 2;
  direction: rtl;
  unicode-bidi: isolate;
  color: var(--accent);
}
.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.quiz-option-btn {
  padding: 0.7rem 0.5rem;
  border: 2px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(170deg, rgba(255,255,255,0.9), rgba(255,252,243,0.8));
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.1s;
  text-align: center;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(28, 42, 39, 0.06);
}
.quiz-option-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(15, 139, 116, 0.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(28, 42, 39, 0.1);
}
.quiz-option-btn:active:not(:disabled) {
  transform: translateY(0);
}
.quiz-option-btn:disabled {
  cursor: default;
}
.quiz-option-urdu {
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  /* Letters here often differ only by dots (ر / ذ / ڈ); the option cards have
     ample room, so make the glyphs large enough to tell apart. (LEA-180) */
  font-size: 2.6rem;
  line-height: 2;
  padding-bottom: 0.6rem;
}
.quiz-option-btn.quiz-correct {
  border-color: #2d8a4e;
  background:
    linear-gradient(170deg, rgba(45, 138, 78, 0.08), rgba(45, 138, 78, 0.15));
  color: #1a5c2e;
  box-shadow: 0 2px 12px rgba(45, 138, 78, 0.15);
}
.quiz-option-btn.quiz-wrong {
  border-color: #c0392b;
  background:
    linear-gradient(170deg, rgba(192, 57, 43, 0.05), rgba(192, 57, 43, 0.12));
  color: #922b21;
}
.quiz-option-btn.quiz-correct:disabled,
.quiz-option-btn.quiz-wrong:disabled {
  opacity: 1;
}
.quiz-feedback {
  margin-top: 0.8rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: rgba(198, 169, 95, 0.08);
  border-left: 3px solid var(--warm);
}
.quiz-feedback[hidden] { display: none; }
.quiz-feedback-text {
  font-size: 0.88rem;
  margin: 0 0 0.8rem;
  line-height: 1.6;
  text-align: left;
}
/* Nastaliq for inline Urdu in feedback text */
.quiz-feedback-text .urdu-inline {
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: 1.15em;
  direction: rtl;
  unicode-bidi: isolate;
}
.quiz-next-btn {
  font-size: 0.88rem;
}

/* Alphabet Chart */
.alpha-chart-intro {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

.alpha-chart-intro strong {
  color: var(--ink);
}

.alpha-chart-direction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.8rem;
  border: 1px dashed var(--accent);
  border-radius: 10px;
  background: rgba(15, 139, 116, 0.05);
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
}

.alpha-chart-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  direction: rtl;
}

.alpha-chart-cell {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffef8;
  padding: 0.5rem 0.3rem;
  text-align: center;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
  position: relative;
}

.alpha-chart-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(15, 139, 116, 0.15);
  border-color: var(--accent);
  background: #f0faf7;
}

.alpha-chart-cell:active {
  transform: translateY(0);
}

.alpha-chart-cell.is-selected {
  border-color: var(--accent);
  background: linear-gradient(165deg, #e0f5f0, #fffdf6);
  box-shadow: 0 0 0 2px rgba(15, 139, 116, 0.2);
}

.alpha-chart-letter {
  display: block;
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 2;
  color: var(--ink);
}

.alpha-chart-name {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 0.1rem;
}

.alpha-chart-detail {
  grid-column: 1 / -1;
  border: 1px solid rgba(15, 139, 116, 0.3);
  border-radius: 12px;
  background: linear-gradient(165deg, #e7f8f3, #fffdf6);
  padding: 0.7rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.8rem;
  justify-content: center;
  animation: detail-expand 200ms ease;
  direction: ltr;
}

@keyframes detail-expand {
  from { opacity: 0; transform: scaleY(0.7); }
  to { opacity: 1; transform: scaleY(1); }
}

.alpha-chart-detail[hidden] {
  display: none;
}

.alpha-detail-letter {
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: 1.8rem;
  line-height: 1.8;
  color: var(--accent);
}

.alpha-detail-name {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.2rem;
  font-weight: 600;
}

.alpha-detail-sound {
  font-size: 0.92rem;
  color: var(--muted);
  font-style: italic;
}

.alpha-detail-listen {
  border: 1px solid rgba(91, 63, 160, 0.25);
  border-radius: 8px;
  background: #f3eeff;
  color: #5b3fa0;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  font-size: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: background 160ms ease;
}

.alpha-detail-listen .material-symbols-rounded {
  font-size: 18px;
}

.alpha-detail-listen:hover {
  background: #e4d8ff;
}

/* Tree node tooltip (shown on hover) */
.tree-node-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--ink);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  pointer-events: none;
  z-index: 10;
}

.tree-node-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--ink);
}

.tree-node:hover .tree-node-tooltip {
  display: block;
}

@media (max-width: 620px) {
  .alpha-chart-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 400px) {
  .alpha-chart-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   LANDING HERO — full-viewport immersive entry
   ========================================================================== */
.landing-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(15, 139, 116, 0.08), transparent 60%),
    radial-gradient(ellipse 70% 50% at 75% 80%, rgba(212, 160, 55, 0.06), transparent 50%),
    linear-gradient(170deg, #f7f1e1 0%, #ede4cc 40%, #f2ead6 100%);
}

.landing-hero[hidden] { display: none; }

/* Geometric border — subtle Islamic pattern motif */
.hero-geo-border {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 12px solid transparent;
  border-image: repeating-linear-gradient(
    90deg,
    rgba(15, 139, 116, 0.10) 0px,
    rgba(15, 139, 116, 0.10) 2px,
    transparent 2px,
    transparent 12px
  ) 12;
  opacity: 0.5;
}

/* Ambient floating Urdu letters */
.hero-floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.floater {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: var(--s, 2.5rem);
  line-height: 1;
  opacity: var(--o, 0.06);
  color: var(--ink);
  animation: floater-drift 18s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}

@keyframes floater-drift {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-20px) rotate(4deg); }
}

/* Hero content layout — Duolingo-style two-column on desktop, stacked on mobile */
.hero-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 5.4rem 1.2rem 2rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: center;
  flex: 1;
  width: 100%;
}

.hero-left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.hero-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.4rem;
}

/* Desktop: two columns — flashcards left, copy + CTA right */
@media (min-width: 900px) {
  .hero-content {
    padding: 5.4rem 2rem 2rem;
  }

  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

/* Nav bar */
.hero-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 1.5rem;
}

.hero-brand {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Hero headline */
.hero-text {
  animation: hero-fade-in 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hero-title-en {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.hero-title-kicker {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: clamp(1.1rem, 2.6vw, 1.55rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
  letter-spacing: -0.005em;
}

.hero-title-ur {
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: clamp(2.8rem, 7vw, 4.2rem);
  line-height: 2;
  color: var(--accent);
  text-shadow:
    0 2px 30px rgba(15, 139, 116, 0.15),
    0 0 60px rgba(15, 139, 116, 0.06);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
}

.hero-sub {
  margin: 0 auto;
  max-width: 26rem;
  font-size: clamp(0.92rem, 2.2vw, 1.05rem);
  line-height: 1.6;
  color: var(--muted);
  animation: hero-fade-in 800ms 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Demo wrapper — flashcard column container */
.hero-demo-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  animation: hero-fade-in 800ms 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Card area with stacked depth */
.hero-card-area {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

.hero-card-label {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  /* Centred relative to the demo flashcard below it (LEA-195) */
  text-align: center;
}

.demo-stack {
  position: relative;
  width: 100%;
  transition: transform 220ms ease, opacity 220ms ease;
}

.demo-stack-card {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(15, 139, 116, 0.2);
  border-radius: 16px;
  background: rgba(255, 250, 240, 0.6);
}

.demo-stack-2 {
  transform: translateY(10px) scale(0.94);
  opacity: 0.3;
}

.demo-stack-1 {
  transform: translateY(5px) scale(0.97);
  opacity: 0.5;
}

/* Demo flashcard scene */
.demo-scene {
  position: relative;
  -webkit-perspective: 900px;
  perspective: 900px;
  width: 100%;
}

.demo-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.demo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(19, 35, 31, 0.15);
  transition: background 200ms ease, transform 200ms ease;
}

.demo-dot.is-active {
  background: var(--accent);
  transform: scale(1.3);
}

.demo-dot.is-done {
  background: var(--accent);
  opacity: 0.4;
}

.demo-card {
  position: relative;
  width: 100%;
  min-height: 220px;
  cursor: pointer;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.demo-card.is-flipped {
  transform: rotateY(180deg);
}

.demo-speak {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(91, 63, 160, 0.25);
  border-radius: 10px;
  background: #f3eeff;
  color: #5b3fa0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  transition: background 160ms ease, transform 160ms ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.demo-speak .material-symbols-rounded { font-size: 20px; }
.demo-speak:hover { background: #e4d8ff; transform: scale(1.08); }
.demo-speak.speaking {
  background: #e4d8ff;
  animation: pulse-voice 0.8s ease infinite alternate;
}

.demo-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px dashed rgba(15, 139, 116, 0.45);
  border-radius: 16px;
  padding: 1.2rem;
  display: grid;
  align-content: center;
  text-align: center;
  gap: 0.45rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.demo-card:hover .demo-face {
  border-color: rgba(15, 139, 116, 0.7);
  box-shadow: 0 12px 40px rgba(28, 42, 39, 0.12), 0 0 16px rgba(15, 139, 116, 0.25);
}

/* Demo card illustration — watercolor art with white knocked out */
.demo-bg {
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background-size: cover;
  background-position: 50% 55%;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
  transition: opacity 400ms ease;
}

.demo-card.is-flipped .demo-bg {
  opacity: 0.65;
}

.demo-front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  background:
    linear-gradient(165deg, rgba(15, 139, 116, 0.07), rgba(255, 255, 255, 0.65)),
    #fffaf0;
  box-shadow:
    0 12px 40px rgba(28, 42, 39, 0.12),
    0 0 20px rgba(15, 139, 116, 0.1),
    0 0 50px rgba(15, 139, 116, 0.05);
  animation: card-glow 3s ease-in-out infinite alternate;
}

@keyframes card-glow {
  from { box-shadow: 0 12px 40px rgba(28, 42, 39, 0.12), 0 0 20px rgba(15, 139, 116, 0.08), 0 0 50px rgba(15, 139, 116, 0.03); }
  to   { box-shadow: 0 12px 40px rgba(28, 42, 39, 0.12), 0 0 28px rgba(15, 139, 116, 0.15), 0 0 60px rgba(15, 139, 116, 0.07); }
}

.demo-back {
  background:
    linear-gradient(165deg, rgba(212, 160, 55, 0.08), rgba(255, 255, 255, 0.7)),
    #fffdf3;
  transform: rotateY(180deg);
  padding-bottom: 2rem;
  box-shadow: 0 12px 40px rgba(28, 42, 39, 0.12);
}

/* Frosted glass + bottom scrim for demo back face */
.demo-back::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background: rgba(255, 253, 243, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}
.demo-back::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background: linear-gradient(to bottom, transparent 30%, rgba(255, 253, 243, 0.6) 60%, rgba(255, 253, 243, 0.95) 100%);
  z-index: 0;
  pointer-events: none;
}

.demo-face > *:not(.demo-bg) {
  position: relative;
  z-index: 1;
}

.demo-kind {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2e6f64;
}

.demo-urdu {
  margin: 0;
  padding-bottom: 1rem;
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 2.2;
}

.demo-urdu-back {
  margin: 0;
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  line-height: 2.2;
  color: #0b0f0d;
}

.demo-hint {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #3d6b61;
  opacity: 1;
  background: rgba(15, 139, 116, 0.08);
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  justify-self: center;
}

.demo-translit,
.demo-english {
  margin: 0;
  font-size: 0.92rem;
}

.demo-translit { font-weight: 600; }

.demo-card.is-flipped .demo-urdu-back,
.demo-card.is-flipped .demo-translit,
.demo-card.is-flipped .demo-english {
  color: #0b0f0d;
}

/* Rating overlay — sits on top of the card within .demo-scene,
   outside the 3D transform context so clicks work reliably.
   Hidden until card flips via .is-flipped sibling selector. */
.demo-actions {
  position: absolute;
  bottom: 0.7rem;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 250ms 200ms ease, transform 250ms 200ms ease;
}

.demo-card.is-flipped ~ .demo-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.demo-rate-btn {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(15, 139, 116, 0.3);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 150ms, transform 150ms, border-color 150ms;
  -webkit-tap-highlight-color: transparent;
}

.demo-rate-btn:hover { transform: scale(1.06); }
.demo-rate-btn:active { transform: scale(0.96); }
.demo-rate--hard { color: #c0392b; border-color: rgba(192, 57, 43, 0.3); }
.demo-rate--hard:hover { background: #faf0ef; }
.demo-rate--good { color: #1e8449; border-color: rgba(30, 132, 73, 0.3); }
.demo-rate--good:hover { background: #eef6f1; }
.demo-rate--easy { color: #2874a6; border-color: rgba(40, 116, 166, 0.3); }
.demo-rate--easy:hover { background: #edf3f8; }

.demo-skip-btn {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 150ms, background 150ms, transform 150ms;
  -webkit-tap-highlight-color: transparent;
}

.demo-skip-btn:hover { opacity: 1; background: rgba(255,255,255,1); }
.demo-skip-btn:active { transform: scale(0.92); }
.demo-skip-btn .material-symbols-rounded { font-size: 18px; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Demo end CTA (replaces card area) */
.demo-end[hidden] { display: none; }

.demo-end {
  position: relative;
  z-index: 1;
  animation: fade-up 400ms ease;
  padding: 1.5rem 0 0.5rem;
  text-align: center;
}

.demo-end-text {
  margin: 0 auto 1.4rem;
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 26rem;
}

.demo-end-text strong {
  color: var(--ink);
}

/* Goal preview — motivational Urdu text shown after demo */
.goal-preview {
  margin: 0 auto 1.6rem;
  max-width: 22rem;
  padding: 1.2rem 1.4rem;
  border-radius: 1rem;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  animation: fade-up 500ms ease;
}

.goal-preview-urdu {
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 1.5rem;
  line-height: 2.4;
  color: var(--ink);
  margin: 0 0 0.6rem;
  text-align: center;
}

.goal-preview-reveal {
  font-size: 0.92rem;
  color: var(--muted);
  font-style: italic;
  margin: 0;
  text-align: center;
  animation: goal-reveal 600ms 800ms ease both;
}

@keyframes goal-reveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Social proof strip */
.hero-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  animation: hero-fade-in 800ms 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-proof-item {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.hero-proof-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line);
  flex-shrink: 0;
}

/* Primary "Explore the full course" CTA — opens placement gate (LEA-157) */
.hero-explore-btn {
  align-self: center;
  width: 100%;
  max-width: 22rem;
  justify-content: center;
  animation: hero-fade-in 800ms 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Compact header (lesson/tree mode) */
.compact-header[hidden] { display: none; }

/* Shared CTA button */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 2rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(15, 139, 116, 0.3);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.btn-cta:hover {
  background: #0d7a66;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(15, 139, 116, 0.38);
}

.btn-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(15, 139, 116, 0.25);
}

.btn-cta--sm {
  padding: 0.55rem 1.4rem;
  font-size: 0.9rem;
  border-radius: 10px;
}

/* Mobile hero adjustments */
@media (max-width: 480px) {
  .hero-title-ur {
    font-size: clamp(2.4rem, 12vw, 3.6rem);
  }

  .hero-proof {
    gap: 0.4rem 0.6rem;
  }

  .hero-geo-border {
    border-width: 6px;
  }

}

/* Returning user hero strip */
.returning-hero[hidden] { display: none; }

.returning-hero {
  margin-bottom: 1.8rem;
}

.returning-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 252, 243, 0.92);
  box-shadow: 0 4px 18px rgba(28, 42, 39, 0.07);
  text-align: center;
}

.returning-hero-greeting {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}

.returning-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  width: 100%;
}

.returning-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.returning-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}

.returning-stat-label {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.returning-stat-divider {
  width: 1px;
  height: 2rem;
  background: var(--line);
  flex-shrink: 0;
}

.returning-hero-inner .btn-cta--sm {
  padding: 0.65rem 2rem;
  font-size: 0.95rem;
  border-radius: 12px;
}

.returning-hero-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.btn-review-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.65rem 1.2rem;
  font-size: 0.95rem;
  border-radius: 12px;
}

/* The class display:flex above (specificity 0,1,0) outranks the UA
   [hidden]{display:none} rule (0,0,0), so the badge stayed visible even with
   its hidden attribute set — it could show when zero items were due (LEA-166). */
.btn-review-badge[hidden] {
  display: none;
}

/* Auth gate (LEA-167) — reuses .placement-gate overlay + .placement-gate-inner.
   [hidden] guard so the flex layout doesn't override the UA hide. */
#auth-gate[hidden] {
  display: none;
}

.auth-gate-emoji {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.auth-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 100%;
  max-width: 320px;
  margin: 1.5rem auto 0;
}

.auth-gate-actions .btn {
  width: 100%;
  justify-content: center;
}

/* Signup CTA injected into the level-complete screen (LEA-168). */
.signup-cta {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid #9ccdf4;
  border-radius: 14px;
  background: linear-gradient(165deg, #cfe9ff, #eaf5ff);
  text-align: center;
}

.signup-cta-title {
  margin: 0 0 0.3rem;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.signup-cta-copy {
  margin: 0 0 0.8rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.signup-cta-btn {
  width: 100%;
  justify-content: center;
  text-underline-offset: 4px;
}

.review-badge-count {
  background: #0f8b74;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 99px;
  min-width: 1.3rem;
  text-align: center;
}

/* Onboarding / Lesson Tree */
.onboarding[hidden] { display: none; }

.onboarding {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  min-height: 100vh;
}

.onboarding-header {
  text-align: center;
  padding-top: 2.5rem;
  margin-bottom: 1.6rem;
}

.onboarding-header h2 {
  margin: 0;
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.4rem;
}

.onboarding-header p {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Zigzag tree layout */
.lesson-tree {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.tree-svg-connectors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.tree-svg-connectors path {
  fill: none;
  stroke: var(--line);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.tree-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 0.3rem 0;
}

.tree-row[data-align="left"] { justify-content: flex-start; padding-left: 2.5rem; }
.tree-row[data-align="right"] { justify-content: flex-end; padding-right: 2.5rem; }
.tree-row[data-align="center"] { justify-content: center; }

/* Section headers in zigzag */
.tree-section-spacer {
  height: 0.6rem;
}

.tree-section-header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 1rem 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.tree-section-header::before,
.tree-section-header::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3rem;
  height: 1px;
  background: var(--line);
}

.tree-section-header::before { right: calc(50% + 3.5rem); }
.tree-section-header::after { left: calc(50% + 3.5rem); }

/* Circular node */
.tree-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  width: 5.5rem;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.tree-node-ring {
  position: relative;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  transition: transform 200ms ease, filter 200ms ease;
}

.tree-node:hover .tree-node-ring {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(15, 139, 116, 0.3));
}

.tree-node:active .tree-node-ring {
  transform: scale(0.95);
}

.tree-node-ring svg {
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  transform: rotate(-90deg);
}

.tree-node-ring .ring-track {
  fill: none;
  stroke: #e8e2d0;
  stroke-width: 3.5;
}

.tree-node-ring .ring-fill {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease;
}

.tree-node:hover .ring-fill {
  animation: ring-glow 1.2s ease-in-out infinite alternate;
}

@keyframes ring-glow {
  from { stroke-width: 3.5; filter: none; }
  to { stroke-width: 5; filter: drop-shadow(0 0 4px currentColor); }
}

.tree-node:hover .ring-track {
  animation: ring-track-glow 1.2s ease-in-out infinite alternate;
}

@keyframes ring-track-glow {
  from { stroke: #e8e2d0; stroke-width: 3.5; }
  to { stroke: #d8d0be; stroke-width: 4.5; }
}

.tree-node-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 200ms ease;
}

.tree-node:hover .tree-node-icon {
  box-shadow: 0 4px 16px rgba(28, 42, 39, 0.15);
}

.tree-node-icon .material-symbols-rounded {
  font-size: 1.6rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

/* Mastery tiers for circular nodes */
.tree-node[data-mastery="0"] .tree-node-icon {
  background: #f3ece0;
  color: #a09888;
}
.tree-node[data-mastery="0"] .ring-fill { stroke: #c8c0b0; }

.tree-node[data-mastery="1"] .tree-node-icon {
  background: #fff3d6;
  color: #8b7530;
}
.tree-node[data-mastery="1"] .ring-fill { stroke: #d4a037; }

.tree-node[data-mastery="2"] .tree-node-icon {
  background: #ffedb8;
  color: #6b5a1e;
}
.tree-node[data-mastery="2"] .ring-fill { stroke: #c89420; }

.tree-node[data-mastery="3"] .tree-node-icon {
  background: #d8f2ec;
  color: #0f6b5a;
}
.tree-node[data-mastery="3"] .ring-fill { stroke: #0f8b74; }

.tree-node[data-mastery="4"] .tree-node-icon {
  background: #b0e8d8;
  color: #0a5545;
  box-shadow: 0 0 0 3px rgba(15, 139, 116, 0.2);
}
.tree-node[data-mastery="4"] .ring-fill { stroke: #0f8b74; }

/* Lesson gating (LEA-195) — after the mastery tiers so these win the cascade.
   Locked levels are greyed out with a lock icon and are inert. */
.tree-node.is-locked {
  cursor: not-allowed;
}

.tree-node.is-locked .tree-node-icon {
  background: #ece7dc;
  color: #b3ab9c;
  box-shadow: none;
}

.tree-node.is-locked .ring-fill { stroke: transparent; }
.tree-node.is-locked .ring-track { stroke: #e0dac9; }

.tree-node.is-locked .tree-node-name,
.tree-node.is-locked .tree-node-pct {
  color: #b3ab9c;
}

.tree-node.is-locked:hover .tree-node-ring {
  transform: none;
  filter: none;
}

.tree-node.is-locked:hover .tree-node-icon { box-shadow: none; }
.tree-node.is-locked:hover .ring-fill { animation: none; }
.tree-node.is-locked:hover .ring-track { animation: none; }
.tree-node.is-locked:active .tree-node-ring { transform: none; }

/* Accessible-but-unstarted levels — strong green to invite the next step */
.tree-node.is-unlocked .tree-node-icon {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 139, 116, 0.35);
}

.tree-node.is-unlocked .ring-track { stroke: var(--accent-soft); }

/* Node label */
.tree-node-label {
  text-align: center;
  line-height: 1.15;
}

.tree-node-name {
  margin: 0;
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}

.tree-node-pct {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--muted);
}

@media (max-width: 620px) {
  .onboarding {
    max-width: 100%;
    padding: 0 0.5rem 2rem;
    /* padding-top is handled by .nav-spacer, not duplicated here */
  }

  .lesson-tree {
    max-width: 340px;
  }

  .tree-row[data-align="left"] { padding-left: 1.5rem; }
  .tree-row[data-align="right"] { padding-right: 1.5rem; }

  .tree-node-ring {
    width: 3.5rem;
    height: 3.5rem;
  }

  .tree-node-icon {
    width: 3.5rem;
    height: 3.5rem;
  }

  .tree-node-icon .material-symbols-rounded {
    font-size: 1.4rem;
  }

  .tree-node {
    width: 5rem;
  }
}

/* Skeleton loading states */
@keyframes skeleton-pulse {
  0%   { opacity: 0.45; }
  50%  { opacity: 0.8; }
  100% { opacity: 0.45; }
}

.skeleton-text {
  display: inline-block;
  height: 0.7em;
  border-radius: 4px;
  background: var(--line);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  vertical-align: middle;
}

.skeleton-header .skeleton-text {
  height: 0.55em;
}

.skeleton-header::before,
.skeleton-header::after {
  display: none;
}

.tree-node-skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 5.5rem;
}

.skeleton-ring {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: #f3ece0;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-label {
  text-align: center;
}

.skeleton-label .skeleton-text {
  height: 0.6em;
}

@media (max-width: 620px) {
  .tree-node-skeleton {
    width: 5rem;
  }

  .skeleton-ring {
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* Lesson skeleton — flashcard silhouette */
.lesson-skeleton ~ .mini-mastery,
.lesson-skeleton ~ .flashcard-scene,
.lesson-skeleton ~ .word-tooltip,
.lesson-skeleton ~ .level-complete {
  display: none;
}

.skeleton-mini-mastery {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffef8;
}

.skeleton-bar-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: #e8e2d0;
  overflow: hidden;
  min-width: 60px;
}

.skeleton-bar-fill {
  width: 25%;
  height: 100%;
  border-radius: 4px;
  background: var(--line);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-flashcard {
  min-height: 260px;
  border: 1px dashed rgba(15, 139, 116, 0.25);
  border-radius: 16px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  background:
    linear-gradient(165deg, rgba(15, 139, 116, 0.04), rgba(255, 255, 255, 0.65)),
    #fffaf0;
}

.skeleton-urdu {
  border-radius: 6px;
}

.skeleton-rating-row {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 0.35rem;
}

.skeleton-btn {
  display: inline-block;
  width: 5rem;
  height: 2.2rem;
  border-radius: 11px;
  background: #f3ece0;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-btn-sm {
  width: 3.5rem;
}

/* Progress skeleton — growth tracker silhouette */
.progress-skeleton ~ .panel-head,
.progress-skeleton ~ .stat-grid,
.progress-skeleton ~ .chart-wrap,
.progress-skeleton ~ .mastery-wrap,
.progress-skeleton ~ .weakness-wrap {
  display: none;
}

.skeleton-panel-head {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.9rem;
}

.skeleton-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.skeleton-stat-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: #fff9eb;
  border-radius: 13px;
  padding: 0.55rem;
}

.skeleton-chart {
  margin-top: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fffef8;
  padding: 0.65rem;
}

.skeleton-chart-area {
  width: 100%;
  height: 100px;
  border-radius: 8px;
  background: #f3ece0;
  margin-top: 0.45rem;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-mastery {
  margin-top: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fffef8;
  padding: 0.65rem;
}

.skeleton-mastery-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0.45rem 0 0.35rem;
}

.skeleton-mastery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.skeleton-cell {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 8px;
  background: #f3ece0;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

@media (max-width: 980px) {
  .skeleton-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .skeleton-flashcard {
    min-height: 220px;
  }

  .skeleton-btn {
    width: 4rem;
    height: 2rem;
  }

  .skeleton-btn-sm {
    width: 3rem;
  }

  .skeleton-stat-grid {
    grid-template-columns: 1fr;
  }

  .skeleton-cell {
    width: 2rem;
    height: 2rem;
  }
}

/* App layout */
.layout[hidden] { display: none; }

.layout {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  padding: 0.5rem 1rem 1.6rem;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 252, 243, 0.92);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(4px);
}

.panel-head {
  margin-bottom: 0.9rem;
}

.panel-head h2 {
  margin: 0;
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-weight: 500;
  font-size: 1.4rem;
}

.panel-head p {
  margin: 0.32rem 0 0;
  color: var(--muted);
  font-size: 0.93rem;
}


.lesson-panel {
  padding: 1rem;
  align-self: start;
}

.mini-mastery {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffef8;
}

.mini-mastery-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.mini-mastery-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: #e8e2d0;
  overflow: hidden;
  min-width: 60px;
}

.mini-mastery-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #d4a037, #0f8b74);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mini-mastery-pct {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 2.5rem;
  text-align: right;
}

.level-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.level-tab {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f9f4e2;
  color: var(--ink);
  padding: 0.38rem 0.58rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: 180ms ease;
}

.level-tab[aria-selected="true"] {
  border-color: transparent;
  background: linear-gradient(125deg, #116f5f, var(--accent));
  color: #f6fffb;
  transform: translateY(-1px);
}

.flashcard-scene {
  -webkit-perspective: 900px;
  perspective: 900px;
  min-height: 260px;
}

.flashcard {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 260px;
  cursor: pointer;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.flashcard-speak {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(91, 63, 160, 0.25);
  border-radius: 10px;
  background: #f3eeff;
  color: #5b3fa0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  transition: background 160ms ease, transform 160ms ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flashcard-speak .material-symbols-rounded {
  font-size: 20px;
}

.flashcard-speak:hover {
  background: #e4d8ff;
  transform: scale(1.08);
}

.flashcard-speak.speaking {
  background: #e4d8ff;
  animation: pulse-voice 0.8s ease infinite alternate;
}

.flashcard.is-flipped {
  transform: rotateY(180deg);
}

.flashcard.is-flipped .flashcard-front {
  pointer-events: none;
}

.flashcard-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px dashed rgba(15, 139, 116, 0.45);
  border-radius: 16px;
  padding: 1.2rem;
  display: grid;
  align-content: center;
  text-align: center;
  gap: 0.45rem;
}

/* Flashcard background image layer */
.flashcard-bg {
  position: absolute;
  inset: -8%;
  border-radius: 15px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0.10;
  filter: saturate(1.4);
  pointer-events: none;
  z-index: 0;
  animation:
    card-bg-zoom 20s ease-in-out infinite alternate,
    card-bg-parallax 16s ease-in-out infinite alternate;
  transition: filter 260ms ease;
}

.flashcard.is-flipped .flashcard-bg {
  opacity: 0.24;
  filter: saturate(1.45) contrast(1.02);
  animation:
    card-bg-zoom 14s ease-in-out infinite alternate,
    card-bg-parallax 10s ease-in-out infinite alternate;
}

/* When JS sets an inline transform (hover parallax), pause the zoom */
.flashcard-bg[style*="transform"] {
  animation-play-state: paused;
  transition: transform 400ms ease-out;
}

/* Resume zoom smoothly when hover ends (inline transform removed) */
.flashcard-bg:not([style*="transform"]) {
  transition: none;
}

@keyframes card-bg-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}

@keyframes card-bg-parallax {
  from { background-position: 48% 50%; }
  to { background-position: 52% 48%; }
}


.flashcard-face > *:not(.flashcard-bg) {
  position: relative;
  z-index: 1;
}

.flashcard-front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  background:
    linear-gradient(165deg, rgba(15, 139, 116, 0.07), rgba(255, 255, 255, 0.65)),
    #fffaf0;
}

.flashcard-back {
  background:
    linear-gradient(165deg, rgba(212, 160, 55, 0.08), rgba(255, 255, 255, 0.7)),
    #fffdf3;
  transform: rotateY(180deg);
  padding-bottom: 2.2rem;
}

/* Frosted glass overlay for text readability on back face */
.flashcard-back::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background: rgba(255, 253, 243, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}
/* Bottom scrim gradient — extra contrast where text sits */
.flashcard-back::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background: linear-gradient(to bottom, transparent 30%, rgba(255, 253, 243, 0.6) 60%, rgba(255, 253, 243, 0.95) 100%);
  z-index: 0;
  pointer-events: none;
}

.flashcard-hint {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #3d6b61;
  opacity: 1;
  background: rgba(15, 139, 116, 0.08);
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  justify-self: center;
}

.prompt-urdu-back {
  margin: 0;
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  line-height: 2.2;
  word-spacing: 0.2em;
  color: #0b0f0d;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.flashcard.is-flipped .prompt-urdu-back,
.flashcard.is-flipped .prompt-urdu,
.flashcard.is-flipped .prompt-translit,
.flashcard.is-flipped .prompt-english,
.flashcard.is-flipped .word-tooltip-english,
.flashcard.is-flipped .word-tooltip-translit {
  color: #0b0f0d;
}

.prompt-type {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2e6f64;
}

.prompt-urdu {
  margin: 0;
  padding-bottom: 1.2rem;
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 2.2;
  word-spacing: 0.2em;
}

.prompt-urdu .word-span {
  cursor: pointer;
  border-radius: 6px;
  padding: 0 0.15em;
  transition: background 150ms ease;
}

.prompt-urdu .word-span:hover {
  background: rgba(15, 139, 116, 0.12);
}

.prompt-urdu .word-span:active {
  background: rgba(15, 139, 116, 0.22);
}

.prompt-urdu .letter-span {
  cursor: pointer;
  border-radius: 4px;
  padding: 0 0.08em;
  transition: background 150ms ease;
}

.prompt-urdu .letter-span:hover {
  background: rgba(15, 139, 116, 0.12);
}

.word-tooltip[hidden] {
  display: none;
}

.word-tooltip {
  position: relative;
  margin-top: 0.3rem;
  border: 1px solid rgba(15, 139, 116, 0.3);
  border-radius: 10px;
  background: linear-gradient(165deg, #e7f8f3, #fffdf6);
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.7rem;
  justify-content: center;
  font-size: 0.92rem;
  animation: tooltip-in 150ms ease;
}

@keyframes tooltip-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.word-tooltip-urdu {
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: 1.3rem;
  line-height: 2;
}

.word-tooltip-translit {
  font-style: italic;
  color: #2e6f64;
}

.word-tooltip-english {
  color: var(--ink);
  font-weight: 500;
}

.prompt-arabic {
  margin: 0.2rem 0 0;
  font-family: "Noto Naskh Arabic", "Noto Naskh Arabic Fallback", serif;
  font-size: 1.6rem;
  color: #6b7280;
  direction: rtl;
}

.prompt-arabic-label {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
  margin-right: 0.3rem;
}

.prompt-translit,
.prompt-english {
  margin: 0;
  color: #32554e;
}

.prompt-translit {
  font-style: italic;
}

.flashcard-controls {
  margin-top: 0.35rem;
}

/* Low-emphasis "Report an issue" link below the card — always visible on both
   faces, intentionally quieter than the rating buttons. */
.report-issue-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.3rem;
  margin: 0.9rem auto 0;
  padding: 0.3rem 0.6rem;
  background: none;
  border: none;
  border-radius: 999px;
  color: rgba(19, 35, 31, 0.45);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.report-issue-link:hover {
  color: var(--accent);
  background: rgba(15, 139, 116, 0.08);
}

.report-issue-link .material-symbols-rounded {
  font-size: 1.05em;
}

.card-rating-row {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 0.3rem;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.card-rating-row.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.card-rating-row .btn {
  flex: 1 1 0;
  padding: 0.6rem 0.8rem;
  font-size: 0.92rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-height: 2.8rem;
}

.rating-interval {
  font-size: 0.68rem;
  opacity: 0.7;
  font-weight: 400;
}

.btn {
  font: inherit;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 0.58rem 0.86rem;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-outline {
  background: #fefcf6;
  border-color: var(--line);
}

.btn-ghost {
  background: #f3ece0;
  color: #36524b;
  border-color: var(--line);
}

/* Rating buttons — WCAG 2.1 AA contrast (≥4.5:1 on their backgrounds) */
.btn-again {
  background: #fde0e0;
  color: #7a1a1a;
  border-color: rgba(180, 40, 40, 0.35);
}

.btn-hard {
  background: #fde8d8;
  color: #6e3518;
  border-color: rgba(180, 90, 35, 0.35);
}

.btn-good {
  background: #ddf5ee;
  color: #0a4d41;
  border-color: rgba(15, 139, 116, 0.4);
}

.btn-easy {
  background: #d9ebff;
  color: #164876;
  border-color: rgba(35, 85, 150, 0.35);
}

.btn-known {
  background: #eae7e1;
  color: #3d3830;
  border-color: rgba(70, 63, 51, 0.3);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.stat-card {
  border: 1px solid var(--line);
  background: #fff9eb;
  border-radius: 13px;
  padding: 0.55rem;
}

.stat-label {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.stat-value {
  margin: 0.2rem 0 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.chart-wrap {
  margin-top: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fffef8;
  padding: 0.65rem;
}

.chart-wrap h3 {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  color: #3d5750;
}

#growth-chart {
  width: 100%;
  height: auto;
}

.mastery-wrap {
  margin-top: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fffef8;
  padding: 0.65rem;
}

.mastery-wrap h3 {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  color: #3d5750;
}

.mastery-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.35rem;
}

.mastery-level-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
}

.mastery-pct {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.mastery-bar {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #e8e2d0;
  overflow: hidden;
  margin-bottom: 0.7rem;
}

.mastery-bar-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #d4a037, #0f8b74);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mastery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.mastery-cell {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: 0.95rem;
  line-height: 1;
  cursor: default;
  transition: background 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}

.mastery-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 7px;
  z-index: 0;
  transition: background 0.3s ease;
}

.mastery-cell span {
  position: relative;
  z-index: 1;
}

.mastery-cell[data-mastery="0"] { background: #f3ece0; color: #a09888; }
.mastery-cell[data-mastery="1"] { background: #fff3d6; border-color: rgba(212,160,55,0.3); color: #8b7530; }
.mastery-cell[data-mastery="2"] { background: #ffedb8; border-color: rgba(212,160,55,0.45); color: #6b5a1e; }
.mastery-cell[data-mastery="3"] { background: #d8f2ec; border-color: rgba(15,139,116,0.35); color: #0f6b5a; }
.mastery-cell[data-mastery="4"] { background: #b0e8d8; border-color: rgba(15,139,116,0.5); color: #0a5545; font-weight: 700; }

.level-complete[hidden] {
  display: none;
}

.level-complete {
  margin-top: 1rem;
  border: 2px solid rgba(15, 139, 116, 0.35);
  border-radius: 16px;
  background: linear-gradient(165deg, #e7f8f3, #fffdf6);
  padding: 2rem 1.2rem;
  text-align: center;
  animation: complete-in 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.level-complete-icon {
  font-size: 3rem;
  color: var(--accent);
  display: block;
  margin-bottom: 0.4rem;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
}

.level-complete-title {
  margin: 0;
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.6rem;
  color: var(--ink);
}

.level-complete-copy {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.level-complete-actions {
  margin-top: 1.2rem;
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
}

.level-complete-extend {
  width: 100%;
  margin: 0 0 0.3rem;
  color: var(--muted);
  font-size: 0.95rem;
  text-align: center;
}

@keyframes pulse-voice {
  from { opacity: 1; }
  to { opacity: 0.6; }
}

.weakness-wrap {
  margin-top: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fffef8;
  padding: 0.65rem;
}

.weakness-wrap h3 {
  margin: 0 0 0.2rem;
  font-size: 0.88rem;
  color: #3d5750;
}

.weakness-hint {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.weakness-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.weakness-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid rgba(201, 111, 45, 0.18);
  border-radius: 10px;
  background: #fff6ef;
  padding: 0.45rem 0.6rem;
  font-size: 0.86rem;
}

.weakness-urdu {
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: 1.15rem;
  line-height: 1.35;
  min-width: 3.5rem;
  text-align: right;
}

.weakness-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.weakness-label {
  color: var(--ink);
  font-weight: 500;
}

.weakness-stats {
  font-size: 0.75rem;
  color: #8b4424;
}

.weakness-bar {
  width: 40px;
  height: 6px;
  border-radius: 3px;
  background: #ffe0cc;
  overflow: hidden;
  flex-shrink: 0;
}

.weakness-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: #c96f2d;
}

.weakness-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.weakness-header-row h2 { margin: 0; }

.btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
}

/* --------------- Progress Page --------------- */

.progress-page[hidden] { display: none; }

.progress-page {
  position: relative;
  z-index: 1;
}

.progress-page-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

.progress-page-header {
  margin-bottom: 1.2rem;
}

.progress-page-header h1 {
  margin: 0;
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.6rem;
  font-weight: 500;
}

.progress-page-header p {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.93rem;
}

.stat-grid--wide {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.progress-section {
  margin-top: 1.4rem;
}

.progress-section h2 {
  margin: 0 0 0.7rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #3d5750;
}

/* Level mastery cards */
.level-mastery-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fffef8;
  padding: 0.7rem;
  margin-bottom: 0.6rem;
}

.level-mastery-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.level-mastery-head:hover {
  opacity: 0.8;
}

.level-mastery-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.level-mastery-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.level-mastery-pct {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
}

.level-mastery-toggle {
  font-size: 1.2rem;
  color: var(--muted);
  transition: transform 200ms ease;
}

.level-mastery-card.is-open .level-mastery-toggle {
  transform: rotate(180deg);
}

.level-mastery-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #e8e2d0;
  overflow: hidden;
  margin-top: 0.4rem;
}

.level-mastery-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #d4a037, #0f8b74);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.level-mastery-grid {
  display: none;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.6rem;
}

.level-mastery-card.is-open .level-mastery-grid {
  display: flex;
}

/* Vocabulary table */
.vocab-list-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.vocab-list-header h2 {
  margin: 0;
}

.vocab-list-controls {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.vocab-search {
  font: inherit;
  font-size: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  background: #fffef8;
  min-width: 180px;
}

.vocab-search:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.vocab-filter {
  font: inherit;
  font-size: 0.82rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  background: #fffef8;
  cursor: pointer;
}

.vocab-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fffef8;
}

.vocab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.vocab-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.vocab-table th:hover {
  color: var(--ink);
}

.vocab-th-urdu {
  text-align: right;
  direction: rtl;
}

.vocab-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  vertical-align: middle;
}

.vocab-table tr:last-child td {
  border-bottom: none;
}

.vocab-table tr:hover td {
  background: rgba(15, 139, 116, 0.04);
}

.vocab-urdu-cell {
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: 1.1rem;
  line-height: 2;
  text-align: right;
  direction: rtl;
  white-space: nowrap;
}

.vocab-play-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
  font-size: 0.85rem;
  vertical-align: middle;
  margin-left: 0.3rem;
}

.vocab-play-btn:hover {
  color: var(--accent);
}

.vocab-state-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  white-space: nowrap;
}

.vocab-state-badge[data-state="new"] { background: #f3ece0; color: #8a7d6b; }
.vocab-state-badge[data-state="learning"] { background: #fff3d6; color: #8b7530; }
.vocab-state-badge[data-state="review"] { background: #e7f8f3; color: #0f5f51; }
.vocab-state-badge[data-state="relearning"] { background: #ffe8e8; color: #8b2424; }

.vocab-empty {
  text-align: center;
  color: var(--muted);
  padding: 1.5rem;
  font-size: 0.9rem;
}

@media (max-width: 620px) {
  .stat-grid--wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vocab-list-controls {
    width: 100%;
  }

  .vocab-search {
    width: 100%;
    min-width: 0;
  }

  .vocab-filter {
    flex: 1;
  }
}

.weakness-empty {
  color: var(--muted);
  font-size: 0.84rem;
  padding: 0.3rem 0;
}

.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  vertical-align: middle;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  visibility: hidden;
}

.icons-ready .material-symbols-rounded {
  visibility: visible;
}

.icon-inline {
  vertical-align: -0.18em;
  font-size: 1.15em;
  margin-right: 0.15em;
}

.icon-sm {
  font-size: 1em;
}

.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;
}

@media (max-width: 980px) {
  .lesson-panel {
    grid-row: auto;
  }
}

@media (max-width: 620px) {
  .hero {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
  }

  .hero h1 {
    font-size: 1.5rem;
  }

  .lesson-panel {
    padding: 0.7rem;
  }

  .flashcard-scene {
    min-height: 220px;
  }

  .flashcard {
    min-height: 220px;
  }

  .card-rating-row {
    flex-direction: column;
    gap: 0.35rem;
  }

  .card-rating-row .btn {
    flex: none;
    flex-direction: row;
    justify-content: center;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    width: 100%;
  }

  .rating-interval {
    font-size: 0.7rem;
    margin-left: 0.2rem;
  }

  .remaining-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.45rem;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------- Auth (shared) --------------- */

.hero-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.auth-btn {
  background: none;
  border: 2px solid var(--line);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
  text-decoration: none;
}

.auth-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.account-menu-wrap {
  position: relative;
}

.account-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
  min-width: 14rem;
  padding: 0.5rem;
  z-index: 300;
  animation: menu-in 0.15s ease-out;
}

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.account-menu-email {
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

.account-menu-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0.25rem 0;
}

.account-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: none;
  background: none;
  border-radius: 0.5rem;
  font-size: 0.88rem;
  font-family: "Work Sans", "Work Sans Fallback", sans-serif;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.15s;
}

.account-menu-item:hover {
  background: var(--card-bg);
}

.account-menu-item--danger {
  color: #c0392b;
}

.account-menu-item--danger:hover {
  background: #fdf0ef;
}

.auth-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  padding: 0.65rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  animation: toast-in 0.3s ease;
}

.auth-toast[hidden] {
  display: none;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(1rem); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* --------------- Auth page --------------- */

.auth-page {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 3rem 1rem;
}

.auth-page-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.auth-page-logo {
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: 2.8rem;
  line-height: 2.2;
  color: var(--accent);
  margin: 0;
}

.auth-page-title {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0.25rem 0 0;
}

.auth-page-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 0.75rem;
  padding: 2rem 1.75rem;
  box-shadow: var(--card-shadow);
}

/* "Finishing sign-in…" state shown instead of the form while a Google
   sign-in completes — the .auth-finishing-mode class on <html> is set
   pre-paint by an inline script in auth.html, or by auth-page.js after a
   successful popup. (LEA-188) */
.auth-finishing {
  display: none;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 0.75rem;
  padding: 2.5rem 1.75rem;
  box-shadow: var(--card-shadow);
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.auth-finishing-mode .auth-finishing {
  display: flex;
}

.auth-finishing-mode .auth-page-card,
.auth-finishing-mode .auth-page-footer {
  display: none;
}

.auth-finishing-spinner {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 3px solid var(--accent-soft, rgba(0, 0, 0, 0.1));
  border-top-color: var(--accent);
  animation: auth-spin 0.8s linear infinite;
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

.auth-finishing-text {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

.auth-page-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.auth-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
}

.auth-input {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(15, 139, 116, 0.15);
}

.auth-error {
  color: var(--warn);
  font-size: 0.82rem;
  margin: 0;
}

.auth-page-submit {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 0.6rem;
  border: none;
  border-radius: 0.4rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}

.auth-page-submit:hover {
  background: #0b7a66;
}

.auth-page-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.75rem 0;
}

.auth-divider-line {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-divider-text {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.auth-social-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.auth-social-btn:hover:not(:disabled) {
  background: var(--paper);
  border-color: var(--muted);
}

.auth-social-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.auth-social-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.auth-page-footer {
  margin-top: 1.75rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

.auth-page-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.auth-page-link:hover {
  text-decoration: underline;
}

.auth-magic-link-toggle {
  text-align: center;
  font-size: 0.85rem;
  margin-top: 0.75rem;
}

.auth-magic-link-sent {
  text-align: center;
  font-size: 0.9rem;
  color: var(--accent);
  font-weight: 500;
  margin-top: 0.5rem;
}

.auth-page-back {
  margin-top: 1rem;
  font-size: 0.85rem;
  text-align: center;
}

/* --------------- Explorer --------------- */

.explorer {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

.explorer-header {
  text-align: center;
  margin-bottom: 1rem;
}

.explorer-header h2 {
  margin: 0.3rem 0 0;
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.4rem;
}

.explorer-header p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.explorer-back {
  font-size: 0.88rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.explorer-back:hover {
  text-decoration: underline;
}

.explorer-search {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 252, 243, 0.95);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--ink);
  transition: border-color 0.2s;
}

.explorer-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(15, 139, 116, 0.15);
}

.explorer-preview {
  max-width: 380px;
  margin: 0 auto 1.2rem;
}

.explorer-preview[hidden] {
  display: none;
}

.explorer-scene {
  cursor: pointer;
}

.explorer-card {
  position: relative;
  overflow: hidden;
  clip-path: inset(0 round 16px);
  border: 1px dashed rgba(15, 139, 116, 0.45);
  border-radius: 16px;
  background:
    linear-gradient(165deg, rgba(15, 139, 116, 0.07), rgba(255, 255, 255, 0.65)),
    #fffaf0;
  padding: 1.2rem;
  text-align: center;
  min-height: 260px;
  display: grid;
  align-content: center;
  gap: 0.45rem;
}

.explorer-card-back {
  background:
    linear-gradient(165deg, rgba(212, 160, 55, 0.08), rgba(255, 255, 255, 0.7)),
    #fffdf3;
}

.explorer-card .flashcard-bg {
  position: absolute;
  inset: -8%;
  border-radius: 15px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
  animation: card-bg-zoom 20s ease-in-out infinite alternate;
}

.explorer-card > *:not(.flashcard-bg) {
  position: relative;
  z-index: 1;
}

.explorer-meta {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}

.explorer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
}

.explorer-cell {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 252, 243, 0.95);
  padding: 0.6rem 0.4rem;
  text-align: center;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.explorer-cell:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(15, 139, 116, 0.12);
}

.explorer-cell.is-selected {
  border-color: var(--accent);
  background: linear-gradient(165deg, #e0f5f0, #fffdf6);
  box-shadow: 0 0 0 2px rgba(15, 139, 116, 0.2);
}

.explorer-cell.has-image {
  border-color: rgba(212, 160, 55, 0.4);
}

.explorer-cell.has-image::after {
  content: "image";
  font-family: "Material Symbols Rounded";
  font-size: 10px;
  position: absolute;
  top: 4px;
  right: 4px;
  color: var(--warm);
}

.explorer-cell {
  position: relative;
}

.explorer-cell-urdu {
  display: block;
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: 1.2rem;
  line-height: 2;
}

.explorer-cell-label {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explorer-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 2rem 0;
}

/* --------------- 404 Error Page --------------- */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  text-align: center;
  padding: 2rem 1.2rem;
}
.error-page[hidden] {
  display: none;
}
.error-code {
  font-family: "Noto Nastaliq Urdu", "Noto Nastaliq Urdu Fallback", serif;
  font-size: clamp(4rem, 12vw, 7rem);
  line-height: 2;
  color: var(--accent);
  opacity: 0.7;
}
.error-title {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.error-sub {
  color: var(--muted);
  font-size: 1rem;
  margin: 0 0 1.8rem;
  max-width: 28rem;
}
.error-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.15s;
}
.error-btn:hover { background: #0a7560; }

/* --------------- Site Footer --------------- */

/* LEA-163: hide footer during the lesson funnel (practice/review/lesson intro),
   keyed off each view's own [hidden] state so it can't drift. Footer stays on
   landing, onboarding tree, progress, and 404. */
body:has(#app-layout:not([hidden])) .site-footer,
body:has(#lesson-view:not([hidden])) .site-footer {
  display: none;
}

.site-footer {
  position: relative;
  z-index: 1;
  margin-top: 3rem;
  border-top: 1px solid var(--line);
  background: rgba(255, 252, 243, 0.85);
  backdrop-filter: blur(4px);
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 2rem 1rem 1.5rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem 3rem;
}

.footer-brand {
  grid-column: 1;
}

.footer-logo {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}

.footer-tagline {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 280px;
}

.footer-nav {
  display: flex;
  gap: 3rem;
}

.footer-nav-group h3 {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.footer-nav-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.footer-nav-group a {
  font-size: 0.88rem;
  color: var(--ink);
  text-decoration: none;
  transition: color 160ms ease;
}

.footer-nav-group a:hover {
  color: var(--accent);
}

.footer-bottom {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.footer-bottom p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

@media (max-width: 620px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-nav {
    gap: 2rem;
  }
}

/* --------------- Legal Pages --------------- */

.legal-home-link {
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  line-height: 0.95;
}

.legal-home-link:hover {
  color: var(--accent);
}

.legal-page {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

.legal-content {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 252, 243, 0.95);
  box-shadow: var(--card-shadow);
  padding: 2rem 1.5rem;
}

.legal-content h1 {
  margin: 0 0 0.3rem;
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.8rem;
  color: var(--ink);
}

.legal-updated {
  margin: 0 0 1.5rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.legal-content h2 {
  margin: 1.8rem 0 0.5rem;
  font-family: "Fraunces", "Fraunces Fallback", serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}

.legal-content h3 {
  margin: 1rem 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #3d5750;
}

.legal-content p {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: #2a3f39;
}

.legal-content ul {
  margin: 0 0 0.7rem;
  padding-left: 1.3rem;
}

.legal-content li {
  font-size: 0.92rem;
  line-height: 1.65;
  color: #2a3f39;
  margin-bottom: 0.3rem;
}

.legal-content a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.legal-content a:hover {
  text-decoration: underline;
}

/* Cookie table */
.cookie-table-wrap {
  overflow-x: auto;
  margin: 0.5rem 0 1rem;
}

.cookie-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.cookie-table th,
.cookie-table td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
}

.cookie-table th {
  background: #f3ece0;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.cookie-table td {
  background: #fffef8;
  color: #2a3f39;
  line-height: 1.5;
}

@media (max-width: 620px) {
  .legal-content {
    padding: 1.2rem 1rem;
  }

  .legal-content h1 {
    font-size: 1.5rem;
  }
}

/* --------------- Help Page --------------- */

.help-intro {
  font-size: 1.1rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.help-page .legal-content h2 .material-symbols-rounded {
  font-size: 1.2em;
  vertical-align: -0.15em;
  color: var(--accent);
  margin-right: 0.3rem;
}

.help-cta {
  text-align: center;
  margin: 2.5rem 0 1rem;
}

.help-cta .btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 200ms, transform 200ms;
}

.help-cta .btn-cta:hover {
  background: #0a7a66;
  transform: translateY(-1px);
}

/* --------------- Feedback Page --------------- */

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 1.5rem;
}

/* display:flex above would otherwise override the [hidden] attribute we toggle
   on success, leaving the form on screen. */
.feedback-form[hidden] {
  display: none;
}

.feedback-textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.55;
}

.feedback-optional {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Honeypot — visually hidden but still present for bots to fill. */
.feedback-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.feedback-success {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f0f8f5;
  text-align: center;
}

.feedback-success .material-symbols-rounded {
  font-size: 2rem;
  color: var(--accent);
}

.feedback-success p {
  margin: 0.5rem 0 0.75rem;
  color: #2a3f39;
}

.feedback-success-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.feedback-success-link:hover {
  text-decoration: underline;
}

/* --------------- Onboarding Hints --------------- */

.hint-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.35);
  animation: hint-fade-in 300ms ease both;
}

@keyframes hint-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hint-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  z-index: 2001;
  pointer-events: none;
  /* Animate only transform — moving/resizing the 9999px shadow via top/left/
     width/height repaints the whole overlay every frame (LEA-164). We drive
     position with translate() and size with scale() set from JS. */
  transform-origin: top left;
  will-change: transform;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hint-card {
  position: fixed;
  z-index: 2002;
  width: min(320px, calc(100vw - 2rem));
  background: #fff;
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  animation: hint-pop-in 350ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes hint-pop-in {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hint-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.hint-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  margin: 0 0 0.35rem;
}

.hint-card-body {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 1rem;
}

.hint-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hint-card-step {
  font-size: 0.75rem;
  color: var(--muted);
}

.hint-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms;
}

.hint-card-btn:hover {
  background: #0a7a66;
}

/* ====================================================================== */
/* PLACEMENT GATE — full-viewport self-report router for new users        */
/* ====================================================================== */

.placement-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(15, 139, 116, 0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 75% 80%, rgba(212, 160, 55, 0.08), transparent 50%),
    linear-gradient(170deg, #f7f1e1 0%, #ede4cc 40%, #f2ead6 100%);
  overflow-y: auto;
  animation: placement-fade-in 320ms ease-out;
}

.placement-gate[hidden] { display: none; }

@keyframes placement-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.placement-gate-active {
  overflow: hidden;
}

.placement-gate-inner {
  width: 100%;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}

.placement-gate-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.placement-gate-subtitle {
  margin: 0;
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 38rem;
}

.placement-gate-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
  width: 100%;
  margin-top: 0.5rem;
}

@media (min-width: 720px) {
  .placement-gate-options {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

.placement-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.5rem 1.25rem;
  background: #ffffffcc;
  border: 2px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  text-align: center;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  box-shadow: 0 2px 8px rgba(28, 42, 39, 0.04);
}

.placement-option:hover,
.placement-option:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 139, 116, 0.14);
  outline: none;
}

.placement-option:active {
  transform: translateY(0);
}

.placement-option-emoji {
  font-size: 2.4rem;
  line-height: 1;
}

.placement-option-label {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.placement-option-detail {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.4;
}

.placement-defer-link {
  margin-top: 0.5rem;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(81, 99, 92, 0.4);
}

.placement-defer-link:hover,
.placement-defer-link:focus-visible {
  color: var(--ink);
  text-decoration-color: var(--ink);
  outline: none;
}