@font-face{font-family:Uthmani;src:url('./fonts/uthmani.woff2') format('woff2');font-display:block}
@font-face{font-family:IndoPak;src:url('./fonts/indopak.woff2') format('woff2');font-display:block}
:root{--bg:#f5f5f1;--text:#1b2c27;--muted:#62716c;--panel:#fff;--line:#d9e2dc;--green:#173f34;--gold:#b58e48;--shadow:0 15px 40px #123d2b0b;--arSize:39px;--tafkhim:#c2543f;--relation:#3d74b6;--noon:#7b5ea7;--meem:#2e8b74;--mushaddad:#b8862b;--madd:#d35435;--qalqalah:#4a7c2f}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.topbar{background:var(--green);color:#fff;min-height:75px;display:flex;justify-content:space-between;align-items:center;padding:11px max(20px,calc((100vw - 1190px)/2));gap:10px}.brand{display:flex;align-items:center;gap:12px}.brand strong{display:block;letter-spacing:.02em;font-size:17px}.brand span:not(.logo){display:block;color:#c7d5ca;font-size:11px;margin-top:2px}.logo{font:32px Uthmani,serif;color:#e1c691}.topright{display:flex;align-items:center;gap:18px}.privacy{font-size:12px;color:#d4ebdb}.privacy span{color:#84d7a3}.iconbtn{background:transparent;border:1px solid #ffffff50;color:inherit;border-radius:10px;width:38px;height:38px;font-size:23px}.container{max-width:1220px;margin:0 auto;padding:24px 20px 40px}.intro{padding:23px 0 24px}.eyebrow{letter-spacing:.16em;font-size:10px;font-weight:800;color:#698276;margin:0 0 12px}.intro h1{font-family:Georgia,serif;font-size:clamp(31px,4.1vw,52px);font-weight:500;line-height:1.06;letter-spacing:-.025em;margin:0 0 13px}.intro h1 em{font-style:normal;color:#7f9c82}.intro>p:last-child{max-width:730px;font-size:14px;color:var(--muted);line-height:1.65;margin:0}.toolbar{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}.toolbar label,.sidecard label,.dialogbody>label:not(.toggle){display:grid;gap:5px;color:#596962;font-size:11px;font-weight:750;letter-spacing:.02em}.toolbar select,.sidecard select,.dialogbody select{color:var(--text);border:1px solid var(--line);background:#fbfcfa;border-radius:8px;padding:9px;min-width:125px;font-size:13px;max-width:100%}.toolbar #surah{min-width:230px}.toolbar input[type=range]{width:125px;accent-color:var(--green);height:34px}.toggle{display:flex!important;align-items:center;gap:8px!important;font-size:13px!important;color:var(--text)!important;align-self:center;white-space:normal}.toggle input{accent-color:#266548;width:18px;height:18px}.statusline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:15px 3px}.coverage{color:#476e60}.layout{display:grid;grid-template-columns:minmax(0,1fr) 298px;gap:20px;align-items:start}.reading,.sidecard{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.reading{padding:22px;min-width:0}.reader-heading{border-bottom:1px solid #e6ece6;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 4px 20px}.reader-heading h2{font-family:Georgia,serif;margin:0;font-size:25px;font-weight:500}.arabic-basm{font:27px/2.0 Uthmani,'Traditional Arabic',serif;direction:rtl;color:#456a54}.verse{padding:23px 6px;border-bottom:1px solid #edf0ec}.verse:last-child{border-bottom:0}.verse-meta{display:flex;justify-content:space-between;align-items:center;gap:10px}.verse-num{border:1px solid #d8e1d5;border-radius:9px;color:#5c7661;font-size:11px;font-weight:700;padding:6px 9px;white-space:nowrap}.verse-buttons{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.verse-buttons button{font-size:11px;padding:7px 10px;border-radius:7px;border:1px solid #dfe5df;background:#f9fbf9;color:#52695c}.verse-arabic{font:var(--arSize)/2.25 Uthmani,'Traditional Arabic',serif;direction:rtl;unicode-bidi:isolate;text-align:right;overflow-wrap:normal;word-break:normal;white-space:normal;padding:12px 0 8px;color:#242e2a;-webkit-user-select:text;user-select:text;cursor:pointer}.verse-arabic.indopak{font-family:IndoPak,'Traditional Arabic',serif;line-height:2.6}.arabic-run{font:inherit;cursor:pointer}.arabic-run.active{background:#eadbb855;border-radius:3px}.verse-translation{margin:10px 0 0;padding:12px 15px;background:#f6f8f5;border-left:2px solid #b4c7b8;color:#395048;font-size:13px;line-height:1.85}.verse-translation.bengali{font-family:'Noto Sans Bengali','Nirmala UI',sans-serif}.translation-source{font-size:10px;font-weight:800;color:#6b8477;letter-spacing:.04em;margin:0 0 5px}.verse-translation p{margin:0}.verse-warning{font-size:11px;color:#9e762c;margin:7px 0 0}.empty{min-height:230px;display:grid;place-content:center;text-align:center;color:#789186;line-height:1.65}.sidebar{display:grid;gap:16px}.sidecard{padding:19px}.sidecard h3{margin:0 0 10px;font-size:15px}.sidehead{display:flex;justify-content:space-between;align-items:center;gap:15px}.textbtn{border:0;background:transparent;color:#587c63;font-size:12px}.hint,.small{font-size:11px;color:var(--muted);line-height:1.6}.sidecard label{margin-top:12px}.legend{display:grid;gap:4px;margin:15px 0}.legend-row{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center;padding:5px 0}.legend-row input[type=color]{border:0;background:transparent;width:27px;height:28px;padding:0;cursor:pointer}.legend-name{font-size:12px;font-weight:740}.legend-ar{display:block;color:#7b857f;font-size:12px;direction:rtl;text-align:left;font-family:serif;margin-top:1px}.secondary{background:#f3f6f3;border:1px solid #d8e3d9;color:var(--green);border-radius:8px;padding:9px 14px;font-size:12px;font-weight:700;margin-top:12px}.popup{position:fixed;z-index:90;width:min(390px,calc(100vw - 24px));max-height:min(75vh,570px);overflow-y:auto;bottom:26px;right:22px;background:white;border-radius:16px;padding:19px 20px 18px;box-shadow:0 22px 80px #081f1760;border:1px solid #d7e1d8}.popup[hidden]{display:none}.popup h3{margin:0 34px 2px 0;font-size:17px}.popup .ar-name{font:18px Uthmani,'Traditional Arabic',serif;color:#425f4c;margin:4px 0}.popup p{font-size:13px;line-height:1.65;margin:7px 0;color:#405449}.popup .bn-name{color:#617f65}.popup .more-rules{padding-top:8px;border-top:1px solid #edf0ee;margin-top:10px}.popup .tag{display:inline-block;font-size:10px;letter-spacing:.06em;font-weight:700;color:white;padding:4px 7px;border-radius:6px;margin-top:5px}.close{float:right;background:none;border:0;font-size:24px;color:#799087}.popup .rule-case{direction:rtl;text-align:right;line-height:1.6;font-family:Uthmani,serif}.dialogbody{max-width:520px;padding:22px;display:grid;gap:14px}dialog{border:1px solid #d4e0d5;border-radius:14px;max-width:min(96vw,580px);max-height:88vh;box-shadow:0 20px 90px #173f3445;padding:0}dialog::backdrop{background:#091e15aa}.dialogbody h2{margin:0;font-family:Georgia,serif}.dialogbody p{font-size:13px;color:var(--muted);line-height:1.6}.dialogbody code{font-size:11px;word-break:break-word}footer{display:flex;justify-content:space-between;gap:30px;align-items:start;padding:30px 0;color:#73857a;font-size:10px;line-height:1.6}footer p{max-width:480px;margin:0}
::highlight(tj-tafkheem-tarqeeq){color:var(--tafkhim)}::highlight(tj-letter-relations){color:var(--relation)}::highlight(tj-noon-tanween){color:var(--noon)}::highlight(tj-meem-sakinah){color:var(--meem)}::highlight(tj-mushaddadatan){color:var(--mushaddad)}::highlight(tj-madd){color:var(--madd)}::highlight(tj-qalqalah){color:var(--qalqalah)}
@media(max-width:850px){.layout{grid-template-columns:1fr}.sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar .sidecard:last-child{grid-column:1/-1}.reader-heading{align-items:start}.arabic-basm{font-size:22px}.popup{bottom:calc(env(safe-area-inset-bottom) + 9px);left:9px;right:9px;width:auto}}@media(max-width:550px){.container{padding:15px 11px 32px}.topbar{padding:13px 14px}.intro{padding:18px 5px}.toolbar{gap:9px;padding:11px}.toolbar>label{flex:1 1 43%}.toolbar #surah{min-width:0}.toolbar select{width:100%;min-width:0}.sidebar{grid-template-columns:1fr}.sidebar .sidecard:last-child{grid-column:auto}.reading{padding:13px}.reader-heading{padding:5px 3px 14px}.reader-heading h2{font-size:21px}.arabic-basm{font-size:17px;line-height:1.8}.verse-arabic{line-height:2.5}.verse{padding:18px 2px}.privacy{display:none}footer{display:block}footer p+ p{margin-top:8px}}