/* Distinct navigation layers around a quiet reading surface. */
:root, :root[data-theme=day], :root[data-theme=night] {
  --brand-primary:#6960ae; --brand-secondary:#9584d8; --brand-soft:#2f365f; --brand-light:#ffc2b2; --brand-highlight:#c9b5ff;
  --display:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ink:#f5f1ff; --green:#c6baff; --muted:#aeb9ee; --line:#3d4779;
  --bg:#0b1022; --surface:#171f3b; --soft:#263254; --lime:#d0bcff; --rail:#111931;
  --gold:#f4bfac; --accent:#34305c; --deep:#111a38; --on-accent:#142046; --shadow:0 10px 30px -18px #04081788;
  --success-bg:#243d3c; --success-text:#bfe5d5; --error-bg:#493145; --error-text:#ffd4df;
  --nav-selected:#2f3561; --nav-ink:#eee8ff; --nav-border:#5d69a7; --menu-surface:#182240; --menu-border:#3b4679;
  --reading-bg:#262953; --reading-ink:#f7f3ff; --reading-muted:#b7c0f3; --reading-gold:#c9b5ff;
  --read-tint:#282a51; --read-ink:#ded1ff; --read-edge:#5c5b9c;
  --learn-tint:#333568; --learn-ink:#eee7ff; --learn-edge:#6b68ae;
  --listen-tint:#1b2748; --listen-ink:#c3c4ff; --listen-edge:#4a5d94;
  --track-tint:#273958; --track-ink:#d8e4ff; --track-edge:#597ab0;
  --action-bg:#ffc2b2; --action-ink:#111d3f; --action-hover:#ffd2c3; --action-shadow:#c58f8b;
  --icon-ink:#c9b5ff;
  color-scheme:dark;
}
html {scroll-padding-bottom:160px;background:var(--bg)}
body {background:var(--bg);font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select {font:inherit}
button,a,input,select,summary {-webkit-tap-highlight-color:transparent}
button {touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {outline:3px solid var(--gold);outline-offset:4px}
button:disabled {opacity:.5;cursor:not-allowed}
svg {flex-shrink:0}
[hidden] {display:none!important}
h1,h2,h3,p {overflow-wrap:break-word}
h1 {font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.17}
h2 {letter-spacing:-.55px}
.eyebrow,.page-kicker {font-size:.875rem;line-height:1.5;letter-spacing:.09em;font-weight:600;color:var(--muted)}
.primary,.secondary {min-height:48px;padding:12px 21px;display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:11px;font-size:1rem;font-weight:600;line-height:1.5;white-space:normal}
.primary {background:var(--green);color:var(--surface);border:1px solid transparent}
.primary:hover {background:var(--deep);color:#fff}
.secondary {background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.secondary:hover {border-color:var(--green);background:var(--soft)}
html[data-theme=night] .primary {background:var(--lime);color:var(--on-accent)}
.text-button {font-size:.9375rem;line-height:1.5;min-height:44px;color:var(--green)}
.quiet-note,.settings-note {font-size:.875rem;line-height:1.8;color:var(--muted)}
input[type=search],input[type=text],select {min-width:0;font-size:1rem}
input[type=checkbox] {accent-color:var(--green);min-width:20px;min-height:20px}
progress {height:6px;border-radius:4px;accent-color:var(--green);background:var(--soft)}
progress::-webkit-progress-bar {background:var(--soft)}
progress::-webkit-progress-value {background:var(--green)}
progress::-moz-progress-bar {background:var(--green)}
body>aside {inset:0 auto 0 0;width:224px;height:100dvh;padding:38px 20px 24px;background:var(--rail);border:0;border-right:1px solid var(--line);z-index:40;color:var(--ink);display:flex;flex-direction:column}
aside .brand {color:var(--ink);gap:13px;font-size:1.65rem;letter-spacing:-1px;padding:0 8px}
aside .brandmark {width:38px;height:49px;font-size:2.8rem;line-height:1.5;background:transparent;color:var(--green);border-radius:0;border:0}
aside .brand small {color:var(--muted);font-size:.75rem;font-weight:400;letter-spacing:.1em;margin-top:1px}
aside nav {margin-top:57px;display:grid;gap:9px}
aside nav button {min-height:54px;padding:13px 17px;border:1px solid transparent;border-radius:12px;color:var(--muted);gap:13px;background:transparent}
aside nav button svg {width:22px;height:22px}
aside nav button .nav-label {font-size:1rem;font-weight:500;min-width:0}
aside nav button.active[aria-current=page] {background:var(--nav-selected);color:var(--nav-ink);border-color:var(--nav-border);box-shadow:inset 3px 0 var(--green)}
aside nav button.active .nav-label {font-weight:700}
aside nav button:hover:not(.active) {background:var(--soft);color:var(--ink)}
aside .aside-note {display:none}
aside>.source-button {color:var(--muted);font-size:.875rem;min-height:44px;padding-inline:12px;margin-top:auto}
body>main {margin-left:224px;padding:0 5vw 56px;max-width:none;min-width:0}
#app,main>header.app-topbar,main>footer {width:100%;max-width:1080px;margin-inline:auto}
main>header.app-topbar {height:88px;padding:17px 0;border-bottom:1px solid var(--line);letter-spacing:0;gap:20px}
.topbar-brand {display:flex;gap:10px;align-items:baseline;font-size:1.2rem;font-weight:600;letter-spacing:-.5px;color:var(--ink)}
.topbar-brand>span {font-size:.875rem;letter-spacing:0;font-weight:400;margin:0;padding-left:12px;border-left:1px solid var(--line);color:var(--muted)}
.header-settings {border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:10px 14px;font-size:.9375rem;color:var(--ink);min-height:48px;flex-shrink:0}
.header-settings:hover {border-color:var(--green)}
.header-settings[aria-current=page] {background:var(--nav-selected);border-color:var(--nav-border);color:var(--nav-ink)}
.header-settings svg {width:21px;height:21px}
main>footer {padding-top:48px;font-size:.8125rem;color:var(--muted)}
.product-heading,.product-heading.compact-heading,.simple-intro,.intro {padding:38px 0 28px}
.product-heading h1,.product-heading.compact-heading h1,.simple-intro h1,.intro h1 {font-family:'Manrope',Arial,sans-serif;font-size:2.125rem;font-weight:500;letter-spacing:-1px;line-height:1.3;margin:0 0 10px}
.product-heading>.eyebrow {display:block;margin-bottom:12px}
.product-heading p,.compact-heading p {font-size:1rem;margin:0;line-height:1.7;color:var(--muted)}
.product-heading.welcome-heading h1 {font-family:var(--display);font-size:2.65rem;font-weight:400;letter-spacing:-1.15px}
.home-destinations {display:block}
.home-feature-grid {display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:18px;padding:0}
.home-reading {display:flex;flex-direction:column;min-width:0;padding:26px;background:var(--menu-surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.home-section-heading {display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.home-section-heading h2 {display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:600;letter-spacing:-.3px}
.home-section-heading h2 svg {width:23px;height:23px;color:var(--green)}
.home-section-heading>span {font-size:.875rem;color:var(--muted)}
.home-current-surah {display:flex;align-items:center;justify-content:space-between;gap:24px;margin:25px 0 27px;flex:1;min-width:0}
.home-current-surah>div {display:flex;flex-direction:column;gap:6px;min-width:0}
.home-current-surah .eyebrow {font-size:.75rem;letter-spacing:.08em;color:var(--muted)}
.home-current-surah strong {font-family:var(--display);font-size:2rem;font-weight:400;line-height:1.35;letter-spacing:-.4px;overflow-wrap:break-word}
.home-current-surah>div>span:last-child {font-size:.9375rem;color:var(--muted)}
.home-surah-arabic {font-family:Amiri,serif;font-size:2.65rem;line-height:1.9;color:var(--ink);letter-spacing:0;max-width:45%;overflow-wrap:anywhere}
.home-read-actions {display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap}
.home-read-actions>.text-button {display:flex;align-items:center;gap:9px;font-weight:500}
.home-read-actions>.text-button svg {width:18px;height:18px}
.daily-start-card {border:0;border-block:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;padding:25px 0;margin:20px 0;gap:24px}
.daily-start-card .eyebrow {font-size:.8125rem;color:var(--muted);letter-spacing:.07em}
.daily-start-card h2 {font-size:1.5rem;line-height:1.4;margin:12px 0 10px;font-weight:500;letter-spacing:-.5px}
.daily-start-card p {font-size:1rem;line-height:1.75;color:var(--muted)}
.home-feature-grid .daily-start-card {margin:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:24px;padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--menu-surface);box-shadow:var(--shadow);min-width:0}
.home-feature-grid .daily-start-card .primary,.learning-start-grid .daily-start-card .primary {width:auto;padding-inline:21px;color:var(--green);background:transparent;border:1px solid var(--green)}
.home-feature-grid .daily-start-card .primary:hover,.learning-start-grid .daily-start-card .primary:hover {background:var(--soft)}
.home-section-label {font-size:1.125rem;font-weight:500;color:var(--ink);margin:29px 0 9px;letter-spacing:-.2px}
.home-secondary-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;border:0;background:transparent;overflow:visible}
.home-secondary-grid .destination-card {display:grid;grid-template-columns:42px minmax(0,1fr) 16px;align-items:center;gap:13px;min-height:112px;padding:21px 18px;border:1px solid var(--line);border-radius:14px;background:var(--menu-surface);min-width:0;box-shadow:var(--shadow)}
.home-secondary-grid .destination-icon {background:var(--soft);color:var(--green);width:42px;height:46px;margin:0;border-radius:10px}
.home-secondary-grid .destination-icon svg {width:24px;height:24px}
.destination-arrow {display:flex;align-items:center;color:var(--muted)}
.destination-arrow svg {width:16px;height:16px}
.home-secondary-grid .destination-copy {display:grid;gap:6px;min-width:0;color:var(--muted);overflow-wrap:anywhere}
.home-secondary-grid .destination-copy strong {font-size:1.0625rem;font-weight:500;line-height:1.4;letter-spacing:-.2px;color:var(--ink)}
.home-secondary-grid .destination-copy>span {font-size:.875rem;line-height:1.5;color:var(--muted)}
.home-secondary-grid .destination-card:hover {background:var(--soft);border-color:var(--nav-border);box-shadow:var(--shadow)}
.home-resume {margin:31px 0 0}
.home-resume h2 {font-size:1.125rem;font-weight:500;letter-spacing:-.3px;margin-bottom:8px}
.resume-choices {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:0 26px}
.resume-choice,.resume-choice:first-child {background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;min-height:94px;padding:16px 0;gap:14px}
.resume-choice small {font-size:.75rem;letter-spacing:.04em;color:var(--muted)}
.resume-choice strong {font-size:1rem;font-weight:500;line-height:1.45;display:block}
.resume-symbol svg {width:22px;height:22px}
.resume-arrow {font-size:1.125rem}
.resume-choice:hover {border-color:var(--green);background:var(--soft)}
.learning-start-grid {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;padding:0 0 25px;border-bottom:1px solid var(--line)}
.learning-start-grid .next-lesson {display:flex;align-items:flex-start;flex-direction:column;justify-content:space-between;background:var(--menu-surface);box-shadow:var(--shadow);margin:0;padding:26px;border:1px solid var(--line);border-radius:18px;gap:24px;min-width:0}
.learning-start-grid .next-lesson p {margin-bottom:0}
.learning-start-grid .daily-start-card {margin:0;padding:26px;border:1px solid var(--line);border-radius:18px;display:flex;align-items:flex-start;justify-content:space-between;flex-direction:column;gap:24px;background:var(--menu-surface);min-width:0}
.learning-start-grid .daily-start-card h2 {font-size:1.25rem}
.home-reading,.home-feature-grid .daily-start-card,.home-secondary-grid .destination-card,.learning-start-grid .next-lesson,.learning-start-grid .daily-start-card {border-color:var(--menu-border)}
/* Section choices share one tray; actions remain independent buttons. */
.destination-switch {background:var(--soft);padding:6px;gap:6px;border:1px solid var(--line);border-radius:15px;margin:0 0 28px;justify-content:flex-start}
.destination-switch button {display:flex;align-items:center;justify-content:center;gap:9px;flex:1;min-width:0;min-height:52px;padding:12px 16px;border:1px solid transparent;border-radius:10px;font-size:1rem;color:var(--muted);line-height:1.5;box-shadow:none;white-space:normal}
.destination-switch button svg {width:21px;height:21px}
.destination-switch button span {min-width:0;overflow-wrap:break-word}
.destination-switch button:hover:not(.selected) {background:var(--bg);color:var(--ink)}
.destination-switch button.selected {color:var(--ink);background:var(--menu-surface);border:1px solid var(--nav-border);font-weight:600;box-shadow:inset 0 -3px var(--green),0 2px 5px #0000000a}
.destination-switch button.selected svg {color:var(--green);stroke-width:2}
.reader-resume {margin-bottom:22px;padding:18px 22px;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink)}
.reader-resume strong {font-size:1.125rem;font-weight:500}
.reader-resume small {font-size:.75rem;letter-spacing:.08em;color:var(--muted)}
.reader-resume>span:last-child {font-size:.9375rem;color:var(--green)}
.surah-search {position:relative;max-width:none;margin-bottom:20px}
.surah-search label {font-size:.875rem;color:var(--muted);font-weight:500;display:block;margin-bottom:10px}
.surah-search input {width:100%;min-height:58px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 20px;color:var(--ink);font-size:1rem}
.surah-search input::placeholder {color:var(--muted);opacity:1}
.surah-filters {margin:0 0 18px;gap:8px;flex-wrap:wrap}
.filter-chip {min-height:44px;border:1px solid var(--line);border-radius:9px;background:transparent;font-size:.9375rem;padding:9px 16px;color:var(--muted)}
.filter-chip.active {background:var(--soft);color:var(--green);border-color:var(--green)}
.surah-filters>span {font-size:.875rem;color:var(--muted);margin-left:auto}
.surah-list {border:0;border-radius:0;background:transparent;overflow:visible;gap:0 32px}
.surah-list-row {padding:21px 8px;gap:18px;min-width:0;min-height:103px;background:transparent;border-bottom:1px solid var(--line)}
.surah-list-row:nth-child(odd) {border-right:0}
.surah-list-row:hover {background:var(--soft)}
.surah-number {font-size:.875rem;font-variant-numeric:tabular-nums;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted)}
.surah-list-row strong {font-size:1.125rem;font-weight:500;letter-spacing:-.3px}
.surah-list-row small {font-size:.875rem;margin-top:5px;color:var(--muted)}
.surah-list-arabic {font-family:Amiri,serif;font-size:1.9375rem;font-weight:400;line-height:1.9;color:var(--ink);margin-left:auto;letter-spacing:0;max-width:36%;overflow-wrap:anywhere}
.row-chevron {font-size:1.3rem;color:var(--muted)}
.surah-list-row .row-chevron {display:none}
.search-empty {padding:24px;margin:0;font-size:1rem}
/* The chapter title and text form a single quiet reading surface. */
.reader-breadcrumb {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:21px;color:var(--muted);font-size:.875rem}
.reader-breadcrumb .text-button {font-size:.9375rem}
.reading-header.compact-reading-header {display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:20px;text-align:center;padding:20px 0 25px;border:0;margin:0}
.chapter-title {grid-column:2;display:flex;flex-direction:column;align-items:center;min-width:0}
.chapter-arabic {font-family:Amiri,serif;font-size:2.65rem;font-weight:400;line-height:1.9;color:var(--ink);letter-spacing:0}
.reading-header.compact-reading-header h1 {font-family:'Manrope',Arial,sans-serif;font-size:1.3125rem;font-weight:500;line-height:1.5;letter-spacing:-.3px;margin:0}
.reading-header .favorite-toggle {justify-self:end;border:1px solid var(--line);width:46px;height:46px;min-width:46px;font-size:1.85rem;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--green);padding:0;line-height:1}
.reading-header .favorite-toggle[aria-pressed=true] {color:var(--gold);background:var(--accent);border-color:var(--accent)}
.reading-toolbar {display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:0;margin:0 0 18px}
.reader-listen-start {flex:0 1 auto;min-width:0;margin:0}
.reader-tool {flex:0 1 auto;min-width:122px;min-height:46px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-size:.9375rem;padding:10px 17px;gap:8px}
.reader-listen-start .reader-tool {color:var(--green);background:var(--soft);border-color:var(--soft)}
.reader-tool[aria-expanded=true] {border-color:var(--green);background:var(--soft)}
.reader-inline-panel {max-width:760px;margin:0 auto 18px;border-radius:12px;background:var(--surface);padding:22px}
.reader-inline-panel select {background:var(--bg);font-size:1rem}
.reader-tap-hint {font-size:.875rem;text-align:center;margin:4px 0 23px;color:var(--muted)}
.reader-layout.simple-layout {max-width:880px;margin:0 auto}
.simple-layout .mushaf-panel {background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.simple-layout .basmalah {padding:26px 22px;font-size:2rem;line-height:2.3;border-bottom:1px solid var(--line);color:var(--green)}
.simple-layout .verse-block {position:relative;padding:28px 10px 32px;border-bottom:1px solid var(--line);scroll-margin-top:24px;background:transparent}
.simple-layout .verse-block:first-child {border-top-left-radius:0;border-top-right-radius:0}
.simple-layout .verse-top {align-items:center;gap:8px 16px;flex-wrap:wrap;margin:0 0 12px}
.simple-layout .verse-ref {font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}
.simple-layout .verse-meaning-button {font-size:.875rem;min-height:44px;color:var(--green);border:0;padding:8px 0;background:transparent}
.simple-layout .verse-arabic {font-size:2.45rem;line-height:2.35;text-align:right;color:var(--ink);letter-spacing:0;word-spacing:1px;padding:5px 0 10px;overflow-wrap:anywhere}
.simple-layout.large-type .verse-arabic {font-size:3.2rem}
.verse-end {color:var(--gold)}
.qword {border-radius:6px;color:inherit}
.qword:hover {background:var(--soft);color:var(--green)}
.qword-wrap.pinned .qword {background:var(--soft);color:var(--green);box-shadow:inset 0 -2px var(--green)}
.simple-layout .verse-block.is-followed {background:var(--soft);box-shadow:none}
.simple-layout .verse-block.is-reciting {background:var(--soft);box-shadow:none}
.spoken-word.is-spoken {background:#c9e4d4;color:#143c2e;box-shadow:0 2px 0 #2a6c50}
.simple-layout .verse-translation {border-top:1px solid var(--line);padding-top:18px;margin-top:12px}
.simple-layout .verse-translation p {font-size:1.0625rem;line-height:1.9;color:var(--ink)}
.translation-label {font-size:.75rem;letter-spacing:.07em;color:var(--muted)}
.verse-pronunciation {margin-top:12px;border-color:var(--line)}
.verse-pronunciation summary {font-size:.875rem;min-height:44px;color:var(--muted)}
.verse-pronunciation p {font-size:1rem;line-height:1.9}
.inline-audio-control .audio-button {min-height:44px;font-size:.875rem;color:var(--green);background:transparent;border-color:var(--line);border-radius:8px;padding:7px 12px}
.quick-meaning,html[data-theme=night] .quick-meaning {background:var(--soft);border-left:2px solid var(--green);border-radius:9px;padding:16px 19px}
.word-grammar {border-color:var(--line)}
.word-grammar>summary {min-height:46px;font-size:1rem}
.quick-meaning-text>strong {font-size:1.125rem}
.surah-paging {display:flex;gap:14px;padding:24px 28px;flex-wrap:wrap}
.surah-paging .secondary {min-width:0;flex:1;font-size:.9375rem}
.reader-source-line {text-align:center;margin:19px 0 0}
.reader-source-line .text-button {font-size:.875rem;color:var(--muted)}
/* A chapter-led audio player, with controls close to the chosen recording. */
.listening-card {padding:18px 0 26px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;margin-bottom:18px}
.listening-layout {display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:32px;align-items:stretch}
.listening-cover {background:transparent;color:var(--ink);border-radius:0;border-right:1px solid var(--line);padding:30px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:294px;text-align:center}
.listening-cover .eyebrow {color:var(--muted);font-size:.75rem;letter-spacing:.12em}
.listening-arabic {font-family:Amiri,serif;font-size:3.5rem;line-height:2;letter-spacing:0;color:var(--ink);margin:14px 0 0;overflow-wrap:anywhere}
.listening-cover h2 {font-family:'Manrope',Arial,sans-serif;font-size:1.4rem;line-height:1.5;font-weight:500;letter-spacing:-.3px;color:var(--ink);margin:0}
.listening-cover p {font-size:.9375rem;color:var(--muted);margin:12px 0 0}
.listening-controls {min-width:0;display:flex;flex-direction:column;justify-content:center}
.listening-controls>label {display:block;font-size:.875rem;color:var(--muted);margin-bottom:10px;font-weight:500}
.listening-card select {width:100%;min-height:50px;padding:10px 14px;background:var(--bg);border-radius:10px;border:1px solid var(--line);color:var(--ink);font-size:1rem}
.listening-controls .full-control {margin-top:24px}
.listening-controls .full-action-row {gap:10px}
.listening-controls .full-action-row .primary {min-height:54px}
.listening-controls .full-status {font-size:.875rem;line-height:1.6;margin:12px 0 0}
.listening-controls .full-timeline {font-size:.8125rem;gap:10px;margin:8px 0 15px}
.listening-controls .continuous-choice {font-size:.9375rem;color:var(--ink);margin:0;min-height:48px;gap:11px}
.listening-links {display:flex;gap:8px 22px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:17px;margin-top:24px}
.listening-links .text-button {font-size:.875rem}
.listening-card>.quiet-note {margin-bottom:0}
.full-timeline input {accent-color:var(--green);min-height:44px}
.full-mini-player {left:248px;right:24px;bottom:20px;max-width:860px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 44px #142c2926;padding:12px 18px}
.mini-player-title strong {font-size:1.0625rem;font-weight:500}
.mini-player-title span {font-size:.8125rem}
.mini-player-row>.secondary {font-size:.875rem;min-height:44px;background:var(--soft);border:1px solid transparent;color:var(--green)}
.mini-player-close {width:44px;min-width:44px;min-height:44px}
.mini-player-details>summary {font-size:.875rem}
/* Learning has a clear current step and a calmer path beyond it. */
.journey-stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:21px 0;margin:0 0 22px;border-bottom:1px solid var(--line);color:var(--muted);font-size:.875rem}
.journey-stats>span {padding:0 22px;border-left:1px solid var(--line);line-height:1.7}
.journey-stats>span:first-child {padding-left:0;border-left:0}
.journey-stats strong {display:block;font-size:1.7rem;font-weight:500;line-height:1.4;color:var(--ink);font-variant-numeric:tabular-nums}
.next-lesson {padding:26px;background:var(--soft);color:var(--ink);border:0;border-radius:12px;box-shadow:none;gap:24px;margin-bottom:20px}
.next-lesson .eyebrow {color:var(--green);font-size:.8125rem}
.next-lesson h2 {font-family:'Manrope',Arial,sans-serif;font-size:1.625rem;font-weight:500;letter-spacing:-.55px;margin:12px 0;color:var(--ink);line-height:1.4}
.next-lesson p {color:var(--muted);font-size:1rem}
.next-lesson .primary {white-space:normal}
.play-week {background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:23px 0;margin:0 0 18px;gap:18px}
.play-week strong {font-size:1rem;font-weight:500}
.play-week>div>span {font-size:.875rem}
.week-days {gap:10px}
.week-days b {width:35px;height:35px;font-size:.8125rem;font-weight:500;background:var(--surface);border:1px solid var(--line)}
.week-days .done b {background:var(--green);color:var(--surface);border-color:var(--green)}
.week-days .today b {outline-color:var(--gold);outline-width:1px;outline-offset:4px}
.week-days small {font-size:.75rem;color:var(--muted)}
.recall-card {padding:20px 0;margin:22px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent}
.recall-card h2 {font-size:1.125rem;font-weight:500}
.recall-card p {font-size:.9375rem;color:var(--muted)}
.level-current {font-size:.875rem;gap:10px;margin:22px 0 12px;line-height:1.6}
.course-utility {display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0}
.course-utility button {font-size:.9375rem;min-height:44px}
.mini-game-card {border-radius:14px;padding:23px 25px;box-shadow:none;gap:20px;margin:26px 0;background:var(--surface)}
.game-symbol {color:var(--gold);background:var(--accent);border-radius:50%;width:60px;height:60px;font-size:2.25rem;line-height:1.8}
.mini-game-card h2 {font-size:1.375rem;font-weight:500;margin:6px 0}
.mini-game-card p {font-size:.9375rem}
.mini-game-card .eyebrow {font-size:.75rem}
.play-path-title h2 {font-family:var(--display);font-size:1.75rem;font-weight:400}
.play-path-title>span {font-size:.875rem}
.roadmap {display:grid;gap:8px}
.course-unit {background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;overflow:visible}
.course-unit[open] {background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.course-unit>summary {display:flex;align-items:center;gap:18px;padding:24px;min-height:90px;cursor:pointer}
.course-unit>summary strong {font-size:1.125rem;font-weight:500;line-height:1.5}
.course-unit>summary>span:nth-child(2),.lesson-row>span:nth-child(2),.level-choice>span:nth-child(2),.resume-choice>span:nth-child(2) {min-width:0;overflow-wrap:break-word}
.course-unit>summary small {font-size:.875rem;line-height:1.6;margin-top:4px}
.unit-number {background:var(--soft);color:var(--green);width:40px;height:40px;border-radius:50%;font-size:1rem;flex-shrink:0}
.unit-count {font-size:.875rem;font-variant-numeric:tabular-nums;color:var(--muted)}
.unit-lessons {padding:0 20px 20px}
.lesson-row {border:0;border-top:1px solid var(--line);border-radius:0;padding:19px 12px;gap:16px;background:transparent;position:relative;min-height:82px}
.lesson-row.current {border:1px solid var(--green);border-radius:10px;background:var(--soft);margin:5px 0}
.lesson-row.complete {background:transparent;color:var(--ink)}
.lesson-row.locked {opacity:.65}
.lesson-row strong {font-size:1rem;font-weight:500;line-height:1.55}
.lesson-row small {font-size:.875rem;line-height:1.6}
.lesson-dot {border-radius:50%;width:32px;height:32px;min-width:32px;background:var(--soft);font-size:.875rem}
.lesson-row.current .lesson-dot {background:var(--green);color:var(--surface)}
.lesson-row .lesson-stars {font-size:.875rem;gap:4px}
.badge-shelf>summary {font-size:1rem;min-height:48px;padding-block:12px;cursor:pointer}
.level-choices {max-width:none;display:grid;gap:0;margin:6px 0 25px}
.level-choice {padding:26px 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);gap:22px}
.level-choice:hover {border-color:var(--green);background:var(--soft)}
.level-number {width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--green);font-family:var(--display);font-size:1.5rem}
.level-choice strong {font-size:1.25rem;font-weight:500}
.level-choice small {font-size:1rem;color:var(--muted);line-height:1.7}
.level-choice em {font-size:.875rem;color:var(--green);margin-top:8px}
.teaching-card,.exercise-card,.routine-card,.routine-result,.course-result {padding:34px;border-radius:17px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.teaching-card h1,.exercise-card h1,.routine-card h1,.routine-result h1 {font-family:'Manrope',Arial,sans-serif;font-size:1.625rem;line-height:1.55;letter-spacing:-.55px;font-weight:500}
.teaching-card p,.exercise-card p {font-size:1.0625rem;line-height:1.8}
.course-option {padding:16px 20px;min-height:56px;font-size:1.0625rem;border:1px solid var(--line);border-radius:11px;background:var(--surface);box-shadow:0 2px 0 var(--line);color:var(--ink);line-height:1.6}
.course-option.selected {padding:15px 19px;border:2px solid var(--green);background:var(--soft);box-shadow:0 2px 0 var(--green)}
.course-feedback {padding:20px;border-radius:11px;font-size:1rem;line-height:1.8}
.course-controls {border-radius:12px;background:var(--bg);gap:15px}
.course-controls .primary {font-size:1rem}
.course-controls>span,.course-topline {font-size:.875rem;line-height:1.7}
.course-controls>span {max-width:260px}
.course-arabic {line-height:2.1;letter-spacing:0}
.routine-steps li {border-radius:9px;font-size:.875rem;padding:12px 8px}
.routine-steps li.current {background:var(--green);color:var(--surface)}
.routine-heading>span {font-size:.875rem;white-space:normal}
.routine-verse {line-height:2.5}
/* Secondary destinations inherit the same quiet hierarchy. */
.hatim-card,.learning-progress-card,.settings-card,.source-card,.personal-card,.prayer-card,.download-card {background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.hatim-card,.learning-progress-card {padding:20px 0 28px;margin-bottom:20px;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent}
.hatim-card h2,.learning-progress-card h2 {font-family:var(--display);font-size:1.625rem;font-weight:400;line-height:1.4}
.hatim-card .section-heading>strong {font-size:1.25rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--green)}
.hatim-card h3 {font-size:1.125rem;font-weight:500;line-height:1.7}
.hatim-card>.primary {width:auto;min-width:200px;margin:8px 0 14px}
.hatim-card progress,.learning-progress-card progress {height:6px}
.hatim-card p {font-size:1rem;color:var(--muted)}
.hatim-callout {border:0;border-top:1px solid var(--line);border-radius:0;padding:24px 0;background:transparent;box-shadow:none;margin:20px 0}
.hatim-callout h2 {font-size:1.25rem;font-weight:500}
.hatim-callout p {font-size:1rem}
.learning-totals strong {font-family:var(--display);font-size:2.75rem;font-weight:400}
.learning-totals span {font-size:.9375rem}
.settings-card {padding:0 26px}
.theme-setting.setting-row {display:block}
.theme-choices {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;max-width:620px}
.theme-choice {display:flex;align-items:center;gap:13px;min-width:0;min-height:86px;padding:17px 18px;border:1px solid var(--line);border-radius:11px;text-align:left;color:var(--ink);background:transparent}
.theme-choice>svg {width:23px;height:23px;color:var(--muted)}
.theme-choice>span {min-width:0}
.theme-choice strong {display:block;font-size:1rem;line-height:1.5;font-weight:500}
.theme-choice small {display:block;font-size:.875rem;line-height:1.6;margin-top:3px;color:var(--muted)}
.theme-choice .theme-check {color:var(--green);margin-left:auto;visibility:hidden;font-size:1.1rem;flex-shrink:0}
.theme-choice[aria-pressed=true] {background:var(--soft);border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.theme-choice[aria-pressed=true] .theme-check {visibility:visible}
.theme-choice[aria-pressed=true]>svg {color:var(--green)}
.theme-choice:hover {background:var(--soft)}
.setting-row {padding:23px 0;gap:20px}
.setting-row h2 {font-size:1.0625rem;font-weight:500}
.setting-row p {font-size:.9375rem;line-height:1.7}
.setting-row .secondary {font-size:.9375rem;white-space:normal;min-width:100px}
.setting-row select {min-height:44px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.setting-switch {min-height:32px;min-width:52px;background:var(--muted)}
.setting-switch[aria-checked=true] {background:var(--green)}
.favorite-list {gap:12px}
.favorite-list article {border-radius:12px;background:var(--surface)}
.favorite-open {min-height:90px;padding:21px}
.favorite-open strong {font-size:1.125rem;font-weight:500}
.favorite-remove {min-width:48px;min-height:48px;color:var(--gold)}
html[data-theme=night] .settings-card,html[data-theme=night] .source-card,html[data-theme=night] .favorite-list article {background:var(--surface)}
html[data-theme=night] .qword-wrap.pinned .qword {color:var(--green);background:var(--soft)}
html[data-theme=night] .spoken-word.is-spoken {background:#465951;color:#f0f3f1;box-shadow:0 2px 0 var(--green)}
html[data-theme=night] body>aside {background:var(--rail)}
html[data-theme=night] aside .brandmark {background:transparent;color:var(--green)}
html[data-theme=night] .simple-layout .mushaf-panel {background:transparent}
html[data-theme=night] .home-feature-grid .daily-start-card .primary,html[data-theme=night] .learning-start-grid .daily-start-card .primary {color:var(--green);background:transparent;border-color:var(--green)}
html[data-theme=night] .home-feature-grid .daily-start-card .primary:hover,html[data-theme=night] .learning-start-grid .daily-start-card .primary:hover {background:var(--soft)}
@media(hover:hover) {
  .destination-card,.resume-choice,.level-choice,.surah-list-row,.secondary {transition:background .18s,border-color .18s,transform .18s}
}
@media(min-width:1200px) {
  body[data-page=progress] #app,body[data-page=hatim] #app,body[data-page=learning-progress] #app {display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
  body[data-page=progress] #app>*,body[data-page=hatim] #app>*,body[data-page=learning-progress] #app>* {grid-column:1/-1}
  body[data-page=progress] #app>.hatim-card,body[data-page=hatim] #app>.hatim-card,body[data-page=learning-progress] #app>.learning-progress-card {grid-column:auto}
}
@media(max-width:1150px) and (min-width:801px) {
  body>aside {width:195px;padding-inline:15px}
  body>main {margin-left:195px;padding-inline:32px}
  aside .brand {font-size:1.45rem;gap:8px}
  aside nav button {padding-inline:12px}
  .home-feature-grid,.learning-start-grid {gap:16px}
  .home-reading,.home-feature-grid .daily-start-card,.learning-start-grid .next-lesson,.learning-start-grid .daily-start-card {padding:22px}
  .home-current-surah {gap:16px}
  .full-mini-player {left:214px}
  .listening-layout {gap:24px}
  .surah-list-row {padding:18px;gap:13px}
}
@media(max-width:1150px) {
  .home-secondary-grid {grid-template-columns:1fr;gap:12px}
  .home-secondary-grid .destination-card {min-height:94px;padding:20px 22px;gap:17px}
}
@media(max-width:800px) {
  body>aside {inset:auto 0 0;width:100%;height:auto;padding:9px 12px calc(9px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);background:var(--surface);box-shadow:0 -4px 24px #0000000c;display:block;z-index:50}
  html[data-theme=night] body>aside {background:var(--surface);box-shadow:0 -4px 24px #00000020}
  aside .brand,aside .aside-note,aside>.source-button {display:none}
  body>aside nav {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0}
  body>aside nav button {flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:62px;padding:8px 2px;border:1px solid transparent;border-radius:11px;color:var(--muted);box-shadow:none;background:transparent}
  body>aside nav button.active[aria-current=page] {background:var(--nav-selected);color:var(--nav-ink);border-color:var(--nav-border);box-shadow:inset 0 3px var(--green)}
  body>aside nav button .nav-label {font-size:.875rem;font-weight:500;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
  body>aside nav button.active .nav-label {font-weight:700}
  body>aside nav button svg {width:22px;height:22px}
  body>main {margin:0;padding:0 28px calc(var(--nav-height,77px) + 28px)}
  main>header.app-topbar {height:77px;padding:15px 0}
  .product-heading,.product-heading.compact-heading,.simple-intro,.intro {padding:30px 0 25px}
  .product-heading h1,.product-heading.compact-heading h1,.simple-intro h1,.intro h1 {font-size:2rem}
  .full-mini-player {left:12px;right:12px;bottom:calc(var(--nav-height,77px) + 6px);max-width:none}
  body[data-full-audio=active] main {padding-bottom:calc(275px + env(safe-area-inset-bottom))}
  body[data-full-audio=active]:has(.mini-player-details[open]) main {padding-bottom:calc(445px + env(safe-area-inset-bottom))}
  .course-controls {bottom:calc(var(--nav-height,77px) + 7px);padding:12px 0}
}
@media(max-width:620px) {
  body>main {padding-inline:20px}
  .topbar-brand {font-size:1.3rem}
  .topbar-brand>span {display:block;font-size:.75rem;padding-left:10px}
  .header-settings {padding:10px 12px;font-size:.875rem;gap:6px}
  .header-settings svg {width:20px;height:20px}
  .product-heading h1,.product-heading.compact-heading h1,.simple-intro h1,.intro h1 {font-size:1.875rem;letter-spacing:-.65px;line-height:1.3;margin-bottom:10px}
  .product-heading p,.compact-heading p {font-size:1rem;line-height:1.65}
  .product-heading.welcome-heading h1 {font-size:2.2rem}
  .home-feature-grid,.learning-start-grid {grid-template-columns:1fr;gap:14px;padding:0}
  .learning-start-grid {padding-bottom:22px}
  .home-reading,.home-feature-grid .daily-start-card,.learning-start-grid .next-lesson,.learning-start-grid .daily-start-card {padding:22px;border-radius:15px}
  .home-section-heading h2 {font-size:1.1875rem}
  .home-current-surah {margin:21px 0 23px;gap:18px}
  .home-current-surah strong {font-size:1.8rem}
  .home-surah-arabic {font-size:2.4rem}
  .home-read-actions {gap:12px 19px}
  .home-read-actions .primary {font-size:.9375rem;padding-inline:17px}
  .home-read-actions .text-button {font-size:.9375rem}
  .home-feature-grid .daily-start-card,.learning-start-grid .daily-start-card {margin:0;gap:17px}
  .daily-start-card h2 {font-size:1.25rem;margin-top:8px}
  .home-feature-grid .daily-start-card .primary {min-width:140px}
  .home-secondary-grid {grid-template-columns:1fr}
  .home-secondary-grid .destination-card {min-height:94px;padding:18px;gap:14px}
  .home-secondary-grid .destination-copy strong {font-size:1.0625rem}
  .home-resume {margin-top:28px}
  .resume-choices {grid-template-columns:1fr}
  .resume-choice {min-height:86px;padding:16px 0}
  .destination-switch {gap:5px;padding:5px;margin-bottom:24px}
  .destination-switch button {flex-direction:column;gap:5px;font-size:.9375rem;min-width:0;padding:10px 5px}
  .destination-switch button svg {width:20px;height:20px}
  .surah-list {grid-template-columns:1fr;border-radius:0}
  .surah-list-row {padding:18px 3px;gap:16px;min-height:93px;border-right:0!important}
  .surah-list-arabic {font-size:1.85rem}
  .surah-search input {min-height:54px;padding:13px 16px}
  .surah-filters {gap:7px}
  .filter-chip {font-size:.875rem;padding-inline:12px}
  .reader-resume {padding:17px;gap:14px}
  .reader-resume strong {font-size:1rem}
  .reader-resume>span:last-child {font-size:.875rem}
  .reading-header.compact-reading-header {grid-template-columns:46px minmax(0,1fr) 46px;gap:10px;padding:16px 0 23px}
  .chapter-arabic {font-size:2.1rem;line-height:1.9}
  .reading-header.compact-reading-header h1 {font-size:1.1875rem;letter-spacing:-.2px}
  .reader-breadcrumb {margin-top:17px;gap:8px}
  .reader-breadcrumb>span {font-size:.8125rem}
  .reading-toolbar {gap:8px;flex-wrap:nowrap}
  .reader-tool {min-width:0;flex:1;font-size:.875rem;padding:10px 11px;min-height:46px;gap:6px}
  .reader-listen-start {flex:1}
  .reader-tool svg {width:18px;height:18px}
  .reader-tap-hint {font-size:.875rem;margin-bottom:19px}
  .reader-inline-panel {padding:19px}
  .reading-option-grid {grid-template-columns:1fr}
  .simple-layout .mushaf-panel {border-radius:0}
  .simple-layout .verse-block {padding:22px 0 26px}
  .simple-layout .verse-top {gap:4px 10px;margin-bottom:11px}
  .simple-layout .verse-ref {font-size:.8125rem}
  .simple-layout .verse-meaning-button {font-size:.875rem}
  .simple-layout .verse-arabic {font-size:2.1rem;line-height:2.35;padding-block:3px 8px}
  .simple-layout.large-type .verse-arabic {font-size:2.75rem}
  .inline-audio-control .audio-button {font-size:.875rem;padding:7px 9px}
  .simple-layout .basmalah {font-size:1.8rem;padding:23px 15px}
  .simple-layout .verse-translation p {font-size:1rem}
  .quick-meaning {padding:14px;gap:10px}
  .quick-meaning .text-button {font-size:.875rem}
  .surah-paging {padding:20px 15px;gap:9px}
  .surah-paging .secondary {font-size:.875rem;padding:12px 10px}
  .listening-card {padding:0 0 24px;border-radius:0}
  .listening-layout {grid-template-columns:1fr;gap:23px}
  .listening-cover {min-height:205px;padding:20px 12px;border:0;border-bottom:1px solid var(--line)}
  .listening-arabic {font-size:2.8rem;margin-top:5px;line-height:1.8}
  .listening-cover h2 {font-size:1.25rem}
  .listening-cover p {font-size:.875rem;margin-top:9px}
  .listening-controls .full-control {margin-top:18px}
  .listening-links {gap:5px 15px;margin-top:15px;padding-top:13px}
  .listening-links .text-button {font-size:.875rem}
  .full-mini-player {padding:10px 13px}
  .mini-player-title strong {font-size:1rem}
  .mini-player-row {gap:8px}
  .mini-player-row>.secondary {font-size:.875rem;padding:10px}
  .mini-player-close {min-width:44px;width:44px}
  .daily-start-card,.recall-card {padding:21px 0;gap:17px}
  .daily-start-card .primary {width:auto;align-self:flex-start}
  .journey-stats {padding:17px 0;margin-bottom:19px}
  .journey-stats>span {font-size:.875rem;padding:0 13px;line-height:1.6}
  .journey-stats strong {font-size:1.4rem}
  .next-lesson {padding:25px 23px;gap:16px;border-radius:14px}
  .next-lesson h2 {font-size:1.65rem}
  .next-lesson .primary {width:100%}
  .play-week {align-items:flex-start;flex-direction:column;padding-block:22px}
  .week-days {width:100%;gap:6px;justify-content:space-between}
  .week-days b {width:32px;height:32px}
  .mini-game-card {padding:22px;gap:15px;border-radius:13px}
  .mini-game-card h2 {font-size:1.25rem}
  .mini-game-card>div {min-width:130px}
  .game-symbol {width:50px;height:50px;font-size:2rem}
  .course-unit>summary {padding:20px 18px;gap:13px}
  .course-unit>summary strong {font-size:1.0625rem}
  .course-unit>summary small {font-size:.875rem}
  .unit-number {width:33px;height:33px;font-size:.9375rem}
  .unit-count {font-size:.8125rem}
  .unit-lessons {padding:0 12px 14px}
  .lesson-row {padding:17px 12px;gap:12px}
  .lesson-row strong {font-size:1rem}
  .lesson-row small {font-size:.875rem}
  .level-choice {padding:22px 18px;gap:17px}
  .level-choice strong {font-size:1.125rem}
  .level-choice small {font-size:.9375rem}
  .level-number {width:38px;height:38px;font-size:1.25rem}
  .level-choice>span:last-child {display:none}
  .teaching-card,.exercise-card,.routine-card,.routine-result,.course-result {padding:24px 20px;border-radius:14px}
  .teaching-card h1,.exercise-card h1,.routine-card h1,.routine-result h1 {font-size:1.375rem;line-height:1.55}
  .course-controls>span {font-size:.875rem;max-width:145px}
  .course-controls .primary {font-size:.9375rem;min-width:0;gap:8px;padding:12px 16px}
  .routine-steps li {font-size:.875rem;padding:10px 5px;gap:5px}
  .hatim-card,.learning-progress-card {padding:23px 0;border-radius:0}
  .hatim-card h2,.learning-progress-card h2 {font-size:1.4rem}
  .hatim-card>.primary {width:100%;min-width:0}
  .hatim-callout {padding:22px 0}
  .settings-card {padding:0 20px;border-radius:14px}
  .setting-row {gap:15px;padding:22px 0;flex-wrap:wrap}
  .setting-row>div:first-child {flex:1;min-width:150px}
  .setting-row .secondary {min-width:0;font-size:.875rem}
  .setting-row h2 {font-size:1rem}
  .setting-row p {font-size:.9375rem}
  .theme-choices {gap:10px}
  .theme-choice {padding:15px 12px;gap:10px;flex-wrap:wrap;align-content:flex-start}
  .theme-choice>span:not(.theme-check) {order:3;flex-basis:100%}
  .theme-choice .theme-check {order:2}
  .theme-choice strong {font-size:1rem}
  main>footer {padding-top:35px;line-height:1.8}
}
@media(max-width:380px) {
  body>main {padding-inline:15px}
  .topbar-brand>span {display:none}
  .product-heading h1,.product-heading.compact-heading h1 {font-size:2rem}
  .reader-tool {padding-inline:7px;gap:5px}
  .reading-header.compact-reading-header {grid-template-columns:30px minmax(0,1fr) 46px}
  .home-read-actions {gap:10px 16px}
  .surah-list-row {padding:17px 0;gap:12px}
  .surah-number {width:32px;height:32px}
  .simple-layout .verse-top .verse-meaning-button {flex-basis:100%;text-align:left}
  .journey-stats>span {padding-inline:10px}
  .routine-steps {flex-wrap:wrap}
  .routine-steps li {min-width:74px}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Edition 27 — a clear reading surface, architectural mark and deliberate hierarchy. */
html {font-size:100%;-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body {font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink)}
button,input,select,textarea {font-family:inherit}
button {font-weight:600}
button svg {width:21px;height:21px}
input,select,textarea {font-size:1rem}
.primary,.secondary {border-radius:12px;min-height:48px;font-weight:600;gap:12px;letter-spacing:-.015em}
.primary {background:var(--green);color:#fff}
.primary svg,.secondary svg {width:20px;height:20px}
.secondary {box-shadow:0 1px 2px #1a1f1605}
.text-button {font-weight:600}
.quiet-note,.settings-note {font-size:.875rem;color:var(--muted)}
.eyebrow,.page-kicker {font-size:.8125rem;letter-spacing:.065em}
h2,h3 {font-weight:600}
body>aside {width:236px;padding:32px 18px 22px}
aside .brand {gap:12px;padding:0 9px;letter-spacing:-.04em}
.brand-emblem {display:block;width:44px;height:44px;object-fit:contain;border-radius:13px;flex:none}
aside .brand .brand-name {font-size:1.45rem;font-weight:600;line-height:1.2}
aside .brand .brand-name small {font-size:.75rem;letter-spacing:.09em;margin-top:7px;color:var(--muted);line-height:1.5}
aside nav {margin-top:48px;gap:6px}
aside nav button {min-height:52px;border-radius:11px;padding:13px 16px}
aside nav button.active[aria-current=page] {box-shadow:none;border-color:transparent;background:var(--nav-selected)}
aside nav button.active svg {stroke-width:2}
aside nav button .nav-label {font-weight:500}
aside nav button.active .nav-label {font-weight:600}
body>main {margin-left:236px;padding-inline:clamp(30px,4.5vw,78px);padding-bottom:48px}
#app,main>header.app-topbar,main>footer {max-width:1080px}
main>header.app-topbar {height:86px;border-bottom:1px solid var(--line)}
.topbar-brand {gap:11px;align-items:center;letter-spacing:-.045em;font-size:1.35rem}
.topbar-brand .brand-emblem {width:40px;height:40px;border-radius:12px}
.topbar-brand>.brand-name {display:block;font-size:inherit;font-weight:600;line-height:1.1;color:var(--ink);padding:0;border:0;letter-spacing:inherit}
.topbar-brand .brand-name small {display:block;color:var(--muted);font-size:.75rem;font-weight:400;letter-spacing:0;margin-top:6px}
.header-settings {border:0;background:transparent;min-width:46px;border-radius:12px;gap:8px;font-weight:500}
.header-settings:hover {background:var(--soft)}
.header-settings[aria-current=page] {box-shadow:inset 0 0 0 1px var(--nav-border)}
.product-heading,.product-heading.compact-heading,.simple-intro,.intro {padding:31px 0 22px}
.product-heading h1,.product-heading.compact-heading h1,.simple-intro h1,.intro h1 {font-family:'Manrope',sans-serif;font-size:2rem;font-weight:600;letter-spacing:-.045em;margin-bottom:5px}
.product-heading.welcome-heading h1 {font-family:'Manrope',sans-serif;font-weight:500;font-size:1.625rem;letter-spacing:-.04em}
.welcome-heading p {font-size:.9375rem}
.home-feature-grid {grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px}
.home-reading {background:var(--reading-bg);color:var(--reading-ink);border:1px solid var(--reading-bg);border-radius:20px;padding:28px;box-shadow:none}
.home-section-heading h2 {font-size:1.0625rem;font-weight:600;letter-spacing:-.025em;line-height:1.5;margin:0}
.home-section-heading h2 svg {width:21px;height:21px;color:inherit}
.home-reading .home-section-heading {color:var(--reading-ink)}
.home-reading .home-section-heading>span {color:var(--reading-muted);font-size:.875rem}
.home-current-surah {margin:26px 0 25px;gap:20px}
.home-current-surah .eyebrow {color:var(--reading-gold);font-size:.75rem;letter-spacing:.1em}
.home-current-surah strong {font-size:2.25rem;font-weight:400;letter-spacing:-.02em}
.home-current-surah>div>span:last-child {font-size:.9375rem;color:var(--reading-muted)}
.home-reading .home-surah-arabic {font-size:3rem;color:var(--reading-ink);line-height:1.65}
.home-reading .home-read-actions {gap:12px 22px}
.home-reading .home-read-actions .primary,html[data-theme=night] .home-reading .home-read-actions .primary {background:var(--brand-light);color:#29372a;border:0;min-height:48px;font-size:.9375rem}
.home-reading .home-read-actions .primary:hover {background:#c3d5bd}
.home-reading .home-read-actions .text-button {color:var(--reading-ink);font-size:.875rem}
.home-learning {display:flex;flex-direction:column;justify-content:space-between;gap:22px;border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:28px;min-width:0}
.home-learning .home-section-heading svg {color:var(--gold)}
.home-lesson-copy .eyebrow {color:var(--muted);font-size:.75rem;letter-spacing:.065em}
.home-lesson-copy h3 {font-family:var(--display);font-size:1.875rem;line-height:1.35;letter-spacing:-.025em;font-weight:400;margin:9px 0}
.home-lesson-copy p {font-size:.9375rem;line-height:1.7;color:var(--muted);margin:0}
.home-learning .secondary {align-self:flex-start;background:var(--soft);border-color:var(--soft);color:var(--green);font-size:.9375rem}
.home-secondary-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);margin-top:18px;overflow:hidden}
.home-secondary-grid .destination-card {grid-template-columns:36px minmax(0,1fr) 16px;border:0;border-radius:0;box-shadow:none;background:transparent;min-height:90px;padding:20px;gap:13px}
.home-secondary-grid .destination-card+.destination-card {border-left:1px solid var(--line)}
.home-secondary-grid .destination-icon {background:none;color:var(--green);width:36px;height:36px}
.home-secondary-grid .destination-copy {gap:4px}
.home-secondary-grid .destination-copy strong {font-size:1rem;font-weight:600;letter-spacing:-.025em}
.home-secondary-grid .destination-copy>span {font-size:.875rem}
.home-daily .daily-start-card {display:flex;align-items:center;justify-content:space-between;gap:22px;background:transparent;border:0;border-block:1px solid var(--line);padding:24px 0;margin:26px 0 0;border-radius:0}
.home-daily .daily-start-card h2 {font-size:1.25rem;font-weight:600;margin:6px 0}
.home-daily .daily-start-card p {font-size:.9375rem;max-width:560px;margin:0}
.home-daily .daily-start-card .primary {background:var(--soft);color:var(--green);font-size:.9375rem;white-space:nowrap;min-width:150px}
.home-resume h2 {font-weight:600;font-size:1rem}
.resume-choice {min-height:80px}
.resume-symbol {border-radius:11px;background:var(--soft)}
.destination-switch {background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;gap:26px;justify-content:flex-start;margin-bottom:25px;overflow:visible}
.destination-switch button {flex:0 1 auto;min-height:52px;border:0;border-bottom:2px solid transparent;border-radius:0;padding:12px 2px;gap:8px;color:var(--muted);font-weight:500;box-shadow:none}
.destination-switch button.selected {background:transparent;color:var(--ink);border:0;border-bottom:2px solid var(--gold);box-shadow:none;font-weight:600}
.destination-switch button.selected svg {color:var(--ink)}
.surah-search input {border-radius:13px;min-height:52px;background:var(--surface);padding:13px 17px}
.surah-search label {font-weight:600}
.filter-chip {border-radius:9px;font-weight:500}
.filter-chip.active {background:var(--soft);border-color:var(--nav-border);font-weight:600}
.surah-list {background:var(--surface);border:1px solid var(--line);border-radius:18px;gap:0;overflow:hidden}
.surah-list-row {padding:19px 22px;min-height:90px;gap:16px}
.surah-list-row:nth-child(odd) {border-right:1px solid var(--line)}
.surah-list-row strong {font-weight:600;font-size:1.0625rem}
.surah-number {border:0;border-radius:10px;background:var(--soft);color:var(--green);font-weight:600;width:36px;height:36px}
.surah-list-arabic {font-size:2rem;color:var(--ink)}
.reader-resume {border:0;border-left:3px solid var(--gold);border-radius:0 12px 12px 0}
.reader-resume strong {font-weight:600}
.reader-breadcrumb {margin-top:14px;font-size:.875rem}
.reading-header.compact-reading-header {padding:13px 0 20px}
.reading-header.compact-reading-header h1 {font-weight:600;font-size:1.25rem}
.chapter-arabic {font-size:2.6rem;line-height:1.8}
.reading-header .favorite-toggle {border:0;background:var(--surface);border-radius:12px}
.reading-toolbar {margin-bottom:12px}
.reader-tool {border-color:var(--line);border-radius:11px;font-weight:600}
.reader-tap-hint {margin-bottom:20px}
.simple-layout .mushaf-panel,html[data-theme=night] .simple-layout .mushaf-panel {background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:0 28px}
.simple-layout .verse-block {padding:25px 0 28px;background:transparent;scroll-margin-top:18px}
.simple-layout .verse-top {margin-bottom:8px}
.simple-layout .verse-ref {font-size:.875rem;color:var(--muted);font-weight:500}
.simple-layout .verse-arabic {font-size:2.625rem;font-weight:400;font-synthesis:none;line-height:2.3;word-spacing:1px;color:var(--ink);padding:0 0 8px}
.simple-layout.large-type .verse-arabic {font-size:3.25rem}
.simple-layout .verse-translation p {font-size:1.0625rem;line-height:1.85}
.qword,.qword-wrap {transform:none;text-shadow:none;filter:none}
.simple-layout .verse-block.is-followed,.simple-layout .verse-block.is-reciting {background:transparent;box-shadow:inset -3px 0 var(--nav-border)}
.spoken-word.is-spoken,html[data-theme=night] .spoken-word.is-spoken {background:var(--accent);color:var(--ink);box-shadow:0 2px 0 var(--gold)}
.qword-wrap.pinned .qword,html[data-theme=night] .qword-wrap.pinned .qword {color:var(--ink);background:var(--soft);box-shadow:inset 0 -2px var(--gold)}
.quick-meaning {border:1px solid var(--nav-border);background:var(--soft);border-radius:12px;padding:16px}
.verse-pronunciation {border-top:1px solid var(--line);padding-top:5px}
.verse-pronunciation summary {color:var(--green);font-weight:500}
.word-grammar,.grammar-teaching,.grammar-context {border-color:var(--line)}
.grammar-simple-segment {background:var(--surface);border:1px solid var(--line);border-radius:10px}
.listening-card {background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;margin-top:6px}
.listening-layout {grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px}
.listening-cover {background:var(--reading-bg);border:0;border-radius:14px;min-height:290px;padding:26px;color:var(--reading-ink)}
.listening-cover .eyebrow {color:var(--reading-gold)}
.listening-cover .listening-arabic,.listening-cover h2 {color:var(--reading-ink)}
.listening-cover p {color:var(--reading-muted)}
.listening-arabic {font-size:3.75rem}
.listening-cover h2 {font-size:1.375rem;font-weight:500}
.listening-controls .full-action-row .primary {min-height:54px}
.listening-controls .full-timeline {font-size:.875rem}
.full-mini-player {left:258px;right:22px;border-radius:16px;border-color:var(--nav-border);box-shadow:0 8px 30px #1a1f1626}
.mini-player-title strong {font-weight:600}
.mini-player-title span,.mini-player-details>summary {font-size:.875rem}
.learning-start-grid {gap:18px}
.next-lesson,.learning-start-grid .next-lesson {border:1px solid var(--nav-border);border-left:3px solid var(--gold);background:var(--surface);border-radius:16px;padding:26px}
.next-lesson h2 {font-weight:600;letter-spacing:-.035em}
.learning-start-grid .daily-start-card {background:var(--soft);border:0;border-radius:16px}
.journey-stats {background:var(--surface);border:1px solid var(--line);padding:18px 22px;border-radius:14px}
.journey-stats>span:first-child {padding-left:0}
.journey-stats strong {font-weight:600;font-size:1.75rem}
.level-choices {gap:12px}
.level-choice {border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:23px;gap:18px}
.level-choice strong {font-weight:600}
.level-number {border:0;background:var(--soft);border-radius:12px;font-family:'Manrope',sans-serif;font-size:1.25rem;font-weight:500}
.course-unit,.course-unit[open] {background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.roadmap {gap:12px}
.course-unit>summary {min-height:84px;padding:20px;gap:16px}
.course-unit>summary strong {font-weight:600}
.unit-number {border-radius:11px;color:var(--green);font-weight:600}
.lesson-row.current {border-color:var(--nav-border);border-left:3px solid var(--gold);border-radius:10px;background:var(--soft)}
.lesson-row strong {font-weight:500}
.play-path-title h2 {font-family:'Manrope',sans-serif;font-size:1.5rem;font-weight:600}
.play-week {border-radius:14px;padding:20px;background:var(--surface);border:1px solid var(--line)}
.teaching-card,.exercise-card,.routine-card,.routine-result,.course-result {border-radius:18px;box-shadow:none}
.teaching-card h1,.exercise-card h1,.routine-card h1,.routine-result h1 {font-weight:600}
.course-option {border-radius:12px;box-shadow:none;min-height:58px;font-weight:500}
.course-option.selected {border-color:var(--green);background:var(--soft);box-shadow:none}
.course-option.answer-correct,.course-feedback.correct {background:var(--success-bg);color:var(--success-text);border-color:var(--success-text)}
.course-feedback.retry {background:var(--error-bg);color:var(--error-text)}
.hatim-card,.learning-progress-card {border:1px solid var(--line);border-radius:17px;padding:25px;background:var(--surface);margin-bottom:18px}
.hatim-card h2,.learning-progress-card h2 {font-family:'Manrope',sans-serif;font-size:1.375rem;font-weight:600;letter-spacing:-.035em}
.learning-totals strong {font-family:'Manrope',sans-serif;font-size:2.5rem;font-weight:500}
.settings-card {border-radius:17px}
.setting-row:not(.theme-setting) {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px}
.setting-row>div:first-child {min-width:0}
.setting-row h2 {font-weight:600}
.setting-switch {min-height:44px;height:44px;min-width:64px;width:64px;flex:none}
.setting-switch {padding:10px 8px;border-radius:24px}
.setting-switch span {height:24px;width:24px}
.setting-switch[aria-checked=true] span {transform:translateX(24px)}
.theme-choice {min-height:110px;border-radius:13px;align-items:flex-start;background:var(--bg)}
.theme-choice strong {font-weight:600}
.theme-choice[aria-pressed=true] {background:var(--soft);border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.favorite-list article,.source-card,.personal-card,.prayer-card {border-radius:15px}
.favorite-open strong {font-weight:600}
.study-card {background:var(--surface);color:var(--ink);border-radius:17px;border-color:var(--line)}
main>footer {font-size:.875rem;padding-top:34px}
@media(min-width:801px) and (max-width:1100px) {
  body>aside {width:205px;padding-inline:14px}
  body>main {margin-left:205px;padding-inline:30px}
  aside .brand {padding-inline:3px;gap:9px}
  aside .brand .brand-name {font-size:1.3rem}
  aside .brand .brand-name small {letter-spacing:0;font-size:.75rem}
  .home-reading,.home-learning {padding:23px}
  .home-feature-grid {grid-template-columns:1fr}
  .full-mini-player {left:225px}
}
@media(max-width:800px), (max-width:1100px) and (pointer:coarse) {
  body>aside,html[data-theme=night] body>aside {inset:auto 0 0;display:block;width:100%;height:auto;padding:5px max(10px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -2px 16px #1a1f1605}
  aside .brand,aside .aside-note,aside>.source-button {display:none}
  body>aside nav {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin:0}
  body>aside nav button {flex-direction:column;align-items:center;justify-content:center;min-height:56px;border:0;border-radius:10px;padding:6px 3px;gap:4px}
  body>aside nav button.active[aria-current=page] {border:0;box-shadow:none;background:var(--nav-selected);color:var(--nav-ink)}
  body>aside nav button .nav-label {font-size:.875rem;line-height:1.4;letter-spacing:0}
  body>aside nav button.active .nav-label {font-weight:600}
  body>aside nav button svg {width:22px;height:22px}
  body>main {margin:0;padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) calc(var(--nav-height,66px) + 28px) max(20px,env(safe-area-inset-left))}
  main>header.app-topbar {height:68px;padding:12px 0;gap:12px}
  .topbar-brand {font-size:1.3rem;gap:10px}
  .topbar-brand>.brand-name {display:block}
  .topbar-brand .brand-name small {font-size:.75rem;margin-top:5px}
  .topbar-brand .brand-emblem {width:38px;height:38px;border-radius:11px}
  .header-settings {padding:10px;gap:6px;font-size:.875rem;min-height:44px}
  .product-heading,.product-heading.compact-heading,.simple-intro,.intro {padding:25px 0 20px}
  .product-heading h1,.product-heading.compact-heading h1,.simple-intro h1,.intro h1 {font-size:1.875rem;letter-spacing:-.04em}
  .product-heading.welcome-heading h1 {font-size:1.5rem}
  .home-feature-grid {grid-template-columns:1fr;gap:14px}
  .home-reading,.home-learning {padding:23px;border-radius:18px}
  .home-current-surah {margin:20px 0 22px}
  .home-current-surah strong {font-size:2rem}
  .home-reading .home-surah-arabic {font-size:2.75rem}
  .home-read-actions {justify-content:space-between}
  .home-learning {gap:16px}
  .home-lesson-copy h3 {font-size:1.625rem;margin:8px 0}
  .home-section-heading h2 {font-size:1.0625rem}
  .home-secondary-grid {grid-template-columns:1fr 1fr;border-radius:14px;margin-top:14px}
  .home-secondary-grid .destination-card {grid-template-columns:1fr;gap:8px;padding:17px;min-height:118px;align-content:start}
  .home-secondary-grid .destination-icon {width:27px;height:27px}
  .home-secondary-grid .destination-icon svg {width:23px;height:23px}
  .home-secondary-grid .destination-arrow {display:none}
  .home-secondary-grid .destination-copy strong {font-size:1rem}
  .home-secondary-grid .destination-copy>span {font-size:.875rem}
  .home-daily .daily-start-card {display:grid;gap:16px;padding:22px 0;margin-top:23px}
  .home-daily .daily-start-card .primary {justify-self:start;min-height:46px}
  .destination-switch {gap:24px;margin-bottom:22px}
  .destination-switch button {flex:1;flex-direction:row;padding:10px 0;min-height:48px;font-size:.9375rem;gap:7px}
  .destination-switch button svg {width:19px;height:19px}
  .surah-list {grid-template-columns:1fr;border-radius:15px}
  .surah-list-row,.surah-list-row:nth-child(odd) {padding:17px 16px;gap:14px;min-height:87px;border-right:0}
  .surah-list-row strong {font-size:1.0625rem}
  .surah-list-arabic {font-size:1.875rem;max-width:35%}
  .surah-filters {gap:8px}
  .filter-chip {font-size:.875rem;min-height:44px;padding:9px 12px}
  .reader-breadcrumb {margin-top:11px;font-size:.875rem;gap:8px}
  .reader-breadcrumb>span {font-size:.875rem}
  .reading-header.compact-reading-header {padding:8px 0 16px;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px}
  .chapter-arabic {font-size:2.35rem;line-height:1.75}
  .reading-header.compact-reading-header h1 {font-size:1.125rem}
  .reading-toolbar {gap:8px;flex-wrap:wrap;margin-bottom:10px}
  .reader-tool {min-width:0;min-height:46px;font-size:.9375rem;padding:10px;gap:6px;flex:1}
  .reader-listen-start {flex:1;min-width:82px}
  .reader-tool svg {width:18px;height:18px}
  .reader-tap-hint {font-size:.875rem;margin:6px 0 18px}
  .simple-layout .mushaf-panel,html[data-theme=night] .simple-layout .mushaf-panel {padding:0 17px;border-radius:15px}
  .simple-layout .verse-block {padding:21px 0 25px}
  .simple-layout .verse-top {gap:5px 12px}
  .simple-layout .verse-arabic {font-size:2.25rem;line-height:2.3;padding:0 0 6px}
  .simple-layout.large-type .verse-arabic {font-size:2.875rem}
  .simple-layout .verse-ref {font-size:.875rem}
  .simple-layout .verse-meaning-button {font-size:.875rem}
  .simple-layout .basmalah {font-size:1.875rem;padding:22px 0;line-height:2.2}
  .simple-layout .verse-translation p {font-size:1rem}
  .quick-meaning {padding:13px;border-radius:11px}
  .surah-paging {padding:20px 0;flex-wrap:wrap}
  .listening-card {padding:16px;border-radius:17px}
  .listening-layout {grid-template-columns:1fr;gap:23px}
  .listening-cover {min-height:228px;border:0;border-radius:12px;padding:23px 16px}
  .listening-arabic {font-size:3.4rem;margin-top:8px;line-height:1.7}
  .listening-cover h2 {font-size:1.25rem}
  .listening-cover p {font-size:.875rem}
  .listening-links {display:grid;justify-items:start;gap:4px}
  .full-mini-player {left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(var(--nav-height,66px) + 8px);max-width:none;padding:12px;border-radius:14px}
  .mini-player-title strong {font-size:1rem}
  .mini-player-title span {font-size:.8125rem}
  body[data-full-audio=active] main {padding-bottom:calc(var(--nav-height,66px) + 210px)}
  body[data-full-audio=active]:has(.mini-player-details[open]) main {padding-bottom:calc(var(--nav-height,66px) + 430px)}
  .course-controls {bottom:calc(var(--nav-height,66px) + 7px)}
  .level-choice {padding:19px;gap:14px}
  .level-choice small {font-size:1rem}
  .level-choice strong {font-size:1.125rem}
  .journey-stats {padding:16px;margin-bottom:18px}
  .journey-stats>span {font-size:.875rem;padding-inline:12px}
  .journey-stats strong {font-size:1.5rem}
  .next-lesson,.learning-start-grid .next-lesson {padding:22px}
  .next-lesson h2 {font-size:1.5rem}
  .play-week {padding:19px;gap:18px}
  .course-unit>summary {padding:19px 16px;gap:12px}
  .unit-number {width:36px;height:36px}
  .course-unit>summary strong {font-size:1.0625rem}
  .teaching-card,.exercise-card,.routine-card,.routine-result,.course-result {padding:23px 19px}
  .teaching-card h1,.exercise-card h1,.routine-card h1,.routine-result h1 {font-size:1.375rem}
  .hatim-card,.learning-progress-card {padding:22px 19px}
  .hatim-card h2,.learning-progress-card h2 {font-size:1.25rem}
  .settings-card {padding:0 18px}
  .setting-row:not(.theme-setting) {gap:14px;padding:22px 0;grid-template-columns:minmax(0,1fr) auto}
  .setting-row h2 {font-size:1rem}
  .setting-row p {font-size:.9375rem}
  .setting-row .secondary {max-width:130px;white-space:normal}
  .theme-choices {gap:10px}
  .theme-choice {padding:16px 13px;gap:11px;min-height:134px}
  .theme-choice>span:not(.theme-check) {order:3;flex-basis:100%}
}
@media(max-width:380px) {
  body>main {padding-left:max(15px,env(safe-area-inset-left));padding-right:max(15px,env(safe-area-inset-right))}
  .header-settings>span {display:none}
  .topbar-brand>.brand-name {display:block}
  .home-reading,.home-learning {padding:20px}
  .home-reading .home-read-actions {gap:9px}
  .home-reading .home-read-actions .primary {padding-inline:13px;font-size:.875rem}
  .home-reading .home-read-actions .primary svg {display:none}
  .home-current-surah {gap:12px}
  .home-secondary-grid .destination-card {padding:15px}
  .destination-switch {gap:12px}
  .destination-switch button {font-size:.875rem;gap:6px}
  .reader-tool {font-size:.875rem;padding-inline:8px}
  .reader-tool svg {width:17px;height:17px}
  .simple-layout .mushaf-panel,html[data-theme=night] .simple-layout .mushaf-panel {padding-inline:14px}
  .surah-list-row {padding-inline:13px;gap:11px}
  .surah-list-arabic {font-size:1.7rem}
  .surah-number {width:32px;height:34px}
  .setting-row:not(.theme-setting) {grid-template-columns:minmax(0,1fr) auto;gap:10px}
}

/* Edition 28 — short labels, distinct surfaces, optional supporting detail. */
.status-chip {display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:8px;background:var(--soft);color:var(--green);font-size:.875rem;font-weight:600}
.home-lesson-copy {margin:24px 0}
.home-lesson-copy h3 {margin:0 0 16px}
.learning-milestones {display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:14px}
.learning-milestones span {padding:7px 10px;background:var(--soft);border-radius:7px;font-size:.875rem;color:var(--green)}
.learning-milestones span+span:before {content:'·';margin-right:7px;color:var(--muted)}
.home-secondary-grid {background:transparent;border:0;gap:14px}
.home-secondary-grid .destination-card {grid-template-columns:46px minmax(0,1fr) 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:21px}
.home-secondary-grid .destination-card+.destination-card {border-left:1px solid var(--line)}
.home-secondary-grid .destination-icon {background:var(--soft);color:var(--green);border:0;width:46px;height:46px;border-radius:13px;flex-shrink:0}
.daily-start-card,.home-daily .daily-start-card,.learning-focus-grid .daily-start-card {display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;margin:0;box-shadow:none}
.home-daily {margin-top:16px}
.daily-symbol,.recall-symbol,.section-symbol {display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;border-radius:14px;background:var(--accent);color:var(--gold)}
.daily-symbol svg,.recall-symbol svg,.section-symbol svg {width:24px;height:24px}
.daily-copy {min-width:0}
.daily-start-card h2,.home-daily .daily-start-card h2 {margin:0 0 5px;font-size:1.0625rem;font-weight:600;line-height:1.4}
.daily-status {display:block;font-size:.875rem;line-height:1.5;color:var(--muted)}
.daily-start-card .primary,.home-daily .daily-start-card .primary {min-width:76px;min-height:46px;width:auto;padding:11px 16px;white-space:normal;justify-content:center;justify-self:end;font-size:.9375rem;background:var(--soft);color:var(--green)}
.learning-stat-tiles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 20px}
.learning-stat-tiles>div {position:relative;display:grid;gap:6px;padding:17px 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px;min-width:0}
.learning-stat-tiles svg {position:absolute;top:19px;right:16px;width:19px;height:19px;color:var(--gold)}
.learning-stat-tiles strong {display:block;font-size:1.625rem;font-weight:600;line-height:1.3;padding-right:22px}
.learning-stat-tiles small {font-size:.875rem;font-weight:400;color:var(--muted)}
.learning-stat-tiles>div>span {font-size:.875rem;color:var(--muted);line-height:1.4}
.learning-focus-grid {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;margin-bottom:20px}
.learning-focus-grid .next-lesson {display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:18px;margin:0;padding:25px;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:17px;background:var(--surface);min-width:0}
.learning-focus-grid .next-lesson h2 {font-size:1.5rem;margin:10px 0;line-height:1.35}
.learning-focus-grid .next-lesson p {font-size:.9375rem;line-height:1.5;margin:0;color:var(--muted)}
.learning-focus-grid .next-lesson .primary {align-self:flex-start;min-height:48px}
.learning-focus-grid .daily-start-card {grid-template-columns:48px minmax(0,1fr);align-content:center;gap:16px}
.learning-focus-grid .daily-start-card .primary {grid-column:2;justify-self:start}
.practice-tools {margin:0 0 25px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:clip}
.practice-tools>summary {display:flex;gap:12px;align-items:center;min-height:62px;padding:17px 20px;font-size:1rem;font-weight:600;cursor:pointer;list-style:none;color:var(--ink)}
.practice-tools>summary::-webkit-details-marker {display:none}
.practice-tools>summary:focus-visible {outline-offset:-5px;border-radius:13px}
.practice-tools>summary>svg {width:22px;height:22px;color:var(--green);flex-shrink:0}
.practice-tools .disclosure-label {margin-left:auto;font-weight:400;font-size:.875rem;color:var(--muted)}
.practice-tools>summary:after {content:'+';font-size:1.4rem;color:var(--green);font-weight:400}
.practice-tools[open]>summary:after {content:'−'}
.practice-tools[open] .disclosure-label {display:none}
.practice-tools-body {border-top:1px solid var(--line);padding:18px}
.recall-card {display:flex;align-items:center;gap:15px;padding:19px;margin:0 0 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.recall-card>div {flex:1;min-width:0}
.recall-card h2 {font-size:1.0625rem;margin:0;font-weight:600;line-height:1.45}
.recall-card p {font-size:.875rem;line-height:1.5;margin:5px 0 0}
.recall-card .secondary {font-size:.9375rem;min-height:44px;padding:10px 14px}
.practice-tools .recall-card {background:var(--soft);border:0}
.practice-tile-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.practice-tile {display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:17px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-align:left;min-width:0;min-height:145px}
.practice-tile>svg {width:24px;height:24px;margin-bottom:6px;color:var(--green)}
.practice-tile strong {font-size:1rem;font-weight:600;line-height:1.4}
.practice-tile>span:not(.practice-letter) {font-size:.875rem;color:var(--muted);line-height:1.45}
.practice-letter {font-family:Amiri,serif;font-size:2rem;line-height:1;height:30px;color:var(--green)}
.practice-tile:hover:not(:disabled) {background:var(--soft);border-color:var(--nav-border)}
.practice-tools .play-week {margin:20px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;padding:20px 0 0;background:transparent}
.practice-tools .play-week>div:first-child>strong {font-size:1rem}
.practice-tools .play-week>div:first-child>span {display:none}
.learning-path-heading {margin:22px 0 15px;gap:12px}
.learning-path-heading h2 {font-size:1.25rem}
.learning-path-heading .text-button {font-size:.875rem;min-height:44px}
.course-unit:not([open])>summary small {display:none}
.course-unit>summary {min-height:78px}
.course-unit .unit-count {padding:6px 9px;border-radius:7px;background:var(--soft);color:var(--green);font-size:.875rem}
.learning-footer {display:flex;align-items:center;justify-content:space-between;gap:15px;margin:20px 0;color:var(--muted);font-size:.875rem}
.learning-footer strong {display:block;color:var(--ink);margin-top:4px;font-size:1rem}
.context-help {margin:18px 0;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:0 18px;text-align:left}
.context-help>summary {padding:16px 0;min-height:50px;font-size:.9375rem;color:var(--muted);cursor:pointer;line-height:1.5}
.context-help>p {font-size:1rem;line-height:1.8;margin:0 0 18px;color:var(--muted);max-width:70ch}
.context-help>.text-button {margin-bottom:15px}
.level-choice em {display:inline-block;font-size:.875rem;padding:6px 9px;background:var(--soft);color:var(--green);border-radius:7px;margin-top:10px;font-style:normal}
.personal-focus {display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:17px;align-items:center}
.personal-focus h2 {margin:0;font-size:1.375rem}
.personal-focus p {margin:8px 0 0;font-size:1rem}
.personal-focus>.text-button {grid-column:2/-1;justify-self:start}
.topic-chips {display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:20px 0 0}
.topic-chips li {display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:9px;background:var(--soft);font-size:.9375rem;color:var(--green)}
.topic-chips svg {width:18px;height:18px;flex-shrink:0}
.skill-row {padding:15px 0}
.skill-row>span {font-size:.9375rem}
/* Each verse is one reading unit; translations and pronunciation have their own inset. */
.simple-layout .mushaf-panel,html[data-theme=night] .simple-layout .mushaf-panel {background:transparent;border:0;box-shadow:none;padding:0;border-radius:0;overflow:visible}
.simple-layout .verse-block,html[data-theme=night] .simple-layout .verse-block {background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:22px 28px 24px;margin-bottom:14px}
.simple-layout .verse-ref {display:inline-flex;padding:6px 10px;border-radius:8px;background:var(--soft);color:var(--green);font-size:.875rem}
.simple-layout .verse-meaning-button {min-height:42px;padding:7px 11px;border:1px solid var(--line);border-radius:8px;font-size:.875rem}
.simple-layout .verse-arabic {padding-top:12px}
.simple-layout .verse-translation {padding:18px;background:var(--soft);border:0;border-radius:11px;margin-top:14px}
.simple-layout .verse-translation p {margin:9px 0 0}
.simple-layout .verse-pronunciation {padding:0 14px;border:1px solid var(--line);border-radius:10px;margin-top:12px}
.simple-layout .verse-pronunciation[open] {padding-bottom:14px;background:var(--bg)}
.simple-layout .verse-pronunciation p {margin:4px 0 0}
.simple-layout .basmalah {background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:14px}
.hatim-overview {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.hatim-overview>.hatim-card {margin:0;min-width:0}
.hatim-overview>.quiet-note,.hatim-overview>.hatim-confirm,.hatim-overview>[role=alert] {grid-column:1/-1;margin:0}
.hatim-card>.section-heading {align-items:start}
.hatim-card>.section-heading>strong {display:block;background:var(--soft);border-radius:9px;padding:8px 10px;white-space:nowrap;font-size:1.0625rem}
.hatim-callout {display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--surface)}
.hatim-callout h2 {font-size:1.125rem;margin:0}
.settings-card {margin-bottom:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.settings-group-title {font-size:.875rem;color:var(--muted);padding-top:22px;margin:0;font-weight:600}
.settings-card .theme-setting {border:0}
.theme-choice,.theme-choice[aria-pressed=true] {position:relative;min-height:122px;padding-top:53px;align-items:center;flex-wrap:nowrap;overflow:hidden}
.theme-choice:before {content:'';position:absolute;inset:0 0 auto;height:35px;background:#f5f8f3;border-bottom:1px solid var(--line)}
.theme-choice[data-theme-choice=night]:before {background:#1a1f16}
.theme-choice>span:not(.theme-check) {order:initial;flex-basis:auto}
.theme-choice .theme-check {order:initial}
/* Arabic examples and instructions stay complete, but occupy different visual areas. */
.teaching-card>.course-arabic,.routine-card>.course-arabic,.exercise-card>.course-arabic {background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:24px 14px;margin:20px 0}
.teaching-card>p,.routine-card>p:not(.quiet-note) {padding:18px;border-radius:12px;background:var(--bg);line-height:1.9}
.routine-verse {background:var(--soft);border-radius:13px;padding:18px}
body[data-page=dashboard] main>footer,body[data-page=learn] main>footer {display:none}
@media(max-width:800px),(max-width:1100px) and (pointer:coarse) {
 .home-secondary-grid {gap:12px}
 .home-secondary-grid .destination-card {padding:18px;display:flex;flex-wrap:wrap;gap:12px}
 .home-secondary-grid .destination-copy {flex-basis:100%}
 .home-secondary-grid .destination-arrow {display:none}
 .home-secondary-grid .destination-copy>span {font-size:.875rem}
 .home-daily .daily-start-card,.daily-start-card {padding:18px;gap:12px;grid-template-columns:42px minmax(0,1fr) auto}
 .daily-symbol,.recall-symbol,.section-symbol {width:42px;height:42px;border-radius:12px}
 .daily-start-card .primary,.home-daily .daily-start-card .primary {min-width:62px;padding:10px 12px}
 .home-lesson-copy {margin:19px 0}
 .home-lesson-copy h3 {font-size:1.375rem}
 .learning-stat-tiles {gap:8px;margin-bottom:16px}
 .learning-stat-tiles>div {padding:14px 11px;gap:5px}
 .learning-stat-tiles svg {position:static;width:18px;height:18px;margin-bottom:3px}
 .learning-stat-tiles strong {font-size:1.375rem;padding:0;overflow-wrap:anywhere}
 .learning-stat-tiles small {font-size:.875rem}
 .learning-stat-tiles>div>span {font-size:.875rem}
 .learning-focus-grid {grid-template-columns:1fr;gap:14px;margin-bottom:16px}
 .learning-focus-grid .next-lesson {padding:22px;gap:18px}
 .learning-focus-grid .next-lesson h2 {font-size:1.375rem}
 .learning-focus-grid .daily-start-card {padding:18px;grid-template-columns:42px minmax(0,1fr) auto;gap:12px}
 .learning-focus-grid .daily-start-card .primary {grid-column:auto;justify-self:end}
 .practice-tools {margin-bottom:20px}
 .practice-tools>summary {padding:16px;gap:10px}
 .practice-tools-body {padding:14px}
 .practice-tile-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .practice-tile {padding:16px;min-height:145px}
 .recall-card {padding:17px;gap:12px;flex-direction:row;flex-wrap:wrap;align-items:center}
 .recall-card .recall-symbol {display:none}
 .recall-card>div {min-width:135px}
 .practice-tools .play-week {flex-direction:column;align-items:stretch;gap:15px}
 .learning-path-heading {align-items:center}
 .learning-path-heading h2 {font-size:1.125rem}
 .learning-path-heading .text-button {text-align:right;max-width:150px}
 .course-unit>summary {padding:17px 14px;min-height:76px}
 .course-unit>summary>span:nth-child(2) {min-width:0}
 .course-unit>summary strong {font-size:1rem}
 .personal-focus {grid-template-columns:42px minmax(0,1fr);gap:14px}
 .personal-focus>.primary {grid-column:2;justify-self:start}
 .personal-focus>.text-button {grid-column:1/-1}
 .personal-focus h2 {font-size:1.25rem}
 .simple-layout .verse-block,html[data-theme=night] .simple-layout .verse-block {padding:17px 16px 20px;border-radius:14px;margin-bottom:13px}
 .simple-layout .verse-translation {padding:15px}
 .simple-layout .verse-arabic {padding-top:10px}
 .simple-layout .basmalah {padding:17px 12px}
 .hatim-overview {grid-template-columns:1fr;gap:16px}
 .hatim-callout {flex-wrap:wrap;padding:18px;gap:12px}
 .settings-card {margin-bottom:16px}
 .theme-choice,.theme-choice[aria-pressed=true] {padding:51px 13px 15px;min-height:119px;gap:10px;flex-wrap:wrap}
 .theme-choice>svg {width:21px;height:21px}
 .theme-choice>span:not(.theme-check) {flex:1;min-width:55px}
 .theme-choice .theme-check {margin-left:0}
}
@media(max-width:380px) {
 .home-daily .daily-start-card,.learning-focus-grid .daily-start-card {grid-template-columns:minmax(0,1fr) auto}
 .home-daily .daily-symbol,.learning-focus-grid .daily-symbol {display:none}
 .practice-tools .disclosure-label {display:none}
 .home-secondary-grid .destination-card {padding:15px}
 .simple-layout .verse-block,html[data-theme=night] .simple-layout .verse-block {padding-inline:14px}
}