:root { --ink:#1B1F26; --muted:#5A5E68; --accent:#B8860B; --yellow:#FFC631; --bg:#F4F5F7; --card:#FFFFFF; --line:#E3E5EA; --asphalt:#2F3844; }
@media (prefers-color-scheme: dark) { :root { --ink:#F2F3F5; --muted:#A7AFBC; --accent:#FFC631; --bg:#121316; --card:#1D1F24; --line:#2D3037; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.85 -apple-system, "SF Arabic", "Segoe UI", Tahoma, sans-serif; direction:rtl; text-align:right; }
header { background:var(--asphalt); color:#fff; padding:34px 20px 42px; position:relative; }
header::after { content:''; position:absolute; left:0; right:0; bottom:16px; height:6px;
  background:repeating-linear-gradient(90deg, var(--yellow) 0 34px, transparent 34px 60px); opacity:.9; }
header .in { max-width:720px; margin:0 auto; display:flex; align-items:center; gap:14px; }
header img { width:54px; height:auto; }
header h1 { margin:0; font-size:28px; }
header p { margin:2px 0 0; color:#C9CED6; font-size:15px; }
nav { max-width:720px; margin:18px auto 0; padding:0 20px; display:flex; gap:10px; flex-wrap:wrap; }
nav a { padding:8px 16px; border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--ink); text-decoration:none; font-weight:600; font-size:15px; }
nav a.on { background:var(--asphalt); color:var(--yellow); border-color:var(--asphalt); }
main { max-width:720px; margin:0 auto; padding:22px 20px 64px; }
.date { color:var(--muted); font-size:15px; margin-bottom:18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:6px 24px 20px; }
h2 { font-size:20px; margin:28px 0 6px; color:var(--accent); }
ul { padding-inline-start:22px; } li { margin:6px 0; }
a { color:var(--accent); }
footer { text-align:center; color:var(--muted); font-size:14px; padding-bottom:36px; }