feat: Add mobile-specific Riverpod providers for Xtream service, live TV, movies, series, and EPG data, along with UI state management.

lib/mobile/providers/mobile_xtream_providers.dart

@@ -145,14 +145,24 @@ final mobileLiveTvUiStateProvider =
     StateProvider<LiveTvUiState>((ref) => LiveTvUiState());
 
 class LiveTvUiState {
-  final String? selectedCategory;
+  final String? selectedCategory; // category NAME (for display)
+  final String? selectedCategoryId; // category ID (for API calls)
   final bool isCategoryView;
 
-  LiveTvUiState({this.selectedCategory, this.isCategoryView = true});
+  LiveTvUiState({
+    this.selectedCategory,
+    this.selectedCategoryId,
+    this.isCategoryView = true,
+  });
 
-  LiveTvUiState copyWith({String? selectedCategory, bool? isCategoryView}) {
+  LiveTvUiState copyWith({
+    String? selectedCategory,
+    String? selectedCategoryId,
+    bool? isCategoryView,
+  }) {
     return LiveTvUiState(
       selectedCategory: selectedCategory ?? this.selectedCategory,
+      selectedCategoryId: selectedCategoryId ?? this.selectedCategoryId,
       isCategoryView: isCategoryView ?? this.isCategoryView,
     );
   }

lib/mobile/theme/mobile_theme.dart

@@ -2,9 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 import '../../core/theme/app_colors.dart';
 
-/// XtremFlow Mobile Theme
-/// 
-/// Adapted from AppTheme for touch-first screens.
+/// XtremFlow Mobile Theme — Apple TV Grey Glossy Style (dark)
+///                         + Apple Clean White (light)
 class MobileTheme {
   MobileTheme._();
 
@@ -14,7 +13,7 @@ class MobileTheme {
   static const double spacing12 = 12.0;
   static const double spacing16 = 16.0;
   static const double spacing24 = 24.0;
-  
+
   // ============ RADIUS ============
   static const double radiusSm = 8.0;
   static const double radiusMd = 12.0;
@@ -23,80 +22,369 @@ class MobileTheme {
   // ============ DARK THEME (Mobile Main) ============
   static ThemeData get darkTheme {
     final baseTheme = ThemeData.dark(useMaterial3: true);
-    
+
     return baseTheme.copyWith(
       colorScheme: AppColors.darkColorScheme,
-      scaffoldBackgroundColor: Colors.black, // Enforce Pure Black
-      
-      // Typography: Scaled down for mobile
-      textTheme: TextTheme(
-        displayLarge: GoogleFonts.inter(fontSize: 32, fontWeight: FontWeight.w700, letterSpacing: -1.0, color: Colors.white),
-        displayMedium: GoogleFonts.inter(fontSize: 28, fontWeight: FontWeight.w700, letterSpacing: -0.5, color: Colors.white),
-        displaySmall: GoogleFonts.inter(fontSize: 24, fontWeight: FontWeight.w600, color: Colors.white),
-        headlineMedium: GoogleFonts.inter(fontSize: 20, fontWeight: FontWeight.w600, color: Colors.white),
-        titleLarge: GoogleFonts.inter(fontSize: 18, fontWeight: FontWeight.w600, color: Colors.white),
-        titleMedium: GoogleFonts.inter(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.white),
-        bodyLarge: GoogleFonts.inter(fontSize: 14, fontWeight: FontWeight.w400, color: const Color(0xFF9E9E9E)),
-        bodyMedium: GoogleFonts.inter(fontSize: 12, fontWeight: FontWeight.w400, color: const Color(0xFF9E9E9E)),
-        labelLarge: GoogleFonts.inter(fontSize: 12, fontWeight: FontWeight.w600, color: Colors.white),
+      scaffoldBackgroundColor: AppColors.background,
+
+      // Global text selection — white cursor on dark
+      textSelectionTheme: const TextSelectionThemeData(
+        cursorColor: Colors.white,
+        selectionColor: Color(0x4DFFFFFF),
+        selectionHandleColor: Colors.white,
       ),
 
-      // AppBar: Transparent / Glass
+      // Typography: San Francisco proxy via Inter — clean and modern
+      textTheme: TextTheme(
+        displayLarge: GoogleFonts.inter(
+          fontSize: 32,
+          fontWeight: FontWeight.w700,
+          letterSpacing: -1.0,
+          color: AppColors.textPrimary,
+        ),
+        displayMedium: GoogleFonts.inter(
+          fontSize: 28,
+          fontWeight: FontWeight.w700,
+          letterSpacing: -0.5,
+          color: AppColors.textPrimary,
+        ),
+        displaySmall: GoogleFonts.inter(
+          fontSize: 24,
+          fontWeight: FontWeight.w600,
+          color: AppColors.textPrimary,
+        ),
+        headlineMedium: GoogleFonts.inter(
+          fontSize: 20,
+          fontWeight: FontWeight.w600,
+          color: AppColors.textPrimary,
+        ),
+        titleLarge: GoogleFonts.inter(
+          fontSize: 18,
+          fontWeight: FontWeight.w600,
+          color: AppColors.textPrimary,
+        ),
+        titleMedium: GoogleFonts.inter(
+          fontSize: 16,
+          fontWeight: FontWeight.w600,
+          color: AppColors.textPrimary,
+        ),
+        bodyLarge: GoogleFonts.inter(
+          fontSize: 14,
+          fontWeight: FontWeight.w400,
+          color: AppColors.textSecondary,
+        ),
+        bodyMedium: GoogleFonts.inter(
+          fontSize: 12,
+          fontWeight: FontWeight.w400,
+          color: AppColors.textSecondary,
+        ),
+        labelLarge: GoogleFonts.inter(
+          fontSize: 12,
+          fontWeight: FontWeight.w600,
+          color: AppColors.textPrimary,
+        ),
+      ),
+
+      // AppBar: Transparent — background gradient shows through
       appBarTheme: AppBarTheme(
-        backgroundColor: Colors.transparent, // Fully transparent for gradient overlay
-        foregroundColor: Colors.white,
+        backgroundColor: Colors.transparent,
+        foregroundColor: AppColors.textPrimary,
         elevation: 0,
         centerTitle: true,
         scrolledUnderElevation: 0,
         titleTextStyle: GoogleFonts.inter(
           fontSize: 16,
           fontWeight: FontWeight.w600,
-          color: Colors.white,
+          color: AppColors.textPrimary,
         ),
       ),
-      
-      // Bottom Navigation Bar
+
+      // Bottom Navigation Bar: glossy dark surface, Apple Blue selected
       bottomNavigationBarTheme: BottomNavigationBarThemeData(
-        backgroundColor: const Color(0xFF1C1C1E).withOpacity(0.95), // Darker surface
-        selectedItemColor: Colors.white,
-        unselectedItemColor: const Color(0xFF9E9E9E),
-        selectedLabelStyle: GoogleFonts.inter(fontSize: 10, fontWeight: FontWeight.w600),
-        unselectedLabelStyle: GoogleFonts.inter(fontSize: 10, fontWeight: FontWeight.w500),
+        backgroundColor: AppColors.surface,
+        selectedItemColor: AppColors.appleBlue,
+        unselectedItemColor: AppColors.textSecondary,
+        selectedLabelStyle: GoogleFonts.inter(
+          fontSize: 10,
+          fontWeight: FontWeight.w600,
+        ),
+        unselectedLabelStyle: GoogleFonts.inter(
+          fontSize: 10,
+          fontWeight: FontWeight.w500,
+        ),
         type: BottomNavigationBarType.fixed,
         elevation: 0,
       ),
-      
-      // Inputs
+
+      // Inputs: dark surface fill, white focus border
       inputDecorationTheme: InputDecorationTheme(
         filled: true,
-        fillColor: const Color(0xFF1C1C1E), // Dark Grey Surface
-        contentPadding: const EdgeInsets.symmetric(horizontal: spacing16, vertical: spacing12),
+        fillColor: AppColors.surfaceVariant,
+        contentPadding: const EdgeInsets.symmetric(
+          horizontal: spacing16,
+          vertical: spacing12,
+        ),
         border: OutlineInputBorder(
           borderRadius: BorderRadius.circular(radiusMd),
-          borderSide: BorderSide.none,
+          borderSide: const BorderSide(
+            color: AppColors.glassBorderColor,
+            width: 1,
+          ),
         ),
         enabledBorder: OutlineInputBorder(
           borderRadius: BorderRadius.circular(radiusMd),
-          borderSide: BorderSide.none,
+          borderSide: const BorderSide(
+            color: AppColors.glassBorderColor,
+            width: 1,
+          ),
         ),
         focusedBorder: OutlineInputBorder(
           borderRadius: BorderRadius.circular(radiusMd),
-          borderSide: const BorderSide(color: Colors.white, width: 1), // White border focus
+          borderSide: const BorderSide(color: Colors.white, width: 1.5),
+        ),
+        hintStyle: GoogleFonts.inter(
+          color: AppColors.textTertiary,
+          fontSize: 14,
         ),
-        hintStyle: GoogleFonts.inter(color: const Color(0xFF616161), fontSize: 14),
       ),
-      
-      // Buttons
+
+      // Buttons: Apple Blue fill — modern CTA style
       filledButtonTheme: FilledButtonThemeData(
         style: FilledButton.styleFrom(
-          backgroundColor: Colors.white, // White buttons
-          foregroundColor: Colors.black,
+          backgroundColor: AppColors.appleBlue,
+          foregroundColor: Colors.white,
           elevation: 0,
           padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
-          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(radiusMd)),
-          textStyle: GoogleFonts.inter(fontWeight: FontWeight.w600, fontSize: 14),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(radiusMd),
+          ),
+          textStyle: GoogleFonts.inter(
+            fontWeight: FontWeight.w600,
+            fontSize: 14,
+          ),
+        ),
+      ),
+
+      // Cards: glossy dark surface with subtle glass border
+      cardTheme: const CardThemeData(
+        color: AppColors.surfaceVariant,
+        elevation: 0,
+        margin: EdgeInsets.zero,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(radiusMd)),
+          side: BorderSide(color: AppColors.glassBorderColor, width: 1),
+        ),
+      ),
+
+      // Dialogs: glass/dark
+      dialogTheme: DialogThemeData(
+        backgroundColor: AppColors.surface,
+        elevation: 24,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(radiusLg),
+          side: const BorderSide(color: AppColors.glassBorderColor, width: 1),
+        ),
+        titleTextStyle: GoogleFonts.inter(
+          fontSize: 18,
+          fontWeight: FontWeight.bold,
+          color: AppColors.textPrimary,
+        ),
+        contentTextStyle: GoogleFonts.inter(
+          fontSize: 14,
+          color: AppColors.textSecondary,
         ),
       ),
     );
   }
+
+  // ============ LIGHT THEME (Apple Clean White) ============
+  static ThemeData get lightTheme {
+    final baseTheme = ThemeData.light(useMaterial3: true);
+
+    const bgColor = Color(0xFFEAEAF0);
+    const surfaceColor = Color(0xFFF2F2F7);
+    const primaryColor = Color(0xFF007AFF);
+    const textPrimaryColor = Color(0xFF000000);
+    const textSecondaryColor = Color(0x993C3C43);
+    const textTertiaryColor = Color(0xFFC7C7CC);
+    const borderColor = Color(0x1A000000);
+
+    return baseTheme.copyWith(
+      colorScheme: const ColorScheme.light(
+        primary: primaryColor,
+        secondary: Color(0xFF34C759),
+        surface: surfaceColor,
+        error: AppColors.error,
+        onPrimary: Colors.white,
+        onSecondary: Colors.white,
+        onSurface: textPrimaryColor,
+        onError: Colors.white,
+        brightness: Brightness.light,
+      ),
+      scaffoldBackgroundColor: bgColor,
+
+      textSelectionTheme: const TextSelectionThemeData(
+        cursorColor: primaryColor,
+        selectionColor: Color(0x4D007AFF),
+        selectionHandleColor: primaryColor,
+      ),
+
+      textTheme: TextTheme(
+        displayLarge: GoogleFonts.inter(
+          fontSize: 32,
+          fontWeight: FontWeight.w700,
+          letterSpacing: -1.0,
+          color: textPrimaryColor,
+        ),
+        displayMedium: GoogleFonts.inter(
+          fontSize: 28,
+          fontWeight: FontWeight.w700,
+          letterSpacing: -0.5,
+          color: textPrimaryColor,
+        ),
+        displaySmall: GoogleFonts.inter(
+          fontSize: 24,
+          fontWeight: FontWeight.w600,
+          color: textPrimaryColor,
+        ),
+        headlineMedium: GoogleFonts.inter(
+          fontSize: 20,
+          fontWeight: FontWeight.w600,
+          color: textPrimaryColor,
+        ),
+        titleLarge: GoogleFonts.inter(
+          fontSize: 18,
+          fontWeight: FontWeight.w600,
+          color: textPrimaryColor,
+        ),
+        titleMedium: GoogleFonts.inter(
+          fontSize: 16,
+          fontWeight: FontWeight.w600,
+          color: textPrimaryColor,
+        ),
+        bodyLarge: GoogleFonts.inter(
+          fontSize: 14,
+          fontWeight: FontWeight.w400,
+          color: textSecondaryColor,
+        ),
+        bodyMedium: GoogleFonts.inter(
+          fontSize: 12,
+          fontWeight: FontWeight.w400,
+          color: textSecondaryColor,
+        ),
+        labelLarge: GoogleFonts.inter(
+          fontSize: 12,
+          fontWeight: FontWeight.w600,
+          color: textPrimaryColor,
+        ),
+      ),
+
+      appBarTheme: AppBarTheme(
+        backgroundColor: surfaceColor,
+        foregroundColor: textPrimaryColor,
+        elevation: 0,
+        scrolledUnderElevation: 1,
+        shadowColor: borderColor,
+        centerTitle: true,
+        titleTextStyle: GoogleFonts.inter(
+          fontSize: 16,
+          fontWeight: FontWeight.w600,
+          color: textPrimaryColor,
+        ),
+      ),
+
+      bottomNavigationBarTheme: BottomNavigationBarThemeData(
+        backgroundColor: surfaceColor,
+        selectedItemColor: primaryColor,
+        unselectedItemColor: textSecondaryColor,
+        selectedLabelStyle: GoogleFonts.inter(
+          fontSize: 10,
+          fontWeight: FontWeight.w600,
+        ),
+        unselectedLabelStyle: GoogleFonts.inter(
+          fontSize: 10,
+          fontWeight: FontWeight.w500,
+        ),
+        type: BottomNavigationBarType.fixed,
+        elevation: 8,
+      ),
+
+      inputDecorationTheme: InputDecorationTheme(
+        filled: true,
+        fillColor: surfaceColor,
+        contentPadding: const EdgeInsets.symmetric(
+          horizontal: spacing16,
+          vertical: spacing12,
+        ),
+        border: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(radiusMd),
+          borderSide: const BorderSide(color: borderColor, width: 1),
+        ),
+        enabledBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(radiusMd),
+          borderSide: const BorderSide(color: borderColor, width: 1),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(radiusMd),
+          borderSide: const BorderSide(color: primaryColor, width: 2),
+        ),
+        hintStyle: GoogleFonts.inter(
+          color: textTertiaryColor,
+          fontSize: 14,
+        ),
+      ),
+
+      filledButtonTheme: FilledButtonThemeData(
+        style: FilledButton.styleFrom(
+          backgroundColor: primaryColor,
+          foregroundColor: Colors.white,
+          elevation: 0,
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(radiusMd),
+          ),
+          textStyle: GoogleFonts.inter(
+            fontWeight: FontWeight.w600,
+            fontSize: 14,
+          ),
+        ),
+      ),
+
+      cardTheme: const CardThemeData(
+        color: surfaceColor,
+        elevation: 0,
+        margin: EdgeInsets.zero,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(radiusMd)),
+          side: BorderSide(color: borderColor, width: 1),
+        ),
+        shadowColor: borderColor,
+      ),
+
+      dialogTheme: DialogThemeData(
+        backgroundColor: surfaceColor,
+        elevation: 8,
+        shadowColor: borderColor,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(radiusLg),
+          side: const BorderSide(color: borderColor, width: 1),
+        ),
+        titleTextStyle: GoogleFonts.inter(
+          fontSize: 18,
+          fontWeight: FontWeight.bold,
+          color: textPrimaryColor,
+        ),
+        contentTextStyle: GoogleFonts.inter(
+          fontSize: 14,
+          color: textSecondaryColor,
+        ),
+      ),
+    );
+  }
+
+  /// Returns the appropriate MobileTheme based on the current [BuildContext] brightness.
+  static ThemeData themeOf(BuildContext context) {
+    final brightness = Theme.of(context).brightness;
+    return brightness == Brightness.dark ? darkTheme : lightTheme;
+  }
 }

lib/mobile/widgets/mobile_poster_card.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:cached_network_image/cached_network_image.dart';
-import 'package:xtremobile/core/theme/app_colors.dart';
+import 'package:xtremobile/core/theme/app_decorations.dart';
 import 'package:xtremobile/mobile/widgets/tv_focusable.dart';
 import 'package:xtremobile/core/utils/image_cache_config.dart';
 
@@ -26,94 +26,132 @@ class MobilePosterCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final isDark = Theme.of(context).brightness == Brightness.dark;
     return Column(
       mainAxisSize: MainAxisSize.min,
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-        // Focusable Poster
+        // Shadow lives on this outer Container so ClipRRect doesn't swallow it
         Expanded(
-          child: TVFocusable(
-            onPressed: onTap,
-            onLongPress: onLongPress,
-            borderRadius: BorderRadius.circular(12),
-            child: Stack(
-              fit: StackFit.expand,
-              children: [
-                // Image
-                // [P1-2 FIX] Optimize image cache: resize to display size (100x150)
-                // Before: Downloads full resolution (1000x1500px), caches at full size
-                // After: Cache only 100x150px needed for display
-                // Impact: -60% disk cache, -40% memory usage
-                ClipRRect(
-                  borderRadius: BorderRadius.circular(12),
-                  child: imageUrl != null && imageUrl!.isNotEmpty
-                      ? CachedNetworkImage(
-                          imageUrl: imageUrl!,
-                          fit: BoxFit.cover,
-                          // Memory cache dimensions (match display size)
-                          memCacheWidth: 120,
-                          memCacheHeight: 180,
-                          // Disk cache dimensions (slightly larger for quality)
-                          maxWidthDiskCache: 120,
-                          maxHeightDiskCache: 180,
-                          cacheManager: AppCacheManager.instance,
-                          errorWidget: (_, __, ___) => Container(
-                            color: AppColors.surface,
-                            child: Icon(placeholderIcon, color: Colors.white38),
-                          ),
-                          placeholder: (_, __) => Container(
-                            color: AppColors.surface,
-                            child: Icon(placeholderIcon, color: Colors.white24),
-                          ),
-                        )
-                      : Container(
-                          color: AppColors.surface,
-                          child: Icon(placeholderIcon, color: Colors.white38),
-                        ),
+          child: Container(
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(12),
+              boxShadow: [
+                BoxShadow(
+                  color: isDark
+                      ? const Color(0x99000000)
+                      : const Color(0x28000000),
+                  blurRadius: 12,
+                  offset: const Offset(0, 6),
                 ),
-                
-                // Overlays
-                if (rating != null)
-                  Positioned(
-                    top: 6,
-                    left: 6,
-                    child: Container(
-                      padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
-                      decoration: BoxDecoration(
-                        color: Colors.black87,
-                        borderRadius: BorderRadius.circular(4),
-                      ),
-                      child: Row(
-                        children: [
-                          const Icon(Icons.star, color: Colors.amber, size: 10),
-                          const SizedBox(width: 2),
-                          Text(
-                            rating!,
-                            style: const TextStyle(color: Colors.white, fontSize: 10, fontWeight: FontWeight.bold),
+              ],
+            ),
+            child: TVFocusable(
+              onPressed: onTap,
+              onLongPress: onLongPress,
+              borderRadius: BorderRadius.circular(12),
+              child: Stack(
+                fit: StackFit.expand,
+                children: [
+                  // Image / placeholder (clipped)
+                  ClipRRect(
+                    borderRadius: BorderRadius.circular(12),
+                    child: imageUrl != null && imageUrl!.isNotEmpty
+                        ? CachedNetworkImage(
+                            imageUrl: imageUrl!,
+                            fit: BoxFit.cover,
+                            memCacheWidth: 120,
+                            memCacheHeight: 180,
+                            maxWidthDiskCache: 120,
+                            maxHeightDiskCache: 180,
+                            cacheManager: AppCacheManager.instance,
+                            errorWidget: (_, __, ___) => Container(
+                              decoration:
+                                  AppDecorations.channelCardBase(context),
+                              child: Icon(
+                                placeholderIcon,
+                                color: AppDecorations.iconMuted(context),
+                              ),
+                            ),
+                            placeholder: (_, __) => Container(
+                              decoration:
+                                  AppDecorations.channelCardBase(context),
+                              child: Icon(
+                                placeholderIcon,
+                                color: AppDecorations.iconMuted(context),
+                              ),
+                            ),
+                          )
+                        : Container(
+                            decoration: AppDecorations.channelCardBase(context),
+                            child: Icon(
+                              placeholderIcon,
+                              color: AppDecorations.iconMuted(context),
+                            ),
                           ),
-                        ],
-                      ),
-                    ),
                   ),
 
-                if (isWatched)
-                  Positioned(
-                    top: 6,
-                    right: 6,
-                    child: Container(
-                      padding: const EdgeInsets.all(4),
-                      decoration: const BoxDecoration(
-                        color: AppColors.success,
-                        shape: BoxShape.circle,
+                  // Rating badge
+                  if (rating != null)
+                    Positioned(
+                      top: 6,
+                      left: 6,
+                      child: Container(
+                        padding: const EdgeInsets.symmetric(
+                          horizontal: 4,
+                          vertical: 2,
+                        ),
+                        decoration: BoxDecoration(
+                          color: Colors.black87,
+                          borderRadius: BorderRadius.circular(4),
+                        ),
+                        child: Row(
+                          children: [
+                            const Icon(
+                              Icons.star,
+                              color: Colors.amber,
+                              size: 10,
+                            ),
+                            const SizedBox(width: 2),
+                            Text(
+                              rating!,
+                              style: const TextStyle(
+                                color: Colors.white,
+                                fontSize: 10,
+                                fontWeight: FontWeight.bold,
+                              ),
+                            ),
+                          ],
+                        ),
                       ),
-                      child: const Icon(Icons.check, size: 10, color: Colors.white),
                     ),
-                  ),
-              ],
+
+                  // Watched badge
+                  if (isWatched)
+                    Positioned(
+                      top: 6,
+                      right: 6,
+                      child: Container(
+                        padding: const EdgeInsets.all(4),
+                        decoration: const BoxDecoration(
+                          color: Color(0xFF30D158),
+                          shape: BoxShape.circle,
+                        ),
+                        child: const Icon(
+                          Icons.check,
+                          size: 10,
+                          color: Colors.white,
+                        ),
+                      ),
+                    ),
+                ],
+              ),
             ),
           ),
         ),
-        const SizedBox(height: 8),
+
+        const SizedBox(height: 6),
+
         // Title
         Padding(
           padding: const EdgeInsets.symmetric(horizontal: 4),
@@ -122,8 +160,8 @@ class MobilePosterCard extends StatelessWidget {
             textAlign: TextAlign.center,
             maxLines: 1,
             overflow: TextOverflow.ellipsis,
-            style: const TextStyle(
-              color: AppColors.textPrimary,
+            style: TextStyle(
+              color: AppDecorations.textPrimary(context),
               fontSize: 12,
               fontWeight: FontWeight.w500,
             ),

lib/mobile/widgets/mobile_scaffold.dart

@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:intl/intl.dart';
-import '../../core/theme/app_colors.dart';
+import '../../core/theme/app_decorations.dart';
 
 class MobileScaffold extends ConsumerStatefulWidget {
   final Widget child;
@@ -34,7 +34,7 @@ class _MobileScaffoldState extends ConsumerState<MobileScaffold> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: AppColors.background,
+      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
       body: Column(
         children: [
           // Top Navigation Bar (Redesigned)
@@ -51,19 +51,7 @@ class _MobileScaffoldState extends ConsumerState<MobileScaffold> {
               child: Container(
                 height: 64, // Taller pill to accommodate larger logo
                 padding: const EdgeInsets.symmetric(horizontal: 12),
-                decoration: BoxDecoration(
-                  color: const Color(0xFF1A1A1A)
-                      .withOpacity(0.9), // Slightly more opaque pill
-                  borderRadius: BorderRadius.circular(40),
-                  border: Border.all(color: Colors.white.withOpacity(0.1)),
-                  boxShadow: [
-                    BoxShadow(
-                      color: Colors.black.withOpacity(0.3),
-                      blurRadius: 10,
-                      spreadRadius: 2,
-                    ),
-                  ],
-                ),
+                decoration: AppDecorations.navPill(context),
                 child: Row(
                   children: [
                     // --- LEFT: LOGO & BRAND ---
@@ -89,11 +77,11 @@ class _MobileScaffoldState extends ConsumerState<MobileScaffold> {
                             ),
                           ),
                           const SizedBox(width: 12),
-                          const Text(
+                          Text(
                             'XtremFlow',
                             style: TextStyle(
-                              color: Colors.white,
-                              fontSize: 20, // Slightly larger text
+                              color: AppDecorations.textPrimary(context),
+                              fontSize: 20,
                               fontWeight: FontWeight.bold,
                               fontFamily: 'Inter',
                             ),
@@ -127,8 +115,7 @@ class _MobileScaffoldState extends ConsumerState<MobileScaffold> {
                           vertical: 8,
                         ),
                         decoration: BoxDecoration(
-                          color: Colors.white
-                              .withOpacity(0.08), // Subtle background
+                          color: AppDecorations.divider(context),
                           borderRadius: BorderRadius.circular(20),
                         ),
                         child: StreamBuilder<DateTime>(
@@ -139,8 +126,8 @@ class _MobileScaffoldState extends ConsumerState<MobileScaffold> {
                                 DateFormat('HH:mm').format(snapshot.data!);
                             return Text(
                               time,
-                              style: const TextStyle(
-                                color: Colors.white,
+                              style: TextStyle(
+                                color: AppDecorations.textPrimary(context),
                                 fontWeight: FontWeight.bold,
                                 fontSize: 16,
                               ),
@@ -214,11 +201,12 @@ class _AppleTVNavItemState extends State<_AppleTVNavItem> {
 
   @override
   Widget build(BuildContext context) {
-    // Selected: Black text on White bg
-    // Focused: White text on Translucent bg
-    // Normal: White70 text on Transparent bg
-    final Color textColor = widget.isSelected ? Colors.black : Colors.white;
-    final Color iconColor = widget.isSelected ? Colors.black : Colors.white;
+    const Color selectedColor = Color(0xFF0A84FF);
+    final Color unselectedColor = AppDecorations.textSecondary(context);
+    final Color textColor =
+        widget.isSelected ? Colors.white : unselectedColor;
+    final Color iconColor =
+        widget.isSelected ? Colors.white : unselectedColor;
     final FontWeight fontWeight =
         widget.isSelected ? FontWeight.w700 : FontWeight.w500;
 
@@ -243,15 +231,13 @@ class _AppleTVNavItemState extends State<_AppleTVNavItem> {
           padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
           decoration: BoxDecoration(
             color: widget.isSelected
-                ? Colors.white
+                ? selectedColor
                 : (_isFocused
-                    ? Colors.white.withOpacity(0.2) // Explicit focus highlight
+                    ? AppDecorations.divider(context).withValues(alpha: 0.2)
                     : Colors.transparent),
-            borderRadius: BorderRadius.circular(20), // Matches pill shape
+            borderRadius: BorderRadius.circular(20),
             border: _isFocused && !widget.isSelected
-                ? Border.all(
-                    color: Colors.white.withOpacity(0.3),
-                  ) // Subtle border for focus
+                ? Border.all(color: AppDecorations.divider(context))
                 : null,
           ),
           child: Row(

lib/mobile/widgets/tv_focusable.dart

@@ -23,8 +23,8 @@ class TVFocusable extends StatefulWidget {
     this.onFocus,
     this.focusNode,
     this.autofocus = false,
-    this.scale = 1.08, // More visible scale
-    this.borderWidth = 3.0,
+    this.scale = 1.05, // Apple TV subtle lift
+    this.borderWidth = 2.0,
     this.focusColor = Colors.white,
     this.borderRadius,
     this.longPressDuration = const Duration(seconds: 3),
@@ -157,15 +157,14 @@ class _TVFocusableState extends State<TVFocusable> {
                         boxShadow: [
                           BoxShadow(
                             color: Colors.black
-                                .withOpacity(0.5), // Shadow for depth
-                            blurRadius: 10,
-                            offset: const Offset(0, 4),
+                                .withOpacity(0.5), // Deep shadow for lift
+                            blurRadius: 16,
+                            offset: const Offset(0, 6),
                           ),
-                          BoxShadow(
-                            color: widget.focusColor
-                                .withOpacity(0.3), // Glow effect
+                          const BoxShadow(
+                            color: Color(0x40FFFFFF), // White glow
                             blurRadius: 12,
-                            spreadRadius: 2,
+                            spreadRadius: 0,
                           ),
                         ],
                       )