/* IlmHub – Listen & Watch (design 06, m06). Colours only through the
   theme variables. The first part follows the design screens; the second part adds the real controls, states and phones. */
.ln-sec{padding:64px 0}.ln-sec.sand{background:var(--sand)}.ln-sec.ink{background:var(--ink) var(--pat);color:#fff}
.ln-sec .sec-h{margin-bottom:28px}.ln-sec .sec-h h2{font-size:34px}
.ln-hero .pr{align-items:center}.ln-hero .lf{flex:1;min-width:0;max-width:720px}.ln-hero .rt{flex:0 0 auto}
.ln-sb{background:#fff;border-radius:18px;padding:7px;display:flex;align-items:center;gap:8px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);max-width:640px;margin-top:22px}
.ln-sb .in{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:0 14px;color:var(--mu);font-size:14.5px;height:46px}.ln-sb .in .ic{color:var(--cu);width:20px;height:20px;flex:0 0 auto}.ln-sb .in span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ln-sb .in b{font-weight:500;color:var(--ink)}
.ln-sb .btn{height:44px}
.ln-chips{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}.ln-chips a{height:32px;padding:0 13px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--font-body);color:var(--w70);border:1px solid rgba(255,255,255,.16);white-space:nowrap}.ln-chips a.on{background:var(--cu);border-color:var(--cu);color:var(--ink2)}.ln-chips .ic{width:14px;height:14px}
.ln-stats{display:flex;gap:30px;margin-top:26px;flex-wrap:wrap}.ln-stats b{display:block;font:600 28px/1.1 var(--font-heading);color:#fff}.ln-stats span{font-size:12.5px;color:var(--w70)}
.ln-glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:18px 20px;width:350px;backdrop-filter:blur(8px);flex:0 0 auto}
.ln-glass .k{display:flex;align-items:center;gap:8px;font:800 11px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.ln-glass .r{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.1)}.ln-glass .r:first-of-type{border-top:none}.ln-glass .r img{width:40px;height:40px;border-radius:12px;object-fit:cover;flex:0 0 auto}.ln-glass .r div{flex:1;min-width:0}.ln-glass .r b{display:block;font:700 13px var(--font-body);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ln-glass .r small{font:500 11.5px var(--font-body);color:var(--w70);white-space:nowrap}
.ln-glass .r .pl{width:32px;height:32px;border-radius:50%;background:var(--cu);color:var(--ink2);display:grid;place-items:center;flex:0 0 auto}.ln-glass .r .pl .ic{width:13px;height:13px}
.ml-vp{background:#000;border-radius:28px;overflow:hidden;position:relative}
.ml-vp .scr{aspect-ratio:16/9;position:relative}.ml-vp .scr>img{width:100%;height:100%;object-fit:cover;object-position:center 35%}.ml-vp .scr::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--ink2) 78%,transparent),color-mix(in srgb,var(--ink2) 12%,transparent) 40%,rgba(0,0,0,.88))}
.ml-vp .bigp{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:var(--cu);display:grid;place-items:center;color:var(--ink2);z-index:2;box-shadow:0 0 0 14px color-mix(in srgb,var(--cu) 20%,transparent)}.ml-vp .bigp .ic{width:32px;height:32px}
.ml-vp .ttl{position:absolute;left:22px;top:18px;right:22px;z-index:2;color:#fff;display:flex;align-items:flex-start;gap:12px}.ml-vp .ttl>div{flex:1;min-width:0}.ml-vp .ttl b{font:700 16px var(--font-body);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-vp .ttl small{font:600 12.5px var(--font-body);color:#fff;opacity:.92;text-shadow:0 1px 8px color-mix(in srgb,var(--ink2) 90%,transparent)}.ml-vp .ttl b{text-shadow:0 1px 8px color-mix(in srgb,var(--ink2) 90%,transparent)}
.ml-vp .ttl .ib{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.25);color:#fff;width:36px;height:36px;border-radius:10px}
.ml-vp .cap{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);background:rgba(0,0,0,.72);color:#fff;font:600 14.5px var(--font-body);padding:6px 14px;border-radius:8px;white-space:nowrap;z-index:2;max-width:90%;overflow:hidden;text-overflow:ellipsis}.ml-vp .cap .ar{font-size:18px;color:var(--gold);direction:rtl;display:inline;margin-right:8px}
.ml-vp .vbar{position:absolute;left:0;right:0;bottom:0;padding:14px 20px 16px;z-index:2}
.ml-vp .pr{height:6px;border-radius:6px;background:rgba(255,255,255,.25);position:relative;margin-bottom:12px}.ml-vp .pr i{position:absolute;left:0;top:0;bottom:0;width:38%;background:var(--cu);border-radius:6px}.ml-vp .pr b{position:absolute;top:-4px;width:3px;height:14px;background:#fff;border-radius:2px;margin-left:-1px}.ml-vp .pr u{position:absolute;top:-5px;width:16px;height:16px;border-radius:50%;background:#fff;margin-left:-8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--cu) 45%,transparent)}
.ml-vp .ctl{display:flex;align-items:center;gap:14px;color:#fff;font:600 12.5px var(--font-body);white-space:nowrap}.ml-vp .ctl .ic{width:20px;height:20px}.ml-vp .ctl .sp{margin-left:auto;display:flex;gap:12px;align-items:center}.ml-vp .ctl .tag{height:24px;padding:0 8px;border-radius:6px;border:1px solid rgba(255,255,255,.45);display:inline-grid;place-items:center;font:800 10.5px var(--font-body)}.ml-vp .ctl .tag.on{background:var(--cu);color:var(--ink2);border-color:var(--cu)}
.ml-vp .vw{display:inline-flex;align-items:center;gap:8px}.ml-vp .vol{width:64px;height:4px;border-radius:4px;background:rgba(255,255,255,.3);position:relative;display:inline-block}.ml-vp .vol i{position:absolute;left:0;top:0;bottom:0;width:70%;background:#fff;border-radius:4px}
.ml-ch{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.ml-ch>button{border-radius:16px;padding:12px 14px;background:#fff;border:1px solid var(--ln);font:600 13px var(--font-body);color:var(--ink);min-width:0;display:flex;gap:10px;align-items:center}.ml-ch>button i{width:30px;height:30px;border-radius:9px;background:var(--sand);display:grid;place-items:center;font:700 12px var(--font-body);font-style:normal;color:var(--mu);flex:0 0 auto}.ml-ch>button i .ic{width:14px;height:14px}.ml-ch .tx{flex:1;min-width:0}.ml-ch .tx b{display:block;font:600 13px var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-ch .tx small{display:block;font:500 11.5px var(--font-body);color:var(--mu)}.ml-ch>button.on{background:var(--ink);border-color:var(--ink);color:#fff}.ml-ch>button.on i{background:var(--cu);color:var(--ink2)}.ml-ch>button.on small{color:var(--w70)}.ml-ch>button.dn i{background:var(--tint);color:var(--ink)}
.ml-vp.sm{border-radius:0}.ml-vp.sm .bigp{width:60px;height:60px;box-shadow:0 0 0 10px color-mix(in srgb,var(--cu) 20%,transparent)}.ml-vp.sm .bigp .ic{width:24px;height:24px}.ml-vp.sm .ttl{left:14px;top:12px;right:14px}.ml-vp.sm .ttl b{font-size:13.5px}.ml-vp.sm .ttl small{font-size:11px}.ml-vp.sm .ttl .ib{width:32px;height:32px}.ml-vp.sm .cap{display:none}.ml-vp.sm .vbar{padding:10px 14px 12px}.ml-vp.sm .pr{margin-bottom:9px}.ml-vp.sm .ctl{font-size:11.5px;gap:10px}.ml-vp.sm .ctl .ic{width:17px;height:17px}.ml-vp.sm .ctl .sp{gap:8px}.ml-vp.sm .ctl .tag{height:20px;padding:0 6px;font-size:9.5px}
.co-sort{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}.co-sort b{font:700 16px var(--font-heading);color:var(--ink)}.co-sort .mut{font-size:13px}.co-sort .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.ls-hd{padding:22px 0 26px;background:#fff;border-bottom:1px solid var(--ln)}
.ls-hd .t{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;margin-top:16px}.ls-hd .t>div:first-child{flex:1;min-width:0}
.ls-hd h1{font-size:34px;line-height:1.12}.ls-hd h1 em{font-style:normal;font-weight:400;color:var(--cu2)}
.ls-hd .meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font:600 13px var(--font-body);color:var(--mu);margin-top:12px}.ls-hd .meta span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.ls-hd .meta .ic{width:15px;height:15px;color:var(--cu)}.ls-hd .meta .rt{color:var(--ink)}.ls-hd .meta .rt .ic{color:var(--cu)}
.ls-tc{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border:1px solid var(--ln);border-radius:999px;font:600 13px var(--font-body);color:var(--ink);background:#fff;margin-top:14px}.ls-tc img{width:28px;height:28px;border-radius:50%;object-fit:cover}.ls-tc small{font:500 11.5px var(--font-body);color:var(--mu)}
.ls-pg{width:320px;flex:0 0 auto;background:var(--sand);border-radius:20px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}.ls-pg .r{display:flex;justify-content:space-between;font:700 13px var(--font-body);color:var(--ink);gap:10px}.ls-pg .r span{color:var(--mu);font-weight:500}.ls-pg small{font:500 12px var(--font-body);color:var(--mu)}
.ls-l{display:flex;flex-direction:column;gap:20px;min-width:0}
.ml-ap{background:linear-gradient(160deg,var(--ink2),var(--ink) 65%,var(--ink3));color:#fff;border-radius:28px;padding:26px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.ml-ap::before{content:"";position:absolute;inset:0;background:var(--pat);opacity:.7}.ml-ap>*{position:relative}
.ml-ap .top{display:flex;gap:18px;align-items:center}.ml-ap .top .ti{flex:1;min-width:0}
.ml-ap .art{width:116px;height:116px;border-radius:24px;overflow:hidden;flex:0 0 auto;box-shadow:0 20px 40px -18px rgba(0,0,0,.7)}.ml-ap .art img{width:100%;height:100%;object-fit:cover}
.ml-ap .top h3{color:#fff;font-size:26px;line-height:1.15}.ml-ap .top .ar{font-size:22px;color:var(--gold);text-align:left;margin-top:6px;line-height:1.2}.ml-ap .top small{font-size:13px;color:var(--w70);display:block;margin-top:3px}
.ml-ap .ac{display:flex;gap:8px;align-self:flex-start}.ml-ap .ac .ib{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#fff}
.ml-ap .ayah{margin:18px 0 14px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:16px 18px}
.ml-ap .ayah .ar{font-size:27px;line-height:1.95;text-align:right}.ml-ap .ayah mark{background:none;color:var(--gold);border-radius:0;padding:0}.ml-ap .ayah p{margin:6px 0 0;font:500 13.5px/1.55 var(--font-body);color:color-mix(in srgb,#fff 85%,var(--ink2))}.ml-ap .ayah .ta{font-size:12.5px;color:var(--w55);margin-top:4px;line-height:1.6}
.ml-wave{display:flex;align-items:center;gap:2px;height:52px}.ml-wave i{flex:1;border-radius:2px;background:color-mix(in srgb,var(--ink3) 78%,#fff)}.ml-wave i.p{background:var(--gold)}
.ml-ap .tm{display:flex;justify-content:space-between;font:600 12px var(--font-body);color:var(--w70);margin-top:6px}.ml-ap .tm span{display:inline-flex;align-items:center;gap:5px}
.ml-ap .ctl{display:flex;align-items:center;justify-content:center;gap:18px;margin:18px 0}.ml-ap .ctl button{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.08);position:relative}.ml-ap .ctl button .ic{width:20px;height:20px}.ml-ap .ctl .pl{width:72px;height:72px;background:var(--cu);color:var(--ink2);box-shadow:0 0 0 10px color-mix(in srgb,var(--cu) 18%,transparent)}.ml-ap .ctl .pl .ic{width:28px;height:28px}
.ml-ap .ctl button b{position:absolute;right:-6px;top:-5px;background:var(--cu);color:var(--ink2);font:800 9.5px var(--font-body);padding:2px 5px;border-radius:999px;line-height:1.2}
.ml-ap .opts{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.ml-ap .opts button{border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);padding:10px 6px;text-align:center;font:600 11px var(--font-body);color:var(--w70);min-width:0}.ml-ap .opts b{display:block;font:800 13.5px var(--font-body);color:#fff;white-space:nowrap}.ml-ap .opts .ic{width:15px;height:15px;color:var(--gold);display:block;margin:0 auto 5px}.ml-ap .opts button.on{background:color-mix(in srgb,var(--cu) 18%,transparent);border-color:color-mix(in srgb,var(--cu) 50%,transparent)}
.ml-ap .opts{margin-bottom:16px}
.ml-ap .nq{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.ml-ap .nq .k{display:flex;justify-content:space-between;align-items:center;gap:10px;font:800 10.5px var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}.ml-ap .nq .k span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.ml-ap .nq .k span+span{color:var(--w70);letter-spacing:.02em;text-transform:none;font-weight:600;font-size:11.5px}
.ml-ap .nq .iw{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ml-ap .nq .it{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);min-width:0}
.ml-ap .nq .it .pl{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--gold);display:grid;place-items:center;flex:0 0 auto}.ml-ap .nq .it .pl .ic{width:12px;height:12px}.ml-ap .nq .it.on .pl{background:var(--cu);color:var(--ink2)}
.ml-ap .nq .it>div{flex:1;min-width:0}.ml-ap .nq .it b{display:block;font:700 13px var(--font-body);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-ap .nq .it small{display:block;font:500 11.5px var(--font-body);color:var(--w70);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-ap .nq .it em{font:700 12px var(--font-body);font-style:normal;color:#fff;white-space:nowrap;flex:0 0 auto}
.ml-al{background:#fff;border:1px solid var(--ln);border-radius:28px;padding:16px;display:flex;flex-direction:column;gap:6px}
.ml-al .hd{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 10px;gap:10px}.ml-al .hd b{font:700 16px var(--font-heading);color:var(--ink);display:block}.ml-al .hd small{font:500 12px var(--font-body);color:var(--mu)}
.ml-ay{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:start;padding:11px 12px;border-radius:16px;border:1px solid transparent;min-width:0}
.ml-ay.on{background:var(--tint);border-color:color-mix(in srgb,var(--ink) 18%,#fff)}.ml-ay:hover{background:var(--sand)}
.ml-ay .n{width:34px;height:34px;border-radius:10px;background:var(--sand);display:grid;place-items:center;font:700 12px var(--font-body);color:var(--ink)}.ml-ay.on .n{background:var(--ink);color:var(--gold)}
.ml-ay>div{min-width:0}.ml-ay .ar{font-size:19px;line-height:1.8;text-align:right;color:var(--tx)}.ml-ay.on .ar{color:var(--ink)}.ml-ay p{margin:2px 0 0;font:500 12px/1.5 var(--font-body);color:var(--mu);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ml-ay .t{font:600 11.5px var(--font-body);color:var(--mu);white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding-top:8px}.ml-ay .t .eqz{color:var(--ink);height:12px}
.ml-al .ft{display:flex;justify-content:center;padding-top:6px}
.ml-tr{background:#fff;border:1px solid var(--ln);border-radius:28px;padding:22px;display:flex;flex-direction:column;gap:14px}
.ml-tr .hd{display:flex;gap:12px;align-items:center}.ml-tr .hd img{width:46px;height:46px;border-radius:50%;object-fit:cover}.ml-tr .hd>div{flex:1;min-width:0}.ml-tr .hd b{font:700 14.5px var(--font-body);color:var(--ink);display:block}.ml-tr .hd small{font:500 12px var(--font-body);color:var(--mu)}
.ml-tr h3{font-size:22px;line-height:1.2}.ml-tr .m{display:flex;gap:12px;font:600 12px var(--font-body);color:var(--mu);flex-wrap:wrap}.ml-tr .m span{display:inline-flex;align-items:center;gap:5px}.ml-tr .m .ic{width:14px;height:14px;color:var(--cu)}
.ml-tl{display:flex;flex-direction:column;gap:6px}.ml-tl>div{display:flex;gap:12px;padding:10px 12px;border-radius:14px;font:500 13.5px/1.55 var(--font-body);color:var(--tx)}.ml-tl>div.on{background:var(--tint);color:var(--ink)}.ml-tl>div b{font:700 11.5px var(--font-body);color:var(--cu2);flex:0 0 auto;padding-top:2px;letter-spacing:.03em}.ml-tl>div.on b{color:var(--ink)}.ml-tl .ar{font-size:17px;color:var(--cu2);direction:rtl;display:inline}
.ml-tr .k{display:flex;align-items:center;justify-content:space-between;font:800 11px var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
.ml-live{position:relative;border-radius:22px;overflow:hidden;height:210px;min-width:0}.ml-live img{width:100%;height:100%;object-fit:cover}.ml-live::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 25%,color-mix(in srgb,var(--ink2) 94%,transparent))}
.ml-live .bd{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.ml-live .bd>div{min-width:0}.ml-live .bd b{font:600 18px var(--font-heading);color:#fff;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-live .bd small{font:500 12px var(--font-body);color:var(--w70);display:flex;align-items:center;gap:6px;white-space:nowrap}.ml-live .bd small .ic{width:13px;height:13px}
.ml-live .lv{position:absolute;top:12px;left:12px;z-index:2;background:color-mix(in srgb,var(--ink2) 85%,transparent);color:#fff;font:800 10.5px var(--font-body);letter-spacing:.08em;padding:5px 9px;border-radius:7px;display:inline-flex;gap:6px;align-items:center;backdrop-filter:blur(6px)}.ml-live .lv.sch{background:var(--cu);color:var(--ink2)}.ml-live .lv .ic{width:12px;height:12px}
.ml-live .pl{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;flex:0 0 auto}.ml-live .pl .ic{width:16px;height:16px}
.ml-pl{border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--ln);min-width:0}.ml-pl .im{height:150px;position:relative}.ml-pl .im img{width:100%;height:100%;object-fit:cover}.ml-pl .im .cnt{position:absolute;right:10px;bottom:10px;background:color-mix(in srgb,var(--ink2) 85%,transparent);color:#fff;font:700 11px var(--font-body);padding:4px 8px;border-radius:7px;display:inline-flex;gap:5px;align-items:center}.ml-pl .im .cnt .ic{width:12px;height:12px}
.ml-pl .im .pl{position:absolute;left:12px;bottom:10px;width:36px;height:36px;border-radius:50%;background:var(--cu);color:var(--ink2);display:grid;place-items:center}.ml-pl .im .pl .ic{width:14px;height:14px}
.ml-pl .bd{padding:14px 16px 16px}.ml-pl h4{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-pl small{font:500 12px var(--font-body);color:var(--mu);display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-pl .ft{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px;font:600 12px var(--font-body);color:var(--mu)}.ml-pl .ft span{display:inline-flex;align-items:center;gap:4px}.ml-pl .ft .ic{width:13px;height:13px;color:var(--cu)}
.ml-rc{background:#fff;border:1px solid var(--ln);border-radius:22px;padding:18px 10px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.ml-rc img{width:74px;height:74px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 0 0 2px var(--cu);margin-bottom:8px}
.ml-rc b{font:700 13.5px var(--font-body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.ml-rc small{font:500 11.5px var(--font-body);color:var(--mu);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ml-rc .pill{margin-top:6px}.ml-rc .pl{margin-top:10px;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}.ml-rc .pl .ic{width:14px;height:14px}
.ml-podw{display:grid;grid-template-columns:380px 1fr;gap:24px}.ml-podw>*{min-width:0}
.ml-show{background:var(--ink) var(--pat);color:#fff;border-radius:26px;padding:22px;display:flex;flex-direction:column;gap:14px}
.ml-show .cv{width:100%;height:190px;border-radius:20px;overflow:hidden;position:relative}.ml-show .cv img{width:100%;height:100%;object-fit:cover}.ml-show .cv span{position:absolute;left:14px;bottom:12px;background:var(--cu);color:var(--ink2);font:800 10.5px var(--font-body);letter-spacing:.1em;padding:5px 9px;border-radius:7px}
.ml-show h3{color:#fff;font-size:24px}.ml-show p{margin:0;font:500 14px/1.6 var(--font-body);color:var(--w70)}.ml-show .st{display:flex;gap:22px}.ml-show .st b{display:block;font:600 22px var(--font-heading);color:#fff}.ml-show .st small{font:500 12px var(--font-body);color:var(--w70)}
.ml-podl{background:#fff;border:1px solid var(--ln);border-radius:26px;padding:8px 22px}
.ml-pod{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--ln)}.ml-pod:first-child{border-top:none}
.ml-pod .im{width:64px;height:64px;border-radius:16px;overflow:hidden;flex:0 0 auto}.ml-pod .im img{width:100%;height:100%;object-fit:cover}
.ml-pod .bd{flex:1;min-width:0}.ml-pod b{font:700 15px var(--font-body);color:var(--ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-pod small{font:500 12.5px var(--font-body);color:var(--mu);display:flex;gap:10px;flex-wrap:wrap;margin-top:3px}.ml-pod small span{display:inline-flex;align-items:center;gap:4px}.ml-pod small .ic{width:13px;height:13px}
.ml-pod .pl{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:0 0 auto}.ml-pod .pl.on{background:var(--cu);color:var(--ink2)}.ml-pod .pl .ic{width:16px;height:16px}
.ml-pod .dur{font:700 12.5px var(--font-body);color:var(--ink);white-space:nowrap;flex:0 0 auto;width:56px;text-align:right}
.ml-lc{background:#fff;border:1px solid var(--ln);border-radius:22px;overflow:hidden;min-width:0}.ml-lc .im{height:176px;position:relative}.ml-lc .im img{width:100%;height:100%;object-fit:cover}.ml-lc .im .d{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.75);color:#fff;font:700 11px var(--font-body);padding:3px 7px;border-radius:6px}.ml-lc .im .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center}.ml-lc .im .pl .ic{width:18px;height:18px}
.ml-lc .im .pill{position:absolute;left:10px;top:10px}
.ml-lc .bd{padding:14px 16px 16px}.ml-lc h4{font-size:16px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ml-lc .who{display:flex;align-items:center;gap:8px;margin-top:10px;font:500 12.5px var(--font-body);color:var(--mu);min-width:0}.ml-lc .who img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:0 0 auto}.ml-lc .who em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.ml-lc .who span{margin-left:auto;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}.ml-lc .who span .ic{width:13px;height:13px}

/* ================= IlmHub additions: real controls, players, states, other pages, phones ================= */
.ln-sb form,.ln-sb{width:100%}.ln-sb .in input{border:0;outline:0;background:transparent;font:500 14.5px var(--font-body);color:var(--ink);width:100%;min-width:0;height:44px}
.ln-chips a:hover{border-color:var(--cu)}
.ln-glass .r{color:inherit}.ln-glass .r small{display:block;font:500 11.5px var(--font-body);color:var(--w70);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln-glass .r .pl .ic{fill:currentColor}.ln-glass .empty-g{font:500 13px/1.5 var(--font-body);color:var(--w70);padding:6px 0}

/* audio player */
.ml-ap .ctl button{border:0;cursor:pointer;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.08);position:relative;padding:0}
.ml-ap .ctl button .ic{width:20px;height:20px}.ml-ap .ctl .pl{width:72px;height:72px;background:var(--cu);color:var(--ink2)}.ml-ap .ctl .pl .ic{width:28px;height:28px}
.ml-ap .ctl button b:empty{display:none}
.ml-ap .opts button{cursor:pointer;font-family:var(--font-body)}.ml-ap .opts button:disabled{opacity:.45;cursor:default}
.ml-ap .ayah [data-ap-tr][hidden]{display:none}
.ml-ap .tm .mid{max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-ap .tm .ic{width:14px;height:14px}
.ml-ap .nq .it{color:inherit}.ml-ap .nq .it:hover{background:rgba(255,255,255,.1)}
.ml-ap .ac .ib.on{background:var(--cu);color:var(--ink2);border-color:var(--cu)}
.ml-ap.locked .ayah{text-align:center}
.ml-wave{cursor:pointer;touch-action:none}
.ml-al .lst{max-height:560px;overflow:auto;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin;padding-right:2px}
.ml-ay{cursor:pointer;text-align:inherit;width:100%;background:none;font:inherit;color:inherit}.ml-ay:focus-visible{outline:2px solid var(--cu)}
.ml-ay .t .eqz{visibility:hidden}.ml-ay.on .t .eqz{visibility:visible}
.ap-file .ayah p{font-size:14px}

/* video player */
.ml-vp .scr>video,.ml-vp .scr>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;object-fit:contain}
.ml-vp .scr::after{pointer-events:none;z-index:1;transition:opacity .3s}
.ml-vp .scr>img{position:absolute;inset:0;z-index:1}
.ml-vp.started .scr>img,.ml-vp.started .bigp{display:none}
.ml-vp.started .scr::after{background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 26%,transparent 62%,rgba(0,0,0,.8))}
.ml-vp.started.playing.idle .scr::after,.ml-vp.started.playing.idle .ttl,.ml-vp.started.playing.idle .vbar{opacity:0}
.ml-vp .ttl,.ml-vp .vbar{transition:opacity .3s}
.ml-vp .bigp{border:0;cursor:pointer}
.ml-vp:not(.started) .cap{display:none}.ml-vp .cap{white-space:normal;text-align:center;max-width:86%;bottom:92px;line-height:1.45}.ml-vp .cap:empty,.ml-vp .cap[hidden]{display:none}
.ml-vp .pr{cursor:pointer;touch-action:none}.ml-vp .pr::before{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}
.ml-vp .ctl button{background:none;border:0;color:#fff;padding:0;cursor:pointer;display:inline-grid;place-items:center;font:inherit;min-width:24px;min-height:24px}
.ml-vp .ctl .tag{color:#fff;background:none}.ml-vp .vol{cursor:pointer}
.ml-vp:fullscreen{border-radius:0;display:flex;align-items:center}.ml-vp:fullscreen .scr{aspect-ratio:auto;width:100%;height:100%}
.ml-vp.embed .scr::after,.ml-vp.embed .ttl{display:none}
.ml-ch>button{cursor:pointer;text-align:left;font-family:var(--font-body)}.ml-ch>button:hover{border-color:var(--ink)}
.ml-ch.few{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.ml-tl{max-height:250px;overflow:auto;scrollbar-width:thin}.ml-tl>div{cursor:pointer}.ml-tl .none{cursor:default;color:var(--mu)}
.ml-tr .m{row-gap:6px}
.ml-locked{position:absolute;inset:0;z-index:3;display:grid;place-items:center;text-align:center;color:#fff;padding:20px}.ml-locked b{display:block;font:700 18px var(--font-heading);margin-bottom:6px}.ml-locked p{color:var(--w70);font-size:14px;margin-bottom:14px}

/* cards that are links */
.ml-live,.ml-pl,.ml-rc,.ml-lc,.ml-pod{color:inherit}.ml-live{display:block}
.ml-live .lv .ldot{width:7px;height:7px}
.ml-pl .im .ph,.ml-lc .im .ph{width:100%;height:100%;background:var(--ink) var(--pat);display:grid;place-items:center;color:var(--gold)}
.ml-rc .rc-av{width:74px;height:74px;border-radius:50%;background:var(--ink) var(--pat);color:var(--gold);display:grid;place-items:center;font:700 22px var(--font-heading);border:3px solid #fff;box-shadow:0 0 0 2px var(--cu);margin-bottom:8px}
.ml-pod .pl{border:0}.ml-res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}

/* now-playing page */
.np-wrap{padding:30px 0 70px;background:var(--sand)}
.np-q{display:flex;flex-direction:column;gap:10px}
.mq{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--ln);border-radius:16px;background:#fff;color:inherit}.mq img,.mq .ph{width:50px;height:50px;border-radius:12px;object-fit:cover;flex:0 0 auto}.mq .ph{background:var(--ink) var(--pat);display:grid;place-items:center;color:var(--gold)}.mq>div{flex:1;min-width:0}.mq b{display:block;font:700 13.5px var(--font-body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mq small{font:500 11.5px var(--font-body);color:var(--mu);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mq em{font:700 12px var(--font-body);font-style:normal;color:var(--mu);white-space:nowrap}.mq .pl{width:34px;height:34px;border-radius:50%;background:var(--sand);color:var(--ink);display:grid;place-items:center;flex:0 0 auto}.mq .pl .ic{width:14px;height:14px}.mq.on{background:var(--tint);border-color:color-mix(in srgb,var(--ink) 18%,#fff)}.mq.on .pl{background:var(--ink);color:var(--gold)}
.mvc{border-radius:22px;overflow:hidden;position:relative;height:200px;display:block}.mvc img{width:100%;height:100%;object-fit:cover}.mvc::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 20%,color-mix(in srgb,var(--ink2) 95%,transparent))}.mvc .pl{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--cu);color:var(--ink2);display:grid;place-items:center;z-index:2;box-shadow:0 0 0 10px color-mix(in srgb,var(--cu) 22%,transparent)}.mvc .pl .ic{width:22px;height:22px}.mvc .bd{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;color:#fff}.mvc .bd b{font:700 15px var(--font-body);display:block}.mvc .bd small{font:500 11.5px var(--font-body);color:var(--w70)}.mvc .d{position:absolute;right:12px;top:12px;z-index:2;background:rgba(0,0,0,.6);color:#fff;font:700 11px var(--font-body);padding:3px 7px;border-radius:6px}
.np-side{display:flex;flex-direction:column;gap:20px;min-width:0}.np-side h3{font-size:19px}
.np-info{background:#fff;border:1px solid var(--ln);border-radius:24px;padding:22px}.np-info p{color:var(--tx);font-size:14.5px;line-height:1.7}
.mpl-ib{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#fff;flex:0 0 auto;border:0;cursor:pointer}.mpl-ib .ic{width:17px;height:17px}.mpl-ib.on{background:var(--cu);color:var(--ink2)}

/* live page */
.lv-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px}.lv-main>*{min-width:0}
.lv-info{background:#fff;border:1px solid var(--ln);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:12px}
.lv-info h2{font-size:24px}.lv-info .m{display:flex;gap:12px;flex-wrap:wrap;font:600 12.5px var(--font-body);color:var(--mu)}.lv-info .m span{display:inline-flex;gap:5px;align-items:center}.lv-info .m .ic{width:14px;height:14px;color:var(--cu)}
.lv-sched .a2r{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--ln)}.lv-sched .a2r:first-child{border-top:0}
.lv-date{width:48px;flex:0 0 auto;background:var(--ink);color:#fff;border-radius:12px;padding:5px 0;text-align:center}.lv-date b{display:block;font:800 16px var(--font-heading);color:var(--gold)}.lv-date small{font:700 9.5px var(--font-body);letter-spacing:.08em;color:var(--w70);text-transform:uppercase}

/* ---------- tablets ---------- */
@media (max-width:1100px){
  .ml-podw{grid-template-columns:minmax(0,1fr)}.ml-res{grid-template-columns:repeat(2,minmax(0,1fr))}.lv-main{grid-template-columns:minmax(0,1fr)}
}
/* ---------- phones (m06 / m07) ---------- */
@media (max-width:760px){
  .ln-sec{padding:40px 0}.ln-sec .sec-h h2{font-size:25px}
  .ln-hero .rt{width:100%}.ln-glass{width:100%}.ln-stats{gap:20px}.ln-stats b{font-size:22px}
  .ln-sb .btn{padding:0 14px}.ln-sb .btn span{display:none}
  .ml-ap{padding:18px;border-radius:24px}.ml-ap .top{gap:14px}.ml-ap .art{width:84px;height:84px;border-radius:18px}.ml-ap .top h3{font-size:21px}
  .ml-ap .ayah{padding:14px 16px}.ml-ap .ayah .ar{font-size:23px}
  .ml-ap .ctl{gap:12px}.ml-ap .ctl button{width:44px;height:44px}.ml-ap .ctl .pl{width:70px;height:70px}
  .ml-ap .opts{grid-template-columns:repeat(4,minmax(0,1fr))}.ml-ap .opts .loop{display:none}
  .ml-ap .nq .iw{grid-template-columns:minmax(0,1fr)}
  .ml-al{border-radius:22px;padding:12px}.ml-al .lst{max-height:420px}
  .ml-vp{border-radius:22px}.ml-vp .bigp{width:60px;height:60px;box-shadow:0 0 0 10px color-mix(in srgb,var(--cu) 20%,transparent)}.ml-vp .bigp .ic{width:24px;height:24px}
  .ml-vp .ttl{left:14px;top:12px;right:14px}.ml-vp .ttl b{font-size:13.5px}.ml-vp .ttl small{font-size:11px}.ml-vp .ttl .ib{width:32px;height:32px}
  .ml-vp .cap{bottom:64px;font-size:12.5px;padding:4px 10px}.ml-vp .cap .ar{font-size:15px}
  .ml-vp .vbar{padding:10px 14px 12px}.ml-vp .pr{margin-bottom:9px}.ml-vp .ctl{font-size:11.5px;gap:10px}.ml-vp .ctl .ic{width:17px;height:17px}.ml-vp .ctl .sp{gap:8px}.ml-vp .ctl .tag{height:22px;padding:0 6px;font-size:9.5px}
  .ml-vp .vw .vol,.ml-vp .ctl .hide-s{display:none}
  .ml-ch{display:flex;overflow-x:auto;scrollbar-width:none;gap:8px}.ml-ch::-webkit-scrollbar{display:none}.ml-ch>button{flex:0 0 170px}
  .ml-live{height:190px}.ml-pl .im{height:160px}.ml-res{grid-template-columns:minmax(0,1fr)}
  .ml-podl{padding:4px 16px}.ml-pod{gap:12px}.ml-pod .im{width:52px;height:52px}.ml-pod b{font-size:14px}.ml-pod .dur{display:none}
  .g6.ml-rcs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  /* now playing = m06: the blue player runs edge to edge */
  .np-wrap{padding:0 0 40px;background:var(--paper)}.np-wrap>.wrap{padding:0}
  .np .ml-ap{border-radius:0 0 30px 30px;padding:8px 20px 24px}
  .np .ml-ap .top{flex-direction:column;text-align:center;gap:0}.np .ml-ap .art{width:236px;height:236px;border-radius:28px;margin:6px auto 16px;box-shadow:0 30px 60px -24px rgba(0,0,0,.8)}
  .np .ml-ap .top .ar{text-align:center;font-size:22px}.np .ml-ap .top h3{font-size:26px}.np .ml-ap .top .pill,.np .ml-ap .ac{display:none}
  .np .np-side{margin:0 16px}.np .np-side .ml-al{margin:0}
  .np-side{padding-top:24px}
  .ls-hd .t{flex-direction:column;gap:16px}.ls-pg{width:100%}.ls-hd h1{font-size:25px}.ls-hd .meta{gap:8px 12px}
  .co-sort .r{margin-left:0;width:100%}
  .lv-sched .a2r .btn{padding:0 12px}
}
@media (max-width:420px){.ml-ap .ctl{gap:8px}.ml-ap .ctl button{width:40px;height:40px}.ml-ap .ctl .pl{width:64px;height:64px}}
.ml-vp .ctl .tagb{min-height:36px;min-width:36px;display:inline-grid;place-items:center}.ml-vp .ctl .tagb.on .tag{background:var(--cu);color:var(--ink2);border-color:var(--cu)}.ml-vp .ctl .tagb.hide-s{display:inline-grid}@media (max-width:760px){.ml-vp .ctl .tagb.hide-s{display:none}.ml-vp .ctl .tagb{min-width:30px}}
/* tablets: the filter column narrows and the cards go two across so titles keep whole words */
@media (min-width:761px) and (max-width:1100px){.side1{grid-template-columns:240px minmax(0,1fr);gap:20px}.side1 .g3{grid-template-columns:repeat(2,minmax(0,1fr))}}