Show a SIM icon beside the mobile number on the login screen

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/modules/auth/screens/LoginScreen.tsx

@@ -44,6 +44,7 @@ import { BiometricNode } from '../components/BiometricNode';
 import { CodeInput } from '../components/CodeInput';
 import { PreLoginActions } from '../components/PreLoginActions';
 import { LoginFooter } from '../components/LoginFooter';
+import { SimIcon } from '../components/SimIcon';
 import { useBiometricPrompt } from '../hooks/useBiometricPrompt';
 import type { AuthStackParamList } from '../../../navigation/types';
 import type { LoginRole } from '../../../types/app';
@@ -301,6 +302,15 @@ export default function LoginScreen({ navigation }: Props) {
     ? `+91 ••••• •${lastProfile.mobileNumber.slice(-4)}`
     : undefined;
 
+  const maskedMobileRow = maskedMobile ? (
+    <View style={styles.mobileRow}>
+      <SimIcon size={14} color={theme.colors.onBrandMuted} />
+      <Text style={[theme.text.code, { color: theme.colors.onBrandMuted }]}>
+        {maskedMobile}
+      </Text>
+    </View>
+  ) : null;
+
   const gradient = (
     <>
       <LinearGradient
@@ -368,11 +378,7 @@ export default function LoginScreen({ navigation }: Props) {
                   >
                     {lastProfile.fullName}
                   </Text>
-                  {maskedMobile ? (
-                    <Text style={[theme.text.code, { color: theme.colors.onBrandMuted }]}>
-                      {maskedMobile}
-                    </Text>
-                  ) : null}
+                  {maskedMobileRow}
                 </>
               ) : (
                 <>
@@ -392,11 +398,7 @@ export default function LoginScreen({ navigation }: Props) {
                     no name, because it does not return one — so without this
                     the screen asks for an MPIN and names nothing at all.
                   */}
-                  {maskedMobile ? (
-                    <Text style={[theme.text.code, { color: theme.colors.onBrandMuted }]}>
-                      {maskedMobile}
-                    </Text>
-                  ) : null}
+                  {maskedMobileRow}
                 </>
               )}
             </View>
@@ -418,6 +420,7 @@ export default function LoginScreen({ navigation }: Props) {
                 {!isReturningCustomer ? (
                   <Input
                     label="Registered mobile number"
+                    leftAccessory={<SimIcon size={18} color={theme.colors.textSecondary} />}
                     prefix="+91"
                     keyboardType="number-pad"
                     maxLength={10}
@@ -588,6 +591,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 4,
   },
+  mobileRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
   heroBlock: {
     alignItems: 'center',
     paddingVertical: 4,