@import"https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap";:root{--bg-color: #1a1a1a;--card-bg: #2d2d2d;--text-color: #ffffff;--accent-color: #f1c40f;--border-radius: 20px;--transition: all .3s cubic-bezier(.25, .8, .25, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Tajawal,sans-serif;background-color:var(--bg-color);color:var(--text-color);direction:rtl;min-height:100vh;overflow-x:hidden}#root{width:100%}.container{max-width:1200px;margin:0 auto;padding:2rem 1rem}header{text-align:center;margin-bottom:3rem;padding-top:1rem}.logo-container{display:flex;justify-content:center;margin-bottom:0rem}.logo{height:200px;width:auto;filter:drop-shadow(0 0 10px rgba(241,196,15,.4))}h1{font-size:2.5rem;font-weight:700;margin-bottom:2rem;color:var(--text-color);text-align:center}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;padding:.5rem}.card{position:relative;aspect-ratio:16 / 10;border-radius:var(--border-radius);overflow:hidden;cursor:pointer;transition:var(--transition);box-shadow:0 8px 16px #0006;text-decoration:none;display:flex}.card:hover{transform:translateY(-8px);box-shadow:0 12px 24px #0009}.card img{width:100%;height:100%;object-fit:cover;transition:var(--transition)}.card:hover img{transform:scale(1.05)}.card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.2) 60%,transparent 100%);display:flex;align-items:center;justify-content:center}.card-title{color:#fff;font-size:1.8rem;font-weight:700;text-shadow:2px 2px 6px rgba(0,0,0,.8);pointer-events:none}.back-header{display:flex;justify-content:flex-start;margin-bottom:1.5rem}.back-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.6rem 1.2rem;border-radius:12px;cursor:pointer;font-family:inherit;font-size:1.1rem;font-weight:500;display:flex;align-items:center;gap:.8rem;transition:var(--transition);text-decoration:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.back-button:hover{background:#fff3;transform:translate(5px)}.back-icon{font-size:1.4rem}@media(max-width:600px){.grid{grid-template-columns:1fr}h1{font-size:1.8rem}.logo{height:90px}}