:root {
  color-scheme: light;
  --ink: #0d4b3d;
  --ink-soft: #244f46;
  --muted: #667078;
  --green: #087b5b;
  --green-dark: #056047;
  --green-soft: #e8f4ef;
  --green-pale: #f2f9f6;
  --gold: #ffad16;
  --gold-soft: #fff5dd;
  --red: #bd4d43;
  --red-soft: #fff0ed;
  --line: #e5e9e7;
  --paper: #ffffff;
  --shadow: 0 18px 50px rgba(23, 62, 51, 0.1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--ink); background: #edf2ef; }
button, select, input { font: inherit; }
button, select { color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 4px solid rgba(255, 173, 22, 0.28); outline-offset: 3px; }
[hidden] { display: none !important; }

.page-shell {
  width: min(860px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 30px 30px 26px;
  background: #fff;
  box-shadow: 0 0 55px rgba(22, 53, 45, 0.08);
}

.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 90px; }
.brand { display: inline-flex; gap: 20px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark {
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #0a8c67, #087253);
  border-radius: 20px;
  font: 700 38px/1 "Traditional Arabic", serif;
  box-shadow: 0 12px 25px rgba(8, 123, 91, 0.24);
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 29px; line-height: 1.15; letter-spacing: -0.03em; }
.brand small { margin-top: 6px; color: var(--muted); font-size: 18px; }
.parent-badge {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  padding: 17px 25px;
  color: var(--green);
  background: #fff;
  border: 1px solid rgba(13, 75, 61, 0.08);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(27, 62, 52, 0.11);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}
.parent-badge i { width: 13px; height: 13px; background: #f2b53f; border-radius: 50%; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 34px;
  align-items: center;
  min-height: 444px;
  margin-top: 42px;
  padding: 60px 44px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #0b825f 0%, #087454 50%, #075b43 100%);
  border-radius: 36px;
  box-shadow: 0 18px 38px rgba(8, 103, 76, 0.2);
}
.hero::before {
  position: absolute;
  width: 370px;
  height: 370px;
  content: "";
  opacity: 0.14;
  background:
    repeating-linear-gradient(45deg, transparent 0 23px, rgba(255,255,255,.35) 24px 25px),
    repeating-linear-gradient(-45deg, transparent 0 23px, rgba(255,255,255,.25) 24px 25px);
  border-radius: 50%;
  top: -100px;
  right: -100px;
  transform: rotate(12deg);
}
.hero::after {
  position: absolute;
  width: 420px;
  height: 220px;
  content: "";
  background: rgba(255,255,255,.06);
  border-radius: 50%;
  filter: blur(20px);
  bottom: -170px;
  left: 70px;
}
.hero-copy { position: relative; z-index: 1; }
.eyebrow, .session-kicker { color: #ffc64f; font-size: 19px; font-weight: 800; letter-spacing: 0.01em; }
.hero h1 { margin: 24px 0 24px; font-size: clamp(38px, 5.3vw, 52px); font-weight: 500; line-height: 1.28; letter-spacing: -0.035em; }
.hero h1 em { color: #ffc64f; font-weight: 600; }
.hero p { max-width: 570px; margin: 0; color: rgba(255,255,255,.94); font-size: 21px; line-height: 1.72; }
.hero-ornament {
  position: relative;
  z-index: 1;
  display: grid;
  width: 215px;
  height: 215px;
  place-content: center;
  justify-self: end;
  border: 2px solid rgba(255, 195, 63, 0.72);
  border-radius: 50%;
}
.hero-ornament::before, .hero-ornament::after {
  position: absolute;
  content: "";
  border: 2px solid #ffc13b;
  inset: 23px;
  transform: rotate(45deg);
}
.hero-ornament::after { border-color: rgba(255,255,255,.32); inset: 38px; }
.hero-ornament span, .hero-ornament small { position: relative; z-index: 1; display: block; text-align: center; }
.hero-ornament span { font: 700 66px/1 Georgia, serif; }
.hero-ornament small { margin-top: 9px; font-size: 22px; font-weight: 800; letter-spacing: 0.08em; }

.concept-section { margin: 56px 8px 0; }
.concept-section > h2 { margin: 0 0 28px; font-size: 29px; letter-spacing: -0.03em; }
.mode-tabs { display: grid; gap: 30px; }
.mode-tab {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 72px;
  gap: 30px;
  align-items: center;
  width: 100%;
  min-height: 178px;
  padding: 32px;
  text-align: left;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 14px 28px rgba(28, 62, 52, 0.08);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.mode-tab:hover { transform: translateY(-2px); }
.mode-tab.is-active { background: linear-gradient(110deg, #f2faf7, #e6f4ef); border-color: var(--green); }
.tab-icon {
  display: grid;
  width: 100px;
  height: 100px;
  place-items: center;
  color: var(--green);
  background: #fff;
  border-radius: 20px;
  font: 700 48px/1 Georgia, serif;
  box-shadow: 0 10px 24px rgba(28, 62, 52, 0.09);
}
.tab-copy strong, .tab-copy small { display: block; }
.tab-copy strong { color: var(--green); font-size: 28px; line-height: 1.2; }
.tab-copy small { margin-top: 14px; color: var(--muted); font-size: 20px; line-height: 1.35; }
.mode-action {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  color: #fff;
  background: var(--green);
  border-radius: 50%;
  font-size: 27px;
  box-shadow: 0 10px 20px rgba(8, 123, 91, 0.23);
}
.mode-tab[data-mode="murojaah"] .tab-icon, .mode-tab[data-mode="murojaah"] .tab-copy strong { color: var(--gold); }
.mode-tab[data-mode="murojaah"] .mode-action { background: var(--gold); box-shadow: 0 10px 20px rgba(255, 173, 22, 0.25); }
.mode-tab[data-mode="murojaah"].is-active { background: var(--gold-soft); border-color: var(--gold); }

.panel { background: var(--paper); border: 1px solid rgba(13, 75, 61, 0.1); border-radius: 28px; box-shadow: var(--shadow); }
.setup-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
  padding: 30px;
  background: linear-gradient(145deg, #fff, #f7fbf9);
}
.setup-heading { grid-column: 1 / -1; }
.setup-heading span { font-size: 25px; font-weight: 800; }
.setup-heading p { margin: 6px 0 0; color: var(--muted); font-size: 16px; }
.field-group { display: block; margin: 0; }
.setup-card > .field-group:first-of-type { grid-column: 1 / -1; }
.field-label { display: block; margin-bottom: 10px; color: var(--ink-soft); font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.segmented-control { display: grid; grid-template-columns: 1fr 1fr; padding: 6px; background: #edf0ed; border-radius: 15px; }
.scope-button { min-height: 48px; padding: 8px 14px; background: transparent; border: 0; border-radius: 11px; font-size: 15px; font-weight: 800; }
.scope-button.is-active { color: var(--green); background: #fff; box-shadow: 0 5px 14px rgba(28, 62, 52, 0.09); }
.select-wrap { position: relative; display: block; }
.select-wrap::after { position: absolute; top: 50%; right: 18px; content: "⌄"; pointer-events: none; transform: translateY(-58%); font-size: 17px; }
select { width: 100%; min-height: 58px; padding: 0 48px 0 17px; appearance: none; background: #fff; border: 1px solid #dbe3df; border-radius: 14px; font-size: 15px; }
.primary-button, .secondary-button {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 850;
}
.primary-button { color: #fff; background: var(--green); border: 1px solid var(--green); box-shadow: 0 12px 24px rgba(8, 123, 91, 0.18); }
.primary-button:hover { background: var(--green-dark); }
.primary-button:disabled { opacity: 0.6; cursor: wait; }
.secondary-button { color: var(--green); background: #fff; border: 1px solid rgba(8, 123, 91, 0.28); }
.compact { min-height: 48px; }
.prepare-button { grid-column: 1 / -1; width: 100%; justify-content: space-between; padding-inline: 24px; }
.browser-note { grid-column: 1 / -1; margin: -8px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.browser-note.is-error { color: var(--red); font-weight: 700; }

.workspace { margin-top: 62px; }
.session-card { min-height: 270px; padding: 36px 42px; }
.home-ready { background: linear-gradient(105deg, #eff8f4, #f7fbf9 55%, #eaf4ef); }
.empty-state { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; align-items: center; min-height: 198px; }
.empty-copy h2 { margin: 0; font-size: 29px; letter-spacing: -0.03em; }
.empty-copy p { max-width: 430px; margin: 15px 0 0; color: var(--muted); font-size: 20px; line-height: 1.55; }
.empty-illustration { position: relative; width: 230px; height: 180px; }
.empty-illustration::before, .empty-illustration::after {
  position: absolute;
  width: 70px;
  height: 110px;
  content: "";
  background: linear-gradient(140deg, #b9dfca, #78ba99);
  border-radius: 100% 0 100% 0;
  left: 12px;
  bottom: 18px;
  transform: rotate(-28deg);
}
.empty-illustration::after { width: 54px; height: 90px; left: 45px; bottom: 8px; opacity: 0.78; transform: rotate(18deg); }
.book-page { position: absolute; display: block; }
.book-page.right { width: 125px; height: 145px; right: 25px; bottom: 8px; background: #f5d9a4; border: 7px solid #236a51; border-radius: 8px 14px 14px 8px; transform: rotate(-8deg); box-shadow: 0 14px 22px rgba(30, 76, 61, 0.2); }
.book-page.left {
  z-index: 2;
  width: 130px;
  height: 150px;
  right: 34px;
  bottom: 24px;
  background: linear-gradient(145deg, #146a4e, #0c4f3c);
  border-radius: 9px 14px 14px 8px;
  transform: rotate(-14deg);
  box-shadow: inset 12px 0 rgba(255,255,255,.06), 0 15px 26px rgba(22, 65, 51, 0.25);
}
.book-page.left::before { position: absolute; content: ""; width: 54px; height: 54px; border: 4px double #f3bc42; inset: 32px auto auto 38px; transform: rotate(45deg); }
.book-star { position: absolute; z-index: 3; color: #f3bc42; font-size: 26px; right: 78px; top: 53px; transform: rotate(-14deg); }

body.session-active .hero, body.session-active .concept-section, body.session-active .history-card, body.session-active footer { display: none; }
body.session-active .workspace { margin-top: 34px; }
body.session-active .home-ready { min-height: 700px; padding: 34px; background: #fff; }

.session-view { display: flex; min-height: 630px; flex-direction: column; }
.session-header { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; }
.session-kicker { display: block; margin-bottom: 7px; color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: 0.11em; }
.session-header h2, .session-header p { margin: 0; }
.session-header h2 { font: 700 31px/1.25 Georgia, serif; }
.session-header p { margin-top: 7px; color: var(--muted); font-size: 14px; }
.status-pill {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding: 10px 15px;
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid rgba(8, 123, 91, 0.15);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.status-pill i { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; }
.status-pill.is-listening i { background: var(--green); animation: pulse 1.1s infinite; }
.status-pill.is-error { color: var(--red); background: var(--red-soft); border-color: rgba(189, 77, 67, 0.2); }
.status-pill.is-error i { background: var(--red); }
.progress-track { height: 7px; margin-top: 26px; overflow: hidden; background: #e7ebe8; border-radius: 99px; }
.progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--green), #36a47e); transition: width 300ms ease; }
.ayah-stage {
  display: grid;
  min-height: 265px;
  margin-top: 28px;
  padding: 34px 28px 22px;
  place-content: center;
  justify-items: center;
  text-align: center;
  background: linear-gradient(145deg, #fff, #fdfcf8);
  border: 1px solid #e2e3dc;
  border-radius: 25px;
}
.basmala { margin-bottom: 16px; color: var(--green); font: 500 24px/1.7 "Traditional Arabic", "Noto Naskh Arabic", serif; transition: opacity 180ms ease; }
.arabic-text { max-width: 100%; margin: 0; color: #123e35; font: 500 clamp(31px, 5vw, 48px)/2 "Traditional Arabic", "Noto Naskh Arabic", serif; transition: opacity 180ms ease; }
.arabic-text span { display: inline-block; padding: 0 3px; border-radius: 4px; }
.arabic-text .matched-word { color: var(--green); background: rgba(8, 123, 91, 0.12); }
.arabic-text .wrong-word { color: var(--red); background: rgba(189, 77, 67, 0.14); }
.arabic-text.is-hidden, .basmala.is-hidden { opacity: 0.08; filter: blur(7px); user-select: none; }
.text-toggle { margin-top: 14px; padding: 5px 0; color: var(--green); background: transparent; border: 0; border-bottom: 1px dashed rgba(8, 123, 91, 0.35); font-size: 12px; font-weight: 750; }
.session-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.verse-nav { display: flex; gap: 12px; align-items: center; min-height: 58px; padding: 10px 16px; color: var(--green); background: var(--green-pale); border: 1px solid rgba(8, 123, 91, 0.16); border-radius: 15px; text-align: left; }
.verse-nav.next { justify-content: flex-end; text-align: right; }
.verse-nav small, .verse-nav strong { display: block; }
.verse-nav small { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.verse-nav strong { margin-top: 2px; font-size: 13px; }
.verse-nav-arrow { font-size: 21px; }
.verse-nav:disabled { opacity: 0.38; }
.study-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
.play-icon { font-size: 11px; }
.listening-box, .success-card { display: flex; gap: 17px; align-items: center; margin-top: 24px; padding: 20px 22px; background: var(--green-soft); border: 1px solid rgba(8, 123, 91, 0.14); border-radius: 18px; }
.mic-pulse { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; color: #fff; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 8px rgba(8, 123, 91, 0.1); }
.mic-pulse span { animation: pulse 1.1s infinite; }
.listening-box strong, .listening-box p, .success-card strong, .success-card p { margin: 0; }
.listening-box strong, .success-card strong { font-size: 14px; }
.listening-box p, .success-card p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.sound-bars { display: flex; gap: 4px; align-items: center; height: 34px; margin-left: auto; }
.sound-bars i { width: 4px; height: 11px; background: #3da07b; border-radius: 4px; animation: sound 700ms ease-in-out infinite alternate; }
.sound-bars i:nth-child(2) { animation-delay: 100ms; }
.sound-bars i:nth-child(3) { animation-delay: 200ms; }
.sound-bars i:nth-child(4) { animation-delay: 300ms; }
.sound-bars i:nth-child(5) { animation-delay: 400ms; }
.correction-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; margin-top: 24px; padding: 23px; background: var(--red-soft); border: 1px solid rgba(189, 77, 67, 0.2); border-radius: 20px; }
.correction-icon { display: grid; width: 44px; height: 44px; place-items: center; color: #fff; background: var(--red); border-radius: 50%; font-weight: 900; }
.correction-copy > span { color: var(--red); font-size: 10px; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }
.correction-copy h3, .correction-copy p { margin: 0; }
.correction-copy h3 { margin-top: 4px; font: 700 24px/1.3 Georgia, serif; }
.correction-copy p { margin-top: 5px; color: #775b56; font-size: 13px; }
.word-comparison { display: flex; gap: 15px; align-items: center; margin-top: 17px; }
.word-comparison span:not(.comparison-arrow) { min-width: 130px; padding: 12px 15px; background: rgba(255,255,255,.72); border-radius: 12px; }
.word-comparison small, .word-comparison b { display: block; }
.word-comparison small { color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.word-comparison b { margin-top: 4px; font: 600 25px/1.4 "Traditional Arabic", serif; }
.comparison-arrow { color: var(--red); }
.correction-actions { display: flex; grid-column: 2; gap: 10px; }
.success-card { color: var(--green-dark); }
.success-check, .completion-mark { display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 50%; font-weight: 900; }
.success-check { width: 44px; height: 44px; }
.complete-card { display: grid; flex: 1; place-content: center; justify-items: center; text-align: center; }
.completion-mark { width: 78px; height: 78px; margin-bottom: 22px; border: 8px solid var(--green-soft); font-size: 31px; }
.complete-card h2 { margin: 11px 0 9px; font: 700 31px/1.25 Georgia, serif; }
.complete-card p { max-width: 470px; margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.session-footer { display: flex; gap: 22px; align-items: center; margin-top: auto; padding-top: 25px; color: var(--muted); border-top: 1px solid var(--line); font-size: 11px; text-transform: uppercase; }
.session-footer b { color: var(--ink); }
.stop-button { margin-left: auto; padding: 6px 0; color: var(--red); background: transparent; border: 0; border-bottom: 1px solid rgba(189, 77, 67, 0.35); font-size: 11px; font-weight: 850; }

.history-card { margin: 34px 0 0; padding: 28px 34px; }
.history-heading { display: grid; grid-template-columns: 58px minmax(0, 1fr) 40px; gap: 20px; align-items: center; }
.history-icon { display: grid; width: 58px; height: 58px; place-items: center; color: #fff; background: var(--green); border-radius: 50%; font-size: 31px; box-shadow: 0 10px 20px rgba(8, 123, 91, 0.2); }
.history-heading h2, .history-heading p { margin: 0; }
.history-heading h2 { font-size: 25px; }
.history-heading p { margin-top: 5px; color: var(--muted); font-size: 17px; }
.history-link { color: var(--ink); font-size: 48px; line-height: 1; text-align: right; text-decoration: none; }
.history-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.history-item, .history-empty { padding: 15px 17px; background: var(--green-pale); border: 1px solid var(--line); border-radius: 14px; }
.history-item strong, .history-item span, .history-item small { display: block; }
.history-item strong { overflow: hidden; font: 700 16px/1.3 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.history-item span { margin-top: 5px; color: var(--green); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.history-item small, .history-empty { margin-top: 5px; color: var(--muted); font-size: 11px; }
.history-empty { grid-column: 1 / -1; margin-top: 0; text-align: center; }

footer { padding: 28px 18px 15px; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.bottom-nav {
  position: sticky;
  z-index: 10;
  bottom: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 22px;
  padding: 10px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(13, 75, 61, 0.1);
  border-radius: 32px;
  box-shadow: 0 15px 42px rgba(27, 62, 52, 0.14);
  backdrop-filter: blur(16px);
}
.nav-item {
  display: grid;
  min-height: 94px;
  place-content: center;
  justify-items: center;
  color: #6d727a;
  background: transparent;
  border: 0;
  border-radius: 26px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 650;
}
.nav-item svg { width: 31px; height: 31px; margin-bottom: 7px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.nav-item:first-child svg path { fill: currentColor; stroke: none; }
.nav-item.is-active { color: var(--green); background: linear-gradient(135deg, #eff8f4, #e2f1eb); font-weight: 800; }
.nav-item:disabled { opacity: 1; }

@keyframes pulse { 50% { opacity: 0.42; } }
@keyframes sound { to { height: 29px; } }

@media (max-width: 760px) {
  .page-shell { padding: 24px 22px 22px; }
  .brand-mark { width: 66px; height: 66px; border-radius: 17px; font-size: 32px; }
  .brand { gap: 15px; }
  .brand strong { font-size: 24px; }
  .brand small { font-size: 15px; }
  .parent-badge { padding: 14px 19px; font-size: 15px; }
  .hero { grid-template-columns: minmax(0, 1fr) 190px; min-height: 390px; padding: 44px 34px; }
  .hero h1 { font-size: 40px; }
  .hero p { font-size: 18px; }
  .hero-ornament { width: 175px; height: 175px; }
  .hero-ornament span { font-size: 55px; }
  .mode-tab { grid-template-columns: 86px minmax(0, 1fr) 62px; gap: 22px; min-height: 152px; padding: 27px; }
  .tab-icon { width: 86px; height: 86px; font-size: 41px; }
  .tab-copy strong { font-size: 25px; }
  .tab-copy small { margin-top: 10px; font-size: 17px; }
  .mode-action { width: 62px; height: 62px; font-size: 23px; }
  .empty-state { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
  .empty-illustration { transform: scale(.86); transform-origin: left center; }
  .history-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .page-shell { padding: 18px 14px 18px; }
  .topbar { min-height: 70px; }
  .brand-mark { width: 56px; height: 56px; border-radius: 15px; font-size: 27px; }
  .brand { gap: 12px; }
  .brand strong { font-size: 19px; }
  .brand small { margin-top: 3px; font-size: 12px; }
  .parent-badge { gap: 8px; padding: 10px 12px; font-size: 11px; }
  .parent-badge i { width: 9px; height: 9px; }
  .hero { grid-template-columns: 1fr; min-height: 405px; margin-top: 28px; padding: 36px 26px; border-radius: 27px; }
  .hero-copy { z-index: 2; }
  .eyebrow { font-size: 14px; }
  .hero h1 { margin: 18px 0; font-size: 35px; line-height: 1.25; }
  .hero p { max-width: 92%; font-size: 16px; line-height: 1.6; }
  .hero-ornament { position: absolute; width: 150px; height: 150px; opacity: 0.22; right: 18px; bottom: 20px; }
  .concept-section { margin: 38px 2px 0; }
  .concept-section > h2 { margin-bottom: 20px; font-size: 24px; }
  .mode-tabs { gap: 18px; }
  .mode-tab { grid-template-columns: 68px minmax(0, 1fr) 48px; gap: 15px; min-height: 124px; padding: 20px; border-radius: 18px; }
  .tab-icon { width: 68px; height: 68px; border-radius: 16px; font-size: 34px; }
  .tab-copy strong { font-size: 21px; }
  .tab-copy small { margin-top: 6px; font-size: 13px; }
  .mode-action { width: 48px; height: 48px; font-size: 18px; }
  .setup-card { grid-template-columns: 1fr; gap: 18px; padding: 22px; border-radius: 21px; }
  .setup-heading, .setup-card > .field-group:first-of-type, .prepare-button, .browser-note { grid-column: 1; }
  .workspace { margin-top: 36px; }
  .session-card { padding: 24px 20px; border-radius: 23px; }
  .empty-state { grid-template-columns: 1fr; gap: 5px; justify-items: center; text-align: center; }
  .empty-illustration { height: 150px; transform: scale(.75); transform-origin: center; }
  .empty-copy h2 { font-size: 24px; }
  .empty-copy p { margin-top: 10px; font-size: 16px; }
  body.session-active .home-ready { min-height: 650px; padding: 22px 18px; }
  .session-header { gap: 10px; }
  .session-header h2 { font-size: 23px; }
  .status-pill { padding: 8px 10px; font-size: 9px; }
  .ayah-stage { min-height: 225px; padding: 27px 18px 18px; }
  .arabic-text { font-size: 31px; }
  .study-actions, .correction-actions { flex-direction: column; }
  .session-navigation { gap: 8px; }
  .verse-nav { min-height: 54px; padding: 9px 11px; }
  .verse-nav strong { font-size: 11px; }
  .study-actions button, .correction-actions button { width: 100%; }
  .correction-card { grid-template-columns: 1fr; padding: 20px; }
  .correction-icon { display: none; }
  .correction-actions { grid-column: 1; }
  .word-comparison { gap: 7px; }
  .word-comparison span:not(.comparison-arrow) { min-width: 0; flex: 1; padding: 10px; }
  .session-footer { gap: 10px; font-size: 9px; }
  .history-card { padding: 23px 20px; border-radius: 22px; }
  .history-heading { grid-template-columns: 48px minmax(0, 1fr) 25px; gap: 14px; }
  .history-icon { width: 48px; height: 48px; font-size: 26px; }
  .history-heading h2 { font-size: 21px; }
  .history-heading p { font-size: 13px; }
  .history-link { font-size: 38px; }
  .bottom-nav { bottom: 8px; padding: 7px; border-radius: 25px; }
  .nav-item { min-height: 74px; border-radius: 20px; font-size: 13px; }
  .nav-item svg { width: 25px; height: 25px; margin-bottom: 4px; }
}

@media (min-width: 900px) and (min-height: 700px) {
  body { overflow: hidden; }
  .page-shell { display: flex; width: min(1180px, 100%); height: 100dvh; min-height: 700px; padding: 14px 24px; flex-direction: column; overflow: hidden; }
  .topbar { flex: 0 0 auto; min-height: 62px; }
  .brand { gap: 12px; }
  .brand-mark { width: 52px; height: 52px; border-radius: 14px; font-size: 27px; }
  .brand strong { font-size: 20px; }
  .brand small { margin-top: 2px; font-size: 12px; }
  .parent-badge { gap: 8px; padding: 9px 15px; font-size: 12px; }
  .parent-badge i { width: 9px; height: 9px; }
  main { display: grid; grid-template-areas: "hero concept" "hero ready" "hero history"; grid-template-columns: .92fr 1.08fr; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px 18px; flex: 1 1 auto; min-height: 0; padding-top: 12px; }
  .hero { grid-area: hero; grid-template-columns: 1fr; min-height: 0; margin: 0; padding: 34px; align-content: center; border-radius: 27px; }
  .hero h1 { margin: 17px 0; font-size: clamp(34px, 3vw, 44px); line-height: 1.2; }
  .hero p { font-size: 16px; line-height: 1.55; }
  .eyebrow { font-size: 14px; }
  .hero-ornament { width: 145px; height: 145px; margin-top: 28px; justify-self: center; }
  .hero-ornament span { font-size: 47px; }
  .hero-ornament small { font-size: 14px; }
  .concept-section { grid-area: concept; min-height: 0; margin: 0; }
  .concept-section > h2 { margin: 0 0 9px; font-size: 21px; }
  .mode-tabs { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mode-tab { grid-template-columns: 52px minmax(0, 1fr) 34px; gap: 9px; min-height: 88px; padding: 11px; border-radius: 15px; box-shadow: 0 8px 18px rgba(28, 62, 52, 0.07); }
  .tab-icon { width: 52px; height: 52px; border-radius: 13px; font-size: 25px; }
  .tab-copy strong { font-size: 17px; }
  .tab-copy small { margin-top: 4px; font-size: 11px; }
  .mode-action { width: 34px; height: 34px; font-size: 12px; }
  .setup-card { margin-top: 10px; padding: 15px; gap: 11px 14px; border-radius: 18px; box-shadow: 0 10px 24px rgba(28, 62, 52, 0.08); }
  .setup-heading span { font-size: 18px; }
  .setup-heading p { margin-top: 2px; font-size: 11px; }
  .field-label { margin-bottom: 5px; font-size: 9px; }
  .segmented-control { padding: 4px; }
  .scope-button { min-height: 34px; font-size: 11px; }
  select { min-height: 40px; font-size: 12px; }
  .prepare-button { min-height: 42px; font-size: 12px; }
  .browser-note { font-size: 9px; }
  body.configuring .concept-section { grid-row: 1 / 4; overflow: auto; padding-right: 4px; }
  body.configuring .workspace, body.configuring .history-card { display: none; }
  .workspace { grid-area: ready; min-height: 0; margin: 0; }
  .session-card { height: 100%; min-height: 0; padding: 16px 20px; border-radius: 19px; }
  .empty-state { grid-template-columns: 135px minmax(0, 1fr); gap: 15px; min-height: 0; height: 100%; }
  .empty-illustration { width: 210px; height: 145px; transform: scale(.58); transform-origin: left center; }
  .empty-copy h2 { font-size: 20px; }
  .empty-copy p { margin-top: 7px; font-size: 13px; line-height: 1.45; }
  .history-card { grid-area: history; margin: 0; padding: 13px 17px; border-radius: 18px; }
  .history-heading { grid-template-columns: 38px minmax(0, 1fr) 24px; gap: 11px; }
  .history-icon { width: 38px; height: 38px; font-size: 21px; }
  .history-heading h2 { font-size: 17px; }
  .history-heading p { margin-top: 1px; font-size: 11px; }
  .history-link { font-size: 31px; }
  .history-list { gap: 7px; max-height: 68px; margin-top: 8px; overflow: auto; }
  .history-item, .history-empty { padding: 8px 10px; }
  .history-item strong { font-size: 12px; }
  .history-item span, .history-item small, .history-empty { font-size: 8px; }
  footer { display: none; }
  .bottom-nav { flex: 0 0 auto; bottom: 0; margin-top: 10px; padding: 5px; border-radius: 21px; }
  .nav-item { min-height: 50px; border-radius: 17px; font-size: 11px; }
  .nav-item svg { width: 21px; height: 21px; margin-bottom: 2px; }
  body.session-active main { display: block; min-height: 0; }
  body.session-active .workspace { height: 100%; margin: 0; }
  body.session-active .home-ready { height: 100%; min-height: 0; padding: 20px; overflow: auto; }
  body.session-active .session-view { min-height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body { overflow: hidden; }
.page-shell { display: flex; width: min(1180px, 100%); height: 100dvh; min-height: 0; padding: clamp(10px, 2vmin, 22px); flex-direction: column; overflow: hidden; }
.topbar { flex: 0 0 auto; min-height: clamp(48px, 7dvh, 72px); }
.brand { gap: clamp(9px, 1.8vmin, 16px); }
.brand-mark { width: clamp(46px, 7vmin, 66px); height: clamp(46px, 7vmin, 66px); border-radius: clamp(12px, 2vmin, 18px); font-size: clamp(25px, 4vmin, 34px); }
.brand strong { font-size: clamp(18px, 3vmin, 26px); }
.brand small { margin-top: 2px; font-size: clamp(10px, 1.8vmin, 15px); }
.parent-badge { gap: 8px; padding: clamp(8px, 1.5vmin, 14px) clamp(11px, 2.2vmin, 20px); font-size: clamp(10px, 1.8vmin, 15px); }
.parent-badge i { width: 9px; height: 9px; }

main#home { display: grid; grid-template-rows: minmax(0, 1fr) auto clamp(78px, 14dvh, 138px); gap: clamp(7px, 1.35dvh, 14px); flex: 1 1 auto; min-height: 0; padding-top: clamp(7px, 1.2dvh, 13px); }
.hero { position: relative; grid-template-columns: 1fr; width: 100%; height: 100%; min-height: 0; margin: 0; padding: clamp(18px, 4vmin, 38px); align-content: center; border-radius: clamp(20px, 4vmin, 34px); }
.hero-copy { z-index: 2; width: min(74%, 600px); }
.eyebrow { font-size: clamp(11px, 2.1vmin, 18px); }
.hero h1 { margin: clamp(10px, 2dvh, 21px) 0; font-size: clamp(25px, 5.2vmin, 48px); line-height: 1.18; }
.hero p { font-size: clamp(11px, 2vmin, 18px); line-height: 1.5; }
.hero-ornament { position: absolute; width: clamp(95px, 22vmin, 190px); height: clamp(95px, 22vmin, 190px); margin: 0; opacity: 0.95; right: clamp(15px, 4vmin, 42px); bottom: 50%; transform: translateY(50%); }
.hero-ornament::before { inset: 17px; }
.hero-ornament::after { inset: 29px; }
.hero-ornament span { font-size: clamp(37px, 8vmin, 64px); }
.hero-ornament small { margin-top: 5px; font-size: clamp(11px, 2.4vmin, 20px); }

.concept-section { margin: 0; }
.ready-heading { margin: 0 0 clamp(7px, 1.2dvh, 13px); }
.ready-heading h2, .ready-heading p { margin: 0; }
.ready-heading h2 { font-size: clamp(17px, 3vmin, 25px); letter-spacing: -0.03em; }
.ready-heading p { margin-top: 3px; color: var(--muted); font-size: clamp(10px, 1.8vmin, 15px); }
.mode-tabs { display: grid; grid-template-columns: 1fr; gap: clamp(6px, 1dvh, 10px); }
.mode-tab { grid-template-columns: clamp(42px, 7vmin, 64px) minmax(0, 1fr) clamp(36px, 6vmin, 54px); gap: clamp(9px, 1.8vmin, 16px); min-height: clamp(58px, 8.5dvh, 86px); padding: clamp(8px, 1.8vmin, 16px); border-radius: clamp(13px, 2.5vmin, 19px); box-shadow: 0 7px 18px rgba(28, 62, 52, 0.07); }
.tab-icon { width: clamp(42px, 7vmin, 64px); height: clamp(42px, 7vmin, 64px); border-radius: clamp(11px, 2vmin, 16px); font-size: clamp(22px, 4vmin, 34px); }
.tab-copy strong { font-size: clamp(15px, 2.6vmin, 22px); }
.tab-copy small { margin-top: 3px; font-size: clamp(9px, 1.7vmin, 14px); }
.mode-action { width: clamp(36px, 6vmin, 54px); height: clamp(36px, 6vmin, 54px); font-size: clamp(13px, 2.5vmin, 20px); }

.quote-card { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: clamp(10px, 2vmin, 22px); align-items: center; min-height: 0; padding: clamp(10px, 2vmin, 20px); overflow: hidden; color: var(--green-dark); background: linear-gradient(105deg, #dcefe4, #f5faf7 56%, #e7f3ea); border: 1px solid rgba(8, 123, 91, 0.1); border-radius: clamp(17px, 3vmin, 26px); }
.quote-illustration { position: relative; width: 100%; height: 100%; min-height: 68px; }
.quote-stand { position: absolute; width: 56%; height: 14%; background: #80552c; border-radius: 5px; left: 22%; bottom: 14%; transform: rotate(-8deg); box-shadow: 0 8px 13px rgba(60, 67, 48, 0.18); }
.quote-stand::before, .quote-stand::after { position: absolute; width: 18%; height: 310%; content: ""; background: #93643a; border-radius: 4px; bottom: -85%; }
.quote-stand::before { left: 15%; transform: rotate(27deg); }
.quote-stand::after { right: 15%; transform: rotate(-27deg); }
.quote-book { position: absolute; width: 54%; height: 67%; background: linear-gradient(145deg, #0b7655, #07513c); border: 5px solid #b98d37; border-radius: 6px 10px 10px 6px; left: 22%; top: 5%; transform: rotate(8deg); box-shadow: 0 10px 18px rgba(17, 78, 57, 0.22); }
.quote-book::before { position: absolute; content: ""; width: 34%; height: 44%; border: 3px double #f3bd4c; inset: 26% auto auto 31%; transform: rotate(45deg); }
.quote-emblem { position: absolute; color: #f4c04d; font-size: clamp(12px, 2.5vmin, 22px); left: 48%; top: 34%; transform: translate(-50%, -50%) rotate(8deg); }
.quote-card blockquote { margin: 0; }
.quote-mark { display: block; height: clamp(16px, 3dvh, 30px); font: 800 clamp(27px, 5vmin, 46px)/1 Georgia, serif; }
.quote-card blockquote p { margin: 0; font-size: clamp(11px, 2.1vmin, 18px); font-weight: 650; line-height: 1.45; }
.quote-card cite { display: block; margin-top: clamp(3px, .8dvh, 8px); font-size: clamp(9px, 1.7vmin, 14px); font-style: normal; }

.workspace { display: none; margin: 0; min-height: 0; }
.bottom-nav { position: static; flex: 0 0 auto; bottom: auto; gap: 3px; margin-top: clamp(7px, 1.2dvh, 12px); padding: clamp(4px, .8vmin, 7px); border-radius: clamp(18px, 3vmin, 27px); }
.nav-item { min-height: clamp(48px, 7dvh, 67px); border-radius: clamp(15px, 2.5vmin, 22px); font-size: clamp(10px, 1.8vmin, 14px); }
.nav-item svg { width: clamp(20px, 3.4vmin, 28px); height: clamp(20px, 3.4vmin, 28px); margin-bottom: 2px; }

body.configuring::before { position: fixed; z-index: 20; content: ""; background: rgba(8, 33, 26, 0.48); backdrop-filter: blur(5px); inset: 0; }
.setup-card { position: fixed; z-index: 30; width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: 0; padding: clamp(16px, 3vmin, 26px); overflow: hidden; inset: 50% auto auto 50%; transform: translate(-50%, -50%); }
.setup-heading { display: flex; grid-column: 1 / -1; gap: 14px; align-items: flex-start; justify-content: space-between; }
.close-button { display: grid; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; place-items: center; color: var(--ink); background: var(--green-soft); border: 0; border-radius: 50%; font-size: 23px; line-height: 1; }

.history-drawer { position: fixed; z-index: 50; display: grid; padding: 14px; place-items: end center; background: rgba(8, 33, 26, 0.48); backdrop-filter: blur(5px); inset: 0; }
.history-panel { width: min(620px, 100%); max-height: calc(100dvh - 28px); padding: clamp(18px, 3vmin, 28px); border-radius: 25px; }
.history-panel-heading { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.history-panel-heading h2, .history-panel-heading p { margin: 0; }
.history-panel-heading h2 { font-size: clamp(20px, 3vmin, 27px); }
.history-panel-heading p { margin-top: 4px; color: var(--muted); font-size: 13px; }
.history-panel .history-list { display: grid; grid-template-columns: 1fr; gap: 9px; max-height: none; margin-top: 16px; overflow: hidden; }
.history-panel .history-item, .history-panel .history-empty { padding: 13px 15px; }
.history-panel .history-item strong { font-size: 15px; }
.history-panel .history-item span, .history-panel .history-item small, .history-panel .history-empty { font-size: 10px; }

body.session-active main#home { display: block; padding-top: 8px; }
body.session-active .hero, body.session-active .concept-section, body.session-active .quote-card { display: none; }
body.session-active .workspace { display: block; width: 100%; height: 100%; }
body.session-active .home-ready { width: 100%; height: 100%; min-height: 0; padding: clamp(14px, 2.5vmin, 24px); overflow: hidden; }
body.session-active .session-view { height: 100%; min-height: 0; }
body.session-active .session-header h2 { font-size: clamp(21px, 3.4vmin, 30px); }
body.session-active .progress-track { margin-top: clamp(9px, 1.6dvh, 18px); }
body.session-active .ayah-stage { min-height: clamp(135px, 28dvh, 245px); margin-top: clamp(10px, 1.8dvh, 20px); padding: clamp(16px, 3vmin, 30px); }
body.session-active .arabic-text { font-size: clamp(27px, 5vmin, 45px); }
body.session-active .session-navigation { margin-top: clamp(7px, 1.2dvh, 13px); }
body.session-active .study-actions, body.session-active .listening-box, body.session-active .correction-card, body.session-active .success-card { margin-top: clamp(8px, 1.3dvh, 15px); }
body.session-active .session-footer { padding-top: clamp(9px, 1.5dvh, 17px); }

@media (min-width: 900px) {
  main#home { grid-template-areas: "hero concept" "hero quote"; grid-template-columns: 1.08fr .92fr; grid-template-rows: auto minmax(0, 1fr); gap: clamp(12px, 1.8vmin, 20px); }
  .hero { grid-area: hero; }
  .concept-section { grid-area: concept; }
  .quote-card { grid-area: quote; }
  .mode-tabs { gap: 9px; }
  .mode-tab { min-height: clamp(66px, 9dvh, 86px); }
  .quote-card { grid-template-columns: minmax(140px, 39%) minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .page-shell { padding: 9px; }
  .brand small { max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .parent-badge { padding-inline: 9px; }
  .parent-badge br { display: none; }
  .hero-copy { width: 78%; }
  .hero h1 br { display: none; }
  .quote-card { grid-template-columns: 36% minmax(0, 1fr); }
  .setup-card { grid-template-columns: 1fr; gap: 12px; overflow: hidden; }
  .setup-heading, .setup-card > .field-group:first-of-type, .prepare-button, .browser-note { grid-column: 1; }
}

@media (max-height: 720px) {
  .page-shell { padding-block: 7px; }
  .topbar { min-height: 44px; }
  main#home { grid-template-rows: minmax(0, 1fr) auto 75px; gap: 6px; padding-top: 5px; }
  .brand-mark { width: 42px; height: 42px; }
  .brand strong { font-size: 17px; }
  .brand small { font-size: 9px; }
  .parent-badge { padding-block: 7px; font-size: 9px; }
  .hero { padding: 15px 18px; }
  .hero h1 { margin: 7px 0; font-size: clamp(22px, 5vmin, 34px); }
  .hero p { font-size: 10px; line-height: 1.35; }
  .ready-heading { margin-bottom: 5px; }
  .ready-heading p { display: none; }
  .mode-tabs { gap: 5px; }
  .mode-tab { min-height: 51px; padding-block: 6px; }
  .tab-copy small { display: none; }
  .quote-card { padding: 7px 10px; }
  .quote-mark { display: none; }
  .quote-card blockquote p { font-size: 10px; line-height: 1.3; }
  .quote-card cite { margin-top: 2px; font-size: 8px; }
  .bottom-nav { margin-top: 5px; }
  .nav-item { min-height: 43px; }
  .nav-item svg { width: 18px; height: 18px; }
  body.session-active .ayah-stage { min-height: 120px; }
  body.session-active .correction-card { padding: 14px; }
}

@media (orientation: landscape) and (max-height: 600px) {
  main#home { grid-template-areas: "hero concept" "hero quote"; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 8px 12px; }
  .hero { grid-area: hero; }
  .concept-section { grid-area: concept; }
  .quote-card { grid-area: quote; }
  .hero-copy { width: 72%; }
  .mode-tabs { grid-template-columns: 1fr 1fr; }
  .mode-tab { grid-template-columns: 38px minmax(0, 1fr) 30px; gap: 6px; }
  .tab-icon { width: 38px; height: 38px; }
  .mode-action { width: 30px; height: 30px; }
}

.page-shell { width: min(920px, 100%); }
.topbar { min-height: clamp(44px, 6.5dvh, 62px); }
.brand-mark { width: clamp(42px, 6vmin, 56px); height: clamp(42px, 6vmin, 56px); font-size: clamp(23px, 3.5vmin, 30px); }
.brand strong { font-size: clamp(17px, 2.5vmin, 22px); }
.brand small { font-size: clamp(9px, 1.5vmin, 12px); }
.parent-badge { padding: clamp(7px, 1.2vmin, 10px) clamp(10px, 1.8vmin, 15px); font-size: clamp(9px, 1.5vmin, 12px); }
.hero { padding: clamp(16px, 3vmin, 29px); }
.hero h1 { font-size: clamp(23px, 4.2vmin, 38px); }
.hero p { font-size: clamp(10px, 1.65vmin, 14px); }
.hero-ornament { width: clamp(88px, 18vmin, 145px); height: clamp(88px, 18vmin, 145px); }
.hero-ornament span { font-size: clamp(34px, 6.5vmin, 52px); }
.hero-ornament small { font-size: clamp(10px, 1.8vmin, 15px); }
.ready-heading h2 { font-size: clamp(16px, 2.5vmin, 21px); }
.ready-heading p { font-size: clamp(9px, 1.5vmin, 12px); }
.mode-tab { grid-template-columns: clamp(38px, 5.5vmin, 52px) minmax(0, 1fr) clamp(32px, 4.8vmin, 44px); min-height: clamp(52px, 7.5dvh, 72px); padding: clamp(7px, 1.3vmin, 11px); }
.tab-icon { width: clamp(38px, 5.5vmin, 52px); height: clamp(38px, 5.5vmin, 52px); font-size: clamp(20px, 3.2vmin, 28px); }
.tab-copy strong { font-size: clamp(14px, 2.2vmin, 18px); }
.tab-copy small { font-size: clamp(8px, 1.4vmin, 11px); }
.mode-action { width: clamp(32px, 4.8vmin, 44px); height: clamp(32px, 4.8vmin, 44px); font-size: clamp(11px, 1.8vmin, 15px); }
.quote-card blockquote p { font-size: clamp(10px, 1.7vmin, 14px); }
.quote-card cite { font-size: clamp(8px, 1.35vmin, 11px); }
.bottom-nav { width: 100%; max-width: 760px; margin-inline: auto; }
.nav-item { min-height: clamp(43px, 6.2dvh, 55px); font-size: clamp(9px, 1.5vmin, 12px); }
.nav-item svg { width: clamp(18px, 2.8vmin, 23px); height: clamp(18px, 2.8vmin, 23px); }

body.view-learn main#home { display: block; padding-top: clamp(8px, 1.5dvh, 14px); }
body.view-learn .hero, body.view-learn .ready-heading, body.view-learn .mode-tabs, body.view-learn .quote-card { display: none; }
body.view-learn .concept-section { display: grid; height: 100%; margin: 0; place-items: center; }
body.view-learn .setup-card { position: static; width: min(680px, 100%); max-height: none; margin: 0; padding: clamp(18px, 3vmin, 28px); overflow: hidden; transform: none; }
body.view-learn.session-active .concept-section { display: none; }
body.view-learn.session-active .workspace { display: block; }
body.view-home .workspace { display: none; }

body.view-learn .setup-heading span { font-size: clamp(18px, 2.8vmin, 23px); }
body.view-learn .setup-heading p { font-size: clamp(10px, 1.6vmin, 13px); }
body.view-learn .field-label { font-size: 9px; }
body.view-learn select { min-height: clamp(40px, 6dvh, 50px); font-size: 12px; }
body.view-learn .scope-button { min-height: clamp(34px, 5dvh, 42px); font-size: 11px; }
body.view-learn .prepare-button { min-height: clamp(42px, 6dvh, 50px); font-size: 12px; }

@media (min-width: 900px) {
  main#home { grid-template-columns: 1fr .82fr; }
  .hero-copy { width: 70%; }
}

.page-shell { width: min(430px, 100%); background: #fff; box-shadow: 0 0 38px rgba(22, 53, 45, 0.06); }
body.view-home main#home { display: grid; grid-template-areas: none; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto clamp(76px, 13dvh, 108px); gap: clamp(6px, 1dvh, 9px); }
body.view-home .hero, body.view-home .concept-section, body.view-home .quote-card { grid-area: auto; }
.topbar { min-height: clamp(43px, 5.8dvh, 55px); }
.brand-mark { width: clamp(41px, 5.4vmin, 50px); height: clamp(41px, 5.4vmin, 50px); background: linear-gradient(145deg, #0b8a65, #05704f); }
.brand strong { font-size: clamp(16px, 2.4vmin, 20px); }
.brand small { font-size: clamp(9px, 1.35vmin, 11px); }
.parent-badge { padding: 7px 10px; font-size: clamp(9px, 1.35vmin, 11px); }
.parent-badge { border: 0; box-shadow: 0 8px 24px rgba(27, 62, 52, 0.1); }
.hero { min-height: 0; padding: clamp(16px, 2.8vmin, 24px); background: linear-gradient(135deg, #087c58, #006845); border-radius: clamp(19px, 3vmin, 25px); }
.hero-copy { width: 68%; }
.hero h1 { margin: clamp(7px, 1.2dvh, 12px) 0; font-size: clamp(23px, 3.8vmin, 32px); line-height: 1.2; }
.hero p { max-width: 500px; font-size: clamp(10px, 1.55vmin, 13px); line-height: 1.45; }
.hero-ornament { width: clamp(88px, 16vmin, 130px); height: clamp(88px, 16vmin, 130px); right: clamp(13px, 3vmin, 25px); }
.hero-ornament span { font-size: clamp(34px, 5.7vmin, 47px); }
.ready-heading { margin: 0 0 clamp(5px, .8dvh, 7px); padding-inline: 3px; }
.ready-heading h2 { font-size: clamp(16px, 2.3vmin, 19px); }
.ready-heading p { margin-top: 2px; font-size: clamp(9px, 1.35vmin, 11px); }
.mode-tabs { grid-template-columns: 1fr; gap: clamp(5px, .8dvh, 7px); }
.mode-tab { grid-template-columns: clamp(38px, 5.2vmin, 48px) minmax(0, 1fr) clamp(32px, 4.7vmin, 40px) 10px; gap: clamp(7px, 1.2vmin, 10px); min-height: clamp(51px, 7dvh, 65px); padding: clamp(7px, 1.2vmin, 10px); background: linear-gradient(100deg, #fff, #f7fbf9); border-width: 1px; border-radius: clamp(13px, 2vmin, 16px); }
.mode-tab.is-active { background: linear-gradient(100deg, #eff9f5, #f7fcfa); border-color: rgba(8, 123, 91, 0.26); }
.mode-tab[data-mode="murojaah"] { background: linear-gradient(100deg, #fff, #fffaf0); }
.mode-tab[data-mode="murojaah"].is-active { background: linear-gradient(100deg, #fff8e8, #fffcf5); border-color: rgba(255, 173, 22, 0.3); }
.tab-icon { width: clamp(38px, 5.2vmin, 48px); height: clamp(38px, 5.2vmin, 48px); font-size: clamp(19px, 3vmin, 25px); }
.tab-copy strong { font-size: clamp(14px, 2vmin, 17px); }
.tab-copy small { margin-top: 2px; font-size: clamp(8px, 1.25vmin, 10px); }
.mode-action { width: clamp(32px, 4.7vmin, 40px); height: clamp(32px, 4.7vmin, 40px); }
.mode-chevron { color: rgba(8, 123, 91, 0.65); font-size: 16px; font-weight: 900; }
.mode-tab[data-mode="murojaah"] .mode-chevron { color: rgba(255, 173, 22, 0.7); }
.quote-card { grid-template-columns: minmax(92px, 36%) minmax(0, 1fr); padding: clamp(7px, 1.3vmin, 11px); border-radius: clamp(15px, 2.3vmin, 19px); }
.quote-mark { height: clamp(11px, 1.8dvh, 18px); font-size: clamp(22px, 3.4vmin, 29px); }
.quote-card blockquote p { font-size: clamp(9px, 1.45vmin, 12px); line-height: 1.38; }
.quote-card cite { font-size: clamp(8px, 1.15vmin, 9px); }
.bottom-nav { max-width: none; margin-top: clamp(5px, .8dvh, 7px); padding: 4px; border-radius: clamp(17px, 2.5vmin, 21px); box-shadow: 0 8px 22px rgba(27, 62, 52, 0.1); }
.nav-item { min-height: clamp(40px, 5.6dvh, 49px); font-size: clamp(9px, 1.3vmin, 11px); }
.nav-item svg { width: clamp(17px, 2.5vmin, 21px); height: clamp(17px, 2.5vmin, 21px); }

@media (max-width: 520px) {
  .hero-copy { width: 73%; }
  .hero h1 { font-size: clamp(22px, 6.4vw, 27px); }
  .hero p { font-size: clamp(9px, 2.7vw, 11px); }
  .hero-ornament { opacity: 0.78; right: 13px; }
  .mode-tab { grid-template-columns: 38px minmax(0, 1fr) 32px 8px; gap: 7px; }
  .tab-icon { width: 38px; height: 38px; }
  .mode-action { width: 32px; height: 32px; }
  .mode-chevron { font-size: 14px; }
}

@media (max-height: 600px) {
  body.view-home main#home { grid-template-rows: minmax(0, 1fr) auto 62px; gap: 5px; }
  .topbar { min-height: 40px; }
  .brand-mark { width: 38px; height: 38px; }
  .hero { padding: 12px 16px; }
  .hero h1 { margin: 5px 0; font-size: 22px; }
  .hero p { display: none; }
  .hero-ornament { width: 78px; height: 78px; }
  .hero-ornament span { font-size: 31px; }
  .ready-heading h2 { font-size: 14px; }
  .mode-tab { min-height: 43px; padding-block: 4px; }
  .tab-icon { width: 34px; height: 34px; font-size: 18px; }
  .mode-action { width: 29px; height: 29px; }
  .quote-card blockquote p { font-size: 9px; }
  .nav-item { min-height: 38px; }
}

body {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  background: radial-gradient(circle at top, #f8fbf9 0, #edf3ef 58%, #e5ede8 100%);
}

.page-shell {
  width: min(430px, 100%);
  height: min(100dvh, 820px);
  padding: clamp(8px, 1.4dvh, 12px);
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(20, 63, 51, 0.14);
}

.topbar {
  min-height: clamp(46px, 6.5dvh, 54px);
  padding-inline: 2px;
}

.brand { gap: 9px; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; font-size: 23px; box-shadow: 0 8px 18px rgba(8, 123, 91, 0.2); }
.brand strong { font-size: 15px; letter-spacing: -0.02em; }
.brand small { margin-top: 2px; font-size: 8.5px; }
.parent-badge { gap: 6px; padding: 7px 9px; font-size: 8.5px; line-height: 1.2; }
.parent-badge i { width: 7px; height: 7px; }

body.view-home main#home {
  grid-template-rows: 35% 31% 26%;
  gap: 4%;
  padding-top: clamp(5px, .8dvh, 8px);
}

body.view-home .concept-section {
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
}

.hero {
  isolation: isolate;
  height: 100%;
  padding: clamp(16px, 2.4dvh, 21px);
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 209, 99, 0.16), transparent 30%),
    linear-gradient(140deg, #09805e 0%, #057052 54%, #04573f 100%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 23px;
  box-shadow: 0 16px 32px rgba(5, 96, 71, 0.21);
}

.hero::before {
  width: 230px;
  height: 230px;
  opacity: .11;
  top: -90px;
  right: -80px;
}

.hero::after { width: 260px; height: 140px; bottom: -105px; left: -20px; }
.hero-copy { width: 72%; }
.eyebrow { display: inline-flex; padding: 4px 7px; background: rgba(255,255,255,.1); border-radius: 999px; font-size: clamp(8px, 1.3dvh, 10px); }
.hero h1 { margin: clamp(7px, 1.1dvh, 10px) 0; font-size: clamp(22px, 3.7dvh, 29px); line-height: 1.14; letter-spacing: -0.04em; }
.hero p { max-width: 255px; font-size: clamp(9px, 1.35dvh, 10.5px); line-height: 1.42; }
.hero-ornament { width: clamp(78px, 13dvh, 102px); height: clamp(78px, 13dvh, 102px); right: clamp(12px, 2.2dvh, 19px); border: 0; }
.hero-ornament::before { border-color: rgba(255, 193, 59, .9); inset: 8px; }
.hero-ornament::after { border-color: rgba(255, 224, 150, .52); inset: 18px; }
.hero-ornament span { font-size: clamp(30px, 5dvh, 40px); line-height: .92; }
.hero-ornament small { margin-top: 4px; font-size: 9px; font-weight: 800; letter-spacing: .18em; }

.ready-heading { margin-bottom: clamp(5px, .8dvh, 7px); }
.ready-heading h2 { font-size: clamp(15px, 2.2dvh, 18px); }
.ready-heading p { font-size: clamp(8.5px, 1.35dvh, 10px); }
.mode-tabs { gap: clamp(6px, .9dvh, 8px); }
.mode-tab { min-height: clamp(49px, 7.2dvh, 58px); padding: 7px 8px; border-radius: 15px; box-shadow: 0 7px 18px rgba(28, 62, 52, 0.065); }
.tab-icon { width: clamp(36px, 5.8dvh, 44px); height: clamp(36px, 5.8dvh, 44px); font-size: clamp(18px, 3dvh, 23px); }
.tab-copy strong { font-size: clamp(13px, 2dvh, 16px); }
.tab-copy small { font-size: clamp(7.5px, 1.2dvh, 9px); }
.mode-action { width: clamp(29px, 4.8dvh, 36px); height: clamp(29px, 4.8dvh, 36px); font-size: 11px; }

.quote-card { height: 100%; padding: clamp(8px, 1.4dvh, 12px); border-radius: 19px; }
.quote-card blockquote p { font-size: clamp(9px, 1.45dvh, 11px); }
.quote-card cite { font-size: clamp(7.5px, 1.1dvh, 8.5px); }
.quote-illustration { min-height: 56px; }
.bottom-nav { margin-top: clamp(6px, .9dvh, 8px); }
.nav-item { min-height: clamp(39px, 5.8dvh, 46px); }

body.view-history main#home {
  display: block;
  height: 100%;
  padding-top: clamp(6px, 1dvh, 9px);
}

body.view-history .hero,
body.view-history .concept-section,
body.view-history .quote-card,
body.view-history .workspace { display: none; }

.history-page {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

.history-page-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: clamp(14px, 2.3dvh, 19px);
  color: #fff;
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 202, 74, .18), transparent 34%),
    linear-gradient(140deg, #087b5b, #045a43);
  border-radius: 22px;
  box-shadow: 0 14px 30px rgba(5, 96, 71, .18);
}

.history-page-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #ffca4a;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;
  font-size: 27px;
}

.history-kicker { color: #ffca4a; font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.history-page-header h1 { margin: 3px 0 2px; font-size: clamp(20px, 3.2dvh, 25px); line-height: 1.1; letter-spacing: -.035em; }
.history-page-header p { margin: 0; color: rgba(255,255,255,.78); font-size: clamp(8.5px, 1.3dvh, 10px); }

.history-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: clamp(7px, 1.1dvh, 10px) 0;
}

.history-stats > span {
  display: grid;
  min-height: clamp(50px, 7.2dvh, 58px);
  padding: 7px 4px;
  place-content: center;
  text-align: center;
  background: #f1f8f5;
  border: 1px solid rgba(8, 123, 91, .09);
  border-radius: 14px;
}

.history-stats b { font-size: clamp(16px, 2.6dvh, 21px); line-height: 1; }
.history-stats small { margin-top: 4px; color: var(--muted); font-size: 7.5px; font-weight: 700; }
.history-page .history-list { display: grid; grid-template-columns: 1fr; gap: 7px; min-height: 0; margin: 0; padding: 1px 2px 8px 0; overflow-y: auto; scrollbar-width: none; }
.history-page .history-list::-webkit-scrollbar { display: none; }

.history-page .history-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 66px;
  margin: 0;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid rgba(13, 75, 61, .09);
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(27, 62, 52, .055);
}

.history-page .history-item span { margin-top: 0; color: inherit; font-size: inherit; font-weight: inherit; text-transform: none; }
.history-item-mark { display: grid !important; width: 40px; height: 40px; place-items: center; border-radius: 12px; font: 800 18px/1 Georgia, serif !important; }
.history-item-mark.is-hafalan { color: var(--green) !important; background: var(--green-soft); }
.history-item-mark.is-murojaah { color: #dd8c00 !important; background: var(--gold-soft); }
.history-item-copy { min-width: 0; }
.history-item-top { display: flex !important; gap: 8px; align-items: baseline; justify-content: space-between; }
.history-page .history-item strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.history-item-top time { flex: 0 0 auto; color: var(--muted); font-size: 7.5px; }
.history-item-mode { margin-top: 3px !important; color: var(--green) !important; font-size: 7.5px !important; font-weight: 850 !important; letter-spacing: .05em; text-transform: uppercase !important; }
.history-page .history-item small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.history-page .history-empty { display: grid; min-height: 180px; margin: 0; padding: 24px; place-content: center; text-align: center; font-size: 10px; line-height: 1.5; }

@media (max-width: 430px) {
  .page-shell { border-radius: 0; }
}

@media (max-height: 640px) {
  .hero p { display: none; }
  .ready-heading p, .tab-copy small { display: none; }
  .history-page-header { padding-block: 11px; }
  .history-page-icon { width: 42px; height: 42px; }
  .history-stats > span { min-height: 43px; }
  .history-page .history-item { min-height: 57px; padding-block: 7px; }
}

.learn-mode-field { grid-column: 1 / -1; }
.learn-mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.learn-mode-button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 43px;
  padding: 6px 8px;
  color: var(--ink-soft);
  text-align: left;
  background: #f7faf8;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 10px;
  font-weight: 800;
}
.learn-mode-button b { display: grid; width: 30px; height: 30px; place-items: center; color: var(--green); background: #fff; border-radius: 9px; font: 800 15px/1 Georgia, serif; box-shadow: 0 4px 10px rgba(27, 62, 52, .07); }
.learn-mode-button.is-active { color: var(--green); background: var(--green-soft); border-color: rgba(8, 123, 91, .32); box-shadow: inset 0 0 0 1px rgba(8, 123, 91, .06); }
.learn-mode-button[data-mode="murojaah"] b { color: #dc8b00; }
.learn-mode-button[data-mode="murojaah"].is-active { color: #c87d00; background: var(--gold-soft); border-color: rgba(255, 173, 22, .35); }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.session-navigation { display: grid; grid-template-columns: 44px minmax(58px, 1fr) 44px; gap: 12px; align-items: center; }
.verse-nav,
.verse-nav.next {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  text-align: center;
}
.verse-nav-arrow { font-size: 22px; line-height: 1; }
.study-actions { flex-direction: row; align-items: center; }
.study-actions .secondary-button { flex: 1 1 auto; width: auto; }
.record-button {
  position: relative;
  z-index: 1;
  width: 56px;
  min-height: 56px;
  padding: 0;
  justify-self: center;
  background: linear-gradient(145deg, #0b916b, #05684d);
  border: 4px solid #fff;
  border-radius: 50%;
  outline: 1px solid rgba(8, 123, 91, .2);
  box-shadow: 0 9px 22px rgba(5, 104, 77, .3), inset 0 1px 0 rgba(255,255,255,.24);
}
.record-button::before { position: absolute; z-index: -1; content: ""; border: 1px solid rgba(8, 123, 91, .2); border-radius: inherit; inset: -7px; }
.record-button::after { position: absolute; width: 7px; height: 7px; content: ""; background: #ffca4a; border: 2px solid #fff; border-radius: 50%; top: 1px; right: 1px; }
.record-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.record-button.is-recording { opacity: 1; background: linear-gradient(145deg, #e35f54, #b93f38); outline-color: rgba(185, 63, 56, .25); box-shadow: 0 9px 24px rgba(185, 63, 56, .32), inset 0 1px 0 rgba(255,255,255,.24); }
.record-button.is-recording::before { border-color: rgba(227, 95, 84, .45); animation: record-ring 1.35s ease-out infinite; }
.record-button.is-recording::after { background: #fff; border-color: rgba(255,255,255,.45); }
@keyframes record-ring { 0% { opacity: .9; transform: scale(.94); } 75%, 100% { opacity: 0; transform: scale(1.22); } }

@media (max-height: 640px) {
  .record-button { width: 50px; min-height: 50px; }
}

.record-button.is-success { opacity: 1; background: linear-gradient(145deg, #20a879, #087b5b); }
.record-button.is-success svg { opacity: 0; }
.record-button.is-success::after { width: auto; height: auto; content: "✓"; color: #fff; background: none; border: 0; border-radius: 0; font-size: 25px; font-weight: 900; line-height: 1; inset: 50% auto auto 50%; transform: translate(-50%, -50%); }

body { display: block; min-height: 100dvh; overflow-x: hidden; overflow-y: auto; }
.page-shell { height: auto; min-height: 100dvh; margin-inline: auto; overflow: visible; }
main#home { flex: 1 0 auto; overflow: visible; }
body.view-home main#home { grid-template-rows: auto; gap: clamp(10px, 1.8dvh, 16px); }
body.view-home .hero { min-height: clamp(190px, 28dvh, 230px); }
body.view-home .quote-card { min-height: 105px; }
body.view-learn main#home,
body.view-history main#home,
body.session-active main#home { height: auto; overflow: visible; }
body.view-learn .concept-section,
body.session-active .workspace,
body.session-active .home-ready,
body.session-active .session-view,
.history-page { height: auto; overflow: visible; }
body.session-active .home-ready { overflow: visible; }
.history-page .history-list { overflow: visible; }

.page-shell { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.bottom-nav {
  position: fixed;
  z-index: 45;
  width: min(414px, calc(100% - 16px));
  margin: 0;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
}