/* v0.91.34 Phase 3d: MENA design system (tokens, type, focus, switches, motion).
   Loaded after the legacy styles; it maps existing variables instead of
   restyling pages, so screens change only where a token is used.

   Breakpoints (three only): phone <= 700px, tablet <= 1024px, desktop above.
   Spacing scale: 4 · 8 · 12 · 16 · 24 · 32. Radii: 8 · 12 · 16 · pill. */
:root{
 --mena-bg:var(--bg,#08101f);--mena-surface:var(--panel,#111a31);--mena-surface-2:var(--panel2,#0c162b);
 --mena-border:var(--line,#29395c);--mena-text:var(--text,#f6f8fc);--mena-muted:var(--muted,#9eabc6);
 --mena-accent:var(--accent,#745cff);--mena-success:var(--green,#45d6ad);--mena-danger:var(--danger,#ff9aa9);
 --mena-warning:#e0a24a;--mena-focus:#8fb1ff;
 --mena-space-1:4px;--mena-space-2:8px;--mena-space-3:12px;--mena-space-4:16px;--mena-space-5:24px;--mena-space-6:32px;
 --mena-radius-s:8px;--mena-radius-m:12px;--mena-radius-l:16px;--mena-radius-pill:999px;
 --mena-font-latin:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 --mena-font-arabic:"IBM Plex Sans Arabic","Noto Sans Arabic",Tahoma,Arial,sans-serif;
 --mena-motion-fast:.15s;--mena-motion:.25s;--mena-ease:cubic-bezier(.2,.7,.2,1);
}
body{font-family:var(--mena-font-latin)}
/* Arabic text gets a real Arabic face, whether the UI or only the content is Arabic. */
body.ui-ar,:lang(ar),[dir=rtl]{font-family:var(--mena-font-arabic)}
body.ui-ar{line-height:1.65}
/* One visible keyboard focus everywhere. */
:focus-visible{outline:3px solid var(--mena-focus);outline-offset:2px}
button:focus:not(:focus-visible){outline:none}
/* Switches: real checkboxes (same semantics and events), drawn as toggles. */
input[type=checkbox].menaSwitch{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:44px!important;height:26px!important;min-width:44px;margin:0 var(--mena-space-2)!important;
 border-radius:var(--mena-radius-pill);background:#3a4a68;border:1px solid var(--mena-border);cursor:pointer;vertical-align:middle;transition:background var(--mena-motion-fast) var(--mena-ease)}
input[type=checkbox].menaSwitch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;
 box-shadow:0 1px 3px #0006;transition:inset-inline-start var(--mena-motion-fast) var(--mena-ease)}
input[type=checkbox].menaSwitch:checked{background:var(--mena-accent);border-color:var(--mena-accent)}
input[type=checkbox].menaSwitch:checked::after{inset-inline-start:21px}
input[type=checkbox].menaSwitch:disabled{opacity:.45;cursor:not-allowed}
/* Motion: honour the system setting everywhere. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}