: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}

/* === AYAT PREMIUM EDITION — visual only; source texts are untouched === */
: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}}

/* Ayat V3: consistent brand & pixel-aligned icon system on Android/iOS Safari */
.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}
/* SVG icons: fix iPhone Safari baseline drift, mirrored emoji arrows and navbar indicators */
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}
/* More breathing room for the brand and search actions on tiny iPhones */
.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}}

/* V4 — luminous Quran reading interface, restrained motion */
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}}