/* RTL overrides — all selectors key on [dir="rtl"] so they activate automatically when JS sets , and deactivate when it switches back to ltr. */ [dir="rtl"] body { /* Arabic font stack: Cairo is a clean webfont for Arabic UI; falls back to system fonts that render Arabic well (Segoe UI on Windows, Tahoma, etc.) */ font-family: 'Cairo', 'Segoe UI', 'Tahoma', system-ui, sans-serif; } [dir="rtl"] #header { /* Flip logo/button order for RTL reading flow */ flex-direction: row-reverse; } [dir="rtl"] #status-bar { justify-content: flex-end; }