:root { --bg:#fff; --fg:#0f172a; --muted:#64748b; --brand:#4f46e5; --card:#f1f5f9; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b0b12; --fg:#e2e8f0; --muted:#94a3b8; --brand:#818cf8; --card:#151522; } }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "SF Arabic", "Segoe UI", Tahoma, sans-serif; background:var(--bg); color:var(--fg); line-height:1.7; }
main { max-width: 760px; margin: 0 auto; padding: 48px 20px; }
h1 { font-size: 2.2rem; margin: 0 0 8px; } h2 { margin-top: 2rem; font-size: 1.2rem; }
p, li { color: var(--fg); } .muted { color: var(--muted); }
a { color: var(--brand); } nav { display:flex; gap:16px; margin-bottom: 32px; flex-wrap: wrap; }
.card { background: var(--card); border-radius: 16px; padding: 20px; margin: 16px 0; }
.logo { display:inline-grid; place-items:center; width:56px; height:56px; border-radius:14px; background:linear-gradient(135deg,#6d5efc,#3b2fd1); color:#fff; font-weight:800; font-size:28px; }
hr { border: none; border-top: 1px solid var(--card); margin: 40px 0; }