:root{--brand:#4f46e5;--brand2:#7c3aed;--ink:#1e293b;--muted:#64748b;--soft:#f8fafc;--line:#e2e8f0}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Noto Sans Arabic','Segoe UI',system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.9}
header{background:linear-gradient(135deg,var(--brand2),var(--brand));color:#fff;padding:28px 20px;text-align:center}
header h1{font-size:26px;font-weight:800}
header p{opacity:.9;font-size:14px;margin-top:4px}
nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:14px;background:var(--soft);border-bottom:1px solid var(--line)}
nav a{color:var(--brand);text-decoration:none;font-weight:700;font-size:14px;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line)}
nav a:hover{background:var(--brand);color:#fff}
main{max-width:840px;margin:0 auto;padding:32px 20px 60px}
h2{font-size:20px;font-weight:800;margin:28px 0 10px;color:var(--brand)}
h3{font-size:16px;font-weight:800;margin:18px 0 6px}
p,li{font-size:15px;color:var(--ink)}
ul{padding-inline-start:22px;margin:8px 0}
.en{direction:ltr;text-align:left;border-top:2px dashed var(--line);margin-top:40px;padding-top:24px;font-family:'Segoe UI',system-ui,sans-serif}
.meta{color:var(--muted);font-size:13px;margin-top:6px}
footer{background:var(--soft);border-top:1px solid var(--line);text-align:center;padding:20px;font-size:13px;color:var(--muted)}
a.link{color:var(--brand);font-weight:700}
.card{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:12px 0}