Merge remote-tracking branch 'origin/main' into main

Resolved conflicts by keeping remote functional features (RecordingScheduler,
FFmpeg HLS transcoding, mobile player, channel cards) and restoring local
Stitch theme foundation (app_colors, app_theme, glass_container, mobile_theme).

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

lib/core/api/api_client.dart

@@ -16,12 +16,24 @@ class ApiClient {
       connectTimeout: const Duration(seconds: 60),
       receiveTimeout: const Duration(seconds: 60),
     ),);
-    
+
     // Add interceptor for logging
     _dio.interceptors.add(LogInterceptor(
       requestBody: true,
       responseBody: true,
     ),);
+
+    // Restore token from localStorage on initialization
+    _restoreTokenFromStorage();
+  }
+
+  /// Restore token from localStorage on app startup
+  void _restoreTokenFromStorage() {
+    final storedToken = getStoredToken();
+    if (storedToken != null) {
+      _token = storedToken;
+      _dio.options.headers['Authorization'] = 'Bearer $storedToken';
+    }
   }
 
   /// Get base URL (same origin for production)

lib/core/config/optimization_config.dart

@@ -0,0 +1,323 @@
+/// Application optimization configuration
+///
+/// This file contains performance tuning settings for XtremFlow
+library;
+
+class OptimizationConfig {
+  // ============================================
+  // STREAMING OPTIMIZATION
+  // ============================================
+
+  /// Enable adaptive bitrate streaming
+  static const bool enableAdaptiveBitrate = true;
+
+  /// Default quality profile for new streams
+  static const String defaultQualityResolution = '720x480'; // 480p HD
+
+  /// Maximum buffer size in seconds
+  static const int maxBufferSeconds = 30;
+
+  /// Minimum buffer size in seconds before rebuffering
+  static const int minBufferSeconds = 2;
+
+  /// Target buffer size in seconds
+  static const int targetBufferSeconds = 8;
+
+  /// Enable HLS v3 compression
+  static const bool enableHlsCompression = true;
+
+  /// FFmpeg preset for live transcoding
+  static const String ffmpegLivePreset =
+      'medium'; // ultrafast, fast, medium, slow
+
+  /// FFmpeg preset for VOD transcoding
+  static const String ffmpegVodPreset = 'medium';
+
+  /// Enable NVIDIA GPU acceleration if available
+  static const bool enableNvidiaGpu = true;
+
+  // ============================================
+  // CACHE OPTIMIZATION
+  // ============================================
+
+  /// Enable aggressive image caching
+  static const bool enableImageCache = true;
+
+  /// Maximum image cache size in MB
+  static const int maxImageCacheMb = 100;
+
+  /// Maximum memory cache size in MB
+  static const int maxMemoryCacheMb = 200;
+
+  /// Cache expiration time in hours
+  static const int cacheExpirationHours = 24;
+
+  /// Enable network cache interceptor
+  static const bool enableNetworkCache = true;
+
+  /// Network cache retention time in days
+  static const int networkCacheRetentionDays = 3;
+
+  // ============================================
+  // UI OPTIMIZATION
+  // ============================================
+
+  /// Number of items to load per page
+  static const int itemsPerPage = 50;
+
+  /// Number of items per page for Live TV grid view
+  static const int liveItemsPerPage = 100;
+
+  /// Enable lazy loading for content lists
+  static const bool enableLazyLoading = true;
+
+  /// Enable image fade animation on load
+  static const bool enableImageFadeAnimation = true;
+
+  /// Image fade animation duration in milliseconds
+  static const int imageFadeAnimationMs = 300;
+
+  /// Enable smooth scrolling
+  static const bool enableSmoothScroll = true;
+
+  /// TextureView pool size for video rendering (Android)
+  static const int videoTexturePoolSize = 4;
+
+  // ============================================
+  // NETWORK OPTIMIZATION
+  // ============================================
+
+  /// Connection timeout in seconds
+  static const int connectionTimeoutSeconds = 30;
+
+  /// Receive timeout in seconds
+  static const int receiveTimeoutSeconds = 60;
+
+  /// Max concurrent downloads
+  static const int maxConcurrentDownloads = 3;
+
+  /// Enable network optimization (bandwidth detection, etc)
+  static const bool enableNetworkOptimization = true;
+
+  /// Enable request retry on failure
+  static const bool enableAutoRetry = true;
+
+  /// Max retry attempts
+  static const int maxRetryAttempts = 3;
+
+  /// Enable gzip compression for API requests
+  static const bool enableGzipCompression = true;
+
+  // ============================================
+  // MEMORY OPTIMIZATION
+  // ============================================
+
+  /// Enable memory profiling on debug builds
+  static const bool enableMemoryProfiling = false;
+
+  /// Collect memory stats every N seconds
+  static const int memoryProfilingIntervalSeconds = 10;
+
+  /// Enable aggressive memory cleanup on app background
+  static const bool enableMemoryCleanupOnBackground = true;
+
+  /// Max number of cached image entries
+  static const int maxCachedImages = 500;
+
+  // ============================================
+  // PERFORMANCE MONITORING
+  // ============================================
+
+  /// Enable performance monitoring
+  static const bool enablePerformanceMonitoring = true;
+
+  /// Monitor frame rate drops
+  static const bool monitorFrameRate = true;
+
+  /// Frame rate warning threshold (FPS)
+  static const int frameRateWarningThreshold = 30;
+
+  /// Enable network metrics collection
+  static const bool collectNetworkMetrics = true;
+
+  /// Enable streaming quality metrics
+  static const bool collectStreamingMetrics = true;
+
+  // ============================================
+  // FEATURE FLAGS
+  // ============================================
+
+  /// Enable EPG (Electronic Program Guide)
+  static const bool enableEpg = true;
+
+  /// Enable offline downloads
+  static const bool enableOfflineDownloads = true;
+
+  /// Enable continue watching feature
+  static const bool enableContinueWatching = true;
+
+  /// Enable trending content
+  static const bool enableTrending = true;
+
+  /// Enable adaptive streaming quality selector
+  static const bool enableQualitySelector = true;
+
+  /// Enable subtitle support
+  static const bool enableSubtitles = true;
+
+  /// Enable watch history tracking
+  static const bool enableWatchHistory = true;
+
+  /// Enable user favorites
+  static const bool enableFavorites = true;
+
+  // ============================================
+  // HELPER METHODS
+  // ============================================
+
+  /// Get optimized image cache settings
+  static Map<String, dynamic> getImageCacheSettings() => {
+        'maxSize': maxImageCacheMb * 1024 * 1024,
+        'maxItems': maxCachedImages,
+        'enableAnimation': enableImageFadeAnimation,
+        'fadeAnimationMs': imageFadeAnimationMs,
+      };
+
+  /// Get streaming configuration
+  static Map<String, dynamic> getStreamingConfig() => {
+        'enableAdaptiveBitrate': enableAdaptiveBitrate,
+        'defaultQuality': defaultQualityResolution,
+        'maxBuffer': maxBufferSeconds,
+        'minBuffer': minBufferSeconds,
+        'targetBuffer': targetBufferSeconds,
+        'enableHlsCompression': enableHlsCompression,
+        'ffmpegPreset': ffmpegLivePreset,
+        'enableGpu': enableNvidiaGpu,
+      };
+
+  /// Get network configuration
+  static Map<String, dynamic> getNetworkConfig() => {
+        'connectTimeout': connectionTimeoutSeconds,
+        'receiveTimeout': receiveTimeoutSeconds,
+        'enableAutoRetry': enableAutoRetry,
+        'maxRetries': maxRetryAttempts,
+        'enableGzip': enableGzipCompression,
+        'enableCache': enableNetworkCache,
+        'cacheRetentionDays': networkCacheRetentionDays,
+      };
+
+  /// Get UI performance settings
+  static Map<String, dynamic> getUiPerformanceSettings() => {
+        'itemsPerPage': itemsPerPage,
+        'liveItemsPerPage': liveItemsPerPage,
+        'enableLazyLoading': enableLazyLoading,
+        'enableSmoothScroll': enableSmoothScroll,
+        'maxTexturePoolSize': videoTexturePoolSize,
+      };
+
+  /// Get memory optimization settings
+  static Map<String, dynamic> getMemoryOptimizationSettings() => {
+        'enableProfiling': enableMemoryProfiling,
+        'profilingInterval': memoryProfilingIntervalSeconds,
+        'aggressiveCleanup': enableMemoryCleanupOnBackground,
+        'maxImageCacheMb': maxImageCacheMb,
+        'maxMemoryCacheMb': maxMemoryCacheMb,
+      };
+
+  /// Get all enabled features
+  static List<String> getEnabledFeatures() => [
+        if (enableEpg) 'EPG',
+        if (enableOfflineDownloads) 'OfflineDownloads',
+        if (enableContinueWatching) 'ContinueWatching',
+        if (enableTrending) 'Trending',
+        if (enableQualitySelector) 'QualitySelector',
+        if (enableSubtitles) 'Subtitles',
+        if (enableWatchHistory) 'WatchHistory',
+        if (enableFavorites) 'Favorites',
+      ];
+
+  /// Print configuration summary
+  static void printSummary() {
+    print('''
+╔════════════════════════════════════════════════════════════╗
+║          XtremFlow Optimization Configuration             ║
+╠════════════════════════════════════════════════════════════╣
+║ STREAMING                                                  ║
+║  • Adaptive Bitrate: $enableAdaptiveBitrate                       ║
+║  • Default Quality: $defaultQualityResolution                    ║
+║  • GPU Acceleration: $enableNvidiaGpu                    ║
+║                                                            ║
+║ CACHE                                                      ║
+║  • Image Cache: ${maxImageCacheMb}MB                         ║
+║  • Memory Cache: ${maxMemoryCacheMb}MB                       ║
+║  • Network Cache: $enableNetworkCache                     ║
+║                                                            ║
+║ NETWORK                                                    ║
+║  • Connection Timeout: ${connectionTimeoutSeconds}s                 ║
+║  • Auto Retry: $enableAutoRetry                    ║
+║  • Max Retries: $maxRetryAttempts                        ║
+║                                                            ║
+║ FEATURES ENABLED: ${getEnabledFeatures().join(', ')}║
+║                                                            ║
+╚════════════════════════════════════════════════════════════╝
+''');
+  }
+}
+
+/// Runtime optimization flags
+class RuntimeOptimizations {
+  static bool hasHighPerformanceDevice = false;
+  static bool isLowBatteryMode = false;
+  static bool isLowMemoryMode = false;
+  static int availableMemoryMb = 0;
+  static int availableStorageMb = 0;
+
+  /// Adjust settings based on device capabilities
+  static void calibrateForDevice({
+    required int totalMemoryMb,
+    required int freeMemoryMb,
+    required int storageFreeMb,
+  }) {
+    availableMemoryMb = freeMemoryMb;
+    availableStorageMb = storageFreeMb;
+
+    // Detect low memory condition
+    isLowMemoryMode = freeMemoryMb < 500;
+
+    // Detect low storage
+    if (storageFreeMb < 1000) {
+      print(
+        '[WARNING] Low storage available: ${storageFreeMb}MB. Disabling offline downloads.',
+      );
+    }
+
+    // High performance device detection
+    hasHighPerformanceDevice = totalMemoryMb > 4000 && storageFreeMb > 5000;
+
+    print(
+      '[Device Calibration] Memory: ${freeMemoryMb}MB, Storage: ${storageFreeMb}MB',
+    );
+  }
+
+  /// Get dynamic cache size based on available memory
+  static int getDynamicCacheSize() {
+    if (isLowMemoryMode) {
+      return 50; // 50MB on low memory devices
+    }
+    if (hasHighPerformanceDevice) {
+      return 200; // 200MB on high performance devices
+    }
+    return OptimizationConfig.maxMemoryCacheMb;
+  }
+
+  /// Get dynamic image cache size
+  static int getDynamicImageCacheSize() {
+    if (isLowMemoryMode) {
+      return 30; // 30MB
+    }
+    if (hasHighPerformanceDevice) {
+      return 150; // 150MB
+    }
+    return OptimizationConfig.maxImageCacheMb;
+  }
+}

lib/core/services/adaptive_bitrate_service.dart

@@ -0,0 +1,346 @@
+/// Adaptive Bitrate (ABR) Streaming Handler for HLS
+///
+/// Supports multi-bitrate HLS playlists for adaptive streaming
+/// with fallback options for poor network conditions
+library;
+
+/// Represents a video quality level for adaptive bitrate streaming
+class QualityLevel {
+  final String resolution;
+  final int bitrateBps;
+  final int width;
+  final int height;
+  final String ffmpegPreset; // ultrafast, fast, medium, slow
+  final String label;
+
+  const QualityLevel({
+    required this.resolution,
+    required this.bitrateBps,
+    required this.width,
+    required this.height,
+    this.ffmpegPreset = 'medium',
+    required this.label,
+  });
+
+  /// Get FFmpeg video bitrate argument
+  String get videoBitrateArg => '${(bitrateBps * 0.75).toInt() ~/ 1000}k';
+
+  /// Get FFmpeg maxrate argument (150% of bitrate)
+  String get maxRateArg => '${((bitrateBps * 1.5).toInt() ~/ 1000)}k';
+
+  /// Get FFmpeg buffer size argument
+  String get bufferSizeArg => '${((bitrateBps * 2).toInt() ~/ 1000)}k';
+
+  @override
+  String toString() => '$label ($resolution - ${bitrateBps ~/ 1000000}Mbps)';
+}
+
+/// Standard quality profiles for adaptive streaming
+class QualityProfiles {
+  // Mobile & Low Bandwidth
+  static const mobile240p = QualityLevel(
+    resolution: '426x240',
+    bitrateBps: 500000, // 0.5 Mbps
+    width: 426,
+    height: 240,
+    ffmpegPreset: 'ultrafast',
+    label: '240p (Low)',
+  );
+
+  static const mobile360p = QualityLevel(
+    resolution: '640x360',
+    bitrateBps: 1200000, // 1.2 Mbps
+    width: 640,
+    height: 360,
+    ffmpegPreset: 'ultrafast',
+    label: '360p (Mobile)',
+  );
+
+  // Standard Quality
+  static const hd480p = QualityLevel(
+    resolution: '854x480',
+    bitrateBps: 2500000, // 2.5 Mbps
+    width: 854,
+    height: 480,
+    ffmpegPreset: 'fast',
+    label: '480p (SD)',
+  );
+
+  static const hd720p = QualityLevel(
+    resolution: '1280x720',
+    bitrateBps: 5000000, // 5 Mbps
+    width: 1280,
+    height: 720,
+    ffmpegPreset: 'medium',
+    label: '720p (HD)',
+  );
+
+  // High Quality
+  static const fhd1080p = QualityLevel(
+    resolution: '1920x1080',
+    bitrateBps: 8000000, // 8 Mbps
+    width: 1920,
+    height: 1080,
+    ffmpegPreset: 'medium',
+    label: '1080p (Full HD)',
+  );
+
+  // Ultra HD
+  static const uhd2k = QualityLevel(
+    resolution: '2560x1440',
+    bitrateBps: 15000000, // 15 Mbps
+    width: 2560,
+    height: 1440,
+    ffmpegPreset: 'slow',
+    label: '2K (QHD)',
+  );
+
+  static const uhd4k = QualityLevel(
+    resolution: '3840x2160',
+    bitrateBps: 25000000, // 25 Mbps
+    width: 3840,
+    height: 2160,
+    ffmpegPreset: 'slow',
+    label: '4K',
+  );
+
+  /// Get default profiles for balanced streaming
+  static List<QualityLevel> getBalancedProfiles() => [
+        mobile240p,
+        mobile360p,
+        hd480p,
+        hd720p,
+        fhd1080p,
+      ];
+
+  /// Get all available profiles
+  static List<QualityLevel> getAllProfiles() => [
+        mobile240p,
+        mobile360p,
+        hd480p,
+        hd720p,
+        fhd1080p,
+        uhd2k,
+        uhd4k,
+      ];
+
+  /// Get profiles suitable for streaming type
+  static List<QualityLevel> getProfiles({
+    required String type, // 'live', 'vod', 'low-bandwidth'
+    int? maxBitrateBps,
+  }) {
+    List<QualityLevel> profiles = getBalancedProfiles();
+
+    // Filter by streaming type
+    if (type == 'live') {
+      // Live TV prefers lower bitrates for stability
+      profiles = [mobile240p, mobile360p, hd480p, hd720p];
+    } else if (type == 'low-bandwidth') {
+      // Mobile/low bandwidth - only lower profiles
+      profiles = [mobile240p, mobile360p, hd480p];
+    }
+
+    // Filter by max bitrate if specified
+    if (maxBitrateBps != null) {
+      profiles = profiles.where((p) => p.bitrateBps <= maxBitrateBps).toList();
+    }
+
+    // Ensure at least one profile
+    if (profiles.isEmpty) {
+      profiles = [mobile240p];
+    }
+
+    return profiles;
+  }
+}
+
+/// Bandwidth detector for adaptive bitrate selection
+class BandwidthDetector {
+  final _samples = <DateTime, int>{}; // timestamp -> bytes downloaded
+  final int _totalBytesLastPeriod = 0;
+  final Duration _sampleWindow = const Duration(seconds: 10);
+
+  /// Record bytes downloaded at current time
+  void recordBytes(int bytes) {
+    final now = DateTime.now();
+    _samples[now] = bytes;
+
+    // Clean up old samples
+    final cutoff = now.subtract(_sampleWindow);
+    _samples.removeWhere((time, _) => time.isBefore(cutoff));
+  }
+
+  /// Estimate current bandwidth in bps
+  int estimateBandwidthBps() {
+    if (_samples.isEmpty) return 0;
+
+    int totalBytes = 0;
+    for (var bytes in _samples.values) {
+      totalBytes += bytes;
+    }
+
+    final timeSpan = DateTime.now()
+        .difference(
+          _samples.keys.reduce((a, b) => a.isBefore(b) ? a : b),
+        )
+        .inMilliseconds;
+
+    if (timeSpan == 0) return 0;
+
+    // bytes per second * 8 = bits per second
+    return ((totalBytes / (timeSpan / 1000)) * 8).toInt();
+  }
+
+  /// Get estimated bandwidth in Mbps
+  double estimateBandwidthMbps() {
+    return estimateBandwidthBps() / 1000000;
+  }
+
+  /// Select best quality level based on bandwidth
+  static QualityLevel selectBestQuality(
+    int bandwidthBps,
+    List<QualityLevel> availableProfiles,
+  ) {
+    // Use 75% of detected bandwidth for conservative selection
+    final targetBitrate = (bandwidthBps * 0.75).toInt();
+
+    // Find highest quality that fits our bandwidth
+    var best = availableProfiles[0];
+    for (final profile in availableProfiles) {
+      if (profile.bitrateBps <= targetBitrate) {
+        best = profile;
+      } else {
+        break;
+      }
+    }
+
+    return best;
+  }
+}
+
+/// Master playlist generator for HLS variant streams
+class HlsMasterPlaylistGenerator {
+  /// Generate M3U8 master playlist with multiple quality variants
+  static String generateMasterPlaylist({
+    required List<QualityLevel> qualityLevels,
+    required String baseUrl,
+    bool includeSubtitles = false,
+  }) {
+    final buffer = StringBuffer();
+
+    // HLS version 3 for compatibility
+    buffer.writeln('#EXTM3U');
+    buffer.writeln('#EXT-X-VERSION:3');
+    buffer.writeln('#EXT-X-TARGET-DURATION:10');
+    buffer.writeln('#EXT-X-MEDIA-SEQUENCE:0');
+
+    // Variant streams (quality levels)
+    for (final quality in qualityLevels) {
+      buffer.writeln('#EXT-X-STREAM-INF:BANDWIDTH=${quality.bitrateBps},'
+          'RESOLUTION=${quality.width}x${quality.height}');
+      buffer
+          .writeln('$baseUrl/variant_${quality.width}x${quality.height}.m3u8');
+    }
+
+    return buffer.toString();
+  }
+
+  /// Generate variant playlist for specific quality level
+  static String generateVariantPlaylist({
+    required String segmentPrefix,
+    required int totalSegments,
+    required double targetDuration,
+    required bool isFinal,
+  }) {
+    final buffer = StringBuffer();
+
+    buffer.writeln('#EXTM3U');
+    buffer.writeln('#EXT-X-VERSION:3');
+    buffer.writeln('#EXT-X-TARGET-DURATION:${targetDuration.ceil()}');
+    buffer.writeln('#EXT-X-MEDIA-SEQUENCE:0');
+
+    // Add segment entries
+    for (int i = 0; i < totalSegments; i++) {
+      buffer.writeln('#EXTINF:$targetDuration,');
+      buffer.writeln('${segmentPrefix}_$i.ts');
+    }
+
+    if (isFinal) {
+      buffer.writeln('#EXT-X-ENDLIST');
+    }
+
+    return buffer.toString();
+  }
+}
+
+/// Quality selector based on network conditions
+class QualitySelector {
+  final _detector = BandwidthDetector();
+  QualityLevel _currentQuality;
+  final _listeners = <VoidCallback>[];
+
+  QualitySelector({
+    required QualityLevel initialQuality,
+  }) : _currentQuality = initialQuality;
+
+  QualityLevel get currentQuality => _currentQuality;
+
+  /// Record bandwidth and auto-adjust quality
+  void recordBandwidth(int bytesDownloaded) {
+    _detector.recordBytes(bytesDownloaded);
+
+    // Check if we should switch quality
+    _maybeAdjustQuality();
+  }
+
+  /// Manually set quality
+  void setQuality(QualityLevel quality) {
+    if (_currentQuality != quality) {
+      _currentQuality = quality;
+      _notifyListeners();
+    }
+  }
+
+  /// Force rebuffer wait before switching down
+  void rebufferDetected() {
+    // Switch to lower quality if rebuffering occurs
+    final allProfiles = QualityProfiles.getAllProfiles();
+    final currentIndex = allProfiles.indexOf(_currentQuality);
+    if (currentIndex > 0) {
+      setQuality(allProfiles[currentIndex - 1]);
+    }
+  }
+
+  void _maybeAdjustQuality() {
+    final bandwidthBps = _detector.estimateBandwidthBps();
+    final availableProfiles = QualityProfiles.getBalancedProfiles();
+
+    // Only switch if significantly different from current
+    final overhead = _currentQuality.bitrateBps * 1.2;
+    if (bandwidthBps > overhead ||
+        bandwidthBps < _currentQuality.bitrateBps * 0.5) {
+      final bestQuality =
+          BandwidthDetector.selectBestQuality(bandwidthBps, availableProfiles);
+      setQuality(bestQuality);
+    }
+  }
+
+  void addListener(VoidCallback listener) {
+    _listeners.add(listener);
+  }
+
+  void removeListener(VoidCallback listener) {
+    _listeners.remove(listener);
+  }
+
+  void _notifyListeners() {
+    for (final listener in _listeners) {
+      listener();
+    }
+  }
+
+  double getEstimatedBandwidthMbps() => _detector.estimateBandwidthMbps();
+}
+
+// Type alias for void callback
+typedef VoidCallback = void Function();

lib/core/services/cache_service.dart

@@ -0,0 +1,224 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+/// Cache entry with metadata
+class CacheEntry<T> {
+  final T data;
+  final DateTime timestamp;
+  final int sizeEstimate;
+  int accessCount;
+  DateTime lastAccess;
+
+  CacheEntry({
+    required this.data,
+    required this.sizeEstimate,
+  })  : timestamp = DateTime.now(),
+        lastAccess = DateTime.now(),
+        accessCount = 0;
+
+  bool isExpired({Duration ttl = const Duration(hours: 24)}) {
+    return DateTime.now().difference(timestamp) > ttl;
+  }
+
+  void markAccess() {
+    accessCount++;
+    lastAccess = DateTime.now();
+  }
+}
+
+/// Optimized cache service for memory management
+class CacheService {
+  static const _maxMemoryCacheSizeMb = 200;
+  static const _maxImageCacheItems = 500;
+
+  final Map<String, CacheEntry> _cache = {};
+  int _totalSizeBytes = 0;
+
+  /// Cache data with automatic size management
+  void cache<T>(String key, T value, {int estimatedSize = 1000}) {
+    // Remove old entry if exists
+    if (_cache.containsKey(key)) {
+      _totalSizeBytes -= _cache[key]!.sizeEstimate;
+    }
+
+    _cache[key] = CacheEntry(
+      data: value,
+      sizeEstimate: estimatedSize,
+    );
+    _totalSizeBytes += estimatedSize;
+
+    // Trim cache if over size limit
+    _trimCacheIfNeeded();
+  }
+
+  /// Get cached data
+  T? get<T>(String key) {
+    final entry = _cache[key];
+    if (entry != null && !entry.isExpired()) {
+      entry.markAccess();
+      return entry.data as T;
+    }
+    return null;
+  }
+
+  /// Check if key exists and is valid
+  bool has(String key) {
+    final entry = _cache[key];
+    return entry != null && !entry.isExpired();
+  }
+
+  /// Get cache stats
+  Map<String, dynamic> getStats() => {
+        'totalSize': _totalSizeBytes,
+        'totalSizeMb': _totalSizeBytes / (1024 * 1024),
+        'itemCount': _cache.length,
+        'averageSizePerItem':
+            _cache.isEmpty ? 0 : _totalSizeBytes ~/ _cache.length,
+      };
+
+  /// Clear all cache
+  void clear() {
+    _cache.clear();
+    _totalSizeBytes = 0;
+  }
+
+  /// Clear expired entries
+  void clearExpired() {
+    final now = DateTime.now();
+    final toRemove = _cache.entries
+        .where((e) => e.value.isExpired())
+        .map((e) => e.key)
+        .toList();
+
+    for (final key in toRemove) {
+      _totalSizeBytes -= _cache[key]!.sizeEstimate;
+      _cache.remove(key);
+    }
+  }
+
+  /// Trim cache by removing least recently used entries
+  void _trimCacheIfNeeded() {
+    const maxSize = _maxMemoryCacheSizeMb * 1024 * 1024;
+    if (_totalSizeBytes > maxSize) {
+      // Remove least recently accessed entries
+      final sorted = _cache.entries.toList()
+        ..sort((a, b) => a.value.accessCount.compareTo(b.value.accessCount));
+
+      for (final entry in sorted) {
+        if (_totalSizeBytes <= maxSize * 0.8) break;
+        _totalSizeBytes -= entry.value.sizeEstimate;
+        _cache.remove(entry.key);
+      }
+    }
+  }
+}
+
+/// Cached image metadata
+class CachedImage {
+  final String url;
+  final int sizeBytes;
+  final DateTime cachedAt;
+  int accessCount = 0;
+
+  CachedImage({
+    required this.url,
+    required this.sizeBytes,
+  }) : cachedAt = DateTime.now();
+}
+
+/// Image cache with size limiting
+class ImageCacheManager {
+  static const _maxImageMemoryMb = 100;
+  static const _maxImages = 500;
+
+  final Map<String, CachedImage> _imageCache = {};
+  int _totalMemoryBytes = 0;
+
+  /// Add image to cache
+  void cacheImage(String url, int sizeEstimateBytes) {
+    if (_imageCache.length >= _maxImages) {
+      _evictLeastUsed();
+    }
+
+    _imageCache[url] = CachedImage(
+      url: url,
+      sizeBytes: sizeEstimateBytes,
+    );
+    _totalMemoryBytes += sizeEstimateBytes;
+
+    // Trim if over size
+    while (_totalMemoryBytes > _maxImageMemoryMb * 1024 * 1024) {
+      _evictLeastUsed();
+    }
+  }
+
+  /// Check if image is cached
+  bool isCached(String url) => _imageCache.containsKey(url);
+
+  /// Mark image as accessed
+  void markAccessed(String url) {
+    if (_imageCache.containsKey(url)) {
+      _imageCache[url]!.accessCount++;
+    }
+  }
+
+  /// Evict least used image
+  void _evictLeastUsed() {
+    if (_imageCache.isEmpty) return;
+
+    final leastUsed = _imageCache.entries
+        .reduce((a, b) => a.value.accessCount < b.value.accessCount ? a : b);
+
+    _totalMemoryBytes -= leastUsed.value.sizeBytes;
+    _imageCache.remove(leastUsed.key);
+  }
+
+  /// Get cache stats
+  Map<String, dynamic> getStats() => {
+        'totalMemoryMb': _totalMemoryBytes / (1024 * 1024),
+        'cachedImages': _imageCache.length,
+        'maxImages': _maxImages,
+      };
+
+  /// Clear all image cache
+  void clear() {
+    _imageCache.clear();
+    _totalMemoryBytes = 0;
+  }
+}
+
+// Riverpod providers
+
+final cacheServiceProvider = Provider<CacheService>((ref) {
+  return CacheService();
+});
+
+final imageCacheManagerProvider = Provider<ImageCacheManager>((ref) {
+  return ImageCacheManager();
+});
+
+/// Provider for cache statistics
+final cacheStatsProvider =
+    StateNotifierProvider<CacheStatsNotifier, Map<String, dynamic>>((ref) {
+  final cacheService = ref.watch(cacheServiceProvider);
+  return CacheStatsNotifier(cacheService);
+});
+
+class CacheStatsNotifier extends StateNotifier<Map<String, dynamic>> {
+  final CacheService _cacheService;
+
+  CacheStatsNotifier(this._cacheService) : super(_cacheService.getStats());
+
+  void refreshStats() {
+    state = _cacheService.getStats();
+  }
+
+  void clearCache() {
+    _cacheService.clear();
+    state = _cacheService.getStats();
+  }
+
+  void clearExpired() {
+    _cacheService.clearExpired();
+    state = _cacheService.getStats();
+  }
+}

lib/core/services/network_service.dart

@@ -0,0 +1,287 @@
+import 'package:dio/dio.dart';
+import 'package:dio_cache_interceptor/dio_cache_interceptor.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'dart:io';
+
+/// Advanced network configuration for streaming
+class NetworkConfig {
+  final String? proxyUrl;
+  final String? userAgent;
+  final Map<String, String> customHeaders;
+  final Duration connectTimeout;
+  final Duration receiveTimeout;
+  final bool enableValidateSSL;
+
+  const NetworkConfig({
+    this.proxyUrl,
+    this.userAgent = 'VLC/3.0.18 LibVLC/3.0.18',
+    this.customHeaders = const {},
+    this.connectTimeout = const Duration(seconds: 30),
+    this.receiveTimeout = const Duration(seconds: 60),
+    this.enableValidateSSL = true,
+  });
+
+  NetworkConfig copyWith({
+    String? proxyUrl,
+    String? userAgent,
+    Map<String, String>? customHeaders,
+    Duration? connectTimeout,
+    Duration? receiveTimeout,
+    bool? enableValidateSSL,
+  }) =>
+      NetworkConfig(
+        proxyUrl: proxyUrl ?? this.proxyUrl,
+        userAgent: userAgent ?? this.userAgent,
+        customHeaders: customHeaders ?? this.customHeaders,
+        connectTimeout: connectTimeout ?? this.connectTimeout,
+        receiveTimeout: receiveTimeout ?? this.receiveTimeout,
+        enableValidateSSL: enableValidateSSL ?? this.enableValidateSSL,
+      );
+}
+
+/// Advanced network service with proxy and optimization support
+class OptimizedNetworkService {
+  late Dio _dio;
+  late NetworkConfig _config;
+  late CacheInterceptor _cacheInterceptor;
+
+  OptimizedNetworkService({required NetworkConfig config}) {
+    _config = config;
+    _initializeDio();
+  }
+
+  void _initializeDio() {
+    _cacheInterceptor = CacheInterceptor(
+      options: CacheOptions(
+        store: MemCacheStore(),
+        policy: CachePolicy.requestFirst,
+        hitCacheOnErrorExcept: [],
+        allowPostMethod: false,
+      ),
+    );
+
+    _dio = Dio(
+      BaseOptions(
+        connectTimeout: _config.connectTimeout,
+        receiveTimeout: _config.receiveTimeout,
+        validateStatus: (status) => status != null && status < 500,
+        headers: {
+          'User-Agent': _config.userAgent,
+          ..._config.customHeaders,
+        },
+      ),
+    );
+
+    // Configure proxy if specified
+    if (_config.proxyUrl != null) {
+      _configureProxy(_config.proxyUrl!);
+    }
+
+    // Add interceptors
+    _dio.interceptors.addAll([
+      _cacheInterceptor,
+      _BandwidthTrackingInterceptor(),
+      _RetryInterceptor(),
+    ]);
+  }
+
+  /// Configure native Dart HttpClient with proxy
+  void _configureProxy(String proxyUrl) {
+    try {
+      final uri = Uri.parse(proxyUrl);
+      _dio.httpClientAdapter = HttpClientAdapter(
+        onHttpClientCreate: (client) {
+          client.findProxy = (uri) {
+            return 'PROXY ${uri.host}:${uri.port}';
+          };
+          return client;
+        },
+      );
+    } catch (e) {
+      print('Error configuring proxy: $e');
+    }
+  }
+
+  /// Update network configuration
+  void updateConfig(NetworkConfig config) {
+    _config = config;
+    _initializeDio();
+  }
+
+  Dio get dio => _dio;
+
+  /// Download file with resume support
+  Future<void> downloadFile({
+    required String url,
+    required String savePath,
+    required Function(int, int) onProgress,
+    CancelToken? cancelToken,
+  }) async {
+    try {
+      await _dio.download(
+        url,
+        savePath,
+        onReceiveProgress: onProgress,
+        cancelToken: cancelToken,
+        options: Options(
+          headers: {'Range': 'bytes=0-'},
+        ),
+      );
+    } catch (e) {
+      rethrow;
+    }
+  }
+
+  /// Stream request with large response handling
+  Future<void> streamRequest({
+    required String url,
+    required Function(List<int>) onData,
+    required VoidCallback onDone,
+    required Function(dynamic) onError,
+    CancelToken? cancelToken,
+  }) async {
+    try {
+      final response = await _dio.get<ResponseBody>(
+        url,
+        options: Options(
+          responseType: ResponseType.stream,
+          receiveTimeout: const Duration(minutes: 5),
+        ),
+        cancelToken: cancelToken,
+      );
+
+      final stream = response.data?.stream;
+      if (stream != null) {
+        stream.listen(
+          onData,
+          onError: onError,
+          onDone: onDone,
+        );
+      }
+    } catch (e) {
+      onError(e);
+    }
+  }
+
+  /// Clear cache
+  void clearCache() {
+    _cacheInterceptor.clearCache();
+  }
+}
+
+/// Interceptor for tracking bandwidth
+class _BandwidthTrackingInterceptor extends Interceptor {
+  int _bytesReceived = 0;
+  DateTime _lastReset = DateTime.now();
+
+  int get bytesReceivedLastSecond {
+    final now = DateTime.now();
+    final secondsElapsed = now.difference(_lastReset).inSeconds;
+    if (secondsElapsed > 1) {
+      final bps = _bytesReceived ~/ secondsElapsed;
+      _bytesReceived = 0;
+      _lastReset = now;
+      return bps;
+    }
+    return 0;
+  }
+
+  @override
+  void onResponse(Response response, ResponseInterceptorHandler handler) {
+    if (response.data is ResponseBody) {
+      // Track bytes for streaming responses
+    } else if (response.data is List<int>) {
+      _bytesReceived += (response.data as List<int>).length;
+    }
+    handler.next(response);
+  }
+}
+
+/// Interceptor for automatic retry on failure
+class _RetryInterceptor extends Interceptor {
+  static const _maxRetries = 3;
+
+  @override
+  Future<void> onError(
+    DioException err,
+    ErrorInterceptorHandler handler,
+  ) async {
+    // Only retry on timeout or connection errors
+    if (err.type == DioExceptionType.connectionTimeout ||
+        err.type == DioExceptionType.receiveTimeout) {
+      final requestOptions = err.requestOptions;
+      int retryCount = requestOptions.extra['retryCount'] ?? 0;
+
+      if (retryCount < _maxRetries) {
+        requestOptions.extra['retryCount'] = retryCount + 1;
+
+        // Exponential backoff: 100ms, 200ms, 400ms
+        final delay = Duration(milliseconds: 100 * (1 << retryCount));
+        await Future.delayed(delay);
+
+        final dio = Dio();
+        try {
+          final response = await dio.request<dynamic>(
+            requestOptions.path,
+            options: Options(
+              method: requestOptions.method,
+              headers: requestOptions.headers,
+            ),
+            data: requestOptions.data,
+            queryParameters: requestOptions.queryParameters,
+          );
+          return handler.resolve(response);
+        } on DioException catch (e) {
+          return handler.next(e);
+        }
+      }
+    }
+
+    handler.next(err);
+  }
+}
+
+// Riverpod providers
+
+final networkConfigProvider =
+    StateNotifierProvider<NetworkConfigNotifier, NetworkConfig>((ref) {
+  return NetworkConfigNotifier();
+});
+
+class NetworkConfigNotifier extends StateNotifier<NetworkConfig> {
+  NetworkConfigNotifier()
+      : super(
+          const NetworkConfig(
+            userAgent: 'VLC/3.0.18 LibVLC/3.0.18',
+          ),
+        );
+
+  void setProxy(String? proxyUrl) {
+    state = state.copyWith(proxyUrl: proxyUrl);
+  }
+
+  void setUserAgent(String userAgent) {
+    state = state.copyWith(userAgent: userAgent);
+  }
+
+  void addCustomHeader(String key, String value) {
+    final newHeaders = {...state.customHeaders};
+    newHeaders[key] = value;
+    state = state.copyWith(customHeaders: newHeaders);
+  }
+
+  void removeCustomHeader(String key) {
+    final newHeaders = {...state.customHeaders};
+    newHeaders.remove(key);
+    state = state.copyWith(customHeaders: newHeaders);
+  }
+
+  void clearCustomHeaders() {
+    state = state.copyWith(customHeaders: {});
+  }
+}
+
+final networkServiceProvider = Provider<OptimizedNetworkService>((ref) {
+  final config = ref.watch(networkConfigProvider);
+  return OptimizedNetworkService(config: config);
+});

lib/core/services/playlist_api_service.dart

@@ -5,28 +5,29 @@ import '../models/playlist_config.dart';
 class PlaylistApiService {
   final ApiClient _api = ApiClient();
 
-  /// Get all playlists for current user
+  /// Get all playlists for current user.
+  ///
+  /// Throws on API error so the Riverpod [FutureProvider] can expose the
+  /// [AsyncError] state — ensuring the UI shows a proper error with Retry,
+  /// instead of silently rendering an empty list.
   Future<List<PlaylistConfig>> getPlaylists() async {
-    try {
-      final response = await _api.get('/api/playlists');
-      final data = response.data as Map<String, dynamic>;
-      final playlistsData = data['playlists'] as List<dynamic>;
+    final response = await _api.get('/api/playlists');
+    final data = response.data as Map<String, dynamic>;
+    final playlistsData = data['playlists'] as List<dynamic>;
 
-      return playlistsData.map((p) {
-        final playlist = p as Map<String, dynamic>;
-        return PlaylistConfig(
-          id: playlist['id'] as String,
-          name: playlist['name'] as String,
-          dns: playlist['serverUrl'] as String? ?? playlist['dns'] as String,
-          username: playlist['username'] as String,
-          password: playlist['password'] as String,
-          createdAt: DateTime.tryParse(playlist['createdAt'] as String? ?? '') ?? DateTime.now(),
-        );
-      }).toList();
-    } catch (e) {
-      print('Error fetching playlists: $e');
-      return [];
-    }
+    return playlistsData.map((p) {
+      final playlist = p as Map<String, dynamic>;
+      return PlaylistConfig(
+        id: playlist['id'] as String,
+        name: playlist['name'] as String,
+        dns: playlist['serverUrl'] as String? ?? playlist['dns'] as String,
+        username: playlist['username'] as String,
+        password: playlist['password'] as String,
+        createdAt:
+            DateTime.tryParse(playlist['createdAt'] as String? ?? '') ??
+                DateTime.now(),
+      );
+    }).toList();
   }
 
   /// Create a new playlist

lib/core/services/streaming_optimizer.dart

@@ -0,0 +1,267 @@
+import 'dart:async';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../core/services/adaptive_bitrate_service.dart';
+
+/// Video streaming performance metrics
+class StreamingMetrics {
+  final double averageNetworkBitrate;
+  final double currentNetworkBitrate;
+  final int bufferDurationMs;
+  final int segmentDownloadTimeMs;
+  final int rebufferCount;
+  final DateTime startTime;
+  final DateTime? endTime;
+
+  StreamingMetrics({
+    required this.averageNetworkBitrate,
+    required this.currentNetworkBitrate,
+    required this.bufferDurationMs,
+    required this.segmentDownloadTimeMs,
+    required this.rebufferCount,
+    required this.startTime,
+    this.endTime,
+  });
+
+  double get totalPlaybackSeconds =>
+      (endTime ?? DateTime.now()).difference(startTime).inSeconds.toDouble();
+
+  double get qualityScore {
+    // Score based on metrics
+    var score = 100.0;
+
+    // Penalize for rebuffering
+    score -= rebufferCount * 10;
+
+    // Penalize for low bitrate
+    if (currentNetworkBitrate < 1000000) score -= 20;
+    if (currentNetworkBitrate < 500000) score -= 30;
+
+    // Reward for smooth playback
+    if (rebufferCount == 0) score += 10;
+
+    return (score).clamp(0, 100);
+  }
+
+  @override
+  String toString() => '''
+StreamingMetrics:
+  - Avg Bitrate: ${(averageNetworkBitrate / 1000000).toStringAsFixed(2)} Mbps
+  - Current Bitrate: ${(currentNetworkBitrate / 1000000).toStringAsFixed(2)} Mbps
+  - Buffer: ${bufferDurationMs}ms
+  - Segment DL Time: ${segmentDownloadTimeMs}ms
+  - Rebuffers: $rebufferCount
+  - Quality Score: ${qualityScore.toStringAsFixed(1)}
+  - Duration: $totalPlaybackSeconds seconds
+''';
+}
+
+/// Advanced streaming optimizer
+class StreamingOptimizer {
+  final QualitySelector qualitySelector;
+  final _metrics = <StreamingMetrics>[];
+  late StreamingMetrics _currentMetrics;
+  final StreamController<StreamingMetrics> _metricsController =
+      StreamController.broadcast();
+  late Timer _metricsTimer;
+
+  final int _segmentStartTime = 0;
+  int _totalBytesDownloaded = 0;
+  int _rebufferCount = 0;
+  int _lastBufferNotificationTime = 0;
+
+  StreamingOptimizer({required this.qualitySelector}) {
+    _initializeMetrics();
+    _startMetricsCollection();
+  }
+
+  void _initializeMetrics() {
+    _currentMetrics = StreamingMetrics(
+      averageNetworkBitrate: 0,
+      currentNetworkBitrate: 0,
+      bufferDurationMs: 0,
+      segmentDownloadTimeMs: 0,
+      rebufferCount: 0,
+      startTime: DateTime.now(),
+    );
+  }
+
+  void _startMetricsCollection() {
+    _metricsTimer = Timer.periodic(const Duration(seconds: 5), (timer) {
+      _updateMetrics();
+    });
+  }
+
+  void _updateMetrics() {
+    final bandwidthBps = qualitySelector.getEstimatedBandwidthMbps() * 1000000;
+    _currentMetrics = StreamingMetrics(
+      averageNetworkBitrate: _totalBytesDownloaded > 0
+          ? (_totalBytesDownloaded * 8 / _currentMetrics.totalPlaybackSeconds)
+          : 0,
+      currentNetworkBitrate: bandwidthBps,
+      bufferDurationMs: _currentMetrics.bufferDurationMs,
+      segmentDownloadTimeMs: _currentMetrics.segmentDownloadTimeMs,
+      rebufferCount: _rebufferCount,
+      startTime: _currentMetrics.startTime,
+    );
+
+    _metrics.add(_currentMetrics);
+    _metricsController.add(_currentMetrics);
+  }
+
+  /// Record segment download
+  void recordSegmentDownload(int bytes, Duration downloadTime) {
+    _totalBytesDownloaded += bytes;
+    final downloadMs = downloadTime.inMilliseconds;
+
+    _currentMetrics = _currentMetrics;
+    qualitySelector.recordBandwidth(bytes);
+  }
+
+  /// Handle rebuffer event
+  void rebufferDetected(Duration duration) {
+    _rebufferCount++;
+    _lastBufferNotificationTime = DateTime.now().millisecondsSinceEpoch;
+
+    _currentMetrics = StreamingMetrics(
+      averageNetworkBitrate: _currentMetrics.averageNetworkBitrate,
+      currentNetworkBitrate: _currentMetrics.currentNetworkBitrate,
+      bufferDurationMs: duration.inMilliseconds,
+      segmentDownloadTimeMs: _currentMetrics.segmentDownloadTimeMs,
+      rebufferCount: _rebufferCount,
+      startTime: _currentMetrics.startTime,
+    );
+
+    // Auto downgrade quality on rebuffer
+    qualitySelector.rebufferDetected();
+  }
+
+  /// Get current streaming metrics
+  StreamingMetrics getMetrics() => _currentMetrics;
+
+  /// Get metrics stream for real-time monitoring
+  Stream<StreamingMetrics> get metricsStream => _metricsController.stream;
+
+  /// Get metrics history
+  List<StreamingMetrics> getMetricsHistory() => List.from(_metrics);
+
+  /// Finalize streaming session
+  void finalize() {
+    _currentMetrics = StreamingMetrics(
+      averageNetworkBitrate: _currentMetrics.averageNetworkBitrate,
+      currentNetworkBitrate: _currentMetrics.currentNetworkBitrate,
+      bufferDurationMs: _currentMetrics.bufferDurationMs,
+      segmentDownloadTimeMs: _currentMetrics.segmentDownloadTimeMs,
+      rebufferCount: _rebufferCount,
+      startTime: _currentMetrics.startTime,
+      endTime: DateTime.now(),
+    );
+  }
+
+  /// Clean up resources
+  void dispose() {
+    _metricsTimer.cancel();
+    _metricsController.close();
+  }
+}
+
+/// Buffer size calculator for adaptive streaming
+class BufferCalculator {
+  static const _minBufferMs = 1000; // 1 second
+  static const _targetBufferMs = 8000; // 8 seconds
+  static const _maxBufferMs = 30000; // 30 seconds
+
+  /// Calculate optimal buffer size based on bandwidth
+  static int calculateOptimalBuffer(
+    int estimatedBandwidthBps,
+    int bitrateOfCurrentQuality,
+  ) {
+    // Rule: buffer should be able to hold 8 seconds worth of content
+    final neededBytes = (bitrateOfCurrentQuality * _targetBufferMs) ~/ 8000;
+    final availableBytes = (estimatedBandwidthBps * _targetBufferMs) ~/ 8000;
+
+    // If we can't sustain the bitrate + have buffer, reduce target
+    if (availableBytes < neededBytes) {
+      return _minBufferMs;
+    }
+
+    // Normal case
+    return _targetBufferMs;
+  }
+
+  /// Calculate recommended segment duration
+  static Duration calculateSegmentDuration(int estimatedBandwidthBps) {
+    if (estimatedBandwidthBps < 500000) {
+      // Very low bandwidth: shorter segments
+      return const Duration(seconds: 2);
+    } else if (estimatedBandwidthBps < 2000000) {
+      // Low bandwidth
+      return const Duration(seconds: 4);
+    } else {
+      // Good bandwidth
+      return const Duration(seconds: 6);
+    }
+  }
+
+  /// Calculate maximum playback quality
+  static QualityLevel selectQualityForBandwidth(
+    int estimatedBandwidthBps,
+  ) {
+    final availableProfiles = QualityProfiles.getBalancedProfiles();
+    return BandwidthDetector.selectBestQuality(
+      estimatedBandwidthBps,
+      availableProfiles,
+    );
+  }
+}
+
+// Riverpod providers
+
+final streamingOptimizerProvider =
+    StateNotifierProvider<StreamingOptimizerNotifier, StreamingMetrics>((ref) {
+  final qualitySelector = ref.watch(qualitySelectorProvider);
+  return StreamingOptimizerNotifier(qualitySelector);
+});
+
+final qualitySelectorProvider = Provider<QualitySelector>((ref) {
+  return QualitySelector(initialQuality: QualityProfiles.hd720p);
+});
+
+class StreamingOptimizerNotifier extends StateNotifier<StreamingMetrics> {
+  final QualitySelector _qualitySelector;
+  late StreamingOptimizer _optimizer;
+
+  StreamingOptimizerNotifier(this._qualitySelector)
+      : super(
+          StreamingMetrics(
+            averageNetworkBitrate: 0,
+            currentNetworkBitrate: 0,
+            bufferDurationMs: 0,
+            segmentDownloadTimeMs: 0,
+            rebufferCount: 0,
+            startTime: DateTime.now(),
+          ),
+        ) {
+    _optimizer = StreamingOptimizer(qualitySelector: _qualitySelector);
+
+    // Listen to metrics updates
+    _optimizer.metricsStream.listen((metrics) {
+      state = metrics;
+    });
+  }
+
+  void recordSegmentDownload(int bytes, Duration duration) {
+    _optimizer.recordSegmentDownload(bytes, duration);
+  }
+
+  void rebufferDetected(Duration duration) {
+    _optimizer.rebufferDetected(duration);
+  }
+
+  List<StreamingMetrics> getHistory() => _optimizer.getMetricsHistory();
+
+  @override
+  void dispose() {
+    _optimizer.dispose();
+    super.dispose();
+  }
+}

lib/core/widgets/components/ui_components.dart

@@ -74,7 +74,7 @@ class _GradientButtonState extends State<GradientButton>
   void initState() {
     super.initState();
     _controller = AnimationController(
-      duration: AppTheme.durationFast,
+      duration: AppTheme.durationSm,
       vsync: this,
     );
     _scaleAnimation = Tween<double>(begin: 1.0, end: 0.95).animate(
@@ -365,10 +365,10 @@ class _MediaCardState extends State<MediaCard>
             Expanded(
               child: AnimatedScale(
                 scale: _isHovered ? 1.05 : 1.0,
-                duration: AppTheme.durationFast,
+                duration: AppTheme.durationSm,
                 curve: AppTheme.curveDefault,
                 child: AnimatedContainer(
-                  duration: AppTheme.durationFast,
+                  duration: AppTheme.durationSm,
                   decoration: BoxDecoration(
                     borderRadius: BorderRadius.circular(AppTheme.radiusMd),
                     color: AppColors.surfaceContainerLow,

lib/core/widgets/hero_carousel.dart

@@ -2,8 +2,7 @@ import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 import '../theme/app_colors.dart';
-import 'glass_container.dart';
-import 'tv_focusable_card.dart';
+import '../theme/app_theme.dart';
 
 class HeroCarouselItem {
   final String id;
@@ -12,7 +11,8 @@ class HeroCarouselItem {
   final String? imageUrl;
   final VoidCallback? onTap;
   final VoidCallback? onPlay;
-  final List<String>? badges;
+  final Color? accentColor;
+  final String? badge;
 
   HeroCarouselItem({
     required this.id,
@@ -21,333 +21,358 @@ class HeroCarouselItem {
     this.imageUrl,
     this.onTap,
     this.onPlay,
-    this.badges,
+    this.accentColor,
+    this.badge,
   });
 }
 
 class HeroCarousel extends StatefulWidget {
   final List<HeroCarouselItem> items;
   final bool autoPlay;
+  final Duration autoPlayInterval;
+  final double height;
 
   const HeroCarousel({
     super.key,
     required this.items,
     this.autoPlay = true,
+    this.autoPlayInterval = const Duration(seconds: 6),
+    this.height = 360,
   });
 
   @override
   State<HeroCarousel> createState() => _HeroCarouselState();
 }
 
-class _HeroCarouselState extends State<HeroCarousel> {
+class _HeroCarouselState extends State<HeroCarousel>
+    with TickerProviderStateMixin {
   late PageController _pageController;
+  late AnimationController _fadeController;
+  late AnimationController _scaleController;
   int _currentIndex = 0;
   Timer? _timer;
+  bool _isHovered = false;
 
   @override
   void initState() {
     super.initState();
-    _pageController = PageController();
-    if (widget.autoPlay) {
+    _pageController = PageController(
+      initialPage: 0,
+      viewportFraction: 1.0,
+    );
+
+    _fadeController = AnimationController(
+      vsync: this,
+      duration: AppTheme.durationLg,
+    );
+
+    _scaleController = AnimationController(
+      vsync: this,
+      duration: AppTheme.durationXl,
+    )..repeat(reverse: true);
+
+    if (widget.autoPlay && widget.items.isNotEmpty) {
       _startAutoPlay();
     }
   }
 
+  @override
+  void dispose() {
+    _pageController.dispose();
+    _fadeController.dispose();
+    _scaleController.dispose();
+    _timer?.cancel();
+    super.dispose();
+  }
+
   void _startAutoPlay() {
-    _timer = Timer.periodic(const Duration(seconds: 8), (timer) {
-      if (_currentIndex < widget.items.length - 1) {
-        _currentIndex++;
-      } else {
-        _currentIndex = 0;
-      }
-      if (_pageController.hasClients) {
+    _timer = Timer.periodic(widget.autoPlayInterval, (timer) {
+      if (mounted) {
+        final nextPage = (_currentIndex + 1) % widget.items.length;
         _pageController.animateToPage(
-          _currentIndex,
-          duration: const Duration(milliseconds: 800),
-          curve: Curves.fastOutSlowIn,
+          nextPage,
+          duration: AppTheme.durationLg,
+          curve: AppTheme.curveSmooth,
         );
       }
     });
   }
 
-  @override
-  void dispose() {
+  void _stopAutoPlay() {
     _timer?.cancel();
-    _pageController.dispose();
-    super.dispose();
-  }
-
-  String? _getProxiedUrl(String? url) {
-    if (url == null || url.isEmpty) return null;
-    if (url.startsWith('http')) {
-      return '/api/xtream/$url';
-    }
-    return url;
+    _timer = null;
   }
 
   @override
   Widget build(BuildContext context) {
-    if (widget.items.isEmpty) return const SizedBox.shrink();
-
-    return SizedBox(
-      height: 560,
-      child: Stack(
-        children: [
-          PageView.builder(
-            controller: _pageController,
-            onPageChanged: (index) {
-              setState(() => _currentIndex = index);
-            },
-            itemCount: widget.items.length,
-            itemBuilder: (context, index) {
-              final item = widget.items[index];
-              return _buildHeroSlide(item);
-            },
-          ),
-
-          // Indicators
-          Positioned(
-            bottom: 32,
-            right: 48,
-            child: Row(
-              children: List.generate(
-                widget.items.length,
-                (index) => AnimatedContainer(
-                  duration: const Duration(milliseconds: 300),
-                  margin: const EdgeInsets.symmetric(horizontal: 4),
-                  width: _currentIndex == index ? 24 : 8,
-                  height: 8,
-                  decoration: BoxDecoration(
-                    color: _currentIndex == index
-                        ? AppColors.primaryContainer
-                        : Colors.white.withOpacity(0.3),
-                    borderRadius: BorderRadius.circular(4),
+    return MouseRegion(
+      onEnter: (_) {
+        setState(() => _isHovered = true);
+        _stopAutoPlay();
+      },
+      onExit: (_) {
+        setState(() => _isHovered = false);
+        if (widget.autoPlay) {
+          _startAutoPlay();
+        }
+      },
+      child: SizedBox(
+        height: widget.height,
+        child: Stack(
+          fit: StackFit.expand,
+          children: [
+            PageView.builder(
+              controller: _pageController,
+              onPageChanged: (index) {
+                setState(() => _currentIndex = index);
+                _fadeController.forward(from: 0.0);
+              },
+              itemCount: widget.items.length,
+              itemBuilder: (context, index) {
+                return _buildCarouselPage(widget.items[index]);
+              },
+            ),
+            Positioned(
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: 200,
+              child: Container(
+                decoration: BoxDecoration(
+                  gradient: LinearGradient(
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                    colors: [
+                      Colors.transparent,
+                      AppColors.background.withOpacity(0.6),
+                      AppColors.background,
+                    ],
                   ),
                 ),
               ),
             ),
-          ),
-        ],
+            Positioned(
+              bottom: 32,
+              left: 32,
+              right: 32,
+              child: FadeTransition(
+                opacity: _fadeController,
+                child: _buildContentOverlay(widget.items[_currentIndex]),
+              ),
+            ),
+            Positioned(
+              bottom: 20,
+              right: 32,
+              child: _buildIndicators(),
+            ),
+          ],
+        ),
       ),
     );
   }
 
-  Widget _buildHeroSlide(HeroCarouselItem item) {
+  Widget _buildCarouselPage(HeroCarouselItem item) {
     return Stack(
       fit: StackFit.expand,
       children: [
-        // Background Image
         if (item.imageUrl != null && item.imageUrl!.isNotEmpty)
           Image.network(
-            _getProxiedUrl(item.imageUrl)!,
+            item.imageUrl!,
             fit: BoxFit.cover,
-            errorBuilder: (_, __, ___) => Container(color: AppColors.surfaceContainerLow),
+            errorBuilder: (context, error, stackTrace) {
+              return Container(
+                color: AppColors.surface,
+                child: const Center(
+                  child: Icon(Icons.broken_image_outlined, size: 64),
+                ),
+              );
+            },
           )
         else
-          Container(color: AppColors.surfaceContainerLow),
-
-        // Gradient Overlays — Stitch style
+          Container(color: AppColors.surface),
         Container(
           decoration: BoxDecoration(
             gradient: LinearGradient(
               begin: Alignment.topCenter,
               end: Alignment.bottomCenter,
               colors: [
-                Colors.transparent,
-                AppColors.baseLevel0.withOpacity(0.4),
-                AppColors.baseLevel0.withOpacity(0.9),
-                AppColors.baseLevel0,
-              ],
-              stops: const [0.0, 0.5, 0.8, 1.0],
-            ),
-          ),
-        ),
-
-        Container(
-          decoration: BoxDecoration(
-            gradient: LinearGradient(
-              begin: Alignment.centerRight,
-              end: Alignment.centerLeft,
-              colors: [
-                Colors.transparent,
-                AppColors.baseLevel0.withOpacity(0.8),
+                AppColors.background.withOpacity(0.3),
+                AppColors.background.withOpacity(0.8),
               ],
             ),
           ),
         ),
-
-        // Content Info
-        Padding(
-          padding: const EdgeInsets.all(48.0),
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.end,
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              // Badges row
-              if (item.badges != null && item.badges!.isNotEmpty)
-                Padding(
-                  padding: const EdgeInsets.only(bottom: 16),
-                  child: Wrap(
-                    spacing: 8,
-                    children: item.badges!.map((badge) {
-                      return Container(
-                        padding: const EdgeInsets.symmetric(
-                          horizontal: 12,
-                          vertical: 6,
-                        ),
-                        decoration: BoxDecoration(
-                          color: AppColors.primary.withOpacity(0.2),
-                          borderRadius: BorderRadius.circular(8),
-                          border: Border.all(
-                            color: AppColors.primary.withOpacity(0.3),
-                          ),
-                        ),
-                        child: Text(
-                          badge.toUpperCase(),
-                          style: GoogleFonts.inter(
-                            color: AppColors.primary,
-                            fontWeight: FontWeight.w600,
-                            fontSize: 11,
-                            letterSpacing: 0.5,
-                          ),
-                        ),
-                      );
-                    }).toList(),
-                  ),
-                )
-              else
-                Container(
-                  padding:
-                      const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
-                  decoration: BoxDecoration(
-                    color: AppColors.primary.withOpacity(0.2),
-                    borderRadius: BorderRadius.circular(8),
-                    border: Border.all(
-                      color: AppColors.primary.withOpacity(0.3),
-                    ),
-                  ),
-                  child: Text(
-                    'FEATURED',
-                    style: GoogleFonts.inter(
-                      color: AppColors.primary,
-                      fontWeight: FontWeight.w700,
-                      fontSize: 12,
-                      letterSpacing: 1.5,
-                    ),
-                  ),
-                ),
-
-              const SizedBox(height: 16),
-
-              // Title
-              SizedBox(
-                width: 600,
-                child: Text(
-                  item.title,
-                  style: GoogleFonts.spaceGrotesk(
-                    fontSize: 48,
-                    fontWeight: FontWeight.w700,
-                    color: AppColors.onSurface,
-                    height: 1.1,
-                    letterSpacing: -0.02,
-                  ),
-                  maxLines: 2,
-                  overflow: TextOverflow.ellipsis,
-                ),
-              ),
-              if (item.subtitle != null) ...[
-                const SizedBox(height: 8),
-                Text(
-                  item.subtitle!,
-                  style: GoogleFonts.inter(
-                    color: AppColors.onSurfaceVariant,
-                    fontSize: 18,
-                    height: 1.5,
-                  ),
-                ),
-              ],
-              const SizedBox(height: 24),
-
-              // Actions
-              Row(
-                children: [
-                  TvFocusableCard(
-                    onTap: item.onPlay,
-                    borderRadius: 50,
-                    scaleFactor: 1.1,
-                    child: Container(
-                      padding: const EdgeInsets.symmetric(
-                        horizontal: 32,
-                        vertical: 16,
-                      ),
-                      decoration: BoxDecoration(
-                        gradient: AppColors.primaryGradient,
-                        borderRadius: BorderRadius.circular(50),
-                        boxShadow: [
-                          BoxShadow(
-                            color: AppColors.primaryContainer.withOpacity(0.4),
-                            blurRadius: 20,
-                            offset: const Offset(0, 5),
-                          ),
-                        ],
-                      ),
-                      child: Row(
-                        mainAxisSize: MainAxisSize.min,
-                        children: [
-                          const Icon(
-                            Icons.play_arrow_rounded,
-                            color: AppColors.onSurface,
-                          ),
-                          const SizedBox(width: 8),
-                          Text(
-                            'WATCH NOW',
-                            style: GoogleFonts.inter(
-                              color: AppColors.onSurface,
-                              fontWeight: FontWeight.w600,
-                              fontSize: 16,
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
-                  ),
-                  const SizedBox(width: 20),
-                  TvFocusableCard(
-                    onTap: item.onTap,
-                    borderRadius: 50,
-                    child: GlassContainer.glass(
-                      borderRadius: 50,
-                      padding: const EdgeInsets.symmetric(
-                        horizontal: 24,
-                        vertical: 16,
-                      ),
-                      child: Row(
-                        mainAxisSize: MainAxisSize.min,
-                        children: [
-                          const Icon(
-                            Icons.info_outline,
-                            color: AppColors.onSurface,
-                          ),
-                          const SizedBox(width: 8),
-                          Text(
-                            'DETAILS',
-                            style: GoogleFonts.inter(
-                              color: AppColors.onSurface,
-                              fontWeight: FontWeight.w600,
-                              fontSize: 16,
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
-                  ),
-                ],
-              ),
-              const SizedBox(height: 48),
-            ],
-          ),
-        ),
       ],
     );
   }
+
+  Widget _buildContentOverlay(HeroCarouselItem item) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        if (item.badge != null)
+          Container(
+            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+            decoration: BoxDecoration(
+              color: item.accentColor ?? AppColors.primary,
+              borderRadius: BorderRadius.circular(AppTheme.radiusSm),
+            ),
+            child: Text(
+              item.badge!,
+              style: GoogleFonts.inter(
+                fontSize: 12,
+                fontWeight: FontWeight.w700,
+                color: AppColors.primary,
+                letterSpacing: 0.5,
+              ),
+            ),
+          ),
+        const SizedBox(height: 12),
+        Text(
+          item.title,
+          maxLines: 2,
+          overflow: TextOverflow.ellipsis,
+          style: GoogleFonts.outfit(
+            fontSize: 48,
+            fontWeight: FontWeight.w800,
+            color: AppColors.textPrimary,
+            letterSpacing: -1.0,
+            height: 1.1,
+          ),
+        ),
+        if (item.subtitle != null) ...[
+          const SizedBox(height: 12),
+          Text(
+            item.subtitle!,
+            maxLines: 2,
+            overflow: TextOverflow.ellipsis,
+            style: GoogleFonts.inter(
+              fontSize: 16,
+              fontWeight: FontWeight.w400,
+              color: AppColors.textSecondary,
+              height: 1.4,
+            ),
+          ),
+        ],
+        const SizedBox(height: 24),
+        if (item.onPlay != null || item.onTap != null)
+          Row(
+            children: [
+              if (item.onPlay != null)
+                AnimatedScale(
+                  scale: _isHovered ? 1.05 : 1.0,
+                  duration: AppTheme.durationMd,
+                  child: GestureDetector(
+                    onTap: item.onPlay,
+                    child: Container(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 24,
+                        vertical: 12,
+                      ),
+                      decoration: BoxDecoration(
+                        gradient: AppColors.primaryGradient,
+                        borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+                        boxShadow: [
+                          BoxShadow(
+                            color: (item.accentColor ?? AppColors.primary)
+                                .withOpacity(0.4),
+                            blurRadius: 16,
+                            offset: const Offset(0, 8),
+                          ),
+                        ],
+                      ),
+                      child: Row(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          const Icon(
+                            Icons.play_arrow,
+                            color: AppColors.textPrimary,
+                          ),
+                          const SizedBox(width: 8),
+                          Text(
+                            'Play',
+                            style: GoogleFonts.inter(
+                              fontSize: 16,
+                              fontWeight: FontWeight.w700,
+                              color: AppColors.primary,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+              const SizedBox(width: 16),
+              if (item.onTap != null)
+                GestureDetector(
+                  onTap: item.onTap,
+                  child: Container(
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: 24,
+                      vertical: 12,
+                    ),
+                    decoration: BoxDecoration(
+                      color: AppColors.surface.withOpacity(0.8),
+                      border: Border.all(
+                        color: AppColors.border,
+                        width: 1.5,
+                      ),
+                      borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+                    ),
+                    child: Row(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        const Icon(
+                          Icons.info_outline,
+                          color: AppColors.textPrimary,
+                        ),
+                        const SizedBox(width: 8),
+                        Text(
+                          'More Info',
+                          style: GoogleFonts.inter(
+                            fontSize: 16,
+                            fontWeight: FontWeight.w700,
+                            color: AppColors.textPrimary,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+            ],
+          ),
+      ],
+    );
+  }
+
+  Widget _buildIndicators() {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: List.generate(
+        widget.items.length,
+        (index) => GestureDetector(
+          onTap: () {
+            _pageController.animateToPage(
+              index,
+              duration: AppTheme.durationMd,
+              curve: AppTheme.curveDefault,
+            );
+          },
+          child: AnimatedContainer(
+            duration: AppTheme.durationMd,
+            curve: AppTheme.curveDefault,
+            margin: const EdgeInsets.symmetric(horizontal: 6),
+            width: _currentIndex == index ? 32 : 8,
+            height: 8,
+            decoration: BoxDecoration(
+              color:
+                  _currentIndex == index ? AppColors.primary : AppColors.border,
+              borderRadius: BorderRadius.circular(4),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
 }

lib/core/widgets/tv_channel_grid.dart

@@ -0,0 +1,144 @@
+import 'package:flutter/material.dart';
+import '../theme/app_theme.dart';
+
+/// Apple TV Modern Channel Grid
+///
+/// Responsive grid layout for channels with:
+/// - Flexible column count based on screen size
+/// - Smooth animations
+/// - Focus-aware spacing
+class TvChannelGrid extends StatelessWidget {
+  final List<Widget> children;
+  final EdgeInsetsGeometry padding;
+  final double horizontalSpacing;
+  final double verticalSpacing;
+  final ScrollController? scrollController;
+  final ScrollPhysics physics;
+
+  const TvChannelGrid({
+    super.key,
+    required this.children,
+    this.padding = const EdgeInsets.fromLTRB(32, 24, 32, 32),
+    this.horizontalSpacing = 20,
+    this.verticalSpacing = 20,
+    this.scrollController,
+    this.physics = const AlwaysScrollableScrollPhysics(),
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
+
+    // Guard: during first Flutter Web layout pass, size may be 0 or NaN.
+    // LayoutBuilder will re-trigger build once the real size is known.
+    if (screenWidth <= 0 || screenWidth.isNaN || screenWidth.isInfinite) {
+      return const SizedBox.shrink();
+    }
+
+    // Responsive column count
+    final int columnCount;
+    if (screenWidth > 1920) {
+      columnCount = 6;
+    } else if (screenWidth > 1600) {
+      columnCount = 5;
+    } else if (screenWidth > 1280) {
+      columnCount = 4;
+    } else if (screenWidth > 960) {
+      columnCount = 3;
+    } else {
+      columnCount = 2;
+    }
+
+    // Calculate horizontal padding safely using resolved EdgeInsets.
+    final resolvedPadding = padding.resolve(TextDirection.ltr);
+    final horizontalPadding = resolvedPadding.left + resolvedPadding.right;
+
+    // Compute item width, clamped to avoid negative/NaN values.
+    final totalSpacing = horizontalSpacing * (columnCount - 1);
+    final availableWidth = screenWidth - horizontalPadding - totalSpacing;
+    final itemWidth =
+        (availableWidth / columnCount).clamp(1.0, double.infinity);
+
+    return SingleChildScrollView(
+      controller: scrollController,
+      physics: physics,
+      padding: padding,
+      child: Wrap(
+        spacing: horizontalSpacing,
+        runSpacing: verticalSpacing,
+        children: [
+          for (int i = 0; i < children.length; i++)
+            SizedBox(
+              width: itemWidth,
+              child: children[i],
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+/// Apple TV Modern Horizontal Scrollable List
+class TvHorizontalList extends StatelessWidget {
+  final List<Widget> children;
+  final String? title;
+  final EdgeInsetsGeometry padding;
+  final double itemWidth;
+  final double spacing;
+  final ScrollController? scrollController;
+
+  const TvHorizontalList({
+    super.key,
+    required this.children,
+    this.title,
+    this.padding = const EdgeInsets.symmetric(vertical: 16),
+    this.itemWidth = 200,
+    this.spacing = 16,
+    this.scrollController,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        // Title
+        if (title != null)
+          Padding(
+            padding: const EdgeInsets.symmetric(
+              horizontal: AppTheme.spacing32,
+              vertical: AppTheme.spacing16,
+            ),
+            child: Text(
+              title!,
+              style: Theme.of(context).textTheme.headlineMedium?.copyWith(
+                    fontWeight: FontWeight.w700,
+                  ),
+            ),
+          ),
+
+        // Horizontal list
+        SizedBox(
+          height: 280,
+          child: ListView.separated(
+            controller: scrollController,
+            scrollDirection: Axis.horizontal,
+            padding: EdgeInsets.symmetric(
+              horizontal: 32,
+              // Resolve EdgeInsetsGeometry to a concrete EdgeInsets before
+              // accessing vertical — casting EdgeInsetsGeometry to double throws.
+              vertical: padding.resolve(TextDirection.ltr).top,
+            ),
+            itemCount: children.length,
+            separatorBuilder: (_, __) => SizedBox(width: spacing),
+            itemBuilder: (context, index) => SizedBox(
+              width: itemWidth,
+              child: children[index],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/core/widgets/tv_modern_card.dart

@@ -0,0 +1,340 @@
+import 'package:flutter/material.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:google_fonts/google_fonts.dart';
+import '../theme/app_colors.dart';
+import '../theme/app_theme.dart';
+import 'glass_container.dart';
+
+/// Apple TV Modern Content Card
+///
+/// Premium card for displaying movies, shows, or other content with:
+/// - Poster image with skeleton loading
+/// - Title and metadata
+/// - Rating/score display
+/// - Interactive hover states
+/// - Context menu support
+class TvModernCard extends StatefulWidget {
+  final String id;
+  final String title;
+  final String? imageUrl;
+  final String? rating;
+  final String? year;
+  final String? badge;
+  final Color? badgeColor;
+  final VoidCallback? onTap;
+  final VoidCallback? onPlayTap;
+  final VoidCallback? onMoreTap;
+  final bool isWatching;
+  final double? progress;
+
+  const TvModernCard({
+    super.key,
+    required this.id,
+    required this.title,
+    this.imageUrl,
+    this.rating,
+    this.year,
+    this.badge,
+    this.badgeColor,
+    this.onTap,
+    this.onPlayTap,
+    this.onMoreTap,
+    this.isWatching = false,
+    this.progress,
+  });
+
+  @override
+  State<TvModernCard> createState() => _TvModernCardState();
+}
+
+class _TvModernCardState extends State<TvModernCard>
+    with SingleTickerProviderStateMixin {
+  bool _isHovered = false;
+  late AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: AppTheme.durationMd,
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MouseRegion(
+      onEnter: (_) {
+        setState(() => _isHovered = true);
+        _controller.forward();
+      },
+      onExit: (_) {
+        setState(() => _isHovered = false);
+        _controller.reverse();
+      },
+      child: GestureDetector(
+        onTap: widget.onTap,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            // ============ POSTER IMAGE ============
+            AnimatedScale(
+              scale: _isHovered ? 1.06 : 1.0,
+              duration: AppTheme.durationMd,
+              curve: AppTheme.curveDefault,
+              child: GlassCard(
+                borderRadius: AppTheme.radiusLg,
+                padding: EdgeInsets.zero,
+                interactive: true,
+                onTap: widget.onTap,
+                child: Stack(
+                  fit: StackFit.expand,
+                  children: [
+                    // Poster image
+                    _buildPosterImage(),
+
+                    // Overlay
+                    if (_isHovered)
+                      Container(
+                        decoration: BoxDecoration(
+                          gradient: LinearGradient(
+                            begin: Alignment.topCenter,
+                            end: Alignment.bottomCenter,
+                            colors: [
+                              Colors.transparent,
+                              Colors.black.withOpacity(0.7),
+                            ],
+                          ),
+                        ),
+                      ),
+
+                    // Badge
+                    if (widget.badge != null)
+                      Positioned(
+                        top: 12,
+                        right: 12,
+                        child: Container(
+                          padding: const EdgeInsets.symmetric(
+                            horizontal: 8,
+                            vertical: 4,
+                          ),
+                          decoration: BoxDecoration(
+                            color: widget.badgeColor ?? AppColors.primary,
+                            borderRadius: BorderRadius.circular(4),
+                          ),
+                          child: Text(
+                            widget.badge!,
+                            style: GoogleFonts.inter(
+                              fontSize: 10,
+                              fontWeight: FontWeight.w700,
+                              color: Colors.black,
+                              letterSpacing: 0.5,
+                            ),
+                          ),
+                        ),
+                      ),
+
+                    // Progress indicator (if watching)
+                    if (widget.isWatching && widget.progress != null)
+                      Positioned(
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        child: Container(
+                          height: 3,
+                          decoration: const BoxDecoration(
+                            borderRadius: BorderRadius.vertical(
+                              bottom: Radius.circular(AppTheme.radiusLg),
+                            ),
+                          ),
+                          child: ClipRRect(
+                            borderRadius: const BorderRadius.vertical(
+                              bottom: Radius.circular(AppTheme.radiusLg),
+                            ),
+                            child: LinearProgressIndicator(
+                              value: widget.progress,
+                              backgroundColor: AppColors.surfaceVariant,
+                              valueColor: const AlwaysStoppedAnimation(
+                                AppColors.primary,
+                              ),
+                              minHeight: 3,
+                            ),
+                          ),
+                        ),
+                      ),
+
+                    // Action buttons (on hover)
+                    if (_isHovered &&
+                        (widget.onPlayTap != null || widget.onMoreTap != null))
+                      Center(
+                        child: Row(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          children: [
+                            if (widget.onPlayTap != null)
+                              _buildActionButton(
+                                icon: Icons.play_arrow,
+                                label: 'Play',
+                                onTap: widget.onPlayTap!,
+                              ),
+                            if (widget.onPlayTap != null &&
+                                widget.onMoreTap != null)
+                              const SizedBox(width: 16),
+                            if (widget.onMoreTap != null)
+                              _buildActionButton(
+                                icon: Icons.info_outline,
+                                label: 'Info',
+                                onTap: widget.onMoreTap!,
+                              ),
+                          ],
+                        ),
+                      ),
+                  ],
+                ),
+              ),
+            ),
+
+            const SizedBox(height: 12),
+
+            // ============ METADATA ============
+            // Title
+            Text(
+              widget.title,
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+              style: GoogleFonts.inter(
+                fontSize: 14,
+                fontWeight: FontWeight.w600,
+                color: AppColors.textPrimary,
+              ),
+            ),
+
+            // Rating & Year
+            if (widget.rating != null || widget.year != null) ...[
+              const SizedBox(height: 6),
+              Row(
+                children: [
+                  if (widget.rating != null) ...[
+                    const Icon(
+                      Icons.star,
+                      size: 14,
+                      color: AppColors.ratingGold,
+                    ),
+                    const SizedBox(width: 4),
+                    Text(
+                      widget.rating!,
+                      style: GoogleFonts.inter(
+                        fontSize: 12,
+                        fontWeight: FontWeight.w600,
+                        color: AppColors.textSecondary,
+                      ),
+                    ),
+                  ],
+                  if (widget.rating != null && widget.year != null)
+                    const SizedBox(width: 12),
+                  if (widget.year != null)
+                    Text(
+                      widget.year!,
+                      style: GoogleFonts.inter(
+                        fontSize: 12,
+                        fontWeight: FontWeight.w400,
+                        color: AppColors.textTertiary,
+                      ),
+                    ),
+                ],
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildPosterImage() {
+    if (widget.imageUrl == null || widget.imageUrl!.isEmpty) {
+      return Container(
+        color: AppColors.surface,
+        child: const Center(
+          child: Icon(
+            Icons.image_outlined,
+            color: AppColors.textSecondary,
+            size: 48,
+          ),
+        ),
+      );
+    }
+
+    return CachedNetworkImage(
+      imageUrl: widget.imageUrl!,
+      fit: BoxFit.cover,
+      placeholder: (context, url) => Container(
+        color: AppColors.shimmer,
+        child: const Center(
+          child: SizedBox(
+            width: 40,
+            height: 40,
+            child: CircularProgressIndicator(
+              strokeWidth: 2,
+              color: AppColors.primary,
+            ),
+          ),
+        ),
+      ),
+      errorWidget: (context, url, error) => Container(
+        color: AppColors.surface,
+        child: const Center(
+          child: Icon(
+            Icons.broken_image_outlined,
+            color: AppColors.textSecondary,
+            size: 48,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildActionButton({
+    required IconData icon,
+    required String label,
+    required VoidCallback onTap,
+  }) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+        decoration: BoxDecoration(
+          color: AppColors.primary,
+          borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+          boxShadow: [
+            BoxShadow(
+              color: AppColors.primary.withOpacity(0.4),
+              blurRadius: 12,
+              offset: const Offset(0, 4),
+            ),
+          ],
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(icon, color: Colors.black, size: 18),
+            const SizedBox(width: 6),
+            Text(
+              label,
+              style: GoogleFonts.inter(
+                fontSize: 12,
+                fontWeight: FontWeight.w700,
+                color: Colors.black,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/core/widgets/tv_nav_widgets.dart

@@ -0,0 +1,397 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import '../theme/app_colors.dart';
+import '../theme/app_theme.dart';
+import 'glass_container.dart';
+
+/// Apple TV Modern Top Navigation Bar
+/// 
+/// Premium navigation header with:
+/// - Logo/branding
+/// - Search integration
+/// - User menu
+/// - Glassmorphism effect
+class TvTopNavBar extends StatefulWidget {
+  final String title;
+  final VoidCallback? onSearch;
+  final VoidCallback? onProfile;
+  final VoidCallback? onNotifications;
+  final int notificationCount;
+  final Widget? leading;
+  final List<Widget>? actions;
+
+  const TvTopNavBar({
+    super.key,
+    required this.title,
+    this.onSearch,
+    this.onProfile,
+    this.onNotifications,
+    this.notificationCount = 0,
+    this.leading,
+    this.actions,
+  });
+
+  @override
+  State<TvTopNavBar> createState() => _TvTopNavBarState();
+}
+
+class _TvTopNavBarState extends State<TvTopNavBar> {
+  bool _isHovered = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return MouseRegion(
+      onEnter: (_) => setState(() => _isHovered = true),
+      onExit: (_) => setState(() => _isHovered = false),
+      child: GlassContainer(
+        borderRadius: 0,
+        hasBorder: false,
+        showShadow: false,
+        padding: const EdgeInsets.symmetric(
+          horizontal: AppTheme.spacing32,
+          vertical: AppTheme.spacing16,
+        ),
+        margin: EdgeInsets.zero,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            // Left: Logo + Title
+            Row(
+              children: [
+                if (widget.leading != null) widget.leading!,
+                const SizedBox(width: AppTheme.spacing16),
+                Text(
+                  widget.title,
+                  style: GoogleFonts.outfit(
+                    fontSize: 24,
+                    fontWeight: FontWeight.w700,
+                    color: AppColors.textPrimary,
+                    letterSpacing: -0.3,
+                  ),
+                ),
+              ],
+            ),
+
+            // Right: Actions
+            Row(
+              children: [
+                if (widget.onSearch != null) ...[
+                  _buildIconButton(
+                    icon: Icons.search,
+                    onTap: widget.onSearch!,
+                    tooltip: 'Search',
+                  ),
+                  const SizedBox(width: AppTheme.spacing16),
+                ],
+
+                if (widget.onNotifications != null) ...[
+                  _buildIconButton(
+                    icon: Icons.notifications_none,
+                    onTap: widget.onNotifications!,
+                    tooltip: 'Notifications',
+                    badge: widget.notificationCount > 0
+                        ? widget.notificationCount.toString()
+                        : null,
+                  ),
+                  const SizedBox(width: AppTheme.spacing16),
+                ],
+
+                if (widget.onProfile != null)
+                  _buildIconButton(
+                    icon: Icons.account_circle,
+                    onTap: widget.onProfile!,
+                    tooltip: 'Profile',
+                  ),
+
+                if (widget.actions != null) ...[
+                  const SizedBox(width: AppTheme.spacing16),
+                  ...widget.actions!,
+                ],
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildIconButton({
+    required IconData icon,
+    required VoidCallback onTap,
+    required String tooltip,
+    String? badge,
+  }) {
+    return Tooltip(
+      message: tooltip,
+      child: MouseRegion(
+        cursor: SystemMouseCursors.click,
+        child: GestureDetector(
+          onTap: onTap,
+          child: Container(
+            padding: const EdgeInsets.all(8),
+            decoration: BoxDecoration(
+              color: _isHovered ? AppColors.surface : Colors.transparent,
+              borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+            ),
+            child: Stack(
+              children: [
+                Icon(
+                  icon,
+                  color: AppColors.textPrimary,
+                  size: 24,
+                ),
+                if (badge != null)
+                  Positioned(
+                    top: 0,
+                    right: 0,
+                    child: Container(
+                      padding: const EdgeInsets.all(4),
+                      decoration: const BoxDecoration(
+                        color: AppColors.error,
+                        shape: BoxShape.circle,
+                      ),
+                      child: Text(
+                        badge,
+                        style: GoogleFonts.inter(
+                          fontSize: 10,
+                          fontWeight: FontWeight.w700,
+                          color: Colors.white,
+                        ),
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Apple TV Modern Side Navigation
+/// 
+/// Vertical navigation menu with:
+/// - Window navigation items
+/// - Collapsible menu
+/// - Smooth animations
+/// - Category grouping
+class TvSideNav extends StatefulWidget {
+  final List<TvNavItem> items;
+  final int selectedIndex;
+  final ValueChanged<int> onItemSelected;
+  final bool expanded;
+  final VoidCallback? onToggleExpanded;
+
+  const TvSideNav({
+    super.key,
+    required this.items,
+    this.selectedIndex = 0,
+    required this.onItemSelected,
+    this.expanded = true,
+    this.onToggleExpanded,
+  });
+
+  @override
+  State<TvSideNav> createState() => _TvSideNavState();
+}
+
+class _TvSideNavState extends State<TvSideNav> {
+  @override
+  Widget build(BuildContext context) {
+    return GlassContainer(
+      borderRadius: 0,
+      hasBorder: false,
+      showShadow: false,
+      padding: const EdgeInsets.symmetric(vertical: AppTheme.spacing16),
+      margin: EdgeInsets.zero,
+      child: SingleChildScrollView(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: List.generate(
+            widget.items.length,
+            (index) => _buildNavItem(
+              item: widget.items[index],
+              isSelected: index == widget.selectedIndex,
+              onTap: () => widget.onItemSelected(index),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildNavItem({
+    required TvNavItem item,
+    required bool isSelected,
+    required VoidCallback onTap,
+  }) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        horizontal: AppTheme.spacing16,
+        vertical: AppTheme.spacing8,
+      ),
+      child: GestureDetector(
+        onTap: onTap,
+        child: Container(
+          padding: const EdgeInsets.symmetric(
+            horizontal: AppTheme.spacing16,
+            vertical: AppTheme.spacing12,
+          ),
+          decoration: BoxDecoration(
+            color: isSelected ? AppColors.primary : Colors.transparent,
+            borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+            border: !isSelected
+                ? Border.all(color: AppColors.border)
+                : null,
+          ),
+          child: Row(
+            children: [
+              Icon(
+                item.icon,
+                color: isSelected ? Colors.black : AppColors.textSecondary,
+                size: 20,
+              ),
+              const SizedBox(width: AppTheme.spacing12),
+              Expanded(
+                child: Text(
+                  item.label,
+                  style: GoogleFonts.inter(
+                    fontSize: 14,
+                    fontWeight: FontWeight.w600,
+                    color: isSelected ? Colors.black : AppColors.textPrimary,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Navigation item model
+class TvNavItem {
+  final String label;
+  final IconData icon;
+  final String? badge;
+
+  TvNavItem({
+    required this.label,
+    required this.icon,
+    this.badge,
+  });
+}
+
+/// Apple TV Modern Floating Action Menu
+/// 
+/// Context-aware floating menu with:
+/// - Multiple action buttons
+/// - Smooth reveal animation
+/// - Accessible positioning
+class TvFloatingMenu extends StatefulWidget {
+  final List<TvMenuAction> actions;
+  final VoidCallback? onClose;
+
+  const TvFloatingMenu({
+    super.key,
+    required this.actions,
+    this.onClose,
+  });
+
+  @override
+  State<TvFloatingMenu> createState() => _TvFloatingMenuState();
+}
+
+class _TvFloatingMenuState extends State<TvFloatingMenu>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: AppTheme.durationMd,
+    )..forward();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ScaleTransition(
+      scale: _controller,
+      child: Container(
+        padding: const EdgeInsets.all(AppTheme.spacing12),
+        decoration: BoxDecoration(
+          color: AppColors.surface,
+          borderRadius: BorderRadius.circular(AppTheme.radiusLg),
+          border: Border.all(color: AppColors.border),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.black.withOpacity(0.3),
+              blurRadius: 24,
+              offset: const Offset(0, 8),
+            ),
+          ],
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: List.generate(
+            widget.actions.length,
+            (index) => GestureDetector(
+              onTap: () {
+                widget.actions[index].onTap?.call();
+                widget.onClose?.call();
+              },
+              child: Container(
+                padding: const EdgeInsets.symmetric(
+                  horizontal: AppTheme.spacing16,
+                  vertical: AppTheme.spacing12,
+                ),
+                child: Row(
+                  children: [
+                    Icon(
+                      widget.actions[index].icon,
+                      color: widget.actions[index].color ?? AppColors.textPrimary,
+                    ),
+                    const SizedBox(width: AppTheme.spacing12),
+                    Text(
+                      widget.actions[index].label,
+                      style: GoogleFonts.inter(
+                        fontSize: 14,
+                        fontWeight: FontWeight.w500,
+                        color: AppColors.textPrimary,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Menu action model
+class TvMenuAction {
+  final String label;
+  final IconData icon;
+  final Color? color;
+  final VoidCallback? onTap;
+
+  TvMenuAction({
+    required this.label,
+    required this.icon,
+    this.color,
+    this.onTap,
+  });
+}

lib/features/admin/screens/admin_panel.dart

@@ -27,11 +27,11 @@ class AdminPanel extends StatelessWidget {
       body: Container(
         decoration: const BoxDecoration(
           gradient: LinearGradient(
-            begin: Alignment.topLeft,
-            end: Alignment.bottomRight,
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
             colors: [
-              Color(0xFF0F1014),
-              Color(0xFF121317),
+              AppColors.surfaceVariant,
+              AppColors.background,
             ],
           ),
         ),
@@ -80,13 +80,13 @@ class _AdminContentState extends ConsumerState<AdminContent>
                   padding: const EdgeInsets.all(8),
                   showBorder: false,
                   onTap: () => context.go('/playlists'),
-                  child: const Icon(Icons.arrow_back, color: AppColors.onSurfaceVariant),
+                  child: const Icon(Icons.arrow_back, color: AppColors.textSecondary),
                 ),
                 const SizedBox(width: 16),
                 Text(
                   'Administration',
                   style: Theme.of(context).textTheme.headlineMedium?.copyWith(
-                        color: AppColors.onSurface,
+                        color: AppColors.textPrimary,
                         fontWeight: FontWeight.bold,
                       ),
                 ),
@@ -136,10 +136,10 @@ class _AdminContentState extends ConsumerState<AdminContent>
         return GestureDetector(
           onTap: () => _tabController.animateTo(index),
           child: AnimatedContainer(
-            duration: AppTheme.durationFast,
+            duration: AppTheme.durationSm,
             padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
             decoration: BoxDecoration(
-              color: isSelected ? AppColors.primaryContainer : Colors.transparent,
+              color: isSelected ? AppColors.focusColor : Colors.transparent,
               borderRadius: BorderRadius.circular(50),
             ),
             child: Row(
@@ -147,7 +147,7 @@ class _AdminContentState extends ConsumerState<AdminContent>
                 Icon(
                   icon,
                   size: 18,
-                  color: isSelected ? AppColors.onPrimaryContainer : AppColors.onSurfaceVariant,
+                  color: isSelected ? AppColors.textPrimary : AppColors.textSecondary,
                 ),
                 const SizedBox(width: 8),
                 Text(
@@ -155,7 +155,7 @@ class _AdminContentState extends ConsumerState<AdminContent>
                   style: GoogleFonts.inter(
                     fontWeight: FontWeight.w600,
                     fontSize: 14,
-                    color: isSelected ? AppColors.onPrimaryContainer : AppColors.onSurfaceVariant,
+                    color: isSelected ? AppColors.textPrimary : AppColors.textSecondary,
                   ),
                 ),
               ],
@@ -187,7 +187,7 @@ class _PlaylistsTab extends ConsumerWidget {
                 style: Theme.of(context)
                     .textTheme
                     .bodyLarge
-                    ?.copyWith(color: AppColors.onSurfaceVariant),
+                    ?.copyWith(color: AppColors.textSecondary),
               ),
               GradientButton(
                 label: 'Add Playlist',
@@ -215,7 +215,7 @@ class _PlaylistsTab extends ConsumerWidget {
                       Icon(
                         Icons.playlist_remove,
                         size: 64,
-                        color: AppColors.onSurfaceVariant.withOpacity(0.5),
+                        color: AppColors.textSecondary.withOpacity(0.5),
                       ),
                       const SizedBox(height: 16),
                       Text(
@@ -252,7 +252,7 @@ class _PlaylistsTab extends ConsumerWidget {
                           ),
                           child: const Icon(
                             Icons.playlist_play,
-                            color: AppColors.onSurface,
+                            color: AppColors.textPrimary,
                           ),
                         ),
                         const SizedBox(width: 16),
@@ -265,7 +265,7 @@ class _PlaylistsTab extends ConsumerWidget {
                                 style: Theme.of(context)
                                     .textTheme
                                     .titleMedium
-                                    ?.copyWith(color: AppColors.onSurface),
+                                    ?.copyWith(color: Colors.white),
                               ),
                               const SizedBox(height: 4),
                               Text(
@@ -273,7 +273,7 @@ class _PlaylistsTab extends ConsumerWidget {
                                 style: Theme.of(context)
                                     .textTheme
                                     .bodyMedium
-                                    ?.copyWith(color: AppColors.onSurfaceVariant),
+                                    ?.copyWith(color: Colors.white60),
                               ),
                             ],
                           ),
@@ -282,7 +282,7 @@ class _PlaylistsTab extends ConsumerWidget {
                           children: [
                             IconButton(
                               icon: const Icon(Icons.edit_outlined, size: 20),
-                              color: AppColors.onSurfaceVariant,
+                              color: Colors.white70,
                               onPressed: () =>
                                   _showPlaylistDialog(context, ref, playlist),
                               tooltip: 'Edit',
@@ -462,7 +462,7 @@ class _UsersTab extends ConsumerWidget {
                 style: Theme.of(context)
                     .textTheme
                     .bodyLarge
-                    ?.copyWith(color: AppColors.onSurfaceVariant),
+                    ?.copyWith(color: AppColors.textSecondary),
               ),
               GradientButton(
                 label: 'Create User',
@@ -490,7 +490,7 @@ class _UsersTab extends ConsumerWidget {
                       Icon(
                         Icons.people_outline,
                         size: 64,
-                        color: AppColors.onSurfaceVariant.withOpacity(0.5),
+                        color: AppColors.textSecondary.withOpacity(0.5),
                       ),
                       const SizedBox(height: 16),
                       Text(
@@ -518,7 +518,7 @@ class _UsersTab extends ConsumerWidget {
                           height: 48,
                           decoration: BoxDecoration(
                             color: user.isAdmin
-                                ? AppColors.primaryContainer
+                                ? AppColors.focusColor
                                 : AppColors.surface,
                             shape: BoxShape.circle,
                           ),
@@ -527,8 +527,8 @@ class _UsersTab extends ConsumerWidget {
                                 ? Icons.admin_panel_settings
                                 : Icons.person,
                             color: user.isAdmin
-                                ? AppColors.onPrimaryContainer
-                                : AppColors.onSurface,
+                                ? Colors.black
+                                : AppColors.textPrimary,
                             size: 24,
                           ),
                         ),
@@ -544,7 +544,7 @@ class _UsersTab extends ConsumerWidget {
                                     style: Theme.of(context)
                                         .textTheme
                                         .titleMedium
-                                        ?.copyWith(color: AppColors.onSurface),
+                                        ?.copyWith(color: Colors.white),
                                   ),
                                   if (user.isAdmin) ...[
                                     const SizedBox(width: 8),
@@ -554,16 +554,16 @@ class _UsersTab extends ConsumerWidget {
                                         vertical: 2,
                                       ),
                                       decoration: BoxDecoration(
-                                        color: AppColors.primaryContainer
+                                        color: AppColors.focusColor
                                             .withOpacity(0.2),
                                         borderRadius: BorderRadius.circular(50),
                                       ),
-                                      child: Text(
+                                      child: const Text(
                                         'ADMIN',
                                         style: TextStyle(
                                           fontSize: 10,
                                           fontWeight: FontWeight.bold,
-                                          color: AppColors.primaryContainer,
+                                          color: AppColors.focusColor,
                                         ),
                                       ),
                                     ),
@@ -576,7 +576,7 @@ class _UsersTab extends ConsumerWidget {
                                 style: Theme.of(context)
                                     .textTheme
                                     .bodyMedium
-                                    ?.copyWith(color: AppColors.onSurfaceVariant),
+                                    ?.copyWith(color: Colors.white60),
                               ),
                             ],
                           ),
@@ -584,7 +584,7 @@ class _UsersTab extends ConsumerWidget {
                         PopupMenuButton<String>(
                           icon: const Icon(
                             Icons.more_vert,
-                            color: AppColors.onSurfaceVariant,
+                            color: Colors.white70,
                           ),
                           color: AppColors.surface,
                           shape: RoundedRectangleBorder(

lib/features/auth/screens/login_screen.dart

@@ -51,54 +51,54 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
       body: Stack(
         fit: StackFit.expand,
         children: [
-          // 1. Cinematic Background
+          // 1. Cinematic Background (Deep Space - Premium Apple TV)
           Container(
             decoration: const BoxDecoration(
               gradient: LinearGradient(
-                begin: Alignment.topLeft,
-                end: Alignment.bottomRight,
+                begin: Alignment.topCenter,
+                end: Alignment.bottomCenter,
                 colors: [
-                  Color(0xFF0F1014),
-                  Color(0xFF121317),
-                  Color(0xFF0D0E12),
+                  Color(0xFF050505),
+                  AppColors.background,
+                  Color(0xFF0A0A0A),
                 ],
               ),
             ),
           ),
 
-          // 2. Ambient Glows (Stitch style — blue diffuse)
+          // 2. Ambient Glows (Apple TV Style - VISIBLE)
           Positioned(
-            top: -size.height * 0.2,
-            right: -size.width * 0.1,
+            top: -size.height * 0.3,
+            right: -size.width * 0.2,
             child: Container(
-              width: size.width * 0.6,
-              height: size.width * 0.6,
+              width: size.width * 0.8,
+              height: size.width * 0.8,
               decoration: BoxDecoration(
                 shape: BoxShape.circle,
                 gradient: RadialGradient(
                   colors: [
-                    AppColors.primary.withOpacity(0.06),
+                    AppColors.primary.withOpacity(0.4),
+                    AppColors.primary.withOpacity(0.1),
                     Colors.transparent,
                   ],
-                  radius: 0.5,
                 ),
               ),
             ),
           ),
           Positioned(
-            bottom: -size.height * 0.2,
-            left: -size.width * 0.1,
+            bottom: -size.height * 0.3,
+            left: -size.width * 0.2,
             child: Container(
-              width: size.width * 0.6,
-              height: size.width * 0.6,
+              width: size.width * 0.8,
+              height: size.width * 0.8,
               decoration: BoxDecoration(
                 shape: BoxShape.circle,
                 gradient: RadialGradient(
                   colors: [
-                    AppColors.primaryContainer.withOpacity(0.04),
+                    AppColors.info.withOpacity(0.3),
+                    AppColors.info.withOpacity(0.05),
                     Colors.transparent,
                   ],
-                  radius: 0.5,
                 ),
               ),
             ),
@@ -118,11 +118,15 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
                       width: 120,
                       height: 120,
                       decoration: BoxDecoration(
-                        gradient: AppColors.primaryGradient,
+                        gradient: const LinearGradient(
+                          begin: Alignment.topLeft,
+                          end: Alignment.bottomRight,
+                          colors: [AppColors.surfaceVariant, AppColors.background],
+                        ),
                         borderRadius: BorderRadius.circular(32),
                         boxShadow: [
                           BoxShadow(
-                            color: AppColors.glowPrimary(0.3),
+                            color: AppColors.background.withOpacity(0.5),
                             blurRadius: 30,
                             offset: const Offset(0, 15),
                           ),
@@ -130,7 +134,7 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
                       ),
                       child: const Icon(
                         Icons.play_arrow_rounded,
-                        color: AppColors.onSurface,
+                        color: AppColors.textPrimary,
                         size: 64,
                       ),
                     ),
@@ -140,10 +144,10 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
                   // Title
                   Text(
                     'XtremFlow',
-                    style: GoogleFonts.spaceGrotesk(
+                    style: GoogleFonts.inter(
                       fontSize: 42,
                       fontWeight: FontWeight.w700,
-                      color: AppColors.onSurface,
+                      color: AppColors.textPrimary,
                       letterSpacing: -1.0,
                     ),
                   ),
@@ -152,17 +156,18 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
                     'Sign in to sync your playlists',
                     style: GoogleFonts.inter(
                       fontSize: 18,
-                      color: AppColors.onSurfaceVariant,
+                      color: AppColors.textSecondary,
                       fontWeight: FontWeight.w400,
                     ),
                   ),
                   const SizedBox(height: 48),
 
                   // Login Form Container
-                  GlassContainer.floating(
+                  GlassContainer(
                     width: 500,
-                    padding: const EdgeInsets.all(48),
+                    padding: const EdgeInsets.all(48), // Spacious padding
                     borderRadius: 24,
+                    opacity: 0.7,
                     child: Form(
                       key: _formKey,
                       child: Column(
@@ -191,7 +196,7 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
                                 _obscurePassword
                                     ? Icons.visibility_outlined
                                     : Icons.visibility_off_outlined,
-                                color: AppColors.onSurfaceVariant,
+                                color: AppColors.textSecondary,
                               ),
                               onPressed: () {
                                 setState(() {
@@ -224,7 +229,7 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
                                   Expanded(
                                     child: Text(
                                       authState.errorMessage!,
-                                      style: GoogleFonts.inter(
+                                      style: const TextStyle(
                                         color: AppColors.error,
                                         fontSize: 14,
                                         fontWeight: FontWeight.w500,
@@ -242,20 +247,14 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
                           TvFocusableCard(
                             onTap: _handleLogin,
                             scaleFactor: 1.03,
+                            focusColor: AppColors.primary,
                             borderRadius: 16,
                             child: Container(
                               height: 60,
                               alignment: Alignment.center,
                               decoration: BoxDecoration(
-                                gradient: AppColors.primaryGradient,
+                                color: AppColors.textPrimary,
                                 borderRadius: BorderRadius.circular(16),
-                                boxShadow: [
-                                  BoxShadow(
-                                    color: AppColors.glowPrimary(0.3),
-                                    blurRadius: 16,
-                                    offset: const Offset(0, 6),
-                                  ),
-                                ],
                               ),
                               child: authState.isLoading
                                   ? const SizedBox(
@@ -263,13 +262,13 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
                                       height: 24,
                                       child: CircularProgressIndicator(
                                         strokeWidth: 2.5,
-                                        color: AppColors.onSurface,
+                                        color: AppColors.primary,
                                       ),
                                     )
                                   : Text(
                                       'Sign In',
                                       style: GoogleFonts.inter(
-                                        color: AppColors.onSurface,
+                                        color: AppColors.primary,
                                         fontSize: 18,
                                         fontWeight: FontWeight.w600,
                                       ),
@@ -286,7 +285,7 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
                     'Default: admin / admin',
                     style: GoogleFonts.inter(
                       fontSize: 14,
-                      color: AppColors.outline,
+                      color: AppColors.textTertiary,
                     ),
                   ),
                 ],
@@ -312,34 +311,28 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
     return TextFormField(
       controller: controller,
       obscureText: obscureText,
-      style: GoogleFonts.inter(fontSize: 18, color: AppColors.onSurface),
+      style: GoogleFonts.inter(fontSize: 18, color: AppColors.textPrimary),
       autofocus: autofocus,
       textInputAction: nextFocus ? TextInputAction.next : TextInputAction.done,
       onFieldSubmitted: isLast ? (_) => onSubmitted?.call() : null,
       decoration: InputDecoration(
         labelText: label,
-        labelStyle: GoogleFonts.inter(color: AppColors.onSurfaceVariant),
-        prefixIcon: Icon(icon, color: AppColors.onSurfaceVariant),
+        labelStyle: GoogleFonts.inter(color: AppColors.textSecondary),
+        prefixIcon: Icon(icon, color: AppColors.textSecondary),
         suffixIcon: suffix,
         filled: true,
-        fillColor: AppColors.surfaceContainerLow,
+        fillColor: AppColors.surfaceVariant.withOpacity(0.5),
         border: OutlineInputBorder(
           borderRadius: BorderRadius.circular(12),
           borderSide: BorderSide.none,
         ),
         enabledBorder: OutlineInputBorder(
           borderRadius: BorderRadius.circular(12),
-          borderSide: const BorderSide(
-            color: AppColors.outlineVariant,
-            width: 1,
-          ),
+          borderSide: BorderSide.none,
         ),
         focusedBorder: OutlineInputBorder(
           borderRadius: BorderRadius.circular(12),
-          borderSide: const BorderSide(
-            color: AppColors.primaryContainer,
-            width: 2,
-          ),
+          borderSide: const BorderSide(color: AppColors.focusColor, width: 2),
         ),
         contentPadding:
             const EdgeInsets.symmetric(horizontal: 20, vertical: 20),

lib/features/iptv/providers/recommendations_provider.dart

@@ -0,0 +1,253 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../../core/models/playlist_config.dart';
+import '../models/playlist.dart';
+
+/// Represents a content recommendation
+class Recommendation {
+  final Playlist item;
+  final RecommendationType type;
+  final double score;
+  final String reason;
+
+  Recommendation({
+    required this.item,
+    required this.type,
+    this.score = 0.0,
+    required this.reason,
+  });
+}
+
+enum RecommendationType {
+  continueWatching,
+  trending,
+  recentlyAdded,
+  similarContent,
+  topRated,
+  forYou,
+}
+
+class RecommendationService {
+  /// Get continue watching items based on watch history
+  static List<Recommendation> getContinueWatching(
+    Map<String, dynamic> watchHistory,
+    List<Playlist> allContent,
+  ) {
+    final recommendations = <Recommendation>[];
+
+    for (final item in allContent) {
+      final historyKey = item.streamId.toString();
+      if (watchHistory.containsKey(historyKey)) {
+        final lastPosition = watchHistory[historyKey] as double? ?? 0.0;
+
+        // Only show if watched more than 5 seconds ago and less than 95% complete
+        if (lastPosition > 5 && lastPosition < 95) {
+          recommendations.add(
+            Recommendation(
+              item: item,
+              type: RecommendationType.continueWatching,
+              score: 100.0 - lastPosition, // Score higher if recently started
+              reason:
+                  'Continue watching from ${lastPosition.toStringAsFixed(0)}%',
+            ),
+          );
+        }
+      }
+    }
+
+    // Sort by last watched (highest incomplete progress first)
+    recommendations.sort((a, b) => b.score.compareTo(a.score));
+    return recommendations.take(10).toList();
+  }
+
+  /// Get trending content based on view counts
+  static List<Recommendation> getTrending(
+    Map<String, int> viewCounts,
+    List<Playlist> allContent,
+  ) {
+    final recommendations = <Recommendation>[];
+
+    for (final item in allContent) {
+      final views = viewCounts[item.streamId.toString()] ?? 0;
+      if (views > 0) {
+        recommendations.add(
+          Recommendation(
+            item: item,
+            type: RecommendationType.trending,
+            score: views.toDouble(),
+            reason: '$views views - Trending now',
+          ),
+        );
+      }
+    }
+
+    recommendations.sort((a, b) => b.score.compareTo(a.score));
+    return recommendations.take(10).toList();
+  }
+
+  /// Get recently added content
+  static List<Recommendation> getRecentlyAdded(List<Playlist> allContent) {
+    final recommendations = <Recommendation>[];
+
+    // Sort by added date (most recent first)
+    final sorted = [...allContent];
+    sorted.sort((a, b) {
+      final aDate = DateTime.tryParse(a.added ?? '') ?? DateTime(2000);
+      final bDate = DateTime.tryParse(b.added ?? '') ?? DateTime(2000);
+      return bDate.compareTo(aDate);
+    });
+
+    for (final item in sorted.take(20)) {
+      final daysAgo = DateTime.now()
+          .difference(DateTime.tryParse(item.added ?? '') ?? DateTime(2000))
+          .inDays;
+
+      recommendations.add(
+        Recommendation(
+          item: item,
+          type: RecommendationType.recentlyAdded,
+          score: (20 - daysAgo).toDouble().clamp(0, 100),
+          reason: 'Added $daysAgo days ago',
+        ),
+      );
+    }
+
+    return recommendations.take(10).toList();
+  }
+
+  /// Get personalized recommendations based on watch history
+  static List<Recommendation> getForYou(
+    Map<String, dynamic> watchHistory,
+    List<Playlist> allContent,
+  ) {
+    final recommendations = <Recommendation>[];
+
+    // Collect watched categories
+    final watchedCategories = <String>{};
+    watchHistory.forEach((key, value) {
+      if (value is Map && value.containsKey('category')) {
+        watchedCategories.add(value['category'] as String);
+      }
+    });
+
+    // Recommend similar content
+    for (final item in allContent) {
+      if (watchedCategories.contains(item.categoryId)) {
+        recommendations.add(
+          Recommendation(
+            item: item,
+            type: RecommendationType.forYou,
+            score: 75.0,
+            reason: 'Based on your interests',
+          ),
+        );
+      }
+    }
+
+    // Add highly rated content
+    var ratedContent = [...allContent];
+    ratedContent.sort((a, b) {
+      final aRating = double.tryParse(a.rating ?? '0') ?? 0.0;
+      final bRating = double.tryParse(b.rating ?? '0') ?? 0.0;
+      return bRating.compareTo(aRating);
+    });
+
+    for (final item in ratedContent.where((i) {
+      final rating = double.tryParse(i.rating ?? '0') ?? 0.0;
+      return rating >= 7.5;
+    }).take(5)) {
+      recommendations.add(
+        Recommendation(
+          item: item,
+          type: RecommendationType.topRated,
+          score: double.tryParse(item.rating ?? '0') ?? 0.0,
+          reason: 'Highly rated - ${item.rating}/10',
+        ),
+      );
+    }
+
+    // Remove duplicates and limit
+    final seen = <int>{};
+    final unique = <Recommendation>[];
+    for (final rec in recommendations) {
+      if (!seen.contains(rec.item.streamId)) {
+        unique.add(rec);
+        seen.add(rec.item.streamId);
+      }
+    }
+
+    return unique.take(15).toList();
+  }
+}
+
+/// Provider for watch history
+final watchHistoryProvider =
+    StateNotifierProvider<WatchHistoryNotifier, Map<String, dynamic>>((ref) {
+  return WatchHistoryNotifier();
+});
+
+class WatchHistoryNotifier extends StateNotifier<Map<String, dynamic>> {
+  WatchHistoryNotifier() : super({});
+
+  void updateWatchTime(int streamId, double percentage) {
+    state = {
+      ...state,
+      streamId.toString(): {
+        'percentage': percentage,
+        'timestamp': DateTime.now().toIso8601String(),
+      },
+    };
+  }
+
+  void clearHistory() {
+    state = {};
+  }
+}
+
+/// Provider for view counts/trending
+final trendingProvider =
+    StateNotifierProvider<TrendingNotifier, Map<String, int>>((ref) {
+  return TrendingNotifier();
+});
+
+class TrendingNotifier extends StateNotifier<Map<String, int>> {
+  TrendingNotifier() : super({});
+
+  void incrementViewCount(int streamId) {
+    final key = streamId.toString();
+    state = {
+      ...state,
+      key: (state[key] ?? 0) + 1,
+    };
+  }
+}
+
+/// Provider for recommendations
+final recommendationsProvider = FutureProvider.family<List<Recommendation>,
+    (Playlist, Map<String, dynamic>, Map<String, int>, List<Playlist>)>(
+  (ref, params) async {
+    final (playlist, watchHistory, trending, allContent) = params;
+
+    // Combine all recommendation types
+    final allRecommendations = <Recommendation>[
+      ...RecommendationService.getContinueWatching(watchHistory, allContent),
+      ...RecommendationService.getTrending(trending, allContent),
+      ...RecommendationService.getRecentlyAdded(allContent),
+      ...RecommendationService.getForYou(watchHistory, allContent),
+    ];
+
+    // Deduplicate and score
+    final seen = <int>{};
+    final scored = <Recommendation>[];
+
+    for (final rec in allRecommendations) {
+      if (!seen.contains(rec.item.streamId)) {
+        scored.add(rec);
+        seen.add(rec.item.streamId);
+      }
+    }
+
+    // Sort by score
+    scored.sort((a, b) => b.score.compareTo(a.score));
+    return scored;
+  },
+);

lib/features/iptv/screens/dashboard_screen.dart

@@ -1,4 +1,3 @@
-import 'dart:ui';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import '../../../core/models/playlist_config.dart';
@@ -25,7 +24,13 @@ class DashboardScreen extends ConsumerStatefulWidget {
 
 class _DashboardScreenState extends ConsumerState<DashboardScreen> {
   int _selectedIndex = 0;
-  final List<String> _tabs = ['Live TV', 'Movies', 'Series', 'Recordings', 'Settings'];
+  final List<String> _tabs = [
+    'Live TV',
+    'Movies',
+    'Series',
+    'Recordings',
+    'Settings',
+  ];
   final List<IconData> _icons = [
     Icons.live_tv_rounded,
     Icons.movie_rounded,
@@ -41,34 +46,56 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
       body: Stack(
         fit: StackFit.expand,
         children: [
-          // 1. Cinematic Deep Space Background
+          // 1. Cinematic Deep Space Background - Premium Apple TV Style
           Positioned.fill(
             child: Container(
               decoration: const BoxDecoration(
                 gradient: LinearGradient(
-                  begin: Alignment.topLeft,
-                  end: Alignment.bottomRight,
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
                   colors: [
-                    Color(0xFF0F1014),
-                    Color(0xFF121317),
+                    Color(0xFF050505), // Very dark top
+                    AppColors.background, // Black bottom
+                    Color(0xFF0A0A0A), // Slightly darker for depth
                   ],
                 ),
               ),
             ),
           ),
 
-          // Ambient Glow — primary accent diffuse
+          // Ambient Glow Top-Left - Teal (Primary) - VISIBLE
           Positioned(
-            top: -100,
-            left: -100,
+            top: -300,
+            left: -300,
             child: Container(
-              width: 500,
-              height: 500,
+              width: 800,
+              height: 800,
               decoration: BoxDecoration(
                 shape: BoxShape.circle,
                 gradient: RadialGradient(
                   colors: [
-                    AppColors.primary.withOpacity(0.06),
+                    AppColors.primary.withOpacity(0.4),
+                    AppColors.primary.withOpacity(0.1),
+                    Colors.transparent,
+                  ],
+                ),
+              ),
+            ),
+          ),
+
+          // Ambient Glow Bottom-Right - Blue - VISIBLE
+          Positioned(
+            bottom: -250,
+            right: -250,
+            child: Container(
+              width: 700,
+              height: 700,
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                gradient: RadialGradient(
+                  colors: [
+                    AppColors.info.withOpacity(0.35),
+                    AppColors.info.withOpacity(0.1),
                     Colors.transparent,
                   ],
                 ),
@@ -91,15 +118,19 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
             ),
           ),
 
-          // 3. Vertical Glass Sidebar (Stitch Level 2)
+          // 3. Vertical Glass Sidebar
           Positioned(
             left: 24,
             top: 24,
             bottom: 24,
             width: 80,
-            child: GlassContainer.floating(
+            child: GlassContainer(
               borderRadius: 24,
-              padding: EdgeInsets.zero,
+              opacity: 0.1,
+              // blur is hardcoded in GlassContainer (15), so we don't pass it
+              // border is bool, borderColor allows customization
+              hasBorder: true,
+              borderColor: AppColors.border,
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: [
@@ -114,7 +145,7 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
                         borderRadius: BorderRadius.circular(12),
                         boxShadow: [
                           BoxShadow(
-                            color: AppColors.glowPrimary(0.4),
+                            color: AppColors.primary.withOpacity(0.4),
                             blurRadius: 10,
                             offset: const Offset(0, 4),
                           ),
@@ -122,7 +153,7 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
                       ),
                       child: const Icon(
                         Icons.play_arrow_rounded,
-                        color: AppColors.onSurface,
+                        color: AppColors.textPrimary,
                         size: 28,
                       ),
                     ),
@@ -139,37 +170,27 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
                         onTap: () => setState(() => _selectedIndex = index),
                         scaleFactor: 1.2,
                         borderRadius: 16,
+                        focusColor: AppColors.primary,
                         child: AnimatedContainer(
                           duration: const Duration(milliseconds: 200),
                           width: 48,
                           height: 48,
                           decoration: BoxDecoration(
                             color: isSelected
-                                ? AppColors.primary.withOpacity(0.15)
+                                ? AppColors.primary.withOpacity(0.2)
                                 : Colors.transparent,
                             borderRadius: BorderRadius.circular(16),
                             border: isSelected
                                 ? Border.all(
-                                    color: AppColors.primaryContainer
-                                        .withOpacity(0.5),
-                                    width: 2,
+                                    color: AppColors.primary.withOpacity(0.5),
                                   )
                                 : null,
-                            boxShadow: isSelected
-                                ? [
-                                    BoxShadow(
-                                      color: AppColors.glowPrimary(0.2),
-                                      blurRadius: 12,
-                                      spreadRadius: 1,
-                                    ),
-                                  ]
-                                : null,
                           ),
                           child: Icon(
                             _icons[index],
                             color: isSelected
-                                ? AppColors.onSurface
-                                : AppColors.onSurfaceVariant,
+                                ? AppColors.textPrimary
+                                : AppColors.textSecondary,
                             size: 24,
                           ),
                         ),
@@ -179,7 +200,7 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
 
                   const Spacer(),
 
-                  // Profile
+                  // Settings / Profile
                   Padding(
                     padding: const EdgeInsets.only(bottom: 24),
                     child: TvFocusableCard(
@@ -188,11 +209,10 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
                       scaleFactor: 1.1,
                       child: CircleAvatar(
                         radius: 20,
-                        backgroundColor: AppColors.surfaceContainerHigh
-                            .withOpacity(0.5),
-                        child: Icon(
+                        backgroundColor: AppColors.primary.withOpacity(0.1),
+                        child: const Icon(
                           Icons.person,
-                          color: AppColors.onSurfaceVariant,
+                          color: AppColors.textSecondary,
                           size: 20,
                         ),
                       ),

lib/features/iptv/screens/epg_grid_screen.dart

@@ -0,0 +1,496 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:intl/intl.dart';
+import '../../../core/models/playlist_config.dart';
+import '../models/playlist.dart';
+import '../services/xtream_service.dart';
+
+/// EPG Program information
+class EpgProgram {
+  final String id;
+  final String channelId;
+  final String title;
+  final String description;
+  final DateTime startTime;
+  final DateTime endTime;
+  final String? imageUrl;
+  final bool isNow;
+  final bool isNext;
+
+  EpgProgram({
+    required this.id,
+    required this.channelId,
+    required this.title,
+    required this.description,
+    required this.startTime,
+    required this.endTime,
+    this.imageUrl,
+    this.isNow = false,
+    this.isNext = false,
+  });
+
+  Duration get duration => endTime.difference(startTime);
+
+  double get progress {
+    if (!isNow) return 0;
+    final now = DateTime.now();
+    if (now.isBefore(startTime)) return 0;
+    if (now.isAfter(endTime)) return 100;
+    return ((now.difference(startTime).inSeconds) / duration.inSeconds) * 100;
+  }
+}
+
+/// EPG Grid View Screen (7 days, 24 hours)
+class EpgGridScreen extends ConsumerStatefulWidget {
+  final Playlist playlist;
+
+  const EpgGridScreen({
+    super.key,
+    required this.playlist,
+  });
+
+  @override
+  ConsumerState<EpgGridScreen> createState() => _EpgGridScreenState();
+}
+
+class _EpgGridScreenState extends ConsumerState<EpgGridScreen>
+    with TickerProviderStateMixin {
+  late TabController _tabController;
+  final _horizontalScroll = ScrollController();
+  final _verticalScroll = ScrollController();
+  Map<String, List<EpgProgram>> _epgData = {};
+  DateTime _selectedDate = DateTime.now();
+  bool _isLoading = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _tabController = TabController(length: 7, vsync: this);
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _loadEpgData();
+    });
+  }
+
+  @override
+  void dispose() {
+    _tabController.dispose();
+    _horizontalScroll.dispose();
+    _verticalScroll.dispose();
+    super.dispose();
+  }
+
+  Future<void> _loadEpgData() async {
+    if (_isLoading) return;
+    setState(() => _isLoading = true);
+
+    try {
+      final service = ref.read(xtreamServiceProvider(widget.playlist));
+      final channels = await service.getLiveChannels();
+
+      final epgMap = <String, List<EpgProgram>>{};
+
+      // Load EPG for each channel
+      for (final channel in channels) {
+        try {
+          final epg = await service.getFullEpg(channel.streamId.toString());
+          final programs = _parseEpgPrograms(epg, channel.streamId.toString());
+          epgMap[channel.streamId.toString()] = programs;
+        } catch (e) {
+          print('Error loading EPG for ${channel.name}: $e');
+          epgMap[channel.streamId.toString()] = [];
+        }
+      }
+
+      setState(() {
+        _epgData = epgMap;
+        _isLoading = false;
+      });
+    } catch (e) {
+      print('Error loading EPG: $e');
+      setState(() => _isLoading = false);
+    }
+  }
+
+  List<EpgProgram> _parseEpgPrograms(
+    Map<String, dynamic> epgData,
+    String channelId,
+  ) {
+    final programs = <EpgProgram>[];
+    final now = DateTime.now();
+
+    // Parse EPG data structure
+    if (epgData.containsKey('epg_listings')) {
+      final listings = epgData['epg_listings'] as List;
+      for (final item in listings) {
+        try {
+          final startStr = item['start'] as String?;
+          final endStr = item['end'] as String?;
+          final title = item['title'] as String?;
+          final desc = item['description'] as String? ?? '';
+
+          if (startStr != null && endStr != null && title != null) {
+            final start = _parseEpgTime(startStr);
+            final end = _parseEpgTime(endStr);
+
+            programs.add(
+              EpgProgram(
+                id: '${channelId}_${start.millisecondsSinceEpoch}',
+                channelId: channelId,
+                title: title,
+                description: desc,
+                startTime: start,
+                endTime: end,
+                isNow: now.isAfter(start) && now.isBefore(end),
+                isNext:
+                    start.isAfter(now) && start.difference(now).inMinutes < 60,
+              ),
+            );
+          }
+        } catch (e) {
+          continue;
+        }
+      }
+    }
+
+    // Sort by start time
+    programs.sort((a, b) => a.startTime.compareTo(b.startTime));
+    return programs;
+  }
+
+  DateTime _parseEpgTime(String timeStr) {
+    try {
+      // Handle various formats: "12:30", "12:30:00", unix timestamp
+      if (timeStr.contains(':')) {
+        final parts = timeStr.split(':');
+        final hours = int.parse(parts[0]);
+        final minutes = int.parse(parts[1]);
+        final today = DateTime.now();
+        return DateTime(today.year, today.month, today.day, hours, minutes);
+      } else {
+        return DateTime.fromMillisecondsSinceEpoch(int.parse(timeStr) * 1000);
+      }
+    } catch (e) {
+      return DateTime.now();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('EPG Guide'),
+        bottom: TabBar(
+          controller: _tabController,
+          isScrollable: true,
+          onTap: (index) {
+            setState(() {
+              _selectedDate = DateTime.now().add(Duration(days: index));
+            });
+          },
+          tabs: List.generate(7, (index) {
+            final date = DateTime.now().add(Duration(days: index));
+            final day = DateFormat('EEE').format(date);
+            final dateNum = DateFormat('d').format(date);
+            return Tab(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Text(day, style: const TextStyle(fontSize: 11)),
+                  Text(
+                    dateNum,
+                    style: const TextStyle(
+                      fontSize: 13,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ],
+              ),
+            );
+          }),
+        ),
+      ),
+      body: _isLoading
+          ? const Center(child: CircularProgressIndicator())
+          : _buildEpgGrid(),
+    );
+  }
+
+  Widget _buildEpgGrid() {
+    if (_epgData.isEmpty) {
+      return const Center(
+        child: Text('No EPG data available'),
+      );
+    }
+
+    final channels = _epgData.keys.toList();
+
+    return Scrollbar(
+      controller: _horizontalScroll,
+      child: SingleChildScrollView(
+        controller: _horizontalScroll,
+        scrollDirection: Axis.horizontal,
+        child: Column(
+          children: [
+            // Time headers
+            SizedBox(
+              height: 60,
+              child: Row(
+                children: [
+                  SizedBox(
+                    width: 150,
+                    child: Container(
+                      decoration: BoxDecoration(
+                        border: Border(
+                          right: BorderSide(color: Colors.grey[700]!),
+                          bottom: BorderSide(color: Colors.grey[700]!),
+                        ),
+                      ),
+                    ),
+                  ),
+                  ...List.generate(24, (hour) {
+                    return Container(
+                      width: 100,
+                      height: 60,
+                      decoration: BoxDecoration(
+                        border: Border(
+                          right: BorderSide(color: Colors.grey[700]!),
+                          bottom: BorderSide(color: Colors.grey[700]!),
+                        ),
+                      ),
+                      child: Center(
+                        child: Text(
+                          '$hour:00',
+                          style: const TextStyle(
+                            fontSize: 11,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ),
+                    );
+                  }),
+                ],
+              ),
+            ),
+
+            // Channel rows
+            Expanded(
+              child: Scrollbar(
+                controller: _verticalScroll,
+                child: ListView.builder(
+                  controller: _verticalScroll,
+                  itemCount: channels.length,
+                  itemBuilder: (context, index) {
+                    final channelId = channels[index];
+                    final programs = _epgData[channelId] ?? [];
+
+                    return _EpgChannelRow(
+                      channelId: channelId,
+                      programs: programs,
+                      onProgramTap: (program) {
+                        _showProgramDetail(program);
+                      },
+                    );
+                  },
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  void _showProgramDetail(EpgProgram program) {
+    showModalBottomSheet(
+      context: context,
+      builder: (context) => _ProgramDetailSheet(program: program),
+    );
+  }
+}
+
+/// Individual channel row in EPG grid
+class _EpgChannelRow extends StatelessWidget {
+  final String channelId;
+  final List<EpgProgram> programs;
+  final Function(EpgProgram) onProgramTap;
+
+  const _EpgChannelRow({
+    required this.channelId,
+    required this.programs,
+    required this.onProgramTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        // Channel name
+        Container(
+          width: 150,
+          height: 100,
+          decoration: BoxDecoration(
+            border: Border(
+              right: BorderSide(color: Colors.grey[700]!),
+              bottom: BorderSide(color: Colors.grey[700]!),
+            ),
+          ),
+          child: Padding(
+            padding: const EdgeInsets.all(8),
+            child: Text(
+              channelId,
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+              style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
+            ),
+          ),
+        ),
+
+        // Programs
+        ...programs.map((program) {
+          final duration = program.duration.inMinutes;
+          final width =
+              (duration / 60 * 100).clamp(40, double.infinity).toDouble();
+
+          return GestureDetector(
+            onTap: () => onProgramTap(program),
+            child: Container(
+              width: width,
+              height: 100,
+              decoration: BoxDecoration(
+                color: program.isNow
+                    ? Colors.blue.withOpacity(0.7)
+                    : program.isNext
+                        ? Colors.purple.withOpacity(0.5)
+                        : Colors.grey[800],
+                border: Border(
+                  right: BorderSide(color: Colors.grey[700]!),
+                  bottom: BorderSide(color: Colors.grey[700]!),
+                ),
+              ),
+              child: Stack(
+                fit: StackFit.expand,
+                children: [
+                  // Program info
+                  Padding(
+                    padding: const EdgeInsets.all(4),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          program.title,
+                          maxLines: 2,
+                          overflow: TextOverflow.ellipsis,
+                          style: const TextStyle(
+                            fontSize: 10,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                        const SizedBox(height: 2),
+                        Text(
+                          '${DateFormat('HH:mm').format(program.startTime)} - ${DateFormat('HH:mm').format(program.endTime)}',
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                          style: const TextStyle(fontSize: 8),
+                        ),
+                      ],
+                    ),
+                  ),
+
+                  // Progress bar for now playing
+                  if (program.isNow)
+                    Positioned(
+                      bottom: 0,
+                      left: 0,
+                      right: 0,
+                      child: ClipRRect(
+                        borderRadius: const BorderRadius.only(
+                          bottomLeft: Radius.circular(4),
+                          bottomRight: Radius.circular(4),
+                        ),
+                        child: LinearProgressIndicator(
+                          value: program.progress / 100,
+                          minHeight: 3,
+                          backgroundColor: Colors.white24,
+                          valueColor: const AlwaysStoppedAnimation(Colors.red),
+                        ),
+                      ),
+                    ),
+                ],
+              ),
+            ),
+          );
+        }),
+      ],
+    );
+  }
+}
+
+/// Program detail bottom sheet
+class _ProgramDetailSheet extends StatelessWidget {
+  final EpgProgram program;
+
+  const _ProgramDetailSheet({required this.program});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            program.title,
+            style: const TextStyle(
+              fontSize: 22,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+          const SizedBox(height: 8),
+          Row(
+            children: [
+              Icon(
+                program.isNow ? Icons.play_circle : Icons.schedule,
+                color: program.isNow ? Colors.green : Colors.orange,
+                size: 16,
+              ),
+              const SizedBox(width: 8),
+              Text(
+                '${DateFormat('HH:mm').format(program.startTime)} - ${DateFormat('HH:mm').format(program.endTime)}',
+                style: const TextStyle(fontSize: 14, color: Colors.grey),
+              ),
+              const SizedBox(width: 16),
+              Text(
+                '${program.duration.inMinutes} min',
+                style: const TextStyle(fontSize: 14, color: Colors.grey),
+              ),
+            ],
+          ),
+          const SizedBox(height: 16),
+          Text(
+            program.description.isEmpty
+                ? 'No description available'
+                : program.description,
+            style: const TextStyle(fontSize: 14),
+          ),
+          const SizedBox(height: 24),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            children: [
+              ElevatedButton.icon(
+                onPressed: () => Navigator.pop(context),
+                icon: const Icon(Icons.play_arrow),
+                label: const Text('Watch Now'),
+              ),
+              ElevatedButton.icon(
+                onPressed: () => Navigator.pop(context),
+                icon: const Icon(Icons.event),
+                label: const Text('Add Reminder'),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/features/iptv/screens/player_screen.dart

@@ -11,13 +11,10 @@ import '../providers/playback_positions_provider.dart';
 // ... (existing imports)
 // ... (existing imports)
 import '../../../core/models/playlist_config.dart';
-import '../../../core/models/iptv_models.dart';
-import '../../../core/widgets/tv_focusable_card.dart';
 import '../../../core/widgets/glass_container.dart';
 import '../../../core/theme/app_colors.dart';
-import '../widgets/epg_overlay.dart';
 
-enum StreamType { live, vod, series }
+enum StreamType { live, vod, series, recording }
 
 class PlayerScreen extends ConsumerStatefulWidget {
   final String streamId;
@@ -57,7 +54,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
   StreamSubscription? _messageSubscription;
   final String _aspectRatio = 'contain';
   bool _isSeeking = false;
-  late final String _viewIdPrefix = DateTime.now().millisecondsSinceEpoch.toString();
+  late final String _viewIdPrefix =
+      DateTime.now().millisecondsSinceEpoch.toString();
   String _viewId = 'iptv-player';
   String? _currentStreamUrl;
   String _statusMessage = 'Loading...';
@@ -129,12 +127,14 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
           currentStreamId,
           widget.containerExtension,
         );
+      } else if (widget.streamType == StreamType.recording) {
+        streamUrl = '${service.backendBaseUrl}/api/recordings/stream/$currentStreamId/playlist.m3u8';
       }
 
       // Store URL for Lite Player
       final isMobile = MediaQuery.of(context).size.width < 600;
       final isLiveTV = widget.streamType == StreamType.live;
-      
+
       // TURBO-START: Use direct MPEG-TS for Live TV on Desktop/Android for instant zapping
       if (isLiveTV && !isMobile) {
         streamUrl = service.getLiveStreamUrlTs(currentStreamId);
@@ -152,15 +152,23 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
       // Force player choice based on stream type:
       // - Live TV: Player Lite (simple TS playback with mpegts.js)
       // - VOD/Series: Player Standard (fuller controls, HLS support)
-      
+
       // Cache buster to force reload of updated player.html
       final cacheBuster = DateTime.now().millisecondsSinceEpoch;
 
-      final streamTypeParam = widget.streamType == StreamType.live ? 'live' : 'vod';
-      final playerFile = isMobile ? 'player_mobile.html' : (isLiveTV ? 'player_lite.html' : 'player.html');
-      
+      final streamTypeParam =
+          widget.streamType == StreamType.live ? 'live' : 'vod';
+      final playerFile = isMobile
+          ? 'player_mobile.html'
+          : (isLiveTV ? 'player_lite.html' : 'player.html');
+
       // Inject Turbo-Start flag
-      var playerSrc = '$playerFile?url=$encodedUrl&type=$streamTypeParam&turbo=true&v=$cacheBuster';
+      var playerSrc =
+          '$playerFile?url=$encodedUrl&type=$streamTypeParam&turbo=true&v=$cacheBuster';
+
+      if (widget.streamType == StreamType.recording) {
+        playerSrc += '&is_recording=true';
+      }
 
       if (startTimeOverride != null) {
         playerSrc += '&t=$startTimeOverride';
@@ -300,31 +308,16 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
   void _toggleFullscreen() {
     try {
       final doc = html.document;
-      final isFullscreen = doc.fullscreenElement != null || 
-                          (doc as dynamic).webkitFullscreenElement != null ||
-                          (doc as dynamic).mozFullScreenElement != null;
+      final isFullscreen = doc.fullscreenElement != null ||
+          (doc as dynamic).webkitFullscreenElement != null ||
+          (doc as dynamic).mozFullScreenElement != null;
 
       if (isFullscreen) {
-        if (doc.exitFullscreen != null) {
-          doc.exitFullscreen();
-        } else if ((doc as dynamic).webkitExitFullscreen != null) {
-          (doc as dynamic).webkitExitFullscreen();
-        } else if ((doc as dynamic).mozCancelFullScreen != null) {
-          (doc as dynamic).mozCancelFullScreen();
-        }
+        doc.exitFullscreen();
       } else {
         final element = doc.documentElement;
         if (element != null) {
-          if (element.requestFullscreen != null) {
-            element.requestFullscreen();
-          } else if ((element as dynamic).webkitRequestFullscreen != null) {
-            (element as dynamic).webkitRequestFullscreen();
-          } else if ((element as dynamic).mozRequestFullScreen != null) {
-            (element as dynamic).mozRequestFullScreen();
-          } else {
-            // Fallback: Message the player if browser API fails
-            _sendMessage({'type': 'request_fullscreen'});
-          }
+          element.requestFullscreen();
         }
       }
     } catch (e) {
@@ -442,16 +435,19 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                                         children: [
                                           Text(
                                             widget.channels != null
-                                                ? (widget.channels![_currentIndex]
+                                                ? (widget
+                                                            .channels![
+                                                                _currentIndex]
                                                             .name ??
-                                                        widget.channels![
+                                                        widget
+                                                            .channels![
                                                                 _currentIndex]
                                                             .title ??
                                                         'Unknown')
                                                     .toString()
                                                 : widget.title,
-                                            style: GoogleFonts.inter(
-                                              color: AppColors.onSurface,
+                                            style: GoogleFonts.outfit(
+                                              color: AppColors.textPrimary,
                                               fontSize: 18,
                                               fontWeight: FontWeight.w600,
                                             ),
@@ -478,29 +474,34 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                           // Unified Bottom Bar - EPG + Controls in one bar
                           AnimatedPositioned(
                             duration: const Duration(milliseconds: 200),
-                            bottom: _showControls ? 24 : -150, // More offset for stacked layout
+                            bottom: _showControls
+                                ? 24
+                                : -150, // More offset for stacked layout
                             left: 16,
                             right: 16,
                             child: LayoutBuilder(
                               builder: (context, constraints) {
-                                final isSmallScreen = constraints.maxWidth < 600;
+                                final isSmallScreen =
+                                    constraints.maxWidth < 600;
                                 return Container(
                                   padding: EdgeInsets.symmetric(
                                     horizontal: isSmallScreen ? 16 : 20,
                                     vertical: isSmallScreen ? 12 : 16,
                                   ),
                                   decoration: BoxDecoration(
-                                    color: const Color(0xFF1A1A2E).withOpacity(0.95),
+                                    color: AppColors.surface.withOpacity(0.95),
                                     borderRadius: BorderRadius.circular(24),
                                     boxShadow: [
                                       BoxShadow(
-                                        color: AppColors.background.withOpacity(0.3),
+                                        color: AppColors.background
+                                            .withOpacity(0.3),
                                         blurRadius: 10,
                                         spreadRadius: 2,
                                       ),
                                     ],
                                     border: Border.all(
-                                      color: Colors.white.withOpacity(0.15),
+                                      color: AppColors.textPrimary
+                                          .withOpacity(0.15),
                                     ),
                                   ),
                                   child: isSmallScreen
@@ -510,14 +511,17 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                                             // EPG Info (top in mobile)
                                             _buildInlineEpg(),
                                             const SizedBox(height: 12),
-                                            const Divider(color: AppColors.outlineVariant),
+                                            const Divider(
+                                              color: Colors.white10,
+                                            ),
                                             const SizedBox(height: 8),
                                             // Control Buttons
                                             Row(
                                               mainAxisAlignment:
                                                   MainAxisAlignment.spaceEvenly,
                                               children: _buildControlButtons(
-                                                  isSmallScreen),
+                                                isSmallScreen,
+                                              ),
                                             ),
                                           ],
                                         )
@@ -532,7 +536,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                                             Row(
                                               mainAxisSize: MainAxisSize.min,
                                               children: _buildControlButtons(
-                                                  isSmallScreen),
+                                                isSmallScreen,
+                                              ),
                                             ),
                                           ],
                                         ),
@@ -554,7 +559,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
 
     // STANDARD PLAYER MODE (VOD/Series)
     return Scaffold(
-      backgroundColor: AppColors.background,
+      backgroundColor: Colors.black,
       body: Stack(
         fit: StackFit.expand,
         children: [
@@ -585,7 +590,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
             Positioned.fill(
               child: PointerInterceptor(
                 child: Container(
-                  color: AppColors.background.withOpacity(0.4),
+                  color: Colors.black.withOpacity(0.4),
                   child: Stack(
                     children: [
                       // Top Bar
@@ -593,9 +598,10 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                         top: 24,
                         left: 24,
                         right: 24,
-                        child: GlassContainer.glass(
+                        child: GlassContainer(
                           height: 72,
                           borderRadius: 24,
+                          opacity: 0.1,
                           padding: const EdgeInsets.symmetric(horizontal: 16),
                           child: Row(
                             children: [
@@ -607,10 +613,10 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                               Expanded(
                                 child: Text(
                                   widget.title,
-                                  style: GoogleFonts.inter(
+                                  style: GoogleFonts.outfit(
                                     fontSize: 20,
                                     fontWeight: FontWeight.w600,
-                                    color: AppColors.onSurface,
+                                    color: Colors.white,
                                   ),
                                 ),
                               ),
@@ -632,8 +638,11 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                         bottom: 40,
                         left: 40,
                         right: 40,
-                        child: GlassContainer.glass(
+                        child: GlassContainer(
                           borderRadius: 24,
+                          opacity: 0.2, // Slightly more opaque for controls
+                          hasBorder: true,
+                          borderColor: Colors.white.withOpacity(0.1),
                           padding: const EdgeInsets.all(24),
                           child: Column(
                             mainAxisSize: MainAxisSize.min,
@@ -648,7 +657,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                                       ),
                                     ),
                                     style: GoogleFonts.inter(
-                                      color: AppColors.onSurfaceVariant,
+                                      color: Colors.white70,
                                     ),
                                   ),
                                   const SizedBox(width: 16),
@@ -659,7 +668,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                                         activeTrackColor: AppColors.primary,
                                         inactiveTrackColor:
                                             Colors.white.withOpacity(0.2),
-                                        thumbColor: AppColors.onSurface,
+                                        thumbColor: Colors.white,
                                         thumbShape: const RoundSliderThumbShape(
                                           enabledThumbRadius: 8,
                                         ),
@@ -700,7 +709,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                                       ),
                                     ),
                                     style: GoogleFonts.inter(
-                                      color: AppColors.onSurfaceVariant,
+                                      color: Colors.white70,
                                     ),
                                   ),
                                 ],
@@ -796,7 +805,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                 ? null
                 : Border.all(color: Colors.white.withOpacity(0.1)),
           ),
-          child: Icon(icon, color: AppColors.onSurface, size: iconSize),
+          child: Icon(icon, color: Colors.white, size: iconSize),
         ),
       ),
     );
@@ -847,7 +856,6 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
         onTap: _toggleMute,
         size: buttonSize,
       ),
-
     ];
   }
 
@@ -887,7 +895,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
           ),
           child: Icon(
             icon,
-            color: highlighted ? AppColors.primary : AppColors.onSurface,
+            color: highlighted ? AppColors.primary : Colors.white,
             size: iconSize,
           ),
         ),
@@ -919,13 +927,13 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                     padding:
                         const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                     decoration: BoxDecoration(
-                      color: AppColors.error,
+                      color: Colors.red,
                       borderRadius: BorderRadius.circular(4),
                     ),
                     child: const Text(
                       'LIVE',
                       style: TextStyle(
-                        color: AppColors.onSurface,
+                        color: Colors.white,
                         fontSize: 11,
                         fontWeight: FontWeight.bold,
                       ),
@@ -937,8 +945,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                       widget.channels != null
                           ? widget.channels![_currentIndex].name
                           : widget.title,
-                      style: GoogleFonts.inter(
-                        color: AppColors.onSurface,
+                      style: GoogleFonts.outfit(
+                        color: Colors.white,
                         fontSize: 16,
                         fontWeight: FontWeight.w600,
                       ),
@@ -967,13 +975,13 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                   padding:
                       const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                   decoration: BoxDecoration(
-                    color: AppColors.error,
+                    color: Colors.red,
                     borderRadius: BorderRadius.circular(4),
                   ),
                   child: const Text(
                     'LIVE',
                     style: TextStyle(
-                      color: AppColors.onSurface,
+                      color: Colors.white,
                       fontSize: 11,
                       fontWeight: FontWeight.bold,
                     ),
@@ -987,8 +995,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                     children: [
                       Text(
                         currentProgram.title,
-                        style: GoogleFonts.inter(
-                          color: AppColors.onSurface,
+                        style: GoogleFonts.outfit(
+                          color: Colors.white,
                           fontSize: 15,
                           fontWeight: FontWeight.w600,
                         ),
@@ -999,7 +1007,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                         Text(
                           currentProgram.description,
                           style: GoogleFonts.inter(
-                            color: AppColors.onSurfaceVariant,
+                            color: Colors.white60,
                             fontSize: 12,
                           ),
                           maxLines: 1,
@@ -1016,13 +1024,13 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
               Container(
                 padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                 decoration: BoxDecoration(
-                  color: AppColors.error,
+                  color: Colors.red,
                   borderRadius: BorderRadius.circular(4),
                 ),
                 child: const Text(
                   'LIVE',
                   style: TextStyle(
-                    color: AppColors.onSurface,
+                    color: Colors.white,
                     fontSize: 11,
                     fontWeight: FontWeight.bold,
                   ),
@@ -1033,8 +1041,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                 widget.channels != null
                     ? widget.channels![_currentIndex].name
                     : widget.title,
-                style: GoogleFonts.inter(
-                  color: AppColors.onSurface,
+                style: GoogleFonts.outfit(
+                  color: Colors.white,
                   fontSize: 16,
                   fontWeight: FontWeight.w600,
                 ),
@@ -1045,8 +1053,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
             widget.channels != null
                 ? widget.channels![_currentIndex].name
                 : widget.title,
-            style: GoogleFonts.inter(
-              color: AppColors.onSurface,
+            style: GoogleFonts.outfit(
+              color: Colors.white,
               fontSize: 16,
               fontWeight: FontWeight.w600,
             ),
@@ -1055,5 +1063,4 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
       },
     );
   }
-
 }

lib/features/iptv/screens/playlist_selection_screen.dart

@@ -27,9 +27,9 @@ class PlaylistSelectionScreen extends ConsumerWidget {
       appBar: AppBar(
         title: Text(
           'Select Playlist',
-          style: GoogleFonts.inter(
+          style: GoogleFonts.roboto(
             fontWeight: FontWeight.w600,
-            color: AppColors.onSurface,
+            color: AppColors.textPrimary,
           ),
         ),
         backgroundColor: Colors.transparent,
@@ -37,13 +37,15 @@ class PlaylistSelectionScreen extends ConsumerWidget {
         actions: [
           if (currentUser?.isAdmin ?? false)
             IconButton(
-              icon:
-                  const Icon(Icons.admin_panel_settings, color: AppColors.onSurfaceVariant),
+              icon: const Icon(
+                Icons.admin_panel_settings,
+                color: AppColors.textSecondary,
+              ),
               onPressed: () => context.go('/admin'),
               tooltip: 'Admin Panel',
             ),
           IconButton(
-            icon: const Icon(Icons.logout, color: AppColors.onSurfaceVariant),
+            icon: const Icon(Icons.logout, color: AppColors.textSecondary),
             onPressed: () async {
               await ref.read(authProvider.notifier).logout();
               if (context.mounted) {
@@ -57,107 +59,122 @@ class PlaylistSelectionScreen extends ConsumerWidget {
       body: Container(
         decoration: const BoxDecoration(
           gradient: LinearGradient(
-            begin: Alignment.topLeft,
-            end: Alignment.bottomRight,
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
             colors: [
-              Color(0xFF0F1014), // Deep Space Dark
-              Color(0xFF181920), // Soft Eerie Black
+              Color(0xFF050505),
+              AppColors.background,
+              Color(0xFF0A0A0A),
             ],
           ),
         ),
-        child: playlistsAsync.when(
-          loading: () => const Center(
-            child: CircularProgressIndicator(color: AppColors.primary),
-          ),
-          error: (error, stack) => Center(
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                const Icon(Icons.error_outline,
-                    size: 64, color: AppColors.error),
-                const SizedBox(height: 16),
-                Text(
-                  'Error loading playlists',
-                  style: GoogleFonts.inter(
-                    fontSize: 18,
-                    color: AppColors.onSurfaceVariant,
-                  ),
-                ),
-                const SizedBox(height: 8),
-                ElevatedButton(
-                  onPressed: () => ref.refresh(playlistsProvider),
-                  style: ElevatedButton.styleFrom(
-                    backgroundColor: AppColors.primary,
-                    foregroundColor: AppColors.onSurface,
-                  ),
-                  child: Text('Retry', style: GoogleFonts.inter()),
-                ),
-              ],
-            ),
-          ),
-          data: (playlists) {
-            if (playlists.isEmpty) {
-              return Center(
-                child: Column(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: [
-                    const Icon(
-                      Icons.playlist_remove,
-                      size: 64,
-                      color: AppColors.outlineVariant,
-                    ),
-                    const SizedBox(height: 16),
-                    Text(
-                      'No playlists available',
-                      style: GoogleFonts.inter(
-                        fontSize: 18,
-                        color: AppColors.onSurfaceVariant,
-                      ),
-                    ),
-                    const SizedBox(height: 8),
-                    Text(
-                      currentUser?.isAdmin ?? false
-                          ? 'Add playlists in Admin Panel'
-                          : 'Contact administrator',
-                      style: GoogleFonts.inter(
-                        fontSize: 14,
-                        color: AppColors.outline,
-                      ),
-                    ),
-                  ],
-                ),
-              );
-            }
-
-            return GridView.builder(
-              padding: const EdgeInsets.fromLTRB(
-                48,
-                100,
-                48,
-                48,
-              ), // More padding for cinematic feel
-              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-                crossAxisCount:
-                    MediaQuery.of(context).size.width > 1200 ? 4 : 3,
-                crossAxisSpacing: 32,
-                mainAxisSpacing: 32,
-                childAspectRatio: 1.4,
-              ),
-              itemCount: playlists.length,
-              itemBuilder: (context, index) {
-                final playlist = playlists[index];
-                return _PlaylistCard(
-                  playlist: playlist,
-                  onTap: () {
-                    // Update current selected playlist provider first
-                    ref.read(selectedPlaylistProvider.notifier).state = playlist;
-                    // Then navigate to dashboard
-                    context.go('/dashboard');
-                  },
+        child: SafeArea(
+          child: LayoutBuilder(
+            builder: (context, constraints) {
+              // Safety: if constraints are invalid, show loading spinner
+              if (!constraints.maxWidth.isFinite ||
+                  constraints.maxWidth <= 0 ||
+                  !constraints.maxHeight.isFinite ||
+                  constraints.maxHeight <= 0) {
+                return const Center(
+                  child: CircularProgressIndicator(color: AppColors.primary),
                 );
-              },
-            );
-          },
+              }
+
+              return playlistsAsync.when(
+                loading: () => const Center(
+                  child: CircularProgressIndicator(color: AppColors.primary),
+                ),
+                error: (error, stack) => Center(
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      const Icon(
+                        Icons.error_outline,
+                        size: 64,
+                        color: AppColors.error,
+                      ),
+                      const SizedBox(height: 16),
+                      Text(
+                        'Error loading playlists',
+                        style: GoogleFonts.outfit(
+                          fontSize: 18,
+                          color: AppColors.textSecondary,
+                        ),
+                      ),
+                      const SizedBox(height: 8),
+                      ElevatedButton(
+                        onPressed: () => ref.refresh(playlistsProvider),
+                        style: ElevatedButton.styleFrom(
+                          backgroundColor: AppColors.primary,
+                          foregroundColor: AppColors.textPrimary,
+                        ),
+                        child: Text('Retry', style: GoogleFonts.inter()),
+                      ),
+                    ],
+                  ),
+                ),
+                data: (playlists) {
+                  if (playlists.isEmpty) {
+                    return Center(
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          const Icon(
+                            Icons.playlist_remove,
+                            size: 64,
+                            color: Colors.white24,
+                          ),
+                          const SizedBox(height: 16),
+                          Text(
+                            'No playlists available',
+                            style: GoogleFonts.outfit(
+                              fontSize: 18,
+                              color: Colors.white60,
+                            ),
+                          ),
+                          const SizedBox(height: 8),
+                          Text(
+                            currentUser?.isAdmin ?? false
+                                ? 'Add playlists in Admin Panel'
+                                : 'Contact administrator',
+                            style: GoogleFonts.inter(
+                              fontSize: 14,
+                              color: Colors.white38,
+                            ),
+                          ),
+                        ],
+                      ),
+                    );
+                  }
+
+                  // Simple Wrap layout - no grid, no NaN-prone calculations
+                  return SingleChildScrollView(
+                    padding: const EdgeInsets.fromLTRB(48, 32, 48, 48),
+                    child: Wrap(
+                      spacing: 32,
+                      runSpacing: 32,
+                      children: playlists.map((playlist) {
+                        return SizedBox(
+                          width: 340,
+                          height: 240,
+                          child: _PlaylistCard(
+                            playlist: playlist,
+                            onTap: () {
+                              ref
+                                  .read(selectedPlaylistProvider.notifier)
+                                  .state = playlist;
+                              context.go('/dashboard');
+                            },
+                          ),
+                        );
+                      }).toList(),
+                    ),
+                  );
+                },
+              );
+            },
+          ),
         ),
       ),
     );
@@ -193,7 +210,7 @@ class _PlaylistCardState extends State<_PlaylistCard> {
           decoration: BoxDecoration(
             color: _isHovered
                 ? Colors.white.withOpacity(0.1)
-                : Colors.white.withOpacity(0.03), // Subtle glass
+                : Colors.white.withOpacity(0.03),
             borderRadius: BorderRadius.circular(24),
             border: Border.all(
               color: _isHovered
@@ -246,16 +263,16 @@ class _PlaylistCardState extends State<_PlaylistCard> {
                 child: Icon(
                   Icons.playlist_play_rounded,
                   size: 32,
-                  color: _isHovered ? AppColors.onSurface : AppColors.onSurfaceVariant,
+                  color: _isHovered ? Colors.white : Colors.white70,
                 ),
               ),
               const SizedBox(height: 20),
               Text(
                 widget.playlist.name,
-                style: GoogleFonts.inter(
+                style: GoogleFonts.outfit(
                   fontSize: 22,
                   fontWeight: FontWeight.bold,
-                  color: AppColors.onSurface,
+                  color: Colors.white,
                   height: 1.2,
                 ),
                 maxLines: 2,
@@ -266,7 +283,7 @@ class _PlaylistCardState extends State<_PlaylistCard> {
                 Uri.tryParse(widget.playlist.dns)?.host ?? widget.playlist.dns,
                 style: GoogleFonts.inter(
                   fontSize: 13,
-                  color: AppColors.outline,
+                  color: Colors.white38,
                   letterSpacing: 0.5,
                 ),
                 maxLines: 1,

lib/features/iptv/services/download_service.dart

@@ -0,0 +1,309 @@
+import 'dart:io';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+/// Represents a download task
+class DownloadTask {
+  final String id;
+  final String title;
+  final String url;
+  final String filePath;
+  final DownloadStatus status;
+  final double progress;
+  final int? totalSize;
+  final int downloadedSize;
+
+  DownloadTask({
+    required this.id,
+    required this.title,
+    required this.url,
+    required this.filePath,
+    this.status = DownloadStatus.pending,
+    this.progress = 0.0,
+    this.totalSize,
+    this.downloadedSize = 0,
+  });
+
+  DownloadTask copyWith({
+    DownloadStatus? status,
+    double? progress,
+    int? downloadedSize,
+  }) =>
+      DownloadTask(
+        id: id,
+        title: title,
+        url: url,
+        filePath: filePath,
+        status: status ?? this.status,
+        progress: progress ?? this.progress,
+        totalSize: totalSize,
+        downloadedSize: downloadedSize ?? this.downloadedSize,
+      );
+}
+
+enum DownloadStatus {
+  pending,
+  downloading,
+  paused,
+  completed,
+  failed,
+  cancelled,
+}
+
+/// Service for managing downloads
+class DownloadService {
+  static const _downloadDir = './downloads';
+  static const _maxConcurrentDownloads = 3;
+  static const _maxStorageGb = 50;
+
+  final List<DownloadTask> _downloads = [];
+  final List<String> _activeDownloads = [];
+
+  /// Initialize download directory
+  static Future<void> initialize() async {
+    final dir = Directory(_downloadDir);
+    if (!dir.existsSync()) {
+      await dir.create(recursive: true);
+    }
+  }
+
+  /// Start a new download
+  Future<DownloadTask> startDownload({
+    required String id,
+    required String title,
+    required String url,
+  }) async {
+    final filePath = '$_downloadDir/$id.mp4';
+    final task = DownloadTask(
+      id: id,
+      title: title,
+      url: url,
+      filePath: filePath,
+    );
+
+    _downloads.add(task);
+    _processDownloadQueue();
+    return task;
+  }
+
+  /// Pause download
+  void pauseDownload(String id) {
+    final index = _downloads.indexWhere((t) => t.id == id);
+    if (index != -1) {
+      _downloads[index] = _downloads[index].copyWith(
+        status: DownloadStatus.paused,
+      );
+    }
+  }
+
+  /// Resume download
+  void resumeDownload(String id) {
+    final index = _downloads.indexWhere((t) => t.id == id);
+    if (index != -1) {
+      _downloads[index] = _downloads[index].copyWith(
+        status: DownloadStatus.pending,
+      );
+      _processDownloadQueue();
+    }
+  }
+
+  /// Cancel download
+  void cancelDownload(String id) {
+    final index = _downloads.indexWhere((t) => t.id == id);
+    if (index != -1) {
+      _downloads.removeAt(index);
+      _activeDownloads.remove(id);
+    }
+  }
+
+  /// Get all downloads
+  List<DownloadTask> getAllDownloads() => List.from(_downloads);
+
+  /// Get download progress
+  double getDownloadProgress(String id) {
+    final task = _downloads.firstWhere(
+      (t) => t.id == id,
+      orElse: () => DownloadTask(
+        id: id,
+        title: '',
+        url: '',
+        filePath: '',
+      ),
+    );
+    return task.progress;
+  }
+
+  /// Get available storage
+  Future<int> getAvailableStorage() async {
+    final dir = Directory(_downloadDir);
+    if (!dir.existsSync()) return _maxStorageGb * 1024 * 1024 * 1024;
+
+    int totalSize = 0;
+    final files = dir.listSync(recursive: true);
+    for (final file in files) {
+      if (file is File) {
+        totalSize += file.lengthSync();
+      }
+    }
+
+    return (_maxStorageGb * 1024 * 1024 * 1024) - totalSize;
+  }
+
+  /// Clean up old downloads based on space
+  Future<void> cleanupOldDownloads() async {
+    final available = await getAvailableStorage();
+    if (available < 1024 * 1024 * 1024) {
+      // Less than 1GB free
+      final dir = Directory(_downloadDir);
+      final files = dir.listSync().whereType<File>().toList();
+
+      // Sort by modification time, delete oldest first
+      files.sort(
+        (a, b) => a.statSync().modified.compareTo(b.statSync().modified),
+      );
+
+      for (final file in files.take(files.length ~/ 3)) {
+        try {
+          file.deleteSync();
+        } catch (e) {
+          print('Error deleting file: $e');
+        }
+      }
+    }
+  }
+
+  /// Process download queue
+  Future<void> _processDownloadQueue() async {
+    while (_activeDownloads.length < _maxConcurrentDownloads) {
+      final pendingIndex =
+          _downloads.indexWhere((t) => t.status == DownloadStatus.pending);
+      if (pendingIndex == -1) break;
+
+      final task = _downloads[pendingIndex];
+      _activeDownloads.add(task.id);
+
+      _downloads[pendingIndex] =
+          task.copyWith(status: DownloadStatus.downloading);
+
+      try {
+        await _downloadFile(task);
+      } catch (e) {
+        print('Download error: $e');
+        final index = _downloads.indexWhere((t) => t.id == task.id);
+        if (index != -1) {
+          _downloads[index] =
+              _downloads[index].copyWith(status: DownloadStatus.failed);
+        }
+      } finally {
+        _activeDownloads.remove(task.id);
+      }
+    }
+  }
+
+  /// Download file with progress tracking
+  Future<void> _downloadFile(DownloadTask task) async {
+    // Simplified version - in production use dio or http with progress tracking
+    final file = File(task.filePath);
+    if (!file.existsSync()) {
+      file.createSync(recursive: true);
+    }
+
+    // Stream download and update progress
+    // This is a placeholder - implement with actual download logic
+    for (int i = 0; i <= 100; i++) {
+      final index = _downloads.indexWhere((t) => t.id == task.id);
+      if (index != -1) {
+        _downloads[index] = _downloads[index].copyWith(
+          progress: i.toDouble(),
+        );
+      }
+
+      // Check if paused or cancelled
+      final currentTask =
+          _downloads.firstWhere((t) => t.id == task.id, orElse: () => task);
+      if (currentTask.status == DownloadStatus.paused ||
+          !_activeDownloads.contains(task.id)) {
+        break;
+      }
+
+      await Future.delayed(const Duration(milliseconds: 100));
+    }
+
+    // Mark as completed
+    final index = _downloads.indexWhere((t) => t.id == task.id);
+    if (index != -1) {
+      _downloads[index] = _downloads[index].copyWith(
+        status: DownloadStatus.completed,
+        progress: 100.0,
+      );
+    }
+  }
+
+  /// Check if file is available for offline playback
+  bool isAvailableOffline(String id) {
+    final task = _downloads.firstWhere(
+      (t) => t.id == id,
+      orElse: () => DownloadTask(
+        id: id,
+        title: '',
+        url: '',
+        filePath: '',
+      ),
+    );
+    if (task.status == DownloadStatus.completed) {
+      return File(task.filePath).existsSync();
+    }
+    return false;
+  }
+
+  /// Get file path for offline content
+  String? getOfflineFilePath(String id) {
+    final task = _downloads.firstWhere(
+      (t) => t.id == id && t.status == DownloadStatus.completed,
+      orElse: () => DownloadTask(
+        id: id,
+        title: '',
+        url: '',
+        filePath: '',
+      ),
+    );
+
+    if (File(task.filePath).existsSync()) {
+      return task.filePath;
+    }
+    return null;
+  }
+}
+
+// Riverpod providers
+
+final downloadServiceProvider = Provider<DownloadService>((ref) {
+  return DownloadService();
+});
+
+final downloadsProvider =
+    StateNotifierProvider<DownloadsNotifier, List<DownloadTask>>((ref) {
+  return DownloadsNotifier();
+});
+
+class DownloadsNotifier extends StateNotifier<List<DownloadTask>> {
+  DownloadsNotifier() : super([]);
+
+  void addDownload(DownloadTask task) {
+    state = [...state, task];
+  }
+
+  void updateDownload(DownloadTask task) {
+    state = [
+      for (final d in state)
+        if (d.id == task.id) task else d,
+    ];
+  }
+
+  void removeDownload(String id) {
+    state = state.where((d) => d.id != id).toList();
+  }
+
+  void clearCompleted() {
+    state = state.where((d) => d.status != DownloadStatus.completed).toList();
+  }
+}

lib/features/iptv/services/subtitle_service.dart

@@ -0,0 +1,182 @@
+import 'package:http/http.dart' as http;
+
+/// Subtitle track information
+class SubtitleTrack {
+  final String id;
+  final String name;
+  final String language;
+  final String url;
+  final bool isEnabled;
+
+  SubtitleTrack({
+    required this.id,
+    required this.name,
+    required this.language,
+    required this.url,
+    this.isEnabled = false,
+  });
+
+  SubtitleTrack copyWith({bool? isEnabled}) => SubtitleTrack(
+        id: id,
+        name: name,
+        language: language,
+        url: url,
+        isEnabled: isEnabled ?? this.isEnabled,
+      );
+}
+
+/// Subtitle content with timing
+class SubtitleEntry {
+  final int index;
+  final Duration startTime;
+  final Duration endTime;
+  final String text;
+
+  SubtitleEntry({
+    required this.index,
+    required this.startTime,
+    required this.endTime,
+    required this.text,
+  });
+}
+
+/// Service for handling subtitles
+class SubtitleService {
+  static const _srtPattern =
+      r'(\d+)\n(\d{2}):(\d{2}):(\d{2}),(\d{3}) --> (\d{2}):(\d{2}):(\d{2}),(\d{3})\n([\s\S]*?)(?=\n\n|\Z)';
+
+  /// Parse SRT subtitle content
+  static List<SubtitleEntry> parseSrt(String content) {
+    final entries = <SubtitleEntry>[];
+    final blocks = content.split('\n\n');
+
+    for (final block in blocks) {
+      if (block.trim().isEmpty) continue;
+
+      final lines = block.trim().split('\n');
+      if (lines.length < 3) continue;
+
+      try {
+        final index = int.parse(lines[0]);
+        final timeLine = lines[1];
+        final text = lines.sublist(2).join('\n').trim();
+
+        // Parse timing: 00:00:01,000 --> 00:00:05,000
+        final times = timeLine.split('-->');
+        if (times.length != 2) continue;
+
+        final startTime = _parseTime(times[0].trim());
+        final endTime = _parseTime(times[1].trim());
+
+        entries.add(
+          SubtitleEntry(
+            index: index,
+            startTime: startTime,
+            endTime: endTime,
+            text: text,
+          ),
+        );
+      } catch (e) {
+        continue;
+      }
+    }
+
+    return entries;
+  }
+
+  /// Parse WebVTT subtitle content
+  static List<SubtitleEntry> parseWebVtt(String content) {
+    final entries = <SubtitleEntry>[];
+    final blocks = content.split('\n\n');
+
+    for (final block in blocks) {
+      if (block.trim().isEmpty || block.startsWith('WEBVTT')) continue;
+
+      final lines = block.trim().split('\n');
+      if (lines.length < 2) continue;
+
+      try {
+        final timeLine = lines[0];
+        final text = lines.sublist(1).join('\n').trim();
+
+        // Parse timing: 00:00:01.000 --> 00:00:05.000
+        final times = timeLine.split('-->');
+        if (times.length != 2) continue;
+
+        final startTime = _parseWebVttTime(times[0].trim());
+        final endTime = _parseWebVttTime(times[1].trim());
+
+        entries.add(
+          SubtitleEntry(
+            index: entries.length,
+            startTime: startTime,
+            endTime: endTime,
+            text: text,
+          ),
+        );
+      } catch (e) {
+        continue;
+      }
+    }
+
+    return entries;
+  }
+
+  /// Get subtitle at specific time
+  static String? getSubtitleAtTime(List<SubtitleEntry> entries, Duration time) {
+    for (final entry in entries) {
+      if (time.compareTo(entry.startTime) >= 0 &&
+          time.compareTo(entry.endTime) <= 0) {
+        return entry.text;
+      }
+    }
+    return null;
+  }
+
+  /// Download subtitle from URL
+  static Future<String> downloadSubtitle(String url) async {
+    try {
+      final response = await http.get(Uri.parse(url));
+      if (response.statusCode == 200) {
+        return response.body;
+      }
+      throw Exception('Failed to download subtitle: ${response.statusCode}');
+    } catch (e) {
+      throw Exception('Error downloading subtitle: $e');
+    }
+  }
+
+  /// Parse time format HH:MM:SS,mmm (SRT)
+  static Duration _parseTime(String time) {
+    final parts = time.split(':');
+    final hours = int.parse(parts[0]);
+    final minutes = int.parse(parts[1]);
+    final secondsParts = parts[2].split(',');
+    final seconds = int.parse(secondsParts[0]);
+    final milliseconds = int.parse(secondsParts[1]);
+
+    return Duration(
+      hours: hours,
+      minutes: minutes,
+      seconds: seconds,
+      milliseconds: milliseconds,
+    );
+  }
+
+  /// Parse time format HH:MM:SS.mmm (WebVTT)
+  static Duration _parseWebVttTime(String time) {
+    final parts = time.split(':');
+    final hours = int.parse(parts[0]);
+    final minutes = int.parse(parts[1]);
+    final secondsParts = parts[2].split('.');
+    final seconds = int.parse(secondsParts[0]);
+    final milliseconds = int.parse(secondsParts[1].padEnd(3, '0'));
+
+    return Duration(
+      hours: hours,
+      minutes: minutes,
+      seconds: seconds,
+      milliseconds: milliseconds,
+    );
+  }
+}

lib/features/iptv/services/xtream_service.dart

@@ -2,7 +2,6 @@ import 'dart:convert';
 import 'dart:html' as html;
 import 'package:dio/dio.dart';
 import 'package:dio_cache_interceptor/dio_cache_interceptor.dart';
-import 'package:dio_cache_interceptor_hive_store/dio_cache_interceptor_hive_store.dart';
 import 'package:flutter/foundation.dart';
 import '../../../core/models/playlist_config.dart';
 import '../../../core/models/iptv_models.dart';
@@ -34,9 +33,9 @@ class XtreamService {
     );
 
     // Setup caching for API responses
-    // Use MemCacheStore on Web to avoid path errors
+    // Use MemCacheStore for in-memory caching
     _cacheOptions = CacheOptions(
-      store: kIsWeb ? MemCacheStore() : HiveCacheStore('./cache'),
+      store: MemCacheStore(),
       policy: CachePolicy.forceCache, // Prioritize local cache
       maxStale: const Duration(hours: 1), // Increase to 1h for stability
       priority: CachePriority.high,
@@ -184,11 +183,15 @@ class XtreamService {
   /// Get all live TV channels grouped by category
   ///
   /// Returns a Map where key is category name and value is list of channels
-  Future<Map<String, List<Channel>>> getLiveChannels({bool refresh = false}) async {
+  Future<Map<String, List<Channel>>> getLiveChannels({
+    bool refresh = false,
+  }) async {
     if (_currentPlaylist == null) throw Exception('No playlist configured');
 
-    final options = refresh 
-        ? _cacheOptions.copyWith(policy: CachePolicy.refreshForceCache).toExtra()
+    final options = refresh
+        ? _cacheOptions
+            .copyWith(policy: CachePolicy.refreshForceCache)
+            .toExtra()
         : _cacheOptions.toExtra();
 
     try {
@@ -227,7 +230,8 @@ class XtreamService {
       return groupedChannels;
     } catch (e) {
       // Try to return from local cache if network fails
-      final cached = _loadFromLocalCache<Channel>('live_channels', Channel.fromJson);
+      final cached =
+          _loadFromLocalCache<Channel>('live_channels', Channel.fromJson);
       if (cached.isNotEmpty) return cached;
       throw Exception('Failed to fetch live channels: $e');
     }
@@ -237,27 +241,30 @@ class XtreamService {
     if (!kIsWeb) return;
     try {
       final jsonStr = jsonEncode(data);
-      html.window.localStorage['xtream_cache_${_currentPlaylist?.id}_$key'] = jsonStr;
+      html.window.localStorage['xtream_cache_${_currentPlaylist?.id}_$key'] =
+          jsonStr;
     } catch (e) {
       debugPrint('Error saving to local cache ($key): $e');
     }
   }
 
   Map<String, List<T>> _loadFromLocalCache<T>(
-      String key, T Function(Map<String, dynamic>) fromJson) {
+    String key,
+    T Function(Map<String, dynamic>) fromJson,
+  ) {
     if (!kIsWeb) return {};
     try {
-      final jsonStr = html.window.localStorage['xtream_cache_${_currentPlaylist?.id}_$key'];
+      final jsonStr =
+          html.window.localStorage['xtream_cache_${_currentPlaylist?.id}_$key'];
       if (jsonStr == null) return {};
-      
+
       final data = jsonDecode(jsonStr) as Map<String, dynamic>;
       final result = <String, List<T>>{};
-      
+
       data.forEach((cat, items) {
         if (items is List) {
-          result[cat] = items
-              .map((i) => fromJson(i as Map<String, dynamic>))
-              .toList();
+          result[cat] =
+              items.map((i) => fromJson(i as Map<String, dynamic>)).toList();
         }
       });
       return result;
@@ -302,8 +309,10 @@ class XtreamService {
   Future<Map<String, List<VodItem>>> getVodItems({bool refresh = false}) async {
     if (_currentPlaylist == null) throw Exception('No playlist configured');
 
-    final options = refresh 
-        ? _cacheOptions.copyWith(policy: CachePolicy.refreshForceCache).toExtra()
+    final options = refresh
+        ? _cacheOptions
+            .copyWith(policy: CachePolicy.refreshForceCache)
+            .toExtra()
         : _cacheOptions.toExtra();
 
     try {
@@ -343,7 +352,8 @@ class XtreamService {
       return groupedVods;
     } catch (e) {
       // Try to return from local cache if network fails
-      final cached = _loadFromLocalCache<VodItem>('vod_items', VodItem.fromJson);
+      final cached =
+          _loadFromLocalCache<VodItem>('vod_items', VodItem.fromJson);
       if (cached.isNotEmpty) return cached;
       throw Exception('Failed to fetch VOD items: $e');
     }
@@ -384,8 +394,10 @@ class XtreamService {
   Future<Map<String, List<Series>>> getSeries({bool refresh = false}) async {
     if (_currentPlaylist == null) throw Exception('No playlist configured');
 
-    final options = refresh 
-        ? _cacheOptions.copyWith(policy: CachePolicy.refreshForceCache).toExtra()
+    final options = refresh
+        ? _cacheOptions
+            .copyWith(policy: CachePolicy.refreshForceCache)
+            .toExtra()
         : _cacheOptions.toExtra();
 
     try {
@@ -425,15 +437,18 @@ class XtreamService {
       return groupedSeries;
     } catch (e) {
       // Try to return from local cache if network fails
-      final cached = _loadFromLocalCache<Series>('series_items', Series.fromJson);
+      final cached =
+          _loadFromLocalCache<Series>('series_items', Series.fromJson);
       if (cached.isNotEmpty) return cached;
       throw Exception('Failed to fetch series: $e');
     }
   }
 
   /// Get movies with pagination support
-  Future<List<xm.Movie>> getMoviesPaginated(
-      {int offset = 0, int limit = 100}) async {
+  Future<List<xm.Movie>> getMoviesPaginated({
+    int offset = 0,
+    int limit = 100,
+  }) async {
     if (_currentPlaylist == null) throw Exception('No playlist configured');
 
     try {
@@ -512,8 +527,10 @@ class XtreamService {
   }
 
   /// Get series with pagination support (returns flat list)
-  Future<List<xm.Series>> getSeriesPaginated(
-      {int offset = 0, int limit = 100}) async {
+  Future<List<xm.Series>> getSeriesPaginated({
+    int offset = 0,
+    int limit = 100,
+  }) async {
     if (_currentPlaylist == null) throw Exception('No playlist configured');
 
     try {

lib/features/iptv/widgets/channel_card.dart

@@ -1,62 +1,67 @@
 import 'package:flutter/material.dart';
-import 'package:cached_network_image/cached_network_image.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-import '../../../core/theme/app_colors.dart';
-import '../../../core/theme/app_theme.dart';
-import '../providers/favorites_provider.dart';
-import '../../../core/models/playlist_config.dart';
-import '../../iptv/providers/xtream_provider.dart';
+import 'package:google_fonts/google_fonts.dart';
+import '../theme/app_colors.dart';
+import '../theme/app_theme.dart';
 
-class ChannelCard extends ConsumerStatefulWidget {
-  final String streamId;
-  final String name;
-  final String? iconUrl;
+class ChannelCard extends StatefulWidget {
+  final String channelNumber;
+  final String channelName;
+  final String? channelLogo;
   final String? currentProgram;
-  final bool isLive;
+  final String? programTime;
+  final bool isFavorite;
   final VoidCallback? onTap;
-  final double? width;
-  final double? height;
-  final PlaylistConfig playlist;
+  final VoidCallback? onFavoriteTap;
+  final bool isActive;
 
   const ChannelCard({
     super.key,
-    required this.streamId,
-    required this.name,
-    required this.playlist,
-    this.iconUrl,
+    required this.channelNumber,
+    required this.channelName,
+    this.channelLogo,
     this.currentProgram,
-    this.isLive = true,
+    this.programTime,
+    this.isFavorite = false,
     this.onTap,
-    this.width,
-    this.height,
+    this.onFavoriteTap,
+    this.isActive = false,
   });
 
   @override
-  ConsumerState<ChannelCard> createState() => _ChannelCardState();
+  State<ChannelCard> createState() => _ChannelCardState();
 }
 
-class _ChannelCardState extends ConsumerState<ChannelCard>
+class _ChannelCardState extends State<ChannelCard>
     with SingleTickerProviderStateMixin {
-  bool _isHovered = false;
   late AnimationController _pulseController;
-  
-  // EPG State
-  String? _epgNow;
-  bool _epgLoaded = false;
-
+  late Animation<double> _pulseAnimation;
+  bool _isHovered = false;
 
   @override
   void initState() {
     super.initState();
     _pulseController = AnimationController(
-       vsync: this, 
-       duration: const Duration(milliseconds: 1000),
+      vsync: this,
+      duration: AppTheme.durationMd,
     )..repeat(reverse: true);
-    
-    // Fetch EPG immediately when card is built
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      _fetchEpg();
-    });
+
+    _pulseAnimation = Tween<double>(begin: 1.0, end: 1.05).animate(
+      CurvedAnimation(parent: _pulseController, curve: AppTheme.curveSmooth),
+    );
+
+    if (widget.isActive) {
+      _pulseController.forward();
+    }
+  }
+
+  @override
+  void didUpdateWidget(ChannelCard oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.isActive && !oldWidget.isActive) {
+      _pulseController.forward();
+    } else if (!widget.isActive && oldWidget.isActive) {
+      _pulseController.reverse();
+    }
   }
 
   @override
@@ -65,218 +70,158 @@ class _ChannelCardState extends ConsumerState<ChannelCard>
     super.dispose();
   }
 
-  Future<void> _fetchEpg() async {
-    if (_epgLoaded) return;
-    
-    try {
-      // Don't modify state if unmounted
-      if (!mounted) return;
-
-      final service = ref.read(xtreamServiceProvider(widget.playlist));
-      // We use the short EPG endpoint for quick access
-      final entries = await service.getShortEpg(widget.streamId);
-      
-      if (mounted && entries.isNotEmpty) {
-        final now = DateTime.now();
-        // Find current program
-        final current = entries.firstWhere(
-          (e) {
-             try {
-               final start = DateTime.parse(e.start);
-               final end = DateTime.parse(e.end);
-               return now.isAfter(start) && now.isBefore(end);
-             } catch (_) {
-               return false; 
-             }
-          },
-          orElse: () => entries.first,
-        );
-        
-        setState(() {
-          _epgNow = current.title;
-          _epgLoaded = true;
-        });
-      }
-    } catch (_) {
-      // Fail silently
-      if (mounted) setState(() => _epgLoaded = true);
-    }
-  }
-
   @override
   Widget build(BuildContext context) {
-    final favorites = ref.watch(favoritesProvider);
-    final isFavorite = favorites.contains(widget.streamId);
-
-    // Dynamic sizing based on hover
     return MouseRegion(
-      onEnter: (_) {
-        setState(() => _isHovered = true);
-      },
-      onExit: (_) => setState(() => _isHovered = false),
       cursor: SystemMouseCursors.click,
+      onEnter: (_) => setState(() => _isHovered = true),
+      onExit: (_) => setState(() => _isHovered = false),
       child: GestureDetector(
         onTap: widget.onTap,
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            // The Image Card (Scales)
-            AnimatedScale(
-              scale: _isHovered ? 1.05 : 1.0,
-              duration: AppTheme.durationFast,
-              curve: AppTheme.curveDefault,
-              child: AnimatedContainer(
-                duration: AppTheme.durationFast,
-                width: widget.width ?? 180,
-                height: widget.height ?? 110,
-                decoration: BoxDecoration(
-                  borderRadius: BorderRadius.circular(AppTheme.radiusMd),
-                  color: AppColors.surface, // Fallback color
-                  // Thick white border on focus (tvOS style)
-                  border: Border.all(
-                    color: _isHovered ? AppColors.primaryContainer : Colors.transparent,
-                    width: _isHovered ? 3 : 0,
+        child: ScaleTransition(
+          scale: widget.isActive
+              ? _pulseAnimation
+              : const AlwaysStoppedAnimation(1.0),
+          child: AnimatedContainer(
+            duration: AppTheme.durationMd,
+            curve: AppTheme.curveDefault,
+            decoration: BoxDecoration(
+              color: widget.isActive
+                  ? AppColors.primary.withOpacity(0.15)
+                  : AppColors.surface,
+              border: Border.all(
+                color: widget.isActive
+                    ? AppColors.primary
+                    : (_isHovered
+                        ? AppColors.border
+                        : AppColors.border.withOpacity(0.5)),
+                width: widget.isActive ? 2.5 : 1.5,
+              ),
+              borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+              boxShadow: [
+                if (_isHovered || widget.isActive)
+                  BoxShadow(
+                    color: widget.isActive
+                        ? AppColors.primary.withOpacity(0.25)
+                        : AppColors.primary.withOpacity(0.1),
+                    blurRadius: 12,
+                    offset: const Offset(0, 4),
+                    spreadRadius: 1,
                   ),
-                  // Deep shadow on focus
-                  boxShadow: _isHovered
-                      ? [
-                          BoxShadow(
-                            color: AppColors.background.withOpacity(0.5),
-                            blurRadius: 30,
-                            offset: const Offset(0, 15),
-                            spreadRadius: 2,
-                          ),
-                        ]
-                      : [
-                           BoxShadow(
-                            color: AppColors.background.withOpacity(0.2),
-                            blurRadius: 4,
-                            offset: const Offset(0, 2),
-                          ),
-                      ],
-                ),
-                child: ClipRRect(
-                  borderRadius: BorderRadius.circular(AppTheme.radiusMd - (_isHovered ? 2 : 0)), // Adjust inner radius
-                  child: Stack(
-                    fit: StackFit.expand,
+              ],
+            ),
+            child: Stack(
+              fit: StackFit.expand,
+              children: [
+                Padding(
+                  padding: EdgeInsets.all(AppTheme.spacingMd),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
-                      // 1. Background Image / Logo - EDGE TO EDGE
-                      _buildChannelImage(),
-                      
-                      // 2. Gradient Overlay (Subtle)
-                      if (_isHovered)
-                        Positioned.fill(
-                          child: Container(
-                            decoration: BoxDecoration(
-                              gradient: LinearGradient(
-                                colors: [Colors.transparent, AppColors.background.withOpacity(0.4)],
-                                begin: Alignment.topCenter,
-                                end: Alignment.bottomCenter,
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          Expanded(
+                            child: Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                Text(
+                                  widget.channelNumber,
+                                  style: GoogleFonts.inter(
+                                    fontSize: 12,
+                                    fontWeight: FontWeight.w600,
+                                    color: AppColors.textSecondary,
+                                    letterSpacing: 0.5,
+                                  ),
+                                ),
+                                SizedBox(height: AppTheme.spacingXs),
+                                Text(
+                                  widget.channelName,
+                                  maxLines: 1,
+                                  overflow: TextOverflow.ellipsis,
+                                  style: GoogleFonts.outfit(
+                                    fontSize: 16,
+                                    fontWeight: FontWeight.w700,
+                                    color: AppColors.textPrimary,
+                                  ),
+                                ),
+                              ],
+                            ),
+                          ),
+                          GestureDetector(
+                            onTap: widget.onFavoriteTap,
+                            child: AnimatedScale(
+                              scale: widget.isFavorite ? 1.1 : 1.0,
+                              duration: AppTheme.durationXs,
+                              child: Icon(
+                                widget.isFavorite
+                                    ? Icons.favorite
+                                    : Icons.favorite_border,
+                                color: widget.isFavorite
+                                    ? AppColors.secondary
+                                    : AppColors.textSecondary,
+                                size: 20,
                               ),
                             ),
                           ),
-                        ),
-
-                      // 3. Live Badge (Top Right)
-                      if (widget.isLive)
-                        Positioned(
-                          top: 8,
-                          right: 8,
-                          child: Container(
-                            padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
-                            decoration: BoxDecoration(
-                              color: AppColors.live,
-                              borderRadius: BorderRadius.circular(4),
+                        ],
+                      ),
+                      SizedBox(height: AppTheme.spacingSm),
+                      if (widget.currentProgram != null)
+                        Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text(
+                              widget.currentProgram!,
+                              maxLines: 1,
+                              overflow: TextOverflow.ellipsis,
+                              style: GoogleFonts.inter(
+                                fontSize: 13,
+                                fontWeight: FontWeight.w500,
+                                color: AppColors.textSecondary,
+                              ),
                             ),
-                            child: const Text('LIVE', style: TextStyle(color: AppColors.onSurface, fontSize: 9, fontWeight: FontWeight.bold)),
-                          ),
-                        ),
-
-                      // 4. Favorite Icon (Top Left)
-                      if (_isHovered || isFavorite)
-                        Positioned(
-                          top: 5,
-                          left: 5,
-                          child: GestureDetector(
-                            onTap: () => ref.read(favoritesProvider.notifier).toggleFavorite(widget.streamId),
-                            child: Icon(
-                              isFavorite ? Icons.favorite : Icons.favorite_border,
-                              color: isFavorite ? AppColors.live : AppColors.onSurface.withOpacity(0.7), 
-                              size: 20,
-                            ),
-                          ),
+                            if (widget.programTime != null) ...[
+                              SizedBox(height: AppTheme.spacingXs),
+                              Text(
+                                widget.programTime!,
+                                style: GoogleFonts.inter(
+                                  fontSize: 11,
+                                  fontWeight: FontWeight.w400,
+                                  color: AppColors.textTertiary,
+                                ),
+                              ),
+                            ],
+                          ],
                         ),
                     ],
                   ),
                 ),
-              ),
-            ),
-            
-            const SizedBox(height: 8),
-            
-            // Text separates from card (Classic tvOS look)
-            SizedBox(
-              width: widget.width ?? 180,
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                crossAxisAlignment: CrossAxisAlignment.center,
-                children: [
-                  Text(
-                    widget.name,
-                    textAlign: TextAlign.center,
-                    maxLines: 1,
-                    overflow: TextOverflow.ellipsis,
-                    style: TextStyle(
-                      color: _isHovered ? AppColors.primaryContainer : AppColors.onSurfaceVariant,
-                      fontWeight: _isHovered ? FontWeight.bold : FontWeight.w500,
-                      fontSize: 13,
-                    ),
-                  ),
-                  if ((widget.currentProgram != null || _epgNow != null)) ...[
-                    const SizedBox(height: 2),
-                    Text(
-                      _epgNow ?? widget.currentProgram ?? '',
-                      textAlign: TextAlign.center,
-                      maxLines: 1,
-                      overflow: TextOverflow.ellipsis,
-                      style: const TextStyle(
-                        color: AppColors.textTertiary,
-                        fontSize: 11,
+                if (widget.isActive)
+                  Positioned(
+                    top: AppTheme.spacingSm,
+                    right: AppTheme.spacingSm,
+                    child: Container(
+                      width: 8,
+                      height: 8,
+                      decoration: BoxDecoration(
+                        color: AppColors.primary,
+                        shape: BoxShape.circle,
+                        boxShadow: [
+                          BoxShadow(
+                            color: AppColors.primary.withOpacity(0.6),
+                            blurRadius: 8,
+                            spreadRadius: 2,
+                          ),
+                        ],
                       ),
                     ),
-                  ],
-                ],
-              ),
+                  ),
+              ],
             ),
-          ],
+          ),
         ),
       ),
     );
   }
-
-  Widget _buildChannelImage() {
-    if (widget.iconUrl != null && widget.iconUrl!.isNotEmpty) {
-      return Container(
-        color: Colors.white, // Logos usually look best on white/light grey
-        child: CachedNetworkImage(
-          imageUrl: widget.iconUrl!,
-          fit: BoxFit.contain,
-          width: double.infinity,
-          height: double.infinity,
-          placeholder: (context, url) => _buildPlaceholder(),
-          errorWidget: (context, url, error) => _buildPlaceholder(),
-        ),
-      );
-    }
-    return _buildPlaceholder();
-  }
-
-  Widget _buildPlaceholder() {
-    return Container(
-      color: AppColors.surface,
-      child: const Center(
-        child: Icon(Icons.tv, color: AppColors.textTertiary),
-      ),
-    );
-  }
 }

lib/features/iptv/widgets/continue_watching_widget.dart

@@ -0,0 +1,543 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import '../providers/recommendations_provider.dart';
+import '../../../core/models/playlist_config.dart';
+import '../models/playlist.dart';
+
+/// Widget showing "Continue Watching" section
+class ContinueWatchingWidget extends ConsumerStatefulWidget {
+  final Playlist playlist;
+  final List<Playlist> content;
+  final VoidCallback? onItemTap;
+
+  const ContinueWatchingWidget({
+    super.key,
+    required this.playlist,
+    required this.content,
+    this.onItemTap,
+  });
+
+  @override
+  ConsumerState<ContinueWatchingWidget> createState() =>
+      _ContinueWatchingWidgetState();
+}
+
+class _ContinueWatchingWidgetState
+    extends ConsumerState<ContinueWatchingWidget> {
+  @override
+  Widget build(BuildContext context) {
+    final watchHistory = ref.watch(watchHistoryProvider);
+    final continueWatching =
+        RecommendationService.getContinueWatching(watchHistory, widget.content);
+
+    if (continueWatching.isEmpty) {
+      return const SizedBox.shrink();
+    }
+
+    return Container(
+      margin: const EdgeInsets.symmetric(vertical: 12),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                const Text(
+                  'Continue Watching',
+                  style: TextStyle(
+                    fontSize: 18,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                TextButton(
+                  onPressed: () {
+                    // Navigate to full continue watching list
+                  },
+                  child: const Text('View All'),
+                ),
+              ],
+            ),
+          ),
+          SingleChildScrollView(
+            scrollDirection: Axis.horizontal,
+            child: Row(
+              children: [
+                const SizedBox(width: 16),
+                ...continueWatching.take(5).map((rec) {
+                  final item = rec.item;
+                  final percentage =
+                      watchHistory[item.streamId.toString()] is Map
+                          ? (watchHistory[item.streamId.toString()]
+                                  as Map)['percentage'] as double? ??
+                              0.0
+                          : 0.0;
+
+                  return Container(
+                    margin: const EdgeInsets.only(right: 12),
+                    child: _ContinueWatchingCard(
+                      item: item,
+                      progress: percentage,
+                      onTap: widget.onItemTap,
+                    ),
+                  );
+                }),
+                const SizedBox(width: 8),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _ContinueWatchingCard extends StatelessWidget {
+  final Playlist item;
+  final double progress;
+  final VoidCallback? onTap;
+
+  const _ContinueWatchingCard({
+    required this.item,
+    required this.progress,
+    this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          // Poster with progress bar
+          Container(
+            width: 160,
+            height: 240,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(8),
+              color: Colors.grey[800],
+            ),
+            child: Stack(
+              fit: StackFit.expand,
+              children: [
+                // Poster image
+                ClipRRect(
+                  borderRadius: BorderRadius.circular(8),
+                  child: CachedNetworkImage(
+                    imageUrl: item.cover ?? '',
+                    fit: BoxFit.cover,
+                    placeholder: (context, url) => Container(
+                      color: Colors.grey[800],
+                    ),
+                    errorWidget: (context, url, error) => Icon(
+                      Icons.image_not_supported,
+                      color: Colors.grey[600],
+                    ),
+                  ),
+                ),
+
+                // Dark overlay at bottom
+                Positioned(
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  child: Container(
+                    decoration: BoxDecoration(
+                      gradient: LinearGradient(
+                        begin: Alignment.topCenter,
+                        end: Alignment.bottomCenter,
+                        colors: [
+                          Colors.transparent,
+                          Colors.black.withOpacity(0.8),
+                        ],
+                      ),
+                    ),
+                    padding: const EdgeInsets.all(8),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        // Progress bar
+                        ClipRRect(
+                          borderRadius: BorderRadius.circular(2),
+                          child: LinearProgressIndicator(
+                            value: progress / 100.0,
+                            minHeight: 3,
+                            backgroundColor: Colors.white30,
+                            valueColor: AlwaysStoppedAnimation<Color>(
+                              _getProgressColor(progress),
+                            ),
+                          ),
+                        ),
+                        const SizedBox(height: 4),
+                        Text(
+                          '${progress.toStringAsFixed(0)}% watched',
+                          style: const TextStyle(
+                            color: Colors.white,
+                            fontSize: 11,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+
+                // Play button overlay on hover
+                Positioned(
+                  top: 0,
+                  right: 0,
+                  child: Container(
+                    decoration: BoxDecoration(
+                      color: Colors.blue.withOpacity(0.7),
+                      shape: BoxShape.circle,
+                    ),
+                    padding: const EdgeInsets.all(8),
+                    margin: const EdgeInsets.all(8),
+                    child: const Icon(
+                      Icons.play_arrow,
+                      color: Colors.white,
+                      size: 24,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+          const SizedBox(height: 8),
+
+          // Title
+          SizedBox(
+            width: 160,
+            child: Text(
+              item.name ?? 'Unknown',
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+              style: const TextStyle(
+                fontSize: 12,
+                fontWeight: FontWeight.w500,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Color _getProgressColor(double progress) {
+    if (progress < 30) return Colors.red;
+    if (progress < 70) return Colors.orange;
+    return Colors.green;
+  }
+}
+
+/// Widget showing trending/popular content
+class TrendingWidget extends ConsumerWidget {
+  final Playlist playlist;
+  final List<Playlist> content;
+  final VoidCallback? onItemTap;
+
+  const TrendingWidget({
+    super.key,
+    required this.playlist,
+    required this.content,
+    this.onItemTap,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final trending = ref.watch(trendingProvider);
+    final trendingContent =
+        RecommendationService.getTrending(trending, content);
+
+    if (trendingContent.isEmpty) {
+      return const SizedBox.shrink();
+    }
+
+    return Container(
+      margin: const EdgeInsets.symmetric(vertical: 12),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                const Row(
+                  children: [
+                    Icon(
+                      Icons.local_fire_department,
+                      color: Colors.red,
+                      size: 24,
+                    ),
+                    SizedBox(width: 8),
+                    Text(
+                      'Trending Now',
+                      style: TextStyle(
+                        fontSize: 18,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ],
+                ),
+                TextButton(
+                  onPressed: () {},
+                  child: const Text('View All'),
+                ),
+              ],
+            ),
+          ),
+          SingleChildScrollView(
+            scrollDirection: Axis.horizontal,
+            child: Row(
+              children: [
+                const SizedBox(width: 16),
+                ...trendingContent.take(5).map((rec) {
+                  final item = rec.item;
+                  final rank = trendingContent.indexOf(rec) + 1;
+
+                  return Container(
+                    margin: const EdgeInsets.only(right: 12),
+                    child: _TrendingCard(
+                      item: item,
+                      rank: rank,
+                      onTap: onItemTap,
+                    ),
+                  );
+                }),
+                const SizedBox(width: 8),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _TrendingCard extends StatelessWidget {
+  final Playlist item;
+  final int rank;
+  final VoidCallback? onTap;
+
+  const _TrendingCard({
+    required this.item,
+    required this.rank,
+    this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Stack(
+        children: [
+          // Card
+          Container(
+            width: 180,
+            height: 260,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(12),
+              color: Colors.grey[800],
+            ),
+            child: Column(
+              children: [
+                // Image
+                Expanded(
+                  child: ClipRRect(
+                    borderRadius: const BorderRadius.only(
+                      topLeft: Radius.circular(12),
+                      topRight: Radius.circular(12),
+                    ),
+                    child: CachedNetworkImage(
+                      imageUrl: item.cover ?? '',
+                      fit: BoxFit.cover,
+                      placeholder: (context, url) => Container(
+                        color: Colors.grey[800],
+                      ),
+                      errorWidget: (context, url, error) => Icon(
+                        Icons.image_not_supported,
+                        color: Colors.grey[600],
+                      ),
+                    ),
+                  ),
+                ),
+
+                // Info
+                Padding(
+                  padding: const EdgeInsets.all(8),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        item.name ?? 'Unknown',
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: const TextStyle(
+                          fontSize: 13,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                      if (item.rating != null)
+                        Row(
+                          children: [
+                            const Icon(
+                              Icons.star,
+                              color: Colors.amber,
+                              size: 12,
+                            ),
+                            const SizedBox(width: 4),
+                            Text(
+                              item.rating ?? '0',
+                              style: const TextStyle(fontSize: 11),
+                            ),
+                          ],
+                        ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ),
+
+          // Rank badge
+          Positioned(
+            top: 8,
+            left: 8,
+            child: Container(
+              decoration: BoxDecoration(
+                color: _getRankColor(rank),
+                shape: BoxShape.circle,
+              ),
+              width: 40,
+              height: 40,
+              child: Center(
+                child: Text(
+                  '#$rank',
+                  style: const TextStyle(
+                    color: Colors.white,
+                    fontWeight: FontWeight.bold,
+                    fontSize: 14,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Color _getRankColor(int rank) {
+    switch (rank) {
+      case 1:
+        return Colors.amber.shade700;
+      case 2:
+        return Colors.grey.shade600;
+      case 3:
+        return Colors.orange.shade700;
+      default:
+        return Colors.blue.shade700;
+    }
+  }
+}
+
+/// Widget showing recently added content
+class RecentlyAddedWidget extends ConsumerWidget {
+  final Playlist playlist;
+  final List<Playlist> content;
+  final VoidCallback? onItemTap;
+
+  const RecentlyAddedWidget({
+    super.key,
+    required this.playlist,
+    required this.content,
+    this.onItemTap,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final recent = RecommendationService.getRecentlyAdded(content);
+
+    if (recent.isEmpty) {
+      return const SizedBox.shrink();
+    }
+
+    return Container(
+      margin: const EdgeInsets.symmetric(vertical: 12),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const Padding(
+            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+            child: Text(
+              'Recently Added',
+              style: TextStyle(
+                fontSize: 18,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          SingleChildScrollView(
+            scrollDirection: Axis.horizontal,
+            child: Row(
+              children: [
+                const SizedBox(width: 16),
+                ...recent.take(5).map((rec) {
+                  return Container(
+                    margin: const EdgeInsets.only(right: 12),
+                    child: _RecentCard(
+                      item: rec.item,
+                      onTap: onItemTap,
+                    ),
+                  );
+                }),
+                const SizedBox(width: 8),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _RecentCard extends StatelessWidget {
+  final Playlist item;
+  final VoidCallback? onTap;
+
+  const _RecentCard({
+    required this.item,
+    this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        width: 140,
+        height: 200,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(8),
+          color: Colors.grey[800],
+        ),
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(8),
+          child: CachedNetworkImage(
+            imageUrl: item.cover ?? '',
+            fit: BoxFit.cover,
+            placeholder: (context, url) => Container(
+              color: Colors.grey[800],
+            ),
+            errorWidget: (context, url, error) =>
+                Icon(Icons.image_not_supported, color: Colors.grey[600]),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/features/iptv/widgets/live_tv_tab.dart

@@ -64,10 +64,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
       body: channelsAsync.when(
         loading: () => const ThemedLoading(),
         error: (e, s) => Center(
-          child: Text(
-            'Error: $e',
-            style: GoogleFonts.inter(color: AppColors.onSurface),
-          ),
+          child: Text('Error: $e', style: const TextStyle(color: Colors.white)),
         ),
         data: (groupedChannels) {
           var categories = groupedChannels.keys.toList();
@@ -76,6 +73,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                 .where((cat) => settings.matchesLiveTvFilter(cat))
                 .toList();
           }
+          // REMOVED: categories.sort(); - Respect API/Settings order
 
           List<Channel> displayedChannels = [];
           bool showingCategoryGrid = false;
@@ -98,11 +96,12 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
 
           return Column(
             children: [
-              // HEADER (Glass Level 1)
+              // HEADER (Glass)
               Padding(
                 padding: const EdgeInsets.fromLTRB(24, 16, 24, 16),
-                child: GlassContainer.glass(
+                child: GlassContainer(
                   borderRadius: 16,
+                  opacity: 0.6,
                   padding:
                       const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
                   child: Row(
@@ -121,13 +120,12 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                           child: Container(
                             padding: const EdgeInsets.all(8),
                             decoration: BoxDecoration(
-                              color: AppColors.surfaceContainerHigh
-                                  .withOpacity(0.5),
+                              color: Colors.white.withOpacity(0.1),
                               shape: BoxShape.circle,
                             ),
-                            child: Icon(
+                            child: const Icon(
                               Icons.arrow_back,
-                              color: AppColors.onSurface,
+                              color: Colors.white,
                             ),
                           ),
                         ),
@@ -141,10 +139,10 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                               : _showFavoritesOnly
                                   ? 'Favorites'
                                   : _selectedCategory ?? 'Live TV',
-                          style: GoogleFonts.spaceGrotesk(
+                          style: GoogleFonts.inter(
                             fontSize: 24,
                             fontWeight: FontWeight.w700,
-                            color: AppColors.onSurface,
+                            color: Colors.white,
                           ),
                           maxLines: 1,
                           overflow: TextOverflow.ellipsis,
@@ -156,22 +154,17 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                         width: 250,
                         height: 44,
                         decoration: BoxDecoration(
-                          color: AppColors.surfaceContainerLow,
+                          color: Colors.white.withOpacity(0.1),
                           borderRadius: BorderRadius.circular(12),
-                          border: Border.all(
-                            color: AppColors.outlineVariant,
-                            width: 1,
-                          ),
                         ),
                         child: TextField(
                           controller: _searchController,
-                          style: GoogleFonts.inter(color: AppColors.onSurface),
+                          style: GoogleFonts.inter(color: Colors.white),
                           decoration: InputDecoration(
                             hintText: 'Search channels...',
-                            hintStyle:
-                                GoogleFonts.inter(color: AppColors.outline),
+                            hintStyle: GoogleFonts.inter(color: Colors.white54),
                             prefixIcon:
-                                Icon(Icons.search, color: AppColors.outline),
+                                const Icon(Icons.search, color: Colors.white54),
                             border: InputBorder.none,
                             contentPadding: const EdgeInsets.symmetric(
                               horizontal: 16,
@@ -179,9 +172,9 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                             ),
                             suffixIcon: _searchQuery.isNotEmpty
                                 ? IconButton(
-                                    icon: Icon(
+                                    icon: const Icon(
                                       Icons.clear,
-                                      color: AppColors.onSurface,
+                                      color: Colors.white,
                                     ),
                                     onPressed: _searchController.clear,
                                   )
@@ -206,8 +199,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                           decoration: BoxDecoration(
                             color: _showFavoritesOnly
                                 ? AppColors.live.withOpacity(0.2)
-                                : AppColors.surfaceContainerHigh
-                                    .withOpacity(0.5),
+                                : Colors.white.withOpacity(0.1),
                             borderRadius: BorderRadius.circular(12),
                             border: _showFavoritesOnly
                                 ? Border.all(color: AppColors.live)
@@ -219,7 +211,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                                 : Icons.favorite_border,
                             color: _showFavoritesOnly
                                 ? AppColors.live
-                                : AppColors.onSurfaceVariant,
+                                : Colors.white,
                           ),
                         ),
                       ),
@@ -240,19 +232,20 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                                 Icon(
                                   Icons.tv_off,
                                   size: 64,
-                                  color: AppColors.outline,
+                                  color: Colors.white.withOpacity(0.3),
                                 ),
                                 const SizedBox(height: 16),
                                 Text(
                                   'No channels found',
                                   style: GoogleFonts.inter(
-                                    color: AppColors.onSurfaceVariant,
+                                    color: Colors.white54,
                                     fontSize: 18,
                                   ),
                                 ),
                               ],
                             ),
                           )
+                        // Use raw grid for now, but wrapped in focusable cards
                         : _buildChannelGrid(displayedChannels),
               ),
             ],
@@ -295,20 +288,21 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
             });
           },
           borderRadius: 16,
-          child: GlassContainer.glass(
+          child: GlassContainer(
             borderRadius: 16,
-            padding: EdgeInsets.zero,
+            opacity: 0.2, // Darker glass
+            padding: const EdgeInsets.all(0),
             child: Stack(
               children: [
-                // Background Gradient
+                // Background Gradient - Apple TV Style
                 Container(
                   decoration: BoxDecoration(
                     gradient: LinearGradient(
                       begin: Alignment.topLeft,
                       end: Alignment.bottomRight,
                       colors: [
-                        AppColors.surfaceContainerLow.withOpacity(0.5),
-                        AppColors.primary.withOpacity(0.03),
+                        AppColors.primary.withOpacity(0.15),
+                        AppColors.primary.withOpacity(0.05),
                       ],
                     ),
                   ),
@@ -319,7 +313,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                     children: [
                       Icon(
                         Icons.folder_copy_outlined,
-                        color: AppColors.onSurfaceVariant,
+                        color: Colors.white.withOpacity(0.9),
                         size: 32,
                       ),
                       const SizedBox(height: 12),
@@ -331,7 +325,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                           style: GoogleFonts.inter(
                             fontSize: 16,
                             fontWeight: FontWeight.w600,
-                            color: AppColors.onSurface,
+                            color: Colors.white,
                           ),
                           maxLines: 2,
                           overflow: TextOverflow.ellipsis,
@@ -342,7 +336,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                         '$count Channels',
                         style: GoogleFonts.inter(
                           fontSize: 13,
-                          color: AppColors.outline,
+                          color: Colors.white54,
                         ),
                       ),
                     ],
@@ -371,7 +365,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
         crossAxisCount: columns,
         mainAxisSpacing: 16,
         crossAxisSpacing: 16,
-        childAspectRatio: 1.0,
+        childAspectRatio: 1.0, // Square-ish cards
       ),
       itemCount: channels.length,
       itemBuilder: (context, index) {
@@ -381,7 +375,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
           borderRadius: 12,
           child: Container(
             decoration: BoxDecoration(
-              color: AppColors.surfaceContainerLow,
+              color: AppColors.surfaceVariant,
               borderRadius: BorderRadius.circular(12),
             ),
             child: Stack(
@@ -394,10 +388,12 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                     Expanded(
                       child: Container(
                         decoration: BoxDecoration(
-                          color: AppColors.surfaceContainer
-                              .withOpacity(0.5),
+                          color: Colors.white.withOpacity(
+                            0.05,
+                          ), // Subtle transparent background
                           borderRadius: const BorderRadius.vertical(
-                              top: Radius.circular(12)),
+                            top: Radius.circular(12),
+                          ),
                         ),
                         padding: const EdgeInsets.all(16),
                         child: Center(
@@ -406,16 +402,16 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                                   _getProxiedIconUrl(channel.streamIcon)!,
                                   errorBuilder: (_, __, ___) => Icon(
                                     Icons.tv,
-                                    color: AppColors.outline,
+                                    color: Colors.white.withOpacity(0.3),
                                     size: 40,
                                   ),
                                 )
                               : Text(
                                   channel.name.characters.first.toUpperCase(),
-                                  style: GoogleFonts.spaceGrotesk(
+                                  style: GoogleFonts.outfit(
                                     fontSize: 40,
                                     fontWeight: FontWeight.bold,
-                                    color: AppColors.outlineVariant,
+                                    color: Colors.white24,
                                   ),
                                 ),
                         ),
@@ -424,19 +420,17 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                     // Footer
                     Container(
                       padding: const EdgeInsets.symmetric(
-                          horizontal: 12, vertical: 8),
-                      decoration: BoxDecoration(
-                        color: AppColors.surfaceContainerHigh.withOpacity(0.9),
-                        borderRadius: const BorderRadius.vertical(
-                            bottom: Radius.circular(12)),
+                        horizontal: 12,
+                        vertical: 8,
                       ),
+                      color: Colors.black54,
                       child: Column(
                         crossAxisAlignment: CrossAxisAlignment.start,
                         children: [
                           Text(
                             channel.name,
                             style: GoogleFonts.inter(
-                              color: AppColors.onSurface,
+                              color: Colors.white,
                               fontSize: 13,
                               fontWeight: FontWeight.w500,
                             ),
@@ -461,7 +455,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                                     return Text(
                                       'No Info',
                                       style: GoogleFonts.inter(
-                                        color: AppColors.outline,
+                                        color: Colors.white54,
                                         fontSize: 10,
                                       ),
                                     );
@@ -474,8 +468,9 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                                             EpgEntry.parseDateTime(entry.start);
                                         final end =
                                             EpgEntry.parseDateTime(entry.end);
-                                        if (start == null || end == null)
+                                        if (start == null || end == null) {
                                           return false;
+                                        }
                                         return now.isAfter(start) &&
                                             now.isBefore(end);
                                       } catch (e) {
@@ -488,7 +483,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                                   return Text(
                                     currentProgram.title,
                                     style: GoogleFonts.inter(
-                                      color: AppColors.ratingGold,
+                                      color: const Color(0xFFFFD700),
                                       fontSize: 10,
                                       fontWeight: FontWeight.w600,
                                     ),
@@ -499,14 +494,14 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                                 loading: () => Text(
                                   '...',
                                   style: GoogleFonts.inter(
-                                    color: AppColors.outlineVariant,
+                                    color: Colors.white24,
                                     fontSize: 10,
                                   ),
                                 ),
                                 error: (_, __) => Text(
                                   'Err',
                                   style: GoogleFonts.inter(
-                                    color: AppColors.error,
+                                    color: Colors.red,
                                     fontSize: 10,
                                   ),
                                 ),
@@ -518,7 +513,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                     ),
                   ],
                 ),
-                // Record Button Icon Overlay
+                // Record Button Icon Overlay (Positioned top right)
                 Positioned(
                   top: 8,
                   right: 8,
@@ -531,12 +526,12 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
                     child: Container(
                       padding: const EdgeInsets.all(6),
                       decoration: BoxDecoration(
-                        color: AppColors.background.withOpacity(0.5),
+                        color: Colors.black.withOpacity(0.5),
                         shape: BoxShape.circle,
                       ),
                       child: const Icon(
                         Icons.fiber_manual_record,
-                        color: AppColors.error,
+                        color: Colors.redAccent,
                         size: 16,
                       ),
                     ),

lib/features/iptv/widgets/quality_selector_widget.dart

@@ -0,0 +1,253 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../core/services/adaptive_bitrate_service.dart';
+
+/// Widget for displaying and selecting video quality during playback
+class QualitySelectorWidget extends ConsumerStatefulWidget {
+  final QualitySelector qualitySelector;
+  final VoidCallback onClose;
+
+  const QualitySelectorWidget({
+    super.key,
+    required this.qualitySelector,
+    required this.onClose,
+  });
+
+  @override
+  ConsumerState<QualitySelectorWidget> createState() =>
+      _QualitySelectorWidgetState();
+}
+
+class _QualitySelectorWidgetState extends ConsumerState<QualitySelectorWidget> {
+  late List<QualityLevel> _availableQualities;
+  late QualityLevel _selectedQuality;
+
+  @override
+  void initState() {
+    super.initState();
+    _availableQualities = QualityProfiles.getBalancedProfiles();
+    _selectedQuality = widget.qualitySelector.currentQuality;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final currentQuality = widget.qualitySelector.currentQuality;
+    final bandwidthMbps = widget.qualitySelector.getEstimatedBandwidthMbps();
+
+    return Dialog(
+      backgroundColor: Colors.black87,
+      insetPadding: const EdgeInsets.all(16),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          // Header
+          Container(
+            padding: const EdgeInsets.all(16),
+            decoration: const BoxDecoration(
+              border: Border(
+                bottom: BorderSide(color: Colors.white24),
+              ),
+            ),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                const Text(
+                  'Video Quality',
+                  style: TextStyle(
+                    color: Colors.white,
+                    fontSize: 18,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                IconButton(
+                  icon: const Icon(Icons.close, color: Colors.white),
+                  onPressed: widget.onClose,
+                ),
+              ],
+            ),
+          ),
+
+          // Network Info
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+            child: Container(
+              padding: const EdgeInsets.all(12),
+              decoration: BoxDecoration(
+                color: Colors.white10,
+                borderRadius: BorderRadius.circular(8),
+              ),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  const Text(
+                    'Current Bandwidth:',
+                    style: TextStyle(color: Colors.white70, fontSize: 14),
+                  ),
+                  Text(
+                    '${bandwidthMbps.toStringAsFixed(1)} Mbps',
+                    style: const TextStyle(
+                      color: Colors.white,
+                      fontSize: 14,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+
+          // Quality Options
+          ListView.builder(
+            shrinkWrap: true,
+            itemCount: _availableQualities.length,
+            itemBuilder: (context, index) {
+              final quality = _availableQualities[index];
+              final isSelected = quality == currentQuality;
+
+              return ListTile(
+                contentPadding:
+                    const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
+                leading: isSelected
+                    ? const Icon(Icons.check_circle, color: Colors.blue)
+                    : const Icon(
+                        Icons.radio_button_unchecked,
+                        color: Colors.white30,
+                      ),
+                title: Text(
+                  quality.label,
+                  style: TextStyle(
+                    color: isSelected ? Colors.blue : Colors.white,
+                    fontWeight:
+                        isSelected ? FontWeight.bold : FontWeight.normal,
+                  ),
+                ),
+                subtitle: Text(
+                  '${quality.bitrateBps ~/ 1000000} Mbps',
+                  style: const TextStyle(color: Colors.white70, fontSize: 12),
+                ),
+                onTap: () {
+                  widget.qualitySelector.setQuality(quality);
+                  setState(() {
+                    _selectedQuality = quality;
+                  });
+                },
+              );
+            },
+          ),
+
+          // Auto Quality Option
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+            child: Container(
+              decoration: const BoxDecoration(
+                border: Border(
+                  top: BorderSide(color: Colors.white24),
+                ),
+              ),
+              child: ListTile(
+                contentPadding:
+                    const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+                leading: const Icon(Icons.auto_awesome, color: Colors.amber),
+                title: const Text(
+                  'Auto Quality',
+                  style: TextStyle(
+                    color: Colors.amber,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                subtitle: const Text(
+                  'Adjusts based on network speed',
+                  style: TextStyle(color: Colors.white70, fontSize: 12),
+                ),
+                onTap: () {
+                  // Auto mode would be handled by the player
+                  widget.onClose();
+                },
+              ),
+            ),
+          ),
+
+          const SizedBox(height: 8),
+        ],
+      ),
+    );
+  }
+}
+
+/// Floating quality indicator (minimal UI during playback)
+class QualityIndicator extends ConsumerWidget {
+  final QualitySelector qualitySelector;
+  final VoidCallback onTap;
+
+  const QualityIndicator({
+    super.key,
+    required this.qualitySelector,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final quality = qualitySelector.currentQuality;
+
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+        decoration: BoxDecoration(
+          color: Colors.black54,
+          borderRadius: BorderRadius.circular(4),
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const Icon(Icons.high_quality, color: Colors.white, size: 16),
+            const SizedBox(width: 4),
+            Text(
+              quality.resolution.split('x')[1], // Show just the height
+              style: const TextStyle(
+                color: Colors.white,
+                fontSize: 12,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Bandwidth monitor widget (for debugging/info)
+class BandwidthMonitor extends ConsumerWidget {
+  final QualitySelector qualitySelector;
+
+  const BandwidthMonitor({
+    super.key,
+    required this.qualitySelector,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return Container(
+      padding: const EdgeInsets.all(8),
+      decoration: BoxDecoration(
+        color: Colors.black54,
+        borderRadius: BorderRadius.circular(4),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          const Icon(Icons.speed, color: Colors.green, size: 14),
+          const SizedBox(width: 4),
+          Text(
+            '${qualitySelector.getEstimatedBandwidthMbps().toStringAsFixed(1)} Mbps',
+            style: const TextStyle(
+              color: Colors.white,
+              fontSize: 11,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/features/iptv/widgets/simple_recording_widget.dart

@@ -0,0 +1,329 @@
+import 'dart:convert';
+import 'package:flutter/material.dart';
+import 'package:http/http.dart' as http;
+import 'package:google_fonts/google_fonts.dart';
+import '../../../core/models/iptv_models.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../core/widgets/glass_container.dart';
+
+class SimpleRecordingWidget extends StatefulWidget {
+  final Channel channel;
+  final String streamUrl;
+
+  const SimpleRecordingWidget({
+    super.key,
+    required this.channel,
+    required this.streamUrl,
+  });
+
+  @override
+  State<SimpleRecordingWidget> createState() => _SimpleRecordingWidgetState();
+}
+
+class _SimpleRecordingWidgetState extends State<SimpleRecordingWidget> {
+  bool _isRecording = false;
+  String _status = '';
+  int _durationMinutes = 60;
+  DateTime _startTime = DateTime.now();
+
+  /// 🟢 Record NOW for X minutes
+  Future<void> _recordNow(int minutes) async {
+    setState(() => _status = 'Starting...');
+
+    try {
+      final response = await http.post(
+        Uri.parse('/api/record/now'),
+        headers: {'Content-Type': 'application/json'},
+        body: jsonEncode({
+          'channel_id': widget.channel.streamId,
+          'stream_url': widget.streamUrl,
+          'title': widget.channel.name,
+          'duration_minutes': minutes,
+        }),
+      );
+
+      if (response.statusCode == 200) {
+        setState(() {
+          _isRecording = true;
+          _status = '🔴 Recording for $minutes min';
+        });
+
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            const SnackBar(content: Text('✅ Recording started!')),
+          );
+        }
+      } else {
+        throw Exception('API error');
+      }
+    } catch (e) {
+      setState(() => _status = '❌ Error: $e');
+    }
+  }
+
+  /// 🔵 Schedule for later
+  Future<void> _scheduleRecording() async {
+    final endTime = _startTime.add(Duration(minutes: _durationMinutes));
+
+    try {
+      final response = await http.post(
+        Uri.parse('/api/record/schedule'),
+        headers: {'Content-Type': 'application/json'},
+        body: jsonEncode({
+          'channel_id': widget.channel.streamId,
+          'stream_url': widget.streamUrl,
+          'title': widget.channel.name,
+          'start_time': _startTime.toIso8601String(),
+          'end_time': endTime.toIso8601String(),
+        }),
+      );
+
+      if (response.statusCode == 200) {
+        setState(() => _status = '⏰ Scheduled for ${_startTime.toLocal()}');
+
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            const SnackBar(content: Text('✅ Recording scheduled!')),
+          );
+          Navigator.pop(context);
+        }
+      }
+    } catch (e) {
+      setState(() => _status = '❌ Error: $e');
+    }
+  }
+
+  /// 🔴 Stop recording
+  Future<void> _stopRecording() async {
+    try {
+      await http.post(
+        Uri.parse('/api/record/stop/${widget.channel.streamId}'),
+        headers: {'Content-Type': 'application/json'},
+      );
+
+      setState(() {
+        _isRecording = false;
+        _status = 'Stopped';
+      });
+
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          const SnackBar(content: Text('✅ Recording stopped!')),
+        );
+      }
+    } catch (e) {
+      setState(() => _status = '❌ Error: $e');
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      backgroundColor: Colors.transparent,
+      insetPadding: const EdgeInsets.all(20),
+      child: GlassContainer(
+        child: Container(
+          width: 500,
+          padding: const EdgeInsets.all(32),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              // Title
+              Text(
+                '🎬 Record "${widget.channel.name}"',
+                style: GoogleFonts.poppins(
+                  fontSize: 24,
+                  fontWeight: FontWeight.bold,
+                  color: Colors.white,
+                ),
+              ),
+              const SizedBox(height: 24),
+
+              // Status
+              if (_status.isNotEmpty)
+                Container(
+                  padding: const EdgeInsets.all(12),
+                  decoration: BoxDecoration(
+                    color: AppColors.primary.withOpacity(0.2),
+                    borderRadius: BorderRadius.circular(8),
+                  ),
+                  child: Text(
+                    _status,
+                    style: GoogleFonts.poppins(
+                      fontSize: 14,
+                      color: Colors.white70,
+                    ),
+                  ),
+                ),
+              const SizedBox(height: 20),
+
+              // 🟢 Quick record buttons
+              if (!_isRecording) ...[
+                Text(
+                  '⚡ Quick Record',
+                  style: GoogleFonts.poppins(
+                    fontSize: 16,
+                    fontWeight: FontWeight.w600,
+                    color: Colors.white,
+                  ),
+                ),
+                const SizedBox(height: 12),
+                Wrap(
+                  spacing: 8,
+                  runSpacing: 8,
+                  children: [
+                    _QuickButton(
+                      label: '30 min',
+                      onTap: () => _recordNow(30),
+                    ),
+                    _QuickButton(
+                      label: '1 hour',
+                      onTap: () => _recordNow(60),
+                    ),
+                    _QuickButton(
+                      label: '2 hours',
+                      onTap: () => _recordNow(120),
+                    ),
+                    _QuickButton(
+                      label: '4 hours',
+                      onTap: () => _recordNow(240),
+                    ),
+                  ],
+                ),
+                const SizedBox(height: 28),
+              ],
+
+              // 🔴 Stop if recording
+              if (_isRecording)
+                ElevatedButton.icon(
+                  onPressed: _stopRecording,
+                  icon: const Icon(Icons.stop),
+                  label: const Text('STOP RECORDING'),
+                  style: ElevatedButton.styleFrom(
+                    backgroundColor: Colors.red,
+                    foregroundColor: Colors.white,
+                    padding: const EdgeInsets.symmetric(vertical: 16),
+                  ),
+                ),
+
+              if (!_isRecording) ...[
+                // 🔵 Schedule section
+                ExpansionTile(
+                  title: Text(
+                    '🔵 Schedule for Later',
+                    style: GoogleFonts.poppins(
+                      fontSize: 14,
+                      fontWeight: FontWeight.w600,
+                      color: Colors.white,
+                    ),
+                  ),
+                  children: [
+                    Padding(
+                      padding: const EdgeInsets.all(16),
+                      child: Column(
+                        children: [
+                          // Start time picker
+                          ListTile(
+                            title: const Text('Start'),
+                            trailing: Text(
+                              '${_startTime.toLocal().hour}:${_startTime.toLocal().minute.toString().padLeft(2, '0')}',
+                              style: const TextStyle(color: Colors.grey),
+                            ),
+                            onTap: () async {
+                              final time = await showTimePicker(
+                                context: context,
+                                initialTime: TimeOfDay.fromDateTime(_startTime),
+                              );
+                              if (time != null) {
+                                setState(() {
+                                  _startTime = _startTime.copyWith(
+                                    hour: time.hour,
+                                    minute: time.minute,
+                                  );
+                                });
+                              }
+                            },
+                          ),
+
+                          // Duration selector
+                          ListTile(
+                            title: const Text('Duration'),
+                            trailing: DropdownButton<int>(
+                              value: _durationMinutes,
+                              dropdownColor: Colors.grey[800],
+                              items: [30, 60, 120, 240, 480]
+                                  .map(
+                                    (m) => DropdownMenuItem(
+                                      value: m,
+                                      child: Text('$m min'),
+                                    ),
+                                  )
+                                  .toList(),
+                              onChanged: (v) {
+                                if (v != null) {
+                                  setState(() => _durationMinutes = v);
+                                }
+                              },
+                            ),
+                          ),
+
+                          const SizedBox(height: 16),
+
+                          // Schedule button
+                          ElevatedButton.icon(
+                            onPressed: _scheduleRecording,
+                            icon: const Icon(Icons.schedule),
+                            label: const Text('SCHEDULE'),
+                            style: ElevatedButton.styleFrom(
+                              backgroundColor: AppColors.primary,
+                              minimumSize: const Size.fromHeight(48),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+
+              const SizedBox(height: 16),
+
+              // Close button
+              TextButton(
+                onPressed: () => Navigator.pop(context),
+                child: const Text('Close'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Quick button component
+class _QuickButton extends StatelessWidget {
+  final String label;
+  final VoidCallback onTap;
+
+  const _QuickButton({
+    required this.label,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+      onPressed: onTap,
+      style: ElevatedButton.styleFrom(
+        backgroundColor: AppColors.primary.withOpacity(0.7),
+        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(8),
+        ),
+      ),
+      child: Text(label),
+    );
+  }
+}

lib/mobile/features/iptv/screens/mobile_dashboard_screen.dart

@@ -34,16 +34,23 @@ class _MobileDashboardScreenState extends ConsumerState<MobileDashboardScreen> {
             _currentIndex = index;
           });
         },
-        child: IndexedStack(
-          index: _currentIndex,
-          children: [
-            MobileLiveTVTab(playlist: widget.playlist),
-            MobileMoviesTab(playlist: widget.playlist),
-            MobileSeriesTab(playlist: widget.playlist),
-            const MobileSettingsTab(),
-          ],
-        ),
+        child: _buildActiveTab(),
       ),
     );
   }
+
+  Widget _buildActiveTab() {
+    switch (_currentIndex) {
+      case 0:
+        return MobileLiveTVTab(playlist: widget.playlist);
+      case 1:
+        return MobileMoviesTab(playlist: widget.playlist);
+      case 2:
+        return MobileSeriesTab(playlist: widget.playlist);
+      case 3:
+        return const MobileSettingsTab();
+      default:
+        return MobileLiveTVTab(playlist: widget.playlist);
+    }
+  }
 }

lib/mobile/features/iptv/screens/mobile_playlist_selection_screen.dart

@@ -65,8 +65,11 @@ class MobilePlaylistSelectionScreen extends ConsumerWidget {
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
-                const Icon(Icons.error_outline,
-                    size: 48, color: AppColors.error),
+                const Icon(
+                  Icons.error_outline,
+                  size: 48,
+                  color: AppColors.error,
+                ),
                 const SizedBox(height: 16),
                 Text('Error loading playlists', style: GoogleFonts.inter()),
                 TextButton(
@@ -82,12 +85,16 @@ class MobilePlaylistSelectionScreen extends ConsumerWidget {
                 child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
-                    const Icon(Icons.playlist_remove,
-                        size: 48, color: AppColors.onSurfaceVariant),
+                    const Icon(
+                      Icons.playlist_remove,
+                      size: 48,
+                      color: AppColors.textSecondary,
+                    ),
                     const SizedBox(height: 16),
-                    Text('No playlists available',
-                        style:
-                            GoogleFonts.inter(color: AppColors.onSurfaceVariant)),
+                    Text(
+                      'No playlists available',
+                      style: GoogleFonts.inter(color: AppColors.textSecondary),
+                    ),
                   ],
                 ),
               );
@@ -133,10 +140,10 @@ class _MobilePlaylistCard extends StatelessWidget {
       decoration: BoxDecoration(
         color: AppColors.surface,
         borderRadius: BorderRadius.circular(16),
-        border: Border.all(color: AppColors.outlineVariant.withOpacity(0.5)),
+        border: Border.all(color: AppColors.border.withOpacity(0.5)),
         boxShadow: [
           BoxShadow(
-            color: AppColors.background.withOpacity(0.2),
+            color: Colors.black.withOpacity(0.2),
             blurRadius: 10,
             offset: const Offset(0, 4),
           ),
@@ -158,8 +165,11 @@ class _MobilePlaylistCard extends StatelessWidget {
                     color: AppColors.primary.withOpacity(0.2),
                     borderRadius: BorderRadius.circular(12),
                   ),
-                  child: const Icon(Icons.playlist_play,
-                      color: AppColors.primary, size: 28),
+                  child: const Icon(
+                    Icons.playlist_play,
+                    color: AppColors.primary,
+                    size: 28,
+                  ),
                 ),
                 const SizedBox(width: 16),
                 Expanded(
@@ -171,7 +181,7 @@ class _MobilePlaylistCard extends StatelessWidget {
                         style: GoogleFonts.inter(
                           fontSize: 16,
                           fontWeight: FontWeight.w600,
-                          color: AppColors.onSurface,
+                          color: AppColors.textPrimary,
                         ),
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
@@ -181,7 +191,7 @@ class _MobilePlaylistCard extends StatelessWidget {
                         Uri.tryParse(playlist.dns)?.host ?? playlist.dns,
                         style: GoogleFonts.inter(
                           fontSize: 13,
-                          color: AppColors.onSurfaceVariant,
+                          color: AppColors.textSecondary,
                         ),
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,

lib/mobile/features/iptv/widgets/mobile_live_tv_tab.dart

@@ -48,14 +48,19 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
             children: [
               const CircularProgressIndicator(),
               const SizedBox(height: 16),
-              const Text('Loading channels...', style: TextStyle(color: AppColors.onSurfaceVariant)),
+              const Text(
+                'Loading channels...',
+                style: TextStyle(color: Colors.white70),
+              ),
               const SizedBox(height: 24),
               FutureBuilder(
                 future: Future.delayed(const Duration(seconds: 8)),
                 builder: (context, snapshot) {
                   if (snapshot.connectionState == ConnectionState.done) {
                     return TextButton(
-                      onPressed: () => ref.refresh(liveChannelsByPlaylistProvider(widget.playlist)),
+                      onPressed: () => ref.refresh(
+                        liveChannelsByPlaylistProvider(widget.playlist),
+                      ),
                       child: const Text('Taking too long? Tap to retry'),
                     );
                   }
@@ -71,14 +76,26 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
-                const Icon(Icons.error_outline, color: AppColors.error, size: 48),
+                const Icon(Icons.error_outline, color: Colors.red, size: 48),
                 const SizedBox(height: 16),
-                Text('Failed to load channels', style: GoogleFonts.inter(color: AppColors.onSurface, fontSize: 18, fontWeight: FontWeight.bold)),
+                Text(
+                  'Failed to load channels',
+                  style: GoogleFonts.inter(
+                    color: Colors.white,
+                    fontSize: 18,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
                 const SizedBox(height: 8),
-                Text('$e', style: const TextStyle(color: AppColors.onSurfaceVariant), textAlign: TextAlign.center),
+                Text(
+                  '$e',
+                  style: const TextStyle(color: Colors.white54),
+                  textAlign: TextAlign.center,
+                ),
                 const SizedBox(height: 24),
                 ElevatedButton(
-                  onPressed: () => ref.refresh(liveChannelsByPlaylistProvider(widget.playlist)),
+                  onPressed: () => ref
+                      .refresh(liveChannelsByPlaylistProvider(widget.playlist)),
                   child: const Text('Retry'),
                 ),
               ],
@@ -127,8 +144,9 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
                 // Header & Search
                 Padding(
                   padding: const EdgeInsets.all(16),
-                  child: GlassContainer.glass(
+                  child: GlassContainer(
                     borderRadius: 16,
+                    opacity: 0.1,
                     padding:
                         const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                     child: Row(
@@ -136,15 +154,15 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
                         Expanded(
                           child: TextField(
                             controller: _searchController,
-                            style: GoogleFonts.inter(color: AppColors.onSurface),
+                            style: GoogleFonts.inter(color: Colors.white),
                             decoration: InputDecoration(
                               hintText: 'Search channels...',
                               hintStyle:
-                                  GoogleFonts.inter(color: AppColors.onSurfaceVariant),
+                                  GoogleFonts.inter(color: Colors.white54),
                               border: InputBorder.none,
                               prefixIcon: const Icon(
                                 Icons.search,
-                                color: AppColors.onSurfaceVariant,
+                                color: Colors.white54,
                               ),
                               isDense: true,
                             ),
@@ -154,7 +172,7 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
                           GestureDetector(
                             onTap: () => _searchController.clear(),
                             child:
-                                const Icon(Icons.close, color: AppColors.onSurfaceVariant),
+                                const Icon(Icons.close, color: Colors.white54),
                           ),
                       ],
                     ),
@@ -184,15 +202,15 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
                             ),
                             decoration: BoxDecoration(
                               color: isSelected
-                                  ? AppColors.primary
-                                  : AppColors.surfaceContainer,
+                                  ? Colors.white
+                                  : Colors.black.withOpacity(0.4),
                               borderRadius: BorderRadius.circular(20),
                             ),
                             child: Text(
                               category,
                               style: GoogleFonts.inter(
                                 color:
-                                    isSelected ? AppColors.onPrimary : AppColors.onSurfaceVariant,
+                                    isSelected ? Colors.black : Colors.white70,
                                 fontWeight: isSelected
                                     ? FontWeight.w600
                                     : FontWeight.w500,
@@ -217,7 +235,7 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
                                 ? 'Favorites'
                                 : _selectedCategory ?? 'Channels',
                         style: GoogleFonts.inter(
-                          color: AppColors.onSurface,
+                          color: Colors.white,
                           fontWeight: FontWeight.bold,
                           fontSize: 18,
                         ),
@@ -232,7 +250,7 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
                           decoration: BoxDecoration(
                             color: _showFavoritesOnly
                                 ? AppColors.live.withOpacity(0.2)
-                                : AppColors.surfaceContainer,
+                                : Colors.white.withOpacity(0.1),
                             borderRadius: BorderRadius.circular(8),
                             border: _showFavoritesOnly
                                 ? Border.all(color: AppColors.live)
@@ -244,7 +262,7 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
                                 : Icons.favorite_border,
                             color: _showFavoritesOnly
                                 ? AppColors.live
-                                : AppColors.onSurface,
+                                : Colors.white,
                             size: 20,
                           ),
                         ),
@@ -262,13 +280,13 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
                             children: [
                               const Icon(
                                 Icons.tv_off,
-                                color: AppColors.outlineVariant,
+                                color: Colors.white24,
                                 size: 48,
                               ),
                               const SizedBox(height: 16),
                               Text(
                                 'No channels found',
-                                style: GoogleFonts.inter(color: AppColors.outline),
+                                style: GoogleFonts.inter(color: Colors.white38),
                               ),
                             ],
                           ),
@@ -282,9 +300,11 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
                             final channel = displayedChannels[index];
                             return _MobileChannelTile(
                               channel: channel,
-                              playlist: widget.playlist,
                               onTap: () => _playChannel(
-                                  context, channel, displayedChannels),
+                                context,
+                                channel,
+                                displayedChannels,
+                              ),
                             );
                           },
                         ),
@@ -298,7 +318,10 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
   }
 
   void _playChannel(
-      BuildContext context, Channel channel, List<Channel> channels) {
+    BuildContext context,
+    Channel channel,
+    List<Channel> channels,
+  ) {
     Navigator.of(context).push(
       MaterialPageRoute(
         builder: (context) => MobilePlayerScreen(
@@ -313,33 +336,25 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
   }
 }
 
-class _MobileChannelTile extends ConsumerWidget {
+class _MobileChannelTile extends StatelessWidget {
   final Channel channel;
-  final PlaylistConfig playlist;
   final VoidCallback onTap;
 
   const _MobileChannelTile({
     required this.channel,
-    required this.playlist,
     required this.onTap,
   });
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  Widget build(BuildContext context) {
     final iconUrl =
         channel.streamIcon.isNotEmpty && channel.streamIcon.startsWith('http')
             ? '/api/xtream/${channel.streamIcon}'
             : null;
 
-    // Fetch EPG
-    final epgAsync = ref.watch(
-      epgByPlaylistProvider(
-        EpgRequestKey(playlist: playlist, streamId: channel.streamId),
-      ),
-    );
-
-    return GlassContainer.glass(
+    return GlassContainer(
       borderRadius: 12,
+      opacity: 0.15,
       padding: EdgeInsets.zero,
       child: InkWell(
         onTap: onTap,
@@ -352,7 +367,7 @@ class _MobileChannelTile extends ConsumerWidget {
                 width: 48,
                 height: 48,
                 decoration: BoxDecoration(
-                  color: AppColors.surfaceContainer,
+                  color: Colors.white.withOpacity(0.1),
                   borderRadius: BorderRadius.circular(8),
                 ),
                 padding: const EdgeInsets.all(4),
@@ -361,73 +376,32 @@ class _MobileChannelTile extends ConsumerWidget {
                         iconUrl,
                         fit: BoxFit.contain,
                         errorBuilder: (_, __, ___) =>
-                            const Icon(Icons.tv, color: AppColors.outlineVariant),
+                            const Icon(Icons.tv, color: Colors.white24),
                       )
-                    : const Icon(Icons.tv, color: AppColors.outlineVariant),
+                    : const Icon(Icons.tv, color: Colors.white24),
               ),
               const SizedBox(width: 16),
               Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      channel.name,
-                      style: GoogleFonts.inter(
-                        color: AppColors.onSurface,
-                        fontWeight: FontWeight.w500,
-                        fontSize: 14,
-                      ),
-                      maxLines: 1,
-                      overflow: TextOverflow.ellipsis,
-                    ),
-
-                    // EPG Only (Replaces Channel Number)
-                    epgAsync.when(
-                      data: (epgList) {
-                        if (epgList.isEmpty) {
-                          return Text(
-                            'No Info',
-                            style: GoogleFonts.inter(
-                              color: AppColors.outline,
-                              fontSize: 12,
-                            ),
-                          );
-                        }
-                        final current = epgList.first;
-                        return Text(
-                          current.title,
-                          style: GoogleFonts.inter(
-                            color: const Color(
-                              0xFFFFD700,
-                            ), // Gold/Amber for visibility check
-                            fontSize: 12,
-                            fontWeight: FontWeight.w500,
-                          ),
-                          maxLines: 1,
-                          overflow: TextOverflow.ellipsis,
-                        );
-                      },
-                      loading: () => const Text(
-                        '...',
-                        style: TextStyle(color: AppColors.outline, fontSize: 12),
-                      ),
-                      error: (err, stack) => const Text(
-                        'Err',
-                        style: TextStyle(color: AppColors.error, fontSize: 10),
-                      ),
-                    ),
-                  ],
+                child: Text(
+                  channel.name,
+                  style: GoogleFonts.inter(
+                    color: Colors.white,
+                    fontWeight: FontWeight.w500,
+                    fontSize: 14,
+                  ),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
                 ),
               ),
               Container(
                 padding: const EdgeInsets.all(8),
                 decoration: BoxDecoration(
-                  color: AppColors.surfaceContainer,
+                  color: Colors.white.withOpacity(0.1),
                   shape: BoxShape.circle,
                 ),
                 child: const Icon(
                   Icons.play_arrow_rounded,
-                  color: AppColors.onSurface,
+                  color: Colors.white,
                   size: 16,
                 ),
               ),

lib/mobile/widgets/mobile_scaffold.dart

@@ -1,8 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:google_fonts/google_fonts.dart';
-import 'dart:ui';
-import '../../../core/theme/app_colors.dart';
+import '../../core/theme/app_colors.dart';
 
 class MobileScaffold extends ConsumerWidget {
   final Widget child;
@@ -27,11 +26,11 @@ class MobileScaffold extends ConsumerWidget {
           // Global Background
           Container(
             decoration: const BoxDecoration(
-              gradient: RadialGradient(
-                center: Alignment.center,
-                radius: 1.5,
+              gradient: LinearGradient(
+                begin: Alignment.topCenter,
+                end: Alignment.bottomCenter,
                 colors: [
-                  AppColors.surfaceContainerLow,
+                  AppColors.surfaceVariant,
                   AppColors.background,
                 ],
               ),
@@ -42,55 +41,50 @@ class MobileScaffold extends ConsumerWidget {
           child,
         ],
       ),
-      bottomNavigationBar: ClipRRect(
-        child: BackdropFilter(
-          filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
-          child: Container(
-            decoration: BoxDecoration(
-              color: AppColors.surfaceContainerLow.withOpacity(0.85),
-              border: Border(
-                top: BorderSide(
-                  color: AppColors.outlineVariant.withOpacity(0.5),
-                  width: 0.5,
-                ),
-              ),
-            ),
-            child: BottomNavigationBar(
-              currentIndex: currentIndex,
-              onTap: onIndexChanged,
-              backgroundColor: Colors.transparent,
-              type: BottomNavigationBarType.fixed,
-              elevation: 0,
-              selectedItemColor: AppColors.onSurface,
-              unselectedItemColor: AppColors.onSurfaceVariant,
-              selectedLabelStyle:
-                  GoogleFonts.inter(fontWeight: FontWeight.w600, fontSize: 11),
-              unselectedLabelStyle:
-                  GoogleFonts.inter(fontWeight: FontWeight.w500, fontSize: 11),
-              items: const [
-                BottomNavigationBarItem(
-                  icon: Icon(Icons.live_tv_rounded),
-                  label: 'Live',
-                ),
-                BottomNavigationBarItem(
-                  icon: Icon(Icons.movie_outlined),
-                  activeIcon: Icon(Icons.movie_rounded),
-                  label: 'Movies',
-                ),
-                BottomNavigationBarItem(
-                  icon: Icon(Icons.video_library_outlined),
-                  activeIcon: Icon(Icons.video_library_rounded),
-                  label: 'Series',
-                ),
-                BottomNavigationBarItem(
-                  icon: Icon(Icons.settings_outlined),
-                  activeIcon: Icon(Icons.settings_rounded),
-                  label: 'Settings',
-                ),
-              ],
+      bottomNavigationBar: Container(
+        decoration: const BoxDecoration(
+          color: AppColors.surface,
+          border: Border(
+            top: BorderSide(
+              color: AppColors.border,
+              width: 0.5,
             ),
           ),
         ),
+        child: BottomNavigationBar(
+          currentIndex: currentIndex,
+          onTap: onIndexChanged,
+          backgroundColor: Colors.transparent,
+          type: BottomNavigationBarType.fixed,
+          elevation: 0,
+          selectedItemColor: AppColors.primary,
+          unselectedItemColor: AppColors.textSecondary,
+          selectedLabelStyle:
+              GoogleFonts.inter(fontWeight: FontWeight.w600, fontSize: 11),
+          unselectedLabelStyle:
+              GoogleFonts.inter(fontWeight: FontWeight.w500, fontSize: 11),
+          items: const [
+            BottomNavigationBarItem(
+              icon: Icon(Icons.live_tv_rounded),
+              label: 'Live',
+            ),
+            BottomNavigationBarItem(
+              icon: Icon(Icons.movie_outlined),
+              activeIcon: Icon(Icons.movie_rounded),
+              label: 'Movies',
+            ),
+            BottomNavigationBarItem(
+              icon: Icon(Icons.video_library_outlined),
+              activeIcon: Icon(Icons.video_library_rounded),
+              label: 'Series',
+            ),
+            BottomNavigationBarItem(
+              icon: Icon(Icons.settings_outlined),
+              activeIcon: Icon(Icons.settings_rounded),
+              label: 'Settings',
+            ),
+          ],
+        ),
       ),
     );
   }