/* ========= Index Page Styles ========= */
:root{
  --bg:#121212; --panel:#1e1e1e; --panel-hover:#222;
  --text:#fff; --muted:#c7c7c7; --border:#1b1b1b;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "Cairo",
               "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

/* Header */
header{
  display:flex; align-items:center; justify-content:space-between;
  background:#1e1e1e; padding:10px 16px; border-bottom:1px solid #222;
}
header h1{margin:0;  font-size:20px}
.logo{height:50px; opacity:.9}

/* Layout */
.container{ max-width:1920px; margin:0 auto; padding:18px; }

/* Cards Grid */
#screens{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px;
}
.card{
  background:#1a1a1a; border:1px solid var(--border);
  border-radius:14px; padding:18px 16px 20px; text-align:center;
  cursor:pointer; transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
.card:hover{ transform:translateY(-3px); background:var(--panel-hover); box-shadow:0 10px 24px rgba(0,0,0,.45); }
.card img{ width:100px; height:150px; object-fit:contain; margin-bottom:4px; opacity:.95 }
.card .id{ font-weight:700; font-size:18px; margin-top:2px }
.card .meta{ color:var(--muted); font-size:12px; line-height:1.5 }

/* Buttons (لو احتجتها في المستقبل) */
button,.btn{
  background:#2b2b2b; border:1px solid #3a3a3a; color:#fff;
  padding:8px 15px; border-radius:10px; cursor:pointer; font-weight:700;
}
button:hover,.btn:hover{ background:#333 }
.btn-primary{ background:#16a34a; border-color:#168a43 }
.btn-primary:hover{ background:#1aa151 }