@import "https://fonts.googleapis.com/css2?family=Lateef:wght@400;500;600;700&family=Palanquin:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";
:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f5f2eb;--paper:#fefdfa;--paper-elevated:#fff;--paper-tafsir:#fbf8f0;--ink:#19231c;--ink-muted:#536057;--ink-subtle:#849187;--line:#e4decfa0;--line-strong:#d3cbba;--accent:#0f6b5f;--accent-dark:#094e45;--accent-soft:#e2f0ec;--accent-glow:#0f6b5f29;--green-badge:#10b981;--green-badge-dark:#047857;--gold:#b38528;--gold-dark:#8c6418;--gold-soft:#fcf6e8;--gold-line:#ecd9b3;--shadow-sm:0 4px 12px #231e140a;--shadow-card:0 20px 48px -12px #1c261e1f, 0 8px 20px -6px #1c261e0f;--shadow-modal:0 32px 72px -12px #141c1647;--radius-xs:4px;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-full:9999px;--font-sans:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;--font-arabic:"Lateef", "Amiri", Georgia, serif;--font-latin:"Palanquin", Georgia, serif}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg);width:100%;height:100%;color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}body{background-image:radial-gradient(at 10% 10%,#0f6b5f12 0,#0000 40%),radial-gradient(at 90% 90%,#b385280f 0,#0000 45%),linear-gradient(#f8f6f0 0%,#f3efe6 100%);background-attachment:fixed}button,input{font:inherit}.focus-shell{flex-direction:column;width:100%;max-width:820px;height:100dvh;margin:0 auto;display:flex;position:relative;overflow:hidden}.focus-topbar{-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line);z-index:20;background:#f8f6f0e6;flex-shrink:0;justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.surah-trigger-btn{background:var(--paper-elevated);border:1px solid var(--line-strong);border-radius:var(--radius-full);cursor:pointer;box-shadow:var(--shadow-sm);color:var(--ink);white-space:nowrap;align-items:center;gap:7px;padding:6px 14px 6px 11px;transition:all .2s;display:flex}.surah-trigger-btn:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);transform:translateY(-1px)}.surah-trigger-icon{font-size:1.05rem;line-height:1}.surah-trigger-title{color:var(--ink);font-size:.88rem;font-weight:700;line-height:1}.surah-trigger-divider{color:var(--line-strong);font-size:.8rem;line-height:1}.surah-trigger-sub{color:var(--accent);font-size:.78rem;font-weight:700;line-height:1}.surah-trigger-chevron{color:var(--ink-subtle);margin-left:-2px;font-size:.72rem;line-height:1}.topbar-arabic-btn{border-radius:var(--radius-full);cursor:pointer;background:0 0;border:1px solid #0000;align-items:center;padding:4px 10px;transition:all .2s;display:flex}.topbar-arabic-btn:hover{background:var(--paper-elevated);border-color:var(--line-strong);box-shadow:var(--shadow-sm)}.topbar-arabic-badge{font-family:var(--font-arabic);color:var(--gold);font-size:1.85rem;line-height:1}.progress-track{background:#ded8ca66;flex-shrink:0;width:100%;height:3px;position:relative;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--accent) 0%, var(--gold) 100%);height:100%;transition:width .35s cubic-bezier(.4,0,.2,1)}.focus-card-wrapper{touch-action:pan-y;cursor:grab;perspective:1200px;flex:1;justify-content:center;align-items:center;padding:10px 14px 14px;display:flex;position:relative;overflow:hidden}.focus-card-wrapper:active{cursor:grabbing}.focus-card-carousel{justify-content:center;align-items:center;width:100%;max-width:660px;height:100%;max-height:calc(100dvh - 74px);display:flex;position:relative}.carousel-card-slot{will-change:transform, opacity;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;inset:0}.focus-card-inner{width:100%;height:100%;transform-style:preserve-3d;cursor:pointer;transition:transform .55s cubic-bezier(.3,1.25,.6,1);position:relative}.focus-card-inner.is-flipped{transform:rotateY(180deg)}.focus-card-face{backface-visibility:hidden;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-lg);width:100%;height:100%;box-shadow:var(--shadow-card);flex-direction:column;padding:18px 20px 20px;display:flex;position:absolute;inset:0;overflow:hidden}.focus-card-front{transform:rotateY(0)}.focus-card-back{background:var(--paper-tafsir);border-color:var(--gold-line);transform:rotateY(180deg)}.card-scrollable-body{-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;flex:1;padding-right:0;overflow-y:auto}.card-scrollable-body::-webkit-scrollbar{width:0;height:0;display:none}.card-meta-row{flex-shrink:0;justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.card-ayah-circle{background:linear-gradient(135deg, var(--green-badge) 0%, var(--green-badge-dark) 100%);color:#fff;width:36px;height:36px;font-family:var(--font-sans);border:none;border-radius:50%;flex-shrink:0;place-items:center;font-size:1.02rem;font-weight:800;line-height:1;display:grid;box-shadow:0 4px 14px #10b98161}.card-ayah-circle.tafsir-circle{background:linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);border:none;box-shadow:0 4px 14px #b3852859}.tafsir-badge-group{align-items:center;gap:10px;display:flex}.tafsir-title-text{color:var(--gold-dark);font-size:.84rem;font-weight:700}.card-actions{align-items:center;gap:8px;display:flex}.card-action-icon-btn{border:1px solid var(--line-strong);border-radius:var(--radius-full);color:var(--ink-muted);cursor:pointer;background:0 0;padding:4px 10px;font-size:.72rem;font-weight:600;transition:all .15s}.card-action-icon-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.card-bismillah{font-family:var(--font-arabic);color:var(--accent-dark);text-align:center;border-bottom:1px dashed var(--line);margin:4px 0 14px;padding-bottom:10px;font-size:clamp(1.8rem,8vw,2.5rem);font-weight:600;line-height:1.8}.card-arabic-text{font-family:var(--font-arabic);color:#121a14;text-align:right;word-spacing:2px;direction:rtl;margin-bottom:16px;font-size:clamp(1.9rem,8.5vw,2.85rem);font-weight:500;line-height:2.1}.card-transliteration{font-family:var(--font-latin);color:var(--accent);margin-bottom:12px;font-size:clamp(1.05rem,4.2vw,1.2rem);font-weight:600;line-height:1.65}.mad{text-underline-offset:.22em;text-decoration-line:underline;text-decoration-color:#b38528d9;text-decoration-thickness:.14em}.ain{color:#1d4ed8;font-weight:800}.ain-vowel{display:inline-block;position:relative}.ain-vowel:after{content:"";background:currentColor;border-radius:50%;width:.18em;height:.18em;position:absolute;bottom:.06em;left:50%;transform:translate(-50%)}.card-translation{color:var(--ink-muted);margin-top:4px;padding:0 2px 8px;font-size:clamp(.92rem,3.8vw,1.02rem);line-height:1.65}.card-bottom-row{border-top:1px dashed var(--line);flex-shrink:0;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;padding-top:12px;display:flex}.card-surah-tag{color:var(--ink-subtle);min-width:0;font-size:.76rem;font-weight:700}.card-footer-actions{flex-wrap:wrap;flex-shrink:0;justify-content:flex-end;align-items:center;gap:6px;display:inline-flex}.card-footer-btn{background:var(--paper-elevated);border:1px solid var(--line-strong);border-radius:var(--radius-full);color:var(--accent-dark);cursor:pointer;box-shadow:var(--shadow-sm);align-items:center;gap:6px;padding:5px 10px;font-size:.78rem;font-weight:700;transition:all .2s;display:inline-flex}.card-footer-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px)}.card-audio-btn{color:var(--gold-dark)}.card-audio-btn.is-playing{background:var(--gold);border-color:var(--gold);color:#fff}.card-audio-btn:hover{background:var(--gold);border-color:var(--gold)}.card-loop-btn{color:#25635a}.card-loop-btn.is-active{color:#fff;background:#25635a;border-color:#25635a}.card-loop-btn:hover{background:#25635a;border-color:#25635a}.card-stop-btn{color:#9f342f}.card-stop-btn:hover{background:#b33a34;border-color:#b33a34}.footer-btn-icon{font-size:.95rem;line-height:1}@media (max-width:480px){.card-audio-btn.is-playing,.card-stop-btn{justify-content:center;width:32px;height:32px;padding:0}.card-audio-btn.is-playing span:last-child,.card-stop-btn span:last-child{display:none}.card-loop-btn.is-active span:last-child{font-size:0}.card-loop-btn.is-active span:last-child:after{content:"Stop";font-size:.78rem}}.tafsir-header-row{margin-bottom:8px}.tafsir-close-btn:hover{background:var(--gold-soft);color:var(--gold-dark);border-color:var(--gold)}.tafsir-body{scrollbar-width:none;-ms-overflow-style:none;padding:4px 2px 10px}.tafsir-body::-webkit-scrollbar{width:0;height:0;display:none}.tafsir-ayah-summary{border:1px solid var(--gold-line);border-radius:var(--radius-sm);background:#ffffffbf;margin-bottom:12px;padding:10px 12px}.tafsir-arabic-mini{font-family:var(--font-arabic);color:#1a241e;text-align:right;margin-bottom:4px;font-size:1.45rem;line-height:1.8}.tafsir-translation-mini{color:var(--ink-muted);font-size:.82rem;font-style:italic;line-height:1.5}.tafsir-divider{align-items:center;gap:10px;margin:12px 0 10px;display:flex}.tafsir-divider:before,.tafsir-divider:after{content:"";background:var(--gold-line);flex:1;height:1px}.tafsir-divider span{color:var(--gold-dark);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;font-weight:700}.tafsir-text-content{color:var(--ink);font-size:.93rem;line-height:1.75}.tafsir-paragraph{text-align:justify;margin-bottom:12px}.card-tafsir-back-btn{background:var(--paper-elevated);color:var(--gold-dark);border-color:var(--gold-line)}.card-tafsir-back-btn:hover{background:var(--gold);color:#fff;border-color:var(--gold)}.modal-backdrop{-webkit-backdrop-filter:blur(8px);z-index:100;background:#0e14108c;justify-content:center;align-items:flex-end;animation:.2s fadeInBackdrop;display:flex;position:fixed;inset:0}@keyframes fadeInBackdrop{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--paper-elevated);border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);width:100%;max-width:600px;max-height:85dvh;box-shadow:var(--shadow-modal);flex-direction:column;animation:.25s cubic-bezier(.2,.9,.2,1) slideUpModal;display:flex;overflow:hidden}@keyframes slideUpModal{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-header h2{color:var(--ink);font-size:1.15rem;font-weight:700}.modal-close-btn{background:var(--bg);border:1px solid var(--line);width:32px;height:32px;color:var(--ink-muted);cursor:pointer;border-radius:50%;place-items:center;font-size:.85rem;display:grid}.modal-close-btn:hover{color:var(--ink);background:#eae3d2}.jump-ayah-section{background:var(--bg);border-bottom:1px solid var(--line);padding:14px 20px}.jump-ayah-label{color:var(--ink-muted);margin-bottom:8px;font-size:.78rem;font-weight:700;display:block}.jump-ayah-grid{scrollbar-width:none;-ms-overflow-style:none;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px;max-height:120px;padding-right:2px;display:grid;overflow-y:auto}.jump-ayah-grid::-webkit-scrollbar{width:0;height:0;display:none}.jump-ayah-btn{border-radius:var(--radius-sm);background:var(--paper);border:1px solid var(--line);height:36px;color:var(--ink);cursor:pointer;font-size:.82rem;font-weight:700;transition:all .15s}.jump-ayah-btn:hover{border-color:var(--accent);color:var(--accent)}.jump-ayah-btn.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}.modal-search-box{padding:12px 20px 6px}.modal-search-box input{border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--bg);width:100%;height:44px;color:var(--ink);outline:none;padding:0 14px;font-size:.9rem}.modal-search-box input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:var(--paper-elevated)}.modal-surah-list{scrollbar-width:none;-ms-overflow-style:none;gap:8px;padding:10px 20px 24px;display:grid;overflow-y:auto}.modal-surah-list::-webkit-scrollbar{width:0;height:0;display:none}.modal-surah-item{border-radius:var(--radius-md);background:var(--paper);border:1px solid var(--line);color:var(--ink);text-align:left;cursor:pointer;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;padding:10px 14px;transition:all .15s;display:grid}.modal-surah-item:hover{border-color:var(--accent);background:var(--accent-soft)}.modal-surah-item.is-active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent)}.modal-surah-num{background:var(--bg);width:32px;height:32px;color:var(--accent);border-radius:50%;place-items:center;font-size:.8rem;font-weight:800;display:grid}.modal-surah-details strong{font-size:.92rem;display:block}.modal-surah-details small{color:var(--ink-muted);font-size:.75rem}.modal-surah-arabic{font-family:var(--font-arabic);color:var(--gold);font-size:1.5rem}@media (max-width:480px){.focus-card-face{padding:16px 16px 18px}.header-action-btn{display:none}}@media (min-width:640px){.modal-backdrop{align-items:center;padding:20px}.modal-content{border-radius:var(--radius-lg);max-height:75vh}}