:root{--navy:#082b69;--blue:#0759a7;--gold:#dba340;--gold-dark:#b9852d;--cream:#fff9ec;--ink:#092d67;--shadow:0 8px 26px #0b326219;
--mark:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23c9972f'><path d='M24 4a28 28 0 1 0 30 40A24 24 0 1 1 24 4z'/><path d='M46 2l2.2 5.8L54 10l-5.8 2.2L46 18l-2.2-5.8L38 10l5.8-2.2z'/><path d='M20 30c9-8 18-8 27-1 5 4 11 4 16 1-4 7-13 9-20 4-8-6-14-6-23 2z'/><path d='M24 42c8-7 16-7 23-1 4 3 9 4 13 2-4 6-11 7-17 3-7-5-12-5-19 2z'/></svg>");
--mark-light:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='white'><path d='M24 4a28 28 0 1 0 30 40A24 24 0 1 1 24 4z'/><path d='M46 2l2.2 5.8L54 10l-5.8 2.2L46 18l-2.2-5.8L38 10l5.8-2.2z'/><path d='M20 30c9-8 18-8 27-1 5 4 11 4 16 1-4 7-13 9-20 4-8-6-14-6-23 2z'/><path d='M24 42c8-7 16-7 23-1 4 3 9 4 13 2-4 6-11 7-17 3-7-5-12-5-19 2z'/></svg>")}
*{box-sizing:border-box}
body{margin:0;background:#e8e2d4;color:var(--ink);font-family:Tajawal,'Segoe UI',sans-serif}
.app{max-width:620px;min-height:100dvh;margin:auto;background:linear-gradient(#fdfaf2 0,#f8f3e8 90%);padding-bottom:110px;box-shadow:0 0 45px #5c4e2e2e}

/* ---------- الترويسة (بانر + شريط التواريخ) ---------- */
.hero-banner{padding:12px 14px 0;container-type:inline-size;background:linear-gradient(#e8f0fa,#f3f6fb 70%,transparent)}
.banner-wrap{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 10px 26px #0b32622b}
.banner-img{display:block;width:100%;height:auto}
.bell-hot{position:absolute;left:2.6%;top:26%;width:8%;aspect-ratio:1/1;background:transparent;border:0;cursor:pointer;border-radius:24%}
.date-strip{display:flex;gap:7px;margin-top:10px;align-items:stretch}
.wd-card{flex:1.17;min-width:0;border:0;border-radius:18px;background:url('assets/wd-card.png') center/100% 100% no-repeat;color:#f3c968;font-family:Tajawal;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:var(--shadow)}
.wd-card b{font-size:max(3.4cqw,11px);font-weight:800;text-shadow:0 2px 8px #04163a66;margin-bottom:3.5cqw}
.dstrip-card{flex:1.5;min-width:0;border:0;border-radius:18px;box-shadow:var(--shadow);padding:4% 5% 4.5%;display:flex;flex-direction:column;justify-content:space-between;font-family:Tajawal;background:#fff center/100% 100% no-repeat}
.dstrip-card.qatifi{background-image:url('assets/card-qat.jpg')}
.dstrip-card.uq{background-image:url('assets/card-uq.jpg')}
.dstrip-card.greg{background-image:url('assets/card-greg.jpg')}
.d-title{display:block;text-align:center;font-size:max(1.85cqw,7px);font-weight:800;color:#0a3a86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5%;padding-left:14%}
.uq .d-title{color:#6b4e18}
.d-mid{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:4%}
.d-num{font-size:max(4.8cqw,14px);font-weight:800;color:#15356f;line-height:1;font-family:Tajawal}
.uq .d-num{color:#5d451a}
.d-div{width:2px;align-self:stretch;background:linear-gradient(#0a3a8622,#0a3a8645,#0a3a8622);border-radius:2px}
.d-month{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.d-month span{font-size:max(1.8cqw,7px);font-weight:800;color:#0a3a86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.uq .d-month span{color:#6b4e18}
.pill{font-style:normal;background:#dceafc;color:#0a3a86;border-radius:11px;padding:1px 7px;font-size:max(1.5cqw,6.5px);font-weight:700}
.uq .pill{background:#f3e8cf;color:#6b4e18}
.d-year{display:flex;align-items:center;gap:7px;color:#36578f;font-weight:700;font-size:max(1.6cqw,6.5px);justify-content:center}
.uq .d-year{color:#6b5526}
.d-year::before,.d-year::after{content:'';height:1px;width:15%;background:#c3cfe2}
.uq .d-year::before,.uq .d-year::after{background:#dccca4}

/* ---------- بطاقة الصلاة القادمة ---------- */
main{position:relative;margin-top:14px;padding:0 18px;container-type:inline-size}
.card,.section-card{background:#fffffff2;border:2px solid #fff;border-radius:26px;box-shadow:var(--shadow)}
.next-prayer{position:relative;display:flex;align-items:center;justify-content:space-evenly;gap:4%;padding:4.5% 4%;border:1px solid #f1e2c2;border-radius:26px;overflow:hidden;background:linear-gradient(135deg,#fffdf8 0%,#fdf5e4 60%,#f8ecd2 100%);box-shadow:0 14px 30px #0b32621f}
.next-prayer::before{content:'';position:absolute;left:-5%;top:-16%;width:34cqw;height:34cqw;background:var(--mark) center/contain no-repeat;opacity:.13;pointer-events:none}
.next-prayer::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent 4%,#d5a043 28%,#f3c968 50%,#d5a043 72%,transparent 96%)}
.eyebrow{display:block;font-size:3cqw;font-weight:800;color:#b9852d;letter-spacing:.02em}
.prayer-details{position:static;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2cqw;z-index:1}
.prayer-details h1{font-size:7cqw;line-height:1.05;margin:0;color:#0a3171;font-weight:800;white-space:nowrap}
.prayer-clock,.location{font-size:3.1cqw;margin:0;white-space:nowrap}
.prayer-clock{color:var(--gold-dark)}
.prayer-clock b{color:#092f72;font-size:3.6cqw}
.location{color:#0a3a86;font-weight:700}
.countdown{position:static;width:33%;flex:none;aspect-ratio:1/1;border-radius:50%;background:conic-gradient(#0a4b9d 0deg,#2d9bd5 220deg,#e7ebf1 220deg);padding:4%;direction:ltr;z-index:1;box-shadow:0 0 0 2.5px #e9d2a1,0 8px 20px #0b326224}
.ring-inner{width:100%;height:100%;background:#fff;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5%}
.ring-inner .sun{font-size:4cqw;color:#dca235;line-height:1}
.ring-inner strong{font-weight:800;font-size:4.2cqw;color:#092d68;letter-spacing:.02em}
.cd-units{display:flex;direction:ltr;justify-content:space-between;width:72%;color:#64748f;font-size:2.3cqw}
.cd-units span{flex:1;text-align:center}

/* ---------- البطاقات العامة ---------- */
.section-card{margin-top:20px;padding:12px 10px 10px;background:linear-gradient(135deg,#fffdf6,#fff);border-color:#fff}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 10px 14px}
.section-heading h2{font-size:23px;margin:0}
.gold{color:#d5a043}
.text-button{border:0;border-radius:30px;padding:11px 18px;background:#fff;color:var(--navy);font:700 16px Tajawal;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow)}

/* ---------- أذكار اليوم ---------- */
.dhikr-art{min-height:225px;position:relative;border-radius:20px;border:1px solid #f1e2c2;background:linear-gradient(135deg,#fffdf8 0%,#fdf5e4 60%,#f8ecd2 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:18px 54px 40px}
.dhikr-art::before{content:'';position:absolute;right:-5%;top:-18%;width:34cqw;height:34cqw;background:var(--mark) center/contain no-repeat;opacity:.11;pointer-events:none}
.dhikr-art::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent 4%,#d5a043 28%,#f3c968 50%,#d5a043 72%,transparent 96%)}
.dhikr-art p{text-align:center;font-size:clamp(20px,4.6vw,28px);font-weight:700;line-height:1.8;margin:0;z-index:1;white-space:pre-line;color:#123a7a}
.dhikr-art p::after{content:'❖';display:block;margin:13px auto 0;width:min(230px,60%);color:#c89b3c;font-size:13px;line-height:13px;text-align:center;background:linear-gradient(to left,transparent 0,#d4ab5e 18%,transparent 42%,transparent 58%,#d4ab5e 82%,transparent 100%) center/100% 1.5px no-repeat}
.round-arrow{position:absolute;top:46%;transform:translateY(-50%);border:0;border-radius:50%;background:#fff;width:44px;height:44px;box-shadow:var(--shadow);font-size:22px;color:var(--navy);cursor:pointer;z-index:2}
.previous{right:12px}
.next{left:12px}
.dots{position:absolute;bottom:13px;display:flex;gap:9px;direction:rtl}
.dot{height:10px;width:10px;border-radius:50%;background:#b5cce0}
.dot.active{background:#0a438c}

/* ---------- شريط المواقيت ---------- */
.prayer-strip{display:flex;gap:7px;overflow-x:auto;scrollbar-width:thin;padding:5px 2px 3px}
.prayer-strip.six .time-tile{min-width:calc((100% - 35px)/6)}
.time-tile{min-width:calc((100% - 28px)/5);flex:1;border:1px solid #efe3cb;border-radius:20px;background:#fffdf7;display:flex;align-items:center;flex-direction:column;gap:9px;padding:15px 4px 13px;cursor:pointer;color:var(--navy);font:700 15px Tajawal}
.time-tile .symbol{color:#d99e36;line-height:0}
.time-tile .symbol svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.time-tile .time{font-size:14px;white-space:nowrap;padding:3px 9px;border-radius:13px;border:1px solid transparent}
.time-tile.selected{background:linear-gradient(#0a3a84,#0d55a8);color:#fff;border-color:#0a3a84}
.time-tile.selected .symbol{color:#ffcc65}
.time-tile.selected .time{border-color:#ffffff99}

/* ---------- شريط التنقل ---------- */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(620px,100%);height:88px;display:flex;justify-content:space-around;background:#fffffff8;box-shadow:0 -8px 28px #102e4d1c;border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom);z-index:5}
.nav-item{position:relative;border:0;background:none;color:#8a93a8;font:700 14px Tajawal;min-width:18%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.nav-item svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nav-item.active{color:var(--navy)}
.nav-item.active:before{content:'';position:absolute;top:0;width:52px;height:5px;background:var(--gold);border-radius:0 0 8px 8px}
.toast{position:fixed;z-index:10;bottom:100px;left:50%;transform:translateX(-50%);background:#0c3678;color:white;padding:12px 20px;border-radius:16px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90%;text-align:center}
.toast.show{opacity:1}

/* ---------- الصفحات الداخلية ---------- */
.hidden{display:none}
.page-head{position:relative;overflow:hidden;padding:34px 24px 12px;background:linear-gradient(140deg,#0a2c6b,#0d418f 55%,#0a5bad);color:#fff;border-radius:0 0 34px 34px;box-shadow:var(--shadow)}
.page-head::before{content:'';position:absolute;left:-18px;top:-24px;width:150px;height:150px;background:var(--mark-light) center/contain no-repeat;opacity:.09;pointer-events:none}
.page-head::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent 4%,#d5a043 28%,#f3c968 50%,#d5a043 72%,transparent 96%)}
.page-head h1{margin:0;font-size:30px;position:relative}
.page-sub{margin:8px 0 6px;color:#ffe9bd;font-size:15px;position:relative}
.page main{margin-top:16px}

/* التقويم */
#page-calendar .section-card{position:relative;overflow:hidden;border:1px solid #f1e2c2;background:linear-gradient(135deg,#fffdf8 0%,#fdf5e4 60%,#f8ecd2 100%)}
#page-calendar .section-card::before{content:'';position:absolute;left:-5%;top:-8%;width:30cqw;height:30cqw;background:var(--mark) center/contain no-repeat;opacity:.1;pointer-events:none}
#page-calendar .section-card::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent 4%,#d5a043 28%,#f3c968 50%,#d5a043 72%,transparent 96%)}
#page-calendar .section-card>*{position:relative;z-index:1}
.cal-card{padding:16px 12px}
.cal-nav{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 14px}
.cal-nav h2{margin:0;font-size:22px;color:#0a3171}
.round-arrow.static{position:static;transform:none}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}
.cal-dow{font-size:12px;font-weight:700;color:#b9852d;padding:5px 0}
.cal-cell{border:1px solid #efe3cb;border-radius:13px;background:#fff;padding:7px 2px;cursor:pointer;color:var(--ink);font-family:Tajawal;box-shadow:0 2px 6px #0b32620d}
.cal-cell b{display:block;font-size:17px}
.cal-cell small{display:block;color:#b08a3e;font-size:11px;margin-top:2px}
.cal-cell.joy:not(.picked){background:linear-gradient(#fdf7e3,#f8edcd);border-color:#e3c87f}
.cal-cell.joy:not(.picked) small{color:#8f6a1a}
.cal-cell.grief:not(.picked){background:linear-gradient(#33415c,#1f2c45);border-color:#1f2c45;color:#e8edf5}
.cal-cell.grief:not(.picked) small{color:#c4b07e}
.cal-cell.today{outline:2px solid var(--gold);outline-offset:1px}
.cal-cell.picked{background:linear-gradient(#073b8d,#0c5bb0);color:#fff}
.cal-cell.picked small{color:#ffd98a}
.today-btn{display:block;margin:14px auto 4px}
.cal-mode{display:flex;gap:2px;background:#eef3f9;border:1px solid #dbe6f2;border-radius:12px;padding:3px;width:fit-content;margin:0 auto 12px}
.cal-mode button{border:0;background:transparent;font-family:Tajawal;font-weight:700;font-size:14px;color:#51637d;padding:6px 24px;border-radius:9px;cursor:pointer}
.cal-mode button.active{background:linear-gradient(#073b8d,#0c5bb0);color:#fff;box-shadow:0 2px 6px #0b326226}
.cal-mode.cal-src{margin-top:-5px}
.cal-mode.hidden{display:none}
.cal-note{text-align:center;font-size:12px;font-weight:700;color:#8a6d35;margin:10px 4px 0}
/* سمة الرئيسية حسب طابع اليوم: حِداد (عزاء/عشرة محرم) أو فرح */
body.tone-grief .banner-img{filter:grayscale(.55) brightness(.82) contrast(1.05)}
body.tone-grief .banner-img.custom{filter:none}
body.tone-grief .hero-banner{background:linear-gradient(#e2e5ea,#edeff2 70%,transparent)}
body.tone-grief .next-prayer{background:linear-gradient(135deg,#34435d 0%,#273650 60%,#1d2a42 100%);border-color:#1d2a42}
body.tone-grief .next-prayer::after{background:linear-gradient(90deg,transparent 4%,#8d99ad 28%,#c4cdd9 50%,#8d99ad 72%,transparent 96%)}
body.tone-grief .eyebrow{color:#aeb9c9}
body.tone-grief .prayer-details h1{color:#f0f3f7}
body.tone-grief .prayer-clock{color:#c9b98a}
body.tone-grief .prayer-clock b,body.tone-grief .location{color:#e8edf5}
body.tone-joy .next-prayer::after{background:linear-gradient(90deg,transparent 4%,#2c8a4b 25%,#f3c968 50%,#2c8a4b 75%,transparent 96%)}
body.tone-joy .banner-img{filter:saturate(1.12) brightness(1.03)}
.dua-mark{background:#fbf3da;color:#6d500f;font-weight:700;border-radius:6px;padding:1px 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.occ-row{display:flex;gap:8px;align-items:flex-start;background:#fff;border:1px solid #efe3cb;border-radius:12px;padding:8px 10px;margin:6px 0}
.occ-row.joy{border-color:#bfe3c8;background:#f4fbf5}
.occ-row.grief{border-color:#d9d9e2;background:#f7f7fa}
.occ-badge{flex:0 0 auto;font-size:12px;font-weight:800;color:#0a3171;background:#eef3f9;border-radius:8px;padding:3px 8px;white-space:nowrap}
.occ-row p{margin:0;font-size:14px;font-weight:700;color:var(--ink)}
.occ-row small{display:block;color:#7a6a45;font-size:12px;margin-top:2px}
.cal-mode.cal-src button{padding:4px 16px;font-size:13px}
.cal-title-wrap{flex:1;text-align:center;min-width:0}
.cal-title-wrap small{display:block;color:#b08a3e;font-size:13px;font-weight:700;margin-top:2px}
.times-list{padding:4px 10px 12px}
.times-list svg{width:17px;height:17px;stroke:#d99e36;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-left:3px}
.src-note{text-align:center;color:#2c8a4b;font-size:14px;font-weight:700;padding:10px 4px 2px}

/* تحويل التاريخ */
.conv-card{padding:14px 14px 12px}
.conv-body{display:flex;flex-direction:column;gap:10px}
.conv-row{display:flex;gap:8px;flex-wrap:wrap}
.conv-row .city-sel{flex:1;min-width:110px}
.conv-row .city-sel.sm{flex:0 1 90px;min-width:70px}
#convOut .kv b{direction:rtl}
.conv-src{color:#2c8a4b;font-size:13px;font-weight:700}

/* صفوف معلومات */
.kv{display:flex;justify-content:space-between;align-items:center;padding:11px 8px;border-bottom:1px dashed #e9e0ca;font-size:17px}
.kv:last-child{border-bottom:0}
.kv b{color:#0a3a86}

/* صفحة الأدعية */
.dhikr-card{display:block;width:100%;text-align:center;padding:22px 16px 14px;cursor:pointer;font-family:Tajawal;color:var(--ink)}
.dhikr-card p{margin:0 0 14px;font-size:21px;font-weight:700;line-height:1.9}
.dhikr-meta{display:flex;justify-content:space-between;align-items:center}
.badge{background:#0a3a86;color:#fff;border-radius:20px;padding:6px 16px;font-size:15px;font-weight:700}
.dhikr-card.done .badge{background:#2c8a4b}
.reset{color:#b9852d;font-size:14px;font-weight:700}
.dhikr-card.done{background:linear-gradient(135deg,#eefaf0,#fff)}

/* أعمال اليوم / قوائم المحتوى */
.amal-list{padding:2px 6px 8px}
.amal-sub{font-size:13.5px;font-weight:800;color:#b9852d;margin:10px 4px 6px}
.amal-row{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:1px solid #efe3cb;border-radius:14px;padding:11px 12px;margin:6px 0;cursor:pointer;font-family:Tajawal;color:#123a7a;text-align:right}
.amal-row:active{background:#fdf6e8}
.amal-title{font-size:15.5px;font-weight:700;line-height:1.5}
.amal-badges{display:flex;gap:5px;flex:none}
.amal-badge{font-style:normal;background:#eef3fa;color:#45618f;border-radius:10px;padding:2px 8px;font-size:11px;font-weight:700;white-space:nowrap}
.amal-badge.gold{background:#faf0da;color:#9a6b1d}
.amal-empty{color:#8a93a8;text-align:center;padding:14px;font-size:14px}
.amal-group{margin:8px 2px}
.amal-group summary{cursor:pointer;font-weight:800;color:#0a3a86;font-size:14px;padding:8px 10px;background:#fff7e8;border-radius:12px;list-style-position:inside}
.amal-group[open] summary{margin-bottom:4px}
.back-btn{margin:0 0 10px}
.back-btn.light{background:#ffffff22;color:#fff;border:1px solid #ffffff44;position:relative;margin-bottom:10px}
.lib-list-title{color:#0a3a86;font-size:18px;margin:4px 4px 10px}

/* القارئ */
.reader-card{padding:18px 18px 14px}
.reader-tools{display:flex;justify-content:space-between;align-items:center;gap:10px}
.font-ctl{display:flex;gap:7px}
.font-ctl button{background:#ffffff22;color:#fff;border:1px solid #ffffff44;border-radius:12px;padding:7px 13px;font:800 15px Tajawal;cursor:pointer}
.font-ctl button:active{background:#ffffff3a}
.reader-body{font-size:19px}
.reader-body p{font-size:inherit;line-height:2.15;color:#132f63;margin:0 0 14px;text-align:justify}
.reader-body p.reader-intro{font-size:14px;color:#8a7340;background:#fdf6e4;border-radius:12px;padding:10px 12px;line-height:1.9}
.reader-body p.dua-pre{font-size:.74em;color:#6d7b92;line-height:2}
.reader-foot{margin-top:10px;border-top:1px dashed #e4d7b8;padding-top:10px}
.reader-foot summary{cursor:pointer;color:#b9852d;font-weight:800}
.reader-foot p{font-size:13.5px;line-height:1.9;color:#5a6680;margin:8px 0}

/* المكتبة */
.lib-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px}
.lib-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 10px;cursor:pointer;font-family:Tajawal;color:var(--ink);margin-top:0}
.lib-icon{font-size:38px}
.lib-card b{font-size:18px}
.lib-card small{color:#8a93a8}

/* المزيد */
.more-card{padding:18px 16px}
.src-opt{display:flex;gap:12px;align-items:flex-start;padding:12px 10px;border:1px solid #efe3cb;border-radius:16px;background:#fffdf7;margin-bottom:10px;cursor:pointer}
.src-opt input{margin-top:5px;accent-color:#0a3a86;width:17px;height:17px;flex:none}
.src-opt b{display:block;font-size:16px;color:#0a3a86}
.src-opt small{display:block;color:#7a8398;font-size:12.5px;line-height:1.7;margin-top:3px}
.loc-row{display:flex;gap:10px;align-items:center;margin:8px 0 4px;flex-wrap:wrap}
.city-sel{flex:1;min-width:150px;border:1px solid #e3d7bb;border-radius:14px;padding:10px 12px;font:700 15px Tajawal;color:#0a3a86;background:#fff}
.more-card h2{margin:0 0 10px;font-size:20px;color:#0a3a86}
.about{font-size:16px;line-height:1.8;margin:8px 2px}
.about.warn{color:#9a6b1d;background:#fff6e3;border-radius:14px;padding:12px}

/* بطاقات بهوية النسائم: الأدعية / المكتبة / المزيد */
.dhikr-card,.lib-card,.more-card{position:relative;overflow:hidden;border:1px solid #f1e2c2;background:linear-gradient(135deg,#fffdf8 0%,#fdf5e4 60%,#f8ecd2 100%)}
.dhikr-card::before,.lib-card::before,.more-card::before{content:'';position:absolute;left:-8%;top:-12%;width:26cqw;height:26cqw;background:var(--mark) center/contain no-repeat;opacity:.09;pointer-events:none}
.dhikr-card::after,.lib-card::after,.more-card::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent 4%,#d5a043 28%,#f3c968 50%,#d5a043 72%,transparent 96%)}
.dhikr-card>*,.lib-card>*,.more-card>*{position:relative;z-index:1}
.dhikr-card.done::after{background:linear-gradient(90deg,transparent 4%,#4aa86a 28%,#7fd49c 50%,#4aa86a 72%,transparent 96%)}

@media(max-width:480px){
.hero-banner{padding:10px 10px 0}
.date-strip{gap:4px}
.wd-card,.dstrip-card{border-radius:10px}
.dstrip-card{padding:3% 4% 3%}
.section-heading h2{font-size:14px}
.section-heading{padding:4px 6px 12px;gap:6px}
.text-button{font-size:11.5px;padding:8px 9px}
.dhikr-art{min-height:200px;padding-left:44px;padding-right:44px}
.round-arrow{width:38px;height:38px;font-size:19px}
.time-tile{min-width:84px}
.prayer-strip{padding-bottom:10px}
.bottom-nav{height:76px}
.nav-item{font-size:11.5px}
.nav-item svg{width:22px;height:22px}
.page-head h1{font-size:24px}
}