fix: make density setting functional across entire UI

Rename "List Density" to "Density" and apply spacing changes globally
instead of only to email list item heights.

- Replace hardcoded padding/gap values with CSS custom properties
  (--density-item-py, --density-item-gap, --density-header-py,
  --density-card-p, --density-sidebar-py) set via JS on :root
- Apply density-responsive spacing to email list items, thread views,
  email viewer, sidebar, navigation rail, contacts, and calendar
- Use inline styles instead of Tailwind arbitrary value classes to
  avoid Turbopack compilation hangs
- Rename listDensity → density in store, types, and components
- Add persist migration (v1 → v2) and onRehydrateStorage callback
- Update all 8 locale files with broadened labels/descriptions

components/email/email-list.tsx

@@ -96,13 +96,13 @@ export function EmailList({
 
   const [isProcessing, setIsProcessing] = useState(false);
   const parentRef = useRef<HTMLDivElement>(null);
-  const listDensity = useSettingsStore((state) => state.listDensity);
+  const density = useSettingsStore((state) => state.density);
   const showPreview = useSettingsStore((state) => state.showPreview);
 
   const estimateSize = useCallback(() => {
-    const base = { compact: 72, regular: 88, comfortable: 104 }[listDensity];
-    return showPreview ? base + 40 : base;
-  }, [listDensity, showPreview]);
+    const base = { compact: 60, regular: 84, comfortable: 104 }[density];
+    return showPreview ? base + 36 : base;
+  }, [density, showPreview]);
 
   const virtualizer = useVirtualizer({
     count: threadGroups.length,
@@ -217,7 +217,7 @@ export function EmailList({
   useEffect(() => {
     virtualizer.measure();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [listDensity, showPreview]);
+  }, [density, showPreview]);
 
   return (
     <div className={cn("flex flex-col min-h-0", className)}>