/* الافتراضي: بيج · البقية: أزرق، عنابي، أسود */
:root{--bg:#F7F3E9;--card:#FCFAF2;--card2:#EFE6D2;--line:#E3D6BC;--line2:#D7C4A4;--line3:#E0D2B4;--gold:#8B5E3C;--goldA:#8B5E3C33;--goldB:#8B5E3C1F;--cu:#D4AF37;--ac:#B5523C;--ink:#3A2A22;--mut:#7D6551;--soft:#5E4538;--on:#F7F3E9;--hero:#EADFC6;--d1:#E2D3B2;--d2:#D7C4A4;--d3:#C9B28C}
:root[data-theme=maroon]{--gold:#E9B866;--goldA:#E9B86633;--goldB:#E9B86624;--ink:#F5EFE3;--bg:#1F0B12;--card:#2B121C;--card2:#381827;--line:#4A2233;--line2:#5A2D40;--line3:#4F2638;--mut:#C2A6AF;--soft:#E3CDD3;--on:#1F0B12;--hero:#2A0F19;--d1:#331522;--d2:#421C2D;--d3:#53243A}
:root[data-theme=black]{--gold:#E9B866;--goldA:#E9B86633;--goldB:#E9B86624;--ink:#F5EFE3;--bg:#0A0A0A;--card:#141414;--card2:#1E1E1E;--line:#2C2C2C;--line2:#3A3A3A;--line3:#333;--mut:#A6A6A6;--soft:#D4D4D4;--on:#0A0A0A;--hero:#111;--d1:#181818;--d2:#212121;--d3:#2B2B2B}
:root[data-theme=blue]{--bg:#0F1226;--card:#181C38;--card2:#232852;--line:#2A3060;--line2:#3A4170;--line3:#2F3670;--gold:#E9B866;--goldA:#E9B86633;--goldB:#E9B86624;--ink:#F5EFE3;--mut:#A3A9C4;--soft:#C9CDE0;--on:#0F1226;--hero:#151A3A;--d1:#1C2148;--d2:#242A5C;--d3:#2E3570}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Tajawal',sans-serif;font-size:17px;line-height:1.6}
body.hasp{padding-bottom:84px}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:14px 40px;background:var(--bg);border-bottom:1px solid var(--line)}
.logo b{display:block;font-family:'Reem Kufi',sans-serif;font-size:26px;color:var(--gold);line-height:1.2}
.logo small{color:var(--mut);letter-spacing:1px;font-size:13px}
.nav{display:flex;gap:24px;flex-wrap:wrap}
.nav a{padding:6px 0;color:var(--mut)}.nav a:hover,.nav a.cur{color:var(--gold)}.nav a.cur{border-bottom:2px solid var(--gold)}
.sf{display:flex;background:var(--bg);border:1px solid var(--line2);border-radius:30px;overflow:hidden}
.sf input{flex:1;min-width:0;height:48px;padding:0 22px;font:inherit;border:0;background:transparent;color:var(--ink)}
.sf input::placeholder{color:var(--mut)}
.sf button{margin:4px;padding:0 24px;border:0;border-radius:24px;background:var(--gold);color:var(--on);font:inherit;font-weight:700;cursor:pointer}
.sf.small{border-radius:22px}.sf.small input{height:40px;width:200px}
.wa{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--gold);background:var(--card);align-items:center;justify-content:center;flex:none}.wa svg{fill:var(--gold)}.wa:hover,.wa:active{background:var(--gold)}.wa:hover svg,.wa:active svg{fill:var(--on)}
.nav a.nw{display:inline-flex;align-items:center;gap:6px}.nav a.nw svg{fill:currentColor}
.sad{display:block;width:100%;height:14px}
#app{max-width:1200px;margin:0 auto;padding:28px 24px 8px}
.hero{position:relative;overflow:hidden;background:var(--hero);border:1px solid var(--line);border-radius:26px;padding:56px 40px 170px;margin-bottom:24px}
.scene{position:absolute;inset:0;width:100%;height:100%}
.hero-t{position:relative;max-width:560px}
.badge{display:inline-block;padding:3px 14px;border:1px solid var(--gold);border-radius:14px;color:var(--gold);font-size:14px;margin-bottom:14px}
.hero h1{font-family:'Reem Kufi',sans-serif;font-size:52px;margin:0 0 10px;line-height:1.25}
.hero h1 em{color:var(--gold);font-style:normal}
.hero p{margin:0 0 24px;color:var(--soft);font-size:19px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px}
.sec{padding:24px;margin-bottom:24px}
.hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.hd h2,.h1{font-family:'Reem Kufi',sans-serif;font-size:26px;margin:0}
.hd h2::before{content:'';display:inline-block;width:9px;height:9px;background:var(--cu,var(--gold));transform:rotate(45deg);margin-inline-end:12px;vertical-align:middle}
.more{color:var(--gold);font-weight:500}
.muted{color:var(--mut)}
.tiles.card{display:flex;flex-wrap:wrap;gap:12px;background:none;border:0;margin-bottom:24px}
.tiles a{flex:1 1 110px;text-align:center;padding:18px 8px;font-weight:500;background:var(--card);border:1px solid var(--line);border-radius:20px}.tiles a:hover{border-color:var(--gold);color:var(--gold)}
.row{display:flex;align-items:center;gap:14px;padding:12px 14px;margin-bottom:10px;border-radius:18px;background:var(--card2);border:1px solid var(--line3)}
.row:last-child{margin-bottom:0}
.rt{flex:1;font-weight:700;font-size:18px}.rt:hover,.ra:hover{color:var(--gold)}
.ra{color:var(--mut)}.rn{color:var(--mut);font-size:14px;min-width:90px;text-align:left}
.pb{width:44px;height:44px;border-radius:50%;border:0;background:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.pb svg path{fill:var(--on)}
.pb.on{background:var(--ink);box-shadow:0 0 0 5px var(--goldA)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.pc{padding:18px 12px;text-align:center;display:block;background:var(--card2)}.pc:hover{border-color:var(--gold)}
.pc b{display:block}.pc small{color:var(--mut)}
.av{width:88px;height:88px;border-radius:50%;background:var(--card);border:1px dashed var(--cu,var(--gold));outline:1px solid var(--line);outline-offset:4px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:'Reem Kufi',sans-serif;font-size:34px;color:var(--gold);margin:0 auto 14px}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av.big{width:120px;height:120px;margin:0 4px 0 18px;flex:none}
.ah{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.ah h1{margin:0 0 6px;font-family:'Reem Kufi',sans-serif}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{min-width:34px;height:34px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line2);border-radius:17px;color:var(--ink)}
.chip.on{background:var(--gold);border-color:var(--gold);color:var(--on);font-weight:700}
.two{display:flex;gap:24px;flex-wrap:wrap}.two>.sec{flex:1 1 440px}
.li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}.li:hover b{color:var(--gold)}
.th{width:120px;height:68px;border-radius:12px;background:var(--card2);overflow:hidden;flex:none}
.th img{width:100%;height:100%;object-fit:cover;display:block}
.th.big{width:100%;height:auto;aspect-ratio:16/9;margin-bottom:10px}
.vg{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.vc b{display:block}.vc:hover b{color:var(--gold)}
.lyrics{margin-top:16px;padding:22px;background:var(--bg);border:1px solid var(--line);border-radius:16px;font-size:19px;line-height:2}
.body{font-size:18px;line-height:2}.body img{height:auto}.body a{color:var(--gold)}
.pager{display:flex;gap:16px;justify-content:center;align-items:center;padding-top:16px}.pager a{color:var(--gold);font-weight:700}
.foot{max-width:1200px;margin:8px auto 0;padding:24px 24px 28px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--mut);font-size:15px;border-top:1px solid var(--line)}
.foot a.wl{color:var(--gold);font-weight:500}.foot a.wl:hover{text-decoration:underline}
.foot .fs{padding:6px 20px;border:1px solid var(--line2);border-radius:20px;background:var(--card)}.foot .fs b{color:var(--ink);margin-inline-start:6px}
#player{position:fixed;inset:auto 0 0 0;display:flex;align-items:center;gap:14px;padding:12px 24px;background:var(--card2);border-top:1px solid var(--gold);z-index:10}
#player[hidden]{display:none}
.pi{min-width:0;display:flex;flex-direction:column;line-height:1.3;max-width:240px}.pi b,.pi span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pi span{color:var(--mut);font-size:14px}
#seek{flex:1;min-width:80px;accent-color:var(--gold)}
#tm{color:var(--mut);font-size:14px;min-width:90px;text-align:center}
.sk{border:1px solid var(--gold);background:transparent;color:var(--gold);border-radius:18px;padding:4px 14px;font:inherit;font-size:14px;cursor:pointer}
.tabbar{display:none}
@media(max-width:720px){
.wa{display:flex}
body{padding-bottom:84px}body.hasp{padding-bottom:150px}
.top{padding:12px 16px}.nav{display:none}.sf.small{width:100%}.sf.small input{width:100%}
#app{padding:16px 14px 8px}
.hero{padding:32px 20px 150px;border-radius:22px}.hero h1{font-size:38px}.hero p{font-size:16px}
.rn{display:none}#tm,.sk{display:none}.pi{max-width:150px}
#player{bottom:74px;inset-inline:12px;border:1px solid var(--line3);border-radius:20px;padding:10px 14px}
.tabbar{display:flex;gap:4px;position:fixed;inset:auto 12px 10px 12px;padding:6px;border-radius:28px;background:var(--card);border:1px solid var(--line);z-index:11}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;border-radius:20px;font-size:12px;color:var(--mut)}
.tabbar a.cur{background:var(--goldB);color:var(--gold)}
}

.vf{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;margin:16px 0;background:var(--card2)}.vf iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.tp{position:relative;flex:none}
.tpb{width:42px;height:42px;border-radius:50%;border:1px solid var(--gold);background:var(--card);color:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer}
.tpm{position:absolute;top:50px;inset-inline-end:0;display:flex;gap:10px;padding:10px 12px;background:var(--card2);border:1px solid var(--line2);border-radius:16px;z-index:30;box-shadow:0 8px 24px #0002}
.tpm[hidden]{display:none}
.tpm button{width:30px;height:30px;border-radius:50%;border:2px solid var(--line2);background:var(--c);cursor:pointer;padding:0}
.tpm button.on{border-color:var(--gold);box-shadow:0 0 0 3px var(--goldA)}
.dl{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--mut);flex:none}.dl:hover{color:var(--gold);background:var(--goldB)}
.share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0}
.shb{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid var(--line2);border-radius:17px;background:transparent;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}.shb:hover{border-color:var(--gold);color:var(--gold)}
.nsh{display:none}html.cs .nsh{display:inline-flex}
.vl{display:flex;align-items:center;gap:8px}
#vol{width:90px;accent-color:var(--gold)}
.ic{width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}.ic:hover{color:var(--gold)}
#mute.off{color:var(--mut);opacity:.7}
#pclose{border:1px solid var(--line2)}
@media(max-width:720px){#vol,#mute{display:none}.tp{margin-inline-start:auto}}
.pall{border:1px solid var(--gold);background:transparent;color:var(--gold);border-radius:18px;padding:4px 16px;font:inherit;font-size:14px;cursor:pointer}.pall:hover{background:var(--gold);color:var(--on)}
.clr{border:1px solid var(--line2);background:transparent;color:var(--mut);border-radius:18px;padding:4px 14px;font:inherit;font-size:14px;cursor:pointer}.clr:hover{color:var(--gold);border-color:var(--gold)}
.fv{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--mut);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}.fv:hover{color:var(--gold);background:var(--goldB)}.fv.on{color:var(--ac,var(--gold))}.fv.on svg{fill:var(--ac,var(--gold))}
.ptabs{display:flex;gap:6px;flex-wrap:wrap}.ptab{border:1px solid var(--line2);background:transparent;color:var(--ink);border-radius:17px;padding:3px 14px;font:inherit;font-size:14px;cursor:pointer}.ptab.on{background:var(--gold);border-color:var(--gold);color:var(--on);font-weight:700}
.pops [hidden]{display:none}
.foot .fl{font-size:14px}.foot .fl a:hover{color:var(--gold)}
.cta{display:inline-block;padding:10px 22px;border:1px solid var(--gold);border-radius:24px;color:var(--gold);font-weight:700}.cta:hover{background:var(--gold);color:var(--on)}
.hd>span{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:720px){.hd{flex-wrap:wrap;gap:8px}.tabbar a{font-size:11px}}
.cf{display:flex;flex-direction:column;gap:14px;max-width:560px}.cf label{display:flex;flex-direction:column;gap:6px;color:var(--soft);font-size:15px}
.cf input,.cf textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line2);border-radius:14px;padding:10px 14px}
.cf input:focus,.cf textarea:focus{outline:2px solid var(--goldA);border-color:var(--gold)}
.cf .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
button.cta{background:transparent;font:inherit;font-weight:700;cursor:pointer;align-self:flex-start}
.ok,.er{padding:12px 16px;border-radius:14px;margin-bottom:14px;border:1px solid var(--gold);background:var(--goldB)}.er{border-color:#c0392b;background:#c0392b1f}
.logo img{height:46px;width:auto;max-width:240px;display:block}
.hero.has-img{background-size:cover;background-position:center;border-color:transparent}
.hero.has-img .scene{display:none}
.hero.has-img h1,.hero.has-img p{color:#fff;text-shadow:0 2px 10px #0008}
.hero.has-img h1 em{color:var(--cu,var(--gold))}
.hero.has-img .badge{color:#fff;border-color:#ffffffb0;background:#0003}
.hero.has-img .sf{background:#fffffff2}.hero.has-img .sf input{color:#2b2b2b}.hero.has-img .sf input::placeholder{color:#777}
@media(max-width:720px){.logo img{height:38px}}

.gb{margin:0 0 12px;padding:12px 14px;background:var(--card2);border:1px solid var(--line);border-radius:10px}.gb p{margin:0 0 8px;line-height:1.9;color:var(--ink)}.gb footer{font-size:.85em;color:var(--mut)}.gb footer b{color:var(--gold)}
.th{position:relative}.pl{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;background:#000000a6;display:flex;align-items:center;justify-content:center;opacity:.9;transition:transform .15s,background .15s}.pl svg{fill:#fff;margin-inline-start:-2px}.th:not(.big) .pl{display:none}.vc:hover .pl{background:var(--gold);transform:scale(1.08)}.vc small{display:block;margin-top:2px}
.vf video{position:absolute;inset:0;width:100%;height:100%;background:#000}.yl{cursor:pointer;background:#000}.yl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}.ypl{position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:50%;border:0;background:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 18px #0006}.ypl svg{fill:#fff;width:30px;height:30px;margin-inline-start:-3px}.yl:hover .ypl{transform:scale(1.07)}.vm{display:flex;gap:14px;margin:4px 0 10px}