/* نور v27.9 — تعلّم الصلاة • رحلتي • شاشة أذان رمضان • مركز الإشعارات */

/* ---------- بطاقة تعلّم الصلاة في اكتشف ---------- */
.discover-feature.learn{background:linear-gradient(135deg,#7a4b0e,#2b1a05 70%);margin-bottom:10px}
.discover-feature.learn:before{background:radial-gradient(circle,#ffd97855,transparent 68%)}
.discover-feature.learn .discover-feature-icon{background:linear-gradient(135deg,#ffe29a,#c98a1b)}
.discover-feature .df-tag{display:inline-block;margin-top:5px;padding:2px 9px;border-radius:99px;background:#ffffff22;font-size:9.5px;font-weight:800}

/* ---------- أيقونة المناسبات (صورة) ---------- */
.occ-img{width:34px;height:34px;display:block}

/* ---------- تعلّم الصلاة ---------- */
.ln-hero{position:relative;overflow:hidden;border-radius:28px;padding:20px;color:#fff;background:linear-gradient(150deg,#0f766e,#064e3b 70%);box-shadow:0 18px 40px rgba(6,78,59,.3)}
.ln-hero:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,226,150,.14),transparent 30%,rgba(255,226,150,.1),transparent 60%);animation:sbSpin 34s linear infinite}
.ln-hero>*{position:relative}
.ln-hero h2{margin:0 0 4px;font-size:23px}.ln-hero p{margin:0;font-size:13px;opacity:.92;line-height:1.8}
.ln-bar{height:9px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden;margin-top:12px}.ln-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffe29a,#f5b83d);border-radius:99px;transition:width .6s}
.ln-path{position:relative;margin-top:14px;padding-inline-start:0}
.ln-lesson{display:flex;align-items:center;gap:13px;width:100%;text-align:right;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:22px;padding:14px;margin-top:10px;position:relative;transition:.15s}
.ln-lesson:active{transform:scale(.985)}
.ln-num{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;flex:none;font-size:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 25%,var(--card)),var(--card));border:1px solid var(--line)}
.ln-lesson.done .ln-num{background:linear-gradient(145deg,var(--primary),var(--primary2));color:#fff;border-color:transparent}
.ln-lesson b{display:block;font-size:15px}.ln-lesson small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
.ln-lesson .tm{margin-inline-start:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.ln-sec{margin-top:14px;border-radius:22px;border:1px solid var(--line);background:var(--card);padding:16px}
.ln-sec h3{margin:0 0 8px;font-size:15px}
.ln-sec p,.ln-sec li{font-size:13.5px;line-height:2;color:var(--text)}
.ln-sec ul,.ln-sec ol{margin:6px 0 0;padding-inline-start:20px}
.ln-ar{font-family:"Amiri","Noto Naskh Arabic",serif;font-size:21px;line-height:2.2;text-align:center;margin:10px 0;padding:12px;border-radius:16px;background:var(--soft)}
.ln-tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:800;background:var(--soft);color:var(--primary);margin-inline-end:5px}
.ln-table{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:12.5px}
.ln-table td{padding:10px 8px;background:var(--soft);text-align:center}
.ln-table td:first-child{border-radius:0 12px 12px 0;font-weight:800}.ln-table td:last-child{border-radius:12px 0 0 12px}
.ln-wudu{display:grid;grid-template-columns:1fr;gap:9px;margin-top:8px}
.ln-w{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:18px;background:var(--soft);border:1px solid var(--line)}
.ln-w .em{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:24px;flex:none;background:radial-gradient(circle at 30% 25%,#e0f7ff,#8fd3f0);position:relative;overflow:hidden}
.ln-w .em:after{content:"";position:absolute;left:50%;top:-8px;width:5px;height:8px;border-radius:50% 50% 60% 60%;background:#4aa8d6aa;animation:lnDrop 2.4s ease-in infinite}
@keyframes lnDrop{0%{transform:translate(-50%,-6px);opacity:0}20%{opacity:1}100%{transform:translate(-50%,58px);opacity:0}}
.ln-w b{display:block;font-size:13.5px}.ln-w small{color:var(--muted);font-size:12px;line-height:1.7}
.ln-w .n{margin-inline-start:auto;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:900;font-size:12px;flex:none}
.pose-card{border-radius:22px;border:1px solid var(--line);background:var(--card);margin-top:12px;overflow:hidden}
.pose-fig{background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 10%,var(--card)),var(--card));padding:8px 0 0;text-align:center;position:relative}
.pose-fig svg{width:100%;max-width:300px;height:auto;display:inline-block}
.pose-fig .qb{position:absolute;top:10px;inset-inline-end:12px;font-size:11px;font-weight:800;color:var(--primary);display:flex;align-items:center;gap:4px}
.pose-body{padding:12px 14px 16px}
.pose-body h4{margin:0 0 4px;font-size:15px}.pose-body .step{color:var(--primary);font-size:11.5px;font-weight:800}
.pose-body p{margin:4px 0 0;font-size:13px;line-height:1.95;color:var(--muted)}
.pose-body .ln-ar{font-size:19px;padding:9px}
.fig-body{fill:none;stroke-linecap:round;stroke-linejoin:round}
.fig-in{animation:figIn .5s ease both}
@keyframes figIn{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.trainer{border-radius:26px;border:1px solid var(--line);background:var(--card);overflow:hidden;margin-top:12px}
.tr-dots{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;padding:10px 14px 0}
.tr-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.2s}.tr-dots i.on{background:var(--primary);transform:scale(1.35)}.tr-dots i.past{background:color-mix(in srgb,var(--primary) 55%,var(--line))}
.tr-ctl{display:flex;gap:8px;padding:0 14px 14px}.tr-ctl .btn{flex:1}
.tr-done{padding:26px 16px;text-align:center}.tr-done .big{font-size:52px}
.quiz-q{border-radius:20px;border:1px solid var(--line);background:var(--card);padding:15px;margin-top:12px}
.quiz-q b{display:block;margin-bottom:9px;font-size:14.5px;line-height:1.8}
.quiz-o{display:block;width:100%;text-align:right;border:1px solid var(--line);background:var(--soft);color:var(--text);border-radius:14px;padding:11px 13px;margin-top:7px;font-weight:700;font-size:13.5px}
.quiz-o.ok{background:#16a34a;color:#fff;border-color:transparent}.quiz-o.bad{background:#dc2626;color:#fff;border-color:transparent}
.quiz-res{text-align:center;padding:24px 14px}.quiz-res .big{font-size:56px;font-weight:900;color:var(--primary)}

/* ---------- رحلتي ---------- */
.jr-hero{position:relative;overflow:hidden;border-radius:30px;padding:20px;color:#fff;background:linear-gradient(150deg,#0f766e,#1e1b4b 85%);box-shadow:0 20px 44px rgba(15,23,80,.32)}
.jr-hero:before{content:"";position:absolute;inset:-30% -10% auto auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,226,150,.28),transparent 65%)}
.jr-hero>*{position:relative}
.jr-top{display:flex;align-items:center;gap:14px}
.jr-ring{--p:0%;width:92px;height:92px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(#ffe29a var(--p),rgba(255,255,255,.18) 0)}
.jr-ring div{width:74px;height:74px;border-radius:50%;background:#10204a;display:grid;place-items:center;text-align:center;line-height:1.1}
.jr-ring b{font-size:24px;color:#ffe29a;display:block}.jr-ring small{font-size:9.5px;opacity:.85}
.jr-top h2{margin:0;font-size:21px}.jr-top p{margin:4px 0 0;font-size:12.5px;opacity:.9;line-height:1.7}
.jr-xp{height:8px;border-radius:99px;background:rgba(255,255,255,.2);margin-top:14px;overflow:hidden}.jr-xp i{display:block;height:100%;background:linear-gradient(90deg,#ffe29a,#f5b83d);border-radius:99px}
.jr-xpt{display:flex;justify-content:space-between;font-size:10.5px;opacity:.85;margin-top:5px}
.jr-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.jr-stat{border-radius:22px;padding:14px;border:1px solid var(--line);background:var(--card);position:relative;overflow:hidden}
.jr-stat .ic{font-size:22px}.jr-stat b{display:block;font-size:26px;margin-top:4px;color:var(--primary);line-height:1.1}.jr-stat small{color:var(--muted);font-size:11.5px}
.jr-chart{display:flex;align-items:flex-end;gap:5px;height:110px;padding-top:8px}
.jr-chart div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px}
.jr-chart i{display:block;width:100%;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--primary),var(--primary2));min-height:4px;transition:height .6s}
.jr-chart span{font-size:9.5px;color:var(--muted)}.jr-chart .today i{outline:2px solid var(--gold);outline-offset:1px}.jr-chart .zero i{background:var(--line)}
.jr-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:10px}
.jr-badge{border-radius:18px;padding:12px 6px;text-align:center;border:1px solid var(--line);background:var(--card)}
.jr-badge .e{font-size:28px;display:block;filter:grayscale(1);opacity:.35}.jr-badge b{display:block;font-size:11px;margin-top:5px;color:var(--muted)}
.jr-badge.on{background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 20%,var(--card)),var(--card));border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.jr-badge.on .e{filter:none;opacity:1}.jr-badge.on b{color:var(--text)}
.jr-msg{margin-top:12px;border-radius:20px;padding:14px 16px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 16%,var(--card)),var(--card));border:1px solid var(--line);font-size:13.5px;line-height:1.95}

/* ---------- شاشة أذان رمضان ---------- */
.adx.ram-adx{--glow:#ffd36b;--mosque:#04050f;animation:adxIn .8s ease both}
.ram-adx .adx-sky{background:linear-gradient(180deg,#070a26 0%,#1a1650 38%,#5a2a6e 66%,#c8553d 88%,#ffb347 100%);animation:none}
.ram-adx .adx-stars{opacity:1;inset:0 0 34% 0}
.ram-adx .ra-moon{position:absolute;top:calc(64px + env(safe-area-inset-top,0px));left:7%;width:74px;height:74px;filter:drop-shadow(0 0 20px #ffe08a) drop-shadow(0 0 46px #ffe08a88);animation:sbFloat 7s ease-in-out infinite;z-index:2}
.ram-adx .ra-lan{position:absolute;top:0;width:42px;transform-origin:50% 0;animation:sbSway 4.6s ease-in-out infinite;z-index:3;filter:drop-shadow(0 6px 14px rgba(255,170,40,.55))}
.ra-lan.a{left:22%;animation-delay:-.7s}.ra-lan.b{left:48%;width:34px;animation-delay:-2.2s}.ra-lan.c{right:8%;width:48px;animation-delay:-3.4s}
.ram-adx .ra-lan .glow{animation:sbFlicker 2.4s ease-in-out infinite}
.ram-adx .adx-lantern{display:none!important}
.ra-city{position:absolute;left:0;right:0;bottom:0;width:100%;height:42%;z-index:1;pointer-events:none}
.ra-city .bld{fill:var(--mosque)}.ra-city .win{fill:#ffd36b;animation:adxWin 3.2s ease-in-out infinite}.ra-city .win.w2{animation-delay:-1.1s}.ra-city .win.w3{animation-delay:-2.2s}
.ra-hill{position:absolute;left:0;right:0;bottom:0;height:11%;background:var(--mosque);z-index:2}
.ra-cannon{position:absolute;bottom:calc(10% - 4px);left:3%;width:150px;z-index:3;cursor:pointer;transform-origin:25% 80%}
.ra-cannon svg{width:100%;height:auto;overflow:visible}
.ra-cannon.fire{animation:raRecoil .6s ease-out}
@keyframes raRecoil{0%{transform:translateX(0)}12%{transform:translateX(-12px) rotate(-1.5deg)}100%{transform:none}}
.ra-flash{position:absolute;bottom:calc(10% + 54px);left:calc(3% + 124px);width:10px;height:10px;border-radius:50%;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff 0,#ffe27a 30%,#ff8a1f 60%,transparent 72%)}
.ra-flash.go{animation:raFlash .75s ease-out}
@keyframes raFlash{0%{opacity:1;transform:scale(1)}15%{opacity:1;transform:scale(22)}100%{opacity:0;transform:scale(34)}}
.ra-ring{position:absolute;bottom:calc(10% + 54px);left:calc(3% + 124px);width:20px;height:20px;border-radius:50%;border:3px solid #ffe9a8;z-index:4;pointer-events:none;opacity:0}
.ra-ring.go{animation:raRing 1.1s ease-out}
@keyframes raRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(30)}}
.ra-smoke{position:absolute;bottom:calc(10% + 48px);left:calc(3% + 112px);width:46px;height:46px;border-radius:50%;background:radial-gradient(circle,#ffffffaa,#c9c9d466 55%,transparent 70%);z-index:4;pointer-events:none;opacity:0}
.ra-smoke.go{animation:raSmoke 4s ease-out forwards}.ra-smoke.s2.go{animation-delay:.2s;animation-duration:4.6s}.ra-smoke.s3.go{animation-delay:.45s;animation-duration:5.2s}
@keyframes raSmoke{0%{opacity:.85;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(70px,-150px) scale(4.2)}}
.ra-spark{position:absolute;z-index:5;width:5px;height:5px;border-radius:50%;pointer-events:none;background:#ffe9a8;box-shadow:0 0 8px 2px #ffb84d;animation:raSpark 1.6s ease-out forwards}
@keyframes raSpark{to{transform:translate(var(--dx),var(--dy));opacity:0}}
.adx.ram-adx.shake{animation:raShake .5s}
@keyframes raShake{0%,100%{transform:none}15%{transform:translate(-7px,5px)}30%{transform:translate(6px,-5px)}45%{transform:translate(-5px,-3px)}60%{transform:translate(4px,4px)}80%{transform:translate(-2px,1px)}}
.ra-whiteflash{position:absolute;inset:0;background:radial-gradient(circle at 20% 78%,#fff,#ffd36b99 35%,transparent 65%);opacity:0;z-index:6;pointer-events:none}
.ra-whiteflash.go{animation:raWhite .8s ease-out}
@keyframes raWhite{0%{opacity:.95}100%{opacity:0}}
.ram-adx .adx-hero{padding-bottom:calc(30dvh + 10px)}
.ram-adx .adx-title{font-size:46px;background:linear-gradient(180deg,#fff7d6,#ffd36b);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 18px #000a)}
.ra-iftar{margin-top:10px;max-width:360px;padding:14px 16px;border-radius:22px;background:#0a0b2acc;border:1px solid #ffd36b66;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 30px #ffb84d33;animation:adxFade 5s ease-in-out infinite}
.ra-iftar .ar{font-family:"Amiri","Noto Naskh Arabic",serif;font-size:21px;line-height:2;font-weight:700;color:#fff3c4}
.ra-iftar small{display:block;color:#ffd36b;font-size:11.5px;margin-top:3px}
.ra-banner{font-weight:800;font-size:14px;margin-top:4px;text-shadow:0 2px 12px #000a}
.ra-actions{display:flex;flex-direction:column;gap:9px;width:100%;max-width:360px;margin-top:10px}
.ra-btn{border:1px solid #ffd36b66;background:linear-gradient(135deg,#ffd36bdd,#f59e0bcc);color:#2b1700;border-radius:16px;padding:13px;font-weight:900;font-size:14px}
.ra-btn.sec{background:#0a0b2aaa;color:#ffe9a8}.ra-btn:disabled{opacity:.6}
.ra-tip{background:#070b1ccc;border:1px solid #ffffff30;border-radius:20px;padding:14px;text-align:center;font-size:13.5px;line-height:2}
.ra-tip b{display:block;color:#ffe9a8;margin-bottom:4px}
.ra-fire-hint{font-size:11px;opacity:.85;margin-top:4px}

/* ---------- مركز صحة الإشعارات ---------- */
.nh-card{margin-top:12px;border-radius:22px;border:1px solid var(--line);background:var(--card);padding:16px}
.nh-card h3{margin:0 0 10px;font-size:15px}
.nh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nh-grid div{border-radius:16px;background:var(--soft);padding:11px 6px;text-align:center}
.nh-grid b{display:block;font-size:21px;color:var(--primary);line-height:1.1}.nh-grid small{font-size:10.5px;color:var(--muted)}
.nh-next{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13px}
.nh-next:first-of-type{margin-top:10px}
.nh-next .t{margin-inline-start:auto;color:var(--muted);font-size:11.5px;white-space:nowrap}
.nh-ok{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;padding:4px 11px;border-radius:99px;background:color-mix(in srgb,#16a34a 18%,var(--card));color:#16a34a}
.nh-bad{background:color-mix(in srgb,#dc2626 16%,var(--card));color:#dc2626}
@media(prefers-reduced-motion:reduce){.ln-hero:before,.ln-w .em:after,.ra-moon,.ra-lan,.ra-iftar{animation:none!important}}