@import "https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Scheherazade+New:wght@400;700&family=Noto+Naskh+Arabic:wght@400;700&family=Lateef&family=Reem+Kufi:wght@400;700&family=Aref+Ruqaa:wght@400;700&family=Inter:wght@400;500;600&display=swap";@font-face{font-family:KFGQPC Uthmanic Hafs;src:url(/fonts/UthmanicHafs.woff2)format("woff2");font-display:swap}:root{--bg:#0f1115;--panel:#171a21;--panel-hover:#1f2530;--border:#2a313d;--text:#e8eaed;--muted:#9aa3b2;--accent:#2dd4a7;--accent-soft:#2dd4a726;--arabic-font:"KFGQPC Uthmanic Hafs", "Amiri", serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5}button{cursor:pointer;font-family:inherit}.app{flex-direction:column;height:100dvh;display:flex}.player{flex-direction:column;flex:1;min-height:0;display:flex}.player-top{text-align:center;flex-direction:column;align-items:center;gap:.5rem;padding:1.25rem 1rem 0;display:flex}.player-top-arabic{font-family:var(--arabic-font);color:var(--text);cursor:pointer;background:0 0;border:none;padding:0;font-size:1.4rem}.player-top-arabic:hover{color:var(--accent)}.player-top-english{color:var(--muted);font-size:.8rem}.top-link{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;padding:0}.top-link:hover{color:var(--text);text-decoration:underline}.top-link.counter{color:var(--accent)}.top-sep{color:var(--muted);margin:0 .5rem}.player-pills{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.pill{background:var(--panel);border:1px solid var(--border);max-width:16rem;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;border-radius:999px;align-items:center;gap:.35rem;padding:.3rem .75rem;font-size:.78rem;transition:background .15s,border-color .15s,color .15s;display:inline-flex;overflow:hidden}.pill>svg{flex-shrink:0}.pill:hover{background:var(--panel-hover);border-color:var(--accent);color:var(--text)}.pill-icon{padding:.3rem .55rem}.pill.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.pill-split{background:var(--panel);border:1px solid var(--border);color:var(--muted);border-radius:999px;align-items:stretch;font-size:.78rem;transition:border-color .15s;display:inline-flex;overflow:hidden}.pill-split.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.pill-split-main{color:inherit;font:inherit;white-space:nowrap;cursor:pointer;background:0 0;border:none;align-items:center;gap:.35rem;padding:.3rem .75rem;display:inline-flex}.pill-split-main:hover{background:var(--panel-hover)}.pill-split.active .pill-split-main:hover{background:color-mix(in srgb, var(--accent) 20%, transparent)}.pill-split-divider{background:var(--border);flex-shrink:0;width:1px}.pill-split.active .pill-split-divider{background:var(--accent);opacity:.4}.pill-split-eye{color:inherit;cursor:pointer;background:0 0;border:none;align-items:center;padding:.3rem .6rem;transition:background .15s;display:inline-flex}.pill-split-eye:hover{background:var(--panel-hover)}.pill-split.active .pill-split-eye:hover{background:color-mix(in srgb, var(--accent) 20%, transparent)}.pill-split-eye.active{opacity:.45}.stage{flex:1;justify-content:center;align-items:center;min-height:0;padding:1.5rem clamp(1rem,5vw,4rem);display:flex;overflow-y:auto}@keyframes verse-in{0%{opacity:0}to{opacity:1}}.subtitle{text-align:center;--fit:1;max-width:50rem;animation:.2s verse-in}.subtitle-arabic{font-family:var(--arabic-font);font-size:calc(clamp(2rem, 6vw, 3.6rem) * var(--fit));margin:0 0 calc(1.75rem * var(--fit));line-height:2.1}.subtitle-arabic.font-qcf,.subtitle-arabic.font-tajweed{line-height:1.9}.subtitle-arabic.font-indopak{line-height:2.6}.subtitle-arabic.font-tajweed .word{font-palette:--qcf-dark}.subtitle-arabic .word{transition:opacity .2s,color .2s,text-shadow .2s}.subtitle-arabic .word-dim{opacity:.4}.subtitle-arabic .word-active{color:var(--accent);text-shadow:0 0 24px var(--accent-soft)}.subtitle-arabic .word-tappable{cursor:pointer}@media (hover:hover){.subtitle-arabic .word-tappable:hover{color:var(--accent);text-shadow:0 0 24px var(--accent-soft);opacity:1}}.subtitle-arabic.wbw .word{vertical-align:top;flex-direction:column;align-items:center;margin:0 .25em .4em;display:inline-flex}.subtitle-arabic .word-gloss{font-family:Inter,system-ui,sans-serif;font-size:calc(clamp(.7rem, 1.7vw, .95rem) * var(--fit));color:var(--muted);max-width:9em;margin-top:.35em;line-height:1.35}.subtitle-arabic .word-gloss[dir=rtl]{font-family:Noto Naskh Arabic,serif}.subtitle-arabic .word-active .word-gloss{color:var(--accent)}.subtitle-arabic .word-gloss-hidden{visibility:hidden}.subtitle-english{font-size:calc(clamp(1rem, 2.5vw, 1.4rem) * var(--fit));color:var(--muted);margin:0;line-height:1.7}.status{text-align:center;color:var(--muted)}.status.error{color:#ff8d8d}.controls{padding:1.25rem clamp(.4rem, 1.5vw, 1rem) calc(1.25rem + env(safe-area-inset-bottom));grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(.25rem,1.2vw,.85rem);display:grid}.controls-side{align-items:center;gap:clamp(.25rem,1.2vw,.85rem);display:flex}.controls-left{justify-self:end}.controls-right{justify-self:start}.control-btn{background:var(--panel);border:1px solid var(--border);width:clamp(2.4rem,11vw,3.25rem);height:clamp(2.4rem,11vw,3.25rem);color:var(--text);border-radius:50%;place-items:center;transition:background .15s,transform .1s;display:grid}.control-btn:hover:not(:disabled){background:var(--panel-hover)}.control-btn:active:not(:disabled){transform:scale(.94)}.control-btn:disabled{opacity:.35;cursor:not-allowed}.control-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.control-btn.play{background:var(--accent);border-color:var(--accent);color:#06231b;width:clamp(3.25rem,14vw,4.5rem);height:clamp(3.25rem,14vw,4.5rem)}.control-btn.play:hover:not(:disabled){background:var(--accent);filter:brightness(1.06)}.control-btn svg{width:clamp(1.1rem,5vw,1.5rem);height:clamp(1.1rem,5vw,1.5rem)}.control-btn.play svg{fill:currentColor;width:clamp(1.5rem,6.5vw,2rem);height:clamp(1.5rem,6.5vw,2rem)}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:.75s linear infinite spin}.control-btn[data-tooltip]{position:relative}.control-btn[data-tooltip]:after{content:attr(data-tooltip);background:var(--panel-hover);border:1px solid var(--border);color:var(--text);white-space:nowrap;opacity:0;pointer-events:none;border-radius:8px;padding:.3rem .6rem;font-size:.78rem;transition:opacity .12s;position:absolute;bottom:calc(100% + .5rem);left:50%;transform:translate(-50%)}.control-btn[data-tooltip]:hover:not(:disabled):after{opacity:1}.progress{align-items:center;gap:.6rem;width:100%;max-width:50rem;margin:0 auto;padding:0 clamp(1rem,5vw,4rem);display:flex}.progress-time{color:var(--muted);font-variant-numeric:tabular-nums;text-align:center;min-width:2.6rem;font-size:.7rem}.progress-bar{appearance:none;background:linear-gradient(to right, var(--accent) var(--pct,0%), var(--border) var(--pct,0%));cursor:pointer;border-radius:999px;flex:1;height:6px}.progress-bar:disabled{opacity:.5;cursor:not-allowed}.progress-bar::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:14px;height:14px}.progress-bar::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px}.menu-bar{display:none}.fab-stack{z-index:20;flex-direction:column;gap:.75rem;display:flex;position:fixed;bottom:7.5rem;right:1.25rem}.fab{background:var(--panel);border:1px solid var(--border);width:3.25rem;height:3.25rem;color:var(--text);border-radius:50%;place-items:center;transition:transform .12s,background .15s,border-color .15s;display:grid;box-shadow:0 6px 18px #0006}.fab:hover:not(:disabled){background:var(--panel-hover);border-color:var(--accent);transform:translateY(-2px)}.fab:disabled{opacity:.35;cursor:not-allowed}.fab.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.fab svg{width:1.4rem;height:1.4rem}.fab[data-tooltip]:after{content:attr(data-tooltip);background:var(--panel-hover);border:1px solid var(--border);color:var(--text);white-space:nowrap;opacity:0;pointer-events:none;border-radius:8px;padding:.3rem .6rem;font-size:.78rem;transition:opacity .12s;position:absolute;top:50%;right:calc(100% + .6rem);transform:translateY(-50%)}.fab[data-tooltip]{position:relative}.fab[data-tooltip]:hover:after{opacity:1}.sheet-root{z-index:50;pointer-events:none;position:fixed;inset:0}.sheet-root.open{pointer-events:auto}.sheet-backdrop{opacity:0;background:#0000008c;transition:opacity .25s;position:absolute;inset:0}.sheet-root.open .sheet-backdrop{opacity:1}.sheet-panel{background:var(--bg);border-top:1px solid var(--border);border-radius:18px 18px 0 0;flex-direction:column;width:100%;max-width:42rem;max-height:80dvh;transition:transform .28s cubic-bezier(.22,1,.36,1);display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%)translateY(100%)}.sheet-root.open .sheet-panel{transform:translate(-50%)translateY(0)}.sheet-panel.tall{height:80dvh}.sheet-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex}.sheet-title{font-weight:600}.sheet-close{background:var(--panel);border:1px solid var(--border);width:2.25rem;height:2.25rem;color:var(--text);border-radius:50%;place-items:center;display:grid}.sheet-close:hover{background:var(--panel-hover)}.sheet-body{flex:1;min-height:0;padding:1rem 1.25rem 1.5rem;overflow-y:auto}.surah-list,.translation-list-root{flex-direction:column;height:100%;min-height:0;display:flex}.search-sticky{flex:none;margin-bottom:1rem}.surah-grid,.translation-scroll{flex:auto;min-height:0;overflow-y:auto}.search{background:var(--panel);border:1px solid var(--border);width:100%;color:var(--text);border-radius:10px;padding:.75rem 1rem;font-size:1rem}.search:focus{border-color:var(--accent);outline:none}.surah-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.6rem;margin:0;padding:0;list-style:none;display:grid}.surah-card{background:var(--panel);border:1px solid var(--border);width:100%;color:var(--text);text-align:left;border-radius:12px;align-items:center;gap:.75rem;padding:.75rem .9rem;transition:background .15s,border-color .15s;display:flex}.surah-card:hover{background:var(--panel-hover);border-color:var(--accent)}.surah-card.active{border-color:var(--accent)}.surah-card.active .surah-number{background:var(--accent);color:#06231b}.surah-number{background:var(--accent-soft);width:2rem;height:2rem;color:var(--accent);border-radius:8px;flex:none;place-items:center;font-size:.85rem;font-weight:600;display:grid}.surah-meta{flex-direction:column;flex:1;min-width:0;display:flex}.surah-english{font-weight:600}.surah-translation{color:var(--muted);font-size:.8rem}.surah-arabic{font-family:var(--arabic-font);font-size:1.05rem}.reciter-list,.translation-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.translation-group+.translation-group{margin-top:1.25rem}.translation-group-label{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:.75rem;display:flex}.wbw-badge{letter-spacing:.04em;background:var(--accent-soft);color:var(--accent);text-transform:none;border-radius:5px;align-items:center;gap:.25rem;padding:.12rem .4rem;font-size:.62rem;font-weight:600;display:inline-flex}.reciter-item{background:var(--panel);border:1px solid var(--border);width:100%;color:var(--text);text-align:left;border-radius:12px;justify-content:space-between;align-items:center;padding:.85rem 1rem;font-size:1rem;transition:background .15s,border-color .15s;display:flex}.reciter-item:hover{background:var(--panel-hover);border-color:var(--accent)}.reciter-item.active{border-color:var(--accent);color:var(--accent)}.reciter-item-icons{flex-shrink:0;align-items:center;gap:.35rem;display:flex}.default-star{color:var(--accent);opacity:.6}.font-panel{flex-direction:column;display:flex}.font-options{flex-direction:column;gap:.5rem;margin:0 0 1.25rem;padding:0;list-style:none;display:flex}.font-option{background:var(--panel);border:1px solid var(--border);width:100%;color:var(--text);text-align:left;border-radius:12px;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;transition:background .15s,border-color .15s;display:flex}.font-option:hover{background:var(--panel-hover);border-color:var(--accent)}.font-option.active{border-color:var(--accent);color:var(--accent)}.font-option-text{flex-direction:column;gap:.15rem;display:flex}.font-option-label{font-size:1rem;font-weight:600}.font-option-desc{color:var(--muted);font-size:.8rem}.font-option-icons{flex-shrink:0;align-items:center;gap:.35rem;display:flex}.tajweed-legend-title{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .6rem;font-size:.75rem}.tajweed-legend{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.tajweed-legend li{color:var(--muted);align-items:center;gap:.5rem;font-size:.85rem;display:flex}.tajweed-swatch{border-radius:3px;flex:none;width:.9rem;height:.9rem}.verse-list{border:1px solid var(--border);border-radius:12px;margin:0;padding:0;list-style:none}.verse-item{border-bottom:1px solid var(--border);cursor:pointer;align-items:flex-start;gap:.85rem;padding:1rem;transition:background .12s;display:flex}.verse-item:last-child{border-bottom:none}.verse-item:hover{background:var(--panel)}.verse-item.active{background:var(--accent-soft)}.verse-item-num{background:var(--panel);width:1.75rem;height:1.75rem;color:var(--muted);border-radius:6px;flex:none;place-items:center;font-size:.8rem;display:grid}.verse-item.active .verse-item-num{background:var(--accent);color:#06231b}.verse-item-text{flex-direction:column;flex:1;gap:.6rem;min-width:0;display:flex}.verse-item-arabic{text-align:right;font-family:var(--arabic-font);font-size:1.6rem;line-height:2;display:block}.verse-item-english{text-align:left;color:var(--muted);font-size:.95rem;line-height:1.5;display:block}.menu-section-label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .5rem;font-size:.75rem}.menu-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.menu-section-label-secondary{margin-top:1.25rem}.menu-item{background:var(--panel);border:1px solid var(--border);width:100%;color:var(--text);text-align:left;border-radius:12px;align-items:center;gap:.75rem;padding:.85rem 1rem;font-size:1rem;transition:background .15s,border-color .15s;display:flex}.menu-item:hover{background:var(--panel-hover);border-color:var(--accent)}.menu-item.active{border-color:var(--accent);color:var(--accent)}.menu-item:disabled{opacity:.35;cursor:not-allowed}.powered-by-bar{bottom:calc(1rem + env(safe-area-inset-bottom));z-index:10;align-items:center;gap:.35rem;display:flex;position:fixed;left:1.25rem}.powered-by{color:var(--muted);opacity:.6;font-size:.72rem;text-decoration:none;transition:opacity .15s,color .15s}.powered-by:hover{opacity:1;color:var(--text)}.about-btn{color:var(--muted);opacity:.6;background:0 0;border:none;align-items:center;padding:0;transition:opacity .15s,color .15s;display:flex}.about-btn:hover{opacity:1;color:var(--accent)}.sheet-footer{padding:.85rem 1.25rem calc(1rem + env(safe-area-inset-bottom));border-top:1px solid var(--border);justify-content:center;display:flex}.sheet-footer .powered-by-bar{position:static}.sheet-footer .powered-by{font-size:.78rem}.about-intro{color:var(--text);margin:0 0 1.25rem;line-height:1.6}.about-features{flex-direction:column;gap:.75rem;margin:0 0 1.25rem;padding:0;list-style:none;display:flex}.about-features li{color:var(--text);align-items:flex-start;gap:.7rem;font-size:.92rem;line-height:1.45;display:flex}.about-features li svg{color:var(--accent);flex:none;margin-top:.1rem}.about-credits{color:var(--muted);margin:.4rem 0 0;font-size:.85rem;line-height:1.5}.about-credits a{color:var(--accent);text-decoration:none}.about-credits a:hover{text-decoration:underline}.bookmark-panel{flex-direction:column;gap:1rem;display:flex}.bookmark-toggle{background:var(--panel);border:1px solid var(--border);width:100%;color:var(--text);text-align:left;border-radius:12px;align-items:center;gap:.75rem;padding:.85rem 1rem;font-size:1rem;transition:background .15s,border-color .15s;display:flex}.bookmark-toggle:hover{background:var(--panel-hover);border-color:var(--accent)}.bookmark-toggle.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.bookmark-empty{color:var(--muted);text-align:center;margin:0;padding:1rem 0;font-size:.9rem}.bookmark-section-label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0;font-size:.75rem}.bookmark-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.bookmark-item{background:var(--panel);border:1px solid var(--border);border-radius:12px;align-items:center;gap:.5rem;transition:border-color .15s;display:flex;overflow:hidden}.bookmark-item.current{border-color:var(--accent)}.bookmark-item-nav{color:var(--text);text-align:left;cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;align-items:flex-start;gap:.25rem;min-width:0;padding:.75rem 1rem;display:flex}.bookmark-item-nav:hover{background:var(--panel-hover)}.bookmark-item-arabic{width:100%;font-family:var(--arabic-font);text-align:right;font-size:1.4rem;line-height:2;display:block}.bookmark-item-translation{width:100%;color:var(--muted);font-size:.9rem;line-height:1.5;display:block}.bookmark-item-meta{color:var(--muted);font-size:.85rem}.bookmark-item.current .bookmark-item-meta{color:var(--accent)}.bookmark-item-remove{border:none;border-left:1px solid var(--border);width:2.75rem;height:100%;color:var(--muted);cursor:pointer;background:0 0;flex:none;place-items:center;padding:.75rem 0;transition:color .15s,background .15s;display:grid}.bookmark-item-remove:hover{color:#ff8d8d;background:var(--panel-hover)}.tafsir-picker{flex-direction:column;gap:.5rem;margin:0 0 1rem;padding:0;list-style:none;display:flex}.tafsir-range{color:var(--muted);margin:0 0 .75rem;font-size:.85rem}.tafsir-body{font-family:"Inter", system-ui, -apple-system, var(--arabic-font);color:var(--text);word-wrap:break-word;overflow-wrap:anywhere;font-size:.98rem;line-height:1.8}.tafsir-body h1,.tafsir-body h2,.tafsir-body h3,.tafsir-body h4{color:var(--accent);margin:1.25rem 0 .5rem;font-size:1.05rem;line-height:1.4}.tafsir-body h1:first-child,.tafsir-body h2:first-child,.tafsir-body h3:first-child{margin-top:0}.tafsir-body p{margin:0 0 .85rem}.tafsir-body ul,.tafsir-body ol{margin:0 0 .85rem;padding-inline-start:1.5rem}@media (width<=640px){.fab-stack,.powered-by-bar:not(.sheet-footer .powered-by-bar){display:none}.menu-bar{top:calc(.75rem + env(safe-area-inset-top));z-index:20;display:block;position:fixed;right:.75rem}.control-hide-mobile{display:none}}