feat: add extra-compact density option and fix font size scaling

- Add 'extra-compact' density level that hides avatars and preview
  text, showing only sender and subject for maximum information density
- Add visual density preview in appearance settings showing a 3-row
  email list mockup that reflects each density option
- Fix global font size setting only changing line height by moving
  font-size from body to :root so rem-based Tailwind classes scale
- Apply extra-compact behavior to email list items, thread list items,
  thread email items, and thread conversation view (EmailCard)
- Update email list virtualizer size estimates for extra-compact
- Add extra-compact translations for all 8 locales

stores/settings-store.ts

@@ -19,7 +19,7 @@ let isLoadingFromServer = false;
 const SYNC_DEBOUNCE_MS = 2000;
 
 export type FontSize = 'small' | 'medium' | 'large';
-export type Density = 'compact' | 'regular' | 'comfortable';
+export type Density = 'extra-compact' | 'compact' | 'regular' | 'comfortable';
 /** @deprecated Use Density instead */
 export type ListDensity = Density;
 export type DeleteAction = 'trash' | 'permanent';
@@ -438,6 +438,14 @@ function applyDensity(density: Density) {
   const root = document.documentElement;
 
   const densityValues = {
+    'extra-compact': {
+      '--list-item-height': 'auto',
+      '--density-item-py': '2px',
+      '--density-item-gap': '6px',
+      '--density-header-py': '4px',
+      '--density-card-p': '8px',
+      '--density-sidebar-py': '0px',
+    },
     compact: {
       '--list-item-height': 'auto',
       '--density-item-py': '4px',