merge: integrate trial subscription support from main

src/locales/en.json

@@ -306,6 +306,21 @@
       "insufficientBalance": "Top up your balance to activate",
       "unavailable": "Trial is not available"
     },
+    "trialBanner": {
+      "title": "Trial period active",
+      "description": "You have {{days}} days left in your trial. Subscribe to continue using the service.",
+      "upgrade": "Choose a plan"
+    },
+    "trialInfo": {
+      "title": "Trial Period",
+      "description": "You are using a trial version. Choose a plan below for full access.",
+      "remaining": "remaining",
+      "upgradeNow": "Choose a plan"
+    },
+    "trialUpgrade": {
+      "title": "Choose a plan to continue",
+      "description": "Your trial period is ending soon. Select a plan to continue using VPN without restrictions."
+    },
     "connection": {
       "title": "Connect VPN",
       "selectDevice": "Select your device",

src/locales/ru.json

@@ -328,6 +328,21 @@
       "insufficientBalance": "Пополните баланс для активации",
       "unavailable": "Пробный период недоступен"
     },
+    "trialBanner": {
+      "title": "Пробный период активен",
+      "description": "У вас осталось {{days}} дней пробного периода. Оформите подписку, чтобы продолжить пользоваться сервисом.",
+      "upgrade": "Выбрать тариф"
+    },
+    "trialInfo": {
+      "title": "Пробный период",
+      "description": "Вы используете пробную версию сервиса. Выберите тариф ниже для полного доступа.",
+      "remaining": "осталось",
+      "upgradeNow": "Выбрать тариф"
+    },
+    "trialUpgrade": {
+      "title": "Выберите тариф для продолжения",
+      "description": "Ваш пробный период скоро закончится. Выберите подходящий тариф, чтобы продолжить пользоваться VPN без ограничений."
+    },
     "connection": {
       "title": "Подключить VPN",
       "selectDevice": "Выберите устройство",

src/pages/Dashboard.tsx

@@ -2,8 +2,6 @@ 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';
@@ -14,25 +12,15 @@ 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 = ({ className = 'h-4 w-4' }: { className?: string }) => (
+const ArrowRightIcon = () => (
-  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+  <svg className="h-4 w-4" 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 = ({ className = 'h-5 w-5' }: { className?: string }) => (
+const SparklesIcon = () => (
-  <svg
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-    className={className}
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-    strokeWidth={1.5}
-  >
     <path
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -41,8 +29,8 @@ const SparklesIcon = ({ className = 'h-5 w-5' }: { className?: string }) => (
   </svg>
 );
 
-const ChevronRightIcon = ({ className = 'h-5 w-5' }: { className?: string }) => (
+const ChevronRightIcon = () => (
-  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+  <svg className="h-5 w-5" 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>
 );
@@ -57,6 +45,16 @@ 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();
@@ -246,6 +244,13 @@ 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]);
 
@@ -262,24 +267,18 @@ export default function Dashboard() {
   };
 
   return (
-    <motion.div
+    <div className="space-y-6">
-      className="space-y-6"
-      variants={staggerContainer}
-      initial="initial"
-      animate="animate"
-    >
       {/* Header */}
-      <motion.div variants={staggerItem} data-onboarding="welcome">
+      <div 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>
-      </motion.div>
+      </div>
 
       {/* Subscription Status - Main Card */}
       {subLoading ? (
-        <motion.div variants={staggerItem}>
+        <div className="bento-card">
-          <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" />
@@ -296,21 +295,65 @@ export default function Dashboard() {
             <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-xl" />
-              <div className="skeleton h-10 w-full rounded-linear" />
+            <div className="skeleton h-10 w-full rounded-xl" />
+          </div>
         </div>
-          </Card>
-        </motion.div>
       ) : subscription ? (
-        <motion.div variants={staggerItem}>
+        <div
-          <Card>
+          className={`bento-card ${subscription.is_trial ? 'border-warning-500/30 bg-gradient-to-br from-warning-500/5 to-transparent' : ''}`}
+        >
           <div className="mb-6 flex items-center justify-between">
+            <div>
               <h2 className="text-lg font-semibold text-dark-100">{t('subscription.status')}</h2>
-              <span className={subscription.is_active ? 'badge-success' : 'badge-error'}>
+              {subscription.tariff_name && (
-                {subscription.is_active ? t('subscription.active') : t('subscription.expired')}
+                <div className="mt-1 text-sm text-accent-400">{subscription.tariff_name}</div>
+              )}
+            </div>
+            <span
+              className={
+                subscription.is_trial
+                  ? 'badge-warning'
+                  : subscription.is_active
+                    ? 'badge-success'
+                    : 'badge-error'
+              }
+            >
+              {subscription.is_trial
+                ? t('subscription.trialStatus')
+                : subscription.is_active
+                  ? t('subscription.active')
+                  : t('subscription.expired')}
             </span>
           </div>
 
+          {/* Trial Info Banner */}
+          {subscription.is_trial && subscription.is_active && (
+            <div className="mb-6 rounded-xl border border-warning-500/30 bg-warning-500/10 p-4">
+              <div className="flex items-start gap-3">
+                <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-warning-500/20 text-xl">
+                  <SparklesIcon />
+                </div>
+                <div className="flex-1">
+                  <div className="font-medium text-warning-300">
+                    {t('subscription.trialBanner.title')}
+                  </div>
+                  <div className="mt-1 text-sm text-dark-400">
+                    {t('subscription.trialBanner.description', { days: subscription.days_left })}
+                  </div>
+                  <Link
+                    to="/subscription"
+                    state={{ scrollToExtend: true }}
+                    className="mt-3 inline-flex items-center gap-1.5 text-sm font-medium text-warning-400 transition-colors hover:text-warning-300"
+                  >
+                    {t('subscription.trialBanner.upgrade')}
+                    <ArrowRightIcon />
+                  </Link>
+                </div>
+              </div>
+            </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>
@@ -326,9 +369,7 @@ export default function Dashboard() {
                   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 > 0 ? `${trafficRefreshCooldown}s` : t('common.refresh')
-                        ? `${trafficRefreshCooldown}s`
-                        : t('common.refresh')
                   }
                 >
                   <RefreshIcon
@@ -361,9 +402,9 @@ export default function Dashboard() {
               <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(
-                      trafficData?.traffic_used_percent ?? subscription.traffic_used_percent
+                    1,
-                    ).toFixed(1)}
+                  )}
                   %
                 </span>
               </div>
@@ -381,54 +422,49 @@ export default function Dashboard() {
           <div
             className={`mt-6 grid gap-3 ${subscription.subscription_url ? 'grid-cols-2' : 'grid-cols-1'}`}
           >
-              <Button
+            <Link to="/subscription" className="btn-primary py-2.5 text-center text-sm">
-                asChild
+              {t('dashboard.viewSubscription')}
-                variant="primary"
+            </Link>
-                size="lg"
-                fullWidth
-                className="text-center text-xs sm:text-sm"
-              >
-                <Link to="/subscription">{t('dashboard.viewSubscription')}</Link>
-              </Button>
             {subscription.subscription_url && (
-                <Button
+              <button
-                  variant="secondary"
-                  size="lg"
-                  fullWidth
-                  className="text-center text-xs sm:text-sm"
                 onClick={() => setShowConnectionModal(true)}
+                className="btn-secondary py-2.5 text-sm"
                 data-onboarding="connect-devices"
               >
                 {t('subscription.getConfig')}
-                </Button>
+              </button>
             )}
           </div>
-          </Card>
+        </div>
-        </motion.div>
       ) : null}
 
       {/* Stats Grid */}
-      <motion.div variants={staggerItem} className="grid grid-cols-2 gap-3 lg:grid-cols-4 lg:gap-4">
+      <div className="bento-grid">
         {/* Balance */}
-        <Card interactive glow asChild>
+        <Link to="/balance" className="bento-card-hover group" data-onboarding="balance">
-          <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" />
+            <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>
 
         {/* Subscription */}
-        <Card interactive glow asChild>
+        <Link
-          <Link to="/subscription" data-onboarding="subscription-status">
+          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>
-              <ArrowRightIcon className="h-4 w-4 text-dark-600 transition-colors group-hover:text-accent-400" />
+            <span className="text-dark-600 transition-colors group-hover:text-accent-400">
+              <ArrowRightIcon />
+            </span>
           </div>
           {subLoading ? (
             <div className="skeleton h-8 w-24" />
@@ -457,14 +493,14 @@ export default function Dashboard() {
             <div className="stat-value text-error-400">{t('subscription.inactive')}</div>
           )}
         </Link>
-        </Card>
 
         {/* Referrals */}
-        <Card interactive glow asChild>
+        <Link to="/referral" className="bento-card-hover group">
-          <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" />
+            <span className="text-dark-600 transition-colors group-hover:text-accent-400">
+              <ArrowRightIcon />
+            </span>
           </div>
           {refLoading ? (
             <div className="skeleton h-8 w-16" />
@@ -472,14 +508,14 @@ export default function Dashboard() {
             <div className="stat-value">{referralInfo?.total_referrals || 0}</div>
           )}
         </Link>
-        </Card>
 
         {/* Earnings */}
-        <Card interactive glow asChild>
+        <Link to="/referral" className="bento-card-hover group">
-          <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" />
+            <span className="text-dark-600 transition-colors group-hover:text-accent-400">
+              <ArrowRightIcon />
+            </span>
           </div>
           {refLoading ? (
             <div className="skeleton h-8 w-20" />
@@ -489,19 +525,14 @@ export default function Dashboard() {
             </div>
           )}
         </Link>
-        </Card>
+      </div>
-      </motion.div>
 
       {/* Trial Activation */}
       {hasNoSubscription && !trialLoading && trialInfo?.is_available && (
-        <motion.div variants={staggerItem}>
+        <div className="bento-card-glow border-accent-500/30 bg-gradient-to-br from-accent-500/5 to-transparent">
-          <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">
+            <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-accent-500/20">
-                <SparklesIcon className="h-6 w-6 text-accent-400" />
+              <SparklesIcon />
             </div>
             <div className="flex-1">
               <h3 className="mb-2 text-lg font-semibold text-dark-100">
@@ -527,15 +558,13 @@ export default function Dashboard() {
                   <div className="text-xs text-dark-500">GB</div>
                 </div>
                 <div className="text-center">
-                    <div className="text-2xl font-bold text-accent-400">
+                  <div className="text-2xl font-bold text-accent-400">{trialInfo.device_limit}</div>
-                      {trialInfo.device_limit}
-                    </div>
                   <div className="text-xs text-dark-500">{t('subscription.trial.devices')}</div>
                 </div>
               </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="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')}:
@@ -566,69 +595,90 @@ export default function Dashboard() {
               )}
 
               {trialError && (
-                  <div className="mb-4 rounded-linear-lg border border-error-500/30 bg-error-500/10 p-3 text-sm text-error-400">
+                <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_kopeks > 0 ? (
                 (balanceData?.balance_kopeks || 0) >= trialInfo.price_kopeks ? (
-                    <Button
+                  <button
-                      variant="primary"
-                      fullWidth
                     onClick={() => activateTrialMutation.mutate()}
-                      loading={activateTrialMutation.isPending}
+                    disabled={activateTrialMutation.isPending}
+                    className="btn-primary w-full"
                   >
-                      {t('subscription.trial.payAndActivate', 'Pay from Balance & Activate')}
+                    {activateTrialMutation.isPending
-                    </Button>
+                      ? t('common.loading', 'Loading...')
+                      : t('subscription.trial.payAndActivate', 'Pay from Balance & Activate')}
+                  </button>
                 ) : (
-                    <Button asChild variant="primary" fullWidth>
+                  <Link to="/balance" className="btn-primary block w-full text-center">
-                      <Link to="/balance">
                     {t('subscription.trial.topUpToActivate', 'Top Up Balance')}
                   </Link>
-                    </Button>
                 )
               ) : (
-                  <Button
+                <button
-                    variant="primary"
-                    fullWidth
                   onClick={() => activateTrialMutation.mutate()}
-                    loading={activateTrialMutation.isPending}
+                  disabled={activateTrialMutation.isPending}
+                  className="btn-primary w-full"
                 >
-                    {t('subscription.trial.activate', 'Activate Free Trial')}
+                  {activateTrialMutation.isPending
-                  </Button>
+                    ? t('common.loading', 'Loading...')
+                    : t('subscription.trial.activate', 'Activate Free Trial')}
+                </button>
               )}
             </div>
           </div>
-          </Card>
+        </div>
-        </motion.div>
       )}
 
       {/* Promo Offers */}
-      <motion.div variants={staggerItem}>
       <PromoOffersSection />
-      </motion.div>
 
       {/* Fortune Wheel Banner */}
       {wheelConfig?.is_enabled && (
-        <motion.div variants={staggerItem}>
+        <Link to="/wheel" className="bento-card-hover group flex items-center justify-between">
-          <Card interactive asChild>
-            <Link to="/wheel" className="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">
+              <h3 className="text-base font-semibold text-dark-100">{t('wheel.banner.title')}</h3>
-                    {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" />
+          <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>
-          </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)} />}
 
@@ -640,6 +690,6 @@ export default function Dashboard() {
           onSkip={handleOnboardingComplete}
         />
       )}
-    </motion.div>
+    </div>
   );
 }

src/pages/Subscription.tsx

@@ -3,7 +3,6 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { AxiosError } from 'axios';
-import { motion } from 'framer-motion';
 import { subscriptionApi } from '../api/subscription';
 import { promoApi } from '../api/promo';
 import type {
@@ -18,8 +17,6 @@ import InsufficientBalancePrompt from '../components/InsufficientBalancePrompt';
 import { useCurrency } from '../hooks/useCurrency';
 import { useCloseOnSuccessNotification } from '../store/successNotification';
 import i18n from '../i18n';
-import { Card } from '@/components/data-display/Card';
-import { staggerContainer, staggerItem } from '@/components/motion/transitions';
 
 // Helper to extract error message from axios/api errors
 const getErrorMessage = (error: unknown): string => {
@@ -599,20 +596,14 @@ export default function Subscription() {
   }
 
   return (
-    <motion.div
+    <div className="space-y-6">
-      className="space-y-6"
-      variants={staggerContainer}
-      initial="initial"
-      animate="animate"
-    >
-      <motion.div variants={staggerItem}>
       <h1 className="text-2xl font-bold text-dark-50 sm:text-3xl">{t('subscription.title')}</h1>
-      </motion.div>
 
       {/* Current Subscription */}
       {subscription ? (
-        <motion.div variants={staggerItem}>
+        <div
-          <Card>
+          className={`bento-card ${subscription.is_trial ? 'border-warning-500/30 bg-gradient-to-br from-warning-500/5 to-transparent' : ''}`}
+        >
           <div className="mb-6 flex items-center justify-between">
             <div>
               <h2 className="text-lg font-semibold text-dark-100">
@@ -639,6 +630,57 @@ export default function Subscription() {
             </span>
           </div>
 
+          {/* Trial Period Info Banner */}
+          {subscription.is_trial && subscription.is_active && (
+            <div className="mb-6 rounded-xl border border-warning-500/30 bg-warning-500/10 p-4">
+              <div className="flex items-start gap-3">
+                <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-warning-500/20 text-lg">
+                  <svg
+                    className="h-5 w-5 text-warning-400"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={1.5}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                </div>
+                <div className="flex-1">
+                  <div className="font-medium text-warning-300">
+                    {t('subscription.trialInfo.title')}
+                  </div>
+                  <div className="mt-1 text-sm text-dark-400">
+                    {t('subscription.trialInfo.description')}
+                  </div>
+                  <div className="mt-3 flex flex-wrap gap-4 text-sm">
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-warning-400">
+                        {subscription.days_left > 0
+                          ? t('subscription.days', { count: subscription.days_left })
+                          : `${subscription.hours_left}${t('subscription.hours')} ${subscription.minutes_left}${t('subscription.minutes')}`}
+                      </span>
+                      <span className="text-dark-500">{t('subscription.trialInfo.remaining')}</span>
+                    </div>
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-warning-400">
+                        {subscription.traffic_limit_gb || '∞'} GB
+                      </span>
+                      <span className="text-dark-500">{t('subscription.traffic')}</span>
+                    </div>
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-warning-400">{subscription.device_limit}</span>
+                      <span className="text-dark-500">{t('subscription.devices')}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
           {/* Connection Data - Top Priority */}
           {subscription.subscription_url && (
             <div className="mb-6 rounded-xl border border-accent-500/30 bg-accent-500/10 p-4">
@@ -714,9 +756,7 @@ export default function Subscription() {
                   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 > 0 ? `${trafficRefreshCooldown}s` : t('common.refresh')
-                        ? `${trafficRefreshCooldown}s`
-                        : t('common.refresh')
                   }
                 >
                   <svg
@@ -741,9 +781,7 @@ export default function Subscription() {
             </div>
             <div>
               <div className="mb-1 text-sm text-dark-500">{t('subscription.devices')}</div>
-                <div className="text-xl font-semibold text-dark-100">
+              <div className="text-xl font-semibold text-dark-100">{subscription.device_limit}</div>
-                  {subscription.device_limit}
-                </div>
             </div>
           </div>
 
@@ -773,9 +811,9 @@ export default function Subscription() {
               <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(
-                      trafficData?.traffic_used_percent ?? subscription.traffic_used_percent
+                    1,
-                    ).toFixed(1)}
+                  )}
                   %
                 </span>
               </div>
@@ -793,9 +831,7 @@ export default function Subscription() {
           {/* Purchased Traffic Packages */}
           {subscription.traffic_purchases && subscription.traffic_purchases.length > 0 && (
             <div className="mb-6">
-                <div className="mb-3 text-sm text-dark-500">
+              <div className="mb-3 text-sm text-dark-500">{t('subscription.purchasedTraffic')}</div>
-                  {t('subscription.purchasedTraffic')}
-                </div>
               <div className="space-y-3">
                 {subscription.traffic_purchases.map((purchase) => (
                   <div
@@ -878,9 +914,7 @@ export default function Subscription() {
               <div>
                 <div className="font-medium text-dark-100">{t('subscription.autoRenewal')}</div>
                 <div className="text-sm text-dark-500">
-                    {t('subscription.daysBeforeExpiry', {
+                  {t('subscription.daysBeforeExpiry', { count: subscription.autopay_days_before })}
-                      count: subscription.autopay_days_before,
-                    })}
                 </div>
               </div>
               <button
@@ -898,11 +932,9 @@ export default function Subscription() {
               </button>
             </div>
           )}
-          </Card>
+        </div>
-        </motion.div>
       ) : (
-        <motion.div variants={staggerItem}>
+        <div className="card py-12 text-center">
-          <Card className="py-12 text-center">
           <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-dark-800">
             <svg
               className="h-8 w-8 text-dark-500"
@@ -919,13 +951,12 @@ export default function Subscription() {
             </svg>
           </div>
           <div className="mb-4 text-dark-400">{t('subscription.noSubscription')}</div>
-          </Card>
+        </div>
-        </motion.div>
       )}
 
       {/* Daily Subscription Pause */}
       {subscription && subscription.is_daily && !subscription.is_trial && (
-        <Card>
+        <div className="bento-card">
           <div className="flex items-center justify-between">
             <div>
               <h2 className="text-lg font-semibold text-dark-100">
@@ -1043,12 +1074,12 @@ export default function Subscription() {
               );
             })()
           )}
-        </Card>
+        </div>
       )}
 
       {/* Additional Options (Buy Devices) */}
       {subscription && subscription.is_active && !subscription.is_trial && (
-        <Card>
+        <div className="bento-card">
           <h2 className="mb-4 text-lg font-semibold text-dark-100">
             {t('subscription.additionalOptions.title')}
           </h2>
@@ -1253,9 +1284,7 @@ export default function Subscription() {
 
                 {deviceReductionInfo?.available === false ? (
                   <div className="py-4 text-center text-sm text-dark-400">
-                    {deviceReductionInfo.reason?.includes('minimum device limit')
+                    {deviceReductionInfo.reason ||
-                      ? t('subscription.additionalOptions.alreadyAtMinDeviceLimit')
-                      : deviceReductionInfo.reason ||
                       t('subscription.additionalOptions.reduceUnavailable')}
                   </div>
                 ) : deviceReductionInfo ? (
@@ -1788,12 +1817,12 @@ export default function Subscription() {
               )}
             </div>
           )}
-        </Card>
+        </div>
       )}
 
       {/* My Devices Section */}
       {subscription && (
-        <Card>
+        <div className="bento-card">
           <div className="mb-4 flex items-center justify-between">
             <h2 className="text-lg font-semibold text-dark-100">{t('subscription.myDevices')}</h2>
             {devicesData && devicesData.devices.length > 0 && (
@@ -1879,12 +1908,12 @@ export default function Subscription() {
           ) : (
             <div className="py-8 text-center text-dark-400">{t('subscription.noDevices')}</div>
           )}
-        </Card>
+        </div>
       )}
 
       {/* Tariffs Section - Combined Purchase/Extend/Switch like MiniApp */}
       {isTariffsMode && tariffs.length > 0 && (
-        <Card ref={tariffsCardRef}>
+        <div ref={tariffsCardRef} className="bento-card">
           <div className="mb-4 flex items-center justify-between">
             <h2 className="text-lg font-semibold text-dark-100">
               {subscription?.is_daily && !subscription?.is_trial
@@ -1895,17 +1924,48 @@ export default function Subscription() {
             </h2>
           </div>
 
+          {/* Trial upgrade prompt */}
+          {subscription?.is_trial && (
+            <div className="mb-6 rounded-xl border border-warning-500/30 bg-gradient-to-r from-warning-500/10 to-accent-500/10 p-4">
+              <div className="flex items-start gap-3">
+                <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-warning-500/20">
+                  <svg
+                    className="h-5 w-5 text-warning-400"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={1.5}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <div className="font-medium text-warning-300">
+                    {t('subscription.trialUpgrade.title')}
+                  </div>
+                  <div className="mt-1 text-sm text-dark-400">
+                    {t('subscription.trialUpgrade.description')}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
           {/* Legacy subscription notice - if user has subscription without tariff */}
           {subscription && !subscription.is_trial && !subscription.tariff_id && (
             <div className="mb-6 rounded-xl border border-accent-500/30 bg-accent-500/10 p-4">
               <div className="mb-2 font-medium text-accent-400">
-                📦 {t('subscription.legacy.selectTariffTitle')}
+                {t('subscription.legacy.selectTariffTitle')}
               </div>
               <div className="text-sm text-dark-300">
                 {t('subscription.legacy.selectTariffDescription')}
               </div>
               <div className="mt-2 text-xs text-dark-500">
-                ⚠️ {t('subscription.legacy.currentSubContinues')}
+                {t('subscription.legacy.currentSubContinues')}
               </div>
             </div>
           )}
@@ -2094,20 +2154,64 @@ export default function Subscription() {
                             </span>
                           )}
                         </div>
-                        <div className="flex flex-wrap gap-3 text-sm text-dark-300">
+                        <div className="flex flex-wrap gap-4 text-sm">
-                          <span className="flex items-center gap-1">
+                          {/* Traffic */}
-                            <span className="text-accent-400">{tariff.traffic_limit_label}</span>
+                          <div className="flex items-center gap-1.5">
+                            <svg
+                              className="h-4 w-4 text-accent-400"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor"
+                              strokeWidth={1.5}
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+                              />
+                            </svg>
+                            <span className="font-medium text-dark-200">
+                              {tariff.traffic_limit_label}
                             </span>
-                          <span className="flex items-center gap-1">
+                          </div>
-                            <span className="text-dark-400">
+                          {/* Devices */}
+                          <div className="flex items-center gap-1.5">
+                            <svg
+                              className="h-4 w-4 text-dark-400"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor"
+                              strokeWidth={1.5}
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
+                              />
+                            </svg>
+                            <span className="text-dark-300">
                               {t('subscription.devices', { count: tariff.device_limit })}
                             </span>
-                          </span>
+                          </div>
-                          <span className="flex items-center gap-1">
+                          {/* Servers */}
-                            <span className="text-dark-400">
+                          <div className="flex items-center gap-1.5">
+                            <svg
+                              className="h-4 w-4 text-dark-400"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor"
+                              strokeWidth={1.5}
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
+                              />
+                            </svg>
+                            <span className="text-dark-300">
                               {t('subscription.servers', { count: tariff.servers_count })}
                             </span>
-                          </span>
+                          </div>
                         </div>
                         {/* Price info - daily or period-based */}
                         <div className="mt-3 border-t border-dark-700/50 pt-3 text-sm text-dark-400">
@@ -2847,12 +2951,12 @@ export default function Subscription() {
               </div>
             )
           )}
-        </Card>
+        </div>
       )}
 
       {/* Purchase/Extend Section - Classic Mode */}
       {classicOptions && classicOptions.periods.length > 0 && (
-        <Card ref={tariffsCardRef}>
+        <div ref={tariffsCardRef} className="bento-card">
           <div className="mb-4 flex items-center justify-between">
             <h2 className="text-lg font-semibold text-dark-100">
               {subscription && !subscription.is_trial
@@ -3255,11 +3359,11 @@ export default function Subscription() {
               )}
             </div>
           )}
-        </Card>
+        </div>
       )}
 
       {/* Connection Modal */}
       {showConnectionModal && <ConnectionModal onClose={() => setShowConnectionModal(false)} />}
-    </motion.div>
+    </div>
   );
 }