refactor: rewrite dashboard components to match prototype design

- Rewrite TrafficProgressBar with multi-segment gradient fill, flex-based
  zone tints, shimmer + highlight overlays, radial glow at fill edge
- Rewrite SubscriptionCardActive with zone header, big percentage on right,
  connect device card with device dots, tariff/days-left two-column row,
  sparkline placeholder, traffic refresh controls
- Rewrite SubscriptionCardExpired with red glow, grid pattern, gradient
  renew button, outline tariffs button
- Rewrite TrialOfferCard with animated glow background, grid pattern,
  icon glow animation, price tag with old price, gradient CTA buttons
- Rewrite StatsGrid with 2x2 card layout, icon+label+chevron header,
  big value numbers, zone-colored balance/earnings cards
- Update Sparkline with color prop and last-point dot indicator
- Update useAnimatedNumber to use easeOutExpo matching prototype
- Add formatTraffic utility for MB/GB/TB unit formatting
- Add mainHex to trafficZone for inline style support
- Update animations to match prototype timing
- Add new i18n keys for redesigned components

tailwind.config.js

@@ -177,9 +177,9 @@ export default {
         'spotlight-ace': 'spotlightAce 2s ease 0.75s 1 forwards',
         // Dashboard traffic animations
         'traffic-shimmer': 'trafficShimmer 2s ease-in-out infinite',
-        'unlimited-flow': 'unlimitedFlow 3s linear infinite',
+        'unlimited-flow': 'unlimitedFlow 3s ease-in-out infinite',
         'unlimited-pulse': 'unlimitedPulse 2s ease-in-out infinite',
-        'trial-glow': 'trialGlow 2s ease-in-out infinite',
+        'trial-glow': 'trialGlow 3s ease-in-out infinite',
       },
       keyframes: {
         fadeIn: {
@@ -265,15 +265,16 @@ export default {
         },
         unlimitedFlow: {
           '0%': { backgroundPosition: '0% 50%' },
-          '100%': { backgroundPosition: '200% 50%' },
+          '50%': { backgroundPosition: '100% 50%' },
+          '100%': { backgroundPosition: '0% 50%' },
         },
         unlimitedPulse: {
-          '0%, 100%': { opacity: '0.6', transform: 'scale(1)' },
-          '50%': { opacity: '1', transform: 'scale(1.3)' },
+          '0%, 100%': { opacity: '1', transform: 'scale(1)' },
+          '50%': { opacity: '0.5', transform: 'scale(0.7)' },
         },
         trialGlow: {
-          '0%, 100%': { boxShadow: '0 0 15px rgba(var(--color-warning-500), 0.2)' },
-          '50%': { boxShadow: '0 0 30px rgba(var(--color-warning-500), 0.4)' },
+          '0%, 100%': { boxShadow: '0 0 15px rgba(62, 219, 176, 0.06)' },
+          '50%': { boxShadow: '0 0 30px rgba(62, 219, 176, 0.12)' },
         },
       },
       transitionTimingFunction: {