:root{--bg:#121214;--s1:#1a1a1d;--s2:#232327;--line:#35353b;--tx:#ece8e1;--mu:#a8a398;--gold:#cdb27c;--gold2:#e4d3a8;--r:12px;
--font:"Segoe UI","Noto Naskh Arabic","Dubai",Tahoma,Arial,sans-serif;--serif:"Sakkal Majalla","Traditional Arabic","Noto Naskh Arabic","Amiri",Georgia,serif}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:400 1rem/1.75 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--gold);color:#121214;padding:.4rem 1rem;border-radius:8px;z-index:100}
.skip:focus{top:12px}
.wrap{max-width:1360px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
svg.i{width:1.25em;height:1.25em;flex:none;vertical-align:middle}
.hero{padding-block:clamp(48px,9vw,120px) clamp(28px,4vw,48px);border-bottom:1px solid var(--line)}
.hero .rule{width:64px;height:2px;background:var(--gold);margin-bottom:1.6rem}
.hero h1{font:700 clamp(2.5rem,6.5vw,5rem)/1.15 var(--serif);margin:0 0 .35em}
.hero p{max-width:36em;color:var(--mu);font-size:1.12rem;margin:0 0 2rem}
.search{position:relative;max-width:520px}
.search svg{position:absolute;inset-inline-start:1rem;top:50%;transform:translateY(-50%);color:var(--gold)}
.search input{width:100%;background:var(--s1);border:1px solid var(--line);border-radius:99px;padding:.8rem 1rem;padding-inline-start:3rem;transition:border-color .2s}
.search input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(205,178,124,.25)}
.status{color:var(--mu);padding-block:2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(14px,2vw,28px);padding:40px 0 88px;margin:0;list-style:none}
.card{position:relative;display:block;aspect-ratio:4/3.3;border-radius:var(--r);overflow:hidden;background:var(--s1);border:1px solid var(--line);transition:border-color .25s}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover,.card:focus-visible{border-color:var(--gold)}
.card:hover img{transform:scale(1.04)}
.card .meta{position:absolute;inset-inline:0;bottom:0;padding:2.2rem 1.3rem 1.1rem;background:linear-gradient(transparent,rgba(12,12,13,.9))}
.card h2{margin:0;font:700 1.5rem/1.3 var(--serif)}
.card .sub{display:flex;gap:.8rem;flex-wrap:wrap;color:var(--gold2);font-size:.88rem}
.card .count{position:absolute;top:14px;inset-inline-start:14px;background:rgba(18,18,20,.8);border:1px solid var(--line);padding:0 .8rem;border-radius:99px;font-size:.85rem}
.card.empty{display:grid;place-content:center;justify-items:center;gap:.4rem;text-align:center;border-style:dashed;padding:1.5rem}
.card.empty .i{width:2.6rem;height:2.6rem;color:var(--gold);opacity:.7}
.card.empty p{margin:0;color:var(--mu);font-size:.9rem;max-width:20em}
.card.empty h2{font-size:1.3rem}
.ghead{padding-block:32px 8px}
.back,.btn,.chip{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);background:var(--s1);border-radius:99px;padding:.35rem 1.1rem;cursor:pointer;transition:border-color .2s,background .2s}
.back:hover,.btn:hover,.chip:hover{border-color:var(--gold)}
.ghead h1{font:700 clamp(2rem,5vw,3.4rem)/1.2 var(--serif);margin:1.2rem 0 0}
.ghead .sub{display:flex;gap:1rem;color:var(--gold2)}
.bar{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:space-between;padding-block:18px;border-bottom:1px solid var(--line)}
.bar .tools{display:flex;gap:.6rem;flex-wrap:wrap}
.chips{display:flex;gap:.5rem;overflow-x:auto;padding-block:16px;scrollbar-width:thin}
.chip{white-space:nowrap;font-size:.92rem;padding-block:.15rem}
.chip[aria-current=page]{background:var(--gold);color:#121214;border-color:var(--gold)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:14px;padding-block:24px;margin:0;list-style:none}
.tile{position:relative;aspect-ratio:4/3;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--s1);cursor:pointer;display:block;width:100%}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile:hover img{transform:scale(1.03)}
.tile:hover,.tile:focus-visible{border-color:var(--gold)}
.tile.loading{background:linear-gradient(100deg,var(--s1) 30%,var(--s2) 50%,var(--s1) 70%);background-size:300% 100%;animation:sh 1.4s linear infinite}
@keyframes sh{to{background-position:-300% 0}}
.tile .cap{position:absolute;inset-inline:0;bottom:0;padding:1.4rem .8rem .4rem;font-size:.8rem;text-align:start;background:linear-gradient(transparent,rgba(12,12,13,.85));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1}
.ph{position:absolute;inset:0;display:grid;place-content:center;color:var(--mu);font-size:.9rem;background:repeating-linear-gradient(45deg,var(--s1),var(--s1) 10px,var(--s2) 10px,var(--s2) 20px)}
.more{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:16px 0 88px}
.msg{max-width:640px;margin:48px auto;padding:2rem;border:1px solid var(--line);border-radius:var(--r);background:var(--s1)}
.msg h2{margin:0 0 .6rem;font:700 1.6rem var(--serif);color:var(--gold2)}
.msg code{direction:ltr;unicode-bidi:isolate;background:var(--s2);padding:.05rem .5rem;border-radius:6px;font-size:.9em}
.lb{position:fixed;inset:0;z-index:50;background:rgba(8,8,9,.97);display:grid;grid-template-rows:auto 1fr;grid-template-columns:auto 1fr auto;align-items:center}
.lb[hidden]{display:none}
.lb-bar{grid-column:1/-1;display:flex;gap:1rem;align-items:center;padding:12px clamp(12px,3vw,32px);border-bottom:1px solid var(--line)}
.lb-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.lb-pos,.lb-dim{color:var(--mu);font-size:.9rem;white-space:nowrap;direction:ltr}
.lb-stage{position:relative;height:100%;min-height:0;display:grid;place-items:center;padding:12px}
.lb-stage img{max-width:100%;max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);object-fit:contain}
.lb-err,.lb-spin{position:absolute;color:var(--mu);text-align:center}
.lb-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--s1);display:grid;place-items:center;cursor:pointer;margin-inline:clamp(4px,2vw,24px)}
.lb-btn:hover:not(:disabled){border-color:var(--gold)}
.lb-btn:disabled{opacity:.3;cursor:default}
#toast{position:fixed;inset-inline:16px;bottom:16px;z-index:90;max-width:560px;margin-inline:auto;background:#3a1e1e;border:1px solid #7a3b3b;padding:.8rem 1.2rem;border-radius:10px}
@media(max-width:640px){.lb{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.lb-bar{grid-column:1}.lb-btn{position:fixed;bottom:14px;z-index:2}.lb-prev{inset-inline-start:14px}.lb-next{inset-inline-end:14px}.lb-stage img{max-height:calc(100dvh - 150px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}