:root{
  /* وحدة القياس: 1% من «عرض المسرح» = الأصغر بين عرض الشاشة وارتفاعها×16/9 */
  --u:min(1vw,1.7778vh);
}
@supports (height:1svh){:root{--u:min(1vw,1.7778svh)}}
:root{
  --man-ratio:.5;          /* رأس الرجل عند نصف ارتفاع الواجهة تقريبًا */
}
/* حجم الخط الأساسي يكبر مع الشاشة: 16px (≤1366) ← 18px (FHD) ← 22px (2K) ← 27px (4K) */
html{font-size:clamp(16px,calc(10px + .44*var(--u)),32px);-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
html,body{margin:0;background:#0b0b0b;color:#fff;font-family:'Cairo',system-ui,sans-serif}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.parallax__header{position:relative;height:100vh;height:100svh;min-height:24rem;overflow:hidden}
.parallax__visuals{position:absolute;inset:0}
.parallax__layers{position:absolute;inset:0}
.parallax__layer-img{position:absolute;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:bottom}
.parallax__layer-man{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.parallax__layer-title{position:absolute;left:0;right:0;bottom:calc(100% * var(--man-ratio));display:flex;justify-content:center;align-items:flex-end}
.parallax__title{margin:0;font-size:clamp(3rem,min(18vw,24svh),30rem);font-weight:900;text-align:center;line-height:1.15;padding:0 1rem}
.parallax__fade{position:absolute;left:0;right:0;bottom:0;height:25%;background:linear-gradient(to top,#0b0b0b,transparent);pointer-events:none}
/* اسم الموقع في الوسط */
.icon{margin:3rem auto 2rem;text-align:center;font-size:clamp(2rem,7vw,3.5rem);font-weight:900;letter-spacing:.02em;color:#e5e5e5;opacity:.92}
main{max-width:48rem;margin:0 auto;padding:0 1.5rem 6rem}
h3{font-size:1.5rem;margin:0 0 1rem}

.player{display:grid;gap:1rem;border:1px solid #262626;border-radius:.75rem;padding:1.25rem}
.player h3{margin:0;text-align:center}
.player label{display:grid;gap:.5rem;color:#a3a3a3;font-size:.9rem}
.player input,.player select{width:100%;font:inherit;color:#e5e5e5;background:#0b0b0b;border:1px solid #262626;border-radius:.75rem;padding:.6rem .9rem}
.player input:focus,.player select:focus{outline:none;border-color:#737373}
.now{margin:0;text-align:center;color:#e5e5e5}

.btns{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.btns button{font:inherit;color:#e5e5e5;background:transparent;border:1px solid #404040;border-radius:999px;padding:.4rem 1rem;font-size:.9rem;cursor:pointer;transition:border-color .2s}
.btns button:hover:not(:disabled){border-color:#737373}
.btns button:disabled{opacity:.4;cursor:default}
.err{margin:0;text-align:center;color:#a3a3a3}

.bar{direction:ltr;display:flex;align-items:center;gap:.75rem;border:1px solid #262626;border-radius:999px;padding:.5rem .9rem .5rem .5rem;color:#a3a3a3;font-size:.85rem;font-variant-numeric:tabular-nums}
.play{flex:none;width:2.5rem;height:2.5rem;display:grid;place-items:center;color:#e5e5e5;background:transparent;border:1px solid #404040;border-radius:50%;cursor:pointer;padding:0;transition:border-color .2s}
.play:hover{border-color:#737373}
.play svg{width:1rem;height:1rem;fill:currentColor}
#seek{--p:0%;flex:1;min-width:0;height:1.25rem;margin:0;padding:0;border:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
#seek::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(to right,#e5e5e5 var(--p),#262626 var(--p))}
#seek::-moz-range-track{height:4px;border-radius:99px;background:#262626}
#seek::-moz-range-progress{height:4px;border-radius:99px;background:#e5e5e5}
#seek::-webkit-slider-thumb{-webkit-appearance:none;width:.9rem;height:.9rem;margin-top:-.3rem;border-radius:50%;background:#e5e5e5;border:0}
#seek::-moz-range-thumb{width:.9rem;height:.9rem;border-radius:50%;background:#e5e5e5;border:0}

/* ===== توافق الشاشات ===== */
@media (max-width:600px){.parallax__title{font-size:clamp(3rem,min(26vw,24svh),30rem)}main{padding:0 1rem 4rem}.player{padding:1rem}.icon{margin:2rem auto 1.5rem}}
@media (min-width:1600px){main{max-width:56rem}}
@media (max-height:500px) and (orientation:landscape){.parallax__title{font-size:clamp(2.5rem,min(14vw,30svh),30rem)}.icon{margin:1.5rem auto 1rem}}
@media (pointer:coarse){.btns button,.player select,.player input[type=search]{min-height:2.75rem}.play{width:3rem;height:3rem}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ===== مكتبة الأحاديث (نفس نمط المشغل) ===== */
main{display:grid;gap:1.5rem}
.hlist{display:grid;gap:.5rem}
.hitem{display:grid;gap:.5rem}
.hitem>button{font:inherit;text-align:start;color:#e5e5e5;background:transparent;border:1px solid #262626;border-radius:.75rem;padding:.7rem .9rem;font-size:.95rem;line-height:1.8;cursor:pointer;transition:border-color .2s}
.hitem>button:hover,.hitem.open>button{border-color:#737373}
.hbox{border:1px solid #262626;border-radius:.75rem;padding:1rem;display:grid;gap:.75rem}
.hbox[hidden]{display:none}
.htext{margin:0;font-size:1.05rem;line-height:2.1;color:#e5e5e5}
.hmeta{display:flex;flex-wrap:wrap;gap:.5rem}
.hmeta span{border:1px solid #404040;border-radius:999px;padding:.2rem .9rem;font-size:.85rem;color:#d4d4d4}
.hmeta b{color:#a3a3a3;font-weight:400}
.hbox .ref{margin:0;font-size:.85rem;color:#a3a3a3;line-height:1.8}

/* ===== التفسير الصوتي ===== */
.tlist{max-height:min(60svh,32rem);overflow-y:auto;overscroll-behavior:contain;display:grid;gap:.25rem;align-content:start;padding-inline-end:.25rem}
.tgroup{margin:1rem 0 .25rem;font-size:1.05rem;font-weight:700;color:#e5e5e5}
.tgroup:first-child{margin-top:0}
.trow{display:flex;align-items:center;gap:.75rem;width:100%;font:inherit;text-align:start;color:#e5e5e5;background:transparent;border:0;border-bottom:1px solid #262626;border-radius:0;padding:.7rem .25rem;font-size:.95rem;cursor:pointer;transition:color .2s}
.trow:hover{color:#fff}
.trow.on{color:#fff;font-weight:700}
.trow.on .tn{border-color:#e5e5e5}
.tn{flex:none;min-width:2.25rem;height:2.25rem;padding:0 .4rem;display:grid;place-items:center;border:1px solid #404040;border-radius:999px;font-size:.8rem;color:#a3a3a3;font-variant-numeric:tabular-nums}
.tlist::-webkit-scrollbar{width:6px}.tlist::-webkit-scrollbar-thumb{background:#404040;border-radius:99px}
#tseek{--p:0%;flex:1;min-width:0;height:1.25rem;margin:0;padding:0;border:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
#tseek::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(to right,#e5e5e5 var(--p),#262626 var(--p))}
#tseek::-moz-range-track{height:4px;border-radius:99px;background:#262626}
#tseek::-moz-range-progress{height:4px;border-radius:99px;background:#e5e5e5}
#tseek::-webkit-slider-thumb{-webkit-appearance:none;width:.9rem;height:.9rem;margin-top:-.3rem;border-radius:50%;background:#e5e5e5;border:0}
#tseek::-moz-range-thumb{width:.9rem;height:.9rem;border-radius:50%;background:#e5e5e5;border:0}

/* ===== التذييل ===== */
.foot{border-top:1px solid #262626;margin-top:1rem;padding:2.5rem 1.5rem calc(2.5rem + env(safe-area-inset-bottom,0px));text-align:center;color:#a3a3a3}
.foot__icon{margin:0 auto .75rem;text-align:center;font-size:1.75rem;font-weight:900;letter-spacing:.02em;color:#e5e5e5;opacity:.7}
.foot p{margin:.25rem 0}
.foot__name{font-size:1.5rem;font-weight:900;color:#e5e5e5}
.foot__sub{font-size:.95rem}
.foot__src{font-size:.85rem}
.foot a{color:#d4d4d4;text-underline-offset:.2em}

/* ===== الأقسام المنطوية ===== */
.player.fold{display:block;padding:0}
.fold>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"";flex:none;width:.6rem;height:.6rem;border:solid #a3a3a3;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-.15rem);transition:transform .2s}
.fold[open]>summary::after{transform:rotate(-135deg) translateY(-.15rem)}
.fold>summary:focus-visible{outline:2px solid #737373;outline-offset:-2px;border-radius:.75rem}
.player.fold h3{text-align:start}
.pbody{display:grid;gap:1rem;padding:0 1.25rem 1.25rem}
@media (max-width:600px){.fold>summary{padding:1rem}.pbody{padding:0 1rem 1rem}}

/* ===== الروايات · آيات السورة · حديث اليوم (نفس لغة التصميم) ===== */
.player label[hidden]{display:none}
.ylist{position:relative}
.yrow{align-items:flex-start}
.yrow .tn{margin-top:.4rem}
.yrow .yt{font-size:1.25rem;line-height:2.2}
.yrow.on{font-weight:400}
.hbody{display:grid;gap:.75rem}
.hday>h4{margin:0;text-align:center;font-size:1.05rem;font-weight:700;color:#e5e5e5}
.hday>h4::after{content:"";display:block;width:2.5rem;border-top:1px solid #404040;margin:.6rem auto 0}