:root{--canvas:#FAF8F5;--surface:#fff;--line:#EDE9E4;--ink900:#1C1B1A;
      --ink700:#3D3A37;--ink500:#6B6560;--ink300:#A8A29C;--primary:#2F6FE0;
      --fill:#FDF6E8;--deep:#A9822F}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,'Segoe UI',Tahoma,sans-serif;background:var(--canvas);
     color:var(--ink900);line-height:1.9;padding:32px 20px 80px}
.wrap{max-width:760px;margin:0 auto}
header{text-align:center;margin-bottom:32px}
header .logo{font-size:32px;font-weight:800;color:var(--primary)}
header .sub{font-size:13px;color:var(--ink500);direction:ltr}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;
      padding:32px 28px;margin-bottom:20px}
h1{font-size:24px;margin-bottom:4px}
.updated{font-size:12px;color:var(--ink300);margin-bottom:24px}
h2{font-size:18px;color:var(--primary);margin:26px 0 8px;
   padding-bottom:6px;border-bottom:2px solid var(--fill)}
h2:first-of-type{margin-top:0}
p,li{font-size:15px;color:var(--ink700)}
ul{padding-inline-start:22px;margin:8px 0}
li{margin:4px 0}
.en{direction:ltr;text-align:left;margin-top:48px;padding-top:28px;
    border-top:3px solid var(--fill)}
a{color:var(--primary)}
code{background:var(--fill);padding:2px 7px;border-radius:5px;font-size:13px;
     direction:ltr;display:inline-block}
.back{display:inline-block;margin-top:8px;font-size:14px;text-decoration:none}
footer{text-align:center;font-size:12px;color:var(--ink300);margin-top:24px}
.ltr{direction:ltr;display:inline-block}

/* ── مبدّل اللغة ── */
.langbar{display:flex;justify-content:center;gap:8px;margin-bottom:20px}
.langbar button{border:1px solid var(--line);background:var(--surface);
  color:var(--ink500);padding:7px 20px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:700;transition:.2s}
.langbar button.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.langbar button:hover:not(.on){border-color:var(--primary);color:var(--primary)}

/* الإنجليزية تُخفى افتراضياً ويتحكم بها المبدّل */
body[data-lang="ar"] .en-block{display:none}
body[data-lang="en"] .ar-block{display:none}
body[data-lang="en"]{direction:ltr}
body[data-lang="en"] .card{text-align:left}
.en-block{direction:ltr;text-align:left}
.en-block h2{border-bottom-color:var(--fill)}