:root{--bg:#0d0b0c;--card:#181415;--tx:#f6efe9;--mut:#a89c9c;--b:#a83a58;--b2:#d0607f;--gold:#d4a94f;--ln:#ffffff18;color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:inherit;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--bg);color:var(--tx);font-family:Cairo,system-ui,sans-serif;overflow-x:hidden;min-height:100vh}
.flag{height:5px;background:linear-gradient(90deg,var(--b) 33.3%,#fff 33.3% 66.6%,#000 66.6%)}
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px 5vw;backdrop-filter:blur(16px);background:color-mix(in srgb,var(--bg) 70%,transparent);border-bottom:1px solid var(--ln)}
.logo{font-family:'Reem Kufi';font-weight:700;font-size:22px;display:flex;gap:10px;align-items:center}
.logo i{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--b),var(--gold));display:grid;place-items:center;font-style:normal;color:#fff;font-size:18px}
button{font:inherit;cursor:pointer;border:0;color:inherit}
.btn{background:linear-gradient(135deg,var(--b),var(--b2));color:#fff;padding:10px 20px;border-radius:99px;font-weight:700;box-shadow:0 8px 24px #a83a5844;transition:.25s}
.btn:hover{transform:translateY(-2px) scale(1.03)}
.ghost{background:transparent;border:1px solid var(--ln);padding:9px 18px;border-radius:99px}
header.hero{position:relative;text-align:center;padding:12vh 5vw 8vh;overflow:hidden;isolation:isolate}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;z-index:-1;animation:fl 14s ease-in-out infinite alternate}
.b1{width:46vw;height:46vw;background:var(--b);top:-15vw;right:-8vw}
.b2{width:34vw;height:34vw;background:var(--gold);bottom:-14vw;left:-6vw;opacity:.28;animation-delay:-6s}
@keyframes fl{to{transform:translate(-6vw,5vw) scale(1.2)}}
.tag{display:inline-block;padding:6px 16px;border:1px solid var(--ln);border-radius:99px;color:var(--gold);font-size:14px;margin-bottom:22px}
h1{font-family:'Reem Kufi';font-size:clamp(44px,10vw,120px);line-height:1.1;font-weight:700}
h1 span{background:linear-gradient(100deg,var(--b2),var(--gold),var(--b2));background-size:200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sh 6s linear infinite}
@keyframes sh{to{background-position:200%}}
.sub{max-width:640px;margin:18px auto 30px;color:var(--mut);font-size:clamp(16px,2.4vw,20px);line-height:1.9}
.stats{flex-wrap:wrap;display:flex;justify-content:center;gap:clamp(20px,6vw,70px);margin-top:44px}
.stats b{display:block;font-size:34px;font-family:'Reem Kufi';color:var(--gold)}.stats small{color:var(--mut)}
.mq{overflow:hidden;border-block:1px solid var(--ln);padding:14px 0;white-space:nowrap;direction:ltr}
.mq div{display:inline-block;animation:mq 30s linear infinite;color:var(--mut);font-weight:800;letter-spacing:2px}
.mq span{margin:0 26px}.mq span:nth-child(3n){color:var(--b2)}
@keyframes mq{to{transform:translateX(-50%)}}
section{padding:60px 5vw}
.bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:30px}
h2{font-family:'Reem Kufi';font-size:clamp(28px,4.5vw,44px)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 18px;border-radius:99px;border:1px solid var(--ln);background:var(--card);transition:.2s}
.chip.on,.chip:hover{background:var(--b);border-color:var(--b);color:#fff}
input,textarea,select{width:100%;background:var(--card);border:1px solid var(--ln);color:var(--tx);padding:12px 16px;border-radius:14px;font:inherit;outline:0}
input:focus,textarea:focus,select:focus{border-color:var(--b2)}
.search{max-width:280px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.card{position:relative;border-radius:22px;overflow:hidden;background:var(--card);border:1px solid var(--ln);cursor:pointer;transform-style:preserve-3d;transition:transform .2s,box-shadow .3s;animation:up .6s both}
.card:hover{box-shadow:0 24px 50px #a83a5833;border-color:var(--b)}
@keyframes up{from{opacity:0;transform:translateY(30px)}}
.card .m{aspect-ratio:4/5;background:#000}
.card img,.card video,.mm img,.mm video{width:100%;height:100%;object-fit:cover;display:block}
.card .i{position:absolute;inset:auto 0 0;padding:60px 16px 16px;background:linear-gradient(transparent,#000d);color:#fff}
.card h3{font-size:18px;margin-top:6px}
.pill{font-size:12px;background:var(--b);padding:3px 12px;border-radius:99px}
.play{position:absolute;top:12px;left:12px;width:38px;height:38px;border-radius:50%;background:#000a;display:grid;place-items:center;color:#fff}
.empty{grid-column:1/-1;text-align:center;padding:70px 20px;border:2px dashed var(--ln);border-radius:24px;color:var(--mut);line-height:2}
.ov{position:fixed;inset:0;z-index:50;background:#000c;backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:16px}
.ov.on{display:flex}
.modal{width:min(1000px,100%);max-height:92vh;overflow:auto;background:var(--card);border-radius:26px;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ln);animation:up .35s}
.mm{background:#000;min-height:300px}.mm video,.mm img{max-height:88vh;object-fit:contain}
.md{padding:28px;display:flex;flex-direction:column;gap:14px}
.pr{background:var(--bg);border:1px solid var(--ln);border-radius:16px;padding:16px;line-height:1.9;white-space:pre-wrap;max-height:40vh;overflow:auto;direction:auto;font-size:15px}
.x{position:absolute;top:14px;left:14px;z-index:2;background:#000a;color:#fff;width:38px;height:38px;border-radius:50%;font-size:18px}
@media(max-width:760px){.modal{grid-template-columns:1fr}}
.dr{position:fixed;top:0;bottom:0;left:0;width:min(460px,100%);z-index:60;background:var(--bg);border-right:1px solid var(--ln);transform:translateX(-102%);transition:.4s;overflow:auto;padding:22px;display:flex;flex-direction:column;gap:12px}
.dr.on{transform:none}
.tabs{display:flex;gap:6px}.tabs .chip{flex:1;font-size:14px}
.pn{display:none;flex-direction:column;gap:10px}.pn.on{display:flex}
label{font-size:13px;color:var(--mut)}
.row{display:flex;gap:10px;align-items:center;background:var(--card);padding:8px;border-radius:14px;border:1px solid var(--ln)}
.row img,.row video{width:46px;height:46px;border-radius:10px;object-fit:cover}.row span{flex:1;font-size:14px}
.row button{padding:6px 12px;border-radius:10px;background:var(--ln)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--b);color:#fff;padding:12px 24px;border-radius:99px;z-index:99;transition:.4s}
.toast.on{transform:translateX(-50%)}
footer{text-align:center;padding:40px 5vw 30px;color:var(--mut)}
#glow{position:fixed;width:340px;height:340px;border-radius:50%;pointer-events:none;background:radial-gradient(#a83a5833,transparent 70%);z-index:0;transform:translate(-50%,-50%)}
.lk{display:flex;gap:6px}.lk a{color:var(--mut);text-decoration:none;padding:8px 14px;border-radius:99px;transition:.2s}.lk a:hover{color:#fff;background:var(--b)}
@media(max-width:700px){.lk{display:none}}
a.ghost{text-decoration:none;color:inherit;display:inline-block}a.ghost:hover{background:var(--b);border-color:var(--b);color:#fff}
.avw{position:relative;width:max-content;margin:0 auto 22px;text-align:center}
.av{width:118px;height:118px;border-radius:50%;padding:4px;background:conic-gradient(var(--b),#fff,#000,var(--gold),var(--b))}
.av>*{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:var(--bg);font:700 44px 'Reem Kufi';color:var(--gold)}
.crown{width:74px;height:46px;display:block;margin:0 auto -16px;position:relative;z-index:2;filter:drop-shadow(0 4px 8px #0008)}
.stars{color:var(--gold);letter-spacing:9px;font-size:16px;margin-top:8px}
.fr{height:14px;opacity:.75;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M2 14V11H6V8H10V5H14V8H18V11H22V14Z' fill='%23d4a94f'/%3E%3C/svg%3E") repeat-x}
.bar h2:before{content:"☥ ";color:var(--gold);font-size:.7em}
.card .m{position:relative}.lg .m{background:var(--card)}.lg img{object-fit:contain;padding:18px}.sb .m{aspect-ratio:4/5}
.st{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;color:var(--mut);font-size:14px}
.st button,.lb{background:none;color:var(--mut);padding:2px 6px;font-size:15px}.st button.on,.lb.on{color:var(--b2)}.lb{border:1px solid var(--ln);border-radius:99px;padding:6px 16px}
.sec{margin-bottom:46px}
.about{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;max-width:960px;margin:auto;padding:36px;border-radius:30px;background:var(--card);border:1px solid var(--ln);position:relative;overflow:hidden}
.about:before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:linear-gradient(var(--b) 33%,#fff 33% 66%,#000 66%)}
.about .avw{margin:0}.about .av{width:170px;height:170px}
.about p{color:var(--mut);line-height:2;margin:10px 0 18px}.soc{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:700px){.about{grid-template-columns:1fr;text-align:center}.about .avw{margin:auto}.soc{justify-content:center}}
details{background:var(--card);border:1px solid var(--ln);border-radius:16px;padding:16px 20px;margin-bottom:12px;max-width:820px;margin-inline:auto}
summary{cursor:pointer;font-weight:700}details p{color:var(--mut);line-height:1.9;margin-top:10px}details[open]{border-color:var(--b)}
.ct{text-align:center;padding:50px 20px;border-radius:30px;background:linear-gradient(135deg,#a83a5855,#d4a94f22);border:1px solid var(--ln);max-width:960px;margin:auto}
.ct p{color:var(--mut);margin:12px 0 22px}.ct .soc{justify-content:center}
.mo{padding:8px 14px 0;color:var(--gold);font-size:13px;font-weight:600}

.emb{position:absolute;inset:0;z-index:-1;opacity:.16;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke-width='1.2'%3E%3Cpath d='M60 0L120 60L60 120L0 60Z' stroke='%23d4a94f' stroke-dasharray='3 4'/%3E%3Cpath d='M60 30L90 60L60 90L30 60Z' stroke='%23d0607f' stroke-dasharray='3 4'/%3E%3Ccircle cx='60' cy='60' r='4' stroke='%23d4a94f'/%3E%3C/svg%3E");animation:pan 70s linear infinite;-webkit-mask:radial-gradient(ellipse 80% 70% at 50% 40%,#000 25%,transparent 78%);mask:radial-gradient(ellipse 80% 70% at 50% 40%,#000 25%,transparent 78%)}
@keyframes pan{to{background-position:240px 120px}}
.sun{position:absolute;top:30px;left:0;right:0;margin:auto;width:min(540px,100%);aspect-ratio:1;z-index:-1;opacity:.2;animation:br 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes br{from{transform:scale(.95);opacity:.12}to{transform:scale(1.05);opacity:.24}}
.si{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--card);border:1px solid var(--ln);transition:.3s;text-decoration:none;position:relative}
.si svg{width:24px;height:24px}.si.fb{color:#5b9bff}.si.ig{color:#ff6fa8}.si.tt{color:#fff}.si.wa{color:#4ade80}
.si:hover{transform:translateY(-5px) rotate(-4deg);color:#fff;border-color:transparent;box-shadow:0 12px 26px #0009}
.si.fb:hover{background:#1877f2}.si.ig:hover{background:linear-gradient(45deg,#f9a03c,#e1306c,#833ab4)}.si.tt:hover{background:#000;box-shadow:-3px -3px 0 #25f4ee,3px 3px 0 #fe2c55}.si.wa:hover{background:#25d366}
.tb{display:none}
@media(max-width:700px){
.tb{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;justify-content:space-around;padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px);border-top:1px solid var(--ln)}
.tb a{display:flex;flex-direction:column;align-items:center;font-size:20px;text-decoration:none;color:var(--mut);gap:2px}.tb small{font-size:11px}
body{padding-bottom:72px}.toast{bottom:92px}nav{padding:10px 4vw}
.grid{grid-template-columns:repeat(2,1fr);gap:12px}section{padding:40px 4vw}
.search{max-width:none;width:100%}
.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.chip{white-space:nowrap}
.stats{gap:14px 24px}.stats b{font-size:26px}
.card h3{font-size:14px}.st{padding:6px 10px;font-size:13px}.pill{font-size:11px}
.modal{max-height:94vh}.mm{min-height:220px}.mm video,.mm img{max-height:50vh}
.about{padding:24px}.dr{padding:16px}header.hero{padding:9vh 5vw 6vh}.btn{padding:9px 16px}
.sun{top:20px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}
header.hero{text-align:start;padding:5vh 5vw 4vh}
.hi{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,4vw,56px);align-items:center;max-width:1100px;margin:auto}
.hi .avw{margin:0}.hi .av{width:136px;height:136px}
.sun{left:auto;right:auto;inset-inline-start:-140px;top:50%;margin:0 0 0 0;margin-top:-210px;width:420px}
.ht h1{font-size:clamp(34px,5.6vw,68px)}
.ht .tag{margin-bottom:12px}
.ht .sub{margin:12px 0 20px;max-width:560px}
.ht .stats{justify-content:flex-start;margin-top:26px}
@media(max-width:700px){
header.hero{padding:4vh 4vw 3vh}
.hi{gap:14px}.hi .av{width:86px;height:86px}.hi .av>*{font-size:30px}
.crown{width:52px;height:32px;margin-bottom:-11px}.stars{font-size:11px;letter-spacing:5px;margin-top:5px}
.sun{width:260px;margin-top:-130px;inset-inline-start:-85px}
.ht h1{font-size:30px}.ht .tag{font-size:11px;padding:4px 10px;margin-bottom:8px}
.ht .sub{font-size:13px;line-height:1.7;margin:8px 0 12px}
.ht .btn{font-size:14px!important;padding:8px 18px!important}
.ht .stats{margin-top:16px;gap:10px 18px}.ht .stats b{font-size:20px}.ht .stats small{font-size:11px}}
.hi{direction:ltr;gap:clamp(36px,8vw,120px)}
html[dir=rtl] .ht{direction:rtl;text-align:right}html[dir=ltr] .ht{direction:ltr;text-align:left}
.av{border-radius:24px}.av>*{border-radius:20px}
.hi .av{width:156px;height:156px}
.sun{inset-inline-start:-132px}
@media(max-width:700px){.hi{gap:20px}.hi .av{width:92px;height:92px;border-radius:18px}.hi .av>*{border-radius:14px}.sun{inset-inline-start:-84px}}
.dr:not(.ok){display:none}
.tabs{flex-wrap:wrap}.tabs .chip{flex:1 1 auto}
.mq{display:flex;flex-direction:column;gap:12px;padding:18px 0;background:linear-gradient(90deg,transparent,#a83a5818,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mr{display:flex!important;width:max-content;gap:14px;animation-duration:44s!important}
.mr.r2{animation-direction:reverse;animation-duration:54s!important}
.mq:hover .mr{animation-play-state:paused}
.mk{display:inline-flex;align-items:center;gap:9px;padding:8px 22px;border:1px solid var(--ln);border-radius:99px;background:var(--card);color:var(--tx);font-style:normal;font-weight:800;letter-spacing:1px;text-decoration:none;white-space:nowrap;transition:.25s}
.mk:before{content:"◆";color:var(--gold);font-size:10px}.mk:nth-child(3n):before{color:var(--b2)}
a.mk:hover{background:var(--b);border-color:var(--b);color:#fff;transform:translateY(-2px)}
.mq{padding:14px 0}
.hi .av{width:165px;height:220px}
.about .av{width:180px;height:240px}
.sun{inset-inline-start:-127px}
@media(max-width:700px){.hi .av{width:96px;height:128px}.about .av{width:150px;height:200px}.sun{inset-inline-start:-82px}}
.vh{display:none!important}
.lk a{padding:8px 11px;font-size:14px}.lk a.on{color:#fff;background:var(--b)}.tb a.on{color:var(--b2)}
.ad{display:none}body.ads .ad{display:grid;place-items:center;min-height:90px;margin:20px 5vw;border:1px dashed var(--ln);border-radius:16px;color:var(--mut);font-size:13px}
.fl{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}.fl a{color:var(--mut);text-decoration:none}.fl a:hover{color:var(--b2)}
.hb{display:none}
.tb{display:none!important}
body{padding-bottom:0}.toast{bottom:24px}
nav{-webkit-backdrop-filter:blur(16px)}.ov{-webkit-backdrop-filter:blur(8px)}
.modal{max-height:92vh;max-height:92dvh}
.smb{position:fixed;inset:0;background:#000a;z-index:9998;opacity:0;pointer-events:none;visibility:hidden;transition:.3s}.smb.on{opacity:1;pointer-events:auto;visibility:visible}
.sm{position:fixed;top:0;bottom:0;width:min(300px,82vw);z-index:9999;background:var(--bg);border-inline:1px solid var(--ln);padding:calc(18px + env(safe-area-inset-top,0px)) 18px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;overflow:auto;transition:transform .35s,visibility .35s;visibility:hidden;pointer-events:none;will-change:transform}
html[dir=rtl] .sm{right:0;transform:translateX(105%)}html[dir=ltr] .sm{left:0;transform:translateX(-105%)}
.sm.on{transform:none!important;visibility:visible!important;pointer-events:auto!important;display:flex!important}
.sm a{padding:14px 16px;border-radius:14px;color:var(--tx);text-decoration:none;font-weight:700;background:var(--card);border:1px solid var(--ln)}.sm a:active{background:var(--b)}
.smh{font:700 22px 'Reem Kufi';color:var(--gold);padding:10px 4px 14px}
.sml{margin-top:auto;display:flex;flex-direction:column;gap:4px;padding-top:16px}.sml a{background:none;border:0;color:var(--mut);font-weight:400;padding:8px 16px}
html[dir=ltr] .hi{direction:rtl}
.about{gap:clamp(28px,5vw,56px)}
@media(max-width:1024px){.hb{display:inline-flex!important;align-items:center;justify-content:center}nav .logo{font-size:18px}nav>div:last-child{gap:6px!important}.lk{display:none!important}}
@media(min-width:701px) and (max-width:1000px){.lk a{padding:8px 8px;font-size:13px}.lk a[href="#faq"]{display:none}nav{padding:12px 3vw}.hi{gap:clamp(28px,6vw,70px)}.hi .av{width:140px;height:187px}.grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}
@media(max-width:1024px){input,textarea,select{font-size:16px}}
.lk{flex:1;justify-content:center}
@keyframes ul{0%{background:#fff;box-shadow:none}33%{background:#000;box-shadow:0 0 0 1px #ffffff55}66%{background:var(--gold);box-shadow:none}100%{background:#fff;box-shadow:none}}
.lk a,.lk a:hover,.lk a.on{background:none!important;color:var(--mut);position:relative}
.lk a:hover,.lk a.on{color:var(--tx)}
.lk a:hover:after,.lk a.on:after,.sm a.on:after,.sm a:hover:after,.chip.on:after,.chip:hover:after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;animation:ul 2.4s linear infinite}
.sm a,.sm a:active,.sm a.on{background:none!important;border:0;border-bottom:1px solid var(--ln);border-radius:0;position:relative}
.sml a{border:0}
.chip,.chip:hover,.chip.on{background:none!important;border:0!important;border-radius:0;position:relative;padding:8px 12px;color:var(--mut)}
.chip.on,.chip:hover{color:var(--tx)}
.mm{position:relative}
.wm{position:absolute;inset:-30%;z-index:1;pointer-events:none;overflow:hidden;opacity:.13;color:#fff;font:700 18px 'Reem Kufi';line-height:3;text-align:center;word-break:break-all;transform:rotate(-24deg);text-shadow:0 1px 2px #000}
.card .i,.card .play{z-index:2}
.nd,.nd *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.nd .m img,.nd .m video,.mm.nd img{pointer-events:none;-webkit-user-drag:none}
@media print{.nd{visibility:hidden}}

/* العنوان والتصنيف تحت الصورة/الفيديو وليس فوقهما */
.card .i{position:static;inset:auto;padding:12px 14px 2px;background:none;color:var(--tx);z-index:auto}
.card .i h3{font-size:16px;line-height:1.5;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:700px){.card .i{padding:10px 10px 2px}.card .i h3{font-size:14px}}

/* نقوش فرعونية خفيفة (CSS فقط، بلا صور خارجية) */
.orn{grid-column:1/-1;height:14px;opacity:.65;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M2 14V11H6V8H10V5H14V8H18V11H22V14Z' fill='%23d4a94f'/%3E%3C/svg%3E") repeat-x}
.modal{border:3px double rgba(212,169,79,.5)}
.card.sel{border-color:var(--gold);box-shadow:inset 0 0 0 3px var(--card),inset 0 0 0 4px rgba(212,169,79,.55)}
.card.sel:before,.card.sel:after{content:"";position:absolute;left:0;right:0;height:14px;opacity:.7;z-index:3;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M2 14V11H6V8H10V5H14V8H18V11H22V14Z' fill='%23d4a94f'/%3E%3C/svg%3E") repeat-x}
.card.sel:before{top:0;transform:scaleY(-1)}.card.sel:after{bottom:0}
/* الصور الفرعية داخل نافذة المعاينة */
.gxw{grid-column:1/-1;padding:0 28px 22px;display:flex;flex-direction:column;gap:22px}
.gh{font:700 20px 'Reem Kufi';color:var(--gold);margin-bottom:12px}
.gl{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.gi{display:flex;flex-direction:column;gap:10px;background:var(--bg);border:1px solid var(--ln);border-radius:18px;padding:10px}
.gm{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:16/9;background:#000}
.gm img{width:100%;height:100%;object-fit:cover;display:block}
.gi .pr{max-height:150px;font-size:14px}
.gi.nd img{pointer-events:none}
.gb{position:absolute;top:10px;right:10px;z-index:3;background:#000a;color:#fff;border-radius:99px;padding:3px 10px;font-size:12px}
@media(max-width:700px){.gxw{padding:0 14px 18px}.gl{grid-template-columns:1fr}}

#adm{order:-1;margin-right:auto!important;margin-left:12px!important}

nav{position:sticky!important;top:env(safe-area-inset-top,0px)!important}nav #adm{position:absolute!important;left:20px!important;right:auto!important;top:12px!important;margin:0!important;z-index:30!important}

nav{position:relative}nav #adm{position:absolute;left:24px;top:10px;z-index:30}

/* LOGIN POSITION FIX */
nav #adm{position:fixed!important;left:24px!important;top:10px!important;right:auto!important;z-index:99999!important;margin:0!important;display:block!important}

/* Premium Login Button */
#own{background:linear-gradient(135deg,#7d2948,#a33b5d)!important;border:1px solid #b84c70!important;box-shadow:0 0 0 1px rgba(163,59,93,.25),0 0 18px rgba(163,59,93,.38),0 6px 24px rgba(0,0,0,.25)!important;color:#fff!important;transition:all .25s ease!important}#own:hover{transform:translateY(-2px)!important;box-shadow:0 0 0 1px rgba(184,76,112,.4),0 0 26px rgba(163,59,93,.58),0 8px 28px rgba(0,0,0,.3)!important}


@media(max-width:700px){
  nav #login{display:none!important}
  #sm .mobile-login{
    display:block!important;
    width:100%!important;
    margin-top:12px!important;
    padding:13px!important;
    box-sizing:border-box!important;
  }
}
@media(min-width:701px){
  #sm .mobile-login{display:none!important}
}

/* QISHTA FIX: homepage sections stay on one horizontal row */
#secs .sec .grid{
  display:flex!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  gap:12px!important;
  align-items:stretch;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
#secs .sec .grid > .card{
  flex:0 0 calc((100% - 36px) / 4)!important;
  width:calc((100% - 36px) / 4)!important;
  min-width:calc((100% - 36px) / 4)!important;
  scroll-snap-align:start;
}

/* QISHTA FINAL SMALL FIXES */
.sec .bar{
  position:relative;
}
.sec-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:auto;
}
.more-sec{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--gold);
  font:700 13px 'Cairo',sans-serif;
  padding:6px 2px;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}
.more-sec:hover{
  color:var(--b2);
  text-decoration:none;
}

/* The horizontal row should not show a long scrollbar line */
#secs .sec .grid{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
#secs .sec .grid::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}

/* "عرض المزيد" opens the complete section as a normal full grid */
#secs.q-single .sec .grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important;
  flex-wrap:initial!important;
  overflow:visible!important;
  scroll-snap-type:none!important;
}
#secs.q-single .sec .grid > .card{
  flex:initial!important;
  width:auto!important;
  min-width:0!important;
}

/* Keep the owner login/logout visible while the dashboard is shown */
@media(min-width:701px){
  nav #own{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
  }
}
@media(max-width:700px){
  nav #own{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
    min-height:40px!important;
    padding:8px 10px!important;
    max-width:110px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
}


/* ===== QISHTA TARGETED FIXES: auth + theme only ===== */
@media(min-width:701px){
  nav #own{position:static!important;left:auto!important;right:auto!important;top:auto!important;margin:0!important;display:inline-flex!important;visibility:visible!important;opacity:1!important;}
  nav #adm{position:static!important;left:auto!important;right:auto!important;top:auto!important;margin:0!important;display:inline-flex!important;visibility:visible!important;opacity:1!important;}
}
@media(max-width:1024px){
  nav #own{display:none!important;visibility:hidden!important;position:absolute!important;pointer-events:none!important;}
  nav #adm{display:none!important;visibility:hidden!important;position:absolute!important;pointer-events:none!important;}
}

/* ===== QISHTA DAY / NIGHT MODE ===== */
:root[data-theme="light"]{--bg:#f7f4f1;--card:#ffffff;--tx:#241f21;--mut:#756b6e;--b:#a83a58;--b2:#c65373;--gold:#b4872f;--ln:rgba(36,31,33,.13);color-scheme:light;}
html[data-theme="dark"]{color-scheme:dark;}
html[data-theme="light"] body{background:var(--bg);color:var(--tx);}
html[data-theme="light"] nav,html[data-theme="light"] .tb,html[data-theme="light"] .sm,html[data-theme="light"] .dr{background:color-mix(in srgb,var(--card) 90%,transparent)!important;}
html[data-theme="light"] .card,html[data-theme="light"] .chip,html[data-theme="light"] input,html[data-theme="light"] textarea,html[data-theme="light"] select,html[data-theme="light"] .gi,html[data-theme="light"] .tool,html[data-theme="light"] .tf{background:var(--card);color:var(--tx);border-color:var(--ln);}
.theme-toggle{width:42px!important;height:42px!important;min-width:42px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:50%!important;background:color-mix(in srgb,var(--card) 82%,transparent)!important;border:1px solid var(--ln)!important;color:var(--gold)!important;cursor:pointer!important;z-index:25!important;}
.theme-toggle .theme-icon{font-family:system-ui,sans-serif;font-size:22px;line-height:1;display:block;}
@media(max-width:1024px){.theme-toggle{width:44px!important;height:44px!important;min-width:44px!important;}}
html[data-theme="light"] .theme-toggle{color:#a27725!important;background:rgba(255,255,255,.82)!important;}
html[data-theme="light"] #sm.q-final-drawer{background:var(--bg)!important;color:var(--tx)!important;}
html[data-theme="light"] #sm.q-final-drawer a,html[data-theme="light"] #sm.q-final-drawer button{color:var(--tx)!important;border-bottom-color:var(--ln)!important;}
html[data-theme="light"] #sm.q-final-drawer .q-menu-title{color:var(--gold)!important;}


/* ===== QISHTA REQUESTED FIXES ONLY: tools + auth positioning ===== */
/* AI tools: restore the intended card structure without changing the surrounding theme. */
.tlg{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;align-items:stretch}
.tlg .tool{display:flex;flex-direction:column;gap:13px;min-width:0;padding:18px;border:1px solid var(--ln);border-radius:20px;background:var(--card);color:var(--tx);box-shadow:0 8px 24px rgba(0,0,0,.12);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.tlg .tool:hover{transform:translateY(-3px);border-color:rgba(212,169,79,.45);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.tlg .tt{display:flex;align-items:center;gap:12px;min-width:0}
.tlg .tlogo{width:52px;height:52px;min-width:52px;border-radius:14px;display:grid;place-items:center;overflow:hidden;background:color-mix(in srgb,var(--bg) 75%,var(--card));border:1px solid var(--ln);color:var(--gold);font:800 20px 'Cairo',sans-serif}
.tlg .tlogo img{width:100%;height:100%;object-fit:contain;display:block;padding:7px;box-sizing:border-box}
.tlg .tmeta{min-width:0;display:flex;flex-direction:column;gap:5px}
.tlg .tmeta h3{margin:0;font-size:17px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlg .tmeta .pill{align-self:flex-start}
.tlg .td{margin:0;color:var(--mut);line-height:1.75;min-height:50px}
.tlg .tf{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--ln);border-radius:12px;color:var(--tx);background:color-mix(in srgb,var(--card) 88%,var(--bg))}
.tlg .tf small{color:var(--mut);line-height:1.5}
.tlg .tgo{margin-top:auto;text-align:center;text-decoration:none}
@media(max-width:700px){.tlg{grid-template-columns:1fr;gap:14px}.tlg .tool{padding:15px}.tlg .tmeta h3{font-size:16px}}

/* Keep Dashboard and Login/Logout in the same nav action row on desktop/tablet. */
@media(min-width:701px){
  nav>div:last-child{display:flex!important;align-items:center!important;gap:8px!important;position:relative!important}
  nav #own,nav #adm{position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin:0!important;transform:none!important;float:none!important;z-index:auto!important}
  nav #adm{display:inline-flex!important;visibility:visible!important;opacity:1!important}
  nav #own{display:inline-flex!important;visibility:visible!important;opacity:1!important}
}
/* On phones/iPad, login is intentionally inside the drawer to avoid nav overlap. */
@media(max-width:1024px){
  nav #own,nav #adm{display:none!important;visibility:hidden!important;position:absolute!important;pointer-events:none!important}
  #sm .q-owner-drawer{display:block!important;width:100%!important;box-sizing:border-box!important;margin-top:12px!important;padding:13px 16px!important;text-align:center!important}
}
/* The more link is text-only: no background, border or shadow. */
.more-sec,.more-sec:hover,.more-sec:focus,.more-sec:active{background:transparent!important;border:0!important;box-shadow:none!important;text-shadow:none!important}


/* QISHTA MOBILE / IPAD LAYOUT FIX ONLY */
@media(max-width:700px){
  #secs .sec .grid{
    gap:12px!important;
    padding-inline:0!important;
  }
  #secs .sec .grid > .card{
    flex:0 0 47vw!important;
    width:47vw!important;
    min-width:47vw!important;
  }
  #secs .sec .grid > .card .m{
    aspect-ratio:4/5!important;
  }
  #secs .sec .grid > .card .i{
    padding:10px 10px 2px!important;
  }
  #secs .sec .grid > .card .i h3{
    font-size:14px!important;
    line-height:1.45!important;
  }
  #secs .sec .grid > .card .pill{
    font-size:11px!important;
    padding:3px 9px!important;
  }
  #secs .sec .grid > .card .st{
    padding:6px 9px!important;
    font-size:12px!important;
  }
  .sec .bar{
    gap:8px!important;
    margin-bottom:18px!important;
  }
  .sec .bar h2{
    font-size:24px!important;
  }
}

/* VIDEO SECTION ONLY: keep video thumbnails in the previous storyboard ratio. */
#secs .sec .grid > .card.vd .m{aspect-ratio:16/9!important}

@media(min-width:701px) and (max-width:1024px){
  #secs .sec .grid{
    gap:14px!important;
  }
  #secs .sec .grid > .card{
    flex:0 0 31vw!important;
    width:31vw!important;
    min-width:31vw!important;
  }
  #secs .sec .grid > .card .i{
    padding:12px 12px 2px!important;
  }
  #secs .sec .grid > .card .i h3{
    font-size:15px!important;
    line-height:1.5!important;
  }
}


/* ===== QISHTA REQUESTED: notifications + conversation UI ===== */
.notify-bell{position:relative;width:42px!important;height:42px!important;min-width:42px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:50%!important;font-size:18px;z-index:25}.notify-bell span{line-height:1}.notify-bell b{position:absolute;top:-4px;right:-3px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;background:var(--b);color:#fff;font:800 10px/18px Cairo,sans-serif;border:2px solid var(--bg)}
.notify-panel{position:fixed;top:72px;right:5vw;width:min(390px,calc(100vw - 24px));max-height:min(70vh,620px);z-index:9997;background:var(--card);color:var(--tx);border:1px solid var(--ln);border-radius:20px;box-shadow:0 18px 60px #0006;display:none;overflow:hidden;direction:rtl}.notify-panel.on{display:flex;flex-direction:column}.notify-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ln);font-weight:800}.notify-list{overflow:auto;padding:8px}.notify-item{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;cursor:pointer;transition:.2s;border:1px solid transparent}.notify-item:hover{background:color-mix(in srgb,var(--b) 9%,var(--card));border-color:var(--ln)}.notify-item.unread{background:color-mix(in srgb,var(--b) 12%,var(--card));border-color:color-mix(in srgb,var(--b) 28%,var(--ln))}.notify-dot{width:9px;height:9px;min-width:9px;margin-top:7px;border-radius:50%;background:var(--b2)}.notify-item.read .notify-dot{opacity:.25}.notify-avatar{width:36px;height:36px;min-width:36px;border-radius:50%;overflow:hidden;background:var(--bg);border:1px solid var(--ln);display:grid;place-items:center;color:var(--gold);font-weight:800}.notify-avatar img{width:100%;height:100%;object-fit:cover}.notify-body{min-width:0;flex:1}.notify-title{font-weight:800;font-size:14px;line-height:1.5}.notify-text{font-size:12px;color:var(--mut);line-height:1.6;margin-top:3px}.notify-time{font-size:10px;color:var(--mut);margin-top:4px}
.chat-modal{grid-column:1/-1;display:flex;flex-direction:column;gap:14px;min-height:min(72vh,680px);direction:rtl}.chat-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--ln)}.chat-user{display:flex;align-items:center;gap:10px;min-width:0}.chat-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--bg);border:1px solid var(--ln);display:grid;place-items:center;color:var(--gold);font-weight:800;overflow:hidden}.chat-avatar img{width:100%;height:100%;object-fit:cover}.chat-meta{min-width:0}.chat-name{font-weight:800}.chat-email{font-size:11px;color:var(--mut);direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-messages{flex:1;min-height:250px;max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:9px;padding:4px}.chat-bubble{max-width:min(82%,620px);padding:10px 13px;border-radius:16px;background:var(--card);border:1px solid var(--ln);line-height:1.7;white-space:pre-wrap;word-break:break-word;align-self:flex-start}.chat-bubble.owner{align-self:flex-end;background:color-mix(in srgb,var(--b) 15%,var(--card));border-color:color-mix(in srgb,var(--b) 35%,var(--ln))}.chat-bubble .chat-by{font-size:10px;color:var(--mut);margin-bottom:3px}.chat-bubble .chat-time{font-size:9px;color:var(--mut);margin-top:4px}.chat-compose{display:flex;gap:8px;align-items:flex-end}.chat-compose textarea{flex:1;resize:vertical;min-height:48px;max-height:150px}.chat-compose .btn{white-space:nowrap}.msg-meta{font-size:11px;color:var(--mut);direction:ltr;text-align:right}
@media(max-width:700px){.notify-panel{top:66px;right:12px;width:calc(100vw - 24px);max-height:68vh}.chat-modal{min-height:78vh}.chat-messages{max-height:52vh}.chat-bubble{max-width:90%}.chat-compose{align-items:stretch}.chat-compose .btn{padding:10px 14px}}@media(min-width:701px) and (max-width:1024px){.notify-panel{right:16px}}html[data-theme="light"] .notify-panel{box-shadow:0 18px 60px rgba(36,31,33,.18)}

 /* عرض أقسام المكتبة: 4 بطاقات في صف واحد مع زر عرض المزيد بجوار اسم القسم */
.sec .bar{align-items:center}
.sec-actions{display:flex;align-items:center;gap:10px}
.sec-more{background:none;border:0;color:var(--gold);font-size:12px;font-weight:700;padding:4px 6px;cursor:pointer;white-space:nowrap}
.sec-more:hover{color:var(--b2)}
.sec .grid{grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden}
@media(max-width:900px){.sec .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}



/* QISHTA SECTION PAGE: isolated full view + persistent search/category controls */
.q-sec-page{
  position:fixed;
  inset:0;
  z-index:10;
  width:100%;
  height:100dvh;
  min-height:100vh;
  box-sizing:border-box;
  background:var(--bg);
  overflow:hidden;
  padding:0;
  display:none;
}
.q-sec-page.on{display:block}
.q-sec-page-body{max-width:1400px;height:calc(100dvh - 190px);margin:190px auto 0;overflow:auto;padding:0 5vw 60px;box-sizing:border-box}
.q-sec-page-bar{margin-bottom:28px}
.q-sec-page-bar h2{margin:0}
.q-sec-back{
  margin-inline-start:auto;
  font-size:12px!important;
  padding:5px 8px!important;
}
.q-sec-page-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:22px!important;
  overflow:visible!important;
  width:100%!important;
}
.q-sec-page-grid > .card{
  width:auto!important;
  min-width:0!important;
  flex:none!important;
}

/* Keep the main search and category row visible while a section is open. */
body.q-section-open .search{
  position:fixed!important;
  top:76px!important;
  inset-inline-end:5vw!important;
  width:280px!important;
  max-width:280px!important;
  z-index:100!important;
  margin:0!important;
}
body.q-section-open #q{width:100%!important;box-sizing:border-box!important}
body.q-section-open #chips{
  position:fixed!important;
  top:132px!important;
  inset-inline:5vw!important;
  z-index:100!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:8px 0 10px!important;
  margin:0!important;
  background:var(--bg)!important;
  scrollbar-width:none!important;
}
body.q-section-open #chips::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
body.q-section-open #chips .chip{flex:0 0 auto!important;white-space:nowrap!important}

@media(max-width:1024px){
  .q-sec-page-body{height:calc(100dvh - 184px);margin-top:184px;padding:0 3vw 50px}
  body.q-section-open .search{top:72px!important;inset-inline-end:3vw!important;width:280px!important;max-width:280px!important}
  body.q-section-open #chips{top:126px!important;inset-inline:3vw!important}
  .q-sec-page-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
}
@media(max-width:700px){
  .q-sec-page-body{height:calc(100dvh - 176px);margin-top:176px;padding:0 4vw 44px}
  body.q-section-open .search{top:68px!important;inset-inline-end:4vw!important;width:100%!important;max-width:280px!important}
  body.q-section-open #chips{top:122px!important;inset-inline:4vw!important}
  .q-sec-page-bar{gap:8px;margin-bottom:20px}
  .q-sec-page-bar h2{font-size:24px}
  .q-sec-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .q-sec-page-grid .card{border-radius:14px}
  .q-sec-page-grid .card .i{padding:9px 9px 2px}
  .q-sec-page-grid .card .i h3{font-size:13px;line-height:1.45}
  .q-sec-page-grid .st{padding:6px 8px;font-size:11px}
  .q-sec-back{font-size:11px!important;padding:5px 7px!important}
}


/* Search size must return to its normal compact size after leaving a section. */
body:not(.q-section-open) .search{
  position:static!important;
  width:280px!important;
  max-width:280px!important;
  margin:0!important;
}
@media(max-width:700px){
  body:not(.q-section-open) .search{
    width:100%!important;
    max-width:none!important;
  }
}