:root{
  --bg:#0b1220; --panel:#0f172a; --text:#e2e8f0; --muted:#94a3b8; --accent:#f59e0b;
}
*{box-sizing:border-box}
html{font-size:18px}
body{
  margin:0; font-family:system-ui,Tajawal,Arial,Helvetica,sans-serif;
  background:linear-gradient(120deg,#0a0f1d,#111827); color:var(--text)
}
a{color:#93c5fd;text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1100px;margin:0 auto;padding:16px 18px}
h1{margin:0 0 6px;font-size:1.8rem}
.sub{margin:.2rem 0 0;color:var(--muted);font-size:1.05rem}

.filters{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:12px;
  background:var(--panel); border:1px solid #1e293b; border-radius:14px; padding:10px;
}
label{color:var(--muted);font-size:1rem}
select,input[type="search"]{
  padding:10px 12px; border-radius:12px; border:1px solid #1f2a3a; background:#0f172a; color:var(--text);
}
input[type="search"]{min-width:320px}
.muted{color:var(--muted);font-size:.95rem;margin-inline-start:auto}

.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px; padding:16px 18px; max-width:1100px; margin:0 auto;
}
.card{
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid #1e293b; border-radius:16px; overflow:hidden;
  transition:.18s transform, .18s box-shadow; will-change:transform;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.25); }
.card img{ width:100%; height:150px; object-fit:cover; background:#0a1020; }
.card .pad{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.card h3{ margin:.2rem 0; font-size:1.1rem; }
.card p{ margin:0; color:var(--muted); min-height:40px; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; font-size:.85rem; color:#cbd5e1 }
.badge{ padding:3px 8px; border-radius:999px; background:#172036; border:1px solid #22314a }
.row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }

.foot{
  max-width:1100px; margin:8px auto 28px; padding:0 18px; color:var(--muted); font-size:.95rem
}