/* ───────── Fonts (self-hosted, OFL) ─────────  Tajawal for everything; Amiri only for the Sheikh's name (subset to Arabic letters). */
@font-face{font-family:Tajawal;src:url(fonts/tajawal-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+200C-200F,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Tajawal;src:url(fonts/tajawal-arabic-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+200C-200F,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Tajawal;src:url(fonts/tajawal-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+200C-200F,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Tajawal;src:url(fonts/tajawal-latin-400-normal.woff2) format("woff2");font-weight:400 500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Tajawal;src:url(fonts/tajawal-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Amiri;src:url(fonts/amiri-arabic-700-subset.woff2) format("woff2");font-weight:700;font-display:swap}

/* ───────── Palette "majlis": night green and brass ─────────  (Arabic text never gets letter-spacing: it breaks letter joining) */
:root{
  --bg:#f4f5f2; --card:#fff; --ink:#121a17; --mute:#56625c; --line:#e0e4df; --soft:#f5eedb; --hover:#f0f3ef;
  --night:#0c231c; --night-2:#133328; --night-line:#22493a; --on-night:#eef3ef; --on-night-2:#a9bdb4;
  --brass:#d4ae58; --link:#7a5a14; --focus:#b8862a;
  --font:Tajawal,"Segoe UI",Tahoma,sans-serif; --name:Amiri,Tajawal,serif;
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23d4ae58' stroke-opacity='.08' stroke-width='1'%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3Crect x='17' y='17' width='22' height='22' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 28h6M50 28h6M28 0v6M28 50v6'/%3E%3C/g%3E%3C/svg%3E");
  --pattern-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.11' stroke-width='1'%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3Crect x='17' y='17' width='22' height='22' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 28h6M50 28h6M28 0v6M28 50v6'/%3E%3C/g%3E%3C/svg%3E");
  --shadow:0 10px 30px -18px rgba(12,35,28,.35);
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#07120e; --card:#0e1d17; --ink:#e6ece8; --mute:#9db0a7; --line:#1c352b; --soft:#1d2a1c; --hover:#132820;
  --night:#0a1b15; --night-2:#112c22; --night-line:#22493a; --link:#d9b968; --focus:#d4ae58; --shadow:0 10px 30px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#07120e; --card:#0e1d17; --ink:#e6ece8; --mute:#9db0a7; --line:#1c352b; --soft:#1d2a1c; --hover:#132820;
  --night:#0a1b15; --night-2:#112c22; --night-line:#22493a; --link:#d9b968; --focus:#d4ae58; --shadow:0 10px 30px -18px rgba(0,0,0,.8);
  color-scheme:dark;}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.75 var(--font);letter-spacing:0;min-height:100vh}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit;letter-spacing:0}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:700;line-height:1.45}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
::selection{background:var(--brass);color:#0c231c}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ic{flex:none;vertical-align:-.2em}
.ic.flip{transform:scaleX(-1)}

/* ───────── Motion ───────── */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.stile,.ep,.row,.tile{animation:rise .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*45ms)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ───────── Header (opaque: no backdrop-filter, for old iOS) ───────── */
.top{position:sticky;top:0;z-index:100;background:#0c231c;background:var(--night);color:var(--on-night);border-bottom:1px solid var(--night-line)}
.top-in{display:flex;align-items:center;gap:10px;min-height:68px}
.brand{display:flex;align-items:center;gap:12px;margin-inline-end:auto;line-height:1.3}
.mark{display:block;width:38px;height:38px;color:var(--brass);flex:none}
.mark svg{display:block;width:100%;height:100%}
.brand strong{display:block;font-size:17px;font-weight:700}
.brand .hd{color:var(--brass);font-weight:500;font-size:14px;white-space:nowrap}
.brand small{display:block;color:var(--on-night-2);font-size:12.5px}
.nav{display:none;gap:2px}
.nav a{padding:6px 12px;border-radius:99px;color:var(--on-night-2);font-weight:500;font-size:15px;white-space:nowrap;transition:background .2s,color .2s}
.nav a:hover{color:var(--on-night)}
.nav a.on{background:var(--night-2);color:var(--brass)}
.icon-btn{position:relative;display:block;padding:0;width:40px;height:40px;flex:none;border:0;border-radius:50%;background:var(--night-2);color:var(--on-night);cursor:pointer;transition:background .2s}
.icon-btn:hover{background:var(--night-line)}
.icon-btn .ic{position:absolute;inset:0;margin:auto}
@media(min-width:1180px){.nav{display:flex}.burger{display:none}}

/* ───────── Dark bands (hero, page headers, lesson player) ───────── */
.band{background:var(--night) var(--pattern);background-size:56px;color:var(--on-night)}
.band-in{padding-top:36px;padding-bottom:40px}
.band a{color:inherit}
.crumb{font-size:14px;color:var(--on-night-2);margin-bottom:6px}
.crumb a{color:var(--brass)}
.crumb a:hover{text-decoration:underline}
.page{padding-bottom:10px}

.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:center;padding-top:44px;padding-bottom:52px}
.hero-h{display:flex;flex-direction:column}
.hero-h .pre{color:var(--brass);font-weight:500;font-size:17px}
.hero-h .nm{font:700 clamp(36px,5vw,56px)/1.35 var(--name);margin:4px 0 0}
.hero-h .hf{color:var(--on-night-2);font-size:19px;font-weight:400}
.role{color:var(--on-night-2);margin-top:4px}
.hero-p{color:var(--on-night-2);margin:16px 0 22px;max-width:32em}
.search{position:relative;max-width:520px}
.search input{width:100%;padding:13px 52px 13px 20px;border:1px solid var(--line);border-radius:99px;background:#fff;background:var(--card);color:var(--ink);font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s}
.band .search input{border-color:transparent;background:#fff;color:#121a17}
.search input::placeholder{color:#76817c;opacity:1}
.search input:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(212,174,88,.35)}
.search .ic{position:absolute;right:18px;top:50%;margin-top:-10px;color:#0c231c;pointer-events:none}
:root[data-theme=dark] .page .search .ic{color:var(--mute)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .page .search .ic{color:var(--mute)}}
.stats{display:flex;flex-wrap:wrap;gap:8px 34px;margin:26px 0 0;padding:0;list-style:none;color:var(--on-night-2);font-size:14px;line-height:1.3}
.stats li{display:flex;flex-direction:column}
.stats b{color:var(--brass);font-size:27px;font-weight:700;line-height:1.3}

.feat{display:flex;gap:20px;align-items:center;padding:18px;border-radius:22px;background:var(--night-2);border:1px solid var(--night-line);transition:border-color .25s,transform .25s}
.feat:hover{border-color:var(--brass);transform:translateY(-2px)}
.feat .art{width:176px;flex:none}
.feat-b{display:flex;flex-direction:column;gap:6px;min-width:0}
.feat .k{color:var(--brass);font-weight:500;font-size:14px}
.feat .ft{font-size:20px;font-weight:700;line-height:1.55}
.feat .m{color:var(--on-night-2);font-size:14px}
.feat .go{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:8px 20px;border-radius:99px;background:var(--brass);color:#0c231c;font-weight:700}

.page-band{display:flex;gap:28px;align-items:center}
.pb-t{flex:1;min-width:0}
.page-h{font-size:clamp(28px,4vw,40px);line-height:1.4}
.lede{color:var(--on-night-2);margin-top:6px;max-width:46em}
.band .btn{margin-top:14px}
.sec-ic{position:relative;display:block;width:84px;height:84px;flex:none;border-radius:22px;background:var(--night-2);border:1px solid var(--night-line);color:var(--brass)}
.sec-ic .ic{position:absolute;inset:0;margin:auto}

/* ───────── Series artwork ───────── */
.art{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:1/1;padding:14px;border-radius:16px;overflow:hidden;background-color:#0f3b2e;background-color:var(--c);color:#fff;line-height:1.35}
.art::before{content:"";position:absolute;inset:0;background:var(--pattern-w);background-size:56px}
.art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.28))}
.art-s{position:absolute;top:12px;right:12px;width:26px;height:26px;color:var(--brass);z-index:1}
.art-t{position:relative;z-index:1;font-size:21px;font-weight:700;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art-n{position:relative;z-index:1;font-size:13px;opacity:.88}
.art.mini{width:52px;height:52px;padding:0;border-radius:12px;flex:none}
.art.mini::before{background-size:30px}
.art.big{width:220px;flex:none}
.art.big .art-t{font-size:26px}

/* ───────── Sections as chips, series as tiles ───────── */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 18px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-weight:500;transition:border-color .2s}
.chip:hover{border-color:var(--focus)}
.chip .ic{color:var(--link)}
.chip small{color:var(--mute);font-size:14px}
.sec{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:44px 0 16px}
.sec h2{font-size:23px}
.sec a{display:inline-flex;align-items:center;gap:3px;color:var(--link);font-weight:500;font-size:15px;white-space:nowrap}
.sec a:hover{text-decoration:underline;text-underline-offset:5px}
.stiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stile{display:block;transition:transform .25s}
.stile:hover{transform:translateY(-3px)}
.stile .art{box-shadow:var(--shadow)}
.stile-m{display:flex;justify-content:space-between;gap:8px;margin-top:8px;color:var(--mute);font-size:14px}

/* ───────── Lists: episodes and lessons ───────── */
.eps,.list{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.ep,.row{display:flex;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid var(--line);transition:background .2s}
.ep:first-child,.row:first-child,.sect+.row{border-top:0}
.ep:hover,.row:hover{background:var(--hover)}
.tt{flex:1;min-width:0;display:block}
.tt .t{display:block;font-weight:500;line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt .s{display:block;color:var(--mute);font-size:14px}
.ep .d,.row .d{color:var(--mute);font-size:14px;direction:ltr;white-space:nowrap;flex:none}
.pb{position:relative;display:block;width:42px;height:42px;flex:none;border-radius:50%;border:1.5px solid var(--ink);color:var(--ink)}
.pb .ic{position:absolute;inset:0;margin:auto}
.row .no{position:relative;display:block;min-width:42px;height:42px;padding:0 6px;flex:none;border-radius:12px;background:var(--hover);color:var(--link);font-weight:700;font-size:16px;line-height:42px;text-align:center}
.row .no .ic{position:absolute;inset:0;margin:auto}
.row.now{background:var(--soft)}
.row.now .no{background:#0c231c;background:var(--night);color:var(--brass)}
.list.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.list.cols .row{border-top:0;border-bottom:1px solid var(--line)}
.list.cols .row:nth-child(odd){border-inline-end:1px solid var(--line)}
.sect{grid-column:1/-1;font-size:19px;color:var(--link);padding:18px 20px 8px;margin:0;border-bottom:1px solid var(--line)}
.bar{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 16px;align-items:center}
.bar .search{flex:1 1 300px;max-width:none}
.bar select{padding:12px 16px;border:1px solid var(--line);border-radius:99px;background:var(--card);cursor:pointer;font-size:15px}
.count{color:var(--mute);font-size:14px;margin-bottom:10px}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pill{border:1px solid var(--line);background:var(--card);padding:4px 14px;border-radius:99px;font-size:14.5px;cursor:pointer;color:var(--mute);transition:.2s}
.pill:hover{border-color:var(--focus);color:var(--ink)}
.pill.on{background:#0c231c;background:var(--night);border-color:var(--night);color:var(--brass)}
.more{display:block;margin:24px auto;padding:10px 30px;border:1px solid var(--line);background:var(--card);border-radius:99px;cursor:pointer;font-weight:500}
.more:hover{border-color:var(--focus)}
.empty{text-align:center;padding:60px 0;color:var(--mute);font-size:18px}
.empty h1{font-size:30px;color:var(--ink);margin-bottom:16px}

/* ───────── Buttons ───────── */
.btns{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border:1px solid var(--line);border-radius:99px;background:var(--card);font-weight:500;font-size:15px;cursor:pointer;transition:border-color .2s,background .2s}
.btn:hover{border-color:var(--focus)}
.btn.pri{background:#0c231c;background:var(--night);border-color:var(--night);color:var(--brass)}
.btn.brass{background:var(--brass);border-color:var(--brass);color:#0c231c;font-weight:700}
.band .btn:not(.brass){background:var(--night-2);border-color:var(--night-line);color:var(--on-night)}
.btn[aria-disabled=true]{opacity:.4;pointer-events:none;cursor:default}
span.btn{cursor:default}
.btn.sm{padding:3px 14px;font-size:14px}

/* ───────── Lesson: band with artwork and player ───────── */
.lesson-band{display:flex;gap:30px;align-items:flex-start}
.lart{flex:none;display:block}
.w-title{font-size:clamp(23px,3vw,31px);line-height:1.5;margin:4px 0 8px}
.w-meta{display:flex;gap:6px 18px;flex-wrap:wrap;color:var(--on-night-2);font-size:14.5px}
.w-meta span{display:inline-flex;align-items:center;gap:6px}
.orig{color:var(--on-night-2);font-size:15px;margin-top:6px}
.lp{margin-top:20px}
.lp-tg{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:16px 18px;border-radius:16px;background:var(--night-2);border:1px solid var(--night-line)}
.lp-tg p{flex:1 1 260px;color:var(--on-night-2)}
.lp-tg .btn{margin:0}
.native{width:100%;height:46px;color-scheme:dark}
.lp-ui{display:none}
.js .native{display:none}
.js .lp-ui{display:block}
.seek{-webkit-appearance:none;appearance:none;display:block;width:100%;height:22px;margin:0;background:transparent;cursor:pointer;--p:0%}
.seek::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:var(--night-line);background:linear-gradient(to left,var(--brass) var(--p),var(--night-line) var(--p))}
.seek::-moz-range-track{height:6px;border-radius:6px;background:var(--night-line)}
.seek::-moz-range-progress{height:6px;border-radius:6px;background:var(--brass)}
.seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-5px;border-radius:50%;background:#fff;border:0}
.seek::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:0}
.times{display:flex;justify-content:space-between;color:var(--on-night-2);font-size:13.5px;direction:ltr;flex-direction:row-reverse}
.ctl{display:flex;align-items:center;gap:20px;margin-top:8px;flex-wrap:wrap}
.cb{position:relative;display:block;width:44px;height:44px;padding:0;flex:none;border:0;border-radius:50%;background:transparent;color:var(--on-night);cursor:pointer}
.cb:hover{background:var(--night-2)}
.cb .ic{position:absolute;inset:0;margin:auto}
.cb.play{width:62px;height:62px;background:var(--brass);color:#0c231c}
.cb.play:hover{background:#e3c06e}
.speeds{display:flex;gap:6px;margin-inline-start:auto;direction:ltr}
.speeds button{padding:2px 12px;border:1px solid var(--night-line);border-radius:99px;background:transparent;color:var(--on-night-2);font-size:14px;cursor:pointer}
.speeds button.on{background:var(--brass);border-color:var(--brass);color:#0c231c}
.ap-err{margin-top:12px;padding:8px 14px;border-radius:12px;background:var(--night-2);border:1px solid var(--brass);color:var(--on-night);font-size:15px}
.side{margin-bottom:10px}
.side .sec{margin-top:36px}

/* lite YouTube player (YouTube loads only when the visitor presses play) */
.frame{margin-top:20px;border-radius:16px;overflow:hidden;max-width:760px}
.player{aspect-ratio:16/9;background:#000;position:relative}
.player iframe{width:100%;height:100%;border:0;display:block}
.player.lite{cursor:pointer}
.player.lite img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.75)}
.lite-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.lite-play i{position:absolute;top:50%;left:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--brass);color:#0c231c}
.lite-play i .ic{position:absolute;inset:0;margin:auto}

/* ───────── Docked player ───────── */
.dock{position:fixed;inset-inline:0;bottom:0;z-index:95;background:#0c231c;background:var(--night);color:var(--on-night);border-top:1px solid var(--night-line);animation:fade .3s both}
.dock[hidden]{display:none}
.dock-in{display:flex;align-items:center;gap:16px;min-height:78px}
.d-l{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 320px}
.d-l .tt .s{color:var(--on-night-2);font-size:13px}
.d-ctl{display:flex;align-items:center;gap:6px}
.d-ctl .cb{width:40px;height:40px}
.d-ctl .cb.play{width:46px;height:46px}
.d-pr{flex:1;display:flex;flex-direction:row-reverse;align-items:center;gap:12px;color:var(--on-night-2);font-size:13px;direction:ltr;min-width:0}
.d-pr span{white-space:nowrap}
.d-pr .seek{direction:rtl}
.d-rate{padding:2px 10px;border:1px solid var(--night-line);border-radius:99px;background:transparent;color:var(--on-night);font-size:13.5px;cursor:pointer;direction:ltr}
#d-x{width:36px;height:36px;color:var(--on-night-2)}
body.has-dock{padding-bottom:80px}

/* ───────── Announcement posters ───────── */
.posters{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;margin-top:28px}
.posters.strip{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
.posters.strip .poster:nth-child(n+5){display:none}
.poster{margin:0;display:flex;flex-direction:column;gap:10px;animation:rise .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*45ms)}
.poster-img{display:block;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .25s}
.poster-img:hover{transform:translateY(-3px)}
.poster img{display:block;width:100%;height:auto}
.poster figcaption{display:flex;flex-direction:column;gap:4px}
.poster .t{font-weight:500;line-height:1.6}
.poster .s{display:inline-flex;align-items:center;gap:6px;color:var(--mute);font-size:14px}
.poster .btn{align-self:flex-start;margin-top:4px}

/* ───────── Library tiles, books, about ───────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;margin-top:28px}
.tile{display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:20px;background:var(--card);border:1px solid var(--line);transition:border-color .2s}
.tile:hover{border-color:var(--focus)}
.tile-ic{position:relative;display:block;width:52px;height:52px;flex:none;border-radius:16px;background:#0c231c;background:var(--night);color:var(--brass)}
.tile-ic .ic{position:absolute;inset:0;margin:auto}
.tile-b strong{display:block;font-size:19px}
.tile-b span{display:block;color:var(--mute);font-size:14.5px;line-height:1.6}
.tile-n{margin-inline-start:auto;font-size:22px;font-weight:700;color:var(--link)}
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.book{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.cover{aspect-ratio:3/4;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:20px;background:#0f3b2e var(--pattern-w);background-size:56px}
.book:nth-child(4n+2) .cover{background-color:#5a1f2b}.book:nth-child(4n+3) .cover{background-color:#123c56}.book:nth-child(4n) .cover{background-color:#6b4a16}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover-t{font-size:22px;font-weight:700;line-height:1.5;color:#fff;text-align:center;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.book-b{padding:14px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.book-b h3{font-size:17px;line-height:1.6}
.book-b p{color:var(--mute);font-size:15px}
.book-b .note{color:var(--link);font-size:13.5px}
.book-b .btns{margin:auto 0 0;padding-top:8px}
/* ───────── Scholars' recommendations and written advice (/tazkiyat/) ───────── */
.docs{display:flex;flex-direction:column;gap:24px}
.doc{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px;align-items:start;padding:22px;border-radius:20px;background:var(--card);border:1px solid var(--line);animation:rise .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*45ms);scroll-margin-top:90px}
.doc-img{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);transition:transform .25s}
.doc-img:hover{transform:translateY(-3px)}
.doc-img img,.doc-pdf img{display:block;width:100%;height:auto}
.doc-b h3{font-size:20px;line-height:1.6}
.doc-m{color:var(--mute);font-size:14.5px;display:flex;align-items:center;gap:6px}
.doc-text{margin-top:16px;padding-inline-start:18px;border-inline-start:3px solid var(--brass)}
.doc-text p{margin:0 0 10px;line-height:2.05;font-size:16.5px}
.doc-note{color:var(--mute);font-size:13.5px;margin-top:6px}
.doc-b .btns{margin-top:16px}
.doc-pdf{display:block;aspect-ratio:3/4;overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}
.doc-pdf img{height:100%;object-fit:cover;object-position:top}
.book{scroll-margin-top:90px}
@media (max-width:900px){.doc{grid-template-columns:minmax(0,1fr);padding:16px;gap:16px}.doc-img{max-width:420px}.doc-text p{font-size:16px}}
.about-teaser{margin:28px 0 0;padding:22px 26px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.about-teaser h2{font-size:21px;margin-bottom:4px}
.about-teaser p{color:var(--mute);margin-bottom:12px}
.about{max-width:820px;margin:0 auto;padding-top:26px}
.about .crumb{color:var(--mute)}.about .crumb a{color:var(--link)}
.about-h{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin:10px 0}
.about-photo{width:180px;height:180px;object-fit:cover;border-radius:20px}
.about-h .page-h .dua{color:var(--link);font-size:.55em;font-weight:500}
.about-h .lede{color:var(--mute)}
.about-sec{margin:30px 0}
.about-sec h2{font-size:23px;margin-bottom:8px;color:var(--link)}
.about-sec p,.about-sec li{font-size:18px;line-height:2}
.about-sec ul,.about-sec ol{padding-inline-start:1.4em}
.about-sec ul.links{list-style:none;padding:0;margin:0}
.about-extra{margin-top:50px;padding-top:24px;border-top:1px solid var(--line)}
.about-extra h2{font-size:20px;color:var(--mute)}
.about-intro{margin:0 0 14px;font-size:16px!important;color:var(--mute)}
.linkcard{display:flex;align-items:center;gap:14px;padding:14px 18px;margin:0 0 12px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.linkcard:hover{border-color:var(--focus)}
.lc-ic,.lc-go{flex:none;line-height:0;color:var(--link)}
.lc-tx{flex:1;min-width:0}
.lc-t{display:block;font-weight:700;font-size:17px}
.lc-n{display:block;font-size:14px;color:var(--mute)}

/* ───────── Footer ───────── */
.foot{margin-top:64px;padding:30px 0 36px;border-top:1px solid var(--line);color:var(--mute);font-size:15px}
.foot p{margin:4px 0}
.foot a{color:var(--link);text-decoration:underline;text-underline-offset:4px}
.foot-links a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot-official{display:flex;align-items:center;gap:10px;color:var(--ink)}
.foot-official .mark{width:30px;height:30px;color:var(--link)}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot-up{font-size:13.5px}

/* ───────── Drawer (hamburger menu) ───────── */
body.lock{overflow:hidden}
.scrim{position:fixed;inset:0;background:rgba(5,15,11,.6);z-index:150;animation:fade .3s both}
.scrim[hidden]{display:none}
.drawer{position:fixed;inset-block:0;inset-inline-start:0;width:min(86vw,340px);z-index:200;display:flex;flex-direction:column;background:var(--card);color:var(--ink);box-shadow:-20px 0 40px -20px rgba(0,0,0,.5);transform:translateX(100%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s}
.drawer.open{transform:none;visibility:visible;transition-delay:0s}
.drawer-h{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#0c231c;background:var(--night);color:var(--brass);font-size:20px;font-weight:700}
.drawer-nav{flex:1;overflow:auto;padding:8px 10px}
.drawer-nav a{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;font-weight:500;font-size:17px}
.drawer-nav a:hover{background:var(--hover)}
.drawer-nav a .ic{color:var(--link)}
.drawer-nav a small{margin-inline-start:auto;color:var(--mute);font-size:14px}
.drawer-nav a.on{background:var(--soft)}
.drawer-f{padding:14px 20px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);color:var(--mute);font-size:14.5px}
.drawer-f a{display:flex;gap:8px;align-items:center}

/* ───────── Bottom navigation (mobile) ───────── */
.bottom{display:none;position:fixed;inset-inline:0;bottom:0;z-index:90;grid-template-columns:repeat(5,1fr);align-items:end;background:var(--card);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.bn{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:500;color:var(--mute);padding:4px 0;-webkit-tap-highlight-color:transparent}
.bn[aria-current=page]{color:var(--ink);font-weight:700}
.bn[aria-current=page] .bn-i{color:var(--link)}
.bn.mid{color:var(--ink)}
.bn.mid .bn-i{position:relative;display:block;width:54px;height:54px;margin-top:-28px;border-radius:50%;background:#0c231c;background:var(--night);color:var(--brass);box-shadow:0 0 0 5px var(--card),0 8px 18px -6px rgba(12,35,28,.6)}
.bn.mid .bn-i .ic{position:absolute;inset:0;margin:auto}
.bn-i{line-height:0}

/* ───────── Responsive ───────── */
@media(max-width:1100px){.stiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
  .wrap{padding:0 16px}
  .bottom{display:grid}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  #hsearch{display:none}
  .list.cols{grid-template-columns:minmax(0,1fr)}
  .list.cols .row:nth-child(odd){border-inline-end:0}
  .hero{grid-template-columns:1fr;gap:26px;padding-top:26px;padding-bottom:30px}
  .lesson-band{gap:20px}
  .lesson-band .art.big{width:150px}
  .dock{bottom:calc(78px + env(safe-area-inset-bottom));inset-inline:8px;border-radius:16px;border:1px solid var(--night-line);box-shadow:0 10px 26px -10px rgba(0,0,0,.5)}
  .dock-in{min-height:64px;gap:8px;padding:0 10px}
  .d-l{flex:1}
  .d-pr,#d-fwd,#d-back,.d-rate{display:none}
  body.has-dock{padding-bottom:calc(162px + env(safe-area-inset-bottom))}
}
@media(max-width:700px){
  body{font-size:16px}
  .top-in{min-height:60px;gap:8px}
  .brand small{display:none}
  .brand strong{font-size:15px}
  .brand .hd{font-size:13px}
  .mark{width:32px;height:32px}
  .hero-h .hf{font-size:17px}
  .stats{gap:6px 24px}.stats b{font-size:22px}
  .feat{padding:14px;gap:14px;border-radius:18px}
  .feat .art{width:112px}
  .feat .art .art-t{font-size:15px}.feat .art .art-n,.feat .art .art-s{display:none}
  .feat .ft{font-size:16px}
  .feat .go{padding:6px 16px}
  .stiles{display:flex;overflow-x:auto;gap:12px;margin:0 -16px;padding:2px 16px 8px;scroll-snap-type:x proximity;scrollbar-width:none}
  .stiles::-webkit-scrollbar{display:none}
  .stile{flex:0 0 150px;scroll-snap-align:start}
  .posters.strip{display:flex;overflow-x:auto;gap:12px;margin:0 -16px;padding:2px 16px 8px;scroll-snap-type:x proximity;scrollbar-width:none}
  .posters.strip::-webkit-scrollbar{display:none}
  .posters.strip .poster{flex:0 0 62%;scroll-snap-align:start}.posters.strip .poster:nth-child(n+5){display:flex}
  .posters{grid-template-columns:1fr}
  .stile .art-t{font-size:17px}
  .stiles.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;overflow:visible}
  .sec{margin-top:34px}.sec h2{font-size:20px}
  .ep,.row{padding:12px;gap:12px}
  .ep .d{display:none}
  .art.mini{width:46px;height:46px}
  .pb{width:38px;height:38px}
  .page-band{gap:16px}
  .sec-ic{width:60px;height:60px;border-radius:18px}
  .page-band .art.big{width:96px}.page-band .art.big .art-t,.page-band .art.big .art-n{display:none}
  .lesson-band{flex-direction:column;gap:14px}
  .lesson-band .lart{display:none}
  .ctl{justify-content:center;gap:14px}
  .speeds{width:100%;justify-content:center;margin:4px 0 0}
  .tiles{grid-template-columns:1fr}
  .books{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cover-t{font-size:16px}
  .book-b{padding:10px 12px 12px}
  .book-b h3{font-size:15px}
}

/* ───────── Helpers ───────── */
.skip{position:absolute;inset-inline-start:-999px;top:0;background:var(--brass);color:#0c231c;padding:8px 14px;z-index:400}
.skip:focus{inset-inline-start:8px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#app:focus,h1:focus{outline:none}
@media (forced-colors:active){.art,.cb.play,.bn.mid .bn-i{forced-color-adjust:none}.btn,.pill,.icon-btn,.cb{border:1px solid ButtonText}}
@media (prefers-contrast:more){:root{--mute:#3b4641;--line:#9aa6a0}}