:root {
  --accent: #8b5cf6; --accent2: #06b6d4;
  --gradient: linear-gradient(135deg, #8b5cf6, #6366f1 45%, #06b6d4);
  --bg-darkest: #0a0b12; --bg-mid: #171928;
  --text-normal: #c7cce3; --text-muted: #7d84a8; --text-bright: #f5f6fc;
  --border: rgba(255,255,255,.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-darkest); color: var(--text-normal);
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif; line-height: 1.9;
  min-height: 100vh; position: relative; overflow-x: hidden;
}
.orb { position: fixed; border-radius: 50%; filter: blur(90px); opacity: .28; z-index: 0; pointer-events: none; }
.orb-1 { width: 420px; height: 420px; background: var(--accent); top: -160px; right: -120px; }
.orb-2 { width: 360px; height: 360px; background: var(--accent2); bottom: -140px; left: -100px; }

.topbar { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; padding: 22px 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-badge { width: 34px; height: 34px; border-radius: 10px; background: var(--gradient); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 16px; }
.brand-name { font-size: 18px; font-weight: 700; color: var(--text-bright); }
.lang-switch { display: flex; gap: 6px; }
.lang-switch button { font-family: inherit; font-size: 13px; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text-muted); cursor: pointer; }
.lang-switch button.active { background: var(--gradient); color: #fff; border-color: transparent; }

main.doc { position: relative; z-index: 1; max-width: 860px; margin: 22px auto 0; padding: 0 20px; }
.card { background: rgba(23,25,40,.7); backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: 22px; padding: 38px 40px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
h1 { margin: 0 0 6px; font-size: 30px; color: var(--text-bright); font-weight: 800; }
.updated { color: var(--text-muted); font-size: 13px; margin-bottom: 26px; }
h2 { margin: 30px 0 8px; font-size: 19px; color: var(--text-bright); font-weight: 700; }
p, li { font-size: 15px; }
p { margin: 8px 0; }
ul { margin: 8px 0; padding-inline-start: 22px; }
li { margin: 4px 0; }
a { color: #8fb4ff; }
.notice { background: linear-gradient(135deg, rgba(139,92,246,.16), rgba(6,182,212,.10)); border: 1px solid rgba(139,92,246,.45); border-radius: 14px; padding: 14px 18px; margin: 18px 0; color: var(--text-bright); }
.footer { position: relative; z-index: 1; max-width: 860px; margin: 26px auto 40px; padding: 0 20px; text-align: center; font-size: 13px; color: var(--text-muted); }
.footer a { color: var(--text-muted); margin: 0 10px; text-decoration: none; }
.footer a:hover { color: var(--text-bright); text-decoration: underline; }
.lang-en { display: none; }
html[lang="en"] .lang-en { display: block; }
html[lang="en"] .lang-ar { display: none; }
html[lang="en"] ul.lang-en { display: block; }
@media (max-width: 640px) { .card { padding: 26px 20px; } h1 { font-size: 24px; } }