/* Learn Tajwid — institutional local-font prototype theme */
@font-face{
  font-family:'Gentium Book Plus';
  src:url('fonts/GentiumBookPlus-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Gentium Book Plus';
  src:url('fonts/GentiumBookPlus-Bold.ttf') format('truetype');
  font-weight:700 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Gentium Book Plus';
  src:url('fonts/GentiumBookPlus-Italic.ttf') format('truetype');
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Gentium Book Plus';
  src:url('fonts/GentiumBookPlus-BoldItalic.ttf') format('truetype');
  font-weight:700 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'AlQuran IndoPak by QuranWBW';
  src:url('fonts/AlQuran-IndoPak-QuranWBW-v2.100.woff2') format('woff2'),
      url('fonts/AlQuran-IndoPak-QuranWBW-v2.100.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --bg1:#fdf3ff; --bg2:#eef6ff; --bg3:#fff7ec;
  --ink:#3a2e45; --muted:#8a7f96; --panel:#ffffff;
  --plum:#8b5cf6; --peach:#fb923c; --mint:#34d399; --sky:#38bdf8; --rose:#fb7185; --sun:#fbbf24;
  --radius:26px;
  --arabic:'AlQuran IndoPak by QuranWBW',serif;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:'Gentium Book Plus',Georgia,serif;
  background:linear-gradient(160deg,var(--bg1),var(--bg2) 55%,var(--bg3));min-height:100vh}
.hidden{display:none!important}
.view{max-width:1100px;margin:0 auto;padding:18px 20px 70px}

/* ── home ── */
.hero{position:relative;text-align:center;padding:56px 0 20px;overflow:hidden}
.hero h1{margin:0;font-size:56px;font-weight:800;
  background:linear-gradient(90deg,var(--plum),var(--rose),var(--peach));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{margin:6px 0 0;color:var(--muted);font-size:19px;font-weight:500}
.hero-bubbles span{position:absolute;border-radius:50%;opacity:.35;filter:blur(2px)}
.hero-bubbles span:nth-child(1){width:90px;height:90px;background:var(--sky);top:8px;left:6%}
.hero-bubbles span:nth-child(2){width:56px;height:56px;background:var(--sun);top:70px;right:12%}
.hero-bubbles span:nth-child(3){width:38px;height:38px;background:var(--rose);top:16px;right:28%}
.hero-bubbles span:nth-child(4){width:66px;height:66px;background:var(--mint);top:96px;left:24%}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:26px}
.tile{border:none;cursor:pointer;text-align:left;padding:26px 22px;border-radius:var(--radius);
  background:var(--panel);box-shadow:0 8px 22px #b49ad51f;display:flex;flex-direction:column;gap:6px;
  transition:transform .15s,box-shadow .15s;font-family:inherit}
.tile:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 14px 30px #b49ad540}
.tile-emoji{font-size:40px}
.tile-name{font-size:22px;font-weight:800}
.tile-sub{color:var(--muted);font-size:14px;font-weight:500}
.tile-read{border-top:8px solid var(--plum)} .tile-break{border-top:8px solid var(--sky)}
.tile-cards{border-top:8px solid var(--peach)} .tile-quiz{border-top:8px solid var(--rose)}
.tile-rules{border-top:8px solid var(--mint)}
.home-foot{text-align:center;color:var(--muted);font-size:12px;margin-top:36px}
.home-foot code{background:#fff;border-radius:8px;padding:2px 7px}

/* ── shared bars/chips ── */
.topbar{display:flex;align-items:center;gap:14px;padding:10px 0;flex-wrap:wrap}
.bar-title{margin:0;font-size:24px}
.back{border:none;background:var(--panel);width:44px;height:44px;border-radius:50%;font-size:20px;
  cursor:pointer;box-shadow:0 4px 12px #b49ad52e;flex:none}
.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;flex:1}
.pill-select{border:none;background:var(--panel);border-radius:999px;padding:10px 18px;font:inherit;
  font-weight:700;box-shadow:0 4px 12px #b49ad52e;cursor:pointer;max-width:300px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:14px;
  background:var(--panel);color:var(--muted);border-radius:999px;padding:9px 16px;
  box-shadow:0 3px 9px #b49ad524;transition:all .12s}
.chip.active{background:var(--plum);color:#fff}
.rule-toggles{padding:8px 0 2px}
.rule-toggles .chip{display:flex;align-items:center;gap:7px;font-size:13px;padding:7px 13px}
.rule-toggles .chip.off{opacity:.38}

.surface-note{max-width:760px;margin:8px auto 0;color:var(--muted);font-size:13px;font-weight:600;text-align:center;line-height:1.45}
.dot{width:13px;height:13px;border-radius:50%;display:inline-block;flex:none}

/* ── arabic ── */
.arabic{font-family:var(--arabic);direction:rtl;line-height:2.05;text-align:right}

/* ── read / mushaf ── */
.page-wrap{margin-top:14px}
.mushaf-page{background:#fffdf6;border:2px solid #ead9b8;border-radius:20px;
  padding:24px 26px;box-shadow:0 10px 26px #c9a96b26;min-height:300px;
  max-width:660px;margin:0 auto}
.mline{font-family:var(--arabic);direction:rtl;font-size:35px;line-height:2.05;
  text-align:justify;text-align-last:justify;white-space:nowrap}
.mline.last{text-align-last:right}
.mline.centered{text-align:center;text-align-last:center}
.mline.surah-head{text-align:center;text-align-last:center;background:linear-gradient(90deg,#fde8ff,#e8f4ff);
  border:2px solid #ecd9f5;border-radius:14px;font-size:.85em;margin:2px 0}
.missing{color:#c9c2d4}
/* opening spread only: narrow illuminated panel to avoid full-width sparse-line justification */
.mushaf-page.ornamental{max-width:430px;padding:30px 34px;
  border:none;background:
    linear-gradient(#fffdf6,#fffdf6) padding-box,
    linear-gradient(135deg,#c9a227,#f2ce9a 30%,#a97c2f 55%,#f2ce9a 80%,#c9a227) border-box;
  border:10px solid transparent;border-radius:26px;
  box-shadow:0 0 0 3px #ead9b8,0 12px 30px #c9a96b33}
.mushaf-page.ornamental .mline{font-size:30px}
.mushaf-page .w{cursor:pointer;border-radius:8px;transition:background .12s}
.mushaf-page .w:hover{background:#f3e8ff}
.ayah-marker{display:inline-grid;place-items:center;min-width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#ffe9c9,#ffd7ee);color:#7c5c2e;font-size:13px;font-weight:800;
  font-family:'Gentium Book Plus',Georgia,serif;margin:0 5px;vertical-align:middle;border:2px solid #f2ce9a}
.page-nav{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:16px}
.page-btn{border:none;width:46px;height:46px;border-radius:50%;font-size:22px;cursor:pointer;
  background:var(--panel);box-shadow:0 4px 12px #b49ad52e}
.page-label{font-weight:800;color:var(--muted)}

/* ── breakdown ── */
.bd-verse-panel{background:var(--panel);border-radius:var(--radius);padding:22px 26px;
  box-shadow:0 8px 22px #b49ad51f;margin-top:12px}
.verse-display{font-size:34px}
.fired-chips{margin-top:12px}
.fired-chips .chip{cursor:default;display:flex;align-items:center;gap:7px}
.section-h{margin:26px 4px 12px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.wcard{background:var(--panel);border-radius:20px;padding:16px;box-shadow:0 6px 16px #b49ad521;
  cursor:pointer;transition:transform .13s;border-bottom:6px solid var(--card-c,#ddd)}
.wcard:hover{transform:translateY(-3px)}
.wcard .arabic{font-size:30px;text-align:center}
.wcard .ghost{color:#b9b0c4}
.wcard-rule{font-weight:800;font-size:14px;margin-top:6px}
.wcard-meta{color:var(--muted);font-size:12px;font-weight:500}

/* ── flashcards ── */
.fc-stage{display:flex;flex-direction:column;align-items:center;margin-top:26px}
.flashcard{width:min(460px,92vw);height:300px;position:relative;perspective:1200px;cursor:pointer}
.fc-face{position:absolute;inset:0;border-radius:30px;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;
  box-shadow:0 14px 34px #b49ad530;transition:transform .5s}
.fc-front{background:var(--panel)}
.fc-back{background:linear-gradient(150deg,#faf5ff,#eff6ff);transform:rotateY(180deg)}
.flashcard.flipped .fc-front{transform:rotateY(180deg)}
.flashcard.flipped .fc-back{transform:rotateY(360deg)}
.fc-word{font-size:34px;text-align:center;line-height:2.2;white-space:normal}
.fc-word .target,.quiz-word .target{font-size:1.25em}
.ghost{color:#b9b0c4}
.ayah-marker.sm{min-width:24px;height:24px;font-size:11px}
.fc-hint{color:var(--muted);font-size:13px;font-weight:600}
.fc-rule-name{font-size:26px;font-weight:800}
.fc-cond{text-align:center;color:var(--ink);font-weight:500;font-size:15px;line-height:1.5}
.fc-src{color:var(--muted);font-weight:700;font-size:13px}
.fc-controls{display:flex;gap:22px;align-items:center;margin-top:24px}
.fc-btn{border:none;font-family:inherit;font-weight:800;font-size:16px;border-radius:999px;
  padding:13px 26px;cursor:pointer;box-shadow:0 6px 16px #b49ad52b}
.fc-again{background:#fff1f2;color:#be123c}.fc-good{background:#ecfdf5;color:#047857}
.fc-count{font-weight:800;color:var(--muted)}
.toggle-chip.active{background:var(--rose);color:#fff}

/* ── quiz ── */
.quiz-score{font-size:16px;color:var(--muted)}
.quiz-stage{display:flex;flex-direction:column;align-items:center;margin-top:20px}
.quiz-ask{font-size:18px;font-weight:600;color:var(--muted)}
.quiz-word{font-size:34px;background:var(--panel);border-radius:30px;padding:22px 40px;
  box-shadow:0 10px 26px #b49ad52b;text-align:center;line-height:2.2;max-width:min(720px,94vw)}
.quiz-word u{text-decoration-thickness:4px;text-underline-offset:10px;text-decoration-color:var(--rose)}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;width:min(560px,94vw)}
.qopt{border:none;font-family:inherit;font-weight:700;font-size:16px;background:var(--panel);
  border-radius:18px;padding:16px;cursor:pointer;box-shadow:0 5px 14px #b49ad524;transition:all .12s}
.qopt:hover{transform:scale(1.02)}
.qopt.right{background:#d1fae5;color:#065f46}.qopt.wrong{background:#ffe4e6;color:#9f1239}
.quiz-feedback{min-height:46px;margin-top:14px;font-weight:800;font-size:18px}

/* ── rule explorer ── */
.rules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:14px}
.rbub{background:var(--panel);border-radius:22px;padding:18px;box-shadow:0 6px 16px #b49ad521;
  border-right:10px solid var(--card-c,#ccc)}
.rbub-name{font-weight:800;font-size:17px}
.rbub-cond{color:var(--muted);font-size:13px;font-weight:500;line-height:1.45;margin-top:5px}
.rbub-meta{margin-top:8px;font-size:12px;font-weight:700;color:var(--muted)}
.rbub-swatch{float:left;width:22px;height:22px;border-radius:50%;background:var(--card-c,#ccc)}

/* ── bottom sheet ── */
.scrim{position:fixed;inset:0;background:#3a2e4566;z-index:40}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--panel);
  border-radius:30px 30px 0 0;padding:14px 26px 34px;box-shadow:0 -12px 40px #3a2e4540;
  max-height:70vh;overflow:auto}
.sheet-grab{width:52px;height:6px;border-radius:3px;background:#ddd3ea;margin:0 auto 12px}
.sheet-word{font-size:56px;text-align:center}
.sheet-rule-row{display:flex;gap:12px;align-items:flex-start;padding:12px 4px;border-top:1px solid #f1ecf7}
.sheet-rule-wasl{font-size:12px;font-style:italic;color:#a97c2f;margin-top:3px}
.sheet-rule-row .dot{margin-top:5px;width:16px;height:16px}
.sheet-rule-name{font-weight:800}
.sheet-rule-cond{color:var(--muted);font-size:14px;font-weight:500;line-height:1.45}

@media(max-width:640px){
  .hero h1{font-size:40px}
  .mline{font-size:22px}
  .quiz-opts{grid-template-columns:1fr}
}

/* ── v0.3 learning system ── */
.load-error{position:sticky;top:0;z-index:100;background:#fff1f2;color:#9f1239;padding:10px 18px;font-weight:700;text-align:center;border-bottom:1px solid #fecdd3}
.home-progress{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}.home-progress span{background:#ffffffb8;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700;color:var(--muted)}.home-progress b{color:var(--ink)}
.tile-learn{--tile:#7c3aed}.tile-progress{--tile:#0f766e}
.view-intro{max-width:900px;margin:12px auto 20px;color:var(--muted);font-weight:500;line-height:1.55;padding:0 18px}
.lesson-levels{max-width:980px;margin:0 auto;display:grid;gap:18px;padding:0 18px 40px}.lesson-level{background:var(--panel);border-radius:26px;padding:22px;box-shadow:0 8px 24px #b49ad524}.lesson-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.lesson-top h3{margin:2px 0 5px;font-size:24px}.lesson-top p{margin:0;color:var(--muted);max-width:680px}.level-kicker{font-size:12px;font-weight:800;color:var(--purple);text-transform:uppercase;letter-spacing:.08em}.level-score{font-size:28px;font-weight:800;text-align:center;color:var(--purple);min-width:74px}.level-score small{display:block;font-size:11px;color:var(--muted)}.skill-row{margin-top:16px;padding-top:14px;border-top:1px solid #eee7f5}.skill-row strong{font-size:14px}.skill-rules{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.rule-mini{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:#f8f5fb;font-size:12px;font-weight:700}.rule-mini i{width:9px;height:9px;border-radius:50%}.status-secure{box-shadow:inset 0 0 0 1px #86efac}.status-review{box-shadow:inset 0 0 0 2px #fbbf24}.lesson-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;color:var(--muted);font-size:13px;font-weight:700}
.primary-btn,.secondary-btn,.mini-practice{border:none;font-family:inherit;font-weight:800;cursor:pointer;border-radius:999px}.primary-btn{background:var(--purple);color:white;padding:12px 19px}.secondary-btn{background:#f4eff9;color:var(--ink);padding:12px 19px}.mini-practice{margin-top:12px;padding:7px 12px;background:#f4eff9;color:var(--purple)}
.reader-tools{max-width:1100px;margin:8px auto 4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 18px}.reader-context{font-size:13px;color:var(--muted);font-weight:700;flex:1;min-width:220px}.page-jump-label{font-size:12px;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:5px}.page-jump{width:72px;border:1px solid #e7deef;border-radius:10px;padding:7px 8px;font-family:inherit}.pill-select.compact{max-width:160px}.keyboard-note{text-align:center;color:var(--muted);font-size:11px;margin:5px 0 18px}.chip.active{box-shadow:inset 0 0 0 2px var(--purple)}
.mastery-strip{font-size:13px;color:var(--muted);font-weight:700;margin-bottom:12px;text-align:center}
.practice-setup,.round-results{max-width:650px;margin:30px auto;background:var(--panel);border-radius:28px;padding:28px;box-shadow:0 10px 28px #b49ad526;text-align:center}.practice-setup h3,.round-results h3{font-size:25px;margin:0 0 8px}.practice-setup p,.round-results p{color:var(--muted);line-height:1.5}.pill-select.wide{width:min(100%,480px);margin:16px auto}.setup-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}.quiz-round-head{max-width:720px;margin:12px auto 0;padding:0 18px;display:flex;justify-content:space-between;color:var(--muted);font-size:14px;font-weight:700}.result-score{font-size:68px;font-weight:800;color:var(--purple);line-height:1}.result-score span{font-size:28px;color:var(--muted)}
.rule-level{font-size:11px;font-weight:800;color:var(--purple);margin-top:3px}
.progress-summary{max-width:940px;margin:12px auto 18px;padding:0 18px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.progress-summary div{background:var(--panel);border-radius:18px;padding:15px;text-align:center;box-shadow:0 5px 14px #b49ad51c}.progress-summary b{display:block;font-size:25px;color:var(--purple)}.progress-summary span{font-size:11px;color:var(--muted);font-weight:700}.progress-actions{display:flex;gap:10px;justify-content:center;margin:0 auto 20px}.progress-grid{max-width:940px;margin:0 auto 40px;padding:0 18px;display:grid;gap:16px}.progress-level{background:var(--panel);padding:18px;border-radius:22px;box-shadow:0 6px 18px #b49ad51c}.progress-level h3{margin:0 0 8px}.progress-rule{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid #f0ebf5}.progress-rule i{width:10px;height:10px;border-radius:50%}.progress-rule strong{display:block;font-size:13px}.progress-rule small{display:block;color:var(--muted);font-size:11px}.progress-rule>span{font-size:13px;font-weight:800;color:var(--muted)}
@media(max-width:760px){.progress-summary{grid-template-columns:repeat(3,1fr)}.lesson-top{flex-direction:column}.lesson-actions{align-items:flex-start;flex-direction:column}.reader-tools{align-items:stretch}.reader-context{flex-basis:100%}.quiz-round-head{font-size:12px}}

:root{--purple:var(--plum)}
.tile-learn{border-top:8px solid #7c3aed}.tile-progress{border-top:8px solid #0f766e}


/* ── v0.4 controlled practice & skill engine ── */
.practice-label{display:block;text-align:left;max-width:480px;margin:12px auto 0;font-size:12px;font-weight:800;color:var(--muted)}
.practice-label .pill-select{display:block;margin:6px 0 0;width:100%}
.practice-note{max-width:520px;margin:12px auto 0!important;padding:10px 13px;border-radius:14px;background:#f8f5fb;font-size:13px!important}
.quiz-actions{display:flex;justify-content:center;gap:10px;margin-top:14px}
.quiz-feedback{width:min(720px,94vw);font-size:15px;line-height:1.5;text-align:left}
.feedback-box{background:var(--panel);border-radius:18px;padding:15px 17px;box-shadow:0 5px 14px #b49ad51c;border-left:6px solid var(--purple)}
.feedback-box.good{border-left-color:#10b981}.feedback-box.repair{border-left-color:#f43f5e}
.feedback-title{font-size:18px;font-weight:900;margin-bottom:6px}.feedback-rule{font-weight:900}.feedback-line{margin-top:5px;color:var(--ink)}.feedback-label{color:var(--muted);font-weight:800}
.click-word{display:inline-flex;direction:rtl;unicode-bidi:isolate;align-items:center;gap:0}.click-char{font-family:'AlQuran IndoPak by QuranWBW',serif;font-size:1em;background:transparent;border:none;padding:4px 1px;cursor:pointer;border-radius:8px;line-height:1.7}.click-char.selected{background:#fde68a;box-shadow:0 0 0 2px #f59e0b}.click-char.correct{background:#d1fae5;box-shadow:0 0 0 2px #10b981}.click-char.missed{background:#ffe4e6;box-shadow:0 0 0 2px #fb7185}
.find-ayah{direction:rtl;unicode-bidi:isolate;line-height:2.5;max-width:100%;font-size:30px}.find-ayah .click-char{font-size:30px}
.contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(760px,94vw);margin-top:8px}.contrast-card{border:none;background:var(--panel);border-radius:22px;padding:18px;cursor:pointer;box-shadow:0 6px 16px #b49ad524;font-family:inherit}.contrast-card .arabic{font-size:30px;line-height:2}.contrast-card.right{box-shadow:0 0 0 3px #10b981}.contrast-card.wrong{box-shadow:0 0 0 3px #fb7185}
.wasl-banner{font-family:'Gentium Book Plus',serif;font-size:13px;font-weight:800;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:999px;padding:7px 11px;display:inline-block;margin-bottom:10px;direction:ltr}.wasl-context{font-size:30px;line-height:2.3;direction:rtl;unicode-bidi:isolate}.wasl-divider{display:inline-block;font-family:'Gentium Book Plus',serif;font-size:13px;color:#92400e;background:#fef3c7;border-radius:999px;padding:2px 8px;margin:0 8px;direction:ltr}
.skill-focus{font-size:12px;color:var(--muted);line-height:1.5;margin:6px 0 0}.skill-practice{margin-top:9px}
@media(max-width:640px){.contrast-grid{grid-template-columns:1fr}.find-ayah .click-char{font-size:24px}.wasl-context{font-size:25px}}

/* ═══════════ v0.5 UI pass (Hamza — UI owner) ═══════════
   Redesign of the four screens flagged in the v0.4 findings:
   reader top banner, Practice setup, Learning Path, Rule Explorer.
   Functional markup/IDs unchanged; this layer restyles only. */

/* ── reader top banner: one card, two calm rows ── */
.reader-bar{background:var(--panel);border-radius:22px;box-shadow:0 8px 22px #b49ad51f;
  padding:12px 16px;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.reader-bar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.reader-bar .back{width:38px;height:38px;font-size:17px;box-shadow:none;background:#f4eff9}
.reader-bar .pill-select{box-shadow:none;background:#f8f5fb;padding:8px 14px;font-size:14px}
.reader-bar .reader-context{flex:1;min-width:160px;margin:0;padding:0;text-align:center;font-size:13px}
.reader-bar .page-jump{width:64px;background:#f8f5fb;border-color:#eee4f6}
.reader-bar .chip{box-shadow:none;background:#f8f5fb}
.reader-bar .chip.active{background:var(--plum);color:#fff;box-shadow:none}
.reader-bar-colours{border-top:1px solid #f1ecf7;padding-top:10px}
.reader-bar-colours .mode-chip{font-size:13px;padding:7px 13px}
.reader-bar .rule-toggles{padding:0;flex:1;justify-content:flex-end;gap:6px}
.reader-bar .rule-toggles .chip{font-size:12px;padding:6px 10px}
.reader-bar .rule-toggles .chip .dot{width:11px;height:11px}
.keyboard-note{opacity:.7}
@media(max-width:760px){.reader-bar .reader-context{order:9;flex-basis:100%;text-align:left}
  .reader-bar .rule-toggles{justify-content:flex-start}}

/* ── Practice setup: compact card, clear rhythm, one strong action ── */
.practice-setup{max-width:520px;padding:26px 26px 22px;border-radius:24px;text-align:left}
.practice-setup h3{font-size:22px;text-align:center}
.practice-setup>p{font-size:14px;text-align:center;margin:6px 0 4px}
.practice-label{max-width:none;margin:16px 0 0;text-transform:uppercase;letter-spacing:.07em;font-size:11px}
.practice-label .pill-select{background:#f8f5fb;box-shadow:none;border:1px solid #eee4f6;
  border-radius:14px;padding:11px 14px;font-size:15px;max-width:none}
.pill-select.wide{width:100%;margin:6px 0 0}
.practice-note{max-width:none;margin:14px 0 0!important;text-align:left;
  border-left:4px solid var(--plum);border-radius:10px}
.practice-setup .setup-actions{flex-direction:column;gap:8px;margin-top:20px}
.practice-setup .primary-btn{width:100%;padding:14px;font-size:16px}
.practice-setup .secondary-btn{width:100%;padding:11px}

/* ── Learning Path: header band per level, aligned skill rows ── */
.lesson-level{padding:0;overflow:hidden}
.lesson-top{padding:18px 22px 16px;background:linear-gradient(120deg,#faf5ff,#eff6ff);
  align-items:center;gap:16px}
.lesson-top h3{font-size:21px}
.lesson-top p{font-size:14px;line-height:1.5}
.level-score{background:var(--panel);border-radius:16px;padding:9px 14px 7px;
  box-shadow:0 4px 10px #b49ad51f;font-size:23px;min-width:84px}
.skill-row{margin:0;padding:14px 22px;border-top:1px solid #f1ecf7;
  display:grid;grid-template-columns:1fr auto;gap:2px 18px;align-items:center}
.skill-row strong{font-size:15px}
.skill-focus{margin:2px 0 0}
.skill-rules{margin-top:7px}
.skill-practice{grid-column:2;grid-row:1/4;margin:0;align-self:center;white-space:nowrap}
.lesson-actions{padding:13px 22px 16px;margin:0;border-top:1px solid #f1ecf7}
@media(max-width:640px){.skill-row{grid-template-columns:1fr}
  .skill-practice{grid-column:1;grid-row:auto;justify-self:start;margin-top:10px}}

/* ── Rule Explorer, pass 3: rulebook — master list + reading pane ── */
:root{--surface:#ffffff;--border-soft:#eee4f6;--ring:#c4b5fd;--muted-bg:#f8f5fb}
.rules-grid{display:block;margin-top:10px}
.rulebook{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
.rulebook-list{background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;
  padding:10px;max-height:74vh;overflow-y:auto;position:sticky;top:14px}
.rlist-head{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:12px 10px 6px}
.rlist-group:first-child .rlist-head{padding-top:4px}
.rlist-item{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;
  font-family:inherit;font-weight:700;font-size:14px;color:var(--ink);padding:9px 10px;
  border-radius:12px;cursor:pointer;text-align:left}
.rlist-item:hover{background:var(--muted-bg)}
.rlist-item.active{background:#f1e8ff;box-shadow:inset 0 0 0 1.5px var(--plum)}
.rlist-item .dot{width:12px;height:12px;border-radius:4px}
.rlist-name{flex:1;line-height:1.25}
.rlist-star{font-size:11px}
.rulebook-detail{background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;
  padding:24px 28px;display:flex;flex-direction:column;gap:14px;min-height:440px}
.rdetail-head{display:flex;gap:14px;align-items:center}
.rdetail-swatch{width:46px;height:46px;border-radius:14px;flex:none;box-shadow:inset 0 0 0 1px #00000014}
.rdetail-head h2{margin:0;font-size:26px;line-height:1.15}
.rbadges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.rbadge{font-size:11px;font-weight:800;color:var(--muted);background:var(--muted-bg);
  border:1px solid var(--border-soft);border-radius:999px;padding:4px 10px}
.rbadge.gold{color:#92400e;background:#fffbeb;border-color:#fde68a}
.rdetail-cond{margin:0;font-size:16px;line-height:1.6;max-width:62ch}
.rdetail-example{background:#fffdf6;border:1.5px solid #ead9b8;border-radius:16px;padding:20px;
  text-align:center;font-size:40px;line-height:2;min-height:120px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.rdetail-example .ghost{font-size:.68em}
.rdetail-loading{font-family:'Gentium Book Plus',serif;font-size:13px;color:var(--muted);direction:ltr}
.rdetail-src{font-family:'Gentium Book Plus',serif;font-size:12px;font-weight:700;color:#a97c2f;direction:ltr}
.rdetail-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--border-soft);padding-top:14px;margin-top:auto}
.rbub-meta{font-size:12px;font-weight:700;color:var(--muted)}
@media(max-width:860px){.rulebook{grid-template-columns:1fr}.rulebook-list{position:static;max-height:240px}}
.mini-practice:focus-visible,.chip:focus-visible,.pill-select:focus-visible,.primary-btn:focus-visible,.rlist-item:focus-visible{
  outline:2px solid var(--ring);outline-offset:2px}

/* ── UI pass 4: design language rolled across the remaining screens ── */

/* home: BETA sticker + tokenised tiles */
.beta-sticker{display:inline-block;font-family:'Gentium Book Plus',Georgia,serif;font-size:13px;
  font-weight:900;letter-spacing:.18em;color:#92400e;background:linear-gradient(135deg,#fde68a,#fbbf24);
  border:2px solid #f59e0b;border-radius:8px;padding:4px 12px;margin-left:10px;
  transform:rotate(-7deg);transform-origin:center;vertical-align:middle;
  box-shadow:0 3px 8px #f59e0b4d,inset 0 1px 0 #fff8;text-shadow:0 1px 0 #fff6}
.tile{border-left:1px solid var(--border-soft);border-right:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);box-shadow:0 2px 8px #b49ad51a}
.tile:hover{box-shadow:0 12px 26px #b49ad538}
.tile:focus-visible,.back:focus-visible,.page-btn:focus-visible,.fc-btn:focus-visible,
.qopt:focus-visible,.secondary-btn:focus-visible,.tile:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* breakdown */
.bd-verse-panel{border:1px solid var(--border-soft);box-shadow:0 2px 8px #b49ad51a;border-radius:20px}
.wcard{cursor:default}
.wcard{border:1px solid var(--border-soft);box-shadow:0 2px 8px #b49ad51a;border-radius:16px;
  border-bottom-width:4px}
.wcard:hover{box-shadow:0 8px 20px #b49ad530}
.view-intro,.section-h{max-width:1100px}

/* flashcards */
.fc-face{border:1px solid var(--border-soft);box-shadow:0 10px 28px #b49ad526;border-radius:24px}
.mastery-strip{background:var(--muted-bg);border:1px solid var(--border-soft);border-radius:999px;
  padding:7px 16px;display:inline-block;margin:0 auto 14px}
.fc-stage{gap:0}
.fc-btn{box-shadow:0 2px 8px #b49ad520;border:1px solid transparent}
.fc-again{border-color:#fecdd3}.fc-good{border-color:#a7f3d0}

/* quiz stage + results */
.quiz-round-head{background:var(--surface);border:1px solid var(--border-soft);border-radius:999px;
  padding:9px 18px;max-width:680px}
.quiz-word{border:1px solid var(--border-soft);box-shadow:0 4px 14px #b49ad520;border-radius:22px}
.qopt{border:1px solid var(--border-soft);box-shadow:0 2px 6px #b49ad518;border-radius:14px}
.qopt.right{border-color:#6ee7b7}.qopt.wrong{border-color:#fda4af}
.feedback-box{border:1px solid var(--border-soft);border-left-width:6px;box-shadow:0 2px 8px #b49ad51a}
.round-results{border:1px solid var(--border-soft);box-shadow:0 6px 18px #b49ad522;border-radius:24px}
.contrast-card{border:1px solid var(--border-soft);box-shadow:0 2px 8px #b49ad51a;border-radius:16px}
.practice-setup{border:1px solid var(--border-soft);box-shadow:0 6px 18px #b49ad522}

/* progress */
.progress-summary div{border:1px solid var(--border-soft);box-shadow:0 2px 8px #b49ad516;border-radius:16px}
.progress-level{border:1px solid var(--border-soft);box-shadow:0 2px 8px #b49ad516;border-radius:18px}

/* learning path + reader cards pick up the same border discipline */
.lesson-level{border:1px solid var(--border-soft);box-shadow:0 2px 10px #b49ad51c}
.reader-bar{border:1px solid var(--border-soft);box-shadow:0 2px 10px #b49ad51c}
.rulebook-list,.rulebook-detail{box-shadow:0 2px 10px #b49ad51c}

/* ── UI pass 4b: mobile optimization ── */
@media(max-width:640px){
  .view{padding:12px 12px 56px}
  .hero{padding:34px 0 12px}
  .hero h1{font-size:36px}
  .tagline{font-size:15px}
  .beta-sticker{font-size:11px;padding:3px 9px;margin-left:6px}
  .tile{padding:18px 16px}
  .tile-emoji{font-size:30px}
  .tile-name{font-size:18px}
  .bar-title{font-size:20px}
  .back{width:44px;height:44px;font-size:18px}
  .view-intro{margin:8px auto 12px;font-size:14px;padding:0 6px}
  /* reader */
  .reader-bar{padding:10px 12px}
  .reader-bar .pill-select{max-width:150px;font-size:13px;padding:7px 11px}
  .reader-bar .rule-toggles .chip{font-size:11px;padding:5px 8px}
  .reader-bar-colours{flex-direction:column;align-items:stretch}
  .reader-bar-colours .chip-row#mode-chips{justify-content:center}
  .reader-bar .rule-toggles{justify-content:center;flex:none}
  .reader-bar .rule-toggles .chip{max-width:none}
  .mushaf-page{padding:14px 12px;border-radius:14px}
  .mushaf-page.ornamental{padding:18px 16px;border-width:7px}
  .mushaf-page.ornamental .mline{font-size:20px}
  .page-btn{width:44px;height:44px;font-size:20px}
  .reader-bar .chip{padding:11px 14px}
  .reader-bar .pill-select{padding:10px 12px}
  /* breakdown */
  .bd-verse-panel{padding:14px 14px}
  .verse-display{font-size:26px}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .wcard{padding:12px}
  .wcard .arabic{font-size:24px}
  /* flashcards */
  .flashcard{height:250px}
  .fc-word{font-size:27px}
  .fc-controls{gap:12px;margin-top:18px;width:100%;justify-content:space-between}
  .fc-btn{font-size:14px;padding:11px 18px}
  /* quiz */
  .practice-setup{margin:16px auto;padding:20px 16px 18px}
  .quiz-word{font-size:26px;padding:16px 18px}
  .quiz-ask{font-size:15px;text-align:center;padding:0 8px}
  .quiz-round-head{font-size:12px;padding:8px 14px}
  .find-ayah,.find-ayah .click-char{font-size:22px}
  .quiz-feedback{font-size:14px}
  .result-score{font-size:52px}
  /* rulebook */
  .rulebook-detail{padding:16px 16px;min-height:0}
  .rdetail-head h2{font-size:21px}
  .rdetail-swatch{width:36px;height:36px}
  .rdetail-cond{font-size:15px}
  .rdetail-example{font-size:30px;padding:14px}
  .rdetail-foot{flex-direction:column;align-items:stretch;text-align:center}
  .rdetail-foot .primary-btn{width:100%}
  /* progress */
  .progress-summary{grid-template-columns:repeat(2,1fr)}
  .progress-summary b{font-size:20px}
  /* learning path */
  .lesson-top{padding:14px 16px 12px}
  .skill-row{padding:12px 16px}
  .lesson-actions{padding:12px 16px 14px;flex-direction:row;align-items:center}
  /* sheet */
  .sheet{padding:12px 16px 26px}
  .sheet-word{font-size:42px}
}