need to port to IOS and fix many bugs

.claude/settings.local.json

@@ -38,7 +38,15 @@
       "mcp__claude_ai_Hugging_Face__hub_repo_search",
       "Bash(curl -s -o NUL -w \"practice %{http_code}\\\\n\" http://localhost:3000/practice)",
       "Bash(curl -s -o NUL -w \"phrases %{http_code}\\\\n\" http://localhost:3000/phrases)",
-      "Bash(curl -s -o NUL -w \"camera %{http_code}\\\\n\" http://localhost:3000/camera)"
+      "Bash(curl -s -o NUL -w \"camera %{http_code}\\\\n\" http://localhost:3000/camera)",
+      "Bash(npx --no -- tsc --noEmit --jsx preserve --esModuleInterop --skipLibCheck app/onboarding/OnboardingForm.tsx)",
+      "Bash(Get-ChildItem -Path \"E:\\\\language-learner\\\\mobile\\\\lib\" -Recurse -File)",
+      "Bash(Sort-Object FullName)",
+      "Bash(Get-ChildItem -Path \"E:\\\\language-learner\\\\app\" -Recurse -Directory)",
+      "Bash(Select-Object -First 30 FullName)",
+      "Bash(grep -E \"\\\\.\\(tsx?|json|mjs\\)$\")",
+      "Bash(xargs wc -l)",
+      "Bash(flutter analyze *)"
     ]
   },
   "outputStyle": "default"

app/api/me/route.ts

@@ -7,6 +7,7 @@ export async function GET() {
 
   return NextResponse.json({
     user: {
+      id: session.hfId,
       hfId: session.hfId,
       hfUsername: session.hfUsername,
       email: session.email,
@@ -23,4 +24,3 @@ export async function GET() {
     streakCount: session.streakCount ?? 0,
   });
 }
-

mobile/android/app/src/main/AndroidManifest.xml

@@ -1,13 +1,13 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <uses-permission android:name="android.permission.INTERNET"/>
     <application
-        android:label="langlearn"
+        android:label="PraxaLing"
         android:name="${applicationName}"
         android:icon="@mipmap/ic_launcher">
         <activity
             android:name=".MainActivity"
             android:exported="true"
             android:launchMode="singleTop"
-            android:taskAffinity=""
             android:theme="@style/LaunchTheme"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
             android:hardwareAccelerated="true"
@@ -54,5 +54,15 @@
             <action android:name="android.intent.action.PROCESS_TEXT"/>
             <data android:mimeType="text/plain"/>
         </intent>
+        <!-- Required for flutter_web_auth_2 on Android 11+ so the plugin can
+             enumerate browsers / Custom Tabs providers when launching HF OAuth. -->
+        <intent>
+            <action android:name="android.intent.action.VIEW" />
+            <category android:name="android.intent.category.BROWSABLE" />
+            <data android:scheme="https" />
+        </intent>
+        <intent>
+            <action android:name="android.support.customtabs.action.CustomTabsService" />
+        </intent>
     </queries>
 </manifest>

mobile/ios/Runner/Info.plist

@@ -24,7 +24,7 @@
 	<key>CFBundleDevelopmentRegion</key>
 	<string>$(DEVELOPMENT_LANGUAGE)</string>
 	<key>CFBundleDisplayName</key>
-	<string>Langlearn</string>
+	<string>PraxaLing</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
@@ -32,7 +32,7 @@
 	<key>CFBundleInfoDictionaryVersion</key>
 	<string>6.0</string>
 	<key>CFBundleName</key>
-	<string>langlearn</string>
+	<string>PraxaLing</string>
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>

mobile/lib/auth/auth_provider.dart

@@ -34,7 +34,7 @@ class User {
   final String? avatarUrl;
 
   factory User.fromJson(Map<String, dynamic> j) => User(
-        id: j['id'] as String,
+        id: (j['id'] ?? j['hfId']) as String,
         hfUsername: j['hfUsername'] as String,
         email: j['email'] as String?,
         avatarUrl: j['avatarUrl'] as String?,
@@ -147,17 +147,24 @@ class AuthController extends StateNotifier<AuthState> {
 
   Future<void> signInWithHuggingFace() async {
     final loginUrl = '${Env.apiBaseUrl}/api/auth/login?client=mobile';
+    debugPrint('[auth] launching OAuth via $loginUrl (callback scheme=${Env.oauthCallbackScheme})');
     try {
       final result = await FlutterWebAuth2.authenticate(
         url: loginUrl,
         callbackUrlScheme: Env.oauthCallbackScheme,
       );
+      debugPrint('[auth] received callback: $result');
       final token = Uri.parse(result).queryParameters['token'];
-      if (token == null) throw Exception('no token in callback');
+      if (token == null || token.isEmpty) {
+        throw Exception('OAuth callback missing token: $result');
+      }
       await _store.write(token);
       await refresh();
     } on DioException catch (e) {
-      debugPrint('auth dio error: $e');
+      debugPrint('[auth] dio error during refresh: $e');
+      rethrow;
+    } catch (e, st) {
+      debugPrint('[auth] sign-in failed: $e\n$st');
       rethrow;
     }
   }
@@ -236,4 +243,3 @@ final authControllerProvider = StateNotifierProvider<AuthController, AuthState>(
   return AuthController(api, store);
 });
 
-

mobile/lib/features/camera/camera_screen.dart

@@ -12,7 +12,7 @@ import '../../widgets/furi_text.dart';
 import '../../widgets/level_picker.dart';
 import '../../widgets/tts_button.dart';
 
-// ── Data types ─────────────────────────────────────────────────────────────────
+// ── Data types ──────────────────────────────────────────────────────────────
 
 class VisionResult {
   VisionResult({
@@ -57,7 +57,7 @@ class VisionSentence {
   final String? romanized;
 }
 
-// ── Screen ─────────────────────────────────────────────────────────────────────
+// ── Screen ──────────────────────────────────────────────────────────────────
 
 class CameraScreen extends ConsumerStatefulWidget {
   const CameraScreen({super.key});
@@ -65,40 +65,16 @@ class CameraScreen extends ConsumerStatefulWidget {
   ConsumerState<CameraScreen> createState() => _CameraScreenState();
 }
 
-class _CameraScreenState extends ConsumerState<CameraScreen>
-    with TickerProviderStateMixin {
+class _CameraScreenState extends ConsumerState<CameraScreen> {
   File? _image;
   VisionResult? _result;
   bool _loading = false;
   String? _error;
   String? _level;
 
-  // Pulsing animation for the center-point dots
-  late final AnimationController _pulseCtrl;
-  late final Animation<double> _pulseAnim;
-
-  @override
-  void initState() {
-    super.initState();
-    _pulseCtrl = AnimationController(
-      vsync: this,
-      duration: const Duration(milliseconds: 1600),
-    )..repeat(reverse: true);
-    _pulseAnim = Tween<double>(begin: 0.6, end: 1.0).animate(
-      CurvedAnimation(parent: _pulseCtrl, curve: Curves.easeInOut),
-    );
-  }
-
-  @override
-  void dispose() {
-    _pulseCtrl.dispose();
-    super.dispose();
-  }
-
   Future<void> _pick(ImageSource source) async {
     final picker = ImagePicker();
-    final x = await picker.pickImage(
-        source: source, maxWidth: 1600, imageQuality: 88);
+    final x = await picker.pickImage(source: source, maxWidth: 1600, imageQuality: 88);
     if (x == null) return;
     setState(() {
       _image = File(x.path);
@@ -118,16 +94,13 @@ class _CameraScreenState extends ConsumerState<CameraScreen>
         'image': await MultipartFile.fromFile(file.path),
         if (level != null) 'level': level,
       });
-      final res = await api.dio
-          .post<Map<String, dynamic>>('/api/vision/analyze', data: form);
+      final res = await api.dio.post<Map<String, dynamic>>('/api/vision/analyze', data: form);
 
       if (res.statusCode == 200 && res.data != null) {
         final data = res.data!;
         final objs = ((data['objects'] as List?) ?? []).map((e) {
           final o = e as Map<String, dynamic>;
-          final rawBox = (o['box'] as List)
-              .map((x) => (x as num).toDouble())
-              .toList();
+          final rawBox = (o['box'] as List).map((x) => (x as num).toDouble()).toList();
           return VisionObject(
             labelNative: (o['label'] ?? '') as String,
             labelTarget: (o['translation'] ?? '') as String,
@@ -174,167 +147,205 @@ class _CameraScreenState extends ConsumerState<CameraScreen>
     final profile = ref.watch(authControllerProvider).profile;
 
     return Scaffold(
-      backgroundColor: kBackground,
-      appBar: AppBar(
-        title: const Text('Image Practice'),
-        actions: [
-          if (profile != null)
-            Padding(
-              padding: const EdgeInsets.only(right: 16),
-              child: Center(
-                child: Container(
-                  padding:
-                      const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
-                  decoration: BoxDecoration(
-                    color: kPrimary.withAlpha(31),
-                    borderRadius: BorderRadius.circular(8),
-                    border: Border.all(color: kPrimary.withAlpha(102)),
+      body: SafeArea(
+        child: ListView(
+          padding: const EdgeInsets.fromLTRB(16, 18, 16, 28),
+          children: [
+            _Banner(profile: profile),
+            const SizedBox(height: 18),
+            Row(children: [
+              Expanded(
+                child: FilledButton.icon(
+                  onPressed: _loading ? null : () => _pick(ImageSource.camera),
+                  icon: const Icon(Icons.camera_alt, size: 18),
+                  label: const Text('CAMERA'),
+                ),
+              ),
+              const SizedBox(width: 10),
+              Expanded(
+                child: OutlinedButton.icon(
+                  onPressed: _loading ? null : () => _pick(ImageSource.gallery),
+                  icon: const Icon(Icons.photo_library_outlined, size: 18),
+                  label: const Text('GALLERY'),
+                ),
+              ),
+            ]),
+            const SizedBox(height: 12),
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
+              decoration: brutalCard(),
+              child: Row(
+                children: [
+                  Expanded(
+                    child: Text(
+                      'SENTENCES MATCH LEVEL',
+                      style: GoogleFonts.almarai(
+                        color: kBrutalSlate,
+                        fontSize: 11,
+                        fontWeight: FontWeight.w900,
+                        letterSpacing: 1.0,
+                      ),
+                    ),
                   ),
-                  child: Text(
-                    '${profile.targetLang.toUpperCase()} · ${profile.level}',
-                    style: GoogleFonts.almarai(
-                        color: kPrimary,
-                        fontSize: 12,
-                        fontWeight: FontWeight.w600),
+                  LevelPicker(
+                    value: _level ?? profile?.level ?? 'A1',
+                    onChanged: (l) => setState(() => _level = l),
                   ),
-                ),
+                ],
               ),
             ),
+            if (_error != null) ...[
+              const SizedBox(height: 12),
+              _ErrorBanner(message: _error!),
+            ],
+            const SizedBox(height: 16),
+            if (_image != null)
+              _loading && _result == null
+                  ? _LoadingOverlay()
+                  : _result != null
+                      ? _AnnotatedImage(image: _image!, result: _result!)
+                      : ClipRRect(
+                          borderRadius: BorderRadius.circular(kBrutalRadius),
+                          child: Image.file(_image!, fit: BoxFit.cover)),
+            if (_result != null && _result!.caption.isNotEmpty) ...[
+              const SizedBox(height: 12),
+              Container(
+                padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
+                decoration: brutalCard(color: kBrutalCream),
+                child: Row(children: [
+                  const Icon(Icons.auto_awesome, size: 14, color: kBrutalBlack),
+                  const SizedBox(width: 8),
+                  Expanded(
+                    child: Text(
+                      _result!.caption,
+                      style: GoogleFonts.almarai(
+                        color: kBrutalSlate,
+                        fontSize: 13,
+                        fontWeight: FontWeight.w800,
+                        fontStyle: FontStyle.italic,
+                      ),
+                    ),
+                  ),
+                ]),
+              ),
+            ],
+            if (_result != null) ...[
+              const SizedBox(height: 20),
+              _ResultsSection(result: _result!, lang: profile?.targetLang ?? 'en'),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _Banner extends StatelessWidget {
+  const _Banner({required this.profile});
+  final Profile? profile;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: kBrutalBlue,
+        borderRadius: BorderRadius.circular(kBrutalRadius),
+        border: Border.all(color: kBrutalBlack, width: 3),
+        boxShadow: const [
+          BoxShadow(color: kBrutalBlack, offset: Offset(5, 5), blurRadius: 0),
         ],
       ),
-      body: ListView(
-        padding: const EdgeInsets.all(16),
+      padding: const EdgeInsets.all(20),
+      child: Row(
         children: [
-          // ── Upload buttons ─────────────────────────────────────────────────
-          Row(children: [
-            Expanded(
-              child: FilledButton.icon(
-                onPressed: _loading ? null : () => _pick(ImageSource.camera),
-                icon: const Icon(Icons.camera_alt, size: 18),
-                label: const Text('Camera'),
-              ),
-            ),
-            const SizedBox(width: 10),
-            Expanded(
-              child: OutlinedButton.icon(
-                onPressed: _loading ? null : () => _pick(ImageSource.gallery),
-                icon: const Icon(Icons.photo_library_outlined, size: 18),
-                label: const Text('Gallery'),
-              ),
-            ),
-          ]),
-
-          const SizedBox(height: 12),
           Container(
-            padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
+            width: 56,
+            height: 56,
             decoration: BoxDecoration(
-              color: kCard,
-              borderRadius: BorderRadius.circular(14),
-              border: Border.all(color: kBorder, width: 2),
+              color: kBrutalWhite,
+              borderRadius: BorderRadius.circular(kBrutalRadius),
+              border: Border.all(color: kBrutalBlack, width: 2),
+              boxShadow: const [
+                BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0),
+              ],
             ),
-            child: Row(
+            child: const Icon(Icons.camera_alt, color: kBrutalBlack),
+          ),
+          const SizedBox(width: 14),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                Expanded(
-                  child: Text(
-                    'Sentences match level',
-                    style: GoogleFonts.almarai(color: kForeground, fontSize: 12, fontWeight: FontWeight.w900),
+                Text(
+                  'IMAGE PRACTICE',
+                  style: GoogleFonts.almarai(
+                    color: kBrutalWhite,
+                    fontSize: 11,
+                    fontWeight: FontWeight.w900,
+                    letterSpacing: 1.4,
                   ),
                 ),
-                LevelPicker(
-                  value: _level ?? profile?.level ?? 'A1',
-                  onChanged: (l) => setState(() => _level = l),
+                Text(
+                  'SNAP & LEARN',
+                  style: GoogleFonts.almarai(
+                    color: kBrutalWhite,
+                    fontSize: 22,
+                    fontWeight: FontWeight.w900,
+                    height: 1.05,
+                  ),
                 ),
+                if (profile != null)
+                  Padding(
+                    padding: const EdgeInsets.only(top: 4),
+                    child: Text(
+                      '${profile!.targetLang.toUpperCase()} · ${profile!.level}',
+                      style: GoogleFonts.almarai(
+                        color: kBrutalWhite,
+                        fontSize: 12,
+                        fontWeight: FontWeight.w800,
+                      ),
+                    ),
+                  ),
               ],
             ),
           ),
-
-          if (_error != null) ...[
-            const SizedBox(height: 12),
-            _ErrorBanner(message: _error!),
-          ],
-
-          const SizedBox(height: 16),
-
-          // ── Image with overlays ────────────────────────────────────────────
-          if (_image != null)
-            _loading && _result == null
-                ? _LoadingOverlay()
-                : _result != null
-                    ? _AnnotatedImage(
-                        image: _image!,
-                        result: _result!,
-                        pulseAnim: _pulseAnim,
-                      )
-                    : ClipRRect(
-                        borderRadius: BorderRadius.circular(16),
-                        child: Image.file(_image!, fit: BoxFit.cover)),
-
-          // ── Caption (in native language) ───────────────────────────────────
-          if (_result != null && _result!.caption.isNotEmpty) ...[
-            const SizedBox(height: 12),
-            Container(
-              padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
-              decoration: BoxDecoration(
-                color: kCard,
-                borderRadius: BorderRadius.circular(12),
-                border: Border.all(color: kBorder),
-              ),
-              child: Row(children: [
-                const Icon(Icons.auto_awesome, size: 14, color: kPrimary),
-                const SizedBox(width: 8),
-                Expanded(
-                  child: Text(
-                    _result!.caption,
-                    style: GoogleFonts.almarai(
-                        color: kMuted,
-                        fontSize: 13,
-                        fontStyle: FontStyle.italic),
-                  ),
-                ),
-              ]),
-            ),
-          ],
-
-          if (_result != null) ...[
-            const SizedBox(height: 20),
-            _ResultsSection(result: _result!, lang: profile?.targetLang ?? 'en'),
-          ],
         ],
       ),
     );
   }
 }
 
-// ── Loading overlay ────────────────────────────────────────────────────────────
-
 class _LoadingOverlay extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
       height: 240,
-      decoration: BoxDecoration(
-        color: kCard,
-        borderRadius: BorderRadius.circular(16),
-        border: Border.all(color: kBorder),
-      ),
+      decoration: brutalCard(),
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          const CircularProgressIndicator(color: kPrimary, strokeWidth: 2),
+          const CircularProgressIndicator(color: kBrutalTeal, strokeWidth: 3),
           const SizedBox(height: 16),
-          Text('Gemma is analysing…',
-              style: GoogleFonts.almarai(color: kMuted, fontSize: 13)),
+          Text(
+            'GEMMA IS ANALYSING…',
+            style: GoogleFonts.almarai(
+              color: kBrutalSlate,
+              fontSize: 13,
+              fontWeight: FontWeight.w900,
+              letterSpacing: 1.0,
+            ),
+          ),
           const SizedBox(height: 4),
-          Text('This may take a moment',
-              style: GoogleFonts.almarai(color: kMuted.withAlpha(128), fontSize: 11)),
+          Text(
+            'This may take a moment',
+            style: GoogleFonts.almarai(color: kBrutalMuted, fontSize: 11, fontWeight: FontWeight.w800),
+          ),
         ],
       ),
     );
   }
 }
 
-// ── Error banner ───────────────────────────────────────────────────────────────
-
 class _ErrorBanner extends StatelessWidget {
   const _ErrorBanner({required this.message});
   final String message;
@@ -344,33 +355,31 @@ class _ErrorBanner extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.all(12),
       decoration: BoxDecoration(
-        color: Colors.red.withAlpha(20),
-        borderRadius: BorderRadius.circular(10),
-        border: Border.all(color: Colors.red.withAlpha(77)),
+        color: kBrutalRed,
+        borderRadius: BorderRadius.circular(kBrutalRadius),
+        border: Border.all(color: kBrutalBlack, width: 2),
+        boxShadow: const [
+          BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0),
+        ],
       ),
       child: Row(children: [
-        const Icon(Icons.error_outline, color: Colors.redAccent, size: 16),
+        const Icon(Icons.error_outline, color: kBrutalWhite, size: 18),
         const SizedBox(width: 8),
         Expanded(
-          child: Text(message,
-              style: const TextStyle(color: Colors.redAccent, fontSize: 12)),
+          child: Text(
+            message,
+            style: GoogleFonts.almarai(color: kBrutalWhite, fontSize: 13, fontWeight: FontWeight.w900),
+          ),
         ),
       ]),
     );
   }
 }
 
-// ── Annotated image with pulsing center-point dots ─────────────────────────────
-
 class _AnnotatedImage extends StatelessWidget {
-  const _AnnotatedImage({
-    required this.image,
-    required this.result,
-    required this.pulseAnim,
-  });
+  const _AnnotatedImage({required this.image, required this.result});
   final File image;
   final VisionResult result;
-  final Animation<double> pulseAnim;
 
   @override
   Widget build(BuildContext context) {
@@ -379,39 +388,47 @@ class _AnnotatedImage extends StatelessWidget {
       final dw = constraints.maxWidth;
       final dh = dw / aspect;
 
-      return ClipRRect(
-        borderRadius: BorderRadius.circular(16),
-        child: SizedBox(
-          width: dw,
-          height: dh,
-          child: Stack(children: [
-            Positioned.fill(child: Image.file(image, fit: BoxFit.cover)),
-            ...result.objects.map((o) {
-              final isNorm = o.box.every((v) => v <= 1.0);
-              final x1 = isNorm ? o.box[0] * dw : (o.box[0] / result.imgW) * dw;
-              final y1 = isNorm ? o.box[1] * dh : (o.box[1] / result.imgH) * dh;
-              final x2 = isNorm ? o.box[2] * dw : (o.box[2] / result.imgW) * dw;
-              final y2 = isNorm ? o.box[3] * dh : (o.box[3] / result.imgH) * dh;
-              final cx = (x1 + x2) / 2;
-              final cy = (y1 + y2) / 2;
-
-              return Positioned(
-                left: cx - 60, // center the label
-                top: cy - 10,
-                child: _PulsingLabel(object: o, pulseAnim: pulseAnim),
-              );
-            }),
-          ]),
+      return Container(
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(kBrutalRadius),
+          border: Border.all(color: kBrutalBlack, width: 3),
+          boxShadow: const [
+            BoxShadow(color: kBrutalBlack, offset: Offset(5, 5), blurRadius: 0),
+          ],
+        ),
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(kBrutalRadius - 1),
+          child: SizedBox(
+            width: dw,
+            height: dh,
+            child: Stack(children: [
+              Positioned.fill(child: Image.file(image, fit: BoxFit.cover)),
+              ...result.objects.map((o) {
+                final isNorm = o.box.every((v) => v <= 1.0);
+                final x1 = isNorm ? o.box[0] * dw : (o.box[0] / result.imgW) * dw;
+                final y1 = isNorm ? o.box[1] * dh : (o.box[1] / result.imgH) * dh;
+                final x2 = isNorm ? o.box[2] * dw : (o.box[2] / result.imgW) * dw;
+                final y2 = isNorm ? o.box[3] * dh : (o.box[3] / result.imgH) * dh;
+                final cx = (x1 + x2) / 2;
+                final cy = (y1 + y2) / 2;
+
+                return Positioned(
+                  left: cx - 60,
+                  top: cy - 12,
+                  child: _BrutalLabel(object: o),
+                );
+              }),
+            ]),
+          ),
         ),
       );
     });
   }
 }
 
-class _PulsingLabel extends StatelessWidget {
-  const _PulsingLabel({required this.object, required this.pulseAnim});
+class _BrutalLabel extends StatelessWidget {
+  const _BrutalLabel({required this.object});
   final VisionObject object;
-  final Animation<double> pulseAnim;
 
   @override
   Widget build(BuildContext context) {
@@ -419,59 +436,45 @@ class _PulsingLabel extends StatelessWidget {
       crossAxisAlignment: CrossAxisAlignment.center,
       mainAxisSize: MainAxisSize.min,
       children: [
-        // Pulsing dot
-        AnimatedBuilder(
-          animation: pulseAnim,
-          builder: (_, __) => Container(
-            width: 10,
-            height: 10,
-            decoration: BoxDecoration(
-              shape: BoxShape.circle,
-              color: kPrimary.withAlpha((pulseAnim.value * 255).round()),
-              boxShadow: [
-                BoxShadow(
-                  color: kPrimary.withAlpha((pulseAnim.value * 153).round()),
-                  blurRadius: 8 * pulseAnim.value,
-                  spreadRadius: 2 * pulseAnim.value,
-                ),
-              ],
-            ),
+        Container(
+          width: 12,
+          height: 12,
+          decoration: BoxDecoration(
+            color: kBrutalYellow,
+            border: Border.all(color: kBrutalBlack, width: 2),
+            shape: BoxShape.circle,
           ),
         ),
         const SizedBox(width: 6),
-        // Glassmorphic label chip
-        ClipRRect(
-          borderRadius: BorderRadius.circular(8),
-          child: Container(
-            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-            decoration: BoxDecoration(
-              color: Colors.black.withAlpha(140),
-              borderRadius: BorderRadius.circular(8),
-              border: Border.all(
-                  color: kPrimary.withAlpha(128), width: 0.8),
-            ),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              mainAxisSize: MainAxisSize.min,
-              children: [
+        Container(
+          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+          decoration: BoxDecoration(
+            color: kBrutalBlack,
+            borderRadius: BorderRadius.circular(kBrutalRadius),
+            border: Border.all(color: kBrutalYellow, width: 2),
+          ),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text(
+                object.labelTarget,
+                style: GoogleFonts.almarai(
+                  color: kBrutalWhite,
+                  fontSize: 11,
+                  fontWeight: FontWeight.w900,
+                ),
+              ),
+              if (object.romanized != null && object.romanized!.isNotEmpty)
                 Text(
-                  object.labelTarget,
+                  object.romanized!,
                   style: GoogleFonts.almarai(
-                    color: Colors.white,
-                    fontSize: 11,
-                    fontWeight: FontWeight.w600,
+                    color: kBrutalYellow,
+                    fontSize: 9,
+                    fontWeight: FontWeight.w800,
                   ),
                 ),
-                if (object.romanized != null && object.romanized!.isNotEmpty)
-                  Text(
-                    object.romanized!,
-                    style: GoogleFonts.almarai(
-                      color: kPrimary.withAlpha(217),
-                      fontSize: 9,
-                    ),
-                  ),
-              ],
-            ),
+            ],
           ),
         ),
       ],
@@ -479,8 +482,6 @@ class _PulsingLabel extends StatelessWidget {
   }
 }
 
-// ── Results section ───────────────────────────────────────────────────────────
-
 class _ResultsSection extends StatelessWidget {
   const _ResultsSection({required this.result, required this.lang});
   final VisionResult result;
@@ -488,121 +489,123 @@ class _ResultsSection extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
-      // ── Objects ────────────────────────────────────────────────────────────
-      Text('OBJECTS DETECTED',
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Text(
+          'OBJECTS DETECTED',
           style: GoogleFonts.almarai(
-              color: kMuted, fontSize: 11, letterSpacing: 0)),
-      const SizedBox(height: 10),
-      if (result.objects.isEmpty)
-        Text('No objects detected.',
-            style: GoogleFonts.almarai(color: kMuted))
-      else
-        ...result.objects.map(
-          (o) => Padding(
-            padding: const EdgeInsets.only(bottom: 8),
-            child: Container(
-              padding:
-                  const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
-              decoration: BoxDecoration(
-                color: kCard,
-                borderRadius: BorderRadius.circular(12),
-                border: Border.all(color: kBorder),
-              ),
-              child: Row(children: [
-                Expanded(
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      FuriText(
-                        text: o.labelTarget,
-                        segments: o.labelTargetSegments,
-                        fontSize: 18,
-                        fontWeight: FontWeight.w900,
-                      ),
-                      if (o.romanized != null && o.romanized!.isNotEmpty)
-                        Padding(
-                          padding: const EdgeInsets.only(top: 4),
-                          child: Text(o.romanized!,
-                              style: GoogleFonts.almarai(
-                                  color: kPrimary.withAlpha(204),
-                                  fontSize: 12)),
+            color: kBrutalSlate,
+            fontSize: 12,
+            fontWeight: FontWeight.w900,
+            letterSpacing: 1.2,
+          ),
+        ),
+        const SizedBox(height: 10),
+        if (result.objects.isEmpty)
+          Text('No objects detected.', style: GoogleFonts.almarai(color: kBrutalMuted, fontWeight: FontWeight.w800))
+        else
+          ...result.objects.map(
+            (o) => Padding(
+              padding: const EdgeInsets.only(bottom: 10),
+              child: Container(
+                padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
+                decoration: brutalCard(),
+                child: Row(children: [
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        FuriText(
+                          text: o.labelTarget,
+                          segments: o.labelTargetSegments,
+                          fontSize: 18,
+                          fontWeight: FontWeight.w900,
                         ),
-                      const SizedBox(height: 4),
-                      Text(o.labelNative,
-                          style: GoogleFonts.almarai(
-                              color: kMuted, fontSize: 12, fontWeight: FontWeight.w800)),
-                    ],
+                        if (o.romanized != null && o.romanized!.isNotEmpty)
+                          Padding(
+                            padding: const EdgeInsets.only(top: 4),
+                            child: Text(
+                              o.romanized!,
+                              style: GoogleFonts.almarai(color: kBrutalTeal, fontSize: 12, fontWeight: FontWeight.w800),
+                            ),
+                          ),
+                        const SizedBox(height: 4),
+                        Text(
+                          o.labelNative,
+                          style: GoogleFonts.almarai(color: kBrutalMuted, fontSize: 12, fontWeight: FontWeight.w800),
+                        ),
+                      ],
+                    ),
                   ),
-                ),
-                const SizedBox(width: 10),
-                TtsButton(text: o.labelTarget, lang: lang, size: 34),
-              ]),
+                  const SizedBox(width: 10),
+                  TtsButton(text: o.labelTarget, lang: lang, size: 34),
+                ]),
+              ),
             ),
           ),
-        ),
-
-      const SizedBox(height: 20),
-
-      // ── Sentences ─────────────────────────────────────────────────────────
-      Text('PRACTICE SENTENCES',
+        const SizedBox(height: 20),
+        Text(
+          'PRACTICE SENTENCES',
           style: GoogleFonts.almarai(
-              color: kMuted, fontSize: 11, letterSpacing: 0)),
-      const SizedBox(height: 10),
-      if (result.sentences.isEmpty)
-        Text('No sentences generated.',
-            style: GoogleFonts.almarai(color: kMuted))
-      else
-        ...result.sentences.map(
-          (s) => Padding(
-            padding: const EdgeInsets.only(bottom: 8),
-            child: Container(
-              padding: const EdgeInsets.all(14),
-              decoration: BoxDecoration(
-                color: kCard,
-                borderRadius: BorderRadius.circular(12),
-                border: Border.all(color: kBorder),
-              ),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Row(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Expanded(
-                        child: FuriText(
-                          text: s.target,
-                          segments: s.targetSegments,
-                          fontSize: 17,
-                          fontWeight: FontWeight.w900,
+            color: kBrutalSlate,
+            fontSize: 12,
+            fontWeight: FontWeight.w900,
+            letterSpacing: 1.2,
+          ),
+        ),
+        const SizedBox(height: 10),
+        if (result.sentences.isEmpty)
+          Text('No sentences generated.', style: GoogleFonts.almarai(color: kBrutalMuted, fontWeight: FontWeight.w800))
+        else
+          ...result.sentences.map(
+            (s) => Padding(
+              padding: const EdgeInsets.only(bottom: 10),
+              child: Container(
+                padding: const EdgeInsets.all(14),
+                decoration: brutalCard(),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Expanded(
+                          child: FuriText(
+                            text: s.target,
+                            segments: s.targetSegments,
+                            fontSize: 17,
+                            fontWeight: FontWeight.w900,
+                          ),
+                        ),
+                        const SizedBox(width: 8),
+                        TtsButton(text: s.target, lang: lang, size: 32),
+                      ],
+                    ),
+                    if (s.romanized != null && s.romanized!.isNotEmpty) ...[
+                      const SizedBox(height: 4),
+                      Text(
+                        s.romanized!,
+                        style: GoogleFonts.almarai(
+                          color: kBrutalTeal,
+                          fontSize: 12,
+                          fontWeight: FontWeight.w800,
+                          fontStyle: FontStyle.italic,
                         ),
                       ),
-                      const SizedBox(width: 8),
-                      TtsButton(text: s.target, lang: lang, size: 32),
                     ],
-                  ),
-                  if (s.romanized != null && s.romanized!.isNotEmpty) ...[
-                    const SizedBox(height: 4),
-                    Text(s.romanized!,
-                        style: GoogleFonts.almarai(
-                            color: kPrimary.withAlpha(204),
-                            fontSize: 12,
-                            fontStyle: FontStyle.italic)),
+                    const SizedBox(height: 8),
+                    Text(
+                      s.gloss,
+                      style: GoogleFonts.almarai(color: kBrutalMuted, fontSize: 12, fontWeight: FontWeight.w800),
+                    ),
                   ],
-                  const SizedBox(height: 8),
-                  Text(s.gloss,
-                      style: GoogleFonts.almarai(
-                          color: kMuted, fontSize: 12, fontWeight: FontWeight.w800)),
-                ],
+                ),
               ),
             ),
           ),
-        ),
-      const SizedBox(height: 20),
-    ]);
+        const SizedBox(height: 20),
+      ],
+    );
   }
 }
-
-
-
-

mobile/lib/features/home/home_shell.dart

@@ -1,29 +1,20 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:google_fonts/google_fonts.dart';
 
 import '../../auth/auth_provider.dart';
-import '../camera/camera_screen.dart';
-import '../phrases/phrases_screen.dart';
-import '../practice/dialogues_list_screen.dart';
-import '../profile/profile_screen.dart';
 import '../../theme/app_theme.dart';
 
 class HomeShell extends ConsumerStatefulWidget {
-  const HomeShell({super.key});
+  const HomeShell({super.key, required this.navigationShell});
+  final StatefulNavigationShell navigationShell;
+
   @override
   ConsumerState<HomeShell> createState() => _HomeShellState();
 }
 
 class _HomeShellState extends ConsumerState<HomeShell> {
-  int _index = 0;
-
-  static const _pages = [
-    DialoguesListScreen(),
-    CameraScreen(),
-    PhrasesScreen(),
-    ProfileScreen(),
-  ];
-
   @override
   void initState() {
     super.initState();
@@ -35,35 +26,118 @@ class _HomeShellState extends ConsumerState<HomeShell> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: IndexedStack(index: _index, children: _pages),
-      bottomNavigationBar: DecoratedBox(
-        decoration: const BoxDecoration(
-          color: kCard,
-          border: Border(top: BorderSide(color: kBorder, width: 2)),
+      body: widget.navigationShell,
+      bottomNavigationBar: _BrutalNavBar(
+        index: widget.navigationShell.currentIndex,
+        onTap: (i) => widget.navigationShell.goBranch(
+          i,
+          initialLocation: i == widget.navigationShell.currentIndex,
         ),
-        child: NavigationBar(
-          selectedIndex: _index,
-          onDestinationSelected: (i) => setState(() => _index = i),
-          destinations: const [
-            NavigationDestination(
-              icon: Icon(Icons.chat_bubble_outline),
-              selectedIcon: Icon(Icons.chat_bubble),
-              label: 'Practice',
-            ),
-            NavigationDestination(
-              icon: Icon(Icons.camera_alt_outlined),
-              selectedIcon: Icon(Icons.camera_alt),
-              label: 'Camera',
-            ),
-            NavigationDestination(
-              icon: Icon(Icons.translate_rounded),
-              selectedIcon: Icon(Icons.translate),
-              label: 'Phrases',
+      ),
+    );
+  }
+}
+
+class _BrutalNavBar extends StatelessWidget {
+  const _BrutalNavBar({required this.index, required this.onTap});
+  final int index;
+  final ValueChanged<int> onTap;
+
+  static const _tabs = <_TabItem>[
+    // Web order: Phrases, Camera, Practice, Profile (app/(app)/layout.tsx).
+    _TabItem(icon: Icons.translate_rounded, label: 'Phrases'),
+    _TabItem(icon: Icons.photo_camera_rounded, label: 'Camera'),
+    _TabItem(icon: Icons.home_rounded, label: 'Practice'),
+    _TabItem(icon: Icons.person_rounded, label: 'Profile'),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    final bottomInset = MediaQuery.of(context).padding.bottom;
+    return Container(
+      decoration: const BoxDecoration(
+        color: kBrutalWhite,
+        border: Border(top: BorderSide(color: kBrutalBlack, width: 2)),
+      ),
+      padding: EdgeInsets.fromLTRB(10, 10, 10, 10 + bottomInset),
+      child: Row(
+        children: [
+          for (var i = 0; i < _tabs.length; i++)
+            Expanded(
+              child: _NavCell(
+                tab: _tabs[i],
+                active: i == index,
+                onTap: () => onTap(i),
+              ),
             ),
-            NavigationDestination(
-              icon: Icon(Icons.person_outline),
-              selectedIcon: Icon(Icons.person),
-              label: 'Profile',
+        ],
+      ),
+    );
+  }
+}
+
+class _TabItem {
+  const _TabItem({required this.icon, required this.label});
+  final IconData icon;
+  final String label;
+}
+
+class _NavCell extends StatefulWidget {
+  const _NavCell({required this.tab, required this.active, required this.onTap});
+  final _TabItem tab;
+  final bool active;
+  final VoidCallback onTap;
+
+  @override
+  State<_NavCell> createState() => _NavCellState();
+}
+
+class _NavCellState extends State<_NavCell> {
+  bool _pressed = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final active = widget.active;
+    final fg = active ? kBrutalWhite : kBrutalSlate;
+    final bg = active ? kBrutalTeal : Colors.transparent;
+    final showShadow = active;
+    final offset = _pressed ? 0.0 : 3.0;
+
+    return GestureDetector(
+      onTapDown: (_) => setState(() => _pressed = true),
+      onTapUp: (_) => setState(() => _pressed = false),
+      onTapCancel: () => setState(() => _pressed = false),
+      onTap: widget.onTap,
+      behavior: HitTestBehavior.opaque,
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 80),
+        margin: const EdgeInsets.symmetric(horizontal: 4),
+        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
+        transform: Matrix4.translationValues(
+          active && _pressed ? 3 : 0,
+          active && _pressed ? 3 : 0,
+          0,
+        ),
+        decoration: BoxDecoration(
+          color: bg,
+          borderRadius: BorderRadius.circular(kBrutalRadius),
+          border: active ? Border.all(color: kBrutalBlack, width: 2) : null,
+          boxShadow: showShadow
+              ? [BoxShadow(color: kBrutalBlack, offset: Offset(offset, offset), blurRadius: 0)]
+              : null,
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(widget.tab.icon, color: fg, size: 22),
+            const SizedBox(height: 2),
+            Text(
+              widget.tab.label,
+              style: GoogleFonts.almarai(
+                color: fg,
+                fontSize: 11,
+                fontWeight: FontWeight.w900,
+              ),
             ),
           ],
         ),
@@ -71,5 +145,3 @@ class _HomeShellState extends ConsumerState<HomeShell> {
     );
   }
 }
-
-

mobile/lib/features/login/login_screen.dart

@@ -1,10 +1,14 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:video_player/video_player.dart';
 
 import '../../auth/auth_provider.dart';
 import '../../theme/app_theme.dart';
 
+const _kHeroVideoUrl =
+    'https://d8j0ntlcm91z4.cloudfront.net/user_34DpnLwtmxkLgtVe8psPn1j2G8i/hf_20260505_151902_782a6426-d5ef-40eb-b482-d807701834c1.mp4';
+
 class LoginScreen extends ConsumerStatefulWidget {
   const LoginScreen({super.key});
 
@@ -15,20 +19,34 @@ class LoginScreen extends ConsumerStatefulWidget {
 class _LoginScreenState extends ConsumerState<LoginScreen> with SingleTickerProviderStateMixin {
   bool _loading = false;
   String? _error;
+  VideoPlayerController? _video;
+  bool _videoReady = false;
+
   late final AnimationController _ctrl;
-  late final Animation<double> _fade;
+  late final Animation<double> _fadeContent;
 
   @override
   void initState() {
     super.initState();
-    _ctrl = AnimationController(vsync: this, duration: const Duration(milliseconds: 650));
-    _fade = CurvedAnimation(parent: _ctrl, curve: Curves.easeOutCubic);
+    _ctrl = AnimationController(vsync: this, duration: const Duration(milliseconds: 900));
+    _fadeContent = CurvedAnimation(parent: _ctrl, curve: const Interval(0.25, 1.0, curve: Curves.easeOutCubic));
     _ctrl.forward();
+
+    final controller = VideoPlayerController.networkUrl(Uri.parse(_kHeroVideoUrl));
+    _video = controller;
+    controller.initialize().then((_) async {
+      if (!mounted) return;
+      await controller.setLooping(true);
+      await controller.setVolume(0);
+      await controller.play();
+      if (mounted) setState(() => _videoReady = true);
+    }).catchError((_) {});
   }
 
   @override
   void dispose() {
     _ctrl.dispose();
+    _video?.dispose();
     super.dispose();
   }
 
@@ -39,140 +57,222 @@ class _LoginScreenState extends ConsumerState<LoginScreen> with SingleTickerProv
     });
     try {
       await ref.read(authControllerProvider.notifier).signInWithHuggingFace();
-    } catch (_) {
-      setState(() => _error = 'Sign in failed. Please try again.');
+    } catch (e) {
+      debugPrint('[login] sign-in failed: $e');
+      if (!mounted) return;
+      setState(() => _error = _humanError(e));
     } finally {
       if (mounted) setState(() => _loading = false);
     }
   }
 
+  String _humanError(Object e) {
+    final s = e.toString();
+    if (s.contains('CANCELED') || s.contains('canceled')) {
+      return 'Sign in canceled.';
+    }
+    if (s.contains('Failed host lookup') || s.contains('SocketException')) {
+      return 'No internet connection.';
+    }
+    if (s.contains('callback missing token')) {
+      return 'Sign in failed: callback did not include a token.';
+    }
+    return 'Sign in failed.';
+  }
+
   @override
   Widget build(BuildContext context) {
+    final size = MediaQuery.of(context).size;
+    final wordmarkSize = (size.width * 0.16).clamp(44.0, 88.0);
+
     return Scaffold(
-      body: SafeArea(
-        child: Center(
-          child: ConstrainedBox(
-            constraints: const BoxConstraints(maxWidth: 520),
-            child: FadeTransition(
-              opacity: _fade,
-              child: ListView(
-                padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
-                children: [
-                  const SizedBox(height: 24),
-                  const Center(child: _BrandMark()),
-                  const SizedBox(height: 28),
-                  Text(
-                    'PraxaLing',
-                    textAlign: TextAlign.center,
-                    style: GoogleFonts.almarai(
-                      color: kForeground,
-                      fontSize: 46,
-                      fontWeight: FontWeight.w900,
-                      height: 1,
-                    ),
-                  ),
-                  const SizedBox(height: 14),
-                  Text(
-                    'Quick dialogues, phrase breakdowns, and photo vocabulary in one daily lesson flow.',
-                    textAlign: TextAlign.center,
-                    style: GoogleFonts.almarai(
-                      color: kMuted,
-                      fontSize: 16,
-                      fontWeight: FontWeight.w800,
-                      height: 1.35,
+      backgroundColor: Colors.black,
+      body: Stack(
+        fit: StackFit.expand,
+        children: [
+          if (_videoReady && _video != null)
+            FittedBox(
+              fit: BoxFit.cover,
+              child: SizedBox(
+                width: _video!.value.size.width,
+                height: _video!.value.size.height,
+                child: VideoPlayer(_video!),
+              ),
+            ),
+          const DecoratedBox(
+            decoration: BoxDecoration(
+              gradient: LinearGradient(
+                begin: Alignment.topCenter,
+                end: Alignment.bottomCenter,
+                colors: [Color(0x4D000000), Colors.transparent, Color(0x99000000)],
+                stops: [0.0, 0.45, 1.0],
+              ),
+            ),
+            child: SizedBox.expand(),
+          ),
+          SafeArea(
+            child: Padding(
+              padding: const EdgeInsets.fromLTRB(20, 20, 20, 28),
+              child: FadeTransition(
+                opacity: _fadeContent,
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisAlignment: MainAxisAlignment.end,
+                  children: [
+                    RichText(
+                      text: TextSpan(
+                        style: GoogleFonts.almarai(
+                          color: const Color(0xFFE1E0CC),
+                          fontWeight: FontWeight.w500,
+                          height: 0.85,
+                          fontSize: wordmarkSize,
+                          letterSpacing: 0,
+                        ),
+                        children: [
+                          const TextSpan(text: 'PraxaLing'),
+                          TextSpan(
+                            text: '*',
+                            style: TextStyle(
+                              fontSize: wordmarkSize * 0.31,
+                              height: 1,
+                            ),
+                          ),
+                        ],
+                      ),
                     ),
-                  ),
-                  const SizedBox(height: 40),
-                  FilledButton.icon(
-                    onPressed: _loading ? null : _signIn,
-                    icon: _loading
-                        ? const SizedBox(
-                            width: 18,
-                            height: 18,
-                            child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white),
-                          )
-                        : const Icon(Icons.play_arrow_rounded),
-                    label: Text(_loading ? 'Opening browser...' : 'Start learning'),
-                  ),
-                  const SizedBox(height: 14),
-                  OutlinedButton(
-                    onPressed: _loading ? null : _signIn,
-                    child: const Text('I already have an account'),
-                  ),
-                  if (_error != null) ...[
-                    const SizedBox(height: 16),
-                    Container(
-                      padding: const EdgeInsets.all(12),
-                      decoration: BoxDecoration(
-                        color: const Color(0xFFFFE4E6),
-                        borderRadius: BorderRadius.circular(16),
-                        border: Border.all(color: const Color(0xFFFECDD3), width: 2),
+                    const SizedBox(height: 18),
+                    Text(
+                      'Practicing languages using PraxaLing.',
+                      style: GoogleFonts.almarai(
+                        color: Colors.white,
+                        fontSize: 14,
+                        fontWeight: FontWeight.w700,
+                        height: 1.3,
                       ),
-                      child: Text(
-                        _error!,
-                        textAlign: TextAlign.center,
-                        style: GoogleFonts.almarai(color: kDangerShadow, fontWeight: FontWeight.w900),
+                    ),
+                    const SizedBox(height: 22),
+                    _BrutalHFButton(loading: _loading, onTap: _loading ? null : _signIn),
+                    if (_error != null) ...[
+                      const SizedBox(height: 16),
+                      _BrutalErrorBanner(message: _error!),
+                    ],
+                    const SizedBox(height: 14),
+                    Text(
+                      'WE USE YOUR HUGGING FACE ACCOUNT FOR SIGN IN.',
+                      style: GoogleFonts.almarai(
+                        color: const Color(0xFFE1E0CC),
+                        fontSize: 10,
+                        fontWeight: FontWeight.w900,
+                        letterSpacing: 1.2,
                       ),
                     ),
                   ],
-                  const SizedBox(height: 18),
-                  Text(
-                    'We use your Hugging Face account for sign in.',
-                    textAlign: TextAlign.center,
-                    style: GoogleFonts.almarai(color: kMuted, fontSize: 12, fontWeight: FontWeight.w700),
-                  ),
-                ],
+                ),
               ),
             ),
           ),
-        ),
+        ],
       ),
     );
   }
 }
 
-class _BrandMark extends StatelessWidget {
-  const _BrandMark();
+class _BrutalHFButton extends StatefulWidget {
+  const _BrutalHFButton({required this.loading, required this.onTap});
+  final bool loading;
+  final VoidCallback? onTap;
+
+  @override
+  State<_BrutalHFButton> createState() => _BrutalHFButtonState();
+}
+
+class _BrutalHFButtonState extends State<_BrutalHFButton> {
+  bool _pressed = false;
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      width: 112,
-      height: 112,
-      decoration: BoxDecoration(
-        color: kPrimary,
-        borderRadius: BorderRadius.circular(30),
-        boxShadow: const [BoxShadow(color: kPrimaryShadow, offset: Offset(0, 6), blurRadius: 0)],
-      ),
-      child: Stack(
-        alignment: Alignment.center,
-        children: [
-          Container(
-            width: 68,
-            height: 68,
-            decoration: BoxDecoration(
-              color: Colors.white,
-              borderRadius: BorderRadius.circular(22),
+    final disabled = widget.onTap == null;
+    final offset = _pressed ? 0.0 : 4.0;
+
+    return GestureDetector(
+      onTapDown: disabled ? null : (_) => setState(() => _pressed = true),
+      onTapUp: disabled ? null : (_) => setState(() => _pressed = false),
+      onTapCancel: disabled ? null : () => setState(() => _pressed = false),
+      onTap: widget.onTap,
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 80),
+        transform: Matrix4.translationValues(_pressed ? 4 : 0, _pressed ? 4 : 0, 0),
+        padding: const EdgeInsets.fromLTRB(20, 10, 10, 10),
+        decoration: BoxDecoration(
+          color: kBrutalWhite,
+          borderRadius: BorderRadius.circular(kBrutalRadius),
+          border: Border.all(color: kBrutalBlack, width: 3),
+          boxShadow: [
+            BoxShadow(color: kBrutalBlack, offset: Offset(offset, offset), blurRadius: 0),
+          ],
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const Text('🤗', style: TextStyle(fontSize: 22)),
+            const SizedBox(width: 10),
+            Text(
+              widget.loading ? 'OPENING BROWSER…' : 'START WITH HUGGING FACE',
+              style: GoogleFonts.almarai(
+                color: kBrutalBlack,
+                fontWeight: FontWeight.w900,
+                fontSize: 14,
+                letterSpacing: 0.5,
+              ),
             ),
-            child: const Icon(Icons.explore_rounded, color: kSecondary, size: 42),
-          ),
-          Positioned(
-            right: 19,
-            top: 21,
-            child: Container(
-              width: 14,
-              height: 14,
-              decoration: const BoxDecoration(
-                color: kWarning,
-                shape: BoxShape.circle,
+            const SizedBox(width: 14),
+            Container(
+              width: 38,
+              height: 38,
+              decoration: BoxDecoration(
+                color: kBrutalBlack,
+                borderRadius: BorderRadius.circular(kBrutalRadius),
               ),
+              alignment: Alignment.center,
+              child: widget.loading
+                  ? const SizedBox(
+                      width: 16,
+                      height: 16,
+                      child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white),
+                    )
+                  : const Icon(Icons.arrow_forward_rounded, color: Colors.white, size: 20),
             ),
-          ),
-        ],
+          ],
+        ),
       ),
     );
   }
 }
 
-
-
+class _BrutalErrorBanner extends StatelessWidget {
+  const _BrutalErrorBanner({required this.message});
+  final String message;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
+      decoration: BoxDecoration(
+        color: kBrutalRed,
+        borderRadius: BorderRadius.circular(kBrutalRadius),
+        border: Border.all(color: kBrutalBlack, width: 2),
+        boxShadow: const [
+          BoxShadow(color: kBrutalBlack, offset: Offset(4, 4), blurRadius: 0),
+        ],
+      ),
+      child: Text(
+        message,
+        style: GoogleFonts.almarai(
+          color: kBrutalWhite,
+          fontWeight: FontWeight.w900,
+          fontSize: 13,
+        ),
+      ),
+    );
+  }
+}

mobile/lib/features/onboarding/onboarding_screen.dart

@@ -1,3 +1,6 @@
+import 'dart:ui' as ui;
+
+import 'package:country_flags/country_flags.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:google_fonts/google_fonts.dart';
@@ -5,6 +8,7 @@ import 'package:google_fonts/google_fonts.dart';
 import '../../auth/auth_provider.dart';
 import '../../core/languages.dart';
 import '../../theme/app_theme.dart';
+import '../../widgets/level_picker.dart';
 
 class OnboardingScreen extends ConsumerStatefulWidget {
   const OnboardingScreen({super.key});
@@ -14,15 +18,38 @@ class OnboardingScreen extends ConsumerStatefulWidget {
 }
 
 class _OnboardingScreenState extends ConsumerState<OnboardingScreen> {
-  String _native = 'en';
-  String _target = 'es';
+  late String _native;
+  // Ordered list of selected target languages. First entry = primary target.
+  final List<String> _targets = [];
   String _level = 'A1';
   bool _saving = false;
   String? _error;
 
+  @override
+  void initState() {
+    super.initState();
+    final deviceLocale = ui.PlatformDispatcher.instance.locale.languageCode;
+    _native = kLanguages.any((l) => l.code == deviceLocale) ? deviceLocale : 'en';
+  }
+
+  void _toggleTarget(String code) {
+    if (code == _native) {
+      setState(() => _error = 'You already speak that one.');
+      return;
+    }
+    setState(() {
+      _error = null;
+      if (_targets.contains(code)) {
+        _targets.remove(code);
+      } else {
+        _targets.add(code);
+      }
+    });
+  }
+
   Future<void> _save() async {
-    if (_native == _target) {
-      setState(() => _error = 'Native and target languages must differ.');
+    if (_targets.isEmpty) {
+      setState(() => _error = 'Pick at least one language to learn.');
       return;
     }
     setState(() {
@@ -32,7 +59,8 @@ class _OnboardingScreenState extends ConsumerState<OnboardingScreen> {
     try {
       await ref.read(authControllerProvider.notifier).saveProfile(
             nativeLang: _native,
-            targetLang: _target,
+            targetLang: _targets.first,
+            targetLangs: _targets,
             level: _level,
           );
     } catch (e) {
@@ -45,121 +73,81 @@ class _OnboardingScreenState extends ConsumerState<OnboardingScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      backgroundColor: kBrutalCream,
       body: SafeArea(
         child: Center(
           child: ConstrainedBox(
             constraints: const BoxConstraints(maxWidth: 720),
             child: ListView(
-              padding: const EdgeInsets.all(20),
+              padding: const EdgeInsets.fromLTRB(16, 24, 16, 32),
               children: [
-                Container(
-                  decoration: duoCardDecoration(),
-                  clipBehavior: Clip.antiAlias,
+                _BrutalCard(
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.stretch,
                     children: [
-                      Container(
-                        color: kPrimary,
-                        padding: const EdgeInsets.all(22),
-                        child: Row(
-                          children: [
-                            Container(
-                              width: 54,
-                              height: 54,
-                              decoration: BoxDecoration(
-                                color: Colors.white,
-                                borderRadius: BorderRadius.circular(18),
-                                boxShadow: const [
-                                  BoxShadow(color: kPrimaryShadow, offset: Offset(0, 4), blurRadius: 0),
-                                ],
-                              ),
-                              child: const Icon(Icons.auto_awesome, color: kPrimaryShadow),
-                            ),
-                            const SizedBox(width: 14),
-                            Expanded(
-                              child: Column(
-                                crossAxisAlignment: CrossAxisAlignment.start,
-                                children: [
-                                  Text(
-                                    'SET UP YOUR COURSE',
-                                    style: GoogleFonts.almarai(
-                                      color: Colors.white.withAlpha(210),
-                                      fontSize: 11,
-                                      fontWeight: FontWeight.w900,
-                                      letterSpacing: 0,
-                                    ),
-                                  ),
-                                  Text(
-                                    'Pick your path',
-                                    style: GoogleFonts.almarai(
-                                      color: Colors.white,
-                                      fontSize: 28,
-                                      fontWeight: FontWeight.w900,
-                                      height: 1.1,
-                                    ),
-                                  ),
-                                ],
-                              ),
-                            ),
-                          ],
-                        ),
-                      ),
+                      _Header(),
                       Padding(
-                        padding: const EdgeInsets.all(20),
+                        padding: const EdgeInsets.fromLTRB(20, 22, 20, 22),
                         child: Column(
                           crossAxisAlignment: CrossAxisAlignment.stretch,
                           children: [
-                            _SectionLabel('I speak'),
-                            const SizedBox(height: 8),
-                            _langDropdown(_native, (v) => setState(() => _native = v)),
-                            const SizedBox(height: 18),
-                            _SectionLabel('I want to learn'),
-                            const SizedBox(height: 8),
-                            _langDropdown(_target, (v) => setState(() => _target = v), exclude: _native),
-                            const SizedBox(height: 22),
-                            _SectionLabel('My current level'),
+                            const _SectionLabel('I SPEAK'),
                             const SizedBox(height: 10),
-                            LayoutBuilder(
-                              builder: (context, constraints) {
-                                final twoColumns = constraints.maxWidth >= 520;
-                                return GridView.count(
-                                  crossAxisCount: twoColumns ? 5 : 2,
-                                  shrinkWrap: true,
-                                  mainAxisSpacing: 10,
-                                  crossAxisSpacing: 10,
-                                  physics: const NeverScrollableScrollPhysics(),
-                                  childAspectRatio: twoColumns ? 1.05 : 2.1,
-                                  children: kLevels.map((level) {
-                                    final selected = _level == level;
-                                    return _LevelTile(
-                                      level: level,
-                                      description: kLevelDescriptions[level] ?? '',
-                                      selected: selected,
-                                      onTap: () => setState(() => _level = level),
-                                    );
-                                  }).toList(),
-                                );
+                            _NativeLanguageDropdown(
+                              value: _native,
+                              onChanged: (v) {
+                                setState(() {
+                                  _native = v;
+                                  _targets.remove(v);
+                                });
                               },
                             ),
+                            const SizedBox(height: 24),
+                            const _SectionLabel('I WANT TO LEARN'),
+                            const SizedBox(height: 6),
+                            Text(
+                              'Tap to add. The first you pick is your primary.',
+                              style: GoogleFonts.almarai(
+                                color: kBrutalMuted,
+                                fontWeight: FontWeight.w800,
+                                fontSize: 12,
+                              ),
+                            ),
+                            const SizedBox(height: 12),
+                            _TargetLanguageGrid(
+                              languages: kLanguages.where((l) => l.code != _native).toList(),
+                              selected: _targets,
+                              onToggle: _toggleTarget,
+                            ),
+                            const SizedBox(height: 24),
+                            const _SectionLabel('MY CURRENT LEVEL'),
+                            const SizedBox(height: 12),
+                            LevelPicker(
+                              value: _level,
+                              onChanged: (v) => setState(() => _level = v),
+                            ),
                             if (_error != null) ...[
                               const SizedBox(height: 18),
                               Container(
                                 padding: const EdgeInsets.all(12),
                                 decoration: BoxDecoration(
-                                  color: const Color(0xFFFFE4E6),
-                                  borderRadius: BorderRadius.circular(16),
-                                  border: Border.all(color: const Color(0xFFFECDD3), width: 2),
+                                  color: kBrutalRed,
+                                  borderRadius: BorderRadius.circular(kBrutalRadius),
+                                  border: Border.all(color: kBrutalBlack, width: 2),
+                                  boxShadow: const [
+                                    BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0),
+                                  ],
                                 ),
                                 child: Text(
                                   _error!,
-                                  style: GoogleFonts.almarai(color: kDangerShadow, fontWeight: FontWeight.w900),
+                                  style: GoogleFonts.almarai(color: kBrutalWhite, fontWeight: FontWeight.w900),
                                 ),
                               ),
                             ],
-                            const SizedBox(height: 22),
+                            const SizedBox(height: 24),
                             FilledButton(
                               onPressed: _saving ? null : _save,
-                              child: Text(_saving ? 'Saving...' : 'Start learning'),
+                              child: Text(_saving ? 'SAVING…' : 'START LEARNING'),
                             ),
                           ],
                         ),
@@ -174,17 +162,80 @@ class _OnboardingScreenState extends ConsumerState<OnboardingScreen> {
       ),
     );
   }
+}
+
+class _BrutalCard extends StatelessWidget {
+  const _BrutalCard({required this.child});
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: kBrutalWhite,
+        borderRadius: BorderRadius.circular(kBrutalRadius),
+        border: Border.all(color: kBrutalBlack, width: 3),
+        boxShadow: const [
+          BoxShadow(color: kBrutalBlack, offset: Offset(6, 6), blurRadius: 0),
+        ],
+      ),
+      clipBehavior: Clip.antiAlias,
+      child: child,
+    );
+  }
+}
 
-  Widget _langDropdown(String value, ValueChanged<String> onChanged, {String? exclude}) {
-    final items = kLanguages.where((language) => language.code != exclude).toList();
-    return DropdownButtonFormField<String>(
-      initialValue: value,
-      icon: const Icon(Icons.keyboard_arrow_down_rounded, color: kMuted),
-      decoration: const InputDecoration(),
-      items: items.map((language) {
-        return DropdownMenuItem(value: language.code, child: Text(language.name));
-      }).toList(),
-      onChanged: (v) => v == null ? null : onChanged(v),
+class _Header extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: kBrutalTeal,
+      padding: const EdgeInsets.fromLTRB(20, 22, 20, 22),
+      child: Row(
+        children: [
+          Container(
+            width: 56,
+            height: 56,
+            decoration: BoxDecoration(
+              color: kBrutalWhite,
+              borderRadius: BorderRadius.circular(kBrutalRadius),
+              border: Border.all(color: kBrutalBlack, width: 2),
+              boxShadow: const [
+                BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0),
+              ],
+            ),
+            child: const Icon(Icons.translate_rounded, color: kBrutalBlack),
+          ),
+          const SizedBox(width: 14),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'WELCOME TO PRAXALING',
+                  style: GoogleFonts.almarai(
+                    color: kBrutalWhite,
+                    fontSize: 11,
+                    fontWeight: FontWeight.w900,
+                    letterSpacing: 1.4,
+                  ),
+                ),
+                const SizedBox(height: 2),
+                Text(
+                  'SET UP YOUR COURSE',
+                  style: GoogleFonts.almarai(
+                    color: kBrutalWhite,
+                    fontSize: 24,
+                    fontWeight: FontWeight.w900,
+                    height: 1.05,
+                    letterSpacing: 0,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
     );
   }
 }
@@ -197,57 +248,201 @@ class _SectionLabel extends StatelessWidget {
   Widget build(BuildContext context) {
     return Text(
       text,
-      style: GoogleFonts.almarai(color: kForeground, fontWeight: FontWeight.w900, fontSize: 15),
+      style: GoogleFonts.almarai(
+        color: kBrutalSlate,
+        fontWeight: FontWeight.w900,
+        fontSize: 12,
+        letterSpacing: 1.2,
+      ),
+    );
+  }
+}
+
+class _NativeLanguageDropdown extends StatelessWidget {
+  const _NativeLanguageDropdown({required this.value, required this.onChanged});
+  final String value;
+  final ValueChanged<String> onChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: kBrutalWhite,
+        borderRadius: BorderRadius.circular(kBrutalRadius),
+        border: Border.all(color: kBrutalBlack, width: 2),
+        boxShadow: const [
+          BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0),
+        ],
+      ),
+      padding: const EdgeInsets.symmetric(horizontal: 14),
+      child: DropdownButtonHideUnderline(
+        child: DropdownButton<String>(
+          value: value,
+          isExpanded: true,
+          icon: const Icon(Icons.keyboard_arrow_down_rounded, color: kBrutalBlack),
+          style: GoogleFonts.almarai(color: kBrutalBlack, fontWeight: FontWeight.w900, fontSize: 16),
+          items: kLanguages.map((language) {
+            return DropdownMenuItem(
+              value: language.code,
+              child: Row(
+                children: [
+                  SizedBox(width: 24, height: 18, child: CountryFlag.fromCountryCode(language.flagCode)),
+                  const SizedBox(width: 12),
+                  Text(language.name),
+                ],
+              ),
+            );
+          }).toList(),
+          onChanged: (v) => v == null ? null : onChanged(v),
+        ),
+      ),
+    );
+  }
+}
+
+class _TargetLanguageGrid extends StatelessWidget {
+  const _TargetLanguageGrid({
+    required this.languages,
+    required this.selected,
+    required this.onToggle,
+  });
+
+  final List<LanguageOption> languages;
+  final List<String> selected;
+  final ValueChanged<String> onToggle;
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final cols = constraints.maxWidth >= 480 ? 3 : 2;
+        return GridView.builder(
+          shrinkWrap: true,
+          physics: const NeverScrollableScrollPhysics(),
+          itemCount: languages.length,
+          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: cols,
+            mainAxisExtent: 88,
+            crossAxisSpacing: 10,
+            mainAxisSpacing: 10,
+          ),
+          itemBuilder: (context, i) {
+            final lang = languages[i];
+            final idx = selected.indexOf(lang.code);
+            final isSelected = idx >= 0;
+            final isPrimary = idx == 0;
+            return _LanguageChip(
+              language: lang,
+              selected: isSelected,
+              primary: isPrimary,
+              onTap: () => onToggle(lang.code),
+            );
+          },
+        );
+      },
     );
   }
 }
 
-class _LevelTile extends StatelessWidget {
-  const _LevelTile({
-    required this.level,
-    required this.description,
+class _LanguageChip extends StatefulWidget {
+  const _LanguageChip({
+    required this.language,
     required this.selected,
+    required this.primary,
     required this.onTap,
   });
 
-  final String level;
-  final String description;
+  final LanguageOption language;
   final bool selected;
+  final bool primary;
   final VoidCallback onTap;
 
+  @override
+  State<_LanguageChip> createState() => _LanguageChipState();
+}
+
+class _LanguageChipState extends State<_LanguageChip> {
+  bool _pressed = false;
+
   @override
   Widget build(BuildContext context) {
-    return InkWell(
-      borderRadius: BorderRadius.circular(18),
-      onTap: onTap,
+    final selected = widget.selected;
+    final fill = widget.primary
+        ? kBrutalTeal
+        : selected
+            ? kBrutalYellow
+            : kBrutalWhite;
+    final fg = widget.primary ? kBrutalWhite : kBrutalBlack;
+    final offset = _pressed ? 0.0 : (selected ? 4.0 : 3.0);
+
+    return GestureDetector(
+      onTapDown: (_) => setState(() => _pressed = true),
+      onTapUp: (_) => setState(() => _pressed = false),
+      onTapCancel: () => setState(() => _pressed = false),
+      onTap: widget.onTap,
       child: AnimatedContainer(
-        duration: const Duration(milliseconds: 180),
-        padding: const EdgeInsets.all(12),
+        duration: const Duration(milliseconds: 80),
+        transform: Matrix4.translationValues(_pressed ? offset : 0, _pressed ? offset : 0, 0),
+        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
         decoration: BoxDecoration(
-          color: selected ? const Color(0xFFEDE9FE) : kCard,
-          borderRadius: BorderRadius.circular(18),
-          border: Border.all(color: selected ? kSecondary : kBorder, width: 2),
-          boxShadow: [BoxShadow(color: selected ? kSecondaryShadow : kBorder, offset: const Offset(0, 4), blurRadius: 0)],
+          color: fill,
+          borderRadius: BorderRadius.circular(kBrutalRadius),
+          border: Border.all(color: kBrutalBlack, width: 2),
+          boxShadow: [
+            BoxShadow(color: kBrutalBlack, offset: Offset(offset, offset), blurRadius: 0),
+          ],
         ),
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          crossAxisAlignment: CrossAxisAlignment.start,
+        child: Stack(
           children: [
-            Text(level, style: GoogleFonts.almarai(color: kForeground, fontWeight: FontWeight.w900, fontSize: 18)),
-            const SizedBox(height: 3),
-            Flexible(
-              child: Text(
-                description,
-                maxLines: 2,
-                overflow: TextOverflow.ellipsis,
-                style: GoogleFonts.almarai(color: kMuted, fontWeight: FontWeight.w800, fontSize: 11, height: 1.15),
+            Center(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  SizedBox(width: 28, height: 20, child: CountryFlag.fromCountryCode(widget.language.flagCode)),
+                  const SizedBox(height: 6),
+                  Text(
+                    widget.language.name,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: GoogleFonts.almarai(
+                      color: fg,
+                      fontWeight: FontWeight.w900,
+                      fontSize: 12,
+                    ),
+                  ),
+                ],
               ),
             ),
+            if (widget.primary)
+              Positioned(
+                top: 0,
+                right: 0,
+                child: Container(
+                  padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+                  decoration: BoxDecoration(
+                    color: kBrutalBlack,
+                    borderRadius: BorderRadius.circular(2),
+                  ),
+                  child: Text(
+                    'PRIMARY',
+                    style: GoogleFonts.almarai(
+                      color: kBrutalWhite,
+                      fontSize: 8,
+                      fontWeight: FontWeight.w900,
+                      letterSpacing: 0.5,
+                    ),
+                  ),
+                ),
+              )
+            else if (selected)
+              const Positioned(
+                top: 2,
+                right: 2,
+                child: Icon(Icons.check_circle_rounded, color: kBrutalBlack, size: 16),
+              ),
           ],
         ),
       ),
     );
   }
 }
-
-

mobile/lib/features/phrases/phrases_screen.dart

@@ -9,9 +9,6 @@ import '../../widgets/level_picker.dart';
 import 'widgets/furi_text.dart';
 import 'widgets/tts_button.dart';
 
-const _phraseFill = Color(0xFFE8F7F6);
-const _warningFill = Color(0xFFFEF3C7);
-const _kanjiExampleFill = Color(0xFFE6FBFA);
 const _examples = ['to find', 'I would like...', 'appointment', 'Can you help me?', 'because'];
 
 String _value(Map<String, dynamic> json, String key) => (json[key] ?? '').toString();
@@ -226,16 +223,15 @@ class _PhrasesScreenState extends ConsumerState<PhrasesScreen> {
     final lang = profile?.targetLang ?? 'en';
     final activeLevel = _level ?? profile?.level ?? 'A1';
     return Scaffold(
-      appBar: AppBar(toolbarHeight: 72, title: const Text('Phrases')),
       body: SafeArea(
         child: Center(
           child: ConstrainedBox(
             constraints: const BoxConstraints(maxWidth: 980),
             child: ListView(
-              padding: const EdgeInsets.fromLTRB(16, 20, 16, 28),
+              padding: const EdgeInsets.fromLTRB(16, 18, 16, 28),
               children: [
-                _Header(),
-                const SizedBox(height: 28),
+                _Banner(profile: profile),
+                const SizedBox(height: 22),
                 _InputPanel(
                   controller: _controller,
                   loading: _loading,
@@ -261,22 +257,75 @@ class _PhrasesScreenState extends ConsumerState<PhrasesScreen> {
   }
 }
 
-class _Header extends StatelessWidget {
+class _Banner extends StatelessWidget {
+  const _Banner({required this.profile});
+  final Profile? profile;
+
   @override
   Widget build(BuildContext context) {
-    return RichText(
-      text: TextSpan(
-        style: GoogleFonts.almarai(
-          color: kForeground,
-          fontSize: 34,
-          fontWeight: FontWeight.w900,
-          height: 0.98,
-          letterSpacing: 0,
-        ),
-        children: const [
-          TextSpan(text: 'Break down '),
-          TextSpan(text: 'phrases', style: TextStyle(color: kPrimary)),
-          TextSpan(text: ' into sentences, grammar, and tips'),
+    return Container(
+      decoration: BoxDecoration(
+        color: kBrutalRed,
+        borderRadius: BorderRadius.circular(kBrutalRadius),
+        border: Border.all(color: kBrutalBlack, width: 3),
+        boxShadow: const [
+          BoxShadow(color: kBrutalBlack, offset: Offset(5, 5), blurRadius: 0),
+        ],
+      ),
+      padding: const EdgeInsets.all(20),
+      child: Row(
+        children: [
+          Container(
+            width: 56,
+            height: 56,
+            decoration: BoxDecoration(
+              color: kBrutalWhite,
+              borderRadius: BorderRadius.circular(kBrutalRadius),
+              border: Border.all(color: kBrutalBlack, width: 2),
+              boxShadow: const [
+                BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0),
+              ],
+            ),
+            child: const Icon(Icons.translate_rounded, color: kBrutalBlack),
+          ),
+          const SizedBox(width: 14),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'PHRASE COACH',
+                  style: GoogleFonts.almarai(
+                    color: kBrutalWhite,
+                    fontSize: 11,
+                    fontWeight: FontWeight.w900,
+                    letterSpacing: 1.4,
+                  ),
+                ),
+                Text(
+                  'BREAK IT DOWN',
+                  style: GoogleFonts.almarai(
+                    color: kBrutalWhite,
+                    fontSize: 22,
+                    fontWeight: FontWeight.w900,
+                    height: 1.05,
+                  ),
+                ),
+                if (profile != null)
+                  Padding(
+                    padding: const EdgeInsets.only(top: 4),
+                    child: Text(
+                      '${profile!.targetLang.toUpperCase()} · ${profile!.level}',
+                      style: GoogleFonts.almarai(
+                        color: kBrutalWhite,
+                        fontSize: 12,
+                        fontWeight: FontWeight.w800,
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          ),
         ],
       ),
     );
@@ -305,12 +354,20 @@ class _InputPanel extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.all(20),
-      decoration: BoxDecoration(color: _phraseFill, borderRadius: BorderRadius.circular(24)),
+      padding: const EdgeInsets.all(18),
+      decoration: brutalCard(),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          Text('Phrase or word', style: GoogleFonts.almarai(color: kPrimary, fontSize: 13, fontWeight: FontWeight.w900)),
+          Text(
+            'PHRASE OR WORD',
+            style: GoogleFonts.almarai(
+              color: kBrutalTeal,
+              fontSize: 11,
+              fontWeight: FontWeight.w900,
+              letterSpacing: 1.2,
+            ),
+          ),
           const SizedBox(height: 10),
           LevelPicker(value: level, onChanged: onLevelChange),
           const SizedBox(height: 12),
@@ -326,25 +383,18 @@ class _InputPanel extends StatelessWidget {
             child: FilledButton.icon(
               onPressed: loading ? null : onAnalyze,
               icon: const Icon(Icons.auto_awesome_rounded),
-              label: Text(loading ? 'Analyzing...' : 'Analyze'),
+              label: Text(loading ? 'ANALYZING…' : 'ANALYZE'),
             ),
           ),
           if (error != null) ...[
             const SizedBox(height: 10),
-            Text(error!, style: GoogleFonts.almarai(color: kDangerShadow, fontSize: 13, fontWeight: FontWeight.w900)),
+            Text(error!, style: GoogleFonts.almarai(color: kBrutalRed, fontSize: 13, fontWeight: FontWeight.w900)),
           ],
           const SizedBox(height: 16),
           Wrap(
             spacing: 8,
             runSpacing: 8,
-            children: _examples
-                .map(
-                  (example) => ActionChip(
-                    label: Text(example),
-                    onPressed: loading ? null : () => onExample(example),
-                  ),
-                )
-                .toList(),
+            children: _examples.map((example) => _BrutalChip(label: example, onTap: loading ? null : () => onExample(example))).toList(),
           ),
         ],
       ),
@@ -352,6 +402,31 @@ class _InputPanel extends StatelessWidget {
   }
 }
 
+class _BrutalChip extends StatelessWidget {
+  const _BrutalChip({required this.label, required this.onTap});
+  final String label;
+  final VoidCallback? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
+        decoration: BoxDecoration(
+          color: kBrutalWhite,
+          borderRadius: BorderRadius.circular(999),
+          border: Border.all(color: kBrutalBlack, width: 2),
+        ),
+        child: Text(
+          label,
+          style: GoogleFonts.almarai(color: kBrutalBlack, fontSize: 12, fontWeight: FontWeight.w900),
+        ),
+      ),
+    );
+  }
+}
+
 class _EmptyState extends StatelessWidget {
   const _EmptyState({this.isPending = false});
   final bool isPending;
@@ -359,29 +434,29 @@ class _EmptyState extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.all(28),
-      decoration: duoCardDecoration(),
+      padding: const EdgeInsets.all(24),
+      decoration: brutalCard(),
       child: Column(
         children: [
           Container(
-            width: 62,
-            height: 62,
+            width: 60,
+            height: 60,
             decoration: BoxDecoration(
               color: kBrutalYellow,
-              borderRadius: BorderRadius.circular(16),
+              borderRadius: BorderRadius.circular(kBrutalRadius),
               border: Border.all(color: kBrutalBlack, width: 2),
               boxShadow: const [
                 BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0),
               ],
             ),
-            child: const Icon(Icons.edit_note_rounded, color: kBrutalBlack, size: 34),
+            child: const Icon(Icons.edit_note_rounded, color: kBrutalBlack, size: 30),
           ),
-          const SizedBox(height: 20),
+          const SizedBox(height: 18),
           if (isPending) ...[
             Text(
-              'Building your mini lesson...',
+              'BUILDING YOUR MINI LESSON…',
               textAlign: TextAlign.center,
-              style: GoogleFonts.almarai(color: kForeground, fontSize: 18, fontWeight: FontWeight.w900),
+              style: GoogleFonts.almarai(color: kBrutalSlate, fontSize: 13, fontWeight: FontWeight.w900, letterSpacing: 1.0),
             ),
             const SizedBox(height: 14),
             const _BrutalProgressBar(),
@@ -389,7 +464,7 @@ class _EmptyState extends StatelessWidget {
             Text(
               'Enter a phrase to build a mini lesson',
               textAlign: TextAlign.center,
-              style: GoogleFonts.almarai(color: kForeground, fontSize: 20, fontWeight: FontWeight.w900),
+              style: GoogleFonts.almarai(color: kBrutalSlate, fontSize: 18, fontWeight: FontWeight.w900),
             ),
         ],
       ),
@@ -449,7 +524,7 @@ class _BrutalProgressBarState extends State<_BrutalProgressBar> with SingleTicke
                       top: 0,
                       bottom: 0,
                       width: segmentWidth,
-                      child: Container(color: const Color(0xFF0EA5A4)),
+                      child: Container(color: kBrutalTeal),
                     ),
                   ],
                 );
@@ -474,8 +549,8 @@ class _PhraseResult extends StatelessWidget {
       children: [
         Container(
           width: double.infinity,
-          padding: const EdgeInsets.all(22),
-          decoration: BoxDecoration(color: _phraseFill, borderRadius: BorderRadius.circular(24)),
+          padding: const EdgeInsets.all(20),
+          decoration: brutalCard(color: kBrutalYellow, offset: 5),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
@@ -483,8 +558,13 @@ class _PhraseResult extends StatelessWidget {
                 children: [
                   Expanded(
                     child: Text(
-                      analysis.partOfSpeech,
-                      style: GoogleFonts.almarai(color: kPrimary, fontSize: 13, fontWeight: FontWeight.w900),
+                      analysis.partOfSpeech.toUpperCase(),
+                      style: GoogleFonts.almarai(
+                        color: kBrutalBlack,
+                        fontSize: 11,
+                        fontWeight: FontWeight.w900,
+                        letterSpacing: 1.2,
+                      ),
                     ),
                   ),
                   TtsButton(text: analysis.input, lang: lang, size: 40),
@@ -500,7 +580,7 @@ class _PhraseResult extends StatelessWidget {
               const SizedBox(height: 10),
               Text(
                 analysis.translation,
-                style: GoogleFonts.almarai(color: kMuted, fontSize: 17, fontWeight: FontWeight.w800, height: 1.3),
+                style: GoogleFonts.almarai(color: kBrutalSlate, fontSize: 16, fontWeight: FontWeight.w800, height: 1.3),
               ),
             ],
           ),
@@ -543,8 +623,8 @@ class _SentenceCard extends StatelessWidget {
       padding: const EdgeInsets.only(bottom: 12),
       child: Container(
         width: double.infinity,
-        padding: const EdgeInsets.all(18),
-        decoration: BoxDecoration(color: _phraseFill, borderRadius: BorderRadius.circular(22)),
+        padding: const EdgeInsets.all(16),
+        decoration: brutalCard(),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
@@ -564,10 +644,10 @@ class _SentenceCard extends StatelessWidget {
               ],
             ),
             const SizedBox(height: 8),
-            Text(sentence.translation, style: GoogleFonts.almarai(color: kMuted, fontSize: 13, fontWeight: FontWeight.w800)),
+            Text(sentence.translation, style: GoogleFonts.almarai(color: kBrutalMuted, fontSize: 13, fontWeight: FontWeight.w800)),
             if (sentence.note.isNotEmpty) ...[
               const SizedBox(height: 8),
-              Text(sentence.note, style: GoogleFonts.almarai(color: kPrimary, fontSize: 13, fontWeight: FontWeight.w900)),
+              Text(sentence.note, style: GoogleFonts.almarai(color: kBrutalTeal, fontSize: 13, fontWeight: FontWeight.w900)),
             ],
           ],
         ),
@@ -635,19 +715,12 @@ class _KanjiCard extends StatelessWidget {
           const SizedBox(height: 14),
           _readingRow(label: 'On', fill: kBrutalYellow, labelColor: kBrutalBlack, readings: kanji.onyomi),
           const SizedBox(height: 8),
-          _readingRow(label: 'Kun', fill: const Color(0xFF0EA5A4), labelColor: kBrutalWhite, readings: kanji.kunyomi),
+          _readingRow(label: 'Kun', fill: kBrutalTeal, labelColor: kBrutalWhite, readings: kanji.kunyomi),
           if (kanji.exampleWord.isNotEmpty) ...[
             const SizedBox(height: 14),
             Container(
               padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
-              decoration: BoxDecoration(
-                color: _kanjiExampleFill,
-                borderRadius: BorderRadius.circular(10),
-                border: Border.all(color: kBrutalBlack, width: 2),
-                boxShadow: const [
-                  BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0),
-                ],
-              ),
+              decoration: brutalCard(color: kBrutalCream, offset: 3),
               child: FuriText(
                 text: kanji.exampleWord,
                 segments: kanji.exampleWordReading.isNotEmpty
@@ -672,7 +745,7 @@ class _KanjiCard extends StatelessWidget {
           padding: const EdgeInsets.symmetric(vertical: 4),
           decoration: BoxDecoration(
             color: fill,
-            borderRadius: BorderRadius.circular(6),
+            borderRadius: BorderRadius.circular(kBrutalRadius),
             border: Border.all(color: kBrutalBlack, width: 2),
             boxShadow: const [
               BoxShadow(color: kBrutalBlack, offset: Offset(2, 2), blurRadius: 0),
@@ -734,7 +807,7 @@ class _RelatedWordCard extends StatelessWidget {
                       margin: const EdgeInsets.only(bottom: 6),
                       decoration: BoxDecoration(
                         color: kBrutalYellow,
-                        borderRadius: BorderRadius.circular(6),
+                        borderRadius: BorderRadius.circular(kBrutalRadius),
                         border: Border.all(color: kBrutalBlack, width: 1.5),
                         boxShadow: const [
                           BoxShadow(color: kBrutalBlack, offset: Offset(1, 1), blurRadius: 0),
@@ -756,10 +829,10 @@ class _RelatedWordCard extends StatelessWidget {
             ],
           ),
           const SizedBox(height: 12),
-          Text(word.translation, style: GoogleFonts.almarai(color: const Color(0xFF374151), fontSize: 15, fontWeight: FontWeight.w800)),
+          Text(word.translation, style: GoogleFonts.almarai(color: kBrutalSlate, fontSize: 15, fontWeight: FontWeight.w800)),
           if (word.note.isNotEmpty) ...[
             const SizedBox(height: 8),
-            Text(word.note, style: GoogleFonts.almarai(color: const Color(0xFF6B7280), fontSize: 13, fontWeight: FontWeight.w900)),
+            Text(word.note, style: GoogleFonts.almarai(color: kBrutalMuted, fontSize: 13, fontWeight: FontWeight.w900)),
           ],
         ],
       ),
@@ -822,7 +895,7 @@ class _BreakdownSection extends StatelessWidget {
             child: Container(
               width: double.infinity,
               padding: const EdgeInsets.all(18),
-              decoration: duoCardDecoration(),
+              decoration: brutalCard(),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
@@ -858,14 +931,22 @@ class _TipsSection extends StatelessWidget {
           Container(
             width: double.infinity,
             margin: const EdgeInsets.only(bottom: 12),
-            padding: const EdgeInsets.all(18),
-            decoration: BoxDecoration(color: _warningFill, borderRadius: BorderRadius.circular(22)),
+            padding: const EdgeInsets.all(16),
+            decoration: brutalCard(color: kBrutalYellow),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                Text('Verb info', style: GoogleFonts.almarai(color: Color(0xFF92400E), fontSize: 13, fontWeight: FontWeight.w900)),
+                Text(
+                  'VERB INFO',
+                  style: GoogleFonts.almarai(
+                    color: kBrutalBlack,
+                    fontSize: 11,
+                    fontWeight: FontWeight.w900,
+                    letterSpacing: 1.2,
+                  ),
+                ),
                 const SizedBox(height: 6),
-                Text(verbInfo, style: GoogleFonts.almarai(color: kForeground, fontSize: 13, fontWeight: FontWeight.w800, height: 1.35)),
+                Text(verbInfo, style: GoogleFonts.almarai(color: kBrutalSlate, fontSize: 13, fontWeight: FontWeight.w800, height: 1.35)),
               ],
             ),
           ),
@@ -875,7 +956,7 @@ class _TipsSection extends StatelessWidget {
             child: Container(
               width: double.infinity,
               padding: const EdgeInsets.all(18),
-              decoration: duoCardDecoration(),
+              decoration: brutalCard(),
               child: Text(tip, style: GoogleFonts.almarai(color: kMuted, fontSize: 13, fontWeight: FontWeight.w800, height: 1.35)),
             ),
           ),
@@ -894,12 +975,17 @@ class _SectionHeader extends StatelessWidget {
   Widget build(BuildContext context) {
     return Row(
       children: [
-        Icon(icon, color: kPrimary, size: 24),
-        const SizedBox(width: 10),
+        Icon(icon, color: kBrutalSlate, size: 22),
+        const SizedBox(width: 8),
         Expanded(
           child: Text(
-            title,
-            style: GoogleFonts.almarai(color: kForeground, fontSize: 24, fontWeight: FontWeight.w900),
+            title.toUpperCase(),
+            style: GoogleFonts.almarai(
+              color: kBrutalSlate,
+              fontSize: 14,
+              fontWeight: FontWeight.w900,
+              letterSpacing: 1.2,
+            ),
           ),
         ),
       ],

mobile/lib/features/practice/dialogue_screen.dart

@@ -78,45 +78,6 @@ class DialogueFull {
       );
 }
 
-class DialogueScreen extends StatelessWidget {
-  const DialogueScreen({super.key, required this.dialogueId});
-  final String dialogueId;
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(title: const Text('Dialogue')),
-      body: Center(
-        child: Padding(
-          padding: const EdgeInsets.all(24),
-          child: Container(
-            padding: const EdgeInsets.all(24),
-            decoration: duoCardDecoration(),
-            child: Column(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                Text(
-                  'Dialogue no longer available',
-                  textAlign: TextAlign.center,
-                  style: GoogleFonts.almarai(color: kForeground, fontSize: 20, fontWeight: FontWeight.w900),
-                ),
-                const SizedBox(height: 8),
-                Text(
-                  'Generated dialogues are temporary and are not stored after you leave the practice screen.',
-                  textAlign: TextAlign.center,
-                  style: GoogleFonts.almarai(color: kMuted, fontSize: 13, fontWeight: FontWeight.w800, height: 1.35),
-                ),
-                const SizedBox(height: 18),
-                OutlinedButton(onPressed: () => Navigator.of(context).maybePop(), child: const Text('Back')),
-              ],
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
 class DialogueLessonView extends StatefulWidget {
   const DialogueLessonView({super.key, required this.dialogue, required this.lang, this.onMoreDialogues});
   final DialogueFull dialogue;
@@ -193,15 +154,15 @@ class _DialogueLessonViewState extends State<DialogueLessonView> {
       children: [
         Container(
           padding: const EdgeInsets.all(20),
-          decoration: duoCardDecoration(),
+          decoration: brutalCard(),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              _Eyebrow('SCENARIO', color: kSecondary),
+              _Eyebrow('SCENARIO', color: kBrutalTeal),
               const SizedBox(height: 8),
               Text(
                 widget.dialogue.scenario,
-                style: GoogleFonts.almarai(color: kForeground, fontSize: 20, fontWeight: FontWeight.w900, height: 1.35),
+                style: GoogleFonts.almarai(color: kBrutalSlate, fontSize: 20, fontWeight: FontWeight.w900, height: 1.35),
               ),
               const SizedBox(height: 18),
               Wrap(
@@ -220,7 +181,7 @@ class _DialogueLessonViewState extends State<DialogueLessonView> {
         FilledButton.icon(
           onPressed: () => setState(() => _started = true),
           icon: const Icon(Icons.play_arrow_rounded),
-          label: const Text('Start dialogue'),
+          label: const Text('START DIALOGUE'),
         ),
       ],
     );
@@ -234,22 +195,32 @@ class _DialogueLessonViewState extends State<DialogueLessonView> {
       children: [
         Container(
           padding: const EdgeInsets.all(28),
-          decoration: duoCardDecoration(),
+          decoration: brutalCard(),
           child: Column(
             children: [
               Container(
                 width: 78,
                 height: 78,
-                decoration: BoxDecoration(color: const Color(0xFFFEF3C7), borderRadius: BorderRadius.circular(24)),
-                child: const Icon(Icons.emoji_events_rounded, color: Color(0xFF92400E), size: 44),
+                decoration: BoxDecoration(
+                  color: kBrutalYellow,
+                  borderRadius: BorderRadius.circular(kBrutalRadius),
+                  border: Border.all(color: kBrutalBlack, width: 2),
+                  boxShadow: const [
+                    BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0),
+                  ],
+                ),
+                child: const Icon(Icons.emoji_events_rounded, color: kBrutalBlack, size: 44),
               ),
               const SizedBox(height: 18),
-              Text('$pct%', style: GoogleFonts.almarai(color: kPrimary, fontSize: 48, fontWeight: FontWeight.w900)),
-              Text('$_score of $_totalChoices correct', style: GoogleFonts.almarai(color: kMuted, fontWeight: FontWeight.w900)),
+              Text('$pct%', style: GoogleFonts.almarai(color: kBrutalTeal, fontSize: 48, fontWeight: FontWeight.w900)),
+              Text('$_score of $_totalChoices correct', style: GoogleFonts.almarai(color: kBrutalMuted, fontWeight: FontWeight.w900)),
               const SizedBox(height: 24),
-              FilledButton.icon(onPressed: _restart, icon: const Icon(Icons.refresh_rounded), label: const Text('Try again')),
+              FilledButton.icon(onPressed: _restart, icon: const Icon(Icons.refresh_rounded), label: const Text('TRY AGAIN')),
               const SizedBox(height: 12),
-              OutlinedButton(onPressed: widget.onMoreDialogues ?? () => Navigator.of(context).maybePop(), child: const Text('More dialogues')),
+              OutlinedButton(
+                onPressed: widget.onMoreDialogues ?? () => Navigator.of(context).maybePop(),
+                child: const Text('MORE DIALOGUES'),
+              ),
             ],
           ),
         ),
@@ -266,17 +237,17 @@ class _DialogueLessonViewState extends State<DialogueLessonView> {
           padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
           child: Container(
             padding: const EdgeInsets.all(12),
-            decoration: duoCardDecoration(),
+            decoration: brutalCard(),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 ClipRRect(
-                  borderRadius: BorderRadius.circular(99),
+                  borderRadius: BorderRadius.circular(kBrutalRadius),
                   child: LinearProgressIndicator(
                     value: progress,
                     minHeight: 12,
-                    backgroundColor: kBorder,
-                    color: kPrimary,
+                    backgroundColor: const Color(0xFFE5E5E5),
+                    color: kBrutalTeal,
                   ),
                 ),
                 const SizedBox(height: 8),
@@ -307,18 +278,18 @@ class _DialogueLessonViewState extends State<DialogueLessonView> {
       final isCurrent = idx == _turnIndex;
       return Container(
         padding: const EdgeInsets.all(16),
-        decoration: duoCardDecoration(color: kCardFeature),
+        decoration: brutalCard(color: kBrutalCream),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
             Text(
               turn.text,
               textAlign: TextAlign.center,
-              style: GoogleFonts.almarai(color: kMuted, fontSize: 14, fontWeight: FontWeight.w900, fontStyle: FontStyle.italic),
+              style: GoogleFonts.almarai(color: kBrutalSlate, fontSize: 14, fontWeight: FontWeight.w800, fontStyle: FontStyle.italic),
             ),
             if (isCurrent) ...[
               const SizedBox(height: 12),
-              FilledButton(onPressed: _advance, child: const Text('Continue')),
+              FilledButton(onPressed: _advance, child: const Text('CONTINUE')),
             ],
           ],
         ),
@@ -335,23 +306,26 @@ class _DialogueLessonViewState extends State<DialogueLessonView> {
             width: 54,
             height: 54,
             decoration: BoxDecoration(
-              color: const Color(0xFFEDE9FE),
-              borderRadius: BorderRadius.circular(18),
-              border: Border.all(color: kBorder, width: 2),
+              color: kBrutalBlue,
+              borderRadius: BorderRadius.circular(kBrutalRadius),
+              border: Border.all(color: kBrutalBlack, width: 2),
+              boxShadow: const [
+                BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0),
+              ],
             ),
             child: Center(
-              child: Text(initial, style: GoogleFonts.almarai(color: kSecondary, fontWeight: FontWeight.w900, fontSize: 22)),
+              child: Text(initial, style: GoogleFonts.almarai(color: kBrutalWhite, fontWeight: FontWeight.w900, fontSize: 22)),
             ),
           ),
           const SizedBox(width: 10),
           Expanded(
             child: Container(
               padding: const EdgeInsets.all(16),
-              decoration: duoCardDecoration(),
+              decoration: brutalCard(),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  if (turn.speakerName != null) _Eyebrow(turn.speakerName!.toUpperCase(), color: kSecondary),
+                  if (turn.speakerName != null) _Eyebrow(turn.speakerName!.toUpperCase(), color: kBrutalBlue),
                   if (turn.speakerName != null) const SizedBox(height: 8),
                   Row(
                     crossAxisAlignment: CrossAxisAlignment.start,
@@ -370,16 +344,16 @@ class _DialogueLessonViewState extends State<DialogueLessonView> {
                   ),
                   if (turn.translation != null) ...[
                     const SizedBox(height: 12),
-                    InkWell(
+                    GestureDetector(
                       onTap: () => setState(() => _showTranslation[idx] = !(_showTranslation[idx] ?? false)),
                       child: Row(
                         mainAxisSize: MainAxisSize.min,
                         children: [
-                          Icon((_showTranslation[idx] ?? false) ? Icons.visibility_off : Icons.visibility, color: kSecondary, size: 16),
+                          Icon((_showTranslation[idx] ?? false) ? Icons.visibility_off : Icons.visibility, color: kBrutalBlue, size: 16),
                           const SizedBox(width: 6),
                           Text(
                             (_showTranslation[idx] ?? false) ? turn.translation! : 'Show translation',
-                            style: GoogleFonts.almarai(color: kSecondary, fontWeight: FontWeight.w900, fontSize: 13),
+                            style: GoogleFonts.almarai(color: kBrutalBlue, fontWeight: FontWeight.w900, fontSize: 13),
                           ),
                         ],
                       ),
@@ -387,7 +361,7 @@ class _DialogueLessonViewState extends State<DialogueLessonView> {
                   ],
                   if (isCurrent && !_chosen.containsKey(idx)) ...[
                     const SizedBox(height: 14),
-                    FilledButton(onPressed: _advance, child: const Text('Continue')),
+                    FilledButton(onPressed: _advance, child: const Text('CONTINUE')),
                   ],
                 ],
               ),
@@ -400,13 +374,13 @@ class _DialogueLessonViewState extends State<DialogueLessonView> {
     if (turn.type == 'user_choice') {
       return Container(
         padding: const EdgeInsets.all(16),
-        decoration: duoCardDecoration(),
+        decoration: brutalCard(),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             Text(
               turn.text.isNotEmpty ? turn.text : 'What do you say?',
-              style: GoogleFonts.almarai(color: kForeground, fontSize: 18, fontWeight: FontWeight.w900),
+              style: GoogleFonts.almarai(color: kBrutalSlate, fontSize: 18, fontWeight: FontWeight.w900),
             ),
             const SizedBox(height: 12),
             ...List.generate(turn.options?.length ?? 0, (optionIndex) {
@@ -414,37 +388,34 @@ class _DialogueLessonViewState extends State<DialogueLessonView> {
               final made = _chosen[idx];
               final isChosen = made == optionIndex;
               final isCorrect = option.isCorrect;
-              Color borderColor = kBorder;
-              Color bg = kCard;
-              Color textColor = kForeground;
+              Color borderColor = kBrutalBlack;
+              Color bg = kBrutalWhite;
+              Color textColor = kBrutalSlate;
 
               if (made != null) {
                 if (isCorrect) {
-                  borderColor = kPrimary;
-                  bg = const Color(0xFFCCFBF1);
-                  textColor = kPrimaryShadow;
+                  bg = kBrutalGreen;
+                  textColor = kBrutalWhite;
                 } else if (isChosen) {
-                  borderColor = kDanger;
-                  bg = const Color(0xFFFFE4E6);
-                  textColor = kDangerShadow;
+                  bg = kBrutalRed;
+                  textColor = kBrutalWhite;
                 } else {
-                  textColor = const Color(0xFFAFAFAF);
+                  textColor = kBrutalMuted;
                 }
               }
 
               return Padding(
                 padding: const EdgeInsets.only(bottom: 10),
-                child: InkWell(
-                  borderRadius: BorderRadius.circular(18),
+                child: GestureDetector(
                   onTap: made == null ? () => _handleChoice(idx, optionIndex) : null,
                   child: Container(
                     width: double.infinity,
                     padding: const EdgeInsets.all(14),
                     decoration: BoxDecoration(
                       color: bg,
-                      borderRadius: BorderRadius.circular(18),
+                      borderRadius: BorderRadius.circular(kBrutalRadius),
                       border: Border.all(color: borderColor, width: 2),
-                      boxShadow: const [BoxShadow(color: kBorder, offset: Offset(0, 4), blurRadius: 0)],
+                      boxShadow: const [BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0)],
                     ),
                     child: Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
@@ -484,17 +455,17 @@ class _Chip extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 7),
       decoration: BoxDecoration(
-        color: kCard,
+        color: kBrutalWhite,
         borderRadius: BorderRadius.circular(99),
-        border: Border.all(color: kBorder, width: 2),
+        border: Border.all(color: kBrutalBlack, width: 2),
       ),
-      child: Text(label, style: GoogleFonts.almarai(color: kMuted, fontSize: 12, fontWeight: FontWeight.w900)),
+      child: Text(label, style: GoogleFonts.almarai(color: kBrutalSlate, fontSize: 12, fontWeight: FontWeight.w900)),
     );
   }
 }
 
 class _Eyebrow extends StatelessWidget {
-  const _Eyebrow(this.text, {this.color = kMuted});
+  const _Eyebrow(this.text, {this.color = kBrutalMuted});
   final String text;
   final Color color;
 
@@ -502,9 +473,7 @@ class _Eyebrow extends StatelessWidget {
   Widget build(BuildContext context) {
     return Text(
       text,
-      style: GoogleFonts.almarai(color: color, fontSize: 11, fontWeight: FontWeight.w900, letterSpacing: 0),
+      style: GoogleFonts.almarai(color: color, fontSize: 11, fontWeight: FontWeight.w900, letterSpacing: 1.2),
     );
   }
 }
-
-

mobile/lib/features/practice/dialogues_list_screen.dart

@@ -8,8 +8,6 @@ import '../../core/languages.dart';
 import '../../theme/app_theme.dart';
 import 'dialogue_screen.dart';
 
-const _scenarioFill = Color(0xFFE8F7F6);
-
 class _Scenario {
   const _Scenario({
     required this.title,
@@ -157,32 +155,16 @@ class _DialoguesListScreenState extends ConsumerState<DialoguesListScreen> {
     }
 
     return Scaffold(
-      appBar: AppBar(
-        toolbarHeight: 72,
-        title: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            const Text('Tiny Lesson'),
-            if (profile != null)
-              Text(
-                '${languageName(profile.targetLang)} / ${profile.level}',
-                style: GoogleFonts.almarai(color: kMuted, fontSize: 12, fontWeight: FontWeight.w900),
-              ),
-          ],
-        ),
-      ),
       body: SafeArea(
         child: Center(
           child: ConstrainedBox(
             constraints: const BoxConstraints(maxWidth: 980),
             child: ListView(
-              padding: const EdgeInsets.fromLTRB(16, 20, 16, 28),
+              padding: const EdgeInsets.fromLTRB(16, 18, 16, 28),
               children: [
-                _PracticeHeader(),
-                const SizedBox(height: 28),
-                _ModePills(),
-                const SizedBox(height: 34),
-                _SectionTitle(icon: Icons.dashboard_customize_rounded, title: 'Scenario Library'),
+                _Banner(profile: profile),
+                const SizedBox(height: 22),
+                _SectionTitle(icon: Icons.dashboard_customize_rounded, title: 'SCENARIO LIBRARY'),
                 const SizedBox(height: 14),
                 _ScenarioGrid(
                   busyKey: _busyKey,
@@ -194,8 +176,6 @@ class _DialoguesListScreenState extends ConsumerState<DialoguesListScreen> {
                   loading: _busyKey == 'custom',
                   onGenerate: _generateCustom,
                 ),
-                const SizedBox(height: 18),
-                const _NoHistoryNotice(),
               ],
             ),
           ),
@@ -205,64 +185,76 @@ class _DialoguesListScreenState extends ConsumerState<DialoguesListScreen> {
   }
 }
 
-class _PracticeHeader extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return RichText(
-      text: TextSpan(
-        style: GoogleFonts.almarai(
-          color: kForeground,
-          fontSize: 34,
-          fontWeight: FontWeight.w900,
-          height: 0.98,
-          letterSpacing: 0,
-        ),
-        children: const [
-          TextSpan(text: 'Practice '),
-          TextSpan(text: 'real dialogue', style: TextStyle(color: kPrimary)),
-          TextSpan(text: ' for everyday situations'),
-        ],
-      ),
-    );
-  }
-}
-
-class _ModePills extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return Wrap(
-      spacing: 10,
-      runSpacing: 10,
-      children: const [
-        _ModePill(label: 'Scenarios', active: true),
-        _ModePill(label: 'Camera'),
-        _ModePill(label: 'Phrases'),
-      ],
-    );
-  }
-}
-
-class _ModePill extends StatelessWidget {
-  const _ModePill({required this.label, this.active = false});
-  final String label;
-  final bool active;
+class _Banner extends StatelessWidget {
+  const _Banner({required this.profile});
+  final Profile? profile;
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 22, vertical: 12),
       decoration: BoxDecoration(
-        color: active ? _scenarioFill : Colors.transparent,
-        borderRadius: BorderRadius.circular(99),
+        color: kBrutalTeal,
+        borderRadius: BorderRadius.circular(kBrutalRadius),
+        border: Border.all(color: kBrutalBlack, width: 3),
+        boxShadow: const [
+          BoxShadow(color: kBrutalBlack, offset: Offset(5, 5), blurRadius: 0),
+        ],
       ),
-      child: Text(
-        label,
-        style: GoogleFonts.almarai(
-          color: active ? kForeground : kMuted,
-          fontSize: 13,
-          fontWeight: FontWeight.w900,
-          letterSpacing: 0,
-        ),
+      padding: const EdgeInsets.all(20),
+      child: Row(
+        children: [
+          Container(
+            width: 56,
+            height: 56,
+            decoration: BoxDecoration(
+              color: kBrutalWhite,
+              borderRadius: BorderRadius.circular(kBrutalRadius),
+              border: Border.all(color: kBrutalBlack, width: 2),
+              boxShadow: const [
+                BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0),
+              ],
+            ),
+            child: const Icon(Icons.chat_bubble_rounded, color: kBrutalBlack),
+          ),
+          const SizedBox(width: 14),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'PRACTICE',
+                  style: GoogleFonts.almarai(
+                    color: kBrutalWhite,
+                    fontSize: 11,
+                    fontWeight: FontWeight.w900,
+                    letterSpacing: 1.4,
+                  ),
+                ),
+                Text(
+                  'TINY LESSON',
+                  style: GoogleFonts.almarai(
+                    color: kBrutalWhite,
+                    fontSize: 22,
+                    fontWeight: FontWeight.w900,
+                    height: 1.05,
+                  ),
+                ),
+                if (profile != null)
+                  Padding(
+                    padding: const EdgeInsets.only(top: 4),
+                    child: Text(
+                      '${languageName(profile!.targetLang).toUpperCase()} · ${profile!.level}',
+                      style: GoogleFonts.almarai(
+                        color: kBrutalWhite,
+                        fontSize: 12,
+                        fontWeight: FontWeight.w800,
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          ),
+        ],
       ),
     );
   }
@@ -277,12 +269,17 @@ class _SectionTitle extends StatelessWidget {
   Widget build(BuildContext context) {
     return Row(
       children: [
-        Icon(icon, color: kPrimary, size: 26),
-        const SizedBox(width: 10),
+        Icon(icon, color: kBrutalSlate, size: 22),
+        const SizedBox(width: 8),
         Expanded(
           child: Text(
             title,
-            style: GoogleFonts.almarai(color: kForeground, fontSize: 26, fontWeight: FontWeight.w900),
+            style: GoogleFonts.almarai(
+              color: kBrutalSlate,
+              fontSize: 14,
+              fontWeight: FontWeight.w900,
+              letterSpacing: 1.2,
+            ),
           ),
         ),
       ],
@@ -306,7 +303,7 @@ class _ScenarioGrid extends StatelessWidget {
           itemCount: _scenarios.length,
           gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
             crossAxisCount: columns,
-            mainAxisExtent: 192,
+            mainAxisExtent: 188,
             crossAxisSpacing: 14,
             mainAxisSpacing: 14,
           ),
@@ -325,7 +322,7 @@ class _ScenarioGrid extends StatelessWidget {
   }
 }
 
-class _ScenarioCard extends StatelessWidget {
+class _ScenarioCard extends StatefulWidget {
   const _ScenarioCard({
     required this.scenario,
     required this.loading,
@@ -338,16 +335,34 @@ class _ScenarioCard extends StatelessWidget {
   final bool disabled;
   final VoidCallback onTap;
 
+  @override
+  State<_ScenarioCard> createState() => _ScenarioCardState();
+}
+
+class _ScenarioCardState extends State<_ScenarioCard> {
+  bool _pressed = false;
+
   @override
   Widget build(BuildContext context) {
-    return InkWell(
-      borderRadius: BorderRadius.circular(22),
-      onTap: disabled ? null : onTap,
-      child: Container(
-        padding: const EdgeInsets.all(18),
+    final disabled = widget.disabled;
+    final offset = _pressed && !disabled ? 0.0 : 4.0;
+
+    return GestureDetector(
+      onTapDown: disabled ? null : (_) => setState(() => _pressed = true),
+      onTapUp: disabled ? null : (_) => setState(() => _pressed = false),
+      onTapCancel: disabled ? null : () => setState(() => _pressed = false),
+      onTap: disabled ? null : widget.onTap,
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 80),
+        transform: Matrix4.translationValues(_pressed && !disabled ? 4 : 0, _pressed && !disabled ? 4 : 0, 0),
+        padding: const EdgeInsets.all(16),
         decoration: BoxDecoration(
-          color: _scenarioFill,
-          borderRadius: BorderRadius.circular(22),
+          color: kBrutalWhite,
+          borderRadius: BorderRadius.circular(kBrutalRadius),
+          border: Border.all(color: kBrutalBlack, width: 2),
+          boxShadow: [
+            BoxShadow(color: kBrutalBlack, offset: Offset(offset, offset), blurRadius: 0),
+          ],
         ),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
@@ -355,34 +370,46 @@ class _ScenarioCard extends StatelessWidget {
             Row(
               children: [
                 Container(
-                  width: 46,
-                  height: 46,
-                  decoration: BoxDecoration(color: kCard, borderRadius: BorderRadius.circular(16)),
-                  child: Icon(scenario.icon, color: kPrimary),
+                  width: 44,
+                  height: 44,
+                  decoration: BoxDecoration(
+                    color: kBrutalYellow,
+                    borderRadius: BorderRadius.circular(kBrutalRadius),
+                    border: Border.all(color: kBrutalBlack, width: 2),
+                  ),
+                  child: Icon(widget.scenario.icon, color: kBrutalBlack, size: 22),
                 ),
                 const Spacer(),
-                Icon(Icons.arrow_forward_rounded, color: loading ? kMuted : kPrimary),
+                Icon(
+                  widget.loading ? Icons.hourglass_top_rounded : Icons.arrow_forward_rounded,
+                  color: widget.loading ? kBrutalMuted : kBrutalBlack,
+                ),
               ],
             ),
-            const SizedBox(height: 16),
+            const SizedBox(height: 14),
             Text(
-              scenario.title,
+              widget.scenario.title,
               maxLines: 1,
               overflow: TextOverflow.ellipsis,
-              style: GoogleFonts.almarai(color: kForeground, fontSize: 20, fontWeight: FontWeight.w900),
+              style: GoogleFonts.almarai(color: kBrutalSlate, fontSize: 18, fontWeight: FontWeight.w900),
             ),
-            const SizedBox(height: 8),
+            const SizedBox(height: 6),
             Expanded(
               child: Text(
-                scenario.description,
+                widget.scenario.description,
                 maxLines: 3,
                 overflow: TextOverflow.ellipsis,
-                style: GoogleFonts.almarai(color: kMuted, fontSize: 13, fontWeight: FontWeight.w800, height: 1.35),
+                style: GoogleFonts.almarai(color: kBrutalMuted, fontSize: 12, fontWeight: FontWeight.w800, height: 1.35),
               ),
             ),
             Text(
-              loading ? 'Generating new dialogue...' : 'Generate fresh dialogue',
-              style: GoogleFonts.almarai(color: kPrimary, fontSize: 12, fontWeight: FontWeight.w900),
+              widget.loading ? 'GENERATING…' : 'GENERATE DIALOGUE',
+              style: GoogleFonts.almarai(
+                color: widget.loading ? kBrutalMuted : kBrutalTeal,
+                fontSize: 11,
+                fontWeight: FontWeight.w900,
+                letterSpacing: 1.0,
+              ),
             ),
           ],
         ),
@@ -405,16 +432,24 @@ class _CustomTopicPanel extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.all(20),
-      decoration: duoCardDecoration(color: kCard),
+      padding: const EdgeInsets.all(18),
+      decoration: brutalCard(),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          Text('Build your own', style: GoogleFonts.almarai(color: kPrimary, fontSize: 13, fontWeight: FontWeight.w900)),
+          Text(
+            'BUILD YOUR OWN',
+            style: GoogleFonts.almarai(
+              color: kBrutalTeal,
+              fontSize: 11,
+              fontWeight: FontWeight.w900,
+              letterSpacing: 1.2,
+            ),
+          ),
           const SizedBox(height: 8),
           Text(
             'What do you want to practice?',
-            style: GoogleFonts.almarai(color: kForeground, fontSize: 24, fontWeight: FontWeight.w900, height: 1.1),
+            style: GoogleFonts.almarai(color: kBrutalSlate, fontSize: 22, fontWeight: FontWeight.w900, height: 1.1),
           ),
           const SizedBox(height: 12),
           TextField(
@@ -432,7 +467,7 @@ class _CustomTopicPanel extends StatelessWidget {
             child: FilledButton.icon(
               onPressed: loading ? null : onGenerate,
               icon: const Icon(Icons.arrow_forward_rounded),
-              label: Text(loading ? 'Generating...' : 'Generate dialogue'),
+              label: Text(loading ? 'GENERATING…' : 'GENERATE DIALOGUE'),
             ),
           ),
         ],
@@ -440,37 +475,3 @@ class _CustomTopicPanel extends StatelessWidget {
     );
   }
 }
-
-class _NoHistoryNotice extends StatelessWidget {
-  const _NoHistoryNotice();
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      padding: const EdgeInsets.all(22),
-      decoration: duoCardDecoration(),
-      child: Column(
-        children: [
-          Container(
-            width: 58,
-            height: 58,
-            decoration: BoxDecoration(color: _scenarioFill, borderRadius: BorderRadius.circular(18)),
-            child: const Icon(Icons.lock_clock_rounded, color: kPrimary, size: 30),
-          ),
-          const SizedBox(height: 14),
-          Text(
-            'No saved dialogue history',
-            textAlign: TextAlign.center,
-            style: GoogleFonts.almarai(color: kForeground, fontWeight: FontWeight.w900, fontSize: 18),
-          ),
-          const SizedBox(height: 6),
-          Text(
-            'Generated lessons are shown once and discarded when you leave this screen.',
-            textAlign: TextAlign.center,
-            style: GoogleFonts.almarai(color: kMuted, fontWeight: FontWeight.w800, fontSize: 13, height: 1.35),
-          ),
-        ],
-      ),
-    );
-  }
-}

mobile/lib/features/practice/stories_list_screen.dart

@@ -1,213 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:go_router/go_router.dart';
-import 'package:google_fonts/google_fonts.dart';
-
-import '../../core/api_client.dart';
-import '../../theme/app_theme.dart';
-
-final _storiesProvider = FutureProvider.autoDispose<List<StorySummary>>((ref) async {
-  final api = ref.watch(apiClientProvider);
-  final res = await api.dio.get<List<dynamic>>('/api/stories');
-  final list = res.data ?? [];
-  return list.map((e) => StorySummary.fromJson(e as Map<String, dynamic>)).toList();
-});
-
-class StorySummary {
-  StorySummary({required this.id, required this.title, this.read = false});
-  final String id;
-  final String title;
-  final bool read;
-
-  factory StorySummary.fromJson(Map<String, dynamic> j) => StorySummary(
-        id: (j['id'] ?? '') as String,
-        title: (j['title'] ?? '') as String,
-      );
-}
-
-class StoriesListScreen extends ConsumerWidget {
-  const StoriesListScreen({super.key});
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    return Scaffold(
-      appBar: AppBar(title: const Text('Stories')),
-      body: const StoriesTabContent(),
-    );
-  }
-}
-
-class StoriesTabContent extends ConsumerWidget {
-  const StoriesTabContent({super.key});
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final async = ref.watch(_storiesProvider);
-
-    return async.when(
-      loading: () => const Center(child: CircularProgressIndicator(color: kPrimary)),
-      error: (e, _) => Center(child: Text('Error: $e')),
-      data: (stories) => RefreshIndicator(
-        color: kPrimary,
-        onRefresh: () => ref.refresh(_storiesProvider.future),
-        child: Center(
-          child: ConstrainedBox(
-            constraints: const BoxConstraints(maxWidth: 760),
-            child: ListView(
-              padding: const EdgeInsets.all(16),
-              children: [
-                _GenerateStoryButton(onCreated: (id) {
-                  ref.invalidate(_storiesProvider);
-                  context.push('/practice/$id');
-                }),
-                const SizedBox(height: 18),
-                if (stories.isEmpty)
-                  const _EmptyStories()
-                else
-                  ...stories.map((story) => _StoryCard(story: story, onTap: () => context.push('/practice/${story.id}'))),
-              ],
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-class _StoryCard extends StatelessWidget {
-  const _StoryCard({required this.story, required this.onTap});
-  final StorySummary story;
-  final VoidCallback onTap;
-
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 14),
-      child: InkWell(
-        borderRadius: BorderRadius.circular(18),
-        onTap: onTap,
-        child: Container(
-          padding: const EdgeInsets.all(16),
-          decoration: duoCardDecoration(),
-          child: Row(
-            children: [
-              Container(
-                width: 48,
-                height: 48,
-                decoration: BoxDecoration(
-                  color: const Color(0xFFFEF3C7),
-                  borderRadius: BorderRadius.circular(16),
-                ),
-                child: const Icon(Icons.menu_book_rounded, color: Color(0xFF92400E)),
-              ),
-              const SizedBox(width: 14),
-              Expanded(
-                child: Text(
-                  story.title,
-                  maxLines: 2,
-                  overflow: TextOverflow.ellipsis,
-                  style: GoogleFonts.almarai(color: kForeground, fontWeight: FontWeight.w900, fontSize: 16),
-                ),
-              ),
-              const Icon(Icons.chevron_right_rounded, color: kMuted),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-class _EmptyStories extends StatelessWidget {
-  const _EmptyStories();
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      padding: const EdgeInsets.all(28),
-      decoration: duoCardDecoration(),
-      child: Column(
-        children: [
-          Container(
-            width: 58,
-            height: 58,
-            decoration: BoxDecoration(color: const Color(0xFFFEF3C7), borderRadius: BorderRadius.circular(18)),
-            child: const Icon(Icons.menu_book_rounded, color: Color(0xFF92400E), size: 30),
-          ),
-          const SizedBox(height: 14),
-          Text('No stories yet', style: GoogleFonts.almarai(color: kForeground, fontWeight: FontWeight.w900, fontSize: 18)),
-          const SizedBox(height: 4),
-          Text(
-            'Generate a bite-size reading lesson.',
-            textAlign: TextAlign.center,
-            style: GoogleFonts.almarai(color: kMuted, fontWeight: FontWeight.w800, fontSize: 13),
-          ),
-        ],
-      ),
-    );
-  }
-}
-
-class _GenerateStoryButton extends ConsumerStatefulWidget {
-  const _GenerateStoryButton({required this.onCreated});
-  final void Function(String id) onCreated;
-
-  @override
-  ConsumerState<_GenerateStoryButton> createState() => _GenerateStoryButtonState();
-}
-
-class _GenerateStoryButtonState extends ConsumerState<_GenerateStoryButton> {
-  bool _loading = false;
-
-  Future<void> _generate(BuildContext context) async {
-    final ctrl = TextEditingController();
-    final topic = await showDialog<String>(
-      context: context,
-      builder: (ctx) => AlertDialog(
-        title: const Text('New story'),
-        content: TextField(
-          controller: ctrl,
-          decoration: const InputDecoration(labelText: 'Topic', hintText: 'A rainy day'),
-        ),
-        actions: [
-          TextButton(onPressed: () => Navigator.pop(ctx), child: const Text('Cancel')),
-          FilledButton(onPressed: () => Navigator.pop(ctx, ctrl.text.trim()), child: const Text('Generate')),
-        ],
-      ),
-    );
-    ctrl.dispose();
-    if (topic == null) return;
-    setState(() => _loading = true);
-    try {
-      final api = ref.read(apiClientProvider);
-      final res = await api.dio.post<Map<String, dynamic>>(
-        '/api/stories',
-        data: {if (topic.isNotEmpty) 'topic': topic},
-      );
-      if ((res.statusCode == 200 || res.statusCode == 201) && res.data?['story'] != null) {
-        final id = (res.data!['story'] as Map<String, dynamic>)['id'] as String;
-        widget.onCreated(id);
-      }
-    } catch (e) {
-      if (context.mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Error: $e')));
-      }
-    } finally {
-      if (mounted) setState(() => _loading = false);
-    }
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return SizedBox(
-      width: double.infinity,
-      child: FilledButton.icon(
-        onPressed: _loading ? null : () => _generate(context),
-        icon: const Icon(Icons.auto_awesome_rounded),
-        label: Text(_loading ? 'Generating...' : 'New story'),
-      ),
-    );
-  }
-}
-
-

mobile/lib/features/practice/story_screen.dart

@@ -1,501 +0,0 @@
-import 'package:flutter/gestures.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:google_fonts/google_fonts.dart';
-
-import '../../auth/auth_provider.dart';
-import '../../core/api_client.dart';
-import '../../theme/app_theme.dart';
-import '../../widgets/tts_button.dart';
-
-class _StoryData {
-  _StoryData({
-    required this.title,
-    required this.content,
-    required this.targetLang,
-    required this.vocab,
-  });
-
-  final String title;
-  final String content;
-  final String targetLang;
-  final List<Map<String, String>> vocab;
-}
-
-final storyFuture = FutureProvider.family.autoDispose<_StoryData, String>((ref, id) async {
-  final api = ref.watch(apiClientProvider);
-  final res = await api.dio.get<Map<String, dynamic>>('/api/stories/$id');
-  final s = res.data!['story'] as Map<String, dynamic>;
-  final vocab = ((s['vocab'] as List?) ?? [])
-      .cast<Map<String, dynamic>>()
-      .map((v) => {'word': (v['word'] ?? '').toString(), 'gloss': (v['gloss'] ?? '').toString()})
-      .toList();
-  return _StoryData(
-    title: s['title'] as String,
-    content: s['content'] as String,
-    targetLang: s['targetLang'] as String,
-    vocab: vocab,
-  );
-});
-
-class StoryQuestion {
-  StoryQuestion({required this.question, required this.options, required this.correctIndex, required this.explanation});
-  final String question;
-  final List<String> options;
-  final int correctIndex;
-  final String explanation;
-
-  factory StoryQuestion.fromJson(Map<String, dynamic> j) => StoryQuestion(
-        question: (j['question'] ?? '').toString(),
-        options: ((j['options'] as List?) ?? []).map((o) => o.toString()).toList(),
-        correctIndex: (j['correctIndex'] is num) ? (j['correctIndex'] as num).toInt() : 0,
-        explanation: (j['explanation'] ?? '').toString(),
-      );
-}
-
-class StoryScreen extends ConsumerStatefulWidget {
-  const StoryScreen({super.key, required this.storyId});
-  final String storyId;
-
-  @override
-  ConsumerState<StoryScreen> createState() => _StoryScreenState();
-}
-
-class _StoryScreenState extends ConsumerState<StoryScreen> {
-  bool _readMarked = false;
-  bool _quizLoading = false;
-  String? _quizError;
-  List<StoryQuestion>? _questions;
-  final Map<int, int> _answers = {};
-
-  Future<void> _markRead() async {
-    if (_readMarked) return;
-    _readMarked = true;
-    try {
-      final api = ref.read(apiClientProvider);
-      await api.dio.post<Map<String, dynamic>>('/api/stories/${widget.storyId}/read');
-    } catch (_) {}
-  }
-
-  Future<void> _loadQuiz(String content) async {
-    setState(() {
-      _quizLoading = true;
-      _quizError = null;
-    });
-    try {
-      final api = ref.read(apiClientProvider);
-      final res = await api.dio.post<dynamic>(
-        '/api/stories/${widget.storyId}/questions',
-        data: {'content': content},
-      );
-      final data = res.data;
-      if ((res.statusCode ?? 500) >= 200 && (res.statusCode ?? 500) < 300 && data is List) {
-        final qs = data
-            .whereType<Map>()
-            .map((m) => StoryQuestion.fromJson(Map<String, dynamic>.from(m)))
-            .where((q) => q.question.isNotEmpty && q.options.length >= 2)
-            .toList();
-        if (mounted) setState(() => _questions = qs);
-      } else {
-        if (mounted) setState(() => _quizError = 'Could not load questions. Try again.');
-      }
-    } catch (_) {
-      if (mounted) setState(() => _quizError = 'Could not load questions. Try again.');
-    } finally {
-      if (mounted) setState(() => _quizLoading = false);
-    }
-  }
-
-  void _answer(int qIdx, int oIdx) {
-    if (_answers.containsKey(qIdx)) return;
-    setState(() => _answers[qIdx] = oIdx);
-  }
-
-  int? get _quizScore {
-    if (_questions == null) return null;
-    if (_answers.length != _questions!.length) return null;
-    var correct = 0;
-    for (var i = 0; i < _questions!.length; i++) {
-      if (_answers[i] == _questions![i].correctIndex) correct++;
-    }
-    return correct;
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final async = ref.watch(storyFuture(widget.storyId));
-    final profile = ref.watch(authControllerProvider).profile;
-
-    return Scaffold(
-      appBar: AppBar(title: const Text('Story')),
-      body: async.when(
-        loading: () => const Center(child: CircularProgressIndicator(color: kPrimary)),
-        error: (e, _) => Center(child: Text('Error: $e')),
-        data: (story) {
-          WidgetsBinding.instance.addPostFrameCallback((_) => _markRead());
-          return Center(
-            child: ConstrainedBox(
-              constraints: const BoxConstraints(maxWidth: 760),
-              child: ListView(
-                padding: const EdgeInsets.all(16),
-                children: [
-                  Container(
-                    decoration: duoCardDecoration(color: kWarning),
-                    padding: const EdgeInsets.all(20),
-                    child: Row(
-                      children: [
-                        Container(
-                          width: 52,
-                          height: 52,
-                          decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(18)),
-                          child: const Icon(Icons.menu_book_rounded, color: Color(0xFF92400E)),
-                        ),
-                        const SizedBox(width: 14),
-                        Expanded(
-                          child: Text(
-                            story.title,
-                            style: GoogleFonts.almarai(color: kForeground, fontSize: 26, fontWeight: FontWeight.w900, height: 1.1),
-                          ),
-                        ),
-                        const SizedBox(width: 8),
-                        TtsButton(text: story.content, lang: story.targetLang, size: 38),
-                      ],
-                    ),
-                  ),
-                  const SizedBox(height: 16),
-                  Container(
-                    padding: const EdgeInsets.all(20),
-                    decoration: duoCardDecoration(),
-                    child: _TappableText(
-                      text: story.content,
-                      fromLang: story.targetLang,
-                      toLang: profile?.nativeLang ?? 'en',
-                      preGlossed: {for (final v in story.vocab) v['word']!.toLowerCase(): v['gloss']!},
-                      ref: ref,
-                    ),
-                  ),
-                  if (story.vocab.isNotEmpty) ...[
-                    const SizedBox(height: 18),
-                    Container(
-                      padding: const EdgeInsets.all(18),
-                      decoration: duoCardDecoration(),
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          Text('Key vocabulary', style: GoogleFonts.almarai(color: kMuted, fontWeight: FontWeight.w900, fontSize: 12)),
-                          const SizedBox(height: 12),
-                          ...story.vocab.map(
-                            (v) => Container(
-                              margin: const EdgeInsets.only(bottom: 10),
-                              padding: const EdgeInsets.all(12),
-                              decoration: BoxDecoration(
-                                color: kCardFeature,
-                                borderRadius: BorderRadius.circular(16),
-                                border: Border.all(color: kBorder, width: 2),
-                              ),
-                              child: Row(
-                                children: [
-                                  Expanded(
-                                    child: Text(v['word'] ?? '', style: GoogleFonts.almarai(fontWeight: FontWeight.w900, color: kForeground)),
-                                  ),
-                                  const SizedBox(width: 10),
-                                  Flexible(
-                                    child: Text(
-                                      v['gloss'] ?? '',
-                                      textAlign: TextAlign.right,
-                                      style: GoogleFonts.almarai(fontWeight: FontWeight.w800, color: kMuted),
-                                    ),
-                                  ),
-                                ],
-                              ),
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
-                  ],
-                  const SizedBox(height: 18),
-                  _QuizSection(
-                    questions: _questions,
-                    loading: _quizLoading,
-                    error: _quizError,
-                    answers: _answers,
-                    score: _quizScore,
-                    onGenerate: () => _loadQuiz(story.content),
-                    onAnswer: _answer,
-                  ),
-                  const SizedBox(height: 24),
-                ],
-              ),
-            ),
-          );
-        },
-      ),
-    );
-  }
-}
-
-class _QuizSection extends StatelessWidget {
-  const _QuizSection({
-    required this.questions,
-    required this.loading,
-    required this.error,
-    required this.answers,
-    required this.score,
-    required this.onGenerate,
-    required this.onAnswer,
-  });
-
-  final List<StoryQuestion>? questions;
-  final bool loading;
-  final String? error;
-  final Map<int, int> answers;
-  final int? score;
-  final VoidCallback onGenerate;
-  final void Function(int qIdx, int oIdx) onAnswer;
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      padding: const EdgeInsets.all(18),
-      decoration: duoCardDecoration(),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Row(
-            children: [
-              Container(
-                width: 44,
-                height: 44,
-                decoration: BoxDecoration(color: const Color(0xFFEFF6FF), borderRadius: BorderRadius.circular(14)),
-                child: const Icon(Icons.menu_book_rounded, color: kSecondary, size: 22),
-              ),
-              const SizedBox(width: 12),
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text('Test yourself', style: GoogleFonts.almarai(color: kForeground, fontSize: 18, fontWeight: FontWeight.w900)),
-                    Text('Answer every question to finish the lesson.',
-                        style: GoogleFonts.almarai(color: kMuted, fontSize: 12, fontWeight: FontWeight.w800)),
-                  ],
-                ),
-              ),
-            ],
-          ),
-          const SizedBox(height: 16),
-          if (questions == null && !loading && error == null)
-            FilledButton(onPressed: onGenerate, child: const Text('Generate questions')),
-          if (loading)
-            Text('Generating questions...', style: GoogleFonts.almarai(color: kMuted, fontWeight: FontWeight.w800)),
-          if (error != null) ...[
-            Text(error!, style: GoogleFonts.almarai(color: kDanger, fontWeight: FontWeight.w900, fontSize: 13)),
-            const SizedBox(height: 8),
-            OutlinedButton(onPressed: onGenerate, child: const Text('Retry')),
-          ],
-          if (questions != null && questions!.isEmpty)
-            Text('No questions were generated for this story.',
-                style: GoogleFonts.almarai(color: kMuted, fontWeight: FontWeight.w800)),
-          if (questions != null && questions!.isNotEmpty) ...[
-            for (var qIdx = 0; qIdx < questions!.length; qIdx++) ...[
-              const SizedBox(height: 18),
-              Text('${qIdx + 1}. ${questions![qIdx].question}',
-                  style: GoogleFonts.almarai(color: kForeground, fontSize: 15, fontWeight: FontWeight.w900)),
-              const SizedBox(height: 10),
-              ...List.generate(questions![qIdx].options.length, (oIdx) {
-                final option = questions![qIdx].options[oIdx];
-                final made = answers.containsKey(qIdx);
-                final chosen = answers[qIdx] == oIdx;
-                final correct = oIdx == questions![qIdx].correctIndex;
-                Color bg = kCard;
-                Color border = kBorder;
-                Color textColor = kForeground;
-                if (made && correct) {
-                  bg = const Color(0xFFCCFBF1);
-                  border = const Color(0xFF0EA5A4);
-                  textColor = const Color(0xFF0B7C7B);
-                } else if (made && chosen && !correct) {
-                  bg = const Color(0xFFFFE4E6);
-                  border = kDanger;
-                  textColor = kDangerShadow;
-                } else if (made) {
-                  textColor = const Color(0xFFAFAFAF);
-                }
-                return Padding(
-                  padding: const EdgeInsets.only(bottom: 8),
-                  child: InkWell(
-                    borderRadius: BorderRadius.circular(14),
-                    onTap: made ? null : () => onAnswer(qIdx, oIdx),
-                    child: Container(
-                      width: double.infinity,
-                      padding: const EdgeInsets.all(14),
-                      decoration: BoxDecoration(
-                        color: bg,
-                        borderRadius: BorderRadius.circular(14),
-                        border: Border.all(color: border, width: 2),
-                      ),
-                      child: Text(option,
-                          style: GoogleFonts.almarai(color: textColor, fontSize: 14, fontWeight: FontWeight.w900)),
-                    ),
-                  ),
-                );
-              }),
-              if (answers.containsKey(qIdx))
-                Padding(
-                  padding: const EdgeInsets.only(top: 6),
-                  child: Text(questions![qIdx].explanation,
-                      style: GoogleFonts.almarai(color: kMuted, fontSize: 12, fontWeight: FontWeight.w800)),
-                ),
-            ],
-            if (score != null) ...[
-              const SizedBox(height: 18),
-              Container(
-                padding: const EdgeInsets.all(18),
-                decoration: BoxDecoration(
-                  color: const Color(0xFFCCFBF1),
-                  borderRadius: BorderRadius.circular(18),
-                  border: Border.all(color: const Color(0xFF0EA5A4), width: 2),
-                ),
-                child: Column(
-                  children: [
-                    const Icon(Icons.check_circle_rounded, color: Color(0xFF0B7C7B), size: 36),
-                    const SizedBox(height: 6),
-                    Text('$score / ${questions!.length}',
-                        style: GoogleFonts.almarai(color: const Color(0xFF0B7C7B), fontSize: 28, fontWeight: FontWeight.w900)),
-                    Text(score == questions!.length ? 'Perfect score!' : 'Keep reading to improve!',
-                        style: GoogleFonts.almarai(color: const Color(0xFF0B7C7B), fontWeight: FontWeight.w900, fontSize: 13)),
-                  ],
-                ),
-              ),
-            ],
-          ],
-        ],
-      ),
-    );
-  }
-}
-
-class _TappableText extends StatelessWidget {
-  const _TappableText({
-    required this.text,
-    required this.fromLang,
-    required this.toLang,
-    required this.preGlossed,
-    required this.ref,
-  });
-
-  final String text;
-  final String fromLang;
-  final String toLang;
-  final Map<String, String> preGlossed;
-  final WidgetRef ref;
-
-  @override
-  Widget build(BuildContext context) {
-    final re = RegExp(r"[\p{L}\p{M}][\p{L}\p{M}\p{N}\-']*", unicode: true);
-    final children = <InlineSpan>[];
-    var last = 0;
-
-    for (final match in re.allMatches(text)) {
-      if (match.start > last) {
-        children.add(TextSpan(text: text.substring(last, match.start)));
-      }
-      final word = match.group(0)!;
-      children.add(
-        TextSpan(
-          text: word,
-          style: const TextStyle(
-            decoration: TextDecoration.underline,
-            decorationColor: kPrimary,
-            decorationThickness: 2,
-          ),
-          recognizer: TapGestureRecognizer()..onTap = () => _showTranslation(context, word),
-        ),
-      );
-      last = match.end;
-    }
-    if (last < text.length) children.add(TextSpan(text: text.substring(last)));
-
-    return RichText(
-      text: TextSpan(
-        style: GoogleFonts.almarai(color: kForeground, fontSize: 18, fontWeight: FontWeight.w800, height: 1.6),
-        children: children,
-      ),
-    );
-  }
-
-  void _showTranslation(BuildContext context, String word) {
-    final clean = word.toLowerCase();
-    final preGloss = preGlossed[clean];
-    final api = ref.read(apiClientProvider);
-
-    showModalBottomSheet<void>(
-      context: context,
-      builder: (_) => _TranslationSheet(
-        word: word,
-        preGloss: preGloss,
-        load: () async {
-          if (preGloss != null) return preGloss;
-          try {
-            final res = await api.dio.post<Map<String, dynamic>>(
-              '/api/translate',
-              data: {'text': word, 'from': fromLang, 'to': toLang},
-            );
-            return res.statusCode == 200 ? (res.data?['translation'] ?? '-').toString() : '-';
-          } catch (_) {
-            return '-';
-          }
-        },
-      ),
-    );
-  }
-}
-
-class _TranslationSheet extends StatelessWidget {
-  const _TranslationSheet({
-    required this.word,
-    required this.preGloss,
-    required this.load,
-  });
-
-  final String word;
-  final String? preGloss;
-  final Future<String> Function() load;
-
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: EdgeInsets.fromLTRB(20, 20, 20, 20 + MediaQuery.of(context).padding.bottom),
-      child: FutureBuilder<String>(
-        future: load(),
-        initialData: preGloss,
-        builder: (context, snapshot) {
-          final loading = !snapshot.hasData;
-          return Column(
-            mainAxisSize: MainAxisSize.min,
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Text(word, style: GoogleFonts.almarai(color: kForeground, fontSize: 24, fontWeight: FontWeight.w900)),
-              const SizedBox(height: 10),
-              if (loading)
-                const Row(
-                  children: [
-                    SizedBox(width: 18, height: 18, child: CircularProgressIndicator(color: kPrimary, strokeWidth: 2)),
-                    SizedBox(width: 10),
-                    Text('Translating...'),
-                  ],
-                )
-              else
-                Text(
-                  snapshot.data ?? '-',
-                  style: GoogleFonts.almarai(color: kSecondary, fontSize: 18, fontWeight: FontWeight.w900),
-                ),
-            ],
-          );
-        },
-      ),
-    );
-  }
-}
-
-

mobile/lib/features/profile/profile_screen.dart

@@ -18,14 +18,6 @@ class _ProfileScreenState extends ConsumerState<ProfileScreen> {
   bool _savingLevel = false;
   bool _savingLangs = false;
 
-  @override
-  void initState() {
-    super.initState();
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      ref.read(authControllerProvider.notifier).pingStreak();
-    });
-  }
-
   Future<void> _changeLevel(String level) async {
     setState(() => _savingLevel = true);
     try {
@@ -57,17 +49,26 @@ class _ProfileScreenState extends ConsumerState<ProfileScreen> {
     if (available.isEmpty) return;
     final selected = await showModalBottomSheet<String>(
       context: context,
+      backgroundColor: kBrutalWhite,
       builder: (ctx) => SafeArea(
         child: ListView(
           shrinkWrap: true,
           children: [
             Padding(
               padding: const EdgeInsets.all(16),
-              child: Text('Add a language', style: GoogleFonts.almarai(color: kForeground, fontSize: 18, fontWeight: FontWeight.w900)),
+              child: Text(
+                'ADD A LANGUAGE',
+                style: GoogleFonts.almarai(
+                  color: kBrutalSlate,
+                  fontSize: 14,
+                  fontWeight: FontWeight.w900,
+                  letterSpacing: 1.2,
+                ),
+              ),
             ),
             ...available.map((lang) => ListTile(
                   leading: SizedBox(width: 26, child: CountryFlag.fromCountryCode(lang.flagCode)),
-                  title: Text(lang.name, style: GoogleFonts.almarai(color: kForeground, fontWeight: FontWeight.w900)),
+                  title: Text(lang.name, style: GoogleFonts.almarai(color: kBrutalBlack, fontWeight: FontWeight.w900)),
                   onTap: () => Navigator.of(ctx).pop(lang.code),
                 )),
           ],
@@ -79,6 +80,23 @@ class _ProfileScreenState extends ConsumerState<ProfileScreen> {
     }
   }
 
+  Future<void> _confirmSignOut() async {
+    final ok = await showDialog<bool>(
+      context: context,
+      builder: (ctx) => AlertDialog(
+        title: const Text('Sign out?'),
+        content: const Text('You will need to sign in with Hugging Face again next time.'),
+        actions: [
+          TextButton(onPressed: () => Navigator.pop(ctx, false), child: const Text('CANCEL')),
+          TextButton(onPressed: () => Navigator.pop(ctx, true), child: const Text('SIGN OUT')),
+        ],
+      ),
+    );
+    if (ok == true) {
+      await ref.read(authControllerProvider.notifier).signOut();
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final state = ref.watch(authControllerProvider);
@@ -87,236 +105,237 @@ class _ProfileScreenState extends ConsumerState<ProfileScreen> {
     final streak = state.streakCount;
 
     return Scaffold(
-      appBar: AppBar(title: const Text('Profile')),
-      body: Center(
-        child: ConstrainedBox(
-          constraints: const BoxConstraints(maxWidth: 760),
-          child: ListView(
-            padding: const EdgeInsets.all(16),
-            children: [
-              Container(
-                decoration: duoCardDecoration(color: kSecondary),
-                padding: const EdgeInsets.all(20),
-                child: Row(
-                  children: [
-                    CircleAvatar(
-                      radius: 36,
-                      backgroundColor: Colors.white,
-                      backgroundImage: user?.avatarUrl != null ? NetworkImage(user!.avatarUrl!) : null,
-                      child: user?.avatarUrl == null
-                          ? Text(
-                              user?.hfUsername.substring(0, 1).toUpperCase() ?? '?',
-                              style: GoogleFonts.almarai(fontSize: 24, fontWeight: FontWeight.w900, color: kSecondary),
-                            )
-                          : null,
-                    ),
-                    const SizedBox(width: 16),
-                    Expanded(
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
+      body: SafeArea(
+        child: Center(
+          child: ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 760),
+            child: ListView(
+              padding: const EdgeInsets.fromLTRB(16, 18, 16, 28),
+              children: [
+                _UserBanner(user: user),
+                const SizedBox(height: 16),
+                if (profile != null) ...[
+                  LayoutBuilder(
+                    builder: (context, constraints) {
+                      final twoColumns = constraints.maxWidth >= 620;
+                      return GridView.count(
+                        crossAxisCount: twoColumns ? 4 : 2,
+                        shrinkWrap: true,
+                        physics: const NeverScrollableScrollPhysics(),
+                        mainAxisSpacing: 12,
+                        crossAxisSpacing: 12,
+                        childAspectRatio: twoColumns ? 1.55 : 2.1,
                         children: [
-                          Text(
-                            user?.hfUsername ?? '-',
-                            maxLines: 1,
-                            overflow: TextOverflow.ellipsis,
-                            style: GoogleFonts.almarai(fontSize: 24, fontWeight: FontWeight.w900, color: Colors.white),
+                          _StatCard(
+                            icon: _flagWidget(profile.nativeLang),
+                            label: 'I SPEAK',
+                            value: languageName(profile.nativeLang),
+                            tone: kBrutalBlue,
                           ),
-                          Text(
-                            user?.email ?? 'no email',
-                            maxLines: 1,
-                            overflow: TextOverflow.ellipsis,
-                            style: GoogleFonts.almarai(color: Colors.white.withAlpha(215), fontSize: 13, fontWeight: FontWeight.w800),
+                          _StatCard(
+                            icon: _flagWidget(profile.targetLang),
+                            label: 'LEARNING',
+                            value: languageName(profile.targetLang),
+                            tone: kBrutalTeal,
+                          ),
+                          _StatCard(
+                            icon: const Icon(Icons.emoji_events_rounded, color: kBrutalBlack),
+                            label: 'LEVEL',
+                            value: profile.level,
+                            tone: kBrutalYellow,
+                          ),
+                          _StatCard(
+                            icon: const Icon(Icons.local_fire_department_rounded, color: kBrutalWhite),
+                            label: 'STREAK',
+                            value: '$streak ${streak == 1 ? 'day' : 'days'}',
+                            tone: kBrutalRed,
                           ),
                         ],
-                      ),
-                    ),
-                  ],
-                ),
-              ),
-              const SizedBox(height: 16),
-              if (profile != null) ...[
-                LayoutBuilder(
-                  builder: (context, constraints) {
-                    final twoColumns = constraints.maxWidth >= 620;
-                    return GridView.count(
-                      crossAxisCount: twoColumns ? 4 : 2,
-                      shrinkWrap: true,
-                      physics: const NeverScrollableScrollPhysics(),
-                      mainAxisSpacing: 12,
-                      crossAxisSpacing: 12,
-                      childAspectRatio: twoColumns ? 1.55 : 2.1,
+                      );
+                    },
+                  ),
+                  const SizedBox(height: 16),
+                  Container(
+                    padding: const EdgeInsets.all(18),
+                    decoration: brutalCard(),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
-                        _StatCard(
-                          icon: _flagWidget(profile.nativeLang, kSecondary),
-                          label: 'I speak',
-                          value: languageName(profile.nativeLang),
-                          tone: kSecondary,
-                        ),
-                        _StatCard(
-                          icon: _flagWidget(profile.targetLang, kPrimary),
-                          label: 'Learning',
-                          value: languageName(profile.targetLang),
-                          tone: kPrimary,
-                        ),
-                        _StatCard(
-                          icon: const Icon(Icons.emoji_events_rounded, color: kWarning),
-                          label: 'Level',
-                          value: profile.level,
-                          tone: kWarning,
-                        ),
-                        _StatCard(
-                          icon: const Icon(Icons.local_fire_department_rounded, color: Color(0xFFEF4444)),
-                          label: 'Streak',
-                          value: '$streak ${streak == 1 ? 'day' : 'days'}',
-                          tone: const Color(0xFFEF4444),
+                        Text(
+                          'LANGUAGES I AM LEARNING',
+                          style: GoogleFonts.almarai(
+                            color: kBrutalSlate,
+                            fontWeight: FontWeight.w900,
+                            fontSize: 13,
+                            letterSpacing: 1.2,
+                          ),
                         ),
-                      ],
-                    );
-                  },
-                ),
-                const SizedBox(height: 16),
-                Container(
-                  padding: const EdgeInsets.all(18),
-                  decoration: duoCardDecoration(),
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Text('Languages I am learning', style: GoogleFonts.almarai(color: kForeground, fontWeight: FontWeight.w900, fontSize: 18)),
-                      const SizedBox(height: 14),
-                      Wrap(
-                        spacing: 10,
-                        runSpacing: 10,
-                        children: [
-                          for (final lang in profile.targetLangs)
-                            Container(
-                              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
-                              decoration: BoxDecoration(
-                                color: kBrutalYellow,
-                                borderRadius: BorderRadius.circular(12),
-                                border: Border.all(color: kBrutalBlack, width: 2),
-                                boxShadow: const [BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0)],
-                              ),
-                              child: Row(
-                                mainAxisSize: MainAxisSize.min,
-                                children: [
-                                  SizedBox(
-                                    width: 22,
-                                    child: _flagWidget(lang, kSecondary),
-                                  ),
-                                  const SizedBox(width: 8),
-                                  Text(languageName(lang), style: GoogleFonts.almarai(color: kBrutalBlack, fontWeight: FontWeight.w900, fontSize: 13)),
-                                  if (profile.targetLangs.length > 1) ...[
-                                    const SizedBox(width: 6),
-                                    InkWell(
-                                      onTap: _savingLangs
-                                          ? null
-                                          : () => _updateLangs(profile.targetLangs.where((l) => l != lang).toList()),
-                                      borderRadius: BorderRadius.circular(8),
-                                      child: const Padding(
-                                        padding: EdgeInsets.all(2),
-                                        child: Icon(Icons.close_rounded, size: 16, color: kBrutalBlack),
-                                      ),
-                                    ),
-                                  ],
-                                ],
+                        const SizedBox(height: 14),
+                        Wrap(
+                          spacing: 10,
+                          runSpacing: 10,
+                          children: [
+                            for (var i = 0; i < profile.targetLangs.length; i++)
+                              _LangChip(
+                                code: profile.targetLangs[i],
+                                primary: i == 0,
+                                removable: profile.targetLangs.length > 1,
+                                onRemove: _savingLangs
+                                    ? null
+                                    : () => _updateLangs(profile.targetLangs.where((l) => l != profile.targetLangs[i]).toList()),
                               ),
+                            _AddLangButton(
+                              onTap: _savingLangs ? null : () => _pickLanguageToAdd(profile.targetLangs, profile.nativeLang),
                             ),
-                          InkWell(
-                            onTap: _savingLangs ? null : () => _pickLanguageToAdd(profile.targetLangs, profile.nativeLang),
-                            borderRadius: BorderRadius.circular(12),
-                            child: Container(
-                              width: 40,
-                              height: 40,
-                              decoration: BoxDecoration(
-                                color: kCard,
-                                borderRadius: BorderRadius.circular(12),
-                                border: Border.all(color: kBrutalBlack, width: 2),
-                                boxShadow: const [BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0)],
-                              ),
-                              child: const Icon(Icons.add_rounded, size: 22, color: kBrutalBlack),
+                          ],
+                        ),
+                        if (_savingLangs) ...[
+                          const SizedBox(height: 10),
+                          Text(
+                            'UPDATING LANGUAGES…',
+                            style: GoogleFonts.almarai(
+                              color: kBrutalTeal,
+                              fontWeight: FontWeight.w900,
+                              fontSize: 11,
+                              letterSpacing: 1.0,
                             ),
                           ),
                         ],
-                      ),
-                      if (_savingLangs) ...[
-                        const SizedBox(height: 10),
-                        Text('Updating languages...',
-                            style: GoogleFonts.almarai(color: const Color(0xFF0EA5A4), fontWeight: FontWeight.w900, fontSize: 11)),
                       ],
-                    ],
+                    ),
                   ),
-                ),
-                const SizedBox(height: 16),
-                Container(
-                  padding: const EdgeInsets.all(18),
-                  decoration: duoCardDecoration(),
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Text('My level', style: GoogleFonts.almarai(color: kForeground, fontWeight: FontWeight.w900, fontSize: 18)),
-                      const SizedBox(height: 14),
-                      if (_savingLevel)
-                        const Center(
-                          child: Padding(
-                            padding: EdgeInsets.symmetric(vertical: 12),
-                            child: CircularProgressIndicator(color: kPrimary, strokeWidth: 2),
+                  const SizedBox(height: 16),
+                  Container(
+                    padding: const EdgeInsets.all(18),
+                    decoration: brutalCard(),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          'MY LEVEL',
+                          style: GoogleFonts.almarai(
+                            color: kBrutalSlate,
+                            fontWeight: FontWeight.w900,
+                            fontSize: 13,
+                            letterSpacing: 1.2,
                           ),
-                        )
-                      else
-                        Wrap(
-                          spacing: 10,
-                          runSpacing: 10,
-                          children: kLevels.map((level) {
-                            final selected = profile.level == level;
-                            return InkWell(
-                              borderRadius: BorderRadius.circular(16),
-                              onTap: selected ? null : () => _changeLevel(level),
-                              child: AnimatedContainer(
-                                duration: const Duration(milliseconds: 180),
-                                padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
-                                decoration: BoxDecoration(
-                                  color: selected ? const Color(0xFFEDE9FE) : kCard,
-                                  borderRadius: BorderRadius.circular(16),
-                                  border: Border.all(color: selected ? kSecondary : kBorder, width: 2),
-                                  boxShadow: [BoxShadow(color: selected ? kSecondaryShadow : kBorder, offset: const Offset(0, 3), blurRadius: 0)],
-                                ),
-                                child: Column(
-                                  crossAxisAlignment: CrossAxisAlignment.start,
-                                  mainAxisSize: MainAxisSize.min,
-                                  children: [
-                                    Text(level, style: GoogleFonts.almarai(color: kForeground, fontWeight: FontWeight.w900, fontSize: 15)),
-                                    Text(
-                                      kLevelDescriptions[level] ?? '',
-                                      style: GoogleFonts.almarai(color: kMuted, fontWeight: FontWeight.w800, fontSize: 11),
-                                    ),
-                                  ],
-                                ),
-                              ),
-                            );
-                          }).toList(),
                         ),
-                    ],
+                        const SizedBox(height: 14),
+                        if (_savingLevel)
+                          const Center(
+                            child: Padding(
+                              padding: EdgeInsets.symmetric(vertical: 12),
+                              child: CircularProgressIndicator(color: kBrutalTeal, strokeWidth: 3),
+                            ),
+                          )
+                        else
+                          Wrap(
+                            spacing: 10,
+                            runSpacing: 10,
+                            children: kLevels.map((level) {
+                              return _LevelTile(
+                                level: level,
+                                description: kLevelDescriptions[level] ?? '',
+                                selected: profile.level == level,
+                                onTap: profile.level == level ? null : () => _changeLevel(level),
+                              );
+                            }).toList(),
+                          ),
+                      ],
+                    ),
                   ),
-                ),
+                ],
+                const SizedBox(height: 24),
+                _SignOutButton(onPressed: _confirmSignOut),
               ],
-              const SizedBox(height: 20),
-              OutlinedButton.icon(
-                onPressed: () => ref.read(authControllerProvider.notifier).signOut(),
-                icon: const Icon(Icons.logout_rounded),
-                label: const Text('Sign out'),
-              ),
-            ],
+            ),
           ),
         ),
       ),
     );
   }
 
-  Widget _flagWidget(String langCode, Color tone) {
+  Widget _flagWidget(String langCode) {
     final flag = languageFlagCode(langCode);
-    if (flag == null || flag.isEmpty) return Icon(Icons.language, color: tone);
-    return CountryFlag.fromCountryCode(
-      flag,
+    if (flag == null || flag.isEmpty) return const Icon(Icons.language, color: kBrutalBlack);
+    return SizedBox(width: 28, height: 20, child: CountryFlag.fromCountryCode(flag));
+  }
+}
+
+class _UserBanner extends StatelessWidget {
+  const _UserBanner({required this.user});
+  final User? user;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: kBrutalSlate,
+        borderRadius: BorderRadius.circular(kBrutalRadius),
+        border: Border.all(color: kBrutalBlack, width: 3),
+        boxShadow: const [
+          BoxShadow(color: kBrutalBlack, offset: Offset(5, 5), blurRadius: 0),
+        ],
+      ),
+      padding: const EdgeInsets.all(20),
+      child: Row(
+        children: [
+          Container(
+            width: 64,
+            height: 64,
+            decoration: BoxDecoration(
+              color: kBrutalYellow,
+              borderRadius: BorderRadius.circular(kBrutalRadius),
+              border: Border.all(color: kBrutalBlack, width: 2),
+              boxShadow: const [
+                BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0),
+              ],
+            ),
+            clipBehavior: Clip.antiAlias,
+            child: user?.avatarUrl != null
+                ? Image.network(user!.avatarUrl!, fit: BoxFit.cover)
+                : Center(
+                    child: Text(
+                      user?.hfUsername.substring(0, 1).toUpperCase() ?? '?',
+                      style: GoogleFonts.almarai(fontSize: 28, fontWeight: FontWeight.w900, color: kBrutalBlack),
+                    ),
+                  ),
+          ),
+          const SizedBox(width: 14),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'PROFILE',
+                  style: GoogleFonts.almarai(
+                    color: kBrutalYellow,
+                    fontSize: 11,
+                    fontWeight: FontWeight.w900,
+                    letterSpacing: 1.4,
+                  ),
+                ),
+                Text(
+                  user?.hfUsername ?? '—',
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: GoogleFonts.almarai(fontSize: 22, fontWeight: FontWeight.w900, color: kBrutalWhite, height: 1.05),
+                ),
+                if (user?.email != null)
+                  Padding(
+                    padding: const EdgeInsets.only(top: 2),
+                    child: Text(
+                      user!.email!,
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: GoogleFonts.almarai(color: kBrutalCream, fontSize: 12, fontWeight: FontWeight.w800),
+                    ),
+                  ),
+              ],
+            ),
+          ),
+        ],
+      ),
     );
   }
 }
@@ -337,14 +356,18 @@ class _StatCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.all(14),
-      decoration: duoCardDecoration(),
+      padding: const EdgeInsets.all(12),
+      decoration: brutalCard(),
       child: Row(
         children: [
           Container(
             width: 44,
             height: 44,
-            decoration: BoxDecoration(color: tone.withAlpha(34), borderRadius: BorderRadius.circular(15)),
+            decoration: BoxDecoration(
+              color: tone,
+              borderRadius: BorderRadius.circular(kBrutalRadius),
+              border: Border.all(color: kBrutalBlack, width: 2),
+            ),
             child: Center(child: icon),
           ),
           const SizedBox(width: 12),
@@ -353,12 +376,20 @@ class _StatCard extends StatelessWidget {
               mainAxisAlignment: MainAxisAlignment.center,
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                Text(label, style: GoogleFonts.almarai(color: kMuted, fontSize: 11, fontWeight: FontWeight.w900)),
+                Text(
+                  label,
+                  style: GoogleFonts.almarai(
+                    color: kBrutalMuted,
+                    fontSize: 11,
+                    fontWeight: FontWeight.w900,
+                    letterSpacing: 0.8,
+                  ),
+                ),
                 Text(
                   value,
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
-                  style: GoogleFonts.almarai(color: kForeground, fontSize: 15, fontWeight: FontWeight.w900),
+                  style: GoogleFonts.almarai(color: kBrutalSlate, fontSize: 15, fontWeight: FontWeight.w900),
                 ),
               ],
             ),
@@ -368,3 +399,190 @@ class _StatCard extends StatelessWidget {
     );
   }
 }
+
+class _LangChip extends StatelessWidget {
+  const _LangChip({
+    required this.code,
+    required this.primary,
+    required this.removable,
+    required this.onRemove,
+  });
+  final String code;
+  final bool primary;
+  final bool removable;
+  final VoidCallback? onRemove;
+
+  @override
+  Widget build(BuildContext context) {
+    final flag = languageFlagCode(code);
+    final fill = primary ? kBrutalTeal : kBrutalYellow;
+    final fg = primary ? kBrutalWhite : kBrutalBlack;
+
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+      decoration: BoxDecoration(
+        color: fill,
+        borderRadius: BorderRadius.circular(kBrutalRadius),
+        border: Border.all(color: kBrutalBlack, width: 2),
+        boxShadow: const [
+          BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0),
+        ],
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (flag != null && flag.isNotEmpty)
+            SizedBox(width: 22, height: 16, child: CountryFlag.fromCountryCode(flag))
+          else
+            Icon(Icons.language, color: fg, size: 16),
+          const SizedBox(width: 8),
+          Text(languageName(code), style: GoogleFonts.almarai(color: fg, fontWeight: FontWeight.w900, fontSize: 13)),
+          if (primary) ...[
+            const SizedBox(width: 6),
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 1),
+              decoration: BoxDecoration(
+                color: kBrutalBlack,
+                borderRadius: BorderRadius.circular(2),
+              ),
+              child: Text(
+                'PRIMARY',
+                style: GoogleFonts.almarai(
+                  color: kBrutalWhite,
+                  fontSize: 8,
+                  fontWeight: FontWeight.w900,
+                  letterSpacing: 0.5,
+                ),
+              ),
+            ),
+          ],
+          if (removable && onRemove != null) ...[
+            const SizedBox(width: 6),
+            GestureDetector(
+              onTap: onRemove,
+              child: Icon(Icons.close_rounded, size: 16, color: fg),
+            ),
+          ],
+        ],
+      ),
+    );
+  }
+}
+
+class _AddLangButton extends StatelessWidget {
+  const _AddLangButton({required this.onTap});
+  final VoidCallback? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        width: 40,
+        height: 40,
+        decoration: BoxDecoration(
+          color: kBrutalWhite,
+          borderRadius: BorderRadius.circular(kBrutalRadius),
+          border: Border.all(color: kBrutalBlack, width: 2),
+          boxShadow: const [
+            BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0),
+          ],
+        ),
+        child: const Icon(Icons.add_rounded, size: 22, color: kBrutalBlack),
+      ),
+    );
+  }
+}
+
+class _LevelTile extends StatelessWidget {
+  const _LevelTile({
+    required this.level,
+    required this.description,
+    required this.selected,
+    required this.onTap,
+  });
+  final String level;
+  final String description;
+  final bool selected;
+  final VoidCallback? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 120),
+        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
+        decoration: BoxDecoration(
+          color: selected ? kBrutalTeal : kBrutalWhite,
+          borderRadius: BorderRadius.circular(kBrutalRadius),
+          border: Border.all(color: kBrutalBlack, width: 2),
+          boxShadow: const [
+            BoxShadow(color: kBrutalBlack, offset: Offset(3, 3), blurRadius: 0),
+          ],
+        ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              level,
+              style: GoogleFonts.almarai(
+                color: selected ? kBrutalWhite : kBrutalBlack,
+                fontWeight: FontWeight.w900,
+                fontSize: 15,
+              ),
+            ),
+            Text(
+              description,
+              style: GoogleFonts.almarai(
+                color: selected ? kBrutalWhite : kBrutalMuted,
+                fontWeight: FontWeight.w800,
+                fontSize: 11,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _SignOutButton extends StatelessWidget {
+  const _SignOutButton({required this.onPressed});
+  final VoidCallback onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onPressed,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 14),
+        decoration: BoxDecoration(
+          color: kBrutalRed,
+          borderRadius: BorderRadius.circular(kBrutalRadius),
+          border: Border.all(color: kBrutalBlack, width: 2),
+          boxShadow: const [
+            BoxShadow(color: kBrutalBlack, offset: Offset(4, 4), blurRadius: 0),
+          ],
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            const Icon(Icons.logout_rounded, color: kBrutalWhite),
+            const SizedBox(width: 10),
+            Text(
+              'SIGN OUT',
+              style: GoogleFonts.almarai(
+                color: kBrutalWhite,
+                fontWeight: FontWeight.w900,
+                fontSize: 14,
+                letterSpacing: 1.2,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/main.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-import 'auth/auth_provider.dart';
 import 'routing/app_router.dart';
 import 'theme/app_theme.dart';
 
@@ -14,15 +13,12 @@ class LangLearnApp extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    ref.watch(authControllerProvider);
-    final router = buildRouter(ref);
+    final router = ref.watch(routerProvider);
     return MaterialApp.router(
-      title: 'Language Learner',
+      title: 'PraxaLing',
       theme: buildTheme(),
       routerConfig: router,
       debugShowCheckedModeBanner: false,
     );
   }
 }
-
-

mobile/lib/routing/app_router.dart

@@ -3,15 +3,30 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 
 import '../auth/auth_provider.dart';
+import '../features/camera/camera_screen.dart';
 import '../features/home/home_shell.dart';
 import '../features/login/login_screen.dart';
 import '../features/onboarding/onboarding_screen.dart';
-import '../features/practice/dialogue_screen.dart';
+import '../features/phrases/phrases_screen.dart';
+import '../features/practice/dialogues_list_screen.dart';
+import '../features/profile/profile_screen.dart';
+
+/// Long-lived router. Riverpod's [Ref.listen] re-runs GoRouter's redirect
+/// whenever auth state changes (sign-in / sign-out / onboarding finished).
+final routerProvider = Provider<GoRouter>((ref) {
+  final phrasesNav  = GlobalKey<NavigatorState>(debugLabel: 'phrases');
+  final cameraNav   = GlobalKey<NavigatorState>(debugLabel: 'camera');
+  final practiceNav = GlobalKey<NavigatorState>(debugLabel: 'practice');
+  final profileNav  = GlobalKey<NavigatorState>(debugLabel: 'profile');
+
+  final listenable = _AuthListenable();
+  ref.listen<AuthState>(authControllerProvider, (_, _) => listenable.bump());
+  ref.onDispose(listenable.dispose);
 
-GoRouter buildRouter(WidgetRef ref) {
   return GoRouter(
     initialLocation: '/',
-    redirect: (ctx, state) {
+    refreshListenable: listenable,
+    redirect: (_, state) {
       final auth = ref.read(authControllerProvider);
       final here = state.matchedLocation;
       switch (auth.status) {
@@ -23,22 +38,43 @@ GoRouter buildRouter(WidgetRef ref) {
           return here == '/onboarding' ? null : '/onboarding';
         case AuthStatus.ready:
           if (here == '/login' || here == '/onboarding' || here == '/') {
-            return '/home';
+            return '/phrases';
           }
           return null;
       }
     },
     routes: [
-      GoRoute(path: '/', builder: (_, __) => const _Splash()),
-      GoRoute(path: '/login', builder: (_, __) => const LoginScreen()),
-      GoRoute(path: '/onboarding', builder: (_, __) => const OnboardingScreen()),
-      GoRoute(path: '/home', builder: (_, __) => const HomeShell()),
-      GoRoute(
-        path: '/dialogue/:id',
-        builder: (_, s) => DialogueScreen(dialogueId: s.pathParameters['id']!),
+      GoRoute(path: '/', builder: (_, _) => const _Splash()),
+      GoRoute(path: '/login', builder: (_, _) => const LoginScreen()),
+      GoRoute(path: '/onboarding', builder: (_, _) => const OnboardingScreen()),
+      StatefulShellRoute.indexedStack(
+        builder: (context, state, navShell) => HomeShell(navigationShell: navShell),
+        branches: [
+          // Web order: Phrases, Camera, Practice, Profile (mirrors app/(app)/layout.tsx).
+          StatefulShellBranch(
+            navigatorKey: phrasesNav,
+            routes: [GoRoute(path: '/phrases', builder: (_, _) => const PhrasesScreen())],
+          ),
+          StatefulShellBranch(
+            navigatorKey: cameraNav,
+            routes: [GoRoute(path: '/camera', builder: (_, _) => const CameraScreen())],
+          ),
+          StatefulShellBranch(
+            navigatorKey: practiceNav,
+            routes: [GoRoute(path: '/practice', builder: (_, _) => const DialoguesListScreen())],
+          ),
+          StatefulShellBranch(
+            navigatorKey: profileNav,
+            routes: [GoRoute(path: '/profile', builder: (_, _) => const ProfileScreen())],
+          ),
+        ],
       ),
     ],
   );
+});
+
+class _AuthListenable extends ChangeNotifier {
+  void bump() => notifyListeners();
 }
 
 class _Splash extends StatelessWidget {
@@ -47,5 +83,3 @@ class _Splash extends StatelessWidget {
   Widget build(BuildContext context) =>
       const Scaffold(body: Center(child: CircularProgressIndicator()));
 }
-
-

mobile/lib/theme/app_theme.dart

@@ -4,32 +4,34 @@ import 'package:google_fonts/google_fonts.dart';
 
 // --- Neo-brutalism palette (mirrors web app/globals.css + Tailwind usage) ---
 const kBrutalBlack  = Color(0xFF000000); // borders, shadows, body text
-const kBrutalYellow = Color(0xFFFFD21E); // active state — matches web #FFD21E
+const kBrutalYellow = Color(0xFFFFD21E); // warning / accent
 const kBrutalWhite  = Color(0xFFFFFFFF); // card / unselected button
-const kBrutalCream  = Color(0xFFFFFBEF); // page background
-const kBrutalRed    = Color(0xFFEF4444); // error / wrong answer
+const kBrutalCream  = Color(0xFFF8FBFF); // page background — matches web #F8FBFF
+const kBrutalRed    = Color(0xFFF43F5E); // error / wrong answer — matches web #F43F5E
 const kBrutalGreen  = Color(0xFF22C55E); // correct answer
 const kBrutalBlue   = Color(0xFF3B82F6); // secondary accent (web blue)
-const kBrutalMuted  = Color(0xFF6B7280); // secondary text
+const kBrutalTeal   = Color(0xFF0EA5A4); // primary brand (web teal)
+const kBrutalMuted  = Color(0xFF777777); // secondary text — matches web #777777
+const kBrutalSlate  = Color(0xFF3C3C3C); // body text — matches web #3C3C3C
 
-// --- Back-compat aliases ---
-// The rest of the app references these names. By repointing them at the
-// neo-brutal palette, every existing screen flips style without edits.
-const kPrimary        = kBrutalYellow;
-const kPrimaryShadow  = kBrutalBlack;
-const kSecondary      = kBrutalBlue;
+// --- Back-compat aliases (old screens still reference these names) ---
+const kPrimary         = kBrutalTeal;     // teal is the primary brand color (web)
+const kPrimaryShadow   = kBrutalBlack;
+const kSecondary       = kBrutalBlue;
 const kSecondaryShadow = kBrutalBlack;
-const kWarning        = kBrutalYellow;
-const kDanger         = kBrutalRed;
-const kDangerShadow   = kBrutalBlack;
-const kForeground     = kBrutalBlack;
-const kMuted          = kBrutalMuted;
-const kBackground     = kBrutalCream;
-const kCard           = kBrutalWhite;
-const kCardFeature    = kBrutalWhite;
-const kBorder         = kBrutalBlack;
+const kWarning         = kBrutalYellow;
+const kDanger          = kBrutalRed;
+const kDangerShadow    = kBrutalBlack;
+const kForeground      = kBrutalSlate;
+const kMuted           = kBrutalMuted;
+const kBackground      = kBrutalCream;
+const kCard            = kBrutalWhite;
+const kCardFeature     = kBrutalWhite;
+const kBorder          = kBrutalBlack;
+
+// Universal corner radius — neo-brutal: small, never soft.
+const double kBrutalRadius = 4;
 
-// Single source of truth for the heavy display face used everywhere.
 TextStyle brutalFont({
   double? fontSize,
   FontWeight fontWeight = FontWeight.w800,
@@ -53,7 +55,7 @@ TextStyle brutalFont({
 ThemeData buildTheme() {
   final textTheme = GoogleFonts.almaraiTextTheme(
     ThemeData.light().textTheme.apply(
-          bodyColor: kBrutalBlack,
+          bodyColor: kBrutalSlate,
           displayColor: kBrutalBlack,
         ),
   );
@@ -63,12 +65,12 @@ ThemeData buildTheme() {
     brightness: Brightness.light,
     scaffoldBackgroundColor: kBrutalCream,
     colorScheme: const ColorScheme.light(
-      primary: kBrutalYellow,
-      onPrimary: kBrutalBlack,
+      primary: kBrutalTeal,
+      onPrimary: kBrutalWhite,
       secondary: kBrutalBlue,
       onSecondary: kBrutalWhite,
       surface: kBrutalWhite,
-      onSurface: kBrutalBlack,
+      onSurface: kBrutalSlate,
       outline: kBrutalBlack,
       error: kBrutalRed,
       onError: kBrutalWhite,
@@ -83,24 +85,24 @@ ThemeData buildTheme() {
       systemOverlayStyle: SystemUiOverlayStyle.dark,
       titleTextStyle: GoogleFonts.almarai(
         color: kBrutalBlack,
-        fontWeight: FontWeight.w800,
+        fontWeight: FontWeight.w900,
         fontSize: 20,
       ),
       iconTheme: const IconThemeData(color: kBrutalBlack),
     ),
     filledButtonTheme: FilledButtonThemeData(
       style: FilledButton.styleFrom(
-        backgroundColor: kBrutalYellow,
-        foregroundColor: kBrutalBlack,
+        backgroundColor: kBrutalTeal,
+        foregroundColor: kBrutalWhite,
         disabledBackgroundColor: kBrutalWhite,
         disabledForegroundColor: kBrutalMuted,
         minimumSize: const Size(0, 52),
         padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
         shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(14),
+          borderRadius: BorderRadius.circular(kBrutalRadius),
           side: const BorderSide(color: kBrutalBlack, width: 2),
         ),
-        textStyle: GoogleFonts.almarai(fontWeight: FontWeight.w800, fontSize: 15),
+        textStyle: GoogleFonts.almarai(fontWeight: FontWeight.w900, fontSize: 15),
         elevation: 0,
       ),
     ),
@@ -111,16 +113,16 @@ ThemeData buildTheme() {
         minimumSize: const Size(0, 52),
         padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
         shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(14),
+          borderRadius: BorderRadius.circular(kBrutalRadius),
           side: const BorderSide(color: kBrutalBlack, width: 2),
         ),
-        textStyle: GoogleFonts.almarai(fontWeight: FontWeight.w800, fontSize: 15),
+        textStyle: GoogleFonts.almarai(fontWeight: FontWeight.w900, fontSize: 15),
       ),
     ),
     textButtonTheme: TextButtonThemeData(
       style: TextButton.styleFrom(
         foregroundColor: kBrutalBlack,
-        textStyle: GoogleFonts.almarai(fontWeight: FontWeight.w800),
+        textStyle: GoogleFonts.almarai(fontWeight: FontWeight.w900),
       ),
     ),
     cardTheme: CardThemeData(
@@ -128,35 +130,38 @@ ThemeData buildTheme() {
       elevation: 0,
       surfaceTintColor: Colors.transparent,
       shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(14),
+        borderRadius: BorderRadius.circular(kBrutalRadius),
         side: const BorderSide(color: kBrutalBlack, width: 2),
       ),
     ),
     navigationBarTheme: NavigationBarThemeData(
       height: 72,
       backgroundColor: kBrutalWhite,
-      indicatorColor: kBrutalYellow,
+      indicatorColor: kBrutalTeal,
       surfaceTintColor: Colors.transparent,
       indicatorShape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(12),
+        borderRadius: BorderRadius.circular(kBrutalRadius),
         side: const BorderSide(color: kBrutalBlack, width: 2),
       ),
       iconTheme: WidgetStateProperty.resolveWith((states) {
+        if (states.contains(WidgetState.selected)) {
+          return const IconThemeData(color: kBrutalWhite);
+        }
         return const IconThemeData(color: kBrutalBlack);
       }),
       labelTextStyle: WidgetStateProperty.resolveWith((states) {
         if (states.contains(WidgetState.selected)) {
-          return GoogleFonts.almarai(color: kBrutalBlack, fontSize: 12, fontWeight: FontWeight.w800);
+          return GoogleFonts.almarai(color: kBrutalBlack, fontSize: 12, fontWeight: FontWeight.w900);
         }
-        return GoogleFonts.almarai(color: kBrutalMuted, fontSize: 12, fontWeight: FontWeight.w700);
+        return GoogleFonts.almarai(color: kBrutalMuted, fontSize: 12, fontWeight: FontWeight.w800);
       }),
     ),
     tabBarTheme: TabBarThemeData(
       labelColor: kBrutalBlack,
       unselectedLabelColor: kBrutalMuted,
       indicatorSize: TabBarIndicatorSize.tab,
-      labelStyle: GoogleFonts.almarai(fontWeight: FontWeight.w800),
-      unselectedLabelStyle: GoogleFonts.almarai(fontWeight: FontWeight.w700),
+      labelStyle: GoogleFonts.almarai(fontWeight: FontWeight.w900),
+      unselectedLabelStyle: GoogleFonts.almarai(fontWeight: FontWeight.w800),
     ),
     dividerColor: kBrutalBlack,
     inputDecorationTheme: InputDecorationTheme(
@@ -164,35 +169,35 @@ ThemeData buildTheme() {
       fillColor: kBrutalWhite,
       contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
       border: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(14),
+        borderRadius: BorderRadius.circular(kBrutalRadius),
         borderSide: const BorderSide(color: kBrutalBlack, width: 2),
       ),
       enabledBorder: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(14),
+        borderRadius: BorderRadius.circular(kBrutalRadius),
         borderSide: const BorderSide(color: kBrutalBlack, width: 2),
       ),
       focusedBorder: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(14),
-        borderSide: const BorderSide(color: kBrutalBlack, width: 2),
+        borderRadius: BorderRadius.circular(kBrutalRadius),
+        borderSide: const BorderSide(color: kBrutalBlue, width: 3),
       ),
       hintStyle: GoogleFonts.almarai(color: kBrutalMuted, fontWeight: FontWeight.w700),
       labelStyle: GoogleFonts.almarai(color: kBrutalMuted, fontWeight: FontWeight.w800),
     ),
     chipTheme: ChipThemeData(
       backgroundColor: kBrutalWhite,
-      selectedColor: kBrutalYellow,
+      selectedColor: kBrutalTeal,
       disabledColor: kBrutalWhite,
-      labelStyle: GoogleFonts.almarai(color: kBrutalBlack, fontWeight: FontWeight.w800),
-      secondaryLabelStyle: GoogleFonts.almarai(color: kBrutalBlack, fontWeight: FontWeight.w800),
+      labelStyle: GoogleFonts.almarai(color: kBrutalBlack, fontWeight: FontWeight.w900),
+      secondaryLabelStyle: GoogleFonts.almarai(color: kBrutalWhite, fontWeight: FontWeight.w900),
       side: const BorderSide(color: kBrutalBlack, width: 2),
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      shape: const StadiumBorder(side: BorderSide(color: kBrutalBlack, width: 2)),
     ),
     snackBarTheme: SnackBarThemeData(
       backgroundColor: kBrutalBlack,
       contentTextStyle: GoogleFonts.almarai(color: kBrutalWhite, fontWeight: FontWeight.w800),
       behavior: SnackBarBehavior.floating,
       shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(12),
+        borderRadius: BorderRadius.circular(kBrutalRadius),
         side: const BorderSide(color: kBrutalBlack, width: 2),
       ),
     ),
@@ -200,18 +205,18 @@ ThemeData buildTheme() {
       backgroundColor: kBrutalWhite,
       surfaceTintColor: Colors.transparent,
       shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(18),
-        side: const BorderSide(color: kBrutalBlack, width: 2),
+        borderRadius: BorderRadius.circular(kBrutalRadius),
+        side: const BorderSide(color: kBrutalBlack, width: 3),
       ),
-      titleTextStyle: GoogleFonts.almarai(color: kBrutalBlack, fontSize: 20, fontWeight: FontWeight.w800),
-      contentTextStyle: GoogleFonts.almarai(color: kBrutalBlack, fontWeight: FontWeight.w700),
+      titleTextStyle: GoogleFonts.almarai(color: kBrutalBlack, fontSize: 20, fontWeight: FontWeight.w900),
+      contentTextStyle: GoogleFonts.almarai(color: kBrutalSlate, fontWeight: FontWeight.w800),
     ),
     bottomSheetTheme: const BottomSheetThemeData(
       backgroundColor: kBrutalWhite,
       surfaceTintColor: Colors.transparent,
       shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
-        side: BorderSide(color: kBrutalBlack, width: 2),
+        borderRadius: BorderRadius.vertical(top: Radius.circular(kBrutalRadius)),
+        side: BorderSide(color: kBrutalBlack, width: 3),
       ),
     ),
   );
@@ -219,17 +224,19 @@ ThemeData buildTheme() {
 
 // --- Decorations ---
 
-/// Neo-brutal card: 2px black border + hard black offset shadow.
+/// Neo-brutal card: thick black border + hard black offset shadow.
 /// [offset] shrinks to indicate a pressed state (web: translate-1).
 BoxDecoration brutalCard({
   Color color = kBrutalWhite,
-  double offset = 3,
-  double radius = 14,
+  double offset = 4,
+  double radius = kBrutalRadius,
+  Color borderColor = kBrutalBlack,
+  double borderWidth = 2,
 }) {
   return BoxDecoration(
     color: color,
     borderRadius: BorderRadius.circular(radius),
-    border: Border.all(color: kBrutalBlack, width: 2),
+    border: Border.all(color: borderColor, width: borderWidth),
     boxShadow: [
       BoxShadow(color: kBrutalBlack, offset: Offset(offset, offset), blurRadius: 0),
     ],
@@ -239,7 +246,7 @@ BoxDecoration brutalCard({
 /// Pressed/active variant — collapses to a 1px shadow, yellow fill by default.
 BoxDecoration brutalCardPressed({
   Color color = kBrutalYellow,
-  double radius = 14,
+  double radius = kBrutalRadius,
 }) =>
     brutalCard(color: color, offset: 1, radius: radius);
 

mobile/lib/theme/widgets/brutal_button.dart

@@ -1,18 +1,19 @@
 import 'package:flutter/material.dart';
 import '../app_theme.dart';
 
-/// Neo-brutal button. Black 2px border, hard 3px black offset shadow,
-/// collapses to 1px shadow on press (mirrors the web's
-/// `active:translate-x-[1px] translate-y-[1px]` behavior).
+/// Neo-brutal button. Black 2px border, hard 4px black offset shadow,
+/// collapses to (0,0) shadow on press while the body translates (4,4) —
+/// matches the web `active:translate-x-[1px] translate-y-[1px]` behavior
+/// scaled up for touch.
 class BrutalButton extends StatefulWidget {
   const BrutalButton({
     super.key,
     required this.onPressed,
     required this.child,
-    this.color = kBrutalYellow,
-    this.foregroundColor = kBrutalBlack,
-    this.padding = const EdgeInsets.symmetric(horizontal: 18, vertical: 12),
-    this.radius = 14,
+    this.color = kBrutalTeal,
+    this.foregroundColor = kBrutalWhite,
+    this.padding = const EdgeInsets.symmetric(horizontal: 18, vertical: 14),
+    this.radius = kBrutalRadius,
     this.expand = false,
     this.enabled = true,
   });
@@ -42,13 +43,13 @@ class _BrutalButtonState extends State<BrutalButton> {
   @override
   Widget build(BuildContext context) {
     final disabled = !widget.enabled || widget.onPressed == null;
-    final offset = _pressed ? 1.0 : 3.0;
+    final offset = _pressed ? 0.0 : 4.0;
 
     final btn = AnimatedContainer(
       duration: const Duration(milliseconds: 80),
       curve: Curves.easeOut,
       padding: widget.padding,
-      transform: Matrix4.translationValues(_pressed ? 2 : 0, _pressed ? 2 : 0, 0),
+      transform: Matrix4.translationValues(_pressed ? 4 : 0, _pressed ? 4 : 0, 0),
       decoration: BoxDecoration(
         color: disabled ? kBrutalWhite : widget.color,
         borderRadius: BorderRadius.circular(widget.radius),
@@ -64,7 +65,7 @@ class _BrutalButtonState extends State<BrutalButton> {
       child: DefaultTextStyle.merge(
         style: brutalFont(
           color: disabled ? kBrutalMuted : widget.foregroundColor,
-          fontWeight: FontWeight.w800,
+          fontWeight: FontWeight.w900,
           fontSize: 15,
         ),
         textAlign: TextAlign.center,