feat: add multi-language support for 20 locales

Add complete i18n infrastructure with 21 supported languages:
English, Simplified Chinese, Traditional Chinese, Japanese, Korean,
Spanish, French, Italian, Brazilian Portuguese, German, Dutch, Swedish,
Russian, Polish, Ukrainian, Arabic (RTL), Turkish, Hindi, Vietnamese,
Indonesian, and Thai.

- I18nProvider context with three-tier locale detection
  (user preference > navigator.languages > instance default > English)
- ~1500 translation keys per locale with TypeScript-enforced completeness
- Dynamic code-splitting: only the active locale is loaded at runtime
- Language selectors in footer, login page, settings, and mobile sidebar
- Arabic RTL support with CSS logical properties across all components
- Tool names, descriptions, and categories translated via i18n helpers
- Public API endpoint GET /api/v1/config/locale for instance default
- Multi-script font stack (CJK, Arabic, Devanagari, Thai, Cyrillic)
- format() and plural() helpers for interpolation and pluralization
- API error translation mapping (translateApiError)
- 36 Playwright e2e tests verifying all 21 locales load correctly
- 25 unit tests for format, plural, locale detection, and completeness
- Updated translations.md docs and CLAUDE.md conventions

apps/web/src/components/tools/meme-generator-preview.tsx

@@ -163,7 +163,7 @@ function TemplateGallery() {
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             placeholder="Search templates..."
-            className={cn(INPUT_CLASS, "pl-8")}
+            className={cn(INPUT_CLASS, "ps-8")}
           />
         </div>
 
@@ -183,7 +183,7 @@ function TemplateGallery() {
               )}
             >
               {cat.label}
-              <span className="ml-1 opacity-70">({categoryCounts[cat.id] ?? 0})</span>
+              <span className="ms-1 opacity-70">({categoryCounts[cat.id] ?? 0})</span>
             </button>
           ))}
         </div>
@@ -281,7 +281,7 @@ function LayoutPicker() {
               data-testid={`layout-${key}`}
               onClick={() => setCustomLayout(key)}
               className={cn(
-                "relative rounded-lg border-2 p-3 transition-all text-left",
+                "relative rounded-lg border-2 p-3 transition-all text-start",
                 selected === key
                   ? "border-primary bg-primary/5"
                   : "border-border hover:border-primary/40",