/* CC45 Part 2 — Madinah mushaf mode. White background, Islamic green #1B6B3A accents. */
:root{--green:#1B6B3A;--green-deep:#0F4A28;--green-tint:#e8f3ec;--green-soft:#f1f8f3;--ink:#14331f;--muted:#5a6b60;--line:#e2ece5;}
*{box-sizing:border-box;margin:0;padding:0}
body{background:#fff;color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}
.mtop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mtop .brand{font-weight:700;text-decoration:none;color:var(--ink);font-size:15px}
.mtop .brand span{color:var(--green)}
.mtop .mode{display:flex;gap:8px;align-items:center}
.mbtn{font-family:'Space Mono',monospace;font-size:12px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:20px;padding:6px 14px;cursor:pointer;text-decoration:none;display:inline-block}
.mbtn:hover{border-color:var(--green);background:var(--green-soft)}
.mbtn.on{background:var(--green);border-color:var(--green);color:#fff}
.mwrap{flex:1;width:100%;max-width:760px;margin:0 auto;padding:18px 16px 30px}
.mushaf-page{font-family:'Amiri Quran','Noto Naskh Arabic',serif;text-align:justify;text-align-last:center;line-height:2.2;font-size:26px;max-width:640px;margin:auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 24px 30px;direction:rtl}
.mushaf-page.p-opening{max-width:380px;text-align:center;text-align-last:center;padding-top:40px;padding-bottom:44px}
.mushaf-page .ayah{cursor:pointer;border-radius:6px;transition:background .25s}
.mushaf-page .ayah:hover{background:var(--green-soft)}
.mushaf-page .ayah.playing,.mushaf-page .ayah.focus{background:var(--green-tint)}
.mushaf-page .marker{color:var(--green);font-size:.78em;white-space:nowrap}
.surah-hdr{font-family:'Amiri Quran','Noto Naskh Arabic',serif;text-align:center;color:var(--green-deep);font-size:.92em;border:1.5px solid var(--green-tint);background:var(--green-soft);border-radius:10px;padding:8px 6px;margin:14px 0 8px}
.basmala{text-align:center;font-size:.95em;color:var(--ink);margin:6px 0 10px}
.pg-num{font-family:'Space Mono',monospace;text-align:center;color:var(--muted);font-size:12.5px;margin:14px 0 4px}
.mnav{display:flex;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.goto{display:flex;justify-content:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.goto input,.goto select{font-family:'Space Mono',monospace;font-size:12.5px;border:1px solid var(--line);border-radius:8px;padding:6px 9px;width:130px;color:var(--ink)}
.goto input:focus,.goto select:focus{outline:none;border-color:var(--green)}
.mstate{text-align:center;color:var(--muted);padding:50px 0;font-size:14px}
.mfoot{border-top:1px solid var(--line);padding:14px 18px;color:var(--muted);font-size:12.5px;text-align:center}
.mfoot a{color:var(--green)}
@media (max-width:520px){.mushaf-page{font-size:22px;padding:18px 14px 22px}.mwrap{padding:12px 8px 22px}}