:root{color-scheme:light;--bg: #f4eee4;--surface: #fffaf2;--surface-strong: #ffffff;--text: #1b1b1b;--muted: #6c645a;--accent: #c06b34;--accent-strong: #9a4b1d;--border: #e3d8c7;--shadow: 0 18px 40px rgba(34, 24, 14, .12);--arabic-size: 36px;--urdu-size: 20px;--player-bar-height: 84px}@font-face{font-family:IndoPak;src:local("AlQuran IndoPak by QuranWBW"),url(/fonts/quran/indopak/indopak-nastaleeq-waqf-lazim-v4.2.1.woff2) format("woff2"),url(/fonts/quran/indopak/indopak-nastaleeq-waqf-lazim-v4.2.1.woff) format("woff"),url(/fonts/quran/indopak/indopak-nastaleeq-waqf-lazim-v4.2.1.ttf) format("truetype");font-display:swap}@font-face{font-family:UthmanicHafs;src:local("KFGQPC HAFS Uthmanic Script"),url(/fonts/quran/uthmanic_hafs/UthmanicHafs1Ver18.woff2) format("woff2"),url(/fonts/quran/uthmanic_hafs/UthmanicHafs1Ver18.ttf) format("truetype");font-display:swap}@font-face{font-family:surahnames;src:url(/fonts/quran/surah-names/sura_names.woff2) format("woff2"),url(/fonts/quran/surah-names/sura_names.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}[data-theme=dark]{color-scheme:dark;--bg: #101112;--surface: #1b1c1e;--surface-strong: #212326;--text: #f2f2f2;--muted: #b7b2a8;--accent: #d48b57;--accent-strong: #e1a070;--border: #2a2c30;--shadow: 0 18px 40px rgba(0, 0, 0, .35)}*{box-sizing:border-box}body{margin:0;font-family:Readex Pro,system-ui,sans-serif;background:radial-gradient(circle at top,#fff7e8,#f4eee4 45%,#efe7db);color:var(--text)}[data-theme=dark] body{background:radial-gradient(circle at top,#1d1f22,#121314 55%,#0b0c0d)}body.player-visible{padding-bottom:var(--player-bar-height)}#app{max-width:1200px;margin:0 auto;padding:24px 20px 40px}.app-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.app-header-actions{display:flex;align-items:center;gap:10px}.mobile-appbar{display:none;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:20}.mobile-title{font-size:18px;font-weight:700}.mobile-actions{display:flex;gap:10px}.app-header h1{margin:0;font-size:26px;font-weight:600}.subtitle{margin:6px 0 0;color:var(--muted);font-size:14px}.layout{display:grid;grid-template-columns:280px 1fr;gap:20px}body.dashboard-mode .layout{grid-template-columns:1fr}body.dashboard-mode .sidebar{display:none}.sidebar{display:flex;flex-direction:column;gap:16px;height:85vh}.panel{background:var(--surface);border-radius:16px;padding:14px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.6);display:flex;flex-direction:column;min-height:0;overflow:scroll}.nav-panel{flex:1 1 auto;min-height:0}.bookmarks-panel{flex:0 0 28%;min-height:180px}.mode-toggle{display:inline-flex;gap:8px;background:#c06b341a;padding:6px;border-radius:999px;margin-bottom:14px;width:max-content}.mode-button{border:none;background:transparent;padding:8px 16px;border-radius:999px;font-weight:600;color:var(--muted);cursor:pointer}.mode-button.active{background:var(--accent);color:#fff}.list-header{font-weight:600;margin-bottom:10px}.list{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:4px;padding-top:1px}.list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-radius:12px;border:1px solid transparent;background:#fff9;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}.list-item.active{border-color:#c06b3459;background:#c06b341f}.list-item:hover{transform:translateY(-1px);border-color:#c06b344d}.list-meta{display:flex;flex-direction:column;gap:4px}.list-title{font-size:14px;font-weight:600}.list-sub{font-size:12px;color:var(--muted)}.list-play-button{flex-shrink:0}.reader{background:var(--surface);border-radius:18px;padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;min-height:80vh;position:relative}.dashboard.hidden,.reader-content.hidden{display:none}.dashboard{display:flex;flex-direction:column;gap:16px}.dash-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}.hero-card{background:#fff9;border-radius:14px;padding:14px 16px;border:1px solid var(--border);min-height:120px;display:flex;flex-direction:column;gap:6px;position:relative}.hero-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.hero-title{font-size:20px;font-weight:600}.hero-sub{font-size:12px;color:var(--muted)}.hero-action{align-self:flex-start;margin-top:6px;border-radius:999px;border:1px solid var(--border);background:var(--surface-strong);padding:6px 12px;font-size:12px;cursor:pointer}.dash-tabs{display:inline-flex;gap:8px;background:#c06b3414;padding:6px;border-radius:999px;width:fit-content}.dash-tab{border:none;background:transparent;padding:8px 16px;border-radius:999px;font-weight:600;color:var(--muted);cursor:pointer}.dash-tab.active{background:var(--accent);color:#fff}.dash-grid{display:none;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}.dash-grid.active{display:grid}.dash-card{border:1px solid var(--border);background:#ffffffb3;border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;cursor:pointer;text-align:left}.dash-badge{width:28px;height:28px;border-radius:8px;background:#c06b3426;color:var(--accent-strong);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}.dash-card-body{display:flex;flex-direction:column;gap:4px}.dash-title{font-size:13px;font-weight:600}.dash-sub{font-size:11px;color:var(--muted)}.dash-arabic{font-family:UthmanicHafs,serif;font-size:16px;color:#2f2418;text-align:right;direction:rtl;unicode-bidi:plaintext}.notice{min-height:0}.notice-banner{background:#ffd9a480;border:1px solid rgba(231,200,156,.8);padding:10px 12px;border-radius:12px;font-size:12px;color:var(--accent-strong);display:flex;flex-wrap:wrap;gap:10px;align-items:center}.notice-banner.error{background:#bf5a3c26;color:#a04330;border-color:#bf5a3c66}.toast-host{position:relative;min-height:0}.toast{background:#1b1b1be6;color:#fff;padding:8px 12px;border-radius:10px;font-size:12px;margin-bottom:6px;width:fit-content;transition:opacity .2s ease,transform .2s ease}.toast.hide{opacity:0;transform:translateY(-4px)}.selection-header{margin:6px 0 4px;min-height:86px}.selection-card{background:#fff9;border-radius:14px;padding:12px 14px;border:1px solid var(--border)}.selection-card h3{margin:0;font-size:18px}.selection-card p{margin:6px 0 0;color:var(--muted);font-size:13px}.selection-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.header-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface-strong);padding:8px 14px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer}.header-toggle svg{width:14px;height:14px;fill:currentColor}.verses{display:flex;flex-direction:column;gap:12px;padding-bottom:var(--player-bar-height);min-height:60vh}.reader-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#fffaf2bf;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;text-align:center;padding:16px;padding-top:8rem}.reader-overlay.hidden{display:none}.reader-disabled{pointer-events:none;-webkit-user-select:none;user-select:none}.spinner{width:28px;height:28px;border-radius:50%;border:3px solid rgba(192,107,52,.25);border-top-color:#c06b34cc;animation:spin .9s linear infinite}.overlay-title{font-weight:600}.overlay-sub{font-size:12px;color:var(--muted)}@keyframes spin{to{transform:rotate(360deg)}}.verse{border-radius:16px;padding:12px 14px;border:1px solid var(--border);background:var(--surface-strong);transition:background .2s ease,border-color .2s ease}.skeleton-card,.skeleton-verse{background:#fff9;border:1px solid var(--border);position:relative;overflow:hidden}.skeleton-line{height:12px;background:linear-gradient(90deg,#e3d8c740,#e3d8c7b3,#e3d8c740);background-size:200% 100%;border-radius:8px;animation:shimmer 1.2s ease-in-out infinite}.skeleton-title{width:60%;height:16px;margin-bottom:10px}.skeleton-subtitle{width:35%}.skeleton-verse{display:grid;gap:10px}.skeleton-action{width:90px}.skeleton-meta{width:120px}.skeleton-arabic{height:24px;width:80%}.skeleton-urdu{height:16px;width:65%}@keyframes shimmer{0%{background-position:0% 50%}to{background-position:200% 50%}}.surah-separator{margin:18px 0 6px;padding:12px 14px;border-radius:14px;background:#c06b341f;border:1px dashed rgba(192,107,52,.4);font-size:13px;color:var(--accent-strong);display:flex;flex-direction:column;gap:4px}.verse.active{background:#c06b341f;border-left:4px solid var(--accent)}.verse-actions{display:flex;gap:8px;align-items:center;margin-bottom:8px}.icon-button{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface-strong);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.verse-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:8px}.playing-indicator{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-strong);opacity:0;transition:opacity .2s ease}.verse.active .playing-indicator{opacity:1}.verse-arabic{text-align:right}.qr-arabic{font-family:UthmanicHafs,serif;font-size:var(--arabic-size);font-weight:400;line-height:2.05;color:#2f2418;text-align:right;word-spacing:.06em;letter-spacing:0;text-rendering:optimizeLegibility}.qr-arabic.is-indopak{font-family:IndoPak,UthmanicHafs,Amiri Quran,Amiri,serif;line-height:2.15}.qr-arabic.is-tajweed{font-family:UthmanicHafs,Amiri Quran,Amiri,serif}.qr-surah-title{font-size:34px;font-weight:600;letter-spacing:.01em}.qr-surah-glyph{font-family:surahnames,serif;font-size:48px;line-height:1}.verse-urdu{font-family:Noto Nastaliq Urdu,serif;font-size:var(--urdu-size);line-height:2;direction:rtl;text-align:right;margin-top:8px;color:#5a4b3a}.verse-arabic .tajweed{color:#c06b34}.verse-arabic .ham_wasl{color:#7c6f65}.verse-arabic .madda_normal,.verse-arabic .madda_permissible,.verse-arabic .madda_necessary{color:#3b6fb0}.verse-arabic .idgham_wo_ghunnah,.verse-arabic .idgham_ghunnah,.verse-arabic .ghunnah{color:#8b5fa3}.verse-arabic .ikhafa,.verse-arabic .ikhafa_shafawi{color:#c7922b}.verse-arabic .iqlab,.verse-arabic .idgham_shafawi{color:#2f7e9d}.verse-arabic .qalqalah{color:#b2473a}.word{display:inline-block;padding:2px 6px;border-radius:8px;transition:background .25s ease,box-shadow .25s ease,color .25s ease;unicode-bidi:isolate}.bookmark-list{display:flex;flex-direction:column;gap:8px}.bookmark-row{display:flex;gap:8px;align-items:center}.bookmark-row .bookmark-item{flex:1}.bookmark-item{text-align:left;border-radius:12px;border:1px solid var(--border);background:var(--surface-strong);padding:10px 12px;display:flex;flex-direction:column;gap:4px;cursor:pointer;font-size:12px}.bookmark-time{color:var(--muted);font-size:11px}.empty{margin:0;font-size:12px;color:var(--muted)}button{transition:transform .15s ease,box-shadow .15s ease}button:hover{transform:translateY(-1px)}button:disabled{opacity:.6;cursor:not-allowed;transform:none}.player-bar{position:fixed;left:0;right:0;bottom:0;height:var(--player-bar-height);background:#fffaf2eb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--border);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"left center right";align-items:center;gap:16px;padding:12px 24px;z-index:50}[data-theme=dark] .player-bar{background:#1b1c1ef2}.player-bar.hidden{display:none}.player-info{display:flex;flex-direction:column;gap:4px;min-width:0}.player-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.player-sub{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-zone{display:flex;align-items:center}.player-zone-left{grid-area:left;min-width:0;justify-self:start}.player-zone-center{grid-area:center;justify-content:center;justify-self:center}.player-zone-right{grid-area:right;justify-content:flex-end;gap:10px;justify-self:end}.player-controls{display:flex;gap:8px;flex-wrap:nowrap;justify-content:center;align-items:center}.player-icon-button{position:relative;width:44px;height:44px;border-radius:14px;border:1px solid var(--border);background:var(--surface-strong);color:var(--accent-strong);display:inline-flex;align-items:center;justify-content:center;padding:0}.player-icon-button svg,.player-utility svg{width:20px;height:20px;fill:currentColor}.player-icon-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.player-icon-button.active{background:#c06b3426;border-color:#c06b3466}.player-icon-button.danger{background:#b84b3a;color:#fff;border-color:transparent}.player-icon-button .tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(6px);background:#21160aeb;color:#fff6eb;padding:6px 10px;border-radius:8px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}.player-icon-button:hover .tooltip{opacity:1;transform:translate(-50%) translateY(0)}.player-utility{border:1px solid var(--border);background:var(--surface-strong);color:var(--text);border-radius:12px;height:44px;padding:0 12px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}.player-utility.icon-only{width:44px;padding:0;color:var(--accent-strong)}.speed-control{position:relative;display:flex;align-items:center}.speed-button{min-width:44px}.speed-popover{position:absolute;bottom:calc(100% + 8px);right:0;background:var(--surface-strong);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:8px 0;min-width:160px;display:none;z-index:80}.speed-popover.open{display:block}.speed-option{width:100%;padding:8px 14px;background:transparent;border:none;display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer;text-align:left}.speed-option:hover{background:#c06b341f}.speed-option .check{width:16px;color:var(--accent-strong)}.speed-option.selected{font-weight:600}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:60}.settings-overlay.hidden{display:none}.settings-drawer{position:fixed;right:0;top:0;height:100vh;width:min(360px,90vw);background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow);z-index:61;padding:20px 18px;display:flex;flex-direction:column;gap:16px}.settings-drawer.hidden{display:none}.settings-header{display:flex;align-items:center;justify-content:space-between}.settings-header h3{margin:0;font-size:18px}.settings-content{display:flex;flex-direction:column;gap:18px}.settings-section h4{margin:0 0 10px;font-size:14px;color:var(--muted)}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:13px}.settings-row select,.settings-row button{border-radius:10px;border:1px solid var(--border);background:var(--surface-strong);padding:6px 10px;font-family:inherit;cursor:pointer;color:var(--text)}.pill-group{display:flex;gap:8px;flex-wrap:wrap}.pill{border-radius:999px;padding:8px 14px;border:1px solid var(--border);background:var(--surface-strong);font-size:12px;cursor:pointer}.pill.active{background:#c06b3433;border-color:#c06b3480;font-weight:600}.settings-row .toggle-switch{position:relative;width:44px;height:24px;padding:0;border-radius:999px;background:#c06b342e;border:1px solid rgba(192,107,52,.4);display:inline-flex;align-items:center;justify-content:flex-start;box-sizing:border-box;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.settings-row .toggle-switch .toggle-dot{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:999px;transition:transform .2s ease;box-shadow:0 2px 6px #22180e33}.settings-row .toggle-switch.on{background:#c06b3473;border-color:#c06b3499}.settings-row .toggle-switch.on .toggle-dot{transform:translate(22px)}.stepper{display:inline-flex;align-items:center;gap:6px}.toggle-pill{border-radius:999px;padding:6px 14px}.mobile-nav-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;z-index:70}.mobile-nav-overlay.hidden{display:none}.mobile-nav{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-radius:18px 18px 0 0;box-shadow:var(--shadow);z-index:71;padding:14px 16px 18px;max-height:85vh;display:flex;flex-direction:column;gap:12px}.mobile-nav.hidden{display:none}.mobile-nav-header{display:flex;align-items:center;justify-content:space-between}.mobile-tabs{display:flex;gap:8px}.tab-button{flex:1;border:1px solid var(--border);background:var(--surface-strong);border-radius:999px;padding:8px 10px;font-size:12px;cursor:pointer}.tab-button.active{background:#c06b3433;border-color:#c06b3480;font-weight:600}.mobile-tab-panels{flex:1;overflow:hidden}.mobile-tab-panel{display:none;max-height:70vh;overflow-y:auto;padding-right:4px}.mobile-tab-panel.active{display:block}@media (max-width: 980px){:root{--player-bar-height: 120px}.layout{grid-template-columns:1fr}.player-bar{height:auto;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"left right" "center center";gap:10px;padding:12px 16px}.player-controls{width:100%;justify-content:center;flex-wrap:wrap}}@media (max-width: 900px){.dash-hero{grid-template-columns:1fr}.hero-card{min-height:auto}}@media (max-width: 640px){.dash-grid{grid-template-columns:1fr}}@media (max-width: 768px){.app-header{display:none}.mobile-appbar{display:flex}#app{padding:0 0 40px}.layout{padding:0 12px}.sidebar{display:none}.reader{padding:14px}}@media (max-width: 720px){:root{--player-bar-height: 130px}}@media (hover: none){.player-icon-button .tooltip{display:none}}