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

components/email/thread-email-item.tsx

@@ -7,6 +7,7 @@ import { Avatar } from "@/components/ui/avatar";
 import { Paperclip, Star, Circle, CheckSquare, Square } from "lucide-react";
 import { useEmailDrag } from "@/hooks/use-email-drag";
 import { useEmailStore } from "@/stores/email-store";
+import { useSettingsStore } from "@/stores/settings-store";
 
 interface ThreadEmailItemProps {
   email: Email;
@@ -27,6 +28,7 @@ export function ThreadEmailItem({
   const isStarred = email.keywords?.$flagged;
   const sender = email.from?.[0];
   const { selectedMailbox, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection } = useEmailStore();
+  const density = useSettingsStore((state) => state.density);
   const isChecked = selectedEmailIds.has(email.id);
 
   const { dragHandlers, isDragging } = useEmailDrag({
@@ -104,12 +106,14 @@ export function ThreadEmailItem({
         )}
 
         {/* Small Avatar */}
-        <Avatar
-          name={sender?.name}
-          email={sender?.email}
-          size="sm"
-          className="flex-shrink-0"
-        />
+        {density !== 'extra-compact' && (
+          <Avatar
+            name={sender?.name}
+            email={sender?.email}
+            size="sm"
+            className="flex-shrink-0"
+          />
+        )}
 
         {/* Content */}
         <div className="flex-1 min-w-0">