refactor(settings): split SettingsScreen into section components and pure helpers

SettingsScreen CC 23 -> below 10. Form parsing, change detection and the dark-theme check moved to utils/ with unit tests; the dark switch now reads the OS scheme instead of comparing the background colour. Adds characterization tests for the screen.

components/settings/SettingsSection.tsx

@@ -0,0 +1,45 @@
+import { useThemeColor } from '@/hooks/useThemeColor';
+import React from 'react';
+import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+
+interface SettingsSectionProps {
+    title: string;
+    children: React.ReactNode;
+}
+
+export function SettingsSection({ title, children }: SettingsSectionProps) {
+    const { width } = useWindowDimensions();
+    const colors = useThemeColor();
+    const isLargeScreen = width > 768;
+
+    return (
+        <View style={[styles.section, isLargeScreen && styles.desktopSection]}>
+            <Text style={[styles.sectionLabel, { color: colors.textMuted }]}>{title}</Text>
+            <View style={[styles.card, { backgroundColor: colors.cardBackground, borderColor: colors.border }]}>
+                {children}
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    section: {
+        marginBottom: 24,
+    },
+    desktopSection: {
+        width: '100%',
+        maxWidth: 600,
+    },
+    sectionLabel: {
+        fontSize: 13,
+        fontWeight: '600',
+        marginLeft: 16,
+        marginBottom: 8,
+        letterSpacing: 0.5,
+    },
+    card: {
+        borderRadius: 16,
+        padding: 16,
+        borderWidth: 1,
+    },
+});