:root{--ink:#173c32;--deep:#123d34;--deep2:#1f5545;--muted:#677b73;--cream:#f7f6f2;--paper:#fffefa;--line:#e7e9e0;--gold:#b79c62;--soft:#eff4ee;--shadow:0 12px 42px rgba(28,58,44,.055);--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Tahoma,"Arial",sans-serif;font-size:15px;line-height:1.7;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}a{color:var(--deep2)}:focus-visible{outline:3px solid #ad9464;outline-offset:3px}svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}[hidden]{display:none!important}.shell{max-width:1170px;margin-inline:auto;padding-inline:26px}.ambient{position:fixed;width:370px;height:370px;border-radius:50%;pointer-events:none;filter:blur(100px);opacity:.36;z-index:-1}.ambient-a{background:#dce9df;right:-130px;top:130px}.ambient-b{background:#f0e2bc;left:-140px;top:390px}
.topbar{background:rgba(255,254,251,.87);border-bottom:1px solid #e8eadf;backdrop-filter:blur(22px);position:sticky;top:0;z-index:30}.topbar-inner{height:83px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none;color:var(--ink)}.brand-mark{width:44px;height:44px;border:1px solid #d9c18b;display:grid;place-items:center;border-radius:13px;font-size:29px;color:#b29861;background:#fcf8ef}.brand-text{display:flex;flex-direction:column;line-height:1.3}.brand-text b{font-size:23px;letter-spacing:-1px}.brand-text small{font-size:10px;color:var(--muted);font-weight:500;margin-top:3px}.desktop-nav{display:flex;align-items:center;gap:7px}.nav-link{border:0;background:transparent;border-radius:11px;padding:10px 17px;color:#66776f;font-weight:700;transition:background .18s,color .18s}.nav-link:hover{background:#f1f4ed}.nav-link.active{background:#e8f0e8;color:var(--deep)}.top-actions{display:flex;align-items:center;gap:16px}.local-badge{font-size:11px;color:#678176;white-space:nowrap}.status-dot{display:inline-block;width:7px;height:7px;background:#4c9474;border-radius:50%;margin-inline-end:6px}.main{padding-top:26px}.tab-view{display:none;animation:enter .35s var(--ease)}.tab-view.visible{display:block}@keyframes enter{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.hero{text-align:center;padding:65px 0 31px}.hero-overline{color:#8d784f;font-size:12px;font-weight:700;letter-spacing:.2px}.mini-spark{color:#ad925d;font-size:16px;margin-inline-end:4px}.hero h1,.inner-hero h1{font-size:clamp(29px,4.1vw,49px);letter-spacing:-1.8px;line-height:1.35;margin:14px 0 14px;font-weight:800}.hero h1 em{font-style:normal;color:#55836e}.hero p{font-size:16px;color:#64786d;margin:0}.hero-metrics{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:28px;font-size:12px;color:#879188}.hero-metrics i{background:#c9ccbf;width:3px;height:3px;border-radius:50%}
.search-card{background:#fff;max-width:840px;margin:0 auto;border:1px solid #e3e8dc;border-radius:22px;padding:27px 31px 20px;box-shadow:0 14px 48px rgba(23,58,43,.065);position:relative}.search-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.search-label label{font-weight:800;font-size:15px}.search-label span{font-size:11px;color:#8a9b8b}.search-input-wrap{border:1.5px solid #dce5d9;border-radius:12px;display:flex;align-items:center;gap:13px;padding:0 17px;background:#fdfefb;transition:border .2s,box-shadow .2s}.search-input-wrap:focus-within{border-color:#779b80;box-shadow:0 0 0 4px #e7f0e7}.search-input-wrap svg{color:#8da093;width:21px;height:21px}.search-input-wrap input{height:63px;width:100%;border:0;outline:none;background:transparent;color:var(--ink);font-size:16px;min-width:0}.search-input-wrap input::placeholder{color:#adb7ad}.inline-clear{background:none;border:none;font-size:27px;color:#92a499}.mode-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}.mode-chip{background:#f8faf7;color:#61786b;border:1px solid #e6ebe4;border-radius:10px;padding:8px 13px;white-space:nowrap;font-size:12px;font-weight:700;transition:all .2s}.mode-chip:hover{border-color:#a6bea7}.mode-chip.selected{background:#e9f2e8;border-color:#b6ceb5;color:#1c573c}.search-footer{display:flex;align-items:center;justify-content:space-between;margin-top:23px;gap:14px}.link-control{color:#668576;background:none;border:none;padding:10px 0;font-size:12px;display:flex;align-items:center;gap:6px}.link-control svg{width:16px;height:16px}.chevron{font-size:18px;margin-inline-start:4px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:11px;padding:12px 18px;font-weight:750;transition:transform .18s var(--ease),background .18s,border-color .18s;white-space:nowrap;min-height:42px}.btn:not(:disabled):active{transform:scale(.98)}.btn-primary{background:var(--deep);color:#fff;box-shadow:0 4px 12px rgba(18,61,52,.13)}.btn-primary:hover{background:#24604c}.btn-primary svg{width:16px;height:16px;transform:rotate(180deg)}.btn-quiet,.btn-ghost{background:#fff;border-color:#e2e8df;color:#315a48}.btn-quiet:hover,.btn-ghost:hover{background:#f5f8f4}.btn-small{min-height:37px;padding:8px 12px;font-size:12px}.btn-danger-soft{color:#ab4949;background:#fff4f2;border-color:#f1dcd9}.btn-full{width:100%;margin-top:12px}.search-tip{font-size:10.5px;color:#8a998f;margin:14px 0 0;line-height:1.8}.advanced{border-top:1px solid var(--line);margin-top:23px;padding-top:19px;animation:enter .25s}.advanced-title{font-weight:750;font-size:13px}.advanced-title small{font-weight:400;color:#8b9c8c;margin-inline-start:7px}.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:9px;border:1px solid #e6ece4;background:#f9fbf8;font-size:12px;color:#355d4b;cursor:pointer}.toggle input,.show-plain input{accent-color:#276448;width:16px;height:16px}.fineprint{font-size:11px;line-height:1.8;color:#8a968c}.autocomplete{position:absolute;z-index:15;background:white;border-radius:12px;border:1px solid #dfe9dd;box-shadow:var(--shadow);top:141px;right:31px;left:31px;padding:8px;max-height:275px;overflow-y:auto}.suggest-item{width:100%;background:white;border:0;text-align:right;border-radius:8px;padding:9px 14px;color:var(--ink);display:flex;justify-content:space-between}.suggest-item:hover{background:#edf4eb}.suggest-item small{color:#8b9b8f}
.starter{max-width:840px;margin:39px auto 55px}.section-caption{display:flex;align-items:center;gap:10px;margin-bottom:16px}.section-caption b{font-size:14px}.section-caption span{font-size:12px;color:#92a094}.prompt-chips{display:flex;flex-wrap:wrap;gap:9px}.prompt-chips button{padding:11px 15px;color:#587365;font-size:12px;background:#fff;border:1px solid #e5eadd;border-radius:11px}.prompt-chips button:hover{border-color:#afc3ad;background:#f6faf4}.prompt-chips span{font-size:14px;margin-inline-start:13px;color:#9ba99f}.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:50px}.feature-strip>div{display:flex;flex-direction:column;align-items:center;gap:4px}.feature-icon{width:38px;height:38px;border-radius:12px;background:#e8f0e8;display:grid;place-items:center;color:#618974;font-size:22px;margin-bottom:8px}.feature-strip b{font-size:12px}.feature-strip small{font-size:10px;color:#91a094}
#searchResultsPanel{margin:48px auto 70px;max-width:960px}.result-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:19px}.result-heading h2{font-size:22px;margin:5px 0 0}.eyebrow-small{font-size:11px;color:#a08a59;font-weight:700}.result-actions{display:flex;gap:9px;flex-wrap:wrap}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.stat-card{padding:19px 23px;background:#fff;border:1px solid #e4e9df;border-radius:14px;min-height:119px;display:flex;flex-direction:column}.stat-card span{font-size:12px;color:#788e7e}.stat-card b{font-size:26px;margin-top:2px;line-height:1.5}.stat-card small{color:#9aab9e;font-size:10px}.result-notice{border-radius:10px;padding:13px 15px;background:#fff9ed;border:1px solid #ebdfc5;margin-bottom:16px;font-size:12px;color:#77643e}.result-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:28px;margin-bottom:15px}.result-toolbar label{font-size:12px;color:#718478}.result-toolbar select{margin-inline-start:8px;min-width:176px;padding:9px 13px;border:1px solid #dfe8df;border-radius:9px;background:#fff;color:var(--ink);max-width:240px}.show-plain{display:flex;align-items:center;gap:7px}.verses-list{display:grid;gap:13px}.verse-card{background:#fff;border:1px solid #e4e9df;border-radius:15px;padding:24px 27px 21px;animation:cardIn .35s var(--ease) both;transition:box-shadow .2s,border-color .2s}.verse-card:hover{border-color:#cbd9ca;box-shadow:var(--shadow)}@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.verse-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.verse-ref{color:#52715c;font-size:12px;font-weight:800;display:flex;align-items:center;gap:9px}.verse-number{color:#af9561;font-size:12px;font-weight:700}.verse-count{font-size:10px;color:#8b9c90;background:#f4f7f1;padding:4px 9px;border-radius:30px}.verse-main{font-family:Hafs,"Traditional Arabic",serif;font-size:clamp(23px,2.2vw,31px);line-height:2.25;color:#203e32;padding:18px 3px 14px;margin:0;text-align:right;overflow-wrap:anywhere}.verse-plain{font-size:13px;color:#607268;background:#f8faf6;padding:12px 14px;border-radius:9px;line-height:2.15}.verse-plain mark{background:#f6e7b2;color:#384536;border-radius:3px;padding:1px 2px}.verse-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center;border-top:1px solid #edf0e8;padding-top:13px}.icon-action{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:#6b8576;padding:5px 8px;border-radius:8px;font-size:11px}.icon-action:hover{background:#f0f5ef}.icon-action.saved{color:#ad8557;background:#fff9ed}.icon-action svg{width:17px;height:17px}.tafsir-details{margin-top:14px;background:#f7faf6;border-radius:11px;border:1px solid #e9eee6}.tafsir-details summary{cursor:pointer;padding:12px 15px;color:#416c55;font-size:12px;font-weight:750}.tafsir-details[open] summary{border-bottom:1px solid #e5ebe3}.tafsir-body{padding:15px 17px;color:#465f50;line-height:2.1;font-size:14px;white-space:normal}.tafsir-body .ayah{font-family:TafsirHafs,Hafs,serif;font-size:21px}.empty-state{padding:38px 20px;border:1px dashed #ceddca;border-radius:15px;text-align:center;background:#fdfefa;color:#7a8e7e}.empty-state b{display:block;color:#355d48;font-size:16px;margin-bottom:9px}.empty-state p{margin:0 0 14px;font-size:12px}.empty-state button{margin-top:8px}.pager{display:flex;align-items:center;justify-content:center;gap:15px;margin:23px auto}.pager span{color:#728779;font-size:13px}
.inner-hero{padding:47px 0 29px}.inner-hero h1{font-size:36px;margin:8px 0}.inner-hero p{color:#74897a;margin:0;font-size:14px}.view-card{background:#fff;border:1px solid #e5e9e0;padding:25px;border-radius:16px;margin-bottom:19px}.view-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}.view-head h2{font-size:18px;margin:0}.view-head input[type=search]{border:1px solid #d9e5dc;border-radius:9px;padding:11px 13px;min-width:220px}.surah-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.surah-card{display:flex;align-items:center;gap:11px;text-align:right;background:#fbfcf8;border:1px solid #e9ede4;border-radius:12px;padding:13px 11px;min-width:0;transition:transform .2s,border-color .2s}.surah-card:hover{transform:translateY(-2px);border-color:#a5c2ab;background:#f7fbf5}.surah-index{border:1px solid #ddd6bc;width:35px;height:35px;display:grid;place-items:center;border-radius:10px;color:#ab925f;flex-shrink:0;font-size:12px;font-weight:700}.surah-card strong{display:block;font-size:12px;color:#315b42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.surah-card small{display:block;font-size:10px;color:#9cac9f}.cluster{display:flex;flex-wrap:wrap;gap:7px}.mini-list{display:grid;gap:9px}.mini-item{background:#fafcf8;border:1px solid #e8ece5;padding:14px 16px;border-radius:11px;display:flex;align-items:center;justify-content:space-between;gap:10px}.mini-item strong{font-size:13px;display:block;overflow-wrap:anywhere}.mini-item small{display:block;color:#91a397;font-size:11px}.mini-item-actions{display:flex;align-items:center;gap:6px}.mini-item-actions button{border:1px solid #e2e9e1;background:white;border-radius:8px;color:#47715c;font-size:11px;padding:6px 9px}.mini-item-actions .remove{color:#aa6868}.import-btn{cursor:pointer}
.footer{border-top:1px solid #e2e7da;margin:80px auto 45px;padding:24px 0 0;display:grid;gap:12px;max-width:1070px}.footer-brand{display:flex;align-items:center;gap:9px;font-size:18px;color:#987c47}.footer-brand strong{color:#234b38}.footer-brand span{font-size:11px;color:#97a496;border-right:1px solid #d9e1d6;padding-right:10px;margin-right:2px}.footer>p{margin:0;color:#91a095;font-size:11px;max-width:890px;line-height:2}.footer details{font-size:11px;color:#7e9384}.footer details summary{cursor:pointer;color:#476f56}.footer details p{line-height:2}.fingerprint{overflow-wrap:anywhere}.footer-copy{color:#a4aea2;font-size:10px}.mobile-nav{display:none}
.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);background:#173f31;color:white;padding:12px 19px;border-radius:10px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:90;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.sync-dialog{border:1px solid #e2e9dd;border-radius:18px;padding:26px;width:min(440px,calc(100% - 26px));max-height:90vh;overflow:auto;box-shadow:0 40px 120px #173e3250;direction:rtl;color:#284a39}.sync-dialog::backdrop{background:rgba(10,30,23,.52);backdrop-filter:blur(4px)}.dialog-head{display:flex;align-items:start;justify-content:space-between;gap:16px}.dialog-head h2{font-size:21px;margin:6px 0}.icon-close{border:0;border-radius:50%;background:#eff3ed;color:#4b6556;font-size:25px;width:34px;height:34px;line-height:1}.sync-dialog>p{font-size:12px;color:#788e7c}.field-label{font-weight:750;font-size:12px;display:block;margin-top:17px}.sync-dialog input{display:block;border:1px solid #d6e4d8;border-radius:9px;padding:12px;margin-top:6px;width:100%;text-align:center}.sync-message{font-size:12px!important;min-height:20px}.btn-full+.btn-full{margin-top:7px}
@media(max-width:900px){.shell{padding-inline:19px}.topbar-inner{height:73px}.desktop-nav{gap:1px}.nav-link{padding:9px;font-size:12px}.local-badge{display:none}.surah-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){html{scroll-padding-top:100px}.shell{padding-inline:15px}.topbar-inner{height:67px}.brand-mark{width:39px;height:39px;font-size:25px}.brand-text b{font-size:21px}.brand-text small{font-size:9px}.desktop-nav{display:none}.top-actions .btn{font-size:0;padding:9px;width:36px;height:36px}.top-actions .btn svg{width:19px;height:19px}.main{padding-top:4px}.hero{padding:43px 0 24px}.hero h1{font-size:clamp(28px,8.1vw,37px);margin:12px 0 12px;letter-spacing:-.9px}.hero p{font-size:12px;line-height:1.9;max-width:310px;margin:auto}.hero-overline{font-size:10px}.hero-metrics{gap:11px;margin-top:19px;font-size:10px}.search-card{padding:20px 16px 13px;border-radius:17px}.search-label label{font-size:13px}.search-label span{font-size:10px}.search-input-wrap{padding:0 12px;gap:8px}.search-input-wrap input{height:56px;font-size:14px}.mode-row{gap:6px}.mode-chip{font-size:11px;padding:8px 9px}.search-footer{margin-top:17px}.search-footer .btn{padding:11px 12px;font-size:12px}.link-control{font-size:11px}.option-grid{grid-template-columns:1fr}.search-tip{font-size:10px;line-height:1.8}.autocomplete{top:124px;right:16px;left:16px}.starter{margin:30px 0 45px}.section-caption{flex-wrap:wrap}.prompt-chips{gap:7px}.prompt-chips button{padding:9px 10px;font-size:11px}.feature-strip{gap:6px;margin-top:39px}.feature-strip small{font-size:9px;text-align:center;line-height:1.5}.feature-strip b{font-size:11px}.feature-icon{width:34px;height:34px}.result-heading{align-items:start;flex-direction:column;gap:12px}.result-heading h2{font-size:20px}.stat-grid{gap:7px}.stat-card{padding:12px 11px;min-height:96px;border-radius:11px}.stat-card span{font-size:10px;line-height:1.5}.stat-card b{font-size:22px;margin-top:6px}.stat-card small{font-size:9px}.result-toolbar{align-items:stretch;flex-direction:column;gap:13px}.result-toolbar select{display:block;margin:6px 0 0;width:100%;max-width:none}.verse-card{padding:16px 15px 15px;border-radius:13px}.verse-ref{font-size:11px}.verse-number{font-size:10px}.verse-main{font-size:25px;line-height:2.15;padding:13px 0}.verse-count{font-size:9px}.verse-actions{gap:3px}.icon-action{font-size:10px;padding:6px 7px}.tafsir-body{font-size:13px}.inner-hero{padding:29px 0 24px}.inner-hero h1{font-size:30px}.inner-hero p{font-size:12px}.view-card{padding:15px;border-radius:13px}.view-head{flex-wrap:wrap}.view-head input[type=search]{width:100%;min-width:0}.surah-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.surah-card{padding:10px 7px;gap:7px}.surah-index{width:30px;height:30px}.surah-card strong{font-size:11px}.surah-card small{font-size:9px}.cluster{gap:5px}.cluster .btn{font-size:10px;padding:7px 8px}.mini-item{gap:8px;padding:11px;align-items:flex-start}.mini-item-actions{flex-wrap:wrap;justify-content:flex-end}.mini-item strong{font-size:11px}.mini-item small{font-size:9px}.footer{margin:55px 0 108px}.footer>p{font-size:10px}.mobile-nav{position:fixed;bottom:0;right:0;left:0;display:flex;background:rgba(255,255,254,.97);border-top:1px solid #dfe8db;z-index:40;justify-content:space-around;align-items:stretch;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 30px rgba(25,50,35,.06)}.mobile-nav-item{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:11px 3px 9px;background:transparent;border:none;color:#97a59a;font-size:10px;font-weight:750;min-height:65px}.mobile-nav-item svg{width:20px;height:20px}.mobile-nav-item.active{color:#246147}.mobile-nav-item.active:before{content:"";position:absolute;top:0;width:25px;height:3px;border-radius:0 0 6px 6px;background:#488a63}.toast{bottom:85px}.sync-dialog{padding:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
#searchResultsPanel,#surahDetail,.verse-card{scroll-margin-top:105px}


:root{--reader-scale:1;--premium-gold:#c9a96a;--premium-dark:#10392f;--premium-paper:#fcfaf4}
body{background:radial-gradient(circle at 50% -20%,#f0f2e8 0,transparent 43%),#f8f7f2;background-attachment:fixed}
.ambient-a{background:#afceb9;opacity:.21;animation:ambientBreath 10s ease-in-out infinite alternate}
.ambient-b{background:#ead8a0;opacity:.19;animation:ambientBreath 12s ease-in-out infinite alternate-reverse}
@keyframes ambientBreath{to{transform:translate3d(22px,-15px,0);opacity:.29}}
.topbar{background:rgba(255,254,250,.93);box-shadow:0 6px 30px rgba(14,45,34,.035)}
.brand-mark{background:linear-gradient(145deg,#164f3d,#10352c);color:#e8ce98;border:1px solid #c1a36c;box-shadow:inset 0 0 0 3px #ffffff14,0 4px 18px #1f584130;transform:rotate(0deg);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.brand:hover .brand-mark{transform:rotate(12deg);box-shadow:0 7px 22px #1f584141}
.nav-link{transition:background .24s,color .24s,transform .24s}.nav-link:hover{transform:translateY(-1px)}.nav-about{color:#937747;text-decoration:none;font-size:12px;white-space:nowrap}
.hero{padding:40px 0 35px;position:relative;isolation:isolate}
.hero-arch{position:relative;width:111px;height:111px;display:grid;place-items:center;margin:0 auto 19px;animation:archIntro .95s var(--ease) both}
.hero-arch::before{content:"";width:74px;height:74px;position:absolute;inset:18px;border:1px solid #bf9f64;border-radius:27px;transform:rotate(45deg);background:linear-gradient(135deg,#174f3b,#0d352a);box-shadow:0 14px 39px #1d49302d,inset 0 0 0 5px #fff1}
.hero-arch::after{content:"";position:absolute;width:94px;height:94px;border-radius:50%;border:1px solid #d8c9a7;animation:slowTurn 42s linear infinite}
.hero-orbit{width:10px;height:10px;position:absolute;background:#c8ad72;transform:rotate(45deg);border-radius:2px;z-index:1;box-shadow:0 0 0 4px #faf6eb}
.orbit-one{top:2px;left:50%;margin-left:-5px}.orbit-two{bottom:3px;left:50%;margin-left:-5px}
.arch-core{position:relative;color:#f1d9a3;font-size:48px;line-height:1;z-index:2;text-shadow:0 3px 12px #0005}
@keyframes archIntro{from{opacity:0;transform:translateY(17px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes slowTurn{to{transform:rotate(360deg)}}
.hero-overline{color:#917647;letter-spacing:.2px;font-size:11px;font-weight:800}.hero h1{font-size:clamp(31px,4.8vw,56px);letter-spacing:-1.5px;font-weight:800;margin:15px 0 12px}.hero h1 em{color:#1f624a;position:relative}
.hero h1 em:after{content:"";position:absolute;height:7px;background:#e6d9b680;border-radius:50%;bottom:-5px;right:15%;left:15%;z-index:-1}
.hero p{max-width:680px;margin-inline:auto;line-height:2;color:#5a7064;font-size:15px}
.hero-metrics{margin-top:21px;color:#7a8b7a}.hero-verse{display:flex;gap:12px;align-items:center;justify-content:center;margin:23px auto 0;color:#52705b;flex-wrap:wrap}
.hero-verse>span:nth-child(2){font-family:Hafs,serif;font-size:23px;color:#2b5d43}.hero-verse small{font-size:10px;color:#ad9567}.decor-tick{color:#c5a368;font-size:9px}
.search-card{border:1px solid #e7ddc9;background:linear-gradient(140deg,#fff 78%,#faf8f0);box-shadow:0 22px 70px rgba(19,52,40,.09),0 3px 12px rgba(19,52,40,.03);border-radius:23px;overflow:visible}
.search-card:before{content:"";position:absolute;top:-1px;left:19%;right:19%;height:3px;background:linear-gradient(90deg,transparent,#c5a269,transparent);border-radius:20px}
.search-input-wrap{border-color:#dae4d8;background:#fff;box-shadow:0 3px 10px #225d3305}.search-input-wrap:focus-within{border-color:#a4b79c;box-shadow:0 0 0 4px #e7f0e7,0 8px 22px #16553814}
.btn-primary{background:linear-gradient(135deg,#15513e,#11382f);box-shadow:0 7px 16px rgba(16,65,45,.18)}.btn-primary:hover{background:#205d47;box-shadow:0 12px 25px rgba(16,65,45,.22);transform:translateY(-2px)}
.mode-chip{border-radius:30px;transition:background .23s,border-color .23s,transform .23s}.mode-chip:hover{transform:translateY(-1px)}.mode-chip.selected{background:#e6efe5;border-color:#90ad98;box-shadow:inset 0 0 0 1px #b8cdbb}
.prompt-chips button{transition:transform .22s,border-color .22s,box-shadow .22s}.prompt-chips button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #1d513611}
.feature-strip{background:#ffffffbf;border:1px solid #ece9de;border-radius:19px;padding:25px 13px;box-shadow:0 12px 31px #123d3410}
.feature-icon{color:#b39a61;background:#f7f2e5;border:1px solid #eadfbf}
.mission-peek{position:relative;display:flex;align-items:center;gap:25px;max-width:840px;margin:30px auto 65px;border:1px solid #e4dfd1;background:#fffdf7;padding:25px 30px;border-radius:20px;box-shadow:0 12px 32px #19472d0b;overflow:hidden}
.mission-peek::after{content:"";position:absolute;left:-30px;bottom:-45px;width:130px;height:130px;border:1px solid #d4be8d50;transform:rotate(45deg);border-radius:22px;pointer-events:none}
.mission-icon{height:64px;width:64px;flex-shrink:0;display:grid;place-items:center;background:#184737;color:#e8d29d;border-radius:18px;font-size:33px;box-shadow:inset 0 0 0 4px #ffffff13}
.mission-body h2{font-size:20px;margin:4px 0;color:#174a37}.mission-body p{font-size:12px;color:#6d7c6d;line-height:2;margin:5px 0 14px}.mission-links{display:flex;gap:8px;flex-wrap:wrap}.mission-links .btn{text-decoration:none}
.verse-card{border:1px solid #e9e7dd;border-radius:17px;box-shadow:0 4px 19px #153a2c07;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.verse-card:hover{transform:translateY(-2px);box-shadow:0 15px 36px #123d3410;border-color:#c3d0c0}
.verse-main{font-size:calc(clamp(23px,2.3vw,31px) * var(--reader-scale));line-height:2.35;color:#164333;letter-spacing:0;overflow-wrap:break-word}
.tafsir-details{margin-top:14px;background:linear-gradient(140deg,#f8faf5,#fbfaf5);border:1px solid #e0e9dd;border-radius:13px;overflow:hidden}
.tafsir-details summary{font-size:12px;color:#2e6a4c;padding:13px 16px;background:#f1f6ee;transition:background .2s;list-style-position:inside}
.tafsir-details summary:hover{background:#e8f1e7}.tafsir-body{font-size:calc(14px * var(--reader-scale));line-height:2.3;color:#435b4b;background:#fdfefb;padding:17px 20px}
.tafsir-body .ayah{font-size:calc(21px * var(--reader-scale))}
.icon-action{min-height:36px;font-size:11px;color:#4d725d;transition:background .2s,transform .2s}.icon-action:hover{transform:translateY(-1px)}
.font-controls{display:flex;gap:7px;align-items:center;background:#fff;border:1px solid #e3e9dd;border-radius:12px;padding:5px 8px;color:#667967;font-size:11px}.font-btn{width:30px;height:30px;display:grid;place-items:center;color:#18523d;background:#f4f7f1;border:1px solid #e2e9dc;border-radius:9px;font-size:19px;line-height:1;transition:background .2s,transform .2s}.font-btn:hover{background:#e4eee4;transform:translateY(-1px)}
.surah-font-controls{margin:0 0 15px;width:max-content}
.benefit-panel{isolation:isolate;position:relative;max-width:1020px;margin:85px auto 35px;padding:45px 34px 35px;overflow:hidden;border-radius:24px;background:radial-gradient(circle at 50% -75%,#48816c 0,transparent 55%),linear-gradient(140deg,#0c3329,#16483a 55%,#123b31);color:#fff;text-align:center;box-shadow:0 22px 65px #163f2d32;border:1px solid #957b434f}
.benefit-panel:before,.benefit-panel:after{content:"";position:absolute;width:240px;height:240px;border:1px solid #c9ac6e2b;transform:rotate(45deg);border-radius:40px;pointer-events:none;z-index:-1}.benefit-panel:before{top:-143px;right:-100px}.benefit-panel:after{bottom:-170px;left:-110px}
.benefit-symbol{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1px solid #d6bd8673;color:#e4cb8c;font-size:40px;margin-bottom:9px;box-shadow:0 0 0 9px #d8c08b0b}
.benefit-eyebrow{color:#e2d0a8!important;font-size:11px!important;font-weight:800;letter-spacing:1px;margin:8px 0 3px!important}
.benefit-panel h2{font-family:Tahoma,serif;font-size:clamp(22px,3vw,34px);margin:5px 0 13px;color:#fbf4dd}.benefit-panel>p:not(.benefit-eyebrow){font-size:13px;max-width:650px;margin:0 auto 24px;line-height:2.1;color:#d9e8dc}
.benefit-actions{display:flex;gap:11px;align-items:center;justify-content:center;flex-wrap:wrap}.benefit-actions .btn{text-decoration:none;white-space:normal;font-size:12px}.benefit-read{color:#18392e;background:#e6d2a4;border:1px solid #efddb2}.benefit-read:hover{background:#f6e6bb}.benefit-share{background:#ffffff09;border:1px solid #b4ccbc6b;color:#f8f4e8}.benefit-share:hover{background:#ffffff1a}.benefit-signature{display:flex;flex-direction:column;gap:3px;align-items:center;border-top:1px solid #d1bb8d39;max-width:590px;margin:29px auto 0;padding-top:20px}.benefit-signature span{font-size:11px;color:#cfdbc9}.benefit-signature strong{font-size:clamp(16px,2.4vw,21px);color:#f4dc9d;font-weight:800}.benefit-signature small{color:#c7d9c8;font-size:10px;margin-top:5px}
.footer{border-top:0;margin:18px auto 36px;padding:20px 0 0}.footer-links{display:flex;gap:13px;flex-wrap:wrap;align-items:center}.footer-links a,.footer-links button{font-size:11px;border:0;background:none;color:#406c50;text-decoration:underline;text-underline-offset:3px;padding:3px 0}.footer-bottom{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #e4e6dc;padding:15px 0 0;color:#879b8c;flex-wrap:wrap}
@media(max-width:900px){.nav-about{font-size:11px}.topbar-inner{gap:12px}.desktop-nav{gap:0}.nav-link{padding:8px 10px}}
@media(max-width:650px){.hero{padding:22px 0 23px}.hero-arch{width:80px;height:80px;margin-bottom:15px}.hero-arch:before{width:55px;height:55px;inset:12px;border-radius:19px}.hero-arch:after{width:70px;height:70px}.hero-orbit{height:7px;width:7px}.arch-core{font-size:33px}.hero-overline{font-size:9px;line-height:1.7}.hero h1{font-size:clamp(29px,8.5vw,37px);line-height:1.42;margin:10px 0}.hero p{font-size:12px}.hero-metrics{margin-top:12px}.hero-verse{margin-top:10px;gap:6px}.hero-verse>span:nth-child(2){font-size:19px}.hero-verse small{font-size:9px}.search-card{padding:18px 14px 13px}.feature-strip{padding:17px 8px;margin-top:25px}.starter{margin-top:26px}.mission-peek{padding:18px 16px;gap:13px;margin:22px 0 40px;align-items:flex-start;border-radius:15px}.mission-icon{width:40px;height:40px;font-size:22px;border-radius:11px}.mission-body h2{font-size:15px}.mission-body p{font-size:11px}.mission-links .btn{font-size:10px;padding:8px 10px;white-space:normal}.verse-main{font-size:calc(25px * var(--reader-scale));line-height:2.2}.tafsir-body{font-size:calc(13px * var(--reader-scale))}.result-toolbar{gap:10px}.font-controls{align-self:flex-start}.benefit-panel{padding:30px 18px 24px;border-radius:19px;margin:55px auto 25px}.benefit-panel>p:not(.benefit-eyebrow){font-size:12px}.benefit-actions{flex-direction:column}.benefit-actions .btn{width:100%}.benefit-signature{margin-top:22px}.footer{margin:0 0 110px}.footer-bottom{flex-direction:column;gap:3px}}
@media(prefers-reduced-motion:reduce){.hero-arch,.hero-arch:after,.ambient,.verse-card,.btn,.brand-mark{animation:none!important;transition:none!important}}
@media print{.topbar,.search-card,.mobile-nav,.verse-actions,.benefit-panel,.footer,.hero,.mission-peek,.pager{display:none!important}.verse-card{break-inside:avoid;border:0;box-shadow:none}.tafsir-details{display:block}.tafsir-details .tafsir-body{display:block}}


.brand{min-width:0;gap:8px;white-space:nowrap}
.brand-symbol{width:72px;height:52px;object-fit:contain;display:block;flex:0 0 auto;pointer-events:none;transition:transform .3s var(--ease);transform-origin:center}
.brand:hover .brand-symbol{transform:translateY(-2px)}
.brand-text{min-width:0;line-height:1.28}
.brand-text b{font-size:24px;line-height:1.14;letter-spacing:-.35px}
.brand-text small{font-size:10px;line-height:1.5;margin-top:4px}
.topbar-inner{gap:14px}
.hero-logo-lockup{width:150px;height:145px;margin:0 auto 10px;animation:archIntro .9s var(--ease) both}
.hero-logo-lockup:before,.hero-logo-lockup:after{display:none!important}
.hero-logo{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 9px 12px rgba(23,60,41,.09));pointer-events:none}
.footer-brand img{width:46px;height:33px;object-fit:contain;display:block;flex-shrink:0}
.benefit-icon{display:block;object-fit:contain;object-position:center;margin-inline:auto!important;width:145px!important;height:92px!important;font-size:0!important;filter:drop-shadow(0 5px 12px rgba(0,0,0,.11))}
.message-logo{height:175px!important;width:180px!important;border:0!important;background:transparent!important;transform:none!important;border-radius:0!important;box-shadow:none!important;display:grid;place-items:center;margin:0 auto 12px}
.message-logo img{display:block;width:100%;height:100%;object-fit:contain;transform:none!important}

button,a{ -webkit-tap-highlight-color:rgba(19,76,52,.12)}
button{ -webkit-appearance:none;appearance:none}
button svg,a svg,.feature-icon svg{display:block;width:19px;height:19px;min-width:0;min-height:0;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;transform:translateZ(0);overflow:visible}
.icon-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.35;min-height:35px;white-space:nowrap}
.icon-action svg{width:17px;height:17px;flex:0 0 17px;align-self:center}
.btn svg{align-self:center}
.btn-primary svg{transform:none}
#saveSearch svg{width:17px;height:17px}
#saveSearch.saved-search svg{fill:rgba(183,156,98,.22);color:#a78a50}
.mobile-nav-item{position:relative;isolation:isolate;-webkit-appearance:none;appearance:none;min-width:0;line-height:1.3}
.mobile-nav-item svg{width:22px;height:22px;flex:0 0 22px;margin:0 auto;stroke-width:1.8}
.mobile-nav-item.active::before{content:"";position:absolute;top:0;left:50%;right:auto;transform:translateX(-50%);width:28px;height:3px;border-radius:0 0 8px 8px}
.mobile-nav-item span{display:block;max-width:100%;white-space:nowrap}
.icon-close{display:grid;place-items:center;line-height:1;flex:0 0 36px}
.icon-close svg{width:18px;height:18px}
.chip-arrow{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;vertical-align:middle}
.chip-arrow svg{width:14px;height:14px;stroke-width:1.8}
.link-control .chevron{display:grid;place-items:center;width:18px;height:18px;margin-inline-start:4px}
.link-control .chevron svg{width:16px;height:16px}
.feature-icon svg{width:21px;height:21px}

.topbar-inner .top-actions{flex-shrink:0;gap:8px}
.search-footer .btn{line-height:1.3}
@media(max-width:900px){.brand-symbol{width:63px;height:45px}.brand-text b{font-size:21px}.brand-text small{font-size:9px}.topbar-inner{gap:8px}}
@media(max-width:650px){
 .topbar-inner{height:69px;padding-inline:13px;gap:9px}
 .brand{gap:5px}
 .brand-symbol{width:62px;height:46px}
 .brand-text b{font-size:20px;line-height:1.08}
 .brand-text small{font-size:8px;letter-spacing:0;line-height:1.4;margin-top:5px}
 .hero-logo-lockup{width:140px;height:140px;margin-bottom:9px}
 .top-actions .btn{height:40px;width:40px;min-height:40px;min-width:40px;padding:10px}
 .mobile-nav-item{min-height:67px;padding-top:10px;padding-bottom:9px;gap:5px}
 .icon-action{min-height:38px;padding:7px 9px;gap:6px}
 .verse-actions{gap:5px}
 .benefit-icon{width:120px!important;height:75px!important}
}
@media(max-width:360px){.brand-symbol{width:51px;height:43px}.brand-text b{font-size:18px}.brand-text small{font-size:7.5px}.topbar-inner{gap:6px}.shell{padding-inline:11px}.mobile-nav-item span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.brand-symbol,.hero-logo-lockup{animation:none!important;transition:none!important}}


body{background:linear-gradient(155deg,#fbfaf6 0%,#f5f9f5 46%,#fcfaf3 100%);background-attachment:fixed}
.main{position:relative}
.ambient{opacity:.34;filter:blur(86px);animation:ambientV4 26s ease-in-out infinite alternate;will-change:transform;transform:translate3d(0,0,0)}
.ambient-a{width:440px;height:440px;background:#c6e7d3;right:-170px;top:80px}
.ambient-b{width:450px;height:450px;background:#f2e7c8;left:-180px;top:370px;animation-delay:-11s}
@keyframes ambientV4{0%{transform:translate3d(0,0,0) scale(.94)}50%{transform:translate3d(28px,-34px,0) scale(1.09)}100%{transform:translate3d(-15px,40px,0) scale(1.03)}}
.hero{overflow:hidden;position:relative;isolation:isolate;border-radius:36px;padding:48px 16px 37px;margin:5px 0 7px;background:linear-gradient(116deg,#faf9f3,#eef8f1,#f4f8f0,#fbf4e6,#f8f9f3);background-size:210% 210%;animation:heroAurora 27s ease-in-out infinite alternate;box-shadow:inset 0 0 0 1px #ffffffae}
.hero:before{content:"";pointer-events:none;position:absolute;inset:-32% -25%;z-index:-1;background:radial-gradient(ellipse at 18% 44%,rgba(190,228,206,.60),transparent 38%),radial-gradient(ellipse at 81% 16%,rgba(248,219,154,.38),transparent 35%),radial-gradient(ellipse at 71% 83%,rgba(195,224,214,.47),transparent 42%);animation:glowFloat 28s ease-in-out infinite alternate;transform:translate3d(0,0,0)}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.20;background-image:radial-gradient(#9ebba3 0.75px,transparent .85px);background-size:36px 36px;mask-image:linear-gradient(90deg,#0005,transparent 22%,transparent 78%,#0005)}
@keyframes heroAurora{0%{background-position:0% 35%}50%{background-position:90% 65%}100%{background-position:25% 5%}}
@keyframes glowFloat{from{transform:translate3d(-22px,-8px,0) scale(.98)}to{transform:translate3d(25px,18px,0) scale(1.07)}}
.hero-logo{filter:drop-shadow(0 15px 19px rgba(24,84,60,.11))}
.search-card{box-shadow:0 24px 65px rgba(27,68,47,.08);border-color:#dfece3}
.search-input-wrap:focus-within{box-shadow:0 0 0 4px #e1f0e6,0 5px 18px #b0d8b34d}
.mode-chip.selected{box-shadow:0 3px 12px #b4d3bb3a}
.advanced .option-grid .toggle{transition:transform .17s,background .17s}.advanced .option-grid .toggle:hover{transform:translateY(-1px)}
.save-awareness{display:flex;align-items:center;gap:12px;max-width:840px;margin:13px auto 0;background:linear-gradient(110deg,#f6fbf7,#fbfaf0);border:1px solid #dce9db;padding:13px 17px;border-radius:15px;box-shadow:0 7px 28px #34634308}
.save-awareness-icon{width:42px;height:42px;border-radius:12px;background:#e3f2e6;color:#285c44;display:grid;place-items:center;flex:0 0 auto}
.save-awareness-icon svg{width:22px;height:22px}
.save-awareness-copy{flex:1;min-width:0}.save-awareness-copy strong{font-size:13px;color:#234b38}.save-awareness-copy p{font-size:11px;line-height:1.85;color:#667a69;margin:2px 0 0}
.save-awareness-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center;justify-content:flex-end}.save-awareness-actions .btn{font-size:11px;padding:8px 10px}
.btn-save-connect{background:#215a43;color:#fff}.btn-save-connect:hover{background:#154730}
.favorites-warning{display:flex;align-items:center;gap:11px;background:#fff9eb;border:1px solid #ead8ab;border-radius:13px;padding:13px 14px;margin:0 0 16px;color:#79633f;font-size:12px;line-height:1.9}
.favorites-warning svg{color:#a27c34;width:21px;height:21px}.favorites-warning span{flex:1}
.save-guide-dialog .save-guide-steps{display:grid;gap:10px;margin:17px 0 21px}.save-guide-steps div{display:flex;align-items:center;gap:10px;background:#f5f8f3;border:1px solid #e4ebdf;border-radius:11px;padding:11px;font-size:12px;line-height:1.8}.save-guide-steps b{width:28px;height:28px;border-radius:50%;background:#dfece2;color:#25533a;display:grid;place-items:center;flex:0 0 auto}
.save-guide-dialog .dialog-head h2{font-size:20px}
.save-guide-dialog .btn-full{width:100%}
@media(max-width:900px){.save-awareness{align-items:flex-start;flex-wrap:wrap}.save-awareness-actions{margin-inline-start:54px}}
@media(max-width:650px){.hero{border-radius:22px;padding:24px 9px 22px;margin:4px -5px 4px}.hero:before{inset:-25% -35%}.save-awareness{padding:12px;gap:9px;margin-top:11px;border-radius:13px}.save-awareness-icon{width:32px;height:32px;border-radius:10px}.save-awareness-icon svg{width:18px;height:18px}.save-awareness-copy{flex-basis:calc(100% - 45px)}.save-awareness-copy strong{font-size:11px}.save-awareness-copy p{font-size:10px}.save-awareness-actions{width:100%;margin:3px 0 0;justify-content:stretch}.save-awareness-actions button{flex:1;min-width:0;min-height:39px}.favorites-warning{flex-wrap:wrap;font-size:11px}.favorites-warning span{flex-basis:calc(100% - 35px)}.favorites-warning button{flex:1;min-height:40px}.save-guide-dialog .dialog-head h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){.hero,.hero:before,.ambient,.save-awareness *{animation:none!important;transition:none!important}}

@media(max-width:650px){body{background-attachment:scroll}.hero:before{animation-duration:38s}}


:where(button,a,.brand,.feature-icon,.save-awareness-icon){-webkit-tap-highlight-color:transparent}
button svg, a svg,.icon-action svg,.mobile-nav-item svg,.top-actions svg{display:block!important;box-sizing:content-box!important;overflow:visible!important;vertical-align:middle!important;transform:none!important;position:static;max-width:none;max-height:none;align-self:center;justify-self:center;flex-shrink:0;direction:ltr}
.topbar-inner,.brand,.top-actions,.brand-text{align-items:center}
.brand-symbol{display:block;object-fit:contain;object-position:center center;flex:none;margin:0;transform:none!important}
.brand-text{align-items:flex-start;justify-content:center;min-width:0}
.top-actions .btn,.icon-close,.font-btn,.btn,.icon-action,.link-control{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.top-actions .btn svg,.icon-close svg,.font-btn svg{margin:0;flex-shrink:0}
.mobile-nav-item{display:grid!important;grid-template-rows:26px 19px!important;align-content:center!important;justify-items:center!important;align-items:center!important;gap:2px!important;text-align:center!important}
.mobile-nav-item svg{width:22px!important;height:22px!important;margin:0!important;display:block!important;grid-row:1}
.mobile-nav-item span{display:block!important;grid-row:2;line-height:19px!important;font-size:10px!important;margin:0!important}
.mobile-nav-item.active:before{left:50%!important;right:auto!important;transform:translateX(-50%)!important}
.verse-actions{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:7px}
.icon-action{min-height:40px;line-height:1.25!important;white-space:nowrap;padding:8px 10px}
.icon-action svg{width:18px!important;height:18px!important;flex:0 0 18px!important}
.search-input-wrap > svg,.search-footer svg,.link-control svg{vertical-align:middle;flex-shrink:0}
.phone-risk{background:#fff7eb;color:#75552b!important;border:1px solid #ebd9b5;border-radius:11px;padding:10px 12px;line-height:1.8;font-size:11px!important;margin-top:14px}
#phoneLoginForm{display:grid;gap:11px}#phoneLoginForm input{font-size:16px;direction:ltr;letter-spacing:.5px;min-height:50px}
#phoneLoginForm .btn{min-height:47px}#signedView{display:grid;gap:10px}#signedView[hidden]{display:none!important}
.signed-note{font-size:12px;color:#416b55;background:#f1f8f2;padding:10px;border-radius:9px}
@media(max-width:650px){.topbar-inner{gap:7px}.brand{gap:6px}.top-actions .btn{width:42px!important;height:42px!important;padding:0!important}
 .mobile-nav-item{min-height:68px;padding:9px 2px!important}.icon-action{min-height:42px;padding:8px 10px}.brand-symbol{width:58px;height:45px}}
@media(max-width:360px){.brand-symbol{width:49px;height:40px}.topbar-inner{padding-inline:10px;gap:4px}.brand-text b{font-size:18px}.brand-text small{font-size:7px}}



.brand-symbol{display:block!important;object-fit:contain!important;object-position:50% 50%!important;flex:0 0 auto!important;transform:none!important;margin:0!important;}
.brand{display:inline-flex!important;align-items:center!important;justify-content:flex-start;gap:8px!important;min-height:48px;}
.top-actions .btn#syncTop{display:inline-flex!important;justify-content:center!important;align-items:center!important;position:relative;}
.top-actions .btn#syncTop svg{display:block!important;width:20px!important;height:20px!important;flex:0 0 20px!important;align-self:center!important;justify-self:center!important;margin:0!important;transform:none!important;}
.icon-close,.font-btn{display:grid!important;place-items:center!important;line-height:0!important;}
.icon-close svg,.font-btn svg{display:block!important;margin:0 auto!important;align-self:center!important;justify-self:center!important;}
.mobile-nav{direction:rtl;align-items:stretch!important;}
.mobile-nav-item{display:flex!important;flex:1 1 0!important;min-width:0!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:3px!important;position:relative!important;text-align:center!important;box-sizing:border-box!important;}
.mobile-nav-item > .mobile-nav-icon{display:flex!important;justify-content:center!important;align-items:center!important;place-items:center!important;flex:0 0 30px!important;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;box-sizing:border-box!important;margin:0 auto!important;line-height:0!important;grid-row:auto!important;position:relative!important;}
.mobile-nav-item > .mobile-nav-icon > svg{display:block!important;position:static!important;box-sizing:border-box!important;width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;margin:0!important;transform:none!important;flex:0 0 22px!important;align-self:center!important;justify-self:center!important;vertical-align:middle!important;}
.mobile-nav-item > span:last-child{display:block!important;width:100%!important;font-size:10px!important;line-height:17px!important;max-width:100%!important;margin:0!important;grid-row:auto!important;text-align:center!important;}
.mobile-nav-item.active::before{left:50%!important;right:auto!important;transform:translateX(-50%)!important;}
@media(max-width:650px){
 .brand-symbol{width:57px!important;height:46px!important;}
 .topbar-inner{align-items:center!important;}
 .top-actions #syncTop{height:44px!important;width:44px!important;padding:0!important;border-radius:13px!important;}
 .mobile-nav-item{padding:7px 2px 6px!important;min-height:69px!important;}
 .mobile-nav{padding-bottom:env(safe-area-inset-bottom)!important;}
}
@media(max-width:360px){.brand-symbol{width:48px!important;height:42px!important;}}
@media(prefers-reduced-motion:reduce){.brand-symbol{transition:none!important;}}


@media(max-width:650px){#syncTop{gap:0!important}#syncTop #headerPhoneLabel{display:none!important}}



/* Ayat – calm, readable layout; subtle movement stays behind the search tools. */
:root{--deep:#164f3d;--deep2:#21624e;--cream:#faf9f4;--ink:#193e30;--paper:#fffefb}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI","Noto Sans Arabic",Tahoma,Arial,sans-serif;background:#faf9f4;color:var(--ink);line-height:1.8;letter-spacing:0}
.topbar{background:rgba(255,254,250,.96);border-bottom:1px solid #e7e8db;box-shadow:0 3px 18px #123e2e0a;backdrop-filter:blur(14px)}
.topbar-inner{height:77px;gap:16px}
.brand{display:flex!important;justify-content:center;align-items:center;min-width:100px;gap:0!important}
.brand-symbol{display:block!important;width:106px!important;height:66px!important;object-fit:contain!important;object-position:center!important;filter:none;transform:none!important}
.desktop-nav .nav-link{font-family:inherit;font-size:14px;padding:9px 15px;font-weight:650}
.nav-link.active{background:#eaf1e9;color:#194d38}
.top-actions .btn#syncTop{border-color:#e1e9df;background:#fff;color:#205741}
.main{padding-top:19px}
.ambient{opacity:.22;filter:blur(105px);animation:ambientV4 38s ease-in-out infinite alternate}
.hero-stage{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(118deg,#fbfaf5 0%,#f9fbf6 42%,#f3f8f1 77%,#faf7ed 100%);border:1px solid #e7e8de;border-radius:26px;margin:0 auto 16px;padding:0 23px 25px;box-shadow:0 14px 35px #2649340a}
.hero-stage::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-20%;background:radial-gradient(ellipse at 90% 18%,rgba(200,229,209,.38) 0%,transparent 35%),radial-gradient(ellipse at 10% 84%,rgba(235,214,166,.22) 0%,transparent 37%);animation:ayatQuietLight 32s ease-in-out infinite alternate}
.hero-stage::after{content:none!important}
@keyframes ayatQuietLight{from{transform:translate3d(-12px,0,0)}to{transform:translate3d(23px,10px,0)}}
.hero-stage .hero{position:relative;isolation:auto;overflow:visible;margin:0!important;padding:36px 10px 24px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;animation:none!important;text-align:center}
.hero-stage .hero:before,.hero-stage .hero:after{display:none!important;content:none!important}
.hero-stage .hero-overline{display:inline-block;padding:5px 13px;border:1px solid #e9e1cc;border-radius:99px;background:#fffdf8;font-size:11px;font-weight:650;color:#8e7448;letter-spacing:0}
.hero-stage .hero h1{font-family:"Segoe UI","Noto Sans Arabic",Tahoma,Arial,sans-serif;font-size:clamp(29px,3.35vw,43px);font-weight:700;letter-spacing:-.35px;line-height:1.5;margin:12px auto 6px;color:#164633;text-shadow:none;max-width:830px}
.hero-stage .hero h1 em{color:#237253;font-style:normal}
.hero-stage .hero h1 em:after{display:none!important}
.hero-stage .hero p{max-width:720px;color:#617568;font-size:clamp(12px,1.17vw,15px);line-height:1.85;margin:0 auto}
.hero-stage .hero-metrics{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:16px auto 0;font-size:11px;color:#53765e}
.hero-stage .hero-metrics span{background:#ffffffa8;border:1px solid #e6e7d8;border-radius:99px;padding:5px 13px;line-height:1.5;font-weight:600}
.hero-stage .hero-metrics i{display:none!important}
.hero-stage .search-card{position:relative;max-width:840px;margin:0 auto;border-radius:18px;background:#fffefc;border:1px solid #e2e6da;box-shadow:0 12px 32px #133c2c11;padding:23px 26px 18px}
.hero-stage .search-card::before{content:none!important}
.hero-stage .search-card .search-input-wrap{border:1px solid #d8e3d8;background:#fff;border-radius:12px}
.hero-stage .search-card .search-input-wrap:focus-within{border-color:#8daf9d;box-shadow:0 0 0 4px #e6efe8}
.hero-stage .search-input-wrap input{font-family:inherit}
.mode-chip.selected{background:#edf4ec;border-color:#b8d0bd;color:#215942}
.btn-primary,.btn-save-connect{background:#175742!important;border-color:#175742;color:#fff!important;box-shadow:0 4px 13px #164e3a22}
.btn-primary:hover,.btn-save-connect:hover{background:#1f6a50!important}
.hero-stage .quick-guide{margin-top:12px;padding-top:12px}
.hero-stage .save-awareness{margin-top:10px}
.hero-stage .search-tip{font-size:10.5px;line-height:1.75}
.message-page{background:none}
.message-page::before{display:none!important}
.message-hero{padding:35px 10px 25px}
.message-hero h1{font-family:"Segoe UI","Noto Sans Arabic",Tahoma,Arial,sans-serif;font-size:clamp(29px,3.5vw,40px)}
.message-nav .brand-symbol{width:90px!important;height:62px!important}
@media(max-width:950px){.topbar-inner{gap:8px}.brand-symbol{width:88px!important;height:60px!important}.desktop-nav .nav-link{font-size:12px;padding:9px 11px}.hero-stage{padding:0 17px 21px}}
@media(max-width:650px){
 body{background:#faf9f4}
 .topbar-inner{height:62px;padding-inline:12px;gap:8px}
 .brand{min-width:0;gap:0!important}
 .brand-symbol{width:76px!important;height:52px!important}
 .main{padding-top:9px}
 .hero-stage{margin:0 -3px 11px;border-radius:19px;padding:0 10px 13px}
 .hero-stage .hero{padding:22px 4px 16px!important}
 .hero-stage .hero-overline{font-size:9px;padding:4px 9px}
 .hero-stage .hero h1{font-size:clamp(25px,7.3vw,34px);font-weight:700;line-height:1.48;letter-spacing:0;margin:10px 0 6px}
 .hero-stage .hero p{font-size:11.5px;line-height:1.8;max-width:325px}
 .hero-stage .hero-metrics{margin:12px auto 0;gap:5px}
 .hero-stage .hero-metrics span{font-size:9px;padding:4px 8px}
 .hero-stage .search-card{padding:16px 13px 14px;border-radius:15px;box-shadow:0 6px 25px #103f3012}
 .hero-stage .search-card .search-label span{font-size:9px}
 .top-actions #syncTop{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;gap:0!important;padding:0!important}
 .mobile-nav-item>.mobile-nav-icon{margin-inline:auto!important}
 .message-hero{padding:20px 8px 18px}
}
@media(max-width:360px){.hero-stage{padding-inline:7px}.hero-stage .hero h1{font-size:26px}.brand-symbol{width:70px!important;height:50px!important}}
@media(prefers-reduced-motion:reduce){.hero-stage::before{animation:none!important}}

/* V9: صفحة القراءة والمراجعة — تنسيق متجاوب مع الموبايل. */
.hero-brand-v9{display:block;width:158px;height:151px;object-fit:contain;margin:0 auto 8px;filter:drop-shadow(0 11px 17px rgba(23,81,54,.12));animation:ayatBrandIn .8s ease-out both}
@keyframes ayatBrandIn{from{opacity:0;transform:translateY(9px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.brand-symbol{width:50px;height:46px;object-fit:contain}
.hero{padding:17px 16px 21px;margin:0 0 2px;border-radius:26px;background:linear-gradient(130deg,#fffdf8 0%,#f3faf4 46%,#fff9eb 100%);background-size:175% 175%;animation:heroAurora 32s ease-in-out infinite alternate}
.hero:before{opacity:.26}.hero:after{opacity:.07}
.hero h1{font-size:clamp(30px,4.2vw,55px);line-height:1.35;margin:7px 0 9px}
.hero p{font-size:clamp(12px,1.45vw,15px);margin:5px auto 10px;max-width:630px}
.hero-overline{font-size:10px;margin-top:0}
.hero-metrics{margin-top:9px}.hero-stage .search-card{position:relative;z-index:1}
.reader-intro{padding-bottom:16px}.reader-layout{margin-bottom:35px}
.reader-selectors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:5px 0 22px}
.reader-choice{display:flex;flex-direction:column;gap:7px;min-width:0}
.reader-choice label{font-size:11px;color:#657c6c;font-weight:700}
.reader-choice select{width:100%;min-width:0;min-height:45px;border:1px solid #dbe6dd;border-radius:12px;background:#fcfffc;color:#28513c;padding:9px 12px;font-family:inherit;font-size:12px}
.reader-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid #e6ede5;padding-top:17px}
.reader-summary h2{margin:7px 0;font-size:24px;color:#164731}.reader-summary p{margin:0;color:#6e8073;font-size:12px}
.reader-progress{padding:16px;margin:18px 0 10px;border:1px solid #dfe9dd;background:linear-gradient(115deg,#f4faf3,#fffaf1);border-radius:15px}
.reader-progress-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;color:#245c41;font-size:13px}
.reader-progress-track{height:13px;background:#dce8dd;border-radius:90px;overflow:hidden;direction:rtl}
.reader-progress-track>span{display:block;width:0;height:100%;background:linear-gradient(90deg,#2c9164,#195d41);border-radius:90px;transition:width .4s ease}
.reader-progress small{display:block;color:#758478;margin-top:8px;font-size:11px}
.reader-note,.audio-credit,.topic-source{color:#66796d;line-height:1.85;font-size:11px;margin:12px 0 17px}.audio-credit a{color:#245e43;text-decoration:underline}
.reader-verses{display:grid;gap:12px}.reader-verse{border:1px solid #e0e9de;border-radius:16px;padding:18px;background:#fffefb;scroll-margin-top:96px;transition:border-color .2s,box-shadow .2s}
.reader-verse.is-playing{border-color:#8fbda0;box-shadow:0 0 0 3px #e2f2e5}
.reader-verse-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#6d806c}
.reader-ayah{display:block;width:100%;border:0;background:none;color:#1f5a41;text-align:center;font-family:var(--quran-font,inherit);font-size:calc(28px * var(--reader-scale));line-height:2.25;padding:8px 4px 10px;cursor:pointer;overflow-wrap:anywhere}
.reader-ayah:focus-visible{outline:2px solid #c9ac6c;border-radius:7px}
.reader-verse-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:10px}
.reader-verse-actions .btn{font-size:11px;padding:8px 11px;min-height:36px}
.reader-verse .tafsir-details{margin:8px 0 0}.reader-verse .tafsir-details summary{font-size:11px}
.reader-done{background:#e2f2e5!important;color:#1e704b!important;border-color:#b5dfc2!important}
.reader-review-active{background:#fff4d8!important;color:#90650c!important;border-color:#edce7d!important}
.reader-more{text-align:center;padding:18px 0}
.reader-player{position:sticky;bottom:10px;z-index:40;background:#fcfdf9ee;backdrop-filter:blur(16px);border:1px solid #c8dfca;border-radius:17px;padding:13px;box-shadow:0 10px 38px #234f3828;display:grid;gap:10px}
.reader-playing{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px}
.reader-playing>span{font-size:13px;font-weight:750;color:#214f39}.reader-playing small{font-size:11px;color:#798c78}
.reader-player-actions{display:flex;gap:7px;flex-wrap:wrap}.reader-player audio{width:100%;height:42px;display:block}
.topic-chips{display:flex;flex-wrap:wrap;gap:9px;padding:4px 0 16px}
.topic-chip{border:1px solid #d6e4d7;border-radius:100px;color:#345e45;background:#f9fcf8;min-height:40px;padding:8px 14px;font-family:inherit;font-size:13px;cursor:pointer}
.topic-chip.selected{color:white;background:#196343;border-color:#196343;box-shadow:0 5px 13px #2f6a4420}
.topic-heading{padding:12px 0 18px;border-top:1px solid #e5ebe2}.topic-heading h3{color:#1a533a;margin:0 0 6px;font-size:21px}.topic-heading p{margin:0;color:#657b6a;font-size:12px}
.topic-to-reader{margin-inline-start:5px}
@media(max-width:1070px){.reader-selectors{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.desktop-nav .nav-link{font-size:11px;padding:9px 7px}.topbar-inner{gap:5px}}
@media(max-width:650px){
 .hero-brand-v9{width:104px;height:101px;margin:0 auto 4px}
 .hero{padding:12px 9px 14px;border-radius:18px}
 .hero h1{font-size:clamp(27px,7vw,34px);margin:5px 0 6px}
 .hero p{font-size:12px;margin:3px 0 5px}.hero-metrics{margin-top:7px}
 .topbar .brand-symbol{width:43px;height:41px}
 .mobile-nav{justify-content:space-around}
 .mobile-nav-item{flex:1 1 20%;min-width:0;padding:10px 3px 8px}
 .mobile-nav-item span:last-child{font-size:10px;white-space:nowrap}
 .reader-selectors{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .reader-choice{font-size:12px}.reader-summary h2{font-size:19px}
 .reader-verse{padding:13px 10px}.reader-ayah{font-size:calc(24px * var(--reader-scale));line-height:2.3}
 .reader-verse-actions .btn{flex:1 1 43%;min-height:40px}
 .reader-player{bottom:calc(75px + env(safe-area-inset-bottom));margin:0 0 5px;padding:10px;border-radius:13px;max-height:35vh;overflow-y:auto}
 .reader-playing span{font-size:11px}.reader-player-actions .btn{flex:1 1 auto;font-size:10px;padding:8px 6px}
 .topic-chips{gap:6px}.topic-chip{font-size:11px;padding:7px 11px;min-height:38px}
}
@media(max-width:360px){.mobile-nav-item span:last-child{font-size:9px}.reader-ayah{font-size:calc(22px * var(--reader-scale))}}
@media(prefers-reduced-motion:reduce){.hero-brand-v9,.reader-progress-track>span{animation:none!important;transition:none!important}}