:root { --ink: #0B1220; --muted: #64748B; --line: #E2E8F0; --green: #047857; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--ink); background: #F8FAFC; line-height: 1.7; }
header { background: var(--ink); padding: 18px 20px; }
header a { color: #fff; text-decoration: none; font-weight: 700; }
main { max-width: 780px; margin: 0 auto; padding: 32px 16px 64px; display: grid; gap: 28px; }
article { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
h1 { font-size: 28px; line-height: 1.25; margin: 0 0 6px; }
h2 { font-size: 19px; margin: 26px 0 8px; }
.meta { color: var(--muted); font-size: 14px; margin: 0; }
a { color: var(--green); }
ul { padding-inline-start: 22px; }
li { margin: 6px 0; }
@media (max-width: 640px) { article { padding: 20px; } h1 { font-size: 24px; } }