feat: P5-21 mention color, P5-22 font selector, P5-27 notification presets; update docs

- P5-21: Custom @mention highlight color picker in Settings → Appearance.
  CSS vars with luminance-computed text color; resets cleanly to theme default.
- P5-22: Font selector (System, Inter, JetBrains Mono, Fira Code) in
  Settings → Appearance. Fira Code added to Google Fonts preload.
- P5-27: Gaming/Work/Sleep preset buttons at top of Settings → Notifications.
  Each atomically applies a group of notification settings.
- AppearanceEffects component in App.tsx applies CSS vars on settings change.
- LOTUS_BUGS.md: mark presence + manifest icon bugs as resolved.
- LOTUS_TODO.md: mark P3-6, P5-21, P5-22, P5-27 as [x].
- LOTUS_FEATURES.md: document all four completed features.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/features/settings/general/General.tsx

@@ -333,6 +333,11 @@ function Appearance() {
     'glassmorphismSidebar',
   );
   const [pauseAnimations, setPauseAnimations] = useSetting(settingsAtom, 'pauseAnimations');
+  const [mentionHighlightColor, setMentionHighlightColor] = useSetting(
+    settingsAtom,
+    'mentionHighlightColor',
+  );
+  const [fontFamily, setFontFamily] = useSetting(settingsAtom, 'fontFamily');
 
   return (
     <Box direction="Column" gap="100">
@@ -494,6 +499,69 @@ function Appearance() {
           }
         />
       </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="UI Font"
+          description="Font used throughout the interface."
+          after={
+            <select
+              value={fontFamily ?? 'inter'}
+              onChange={(e) =>
+                setFontFamily(
+                  e.target.value as 'system' | 'inter' | 'jetbrains-mono' | 'fira-code',
+                )
+              }
+              style={{
+                background: 'var(--bg-surface)',
+                color: 'inherit',
+                border: '1px solid var(--border-interactive-normal)',
+                borderRadius: '6px',
+                padding: '4px 8px',
+                fontSize: '14px',
+                cursor: 'pointer',
+              }}
+            >
+              <option value="system">System Default</option>
+              <option value="inter">Inter (default)</option>
+              <option value="jetbrains-mono">JetBrains Mono</option>
+              <option value="fira-code">Fira Code</option>
+            </select>
+          }
+        />
+      </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="@Mention Highlight Color"
+          description="Color used to highlight messages that mention you. Leave empty to use the theme default."
+          after={
+            <Box alignItems="Center" gap="200">
+              <input
+                type="color"
+                value={mentionHighlightColor || '#4caf50'}
+                onChange={(e) => setMentionHighlightColor(e.target.value)}
+                style={{ width: '36px', height: '28px', cursor: 'pointer', borderRadius: '4px', border: 'none', padding: '2px' }}
+              />
+              {mentionHighlightColor && (
+                <button
+                  type="button"
+                  onClick={() => setMentionHighlightColor('')}
+                  style={{
+                    background: 'none',
+                    border: '1px solid var(--border-interactive-normal)',
+                    borderRadius: '6px',
+                    padding: '2px 8px',
+                    cursor: 'pointer',
+                    color: 'inherit',
+                    fontSize: '12px',
+                  }}
+                >
+                  Reset
+                </button>
+              )}
+            </Box>
+          }
+        />
+      </SequenceCard>
     </Box>
   );
 }