Add CatIcon component and update app icon

- Introduced a new CatIcon component in TypeScript using React Native and SVG.
- The CatIcon supports customizable size, color, and optional background.
- Updated the app's icon image located at mobile/assets/icon.png.

mobile/agent.md

@@ -392,6 +392,7 @@ Base: `EXPO_PUBLIC_API_URL` (padrão: `http://localhost:3000/api/v1`)
 - **Arquivo**: `app/(app)/inventory/[id]/edit.tsx`
 - **Mudança**: `onSubmit()` agora chama `updateFilamentUseCase.execute()` em vez de apenas atualizar o store local
 - **Código**:
+
   ```typescript
   const onSubmit = async () => {
     try {
@@ -415,6 +416,7 @@ Base: `EXPO_PUBLIC_API_URL` (padrão: `http://localhost:3000/api/v1`)
     }
   };
   ```
+
 - **Impacto**: Edições de filamento agora persistem no servidor
 
 #### 4. **Custom Color Picker — Hex Input com Validação**
@@ -473,6 +475,41 @@ Base: `EXPO_PUBLIC_API_URL` (padrão: `http://localhost:3000/api/v1`)
   - Refresh: `listFilamentsUseCase` → `setFilaments(result)`
   - Create: `createFilamentUseCase` → `addFilament(result)`
 
+#### 6. **CatIcon com Fundo Turquesa — Design Integration**
+
+- **Arquivos**: `src/presentation/components/icons/CatIcon.tsx`, `app/(auth)/login.tsx`
+- **Mudança**: Implementação de suporte a fundo turquesa no ícone CatIcon conforme design Paper
+- **Novas Props**:
+  ```typescript
+  interface CatIconProps {
+    size?: number; // tamanho do SVG (padrão: 48px)
+    color?: string; // cor do ícone (padrão: #14120F)
+    withBackground?: boolean; // ativar fundo (padrão: false)
+    backgroundColor?: string; // cor do fundo (padrão: #38BCC2 — accent turquesa)
+  }
+  ```
+- **Implementação**: Quando `withBackground={true}`, o componente envolve o SVG em um `View` com:
+  - Tamanho: 80×80px
+  - Background color: `#38BCC2` (accent turquesa)
+  - Border radius: 24px
+  - Flexbox centered
+
+- **Uso na tela de Login** (G3-0):
+
+  ```typescript
+  // Antes:
+  <View style={styles.logoContainer}>
+    <CatIcon size={48} color={colors.accent} />
+  </View>
+
+  // Depois:
+  <CatIcon size={48} color="#1E1B18" withBackground backgroundColor={colors.accent} />
+  ```
+
+- **Remoção**: Deletado `logoContainer` style antigo do `StyleSheet`
+- **Resultado**: Ícone agora exibe com fundo turquesa arredondado, alinhado com design do Paper
+- **Impacto**: Visual correto da tela de login (G3-0) sincronizado com mockups
+
 ### Arquitetura Mantida
 
 - Todos use cases injetados via `container.ts` (Dependency Injection)

mobile/app/(auth)/login.tsx

@@ -11,6 +11,7 @@ import { Button } from '@presentation/components/ui/Button';
 import { colors, typography, spacing } from '@shared/theme';
 import { loginUseCase } from '@infrastructure/container';
 import { useAuthStore } from '@store/authStore';
+import { CatIcon } from '@presentation/components/icons/CatIcon';
 
 const schema = z.object({
   email: z.string().email('E-mail inválido'),
@@ -64,9 +65,7 @@ export default function LoginScreen(): React.ReactElement {
     <Screen scrollable keyboardAvoiding>
       {/* Logo */}
       <View style={styles.hero}>
-        <View style={styles.logoContainer}>
+        <CatIcon size={48} color="#1E1B18" withBackground backgroundColor={colors.accent} />
-          <Ionicons name="paw" size={48} color={colors.accent} />
-        </View>
         <Text style={styles.appName}>MeowSpool</Text>
         <Text style={styles.tagline}>Gerencie seus filamentos com precisão.</Text>
       </View>
@@ -78,7 +77,7 @@ export default function LoginScreen(): React.ReactElement {
           name="email"
           render={({ field }) => (
             <Input
-              label="E-MAIL"
+              label="E-mail"
               placeholder="seu@email.com"
               keyboardType="email-address"
               autoComplete="email"
@@ -95,7 +94,7 @@ export default function LoginScreen(): React.ReactElement {
           name="password"
           render={({ field }) => (
             <Input
-              label="SENHA"
+              label="Senha"
               placeholder="••••••••"
               isPassword
               leftIcon={<Ionicons name="lock-closed-outline" size={18} color={colors.textSecondary} />}
@@ -149,15 +148,6 @@ const styles = StyleSheet.create({
     paddingBottom: spacing[10],
     gap: spacing[2],
   },
-  logoContainer: {
-    width: 80,
-    height: 80,
-    borderRadius: 20,
-    backgroundColor: colors.bgSurface,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: spacing[2],
-  },
   appName: {
     fontFamily: typography.fontFamily.ui,
     fontSize: typography.fontSize['2xl'],