/* نور v27 — تحسينات: تثبيت البوصلة، شاشة الأذان الاحترافية، المتجر، قصص الأنبياء */

/* ===================== 1) البوصلة: صفحة ثابتة لا تتحرك ===================== */
html:has(body.qibla-lock),body.qibla-lock{overflow:hidden!important;overscroll-behavior:none;height:100%}
body.qibla-lock{position:fixed;inset:0;width:100%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.qibla-lock .app{height:100%;min-height:0;padding-bottom:0;overflow:hidden}
body.qibla-lock .screen{animation:none!important;height:calc(100% - 78px - 74px - env(safe-area-inset-bottom,0px));overflow:hidden;padding-top:6px;display:flex;flex-direction:column;justify-content:flex-start;gap:0}
body.qibla-lock .page-head{margin-bottom:8px}
body.qibla-lock .page-head h1{font-size:24px}
body.qibla-lock .qcard{padding:10px 14px;flex:none}
body.qibla-lock .qring-wrap{width:min(78vw,40dvh,320px);margin:16px auto 2px;flex:none;contain:layout paint}
body.qibla-lock .qdial{transition:none!important;will-change:transform;backface-visibility:hidden;transform-origin:50% 50%}
body.qibla-lock .qsvg{filter:none}
body.qibla-lock .qring-wrap::after{content:"";position:absolute;inset:4%;border-radius:50%;box-shadow:0 8px 24px rgba(154,109,22,.35);pointer-events:none;z-index:-1}
body.qibla-lock .qacc-wrap{min-height:34px;margin-top:10px;flex:none;display:flex;align-items:center;justify-content:center}
body.qibla-lock #qCalBox{min-height:46px;flex:none}
body.qibla-lock .qibla-cal{margin-top:6px}
body.qibla-lock .qflat-hint{margin-top:8px;flex:none}
body.qibla-lock .btn.full{flex:none}
@media (max-height:640px){body.qibla-lock .qflat-hint{display:none}body.qibla-lock .page-head .muted{display:none}}

/* ===================== 2) شاشة الأذان v2 ===================== */
.adx{--s1:#0b1026;--s2:#1b1b4b;--s3:#3b3a7a;--glow:#ffd978;--ink:#fff;--mosque:#05070f;--star:1;position:fixed;inset:0;z-index:9999;overflow:hidden;color:var(--ink);animation:adxIn .7s ease both}
@keyframes adxIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.adx-sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--s1) 0%,var(--s2) 52%,var(--s3) 100%);background-size:100% 150%;animation:adxSky 26s ease-in-out infinite alternate}
@keyframes adxSky{from{background-position:50% 0}to{background-position:50% 100%}}
.adx-fajr{--s1:#080c2a;--s2:#3a3484;--s3:#e8838c;--glow:#ffc9a8;--star:.9}
.adx-sunrise{--s1:#262b66;--s2:#d9779b;--s3:#ffc27a;--glow:#ffe3a3;--star:.25}
.adx-dhuhr{--s1:#0a6fc4;--s2:#3fb3f2;--s3:#c9efff;--glow:#fff6c9;--star:0;--mosque:#0a1f33}
.adx-asr{--s1:#2a78bd;--s2:#e8b062;--s3:#f8d9a0;--glow:#ffe2a0;--star:0;--mosque:#1b1410}
.adx-maghrib{--s1:#1f1348;--s2:#b83a3a;--s3:#ffab3d;--glow:#ffc15e;--star:.5;--mosque:#07040a}
.adx-isha{--s1:#01030c;--s2:#0b1235;--s3:#1c1f5a;--glow:#ffe9a8;--star:1}

/* نجوم */
.adx-stars{position:absolute;inset:0 0 38% 0;pointer-events:none;opacity:var(--star);transition:opacity 1s}
.adx-stars i{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 7px 1px #fffa;animation:adxTw 3.2s ease-in-out infinite}
.adx-stars i.b{background:#ffe9a8;box-shadow:0 0 10px 2px #ffe9a8aa}
@keyframes adxTw{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:1;transform:scale(1.25)}}
.adx-shoot{position:absolute;top:8%;inset-inline-start:70%;width:110px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,#fff0);opacity:0;transform:rotate(28deg);animation:adxShoot 9s linear infinite;pointer-events:none}
.adx-shoot.s2{top:18%;inset-inline-start:95%;animation-delay:4.5s;animation-duration:12s;width:80px}
.adx-shoot.s3{top:4%;inset-inline-start:40%;animation-delay:7s;animation-duration:15s}
@keyframes adxShoot{0%{opacity:0;transform:translate(0,0) rotate(28deg)}2%{opacity:1}12%{opacity:0;transform:translate(-260px,150px) rotate(28deg)}100%{opacity:0}}
.adx-dhuhr .adx-shoot,.adx-asr .adx-shoot,.adx-sunrise .adx-shoot{display:none}

/* القمر والشمس */
.adx-orb{position:absolute;border-radius:50%;pointer-events:none}
.adx-moon{top:42%;inset-inline-start:11%;width:84px;height:84px;opacity:0;animation:adxFloat 8s ease-in-out infinite}
.adx-moon svg{width:100%;height:100%;fill:#fff3c4;filter:drop-shadow(0 0 14px #ffe9a8) drop-shadow(0 0 40px #ffe9a899)}
.adx-fajr .adx-moon,.adx-isha .adx-moon{opacity:1}
.adx-maghrib .adx-moon{opacity:.8;top:12%;width:56px;height:56px}
@keyframes adxFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-9px) rotate(4deg)}}
.adx-sun{top:8%;inset-inline-end:14%;width:92px;height:92px;opacity:0;background:radial-gradient(circle,#fffbe0 0%,#ffe27a 45%,#ffb300 100%);box-shadow:0 0 50px 22px #ffd45caa,0 0 140px 70px #ffb30055;animation:adxSun 6s ease-in-out infinite}
@keyframes adxSun{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.adx-dhuhr .adx-sun{opacity:1;top:36%;inset-inline-end:12%}
.adx-asr .adx-sun{opacity:1;top:40%;inset-inline-end:12%;background:radial-gradient(circle,#fff1c4 0%,#ffbd4a 55%,#ff8f00 100%)}
.adx-sunrise .adx-sun{opacity:1;top:46%;inset-inline-end:12%}
.adx-maghrib .adx-sun{opacity:1;top:auto;bottom:17%;inset-inline-end:auto;inset-inline-start:calc(50% - 65px);width:130px;height:130px;background:radial-gradient(circle,#fff0b0 0%,#ff9a3c 50%,#e0301e 100%);box-shadow:0 0 70px 30px #ff7a2f99,0 0 180px 90px #ff4d2e55}
.adx-rays{position:absolute;top:-35%;inset-inline-start:-30%;width:160%;height:160%;opacity:0;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 8%,#fff 10%,transparent 12% 20%,#fff 22%,transparent 24% 33%,#fff 35%,transparent 37% 50%,#fff 52%,transparent 54% 66%,#fff 68%,transparent 70% 82%,#fff 84%,transparent 86%);-webkit-mask-image:radial-gradient(circle at 70% 18%,#000 0,transparent 52%);mask-image:radial-gradient(circle at 70% 18%,#000 0,transparent 52%);animation:adxSpin 120s linear infinite}
.adx-dhuhr .adx-rays,.adx-asr .adx-rays{opacity:.2}
.adx-sunrise .adx-rays{opacity:.14}
@keyframes adxSpin{to{transform:rotate(360deg)}}

/* غيوم وطيور وفوانيس */
.adx-cloud{position:absolute;height:34px;border-radius:40px;background:#ffffff30;filter:blur(8px);animation:adxDrift linear infinite;pointer-events:none}
.adx-cloud.c1{top:24%;width:150px;animation-duration:46s;inset-inline-start:-170px}
.adx-cloud.c2{top:36%;width:210px;height:44px;animation-duration:70s;animation-delay:-22s;inset-inline-start:-230px}
.adx-cloud.c3{top:15%;width:120px;animation-duration:58s;animation-delay:-38s;inset-inline-start:-130px}
.adx-dhuhr .adx-cloud{background:#ffffffaa}
.adx-isha .adx-cloud,.adx-fajr .adx-cloud{background:#ffffff14}
@keyframes adxDrift{from{transform:translateX(0)}to{transform:translateX(calc(-100vw - 380px))}}
[dir=ltr] .adx-cloud{animation-name:adxDriftL}
@keyframes adxDriftL{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 380px))}}
.adx-bird{position:absolute;top:30%;inset-inline-start:-40px;width:22px;height:8px;opacity:0;pointer-events:none}
.adx-bird::before,.adx-bird::after{content:"";position:absolute;top:0;width:11px;height:8px;border-top:2px solid #0b1f33;border-radius:50% 50% 0 0;animation:adxFlap .5s ease-in-out infinite alternate}
.adx-bird::before{left:0;transform-origin:100% 100%}.adx-bird::after{right:0;transform-origin:0 100%;animation-delay:.12s}
@keyframes adxFlap{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
.adx-dhuhr .adx-bird,.adx-asr .adx-bird,.adx-fajr .adx-bird{opacity:.75;animation:adxFly 22s linear infinite}
.adx-bird.b2{top:22%;animation-delay:-8s!important;transform:scale(.8)}
.adx-bird.b3{top:36%;animation-delay:-15s!important;transform:scale(.65)}
@keyframes adxFly{from{margin-inline-start:0}to{margin-inline-start:calc(100vw + 80px)}}
[dir=rtl] .adx-bird{inset-inline-start:auto;inset-inline-end:-40px}
[dir=rtl] .adx-bird{animation-name:adxFlyR!important}
@keyframes adxFlyR{from{transform:translateX(0)}to{transform:translateX(calc(-100vw - 80px))}}

/* المسجد — واضح في أسفل الشاشة وخلف المحتوى */
.adx-glow{position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 100%,color-mix(in srgb,var(--glow) 50%,transparent),transparent 70%)}
.adx-floor{position:absolute;left:0;right:0;bottom:0;height:5%;background:var(--mosque);z-index:1;pointer-events:none}
.adx-mosque{position:absolute;left:50%;bottom:0;width:100%;max-width:700px;height:auto;aspect-ratio:400/220;transform:translateX(-50%);pointer-events:none;z-index:1}
.adx-mosque .body{fill:var(--mosque)}
.adx-mosque .trim{fill:none;stroke:var(--glow);stroke-width:.8;opacity:.55}
.adx-mosque .win{fill:var(--glow);animation:adxWin 3.6s ease-in-out infinite}
.adx-mosque .win.w2{animation-delay:-1.2s}.adx-mosque .win.w3{animation-delay:-2.4s}
@keyframes adxWin{0%,100%{opacity:.55}50%{opacity:1}}
.adx-mosque .cres{fill:var(--glow);filter:drop-shadow(0 0 4px var(--glow))}
.adx-mosque .water{fill:url(#adxWater)}
.adx-lantern{position:absolute;top:0;width:2px;height:70px;background:#ffffff40;transform-origin:50% 0;animation:adxSwing 5s ease-in-out infinite;display:none;z-index:2}
.adx-lantern::after{content:"";position:absolute;left:-9px;bottom:-22px;width:20px;height:26px;border-radius:6px 6px 10px 10px;background:linear-gradient(180deg,#ffd978,#ff9d2e);box-shadow:0 0 24px 8px #ffb84d88}
.adx-lantern{height:44px}.adx-lantern.l1{inset-inline-start:3%;height:52px}.adx-lantern.l2{inset-inline-end:16%;height:34px;animation-delay:-1.6s}.adx-lantern.l3{inset-inline-end:3%;height:66px;animation-delay:-3s}.adx-lantern.l4{display:none!important}
.adx-maghrib .adx-lantern,.adx-isha .adx-lantern{display:block}
@keyframes adxSwing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* المحتوى */
.adx-x{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));inset-inline-start:12px;z-index:6;width:42px;height:42px;border-radius:50%;border:1px solid #ffffff33;background:#00000045;color:#fff;font-size:18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.adx-snd{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));inset-inline-end:12px;z-index:6;height:42px;padding:0 14px;border-radius:21px;border:1px solid #ffffff33;background:#00000045;color:#fff;font-size:13px;font-weight:800;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none}
.adx-snd.show{display:inline-flex;align-items:center;gap:6px}
.adx-scroll{position:absolute;inset:0;z-index:4;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(70px + env(safe-area-inset-top,0px)) 18px 0;text-align:center;display:flex;flex-direction:column;align-items:center;background:none!important}
.adx-hero{width:100%;max-width:440px;min-height:calc(100dvh - 70px - env(safe-area-inset-top,0px));padding-bottom:calc(26dvh + 10px);display:flex;flex-direction:column;align-items:center;gap:6px}
.adx-chip{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:800;padding:6px 16px;border-radius:99px;background:#ffffff1f;border:1px solid #ffffff2e;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:0 2px 8px #0006}
.adx-title{margin:4px 0 0;font-size:52px;font-weight:900;line-height:1.15;letter-spacing:.5px;text-shadow:0 4px 22px #0009;animation:adxTitle 3.4s ease-in-out infinite}
@keyframes adxTitle{0%,100%{text-shadow:0 4px 22px #0009,0 0 0 #fff0}50%{text-shadow:0 4px 22px #0009,0 0 34px color-mix(in srgb,var(--glow) 70%,transparent)}}
.adx-time{font-size:34px;font-weight:800;text-shadow:0 2px 14px #0008;direction:ltr;display:inline-flex;align-items:baseline;gap:8px}
.adx-time small{font-size:15px;font-weight:700;opacity:.9}
.adx-sub{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-size:13px;opacity:.92;text-shadow:0 2px 8px #0009}
.adx-takbir{font-family:'Amiri','Noto Naskh Arabic',serif;font-size:22px;font-weight:700;margin:4px 0 2px;text-shadow:0 2px 12px #000a;animation:adxFade 4s ease-in-out infinite}
@keyframes adxFade{0%,100%{opacity:.7}50%{opacity:1}}
.adx-live{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;padding:6px 14px;border-radius:99px;background:#00000040;border:1px solid #ffffff26}
.adx-eq{display:inline-flex;align-items:flex-end;gap:2px;height:16px}
.adx-eq i{width:3px;background:var(--glow);border-radius:2px;animation:adxEq 1s ease-in-out infinite}
.adx-eq i:nth-child(2){animation-delay:-.3s}.adx-eq i:nth-child(3){animation-delay:-.6s}.adx-eq i:nth-child(4){animation-delay:-.15s}
@keyframes adxEq{0%,100%{height:4px}50%{height:16px}}
.adx-hero .adh-main{margin-top:8px}
.adx-pv{font-size:12.5px;font-weight:700;padding:10px 14px;border-radius:14px;background:#00000050;border:1px dashed #ffffff55;margin-top:8px}
.adx-hint{margin-top:auto;padding:14px 0 6px;font-size:12px;opacity:.85;animation:adxHint 2.2s ease-in-out infinite;text-shadow:0 2px 8px #000a}
@keyframes adxHint{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(-6px);opacity:1}}
.adx-cards{width:100%;max-width:440px;display:flex;flex-direction:column;gap:12px;padding:10px 0 calc(30px + env(safe-area-inset-bottom,0px))}
.adx .adh-card{background:#070b1ccc;border-color:#ffffff30}
.adx .adh-card p{font-size:19px}
.adx .adh-close{align-self:center}
@media (min-width:700px){.adx-scroll{padding-inline:calc(50% - 230px)}}
@media (prefers-reduced-motion:reduce){.adx *{animation:none!important}}

/* ===================== 3) المتجر — بطاقات الخلفيات الجديدة ===================== */
.bg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.bg-card{position:relative;border-radius:20px;overflow:hidden;border:2px solid transparent;background:var(--card);box-shadow:var(--shadow);cursor:pointer}
.bg-card.active{border-color:var(--primary)}
.bg-prev{height:110px;position:relative;overflow:hidden}
.bg-prev .st{position:absolute;inset:0;background-repeat:repeat}
.bg-meta{padding:9px 10px 11px}
.bg-meta b{display:block;font-size:13px}
.bg-meta small{font-size:11px;color:var(--muted)}
.bg-badge{position:absolute;top:8px;inset-inline-start:8px;font-size:10px;font-weight:900;padding:3px 9px;border-radius:99px;background:#000a;color:#fff}
.bg-badge.gold{background:linear-gradient(135deg,#f3d675,#b98512);color:#3a2600}
.bg-badge.free{background:#16a34a}
body.has-bg{background:var(--app-bg)!important;background-attachment:fixed!important;background-size:auto,cover!important}
body.has-bg .app{background:transparent}
body.has-bg .screen .card,body.has-bg .screen .lrow{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ===================== 4) قصص الأنبياء v2 ===================== */
.st-head{position:relative;border-radius:24px;overflow:hidden;min-height:150px;margin-bottom:12px;box-shadow:var(--shadow);color:#fff}
.st-head-art{position:absolute;inset:0}.st-head-art svg{width:100%;height:100%;display:block}
.st-head-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 0,#000a 100%)}
.st-head-in{position:relative;padding:22px 18px 16px;display:flex;flex-direction:column;gap:6px;justify-content:flex-end;min-height:150px}
.st-head-in h1{margin:0;font-size:28px;color:#fff;text-shadow:0 3px 14px #000a}
.st-head-in .eyebrow{color:#ffe9a8}
.st-prog{height:7px;border-radius:99px;background:#ffffff40;overflow:hidden}.st-prog i{display:block;height:100%;background:linear-gradient(90deg,#f3d675,#fff);border-radius:99px;transition:width .4s}
.st-head-in small{font-size:12px;opacity:.9}
.st-resume{width:100%;display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:18px;padding:12px 14px;margin:10px 0;text-align:right;box-shadow:var(--shadow)}
.st-resume span{font-size:26px}.st-resume div{flex:1}.st-resume b{display:block;font-size:14px}.st-resume small{color:var(--muted);font-size:11px}
.st-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:6px}
.st-card{border-radius:20px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);cursor:pointer;transition:transform .15s}
.st-card:active{transform:scale(.97)}
.st-art{position:relative;height:104px;overflow:hidden}.st-art svg{width:100%;height:100%;display:block}
.st-emoji{position:absolute;bottom:6px;inset-inline-start:10px;font-size:26px;filter:drop-shadow(0 2px 6px #0008)}
.st-emoji.big{position:static;font-size:40px}
.st-n{position:absolute;top:8px;inset-inline-end:10px;font-size:12px;font-weight:900;color:#fff;background:#0007;border-radius:99px;padding:2px 9px}
.st-done{position:absolute;top:8px;inset-inline-start:10px;width:22px;height:22px;border-radius:50%;background:#16a34a;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900}
.st-body{padding:10px 12px 12px}.st-body h3{margin:0 0 3px;font-size:15px}.st-body small{display:block;color:var(--muted);font-size:10.5px;line-height:1.6;min-height:34px}
.st-meta{display:flex;gap:8px;margin-top:6px;font-size:11px;color:var(--primary);font-weight:800}
.st-read{display:block}
.st-banner{position:relative;border-radius:24px;overflow:hidden;height:210px;box-shadow:var(--shadow);margin:6px 0 10px}
.st-banner svg{width:100%;height:100%;display:block}
.st-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 30%,#000b 100%)}
.st-banner-in{position:absolute;inset:auto 0 0 0;z-index:2;padding:16px 18px;color:#fff;display:flex;flex-direction:column;gap:2px}
.st-banner-in h1{margin:0;font-size:30px;color:#fff;text-shadow:0 3px 14px #000a}.st-banner-in small{font-size:12.5px;opacity:.92}
.st-chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.st-chips span{font-size:11.5px;font-weight:800;padding:6px 12px;border-radius:99px;background:var(--soft);color:var(--text)}
.st-ctrl{display:flex;gap:8px;position:sticky;top:78px;z-index:5;padding:8px 0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.st-ctrl .btn:first-child{flex:1}
.st-chaps{display:flex;flex-direction:column;gap:14px;margin:8px 0}
.st-chap{border-radius:22px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);transition:box-shadow .3s,border-color .3s}
.st-chap.playing{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 35%,transparent),var(--shadow)}
.st-chap-art{position:relative;height:130px}.st-chap-art svg{width:100%;height:100%;display:block}
.st-chap-n{position:absolute;top:10px;inset-inline-start:12px;width:30px;height:30px;border-radius:50%;background:#000a;color:#fff;display:grid;place-items:center;font-size:14px}
.st-chap-body{padding:14px 16px 16px}.st-chap-body h2{margin:0 0 8px;font-size:18px;color:var(--primary)}
.st-chap-body p{margin:0 0 12px;font-size:16px;line-height:2.1}
@media(max-width:390px){.st-grid{grid-template-columns:1fr}}

.adx-rays{display:none!important}
.adx-dhuhr .adx-hero,.adx-asr .adx-hero,.adx-sunrise .adx-hero{text-shadow:0 2px 12px #06304f99}
.adx-dhuhr .adx-chip,.adx-asr .adx-chip{background:#00000030}

/* =====================================================================
   v27.1 — تصميم فاخر لصفحتي «اكتشف» و«المصحف»
   (لا يمسّ أي منطق؛ كل الأزرار والـ id كما هي)
   ===================================================================== */
.pi{display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.pi .fs{fill:currentColor;fill-opacity:.2}
.pi .g{stroke:var(--acc,var(--gold2))}
.pi .gf{stroke:var(--acc,var(--gold2));fill:var(--acc,var(--gold2));fill-opacity:.9}

/* ---------- اكتشف: البطاقة المميّزة ---------- */
.discover-feature{
  --acc:#f6e2a0;
  gap:14px;padding:16px 16px 16px 14px;margin:4px 0 16px;border-radius:26px;border:1px solid transparent;
  background:
    radial-gradient(90% 140% at 100% 0%,rgba(240,207,122,.16),transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 48 48'%3E%3Cpath d='M24 2L30.4 8.5 39.6 8.4 39.5 17.6 46 24 39.5 30.4 39.6 39.6 30.4 39.5 24 46 17.6 39.5 8.4 39.6 8.5 30.4 2 24 8.5 17.6 8.4 8.4 17.6 8.5z' fill='none' stroke='%23f0cf7a' stroke-opacity='.10' stroke-width='1'/%3E%3C/svg%3E") 0 0/56px 56px,
    linear-gradient(135deg,#0f5645 0%,#0a3329 55%,#071f19 100%) padding-box,
    linear-gradient(135deg,rgba(240,207,122,.75),rgba(240,207,122,.08) 45%,rgba(240,207,122,.35)) border-box;
  box-shadow:0 18px 38px -14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-tap-highlight-color:transparent;transition:transform .18s}
.discover-feature:active{transform:scale(.985)}
.discover-feature:before{inset:auto auto -60px -40px;width:180px;height:180px;background:radial-gradient(circle,rgba(88,200,166,.20),transparent 68%)}
.discover-feature-icon{width:56px;height:56px;border-radius:19px;flex:none;color:#0a2d25;--acc:#0a2d25;
  background:radial-gradient(120% 90% at 30% 0%,rgba(255,255,255,.55),transparent 55%),linear-gradient(150deg,#f0d78f,#c39a3e 55%,#8d6722);
  box-shadow:0 10px 22px -6px rgba(214,170,70,.55),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -8px 14px rgba(90,60,10,.28)}
.discover-feature-icon .pi .gf{fill-opacity:1}
.discover-feature b{font-size:17px;font-weight:800;letter-spacing:.2px;color:#fff}
.discover-feature small{color:#bcd9cf;font-size:11px;margin-top:5px;line-height:1.5}
.df-go{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;z-index:1;color:#f0d78f;
  background:rgba(240,215,143,.09);border:1px solid rgba(240,215,143,.28)}

/* ---------- اكتشف: شبكة الأدوات ---------- */
.disc-grid{gap:12px;margin-top:2px}
.disc-btn{
  position:relative;overflow:hidden;min-height:156px;padding:20px 10px 16px;gap:4px;border-radius:26px;
  border:1px solid color-mix(in srgb,var(--line) 85%,transparent);
  background:
    radial-gradient(120% 70% at 50% -10%,color-mix(in srgb,var(--tg) 9%,transparent),transparent 62%),
    linear-gradient(180deg,color-mix(in srgb,var(--card) 92%,#fff 8%),var(--card));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--gold) 20%,transparent),0 12px 26px -14px rgba(0,0,0,.45);
  -webkit-tap-highlight-color:transparent;transition:transform .16s,border-color .2s,box-shadow .2s}
.disc-btn:active{transform:scale(.965);border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
.disc-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.disc-btn small{font-size:14px;font-weight:800;color:var(--text);margin-top:8px;letter-spacing:.1px}
.disc-btn em{font-size:10.5px;line-height:1.55;color:var(--muted);max-width:92%}

/* ألوان «الجواهر» لكل أداة */
.tone-emerald{--t1:#12604d;--t2:#07291f;--glyph:#c6f5e3;--acc:#f0cf7a;--tg:#34d3a0;--tsh:rgba(20,150,115,.55)}
.tone-teal{--t1:#0f5a5c;--t2:#072c30;--glyph:#bdf1ee;--acc:#f0cf7a;--tg:#2fc4c0;--tsh:rgba(20,140,145,.55)}
.tone-gold{--t1:#4a3812;--t2:#1d1608;--glyph:#f6dc92;--acc:#fff4d2;--tg:#e4bf5b;--tsh:rgba(214,170,70,.5)}

.disc-badge{
  position:relative;width:68px;height:68px;border-radius:23px;color:var(--glyph);
  background:
    radial-gradient(130% 90% at 28% -5%,rgba(255,255,255,.26),transparent 52%),
    linear-gradient(158deg,var(--t1),var(--t2));
  border:1px solid color-mix(in srgb,var(--acc) 38%,transparent);
  box-shadow:0 14px 24px -10px var(--tsh),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -12px 20px rgba(0,0,0,.30)}
.disc-badge:before{content:"";position:absolute;inset:5px;border-radius:18px;border:1px solid rgba(255,255,255,.07);pointer-events:none}
.disc-badge .pi,.disc-badge .allah-icon{position:relative;z-index:1;filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--glyph) 45%,transparent))}
.allah-icon{font-size:27px;line-height:1;color:var(--glyph);text-shadow:none}

/* ---------- المصحف: البطاقة العلوية ---------- */
.mq-hero{position:relative;overflow:hidden;border-radius:30px;padding:20px 18px 16px;margin:2px 0 14px;color:#fff;border:1px solid transparent;
  background:
    radial-gradient(80% 120% at 0% 0%,rgba(240,207,122,.14),transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 48 48'%3E%3Cpath d='M24 2L30.4 8.5 39.6 8.4 39.5 17.6 46 24 39.5 30.4 39.6 39.6 30.4 39.5 24 46 17.6 39.5 8.4 39.6 8.5 30.4 2 24 8.5 17.6 8.4 8.4 17.6 8.5z' fill='none' stroke='%23f0cf7a' stroke-opacity='.09'/%3E%3C/svg%3E") 0 0/64px 64px,
    linear-gradient(145deg,#0f5645,#0a3329 55%,#06201a) padding-box,
    linear-gradient(145deg,rgba(240,207,122,.7),rgba(240,207,122,.06) 50%,rgba(240,207,122,.3)) border-box;
  box-shadow:0 22px 44px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.mq-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mq-kicker{display:block;color:#f0cf7a;font-size:12px;font-weight:700;letter-spacing:.4px}
.mq-title h1{margin:4px 0 8px;font-family:"Amiri","Noto Naskh Arabic",serif;font-size:27px;line-height:1.25;font-weight:700;white-space:nowrap;
  background:linear-gradient(180deg,#fff6d6,#ecc968 70%,#c9a047);-webkit-background-clip:text;background-clip:text;color:transparent}
.mq-stats{display:flex;align-items:center;gap:8px;color:#c4ddd3;font-size:11.5px}
.mq-stats i{width:4px;height:4px;border-radius:1px;transform:rotate(45deg);background:#f0cf7a;opacity:.8}
.mq-mark{--acc:#0a2d25;width:62px;height:62px;border-radius:21px;flex:none;display:grid;place-items:center;color:#0a2d25;
  background:radial-gradient(120% 90% at 30% 0%,rgba(255,255,255,.55),transparent 55%),linear-gradient(150deg,#f0d78f,#c39a3e 55%,#8d6722);
  box-shadow:0 12px 24px -8px rgba(214,170,70,.55),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -9px 16px rgba(90,60,10,.28)}
.mq-mark .pi .gf{fill-opacity:1}
.mq-progress{margin:18px 0 14px}
.mq-pbar{height:7px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.mq-pbar i{display:block;height:100%;min-width:6px;border-radius:99px;background:linear-gradient(90deg,#3fd5a8,#f0cf7a);box-shadow:0 0 12px rgba(240,207,122,.45)}
.mq-pmeta{display:flex;justify-content:space-between;margin-top:7px;font-size:11px;color:#b6d3c8}
.mq-pmeta b{color:#f0cf7a;font-weight:800}
.mq-actions{display:grid;grid-template-columns:1fr auto;gap:10px}
.mq-resume,.mq-bm{border:0;font-family:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.mq-resume:active,.mq-bm:active{transform:scale(.97)}
.mq-resume{display:flex;align-items:center;gap:11px;text-align:start;padding:10px 12px;border-radius:19px;color:#2a1d05;
  background:linear-gradient(150deg,#f6e2a0,#d4ab4a 60%,#b78a2c);box-shadow:0 12px 22px -10px rgba(214,170,70,.7),inset 0 1px 0 rgba(255,255,255,.55)}
.mq-ric{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(40,28,6,.16);color:#2a1d05;flex:none}
.mq-rtx{display:flex;flex-direction:column;min-width:0}.mq-rtx b{font-size:14px;font-weight:800}
.mq-rtx small{font-size:11px;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-bm{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:74px;padding:8px 12px;border-radius:19px;
  color:#f0cf7a;font-size:11px;font-weight:700;background:rgba(240,207,122,.08);border:1px solid rgba(240,207,122,.3)}
.mq-bm .pi{--acc:#f0cf7a}

/* ---------- المصحف: البحث والقائمة ---------- */
.qsearch{position:relative;margin:0 0 12px}
.qsearch .pi{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.qsearch .search{margin:0;padding:15px 16px;padding-inline-start:46px;border-radius:20px;font-size:14px;
  background:color-mix(in srgb,var(--card) 94%,#fff 6%);border:1px solid color-mix(in srgb,var(--line) 90%,transparent);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18);transition:border-color .2s,box-shadow .2s}
.qsearch .search:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 20%,transparent)}
#suraList{gap:8px}
.card.sura{padding:10px 14px 10px 12px;gap:14px;min-height:68px;border-radius:22px;border:1px solid color-mix(in srgb,var(--line) 85%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 93%,#fff 7%),var(--card));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--gold) 14%,transparent),0 8px 18px -14px rgba(0,0,0,.5);
  -webkit-tap-highlight-color:transparent;transition:transform .15s,border-color .2s}
.card.sura:active{transform:scale(.985);border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
.sno{position:relative;width:48px;height:48px;flex:none;display:grid;place-items:center}
.sno svg{position:absolute;inset:0;width:100%;height:100%;fill:color-mix(in srgb,var(--primary) 13%,transparent);stroke:var(--gold);stroke-opacity:.7;stroke-width:1.2;stroke-linejoin:round}
.sno span{position:relative;font-size:13.5px;font-weight:800;color:color-mix(in srgb,var(--primary) 55%,var(--text));font-variant-numeric:tabular-nums}
.sname{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.sname b{font-family:"Amiri","Noto Naskh Arabic",serif;font-size:22px;line-height:1.25;font-weight:700;color:var(--text)}
.sread{display:inline-flex;align-items:center;gap:4px;padding:2px 9px 2px 8px;border-radius:99px;font-size:10.5px;font-weight:700;
  color:color-mix(in srgb,var(--primary) 60%,var(--text));background:color-mix(in srgb,var(--primary) 13%,transparent);border:1px solid color-mix(in srgb,var(--primary) 25%,transparent)}
.sgo{color:var(--muted);opacity:.6;flex:none;display:grid;place-items:center}

/* ---------- شريط التنقل: أيقونة «اكتشف» ---------- */
@media(prefers-reduced-motion:reduce){.disc-btn,.card.sura,.discover-feature,.mq-resume,.mq-bm{transition:none!important;animation:none!important}}