@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Amiri:wght@700&display=swap');
:root{--bg:#f7f9f7;--surface:#fff;--ink:#102d29;--muted:#71807d;--line:#e4ebe8;--green:#006f66;--deep:#003e3a;--gold:#f0b94d;--shadow:0 20px 60px rgba(0,55,48,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Cairo,sans-serif;padding-bottom:96px}header{height:72px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;background:#063f3bf5;color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 4px 25px #002d281c}.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}.logo-mark{width:42px;height:42px;border:1px solid #dcae49;border-radius:13px;display:grid;place-items:center;color:var(--gold);font-size:24px}.logo b,.logo small{display:block}.logo b{font-size:18px}.logo small{font-size:8px;color:#cbd9d5}nav{display:flex;gap:28px}nav a{color:#d7e4e1;text-decoration:none;font-size:11px}nav a.active{color:var(--gold);font-weight:800;border-bottom:2px solid var(--gold);padding-bottom:24px}.head-actions{display:flex;gap:7px}.icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid #ffffff25;background:#ffffff0d;color:#fff;cursor:pointer}.hero{min-height:480px;position:relative;background-image:url('hero-bg.jpg');background-size:cover;background-position:center;display:flex;align-items:center;overflow:hidden}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,42,38,.18),rgba(0,40,37,.78))}.hero-content{position:relative;z-index:1;width:min(1180px,100%);margin:auto;padding:70px 6%;color:#fff}.eyebrow{color:var(--gold);font-weight:800;font-size:12px}.hero h1{font:700 58px/1.15 Amiri;margin:16px 0 10px;text-shadow:0 5px 30px #0006}.hero h1 strong{color:#ffd06a}.hero p{max-width:630px;line-height:2;font-size:13px;color:#edf7f4}.search-hero{width:min(650px,100%);height:54px;background:#ffffff16;border:1px solid #ffffff80;border-radius:28px;backdrop-filter:blur(8px);display:flex;align-items:center;gap:10px;padding:5px 8px;margin:25px 0}.search-hero span{font-size:25px;margin:0 8px}.search-hero input{flex:1;border:0;outline:0;background:transparent;color:#fff;font:12px Cairo}.search-hero input::placeholder{color:#dce8e5}.search-hero button{border:0;background:#fff;color:var(--deep);border-radius:22px;padding:10px 20px;font:700 11px Cairo}.hero-actions{display:flex;gap:10px}.primary,.secondary{padding:11px 18px;border-radius:10px;font:700 11px Cairo;text-decoration:none;cursor:pointer}.primary{background:var(--gold);color:#17332f}.secondary{background:#ffffff12;color:#fff;border:1px solid #ffffff55}.section{max-width:1240px;margin:58px auto 0;padding:0 4%}.heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:20px}.heading small{color:var(--gold);font-size:10px;font-weight:800}.heading h2{margin:5px 0 0;font-size:25px}.heading>a{color:var(--green);font-size:10px;text-decoration:none}.grid{display:grid;gap:14px}.six{grid-template-columns:repeat(6,1fr)}.card{min-height:205px;padding:18px 15px 18px;border-radius:16px;color:#fff;text-decoration:none;box-shadow:0 15px 35px #001e1a12;transition:.25s;overflow:hidden;position:relative;isolation:isolate;background:#075e57}
.card::before{content:"";position:absolute;inset:0;background-image:var(--card-bg);background-size:cover;background-position:center;background-repeat:no-repeat;z-index:-3;transition:transform .35s ease}.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.35) 42%,rgba(0,0,0,.78) 100%);z-index:-2;pointer-events:none}.card>*{position:relative;z-index:1}.card:hover::before{transform:scale(1.06)}.card-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;margin:0;z-index:-2;opacity:.82;box-shadow:none;transition:transform .3s ease,opacity .3s ease}.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,18,16,.18) 0%,rgba(0,25,23,.48) 45%,rgba(0,20,18,.82) 100%);z-index:-1;pointer-events:none}.card>*:not(.card-thumb){position:relative;z-index:1}.card i{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.20);backdrop-filter:blur(4px);font-style:normal;font-size:22px;margin-bottom:12px;border:1px solid rgba(255,255,255,.16)}.card:hover{transform:translateY(-5px)}.card h3{font-size:15px;margin:0 0 7px}.card p{font-size:9px;line-height:1.8;color:#ffffffd4;min-height:34px}.card b{font-size:9px}.c-green{background:linear-gradient(145deg,#087c68,#005c53)}.c-purple{background:linear-gradient(145deg,#74318b,#542068)}.c-gold{background:linear-gradient(145deg,#bb7010,#8d4f08)}.c-teal{background:linear-gradient(145deg,#117d80,#075e67)}.c-blue{background:linear-gradient(145deg,#12608d,#164d73)}.c-violet{background:linear-gradient(145deg,#6040a1,#3f2a76)}.audio-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.audio-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden;position:relative;box-shadow:0 10px 30px #00352d0a}.thumb{height:145px;background-size:cover;background-position:center}.t1{background-image:url('hero-bg.jpg');background-position:20% center}.t2{background-image:url('hero-bg.jpg');background-position:60% center}.t3{background-image:url('hero-bg.jpg');background-position:35% center}.t4{background-image:url('hero-bg.jpg');background-position:80% center}.t5{background-image:url('hero-bg.jpg');background-position:50% center}.duration{position:absolute;top:117px;left:9px;background:#002e2ad9;color:#fff;padding:3px 7px;border-radius:6px;font-size:8px}.float-play{position:absolute;top:112px;right:10px;width:38px;height:38px;border-radius:50%;border:2px solid #fff;background:var(--green);color:#fff;cursor:pointer}.audio-body{padding:12px}.audio-body b,.audio-body small{display:block}.audio-body b{font-size:11px}.audio-body small{font-size:8px;color:var(--muted);margin-top:4px}.banner{max-width:1160px;margin:42px auto;padding:25px 35px;border-radius:18px;background:linear-gradient(110deg,#073f3b,#075f57);color:#fff;display:flex;justify-content:space-between;align-items:center;overflow:hidden}.banner b,.banner span{display:block}.banner b{font-size:18px}.banner span{font-size:10px;color:#c8ddda;margin-top:5px}.banner>strong{font-size:45px;color:var(--gold)}footer{margin-top:60px;padding:35px 5%;background:#073d39;color:#fff;display:flex;justify-content:space-between;font-size:10px}footer span{color:#bcd0cc;margin-right:12px}.player{height:82px;position:fixed;bottom:0;left:0;right:0;background:#fffefcf7;border-top:1px solid var(--line);box-shadow:0 -12px 35px #002d2814;z-index:30;display:grid;grid-template-columns:1fr auto 1.4fr auto;gap:24px;align-items:center;padding:0 5%;backdrop-filter:blur(12px)}.track{display:flex;align-items:center;gap:10px;min-width:0}.track>strong{width:44px;height:44px;border-radius:12px;background:var(--green);color:var(--gold);display:grid;place-items:center}.track small,.track b{display:block}.track small{font-size:8px;color:var(--muted)}.track b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.controls{display:flex;gap:12px;align-items:center}.controls button{border:0;background:transparent;cursor:pointer}.controls .big{width:43px;height:43px;border-radius:50%;background:var(--green);color:#fff}.progress{height:4px;background:#e1e9e6;border-radius:4px}.progress span{display:block;width:0;height:100%;background:var(--gold);border-radius:4px}.tools{font-size:9px;color:var(--muted)}.inside{max-width:1100px;margin:50px auto;padding:0 5%}.back{color:var(--green);text-decoration:none;font-size:10px}.section-hero{margin-top:25px;padding:50px;border-radius:22px;background:linear-gradient(100deg,#073f3b,#0b6e64);color:#fff}.section-hero small{color:var(--gold)}.section-hero h1{font:700 52px Amiri;margin:5px 0}.section-hero p{font-size:12px;color:#d4e6e2}.list-title{margin-top:40px}.list-title h2{font-size:23px}.list{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.row{display:flex;align-items:center;gap:15px;padding:15px 20px;border-bottom:1px solid var(--line)}.row:last-child{border:0}.row div{flex:1}.row b,.row small{display:block}.row b{font-size:12px}.row small,.row>span{font-size:9px;color:var(--muted)}.play{border:0;background:#e7f1ef;color:var(--green);width:40px;height:40px;border-radius:50%;cursor:pointer}.dark{--bg:#071613;--surface:#10211d;--ink:#f0f6f3;--muted:#a7b8b3;--line:#263b35}.dark .player,.dark .list{background:#10211d}.dark .icon-btn{color:#fff}
@media(max-width:1000px){.six{grid-template-columns:repeat(3,1fr)}.audio-grid{grid-template-columns:repeat(3,1fr)}nav{display:none}.hero h1{font-size:48px}.player{grid-template-columns:1fr auto;height:76px}.progress,.tools{display:none}}@media(max-width:600px){header{padding:0 3%}.logo b{font-size:15px}.hero{min-height:530px}.hero-content{padding:50px 5%}.hero h1{font-size:43px}.search-hero{height:50px}.hero-actions{flex-direction:column}.section{padding:0 4%;margin-top:45px}.six,.audio-grid{grid-template-columns:1fr 1fr}.card{min-height:180px}.audio-card .thumb{height:125px}.duration{top:97px}.float-play{top:92px}.banner{margin:35px 4%;padding:20px}.banner b{font-size:14px}.banner>strong{font-size:32px}footer{display:block}.player{padding:0 3%;gap:8px}.track{max-width:230px}.inside{padding:0 4%}.section-hero{padding:35px}.section-hero h1{font-size:42px}}
.section-hero{margin:28px auto 0;max-width:1200px;border-radius:28px;padding:58px 46px;background:linear-gradient(120deg,rgba(10,48,52,.96),rgba(18,81,75,.82)),url('hero-bg.jpg') center/cover;color:#fff;box-shadow:0 20px 50px rgba(0,0,0,.12)}.section-hero span{opacity:.75}.section-hero h1{font-size:42px;margin:12px 0}.section-hero p{font-size:18px;opacity:.9}.section-layout{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start}.side{background:var(--card,#fff);padding:22px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.07);position:sticky;top:90px}.side h3{margin-top:0}.side input{width:100%;box-sizing:border-box;padding:12px;border:1px solid #ddd;border-radius:12px;margin-bottom:15px}.side a{display:block;padding:12px;border-radius:10px;background:#e7f4ef;color:#14685c}.section-list{display:grid;gap:12px}.section-item{display:grid;grid-template-columns:56px 1fr 48px;gap:15px;align-items:center;background:var(--card,#fff);padding:14px 18px;border-radius:18px;box-shadow:0 7px 25px rgba(0,0,0,.06)}.item-icon{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;background:#e7f4ef;color:#167263;font-size:23px}.section-item h3{margin:0 0 5px}.section-item p{margin:0;color:#777}.section-item .play{width:44px;height:44px;border:0;border-radius:50%;background:#176f61;color:#fff;cursor:pointer}.empty-note{background:var(--card,#fff);padding:35px;border-radius:20px;text-align:center;color:#777}.light{background:#f8faf9;color:#142b2a}.light .card,.light .audio-card,.light .side,.light .section-item,.light .empty-note{background:#fff} @media(max-width:800px){.section-layout{grid-template-columns:1fr}.side{position:static}.section-hero{padding:40px 24px}.section-hero h1{font-size:32px}nav{display:none}nav.open{display:flex;position:absolute;top:72px;right:15px;left:15px;padding:15px;background:#fff;border-radius:15px;z-index:10;flex-direction:column}.section-item{grid-template-columns:45px 1fr 44px}.item-icon{width:45px;height:45px}}
/* Quran section organization */
.quran-hero{background:linear-gradient(120deg,rgba(5,53,49,.96),rgba(14,105,91,.86)),url('hero-bg.jpg') center/cover}.quran-section{margin-top:42px}.quran-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.quran-top small{color:var(--green);font-weight:800}.quran-top h2{margin:5px 0;font-size:28px}.quran-top p{margin:0;color:var(--muted);font-size:11px}.quran-stats{width:82px;height:82px;border-radius:22px;background:#e9f4f0;display:grid;place-items:center;align-content:center;color:#12685c}.quran-stats b{font-size:27px;line-height:1}.quran-stats span{font-size:9px;margin-top:5px}.quran-tools{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-bottom:18px;background:var(--surface);border:1px solid var(--line);padding:12px;border-radius:16px}.quran-search{display:flex;align-items:center;gap:8px;flex:1;max-width:440px;color:var(--green);font-size:20px}.quran-search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-family:Cairo;font-size:11px}.quran-filters{display:flex;gap:7px;flex-wrap:wrap}.qfilter{border:1px solid var(--line);background:transparent;color:var(--muted);padding:8px 13px;border-radius:10px;font:700 10px Cairo;cursor:pointer}.qfilter.active{background:var(--green);color:#fff;border-color:var(--green)}.quran-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.quran-card{display:grid;grid-template-columns:48px 1fr 42px;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);padding:13px;border-radius:16px;transition:.2s}.quran-card:hover{transform:translateY(-2px);box-shadow:0 10px 25px #00352d10}.surah-number{width:48px;height:48px;border-radius:14px;background:#edf6f3;color:#12685c;display:grid;place-items:center;font-weight:800;font-size:13px}.surah-info h3{margin:0 0 4px;font-size:13px}.surah-info p{margin:0;color:var(--muted);font-size:9px}.qplay{width:40px!important;height:40px!important;background:var(--green)!important;color:#fff!important}.pagination{display:flex;justify-content:center;gap:6px;margin:28px 0 8px;flex-wrap:wrap}.page{min-width:34px;height:34px;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:9px;cursor:pointer;font:700 10px Cairo}.page.active{background:var(--green);color:#fff;border-color:var(--green)}.empty-note{grid-column:1/-1}.dark .quran-stats{background:#173b35;color:#d9eee8}.dark .quran-tools{background:#10211d}.dark .surah-number{background:#173b35}@media(max-width:950px){.quran-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.quran-top{align-items:flex-start}.quran-stats{width:68px;height:68px}.quran-tools{display:block}.quran-search{max-width:none;margin-bottom:10px}.quran-grid{grid-template-columns:1fr}.quran-card{padding:11px}}
.quran-tabs{display:flex;gap:10px;margin:22px 0;flex-wrap:wrap}.qtab{border:1px solid rgba(35,75,67,.15);background:#fff;border-radius:14px;padding:12px 22px;font-weight:800;color:#315b53;cursor:pointer}.qtab.active{background:#245f55;color:#fff;box-shadow:0 8px 22px rgba(36,95,85,.18)}.reciter-box{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#f4faf7,#fff);border:1px solid #dfece6;border-radius:20px;padding:18px;margin-bottom:18px}.reciter-label{display:flex;gap:12px;align-items:center;min-width:250px}.reciter-label span{font-size:28px}.reciter-label b,.reciter-label small{display:block}.reciter-label small{color:#73817d;margin-top:4px}.reciter-box select{flex:1;min-width:220px;padding:14px 16px;border:1px solid #d7e4df;border-radius:13px;background:#fff;font:inherit;color:#234d46}.selected-reciter{margin:10px 0 16px;color:#59716b;font-weight:700}.mixed-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#f7faf9;border:1px solid #e0ebe7;border-radius:20px;padding:20px;margin-bottom:18px}.mixed-intro>div{display:flex;gap:12px;align-items:flex-start}.mixed-intro>div>span{font-size:28px}.mixed-intro h3{margin:0 0 5px}.mixed-intro p{margin:0;color:#71817c}.mixed-intro .quran-search{max-width:320px}.mixed-list{display:grid;gap:10px}.mixed-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e4ebe8;border-radius:16px;padding:14px 16px}.mixed-avatar{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:#eef6f3;font-size:22px}.mixed-info{flex:1}.mixed-info h3{margin:0 0 5px}.mixed-info p{margin:0;color:#778580;font-size:13px}.mixed-open{border:0;background:#eaf5f1;color:#286055;padding:10px 14px;border-radius:11px;font-weight:800;cursor:pointer}.mixed-surahs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:12px 15px 18px;background:#f8fbfa;border-radius:0 0 15px 15px}.mixed-surah{border:1px solid #dce9e4;background:#fff;border-radius:10px;padding:10px;text-align:right;cursor:pointer;font:inherit;color:#315b53}.mixed-surah span{float:left}.loading,.empty-note{padding:30px;text-align:center;color:#74827e}@media(max-width:700px){.reciter-box,.mixed-intro{display:block}.reciter-label{margin-bottom:12px}.reciter-box select{width:100%}.mixed-intro .quran-search{max-width:none;margin-top:15px}.mixed-card{align-items:flex-start}.mixed-open{margin-right:auto}}

/* Local/global search architecture */
.global-search-wrap{position:relative;max-width:760px;margin:26px auto 0;z-index:10}
.global-search{display:flex;align-items:center;gap:12px;background:rgba(8,25,31,.78);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:0 18px;color:#d9b86c;font-size:22px;backdrop-filter:blur(10px)}
.global-search input{width:100%;height:58px;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:16px}
.global-search input::placeholder{color:rgba(255,255,255,.72)}
.global-results{margin-top:10px;background:#fff;border-radius:16px;box-shadow:0 18px 45px rgba(0,0,0,.2);overflow:hidden;text-align:right}
.global-result{display:block;padding:14px 18px;border-bottom:1px solid #eee;color:#17333a;text-decoration:none}
.global-result:last-child{border-bottom:0}.global-result b{display:block}.global-result small{color:#777}
.local-search-note{display:inline-flex;align-items:center;padding:12px 16px;border-radius:12px;background:rgba(28,112,99,.08);color:#28776d;font-size:13px}
.quran-search-results{margin:14px 0 20px;border:1px solid rgba(15,118,110,.16);border-radius:18px;padding:14px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.05)}
.search-summary{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}.search-summary span{font-size:.85rem;opacity:.7}
.search-group{margin-top:12px}.search-group h4{margin:0 0 8px}.search-result{display:inline-flex;align-items:center;gap:8px;margin:4px;padding:9px 12px;border:1px solid #e5e7eb;border-radius:12px;background:#fafafa;cursor:pointer;font:inherit}.search-result small{opacity:.65}.search-result:hover{transform:translateY(-1px)}
.search-surahs{display:flex;flex-wrap:wrap}

.quran-search-results{margin:-6px 0 18px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;box-sizing:border-box}.quran-search-results[hidden]{display:none!important}.quran-tools{position:relative;z-index:2}.quran-search input{min-width:0}.search-summary{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}.search-group{margin-top:10px}.search-group h4{margin:8px 0;font-size:12px}.search-result{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;border:1px solid var(--line);background:transparent;color:var(--ink);padding:9px 11px;border-radius:10px;margin:5px 0;font-family:Cairo;cursor:pointer;text-align:right}.search-result:hover{background:#edf6f3}.search-result small{color:var(--muted);margin-right:8px}.search-surahs{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.empty-note{padding:10px}.dark .quran-search-results{background:#10211d}.dark .search-result:hover{background:#173b35}@media(max-width:650px){.search-surahs{grid-template-columns:1fr}}
.audio-library{padding-bottom:110px}.audio-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.audio-top h2{margin:6px 0}.audio-top p{color:var(--muted);margin:0}.audio-count{min-width:92px;height:92px;border-radius:22px;background:#edf6f3;color:#12685c;display:grid;place-items:center;text-align:center}.audio-count b{font-size:26px}.audio-count span{font-size:10px}.audio-toolbar{display:flex;gap:12px;margin:18px 0;align-items:center}.audio-search{display:flex;align-items:center;gap:8px;flex:1;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0 14px;color:#6c817b;font-size:20px}.audio-search input{height:50px;flex:1;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:14px}.audio-toolbar select{height:50px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);padding:0 14px;font:inherit;min-width:220px}.audio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.audio-card{display:grid;grid-template-columns:50px 1fr 42px;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);padding:13px;border-radius:16px}.audio-icon{width:50px;height:50px;border-radius:14px;background:#edf6f3;display:grid;place-items:center;font-size:21px}.audio-info h3{font-size:13px;margin:0 0 5px}.audio-info p{margin:0;color:var(--muted);font-size:10px}.audio-info p span{margin:0 4px}.audio-info small{display:block;color:#2c786d;font-size:9px;margin-top:5px}.dark .audio-count,.dark .audio-icon{background:#173b35}.dark .audio-toolbar select{background:#10211d}@media(max-width:760px){.audio-top{align-items:flex-start}.audio-toolbar{display:block}.audio-search{margin-bottom:10px}.audio-toolbar select{width:100%}.audio-grid{grid-template-columns:1fr}.audio-card{padding:11px}}

.native-audio{width:100%;margin-top:12px;height:38px}.source-link{display:inline-block;margin-top:8px;color:inherit;font-size:12px;text-decoration:underline;opacity:.8}.audio-info .source-link:hover{opacity:1}