feat: Linear-style UI redesign with improved mobile experience

Major changes:
- Redesign cabinet with Linear-style components and top navigation
- Replace detail modals with dedicated pages (users, broadcasts, email templates)
- Add email channel support for broadcasts
- Remove pull-to-refresh, improve drag-and-drop on touch devices
- Fix Telegram Mini App: fullscreen, back button, scroll restoration
- Unify admin pages color scheme to design system
- Mobile-first improvements: horizontal tabs for settings, better touch targets

src/pages/Dashboard.tsx

@@ -2,6 +2,8 @@ import { useState, useEffect, useMemo, useRef } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { motion } from 'framer-motion';
+
 import { useAuthStore } from '../store/auth';
 import { subscriptionApi } from '../api/subscription';
 import { referralApi } from '../api/referral';
@@ -12,15 +14,25 @@ import Onboarding, { useOnboarding } from '../components/Onboarding';
 import PromoOffersSection from '../components/PromoOffersSection';
 import { useCurrency } from '../hooks/useCurrency';
 
+import { Card } from '@/components/data-display/Card';
+import { Button } from '@/components/primitives/Button';
+import { staggerContainer, staggerItem } from '@/components/motion/transitions';
+
 // Icons
-const ArrowRightIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+const ArrowRightIcon = ({ className = 'h-4 w-4' }: { className?: string }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
   </svg>
 );
 
-const SparklesIcon = () => (
-  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+const SparklesIcon = ({ className = 'h-5 w-5' }: { className?: string }) => (
+  <svg
+    className={className}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={1.5}
+  >
     <path
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -29,8 +41,8 @@ const SparklesIcon = () => (
   </svg>
 );
 
-const ChevronRightIcon = () => (
-  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+const ChevronRightIcon = ({ className = 'h-5 w-5' }: { className?: string }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
   </svg>
 );
@@ -45,16 +57,6 @@ const RefreshIcon = ({ className = 'w-4 h-4' }: { className?: string }) => (
   </svg>
 );
 
-const SupportLottieIcon = () => (
-  <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"
-    />
-  </svg>
-);
-
 export default function Dashboard() {
   const { t } = useTranslation();
   const { user, refreshUser } = useAuthStore();
@@ -244,13 +246,6 @@ export default function Dashboard() {
       });
     }
 
-    steps.push({
-      target: 'quick-actions',
-      title: t('onboarding.steps.quickActions.title'),
-      description: t('onboarding.steps.quickActions.description'),
-      placement: 'top',
-    });
-
     return steps;
   }, [t, subscription]);
 
@@ -267,372 +262,373 @@ export default function Dashboard() {
   };
 
   return (
-    <div className="space-y-6">
+    <motion.div
+      className="space-y-6"
+      variants={staggerContainer}
+      initial="initial"
+      animate="animate"
+    >
       {/* Header */}
-      <div data-onboarding="welcome">
+      <motion.div variants={staggerItem} data-onboarding="welcome">
         <h1 className="text-2xl font-bold text-dark-50 sm:text-3xl">
           {t('dashboard.welcome', { name: user?.first_name || user?.username || '' })}
         </h1>
         <p className="mt-1 text-dark-400">{t('dashboard.yourSubscription')}</p>
-      </div>
+      </motion.div>
 
       {/* Subscription Status - Main Card */}
       {subLoading ? (
-        <div className="bento-card">
-          <div className="mb-6 flex items-center justify-between">
-            <div className="skeleton h-6 w-24" />
-            <div className="skeleton h-6 w-16 rounded-full" />
-          </div>
-          <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
-            {[...Array(4)].map((_, i) => (
-              <div key={i}>
-                <div className="skeleton mb-2 h-4 w-20" />
-                <div className="skeleton h-5 w-24" />
-              </div>
-            ))}
-          </div>
-          <div className="mt-6">
-            <div className="skeleton h-2 w-full rounded-full" />
-          </div>
-          <div className="mt-6 grid grid-cols-2 gap-3">
-            <div className="skeleton h-10 w-full rounded-xl" />
-            <div className="skeleton h-10 w-full rounded-xl" />
-          </div>
-        </div>
-      ) : subscription ? (
-        <div className="bento-card">
-          <div className="mb-6 flex items-center justify-between">
-            <h2 className="text-lg font-semibold text-dark-100">{t('subscription.status')}</h2>
-            <span className={subscription.is_active ? 'badge-success' : 'badge-error'}>
-              {subscription.is_active ? t('subscription.active') : t('subscription.expired')}
-            </span>
-          </div>
-
-          <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
-            <div>
-              <div className="mb-1 text-sm text-dark-500">{t('subscription.expiresAt')}</div>
-              <div className="font-medium text-dark-100">
-                {new Date(subscription.end_date).toLocaleDateString()}
-              </div>
+        <motion.div variants={staggerItem}>
+          <Card>
+            <div className="mb-6 flex items-center justify-between">
+              <div className="skeleton h-6 w-24" />
+              <div className="skeleton h-6 w-16 rounded-full" />
             </div>
-            <div>
-              <div className="mb-1 flex items-center gap-2">
-                <span className="text-sm text-dark-500">{t('subscription.traffic')}</span>
-                <button
-                  onClick={() => refreshTrafficMutation.mutate()}
-                  disabled={refreshTrafficMutation.isPending || trafficRefreshCooldown > 0}
-                  className="rounded-full p-1 text-dark-400 transition-colors hover:bg-dark-700/50 hover:text-accent-400 disabled:cursor-not-allowed disabled:opacity-50"
-                  title={
-                    trafficRefreshCooldown > 0 ? `${trafficRefreshCooldown}s` : t('common.refresh')
-                  }
-                >
-                  <RefreshIcon
-                    className={`h-3.5 w-3.5 ${refreshTrafficMutation.isPending ? 'animate-spin' : ''}`}
-                  />
-                </button>
-              </div>
-              <div className="font-medium text-dark-100">
-                {(trafficData?.traffic_used_gb ?? subscription.traffic_used_gb).toFixed(1)} /{' '}
-                {subscription.traffic_limit_gb || '∞'} GB
-              </div>
+            <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
+              {[...Array(4)].map((_, i) => (
+                <div key={i}>
+                  <div className="skeleton mb-2 h-4 w-20" />
+                  <div className="skeleton h-5 w-24" />
+                </div>
+              ))}
             </div>
-            <div>
-              <div className="mb-1 text-sm text-dark-500">{t('subscription.devices')}</div>
-              <div className="font-medium text-dark-100">{subscription.device_limit}</div>
-            </div>
-            <div>
-              <div className="mb-1 text-sm text-dark-500">{t('subscription.timeLeft')}</div>
-              <div className="font-medium text-dark-100">
-                {subscription.days_left > 0
-                  ? t('subscription.days', { count: subscription.days_left })
-                  : `${t('subscription.hours', { count: subscription.hours_left })} ${t('subscription.minutes', { count: subscription.minutes_left })}`}
-              </div>
-            </div>
-          </div>
-
-          {/* Traffic Progress */}
-          {subscription.traffic_limit_gb > 0 && (
             <div className="mt-6">
-              <div className="mb-2 flex justify-between text-sm">
-                <span className="text-dark-400">{t('subscription.trafficUsed')}</span>
-                <span className="text-dark-300">
-                  {(trafficData?.traffic_used_percent ?? subscription.traffic_used_percent).toFixed(
-                    1,
-                  )}
-                  %
-                </span>
+              <div className="skeleton h-2 w-full rounded-full" />
+            </div>
+            <div className="mt-6 grid grid-cols-2 gap-3">
+              <div className="skeleton h-10 w-full rounded-linear" />
+              <div className="skeleton h-10 w-full rounded-linear" />
+            </div>
+          </Card>
+        </motion.div>
+      ) : subscription ? (
+        <motion.div variants={staggerItem}>
+          <Card>
+            <div className="mb-6 flex items-center justify-between">
+              <h2 className="text-lg font-semibold text-dark-100">{t('subscription.status')}</h2>
+              <span className={subscription.is_active ? 'badge-success' : 'badge-error'}>
+                {subscription.is_active ? t('subscription.active') : t('subscription.expired')}
+              </span>
+            </div>
+
+            <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
+              <div>
+                <div className="mb-1 text-sm text-dark-500">{t('subscription.expiresAt')}</div>
+                <div className="font-medium text-dark-100">
+                  {new Date(subscription.end_date).toLocaleDateString()}
+                </div>
               </div>
-              <div className="progress-bar">
-                <div
-                  className={`progress-fill ${getTrafficColor(trafficData?.traffic_used_percent ?? subscription.traffic_used_percent)}`}
-                  style={{
-                    width: `${Math.min(trafficData?.traffic_used_percent ?? subscription.traffic_used_percent, 100)}%`,
-                  }}
-                />
+              <div>
+                <div className="mb-1 flex items-center gap-2">
+                  <span className="text-sm text-dark-500">{t('subscription.traffic')}</span>
+                  <button
+                    onClick={() => refreshTrafficMutation.mutate()}
+                    disabled={refreshTrafficMutation.isPending || trafficRefreshCooldown > 0}
+                    className="rounded-full p-1 text-dark-400 transition-colors hover:bg-dark-700/50 hover:text-accent-400 disabled:cursor-not-allowed disabled:opacity-50"
+                    title={
+                      trafficRefreshCooldown > 0
+                        ? `${trafficRefreshCooldown}s`
+                        : t('common.refresh')
+                    }
+                  >
+                    <RefreshIcon
+                      className={`h-3.5 w-3.5 ${refreshTrafficMutation.isPending ? 'animate-spin' : ''}`}
+                    />
+                  </button>
+                </div>
+                <div className="font-medium text-dark-100">
+                  {(trafficData?.traffic_used_gb ?? subscription.traffic_used_gb).toFixed(1)} /{' '}
+                  {subscription.traffic_limit_gb || '∞'} GB
+                </div>
+              </div>
+              <div>
+                <div className="mb-1 text-sm text-dark-500">{t('subscription.devices')}</div>
+                <div className="font-medium text-dark-100">{subscription.device_limit}</div>
+              </div>
+              <div>
+                <div className="mb-1 text-sm text-dark-500">{t('subscription.timeLeft')}</div>
+                <div className="font-medium text-dark-100">
+                  {subscription.days_left > 0
+                    ? t('subscription.days', { count: subscription.days_left })
+                    : `${t('subscription.hours', { count: subscription.hours_left })} ${t('subscription.minutes', { count: subscription.minutes_left })}`}
+                </div>
               </div>
             </div>
-          )}
 
-          <div
-            className={`mt-6 grid gap-3 ${subscription.subscription_url ? 'grid-cols-2' : 'grid-cols-1'}`}
-          >
-            <Link to="/subscription" className="btn-primary py-2.5 text-center text-sm">
-              {t('dashboard.viewSubscription')}
-            </Link>
-            {subscription.subscription_url && (
-              <button
-                onClick={() => setShowConnectionModal(true)}
-                className="btn-secondary py-2.5 text-sm"
-                data-onboarding="connect-devices"
-              >
-                {t('subscription.getConfig')}
-              </button>
+            {/* Traffic Progress */}
+            {subscription.traffic_limit_gb > 0 && (
+              <div className="mt-6">
+                <div className="mb-2 flex justify-between text-sm">
+                  <span className="text-dark-400">{t('subscription.trafficUsed')}</span>
+                  <span className="text-dark-300">
+                    {(
+                      trafficData?.traffic_used_percent ?? subscription.traffic_used_percent
+                    ).toFixed(1)}
+                    %
+                  </span>
+                </div>
+                <div className="progress-bar">
+                  <div
+                    className={`progress-fill ${getTrafficColor(trafficData?.traffic_used_percent ?? subscription.traffic_used_percent)}`}
+                    style={{
+                      width: `${Math.min(trafficData?.traffic_used_percent ?? subscription.traffic_used_percent, 100)}%`,
+                    }}
+                  />
+                </div>
+              </div>
             )}
-          </div>
-        </div>
+
+            <div
+              className={`mt-6 grid gap-3 ${subscription.subscription_url ? 'grid-cols-2' : 'grid-cols-1'}`}
+            >
+              <Button
+                asChild
+                variant="primary"
+                size="lg"
+                fullWidth
+                className="text-center text-xs sm:text-sm"
+              >
+                <Link to="/subscription">{t('dashboard.viewSubscription')}</Link>
+              </Button>
+              {subscription.subscription_url && (
+                <Button
+                  variant="secondary"
+                  size="lg"
+                  fullWidth
+                  className="text-center text-xs sm:text-sm"
+                  onClick={() => setShowConnectionModal(true)}
+                  data-onboarding="connect-devices"
+                >
+                  {t('subscription.getConfig')}
+                </Button>
+              )}
+            </div>
+          </Card>
+        </motion.div>
       ) : null}
 
       {/* Stats Grid */}
-      <div className="bento-grid">
+      <motion.div variants={staggerItem} className="grid grid-cols-2 gap-3 lg:grid-cols-4 lg:gap-4">
         {/* Balance */}
-        <Link to="/balance" className="bento-card-hover group" data-onboarding="balance">
-          <div className="mb-3 flex items-center justify-between">
-            <span className="text-sm text-dark-400">{t('balance.currentBalance')}</span>
-            <span className="text-dark-600 transition-colors group-hover:text-accent-400">
-              <ArrowRightIcon />
-            </span>
-          </div>
-          <div className="stat-value text-accent-400">
-            {formatAmount(balanceData?.balance_rubles || 0)}
-            <span className="ml-1 text-lg text-dark-400">{currencySymbol}</span>
-          </div>
-        </Link>
+        <Card interactive glow asChild>
+          <Link to="/balance" data-onboarding="balance">
+            <div className="mb-3 flex items-center justify-between">
+              <span className="text-sm text-dark-400">{t('balance.currentBalance')}</span>
+              <ArrowRightIcon className="h-4 w-4 text-dark-600 transition-colors group-hover:text-accent-400" />
+            </div>
+            <div className="stat-value text-accent-400">
+              {formatAmount(balanceData?.balance_rubles || 0)}
+              <span className="ml-1 text-lg text-dark-400">{currencySymbol}</span>
+            </div>
+          </Link>
+        </Card>
 
         {/* Subscription */}
-        <Link
-          to="/subscription"
-          className="bento-card-hover group"
-          data-onboarding="subscription-status"
-        >
-          <div className="mb-3 flex items-center justify-between">
-            <span className="text-sm text-dark-400">{t('subscription.title')}</span>
-            <span className="text-dark-600 transition-colors group-hover:text-accent-400">
-              <ArrowRightIcon />
-            </span>
-          </div>
-          {subLoading ? (
-            <div className="skeleton h-8 w-24" />
-          ) : subscription ? (
-            <div className="stat-value">
-              {subscription.days_left > 0 ? (
-                <>
-                  {subscription.days_left}
-                  <span className="ml-1 text-lg text-dark-400">{t('subscription.days')}</span>
-                </>
-              ) : subscription.hours_left > 0 ? (
-                <>
-                  {subscription.hours_left}
-                  <span className="ml-1 text-lg text-dark-400">{t('subscription.hours')}</span>
-                </>
-              ) : subscription.minutes_left > 0 ? (
-                <>
-                  {subscription.minutes_left}
-                  <span className="ml-1 text-lg text-dark-400">{t('subscription.minutes')}</span>
-                </>
-              ) : (
-                <span className="text-error-400">{t('subscription.expired')}</span>
-              )}
+        <Card interactive glow asChild>
+          <Link to="/subscription" data-onboarding="subscription-status">
+            <div className="mb-3 flex items-center justify-between">
+              <span className="text-sm text-dark-400">{t('subscription.title')}</span>
+              <ArrowRightIcon className="h-4 w-4 text-dark-600 transition-colors group-hover:text-accent-400" />
             </div>
-          ) : (
-            <div className="stat-value text-error-400">{t('subscription.inactive')}</div>
-          )}
-        </Link>
+            {subLoading ? (
+              <div className="skeleton h-8 w-24" />
+            ) : subscription ? (
+              <div className="stat-value">
+                {subscription.days_left > 0 ? (
+                  <>
+                    {subscription.days_left}
+                    <span className="ml-1 text-lg text-dark-400">{t('subscription.days')}</span>
+                  </>
+                ) : subscription.hours_left > 0 ? (
+                  <>
+                    {subscription.hours_left}
+                    <span className="ml-1 text-lg text-dark-400">{t('subscription.hours')}</span>
+                  </>
+                ) : subscription.minutes_left > 0 ? (
+                  <>
+                    {subscription.minutes_left}
+                    <span className="ml-1 text-lg text-dark-400">{t('subscription.minutes')}</span>
+                  </>
+                ) : (
+                  <span className="text-error-400">{t('subscription.expired')}</span>
+                )}
+              </div>
+            ) : (
+              <div className="stat-value text-error-400">{t('subscription.inactive')}</div>
+            )}
+          </Link>
+        </Card>
 
         {/* Referrals */}
-        <Link to="/referral" className="bento-card-hover group">
-          <div className="mb-3 flex items-center justify-between">
-            <span className="text-sm text-dark-400">{t('referral.stats.totalReferrals')}</span>
-            <span className="text-dark-600 transition-colors group-hover:text-accent-400">
-              <ArrowRightIcon />
-            </span>
-          </div>
-          {refLoading ? (
-            <div className="skeleton h-8 w-16" />
-          ) : (
-            <div className="stat-value">{referralInfo?.total_referrals || 0}</div>
-          )}
-        </Link>
+        <Card interactive glow asChild>
+          <Link to="/referral">
+            <div className="mb-3 flex items-center justify-between">
+              <span className="text-sm text-dark-400">{t('referral.stats.totalReferrals')}</span>
+              <ArrowRightIcon className="h-4 w-4 text-dark-600 transition-colors group-hover:text-accent-400" />
+            </div>
+            {refLoading ? (
+              <div className="skeleton h-8 w-16" />
+            ) : (
+              <div className="stat-value">{referralInfo?.total_referrals || 0}</div>
+            )}
+          </Link>
+        </Card>
 
         {/* Earnings */}
-        <Link to="/referral" className="bento-card-hover group">
-          <div className="mb-3 flex items-center justify-between">
-            <span className="text-sm text-dark-400">{t('referral.stats.totalEarnings')}</span>
-            <span className="text-dark-600 transition-colors group-hover:text-accent-400">
-              <ArrowRightIcon />
-            </span>
-          </div>
-          {refLoading ? (
-            <div className="skeleton h-8 w-20" />
-          ) : (
-            <div className="stat-value text-success-400">
-              {formatPositive(referralInfo?.total_earnings_rubles || 0)}
+        <Card interactive glow asChild>
+          <Link to="/referral">
+            <div className="mb-3 flex items-center justify-between">
+              <span className="text-sm text-dark-400">{t('referral.stats.totalEarnings')}</span>
+              <ArrowRightIcon className="h-4 w-4 text-dark-600 transition-colors group-hover:text-accent-400" />
             </div>
-          )}
-        </Link>
-      </div>
+            {refLoading ? (
+              <div className="skeleton h-8 w-20" />
+            ) : (
+              <div className="stat-value text-success-400">
+                {formatPositive(referralInfo?.total_earnings_rubles || 0)}
+              </div>
+            )}
+          </Link>
+        </Card>
+      </motion.div>
 
       {/* Trial Activation */}
       {hasNoSubscription && !trialLoading && trialInfo?.is_available && (
-        <div className="bento-card-glow border-accent-500/30 bg-gradient-to-br from-accent-500/5 to-transparent">
-          <div className="flex items-start gap-4">
-            <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-accent-500/20">
-              <SparklesIcon />
-            </div>
-            <div className="flex-1">
-              <h3 className="mb-2 text-lg font-semibold text-dark-100">
-                {trialInfo.requires_payment
-                  ? t('subscription.trial.titlePaid', 'Trial Subscription')
-                  : t('subscription.trial.title', 'Free Trial')}
-              </h3>
-              <p className="mb-4 text-sm text-dark-400">
-                {t('subscription.trial.description', 'Try our VPN service for free!')}
-              </p>
-
-              <div className="mb-6 flex gap-6">
-                <div className="text-center">
-                  <div className="text-2xl font-bold text-accent-400">
-                    {trialInfo.duration_days}
-                  </div>
-                  <div className="text-xs text-dark-500">{t('subscription.trial.days')}</div>
-                </div>
-                <div className="text-center">
-                  <div className="text-2xl font-bold text-accent-400">
-                    {trialInfo.traffic_limit_gb || '∞'}
-                  </div>
-                  <div className="text-xs text-dark-500">GB</div>
-                </div>
-                <div className="text-center">
-                  <div className="text-2xl font-bold text-accent-400">{trialInfo.device_limit}</div>
-                  <div className="text-xs text-dark-500">{t('subscription.trial.devices')}</div>
-                </div>
+        <motion.div variants={staggerItem}>
+          <Card
+            className="border-accent-500/30 bg-gradient-to-br from-accent-500/5 to-transparent"
+            glow
+          >
+            <div className="flex items-start gap-4">
+              <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-linear-lg bg-accent-500/20">
+                <SparklesIcon className="h-6 w-6 text-accent-400" />
               </div>
+              <div className="flex-1">
+                <h3 className="mb-2 text-lg font-semibold text-dark-100">
+                  {trialInfo.requires_payment
+                    ? t('subscription.trial.titlePaid', 'Trial Subscription')
+                    : t('subscription.trial.title', 'Free Trial')}
+                </h3>
+                <p className="mb-4 text-sm text-dark-400">
+                  {t('subscription.trial.description', 'Try our VPN service for free!')}
+                </p>
 
-              {trialInfo.requires_payment && trialInfo.price_rubles > 0 && (
-                <div className="mb-4 space-y-2 rounded-xl bg-dark-800/50 p-4">
-                  <div className="flex items-center justify-between">
-                    <span className="text-dark-400">
-                      {t('subscription.trial.price', 'Activation price')}:
-                    </span>
-                    <span className="text-lg font-semibold text-accent-400">
-                      {trialInfo.price_rubles.toFixed(2)} {currencySymbol}
-                    </span>
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <span className="text-dark-400">
-                      {t('balance.currentBalance', 'Your balance')}:
-                    </span>
-                    <span
-                      className={`text-lg font-semibold ${(balanceData?.balance_kopeks || 0) >= trialInfo.price_kopeks ? 'text-success-400' : 'text-warning-400'}`}
-                    >
-                      {formatAmount(balanceData?.balance_rubles || 0)} {currencySymbol}
-                    </span>
-                  </div>
-                  {(balanceData?.balance_kopeks || 0) < trialInfo.price_kopeks && (
-                    <div className="pt-1 text-xs text-warning-400">
-                      {t(
-                        'subscription.trial.insufficientBalance',
-                        'Top up your balance to activate',
-                      )}
+                <div className="mb-6 flex gap-6">
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-accent-400">
+                      {trialInfo.duration_days}
                     </div>
-                  )}
+                    <div className="text-xs text-dark-500">{t('subscription.trial.days')}</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-accent-400">
+                      {trialInfo.traffic_limit_gb || '∞'}
+                    </div>
+                    <div className="text-xs text-dark-500">GB</div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-accent-400">
+                      {trialInfo.device_limit}
+                    </div>
+                    <div className="text-xs text-dark-500">{t('subscription.trial.devices')}</div>
+                  </div>
                 </div>
-              )}
 
-              {trialError && (
-                <div className="mb-4 rounded-xl border border-error-500/30 bg-error-500/10 p-3 text-sm text-error-400">
-                  {trialError}
-                </div>
-              )}
+                {trialInfo.requires_payment && trialInfo.price_rubles > 0 && (
+                  <div className="mb-4 space-y-2 rounded-linear-lg bg-dark-800/50 p-4">
+                    <div className="flex items-center justify-between">
+                      <span className="text-dark-400">
+                        {t('subscription.trial.price', 'Activation price')}:
+                      </span>
+                      <span className="text-lg font-semibold text-accent-400">
+                        {trialInfo.price_rubles.toFixed(2)} {currencySymbol}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-dark-400">
+                        {t('balance.currentBalance', 'Your balance')}:
+                      </span>
+                      <span
+                        className={`text-lg font-semibold ${(balanceData?.balance_kopeks || 0) >= trialInfo.price_kopeks ? 'text-success-400' : 'text-warning-400'}`}
+                      >
+                        {formatAmount(balanceData?.balance_rubles || 0)} {currencySymbol}
+                      </span>
+                    </div>
+                    {(balanceData?.balance_kopeks || 0) < trialInfo.price_kopeks && (
+                      <div className="pt-1 text-xs text-warning-400">
+                        {t(
+                          'subscription.trial.insufficientBalance',
+                          'Top up your balance to activate',
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )}
 
-              {trialInfo.requires_payment && trialInfo.price_kopeks > 0 ? (
-                (balanceData?.balance_kopeks || 0) >= trialInfo.price_kopeks ? (
-                  <button
-                    onClick={() => activateTrialMutation.mutate()}
-                    disabled={activateTrialMutation.isPending}
-                    className="btn-primary w-full"
-                  >
-                    {activateTrialMutation.isPending
-                      ? t('common.loading', 'Loading...')
-                      : t('subscription.trial.payAndActivate', 'Pay from Balance & Activate')}
-                  </button>
+                {trialError && (
+                  <div className="mb-4 rounded-linear-lg border border-error-500/30 bg-error-500/10 p-3 text-sm text-error-400">
+                    {trialError}
+                  </div>
+                )}
+
+                {trialInfo.requires_payment && trialInfo.price_kopeks > 0 ? (
+                  (balanceData?.balance_kopeks || 0) >= trialInfo.price_kopeks ? (
+                    <Button
+                      variant="primary"
+                      fullWidth
+                      onClick={() => activateTrialMutation.mutate()}
+                      loading={activateTrialMutation.isPending}
+                    >
+                      {t('subscription.trial.payAndActivate', 'Pay from Balance & Activate')}
+                    </Button>
+                  ) : (
+                    <Button asChild variant="primary" fullWidth>
+                      <Link to="/balance">
+                        {t('subscription.trial.topUpToActivate', 'Top Up Balance')}
+                      </Link>
+                    </Button>
+                  )
                 ) : (
-                  <Link to="/balance" className="btn-primary block w-full text-center">
-                    {t('subscription.trial.topUpToActivate', 'Top Up Balance')}
-                  </Link>
-                )
-              ) : (
-                <button
-                  onClick={() => activateTrialMutation.mutate()}
-                  disabled={activateTrialMutation.isPending}
-                  className="btn-primary w-full"
-                >
-                  {activateTrialMutation.isPending
-                    ? t('common.loading', 'Loading...')
-                    : t('subscription.trial.activate', 'Activate Free Trial')}
-                </button>
-              )}
+                  <Button
+                    variant="primary"
+                    fullWidth
+                    onClick={() => activateTrialMutation.mutate()}
+                    loading={activateTrialMutation.isPending}
+                  >
+                    {t('subscription.trial.activate', 'Activate Free Trial')}
+                  </Button>
+                )}
+              </div>
             </div>
-          </div>
-        </div>
+          </Card>
+        </motion.div>
       )}
 
       {/* Promo Offers */}
-      <PromoOffersSection />
+      <motion.div variants={staggerItem}>
+        <PromoOffersSection />
+      </motion.div>
 
       {/* Fortune Wheel Banner */}
       {wheelConfig?.is_enabled && (
-        <Link to="/wheel" className="bento-card-hover group flex items-center justify-between">
-          <div className="flex items-center gap-4">
-            {/* Emoji */}
-            <span className="text-3xl">🎰</span>
-            <div className="min-w-0 flex-1">
-              <h3 className="text-base font-semibold text-dark-100">{t('wheel.banner.title')}</h3>
-              <p className="text-sm text-dark-400">{t('wheel.banner.description')}</p>
-            </div>
-          </div>
-          <div className="flex-shrink-0 text-dark-500 transition-all duration-300 group-hover:translate-x-1 group-hover:text-accent-400">
-            <ChevronRightIcon />
-          </div>
-        </Link>
+        <motion.div variants={staggerItem}>
+          <Card interactive asChild>
+            <Link to="/wheel" className="flex items-center justify-between">
+              <div className="flex items-center gap-4">
+                <span className="text-3xl">🎰</span>
+                <div className="min-w-0 flex-1">
+                  <h3 className="text-base font-semibold text-dark-100">
+                    {t('wheel.banner.title')}
+                  </h3>
+                  <p className="text-sm text-dark-400">{t('wheel.banner.description')}</p>
+                </div>
+              </div>
+              <ChevronRightIcon className="h-5 w-5 flex-shrink-0 text-dark-500 transition-all duration-300 group-hover:translate-x-1 group-hover:text-accent-400" />
+            </Link>
+          </Card>
+        </motion.div>
       )}
 
-      {/* Quick Actions */}
-      <div className="bento-card" data-onboarding="quick-actions">
-        <h3 className="mb-4 text-lg font-semibold text-dark-100">{t('dashboard.quickActions')}</h3>
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-          <Link to="/balance" className="btn-secondary justify-center py-2.5 text-center text-sm">
-            {t('dashboard.topUpBalance')}
-          </Link>
-          <Link
-            to="/subscription"
-            state={{ scrollToExtend: true }}
-            className="btn-secondary justify-center py-2.5 text-center text-sm"
-          >
-            {t('subscription.renew')}
-          </Link>
-          <Link to="/referral" className="btn-secondary justify-center py-2.5 text-center text-sm">
-            {t('dashboard.inviteFriends')}
-          </Link>
-          <Link
-            to="/support"
-            className="btn-secondary flex items-center justify-center gap-2 py-2.5 text-center text-sm"
-          >
-            <SupportLottieIcon />
-            <span>{t('dashboard.getSupport')}</span>
-          </Link>
-        </div>
-      </div>
-
       {/* Connection Modal */}
       {showConnectionModal && <ConnectionModal onClose={() => setShowConnectionModal(false)} />}
 
@@ -644,6 +640,6 @@ export default function Dashboard() {
           onSkip={handleOnboardingComplete}
         />
       )}
-    </div>
+    </motion.div>
   );
 }