feat: port purchase-subscription page from tauri to admin dashboard

Rebuild /admin/subscription to pixel-match clinic-pro-tauri's
setting/purchase-subscription while keeping the real subscription/payment API:

- New PurchaseSubscriptionSidebar (orange-accent settings sidebar, routes preserved)
- New subscriptionIcons (SVGs copied verbatim from tauri source)
- Rewrite SubscriptionPage: 522px plan cards (gradient blur, popular badge,
  secretaries pill, period toggle, dashed trial box), 365x104 current-plan card;
  wired to /subscription/plans, /subscription/my, /subscription/trial and the
  existing payment-gateway modal (no backend change)
- Expand tests: healthy/expiring/expired/no-sub, empty-plans, period toggle, buy modal

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

assets/admin/pages/SubscriptionPage.tsx

@@ -1,10 +1,7 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { Link } from 'react-router-dom';
-import {
-  CheckIcon, XMarkIcon, SparklesIcon, UserIcon,
-  CreditCardIcon, ClockIcon, ArrowPathIcon, GiftIcon,
-} from '@heroicons/react/24/outline';
+import { CreditCardIcon } from '@heroicons/react/24/outline';
+import { CheckCircleIcon } from '@heroicons/react/24/solid';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
@@ -12,16 +9,27 @@ import type { SubscriptionPlan, MySubscriptionData, SubscriptionPeriod } from '.
 import { usePaymentConfig } from '../hooks/usePaymentConfig';
 import { formatRial, formatNumber } from '../lib/utils';
 import Modal from '../components/ui/Modal';
-import SettingsLayout from '../components/layout/SettingsLayout';
+import PurchaseSubscriptionSidebar from '../components/layout/PurchaseSubscriptionSidebar';
+import {
+  SparkleIcon, PlanCardPerson, CloseCircleFilled, GiftIcon, InfoCircleRedFilled,
+} from './subscriptionIcons';
 
 // ── Constants ─────────────────────────────────────────────────────────────
 
+/** Shared feature labels (also consumed by PaymentSuccessPage). */
 export const PLAN_FEATURE_LABELS: Record<string, string> = {
   patient_records: 'پرونده بیمار',
   services:        'مدیریت سرویس‌ها',
   sms_panel:       'پنل پیامک',
 };
 
+/** Feature labels used on the plan cards — wording copied from clinic-pro-tauri. */
+const CARD_FEATURE_LABELS: Record<string, string> = {
+  patient_records: 'مدیریت پرونده بیمار',
+  services:        'مدیریت سرویس ها',
+  sms_panel:       'پنل پیامک',
+};
+
 /** The plan highlighted as "most popular" in the UI (no backend flag exists). */
 const POPULAR_PLAN_NAME = 'basic';
 
@@ -31,6 +39,13 @@ const PLAN_META: Record<string, { label: string; desc: string; tint: string }> =
   professional: { label: 'حرفه‌ای', desc: 'مناسب برای کلینیک‌های بزرگ',        tint: 'var(--violet-bg)' },
 };
 
+/** Gradient blur behind each plan card — matches the tauri source per plan tier. */
+const PLAN_GRADIENT: Record<string, string> = {
+  free:         'radial-gradient(circle, #f5ecfd 0%, #e9eaf9 70%, transparent 100%)',
+  basic:        'radial-gradient(circle, #e2eee5 0%, #f5edfd 60%, transparent 100%)',
+  professional: 'linear-gradient(180deg, #f9eedd 0%, #e8e9fa 0%, rgba(255,255,255,0) 100%)',
+};
+
 export const planMetaOf = (name: string) => PLAN_META[name] ?? PLAN_META.free;
 
 // ── Main Page ─────────────────────────────────────────────────────────────
@@ -58,7 +73,7 @@ export default function SubscriptionPage() {
     }
   }, [gateways, selectedGateway]);
 
-  // Highest plan first so, under RTL, the top-tier plan sits on the right (Figma order).
+  // Highest plan first so, under RTL, the top-tier plan sits on the right (source order).
   const plans     = [...(plansData?.data ?? [])].sort((a, b) => b.level - a.level);
   const myRaw     = myData?.data;
   const my        = myRaw?.subscription ?? null;
@@ -88,47 +103,69 @@ export default function SubscriptionPage() {
     onError: (err: any) => toast.error(err.message),
   });
 
+  // Open the payment modal for the current plan's best-value paid period (renew).
+  const renewCurrentPlan = () => {
+    const current = plans.find((p) => p.name === my?.plan.name);
+    const paid = (current?.periods ?? []).filter((p) => !p.is_trial)
+      .sort((a, b) => a.duration_months - b.duration_months);
+    const period = paid[paid.length - 1];
+    if (period) setPurchaseTarget({ period, planName: current!.name });
+  };
+
   return (
-    <SettingsLayout active="subscription">
-      {/* ── Header ── */}
-      <div style={{ marginBottom: 20 }}>
-        <h1 className="section-title" style={{ marginBottom: 4 }}>انتخاب پلن اشتراک</h1>
-        <p style={{ color: 'var(--text-3)', fontSize: 14, margin: 0 }}>
-          پلن اشتراک مناسب خود را انتخاب نمایید:
-        </p>
+    <div className="fade-in" dir="rtl" style={{ maxWidth: 1180, margin: '0 auto' }}>
+      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'stretch', gap: 0 }} className="flex-col md:flex-row">
+        <PurchaseSubscriptionSidebar active="subscription" />
+
+        <div
+          style={{ flex: 1, background: 'var(--surface)', minWidth: 0 }}
+          className="px-4 py-4 md:px-8 md:py-6 md:mr-2 rounded-[var(--r-lg)]"
+        >
+          <div dir="ltr" style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 32, paddingTop: 8 }}>
+            {/* ── Header: current plan (left) + title (right) ── */}
+            <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
+              {!myLoading && <CurrentPlanCard my={my} onRenew={renewCurrentPlan} />}
+              <div>
+                <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--text)' }}>انتخاب پلن اشتراک</div>
+                <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-3)', marginTop: 4, textAlign: 'left' }}>
+                  پلن اشتراک مناسب خود را انتخاب نمایید:
+                </div>
+              </div>
+            </div>
+
+            {/* ── Plan cards ── */}
+            {plansLoading ? (
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, justifyContent: 'flex-end', width: '100%' }}>
+                {[1, 2, 3].map((i) => (
+                  <div key={i} className="skeleton" style={{ width: 300, height: 522, borderRadius: 10 }} />
+                ))}
+              </div>
+            ) : plans.length === 0 ? (
+              <div style={{ padding: '48px 0', textAlign: 'center', color: 'var(--text-3)', fontSize: 14 }}>
+                در حال حاضر پلنی برای نمایش وجود ندارد.
+              </div>
+            ) : (
+              <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: 16, justifyContent: 'flex-end', width: '100%' }}>
+                {plans.map((plan) => (
+                  <PlanCard
+                    key={plan.uuid}
+                    plan={plan}
+                    currentPlanName={my?.plan.name ?? 'free'}
+                    currentPlanLevel={my?.plan.level ?? 0}
+                    currentPlanActive={!!my && (my.days_remaining ?? 0) > 0}
+                    usedTrial={usedTrial}
+                    onPurchase={(period) => setPurchaseTarget({ period, planName: plan.name })}
+                    onTrial={() => trialMutation.mutate()}
+                    trialPending={trialMutation.isPending}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
       </div>
 
-      {/* ── وضعیت پلن فعلی ── */}
-      {!myLoading && <CurrentPlanBanner my={my} />}
-
-      {/* ── کارت‌های پلن ── */}
-      {plansLoading ? (
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 16 }}>
-          {[1, 2, 3].map((i) => (
-            <div key={i} className="card" style={{ height: 420 }}>
-              <div className="skeleton" style={{ height: '100%', borderRadius: 'var(--r)' }} />
-            </div>
-          ))}
-        </div>
-      ) : (
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 16 }}>
-          {plans.map((plan) => (
-            <PlanCard
-              key={plan.uuid}
-              plan={plan}
-              currentPlanName={my?.plan.name ?? 'free'}
-              currentPlanLevel={my?.plan.level ?? 0}
-              currentPlanActive={!!my && (my.days_remaining ?? 0) > 0}
-              usedTrial={usedTrial}
-              onPurchase={(period) => setPurchaseTarget({ period, planName: plan.name })}
-              onTrial={() => trialMutation.mutate()}
-              trialPending={trialMutation.isPending}
-            />
-          ))}
-        </div>
-      )}
-
-      {/* ── Modal پرداخت (انتخاب درگاه) ── */}
+      {/* ── Payment modal (gateway selection) ── */}
       <Modal
         open={!!purchaseTarget}
         onClose={() => { setPurchaseTarget(null); setSelectedGateway(gateways[0]?.name ?? ''); }}
@@ -147,7 +184,7 @@ export default function SubscriptionPage() {
                   {planMetaOf(purchaseTarget.planName).label} — {purchaseTarget.period.label}
                 </div>
                 <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 1 }}>
-                  {purchaseTarget.period.duration_months} ماه
+                  {formatNumber(purchaseTarget.period.duration_months)} ماه
                 </div>
               </div>
               <div style={{ textAlign: 'left' }}>
@@ -224,46 +261,66 @@ export default function SubscriptionPage() {
           </div>
         )}
       </Modal>
-    </SettingsLayout>
-  );
-}
-
-// ── Current plan banner ─────────────────────────────────────────────────────
-
-function CurrentPlanBanner({ my }: { my: MySubscriptionData['subscription'] }) {
-  if (!my) return null;
-  const meta     = planMetaOf(my.plan.name);
-  const daysLeft = my.days_remaining ?? 0;
-  const expiring = daysLeft > 0 && daysLeft <= 7;
-
-  return (
-    <div style={{
-      display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
-      background: 'var(--surface)', border: '1px solid var(--border)',
-      borderRadius: 'var(--r-lg)', padding: '14px 18px', marginBottom: 20,
-    }}>
-      <div style={{ flex: 1, minWidth: 180 }}>
-        <div style={{ fontSize: 13, color: 'var(--text-3)', marginBottom: 2 }}>
-          پلن فعلی شما: <b style={{ color: 'var(--text)' }}>{meta.label}</b>
-          {my.is_trial && <span className="badge amber" style={{ marginRight: 8, fontSize: 11 }}><span className="bdot" />تریال</span>}
-        </div>
-        {daysLeft > 0 ? (
-          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: expiring ? 'var(--danger)' : 'var(--success)', fontWeight: 600 }}>
-            <ClockIcon style={{ width: 14, flexShrink: 0 }} />
-            {formatNumber(daysLeft)} روز تا پایان اشتراک
-          </div>
-        ) : (
-          <div style={{ fontSize: 13, color: 'var(--text-3)' }}>اشتراک فعالی ندارید</div>
-        )}
-      </div>
-      <Link to="/admin/my-financial" className="btn ghost sm" style={{ flexShrink: 0 }}>
-        مشاهده فاکتور
-      </Link>
     </div>
   );
 }
 
-// ── PlanCard ──────────────────────────────────────────────────────────────
+// ── Current plan card (365×104, ported from tauri CurrentPlanCard.jsx) ───────
+
+function CurrentPlanCard({ my, onRenew }: { my: MySubscriptionData['subscription']; onRenew: () => void }) {
+  const daysLeft = my?.days_remaining ?? 0;
+  return (
+    <div
+      dir="ltr"
+      style={{
+        width: 365, maxWidth: '100%', minHeight: 104,
+        background: 'var(--surface-2)', border: '1px solid var(--border)',
+        borderRadius: 16, display: 'flex', flexDirection: 'column', justifyContent: 'center',
+        padding: '0 16px',
+      }}
+    >
+      {my ? (
+        <>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-2)' }}>پلن فعلی شما:</span>
+            <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--text)' }}>{planMetaOf(my.plan.name).label}</span>
+          </div>
+          {daysLeft < 3 && (
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 4 }}>
+              <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+                <InfoCircleRedFilled color="#d22d32" />
+                <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>
+                  {daysLeft <= 0 ? 'اشتراک شما به پایان رسیده است' : `${formatNumber(daysLeft)} روز تا پایان اشتراک`}
+                </span>
+              </div>
+              <button
+                onClick={onRenew}
+                className="btn ghost sm"
+                style={{ fontWeight: 600, color: 'var(--primary)', minWidth: 0, padding: '4px 12px' }}
+              >
+                تمدید اشتراک
+              </button>
+            </div>
+          )}
+        </>
+      ) : (
+        <>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-2)' }}>پلن فعلی شما:</span>
+            <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)' }}>اشتراک ندارید</span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', marginTop: 4 }}>
+            <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-3)' }}>
+              برای استفاده از امکانات یک پلن تهیه کنید
+            </span>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+// ── PlanCard (522px, ported from tauri PlanCard.jsx) ─────────────────────────
 
 function PlanCard({
   plan, currentPlanName, currentPlanLevel, currentPlanActive,
@@ -281,14 +338,16 @@ function PlanCard({
   const meta        = planMetaOf(plan.name);
   const isCurrent   = plan.name === currentPlanName;
   const isPopular   = plan.name === POPULAR_PLAN_NAME;
+  const isFree      = plan.level <= 0;
   const isDowngrade = currentPlanActive && (plan.level ?? 0) < currentPlanLevel;
+
   const paidPeriods = useMemo(
     () => [...plan.periods].filter((p) => !p.is_trial).sort((a, b) => a.duration_months - b.duration_months),
     [plan.periods],
   );
   const trialPeriod = plan.periods.find((p) => p.is_trial);
 
-  // Default to the longest (best-value) period, matching the Figma default.
+  // Default to the longest (best-value) period, matching the source default.
   const [selectedUuid, setSelectedUuid] = useState<string>('');
   useEffect(() => {
     if (paidPeriods.length > 0 && !paidPeriods.some((p) => p.uuid === selectedUuid)) {
@@ -297,158 +356,182 @@ function PlanCard({
   }, [paidPeriods, selectedUuid]);
   const selectedPeriod = paidPeriods.find((p) => p.uuid === selectedUuid) ?? paidPeriods[0];
 
-  const accent = isPopular ? 'var(--primary)' : 'var(--border-2)';
+  const isSelected = isPopular; // the source highlights the popular card with the indigo border
 
   return (
-    <div style={{
-      background: 'var(--surface)',
-      border: `${isPopular || isCurrent ? '2px' : '1.5px'} solid ${isPopular ? 'var(--primary)' : isCurrent ? 'var(--primary)' : 'var(--border)'}`,
-      borderRadius: 'var(--r-lg)',
-      display: 'flex', flexDirection: 'column',
-      position: 'relative', overflow: 'hidden',
-    }}>
-      {/* بج محبوب‌ترین */}
-      {isPopular && (
-        <span style={{
-          position: 'absolute', top: 14, left: 14, zIndex: 1,
-          background: 'var(--primary)', color: '#fff',
-          fontSize: 11, fontWeight: 700, padding: '4px 10px',
-          borderRadius: 999, display: 'inline-flex', alignItems: 'center', gap: 5,
-        }}>
-          <SparklesIcon style={{ width: 13, height: 13 }} />
-          محبوب‌ترین
-        </span>
-      )}
+    <div
+      data-testid={`plan-card-${plan.name}`}
+      style={{
+        width: 300, maxWidth: '100%', height: 522, borderRadius: 10,
+        border: isSelected ? '2px solid #494cb3' : '2px solid var(--border)',
+        background: 'var(--surface)', display: 'flex', flexDirection: 'column',
+        padding: 16, position: 'relative', overflow: 'hidden',
+      }}
+    >
+      {/* Gradient blur backdrop */}
+      <div style={{
+        position: 'absolute', top: -80, left: 0, width: 550, height: 160,
+        background: PLAN_GRADIENT[plan.name] ?? PLAN_GRADIENT.free,
+        opacity: 0.8, filter: 'blur(80px)', zIndex: 0, pointerEvents: 'none',
+      }} />
 
-      {/* سربرگ */}
-      <div style={{ padding: '20px 20px 16px', background: meta.tint }}>
-        <div style={{ fontWeight: 800, fontSize: 20, color: 'var(--text)', marginBottom: 4 }}>
-          پلن {meta.label}
-        </div>
-        <div style={{ fontSize: 13, color: 'var(--text-2)', marginBottom: 12 }}>{meta.desc}</div>
-        <div style={{
-          display: 'inline-flex', alignItems: 'center', gap: 5,
-          background: 'var(--surface)', border: '1px solid var(--border)',
-          borderRadius: 999, padding: '4px 12px', fontSize: 12.5,
-        }}>
-          <UserIcon style={{ width: 14, color: 'var(--text-3)' }} />
-          <span style={{ fontWeight: 700, color: 'var(--text)' }}>{formatNumber(plan.max_secretaries)}</span>
-          <span style={{ color: 'var(--text-3)' }}>منشی</span>
-        </div>
-      </div>
-
-      <div style={{ padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
-        {/* توگل دوره */}
-        {paidPeriods.length > 1 && (
-          <div role="tablist" aria-label="دوره اشتراک" style={{
-            display: 'grid', gridTemplateColumns: `repeat(${paidPeriods.length}, 1fr)`, gap: 4,
-            background: 'var(--surface-2)', border: '1px solid var(--border)',
-            borderRadius: 'var(--r-sm)', padding: 4,
+      <div style={{ position: 'relative', zIndex: 1 }}>
+        {/* Popular badge (top-right corner) */}
+        {isPopular && (
+          <div style={{
+            position: 'absolute', width: 'fit-content', height: 32, top: -18, right: -20,
+            background: '#3d4395', color: '#fff', padding: '0 16px', borderRadius: '0 10px 0 10px',
+            fontSize: 13, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 8, zIndex: 1,
           }}>
-            {paidPeriods.map((p) => {
-              const on = p.uuid === selectedPeriod?.uuid;
-              return (
-                <button
-                  key={p.uuid} role="tab" aria-selected={on}
-                  onClick={() => setSelectedUuid(p.uuid)}
-                  style={{
-                    padding: '7px 6px', borderRadius: 'var(--r-xs)', border: 'none', cursor: 'pointer',
-                    fontFamily: 'inherit', fontSize: 12.5, fontWeight: on ? 700 : 500, transition: '.14s',
-                    background: on ? 'var(--primary)' : 'transparent',
-                    color: on ? '#fff' : 'var(--text-2)',
-                  }}
-                >
-                  {p.label}
-                </button>
-              );
-            })}
+            محبوب‌ترین
+            <SparkleIcon size={15} color="#FDD835" />
           </div>
         )}
 
-        {/* قیمت */}
-        <div>
-          {selectedPeriod ? (
-            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
-              <span style={{ fontSize: 13, color: 'var(--text-3)' }}>قیمت:</span>
-              <span style={{ fontWeight: 800, fontSize: 20, color: 'var(--text)' }}>
-                {formatRial(selectedPeriod.price_rials)}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <div style={{ fontSize: 20, fontWeight: 800, color: 'var(--text)', textAlign: 'left' }}>
+            پلن {meta.label}
+          </div>
+          <div style={{ fontSize: 14, color: 'var(--text-2)', fontWeight: 500, textAlign: 'left', lineHeight: 1.6 }}>
+            {meta.desc}
+          </div>
+
+          {/* Secretaries pill */}
+          <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
+            <div style={{
+              minWidth: 86, height: 32, borderRadius: 29, background: 'var(--surface-3)',
+              color: 'var(--text)', display: 'flex', gap: 5, alignItems: 'center', justifyContent: 'center',
+              padding: '0 8px',
+            }}>
+              <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+                <span style={{ fontSize: 14 }}>منشی</span>
+                <span style={{ fontSize: 14, fontWeight: 500 }}>{formatNumber(plan.max_secretaries)}</span>
+              </div>
+              <PlanCardPerson size={18} />
+            </div>
+          </div>
+
+          {/* Period toggle */}
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', minHeight: 48 }}>
+            {paidPeriods.length > 0 && (
+              <div role="tablist" aria-label="دوره اشتراک" style={{
+                width: 263, maxWidth: '100%', height: 48, border: '1px solid var(--border)',
+                borderRadius: 8, background: 'var(--surface)', display: 'flex', alignItems: 'center', overflow: 'hidden',
+              }}>
+                {paidPeriods.map((p, idx) => {
+                  const on = p.uuid === selectedPeriod?.uuid;
+                  return (
+                    <React.Fragment key={p.uuid}>
+                      <button
+                        role="tab" aria-selected={on}
+                        onClick={() => setSelectedUuid(p.uuid)}
+                        style={{
+                          flex: 1, height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                          background: on ? 'var(--primary-soft)' : 'transparent', cursor: 'pointer',
+                          border: 'none', fontFamily: 'inherit',
+                          fontSize: 14, fontWeight: 500, color: on ? 'var(--primary)' : 'var(--text)',
+                        }}
+                      >
+                        {p.label}
+                      </button>
+                      {idx < paidPeriods.length - 1 && (
+                        <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--border)' }} />
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          {/* Price */}
+          <div style={{ minHeight: 22 }}>
+            {!isFree && selectedPeriod && (
+              <div style={{
+                marginBottom: 8, display: 'flex', alignItems: 'center', gap: 4,
+                justifyContent: 'flex-end', width: '100%',
+              }}>
+                <span style={{ fontSize: 14, color: 'var(--text)', fontWeight: 600, direction: 'ltr' }}>
+                  {formatRial(selectedPeriod.price_rials)}
+                </span>
+                <span style={{ fontSize: 14, color: 'var(--text)', fontWeight: 500 }}>: قیمت</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div style={{ borderTop: '1px solid var(--border)' }} />
+
+      {/* Features */}
+      <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+        {Object.entries(plan.features).map(([key, enabled]) => {
+          const label = CARD_FEATURE_LABELS[key] ?? PLAN_FEATURE_LABELS[key] ?? key;
+          return (
+            <div key={key} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', padding: '9.6px 0', gap: 8 }}>
+              <span style={{ fontSize: 14, color: enabled ? 'var(--text)' : 'var(--text-3)', fontWeight: 500, textAlign: 'left' }}>
+                {label}
+              </span>
+              <span style={{ position: 'relative', display: 'inline-flex', width: 22, height: 22 }}>
+                {enabled
+                  ? <CheckCircleIcon style={{ width: 22, height: 22, color: '#3c9a4f' }} />
+                  : <CloseCircleFilled size={22} color="#d7d7d7" />}
               </span>
             </div>
-          ) : (
-            <div style={{ fontWeight: 800, fontSize: 18, color: 'var(--success)' }}>رایگان</div>
-          )}
-        </div>
+          );
+        })}
+      </div>
 
-        {/* امکانات */}
-        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
-          {Object.entries(plan.features).map(([key, enabled]) => (
-            <li key={key} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13.5 }}>
-              <span style={{
-                width: 20, height: 20, borderRadius: '50%', flexShrink: 0,
-                display: 'grid', placeItems: 'center',
-                background: enabled ? 'var(--success-bg)' : 'var(--surface-3)',
-              }}>
-                {enabled
-                  ? <CheckIcon style={{ width: 12, color: 'var(--success)' }} />
-                  : <XMarkIcon style={{ width: 11, color: 'var(--text-3)' }} />}
-              </span>
-              <span style={{ color: enabled ? 'var(--text)' : 'var(--text-3)' }}>
-                {PLAN_FEATURE_LABELS[key] ?? key}
-              </span>
-            </li>
-          ))}
-        </ul>
-
-        {/* تریال */}
-        {trialPeriod && !usedTrial && plan.level > 0 && !isDowngrade && (
+      {/* Trial box (dashed) */}
+      {!isFree && trialPeriod && !usedTrial && !isDowngrade && (
+        <div style={{ position: 'relative', width: 268, maxWidth: '100%', height: 59, margin: '0 auto 16px' }}>
           <div style={{
-            padding: '10px 12px', borderRadius: 'var(--r-sm)',
-            background: 'var(--accent-bg)',
-            border: '1px dashed color-mix(in oklch, var(--accent) 45%, transparent)',
-            fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 8,
+            position: 'relative', zIndex: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+            height: '100%', padding: '0 16px',
           }}>
-            <GiftIcon style={{ width: 16, color: 'var(--accent)', flexShrink: 0 }} />
-            <span style={{ color: 'var(--text-2)' }}>
-              تریال <b>{formatNumber(trialPeriod.duration_months)} ماهه</b> رایگان
-            </span>
             <button
               onClick={onTrial} disabled={trialPending}
-              style={{
-                marginRight: 'auto', background: 'none', border: 'none', cursor: 'pointer',
-                color: 'var(--accent)', fontWeight: 700, fontSize: 12.5, fontFamily: 'inherit',
-              }}
+              style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontSize: 16, fontWeight: 500, color: '#5559ce' }}
             >
-              {trialPending
-                ? <ArrowPathIcon style={{ width: 14, animation: 'spin 1s linear infinite' }} />
-                : 'فعال سازی'}
+              {trialPending ? 'در حال فعال‌سازی...' : 'فعال سازی'}
             </button>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+              <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-2)' }}>
+                تریال {formatNumber(trialPeriod.duration_months)} ماهه رایگان
+              </span>
+              <GiftIcon />
+            </div>
           </div>
-        )}
-      </div>
+          <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }} viewBox="0 0 268 59" preserveAspectRatio="none">
+            <rect x="0.5" y="0.5" width="267" height="58" rx="6" fill="transparent" stroke="#636ed0" strokeWidth="1" strokeDasharray="6 4" />
+          </svg>
+        </div>
+      )}
 
-      {/* دکمه خرید */}
-      <div style={{ padding: '0 20px 20px' }}>
-        {isDowngrade ? (
-          <button className="btn" style={{ width: '100%', height: 44, opacity: 0.6, cursor: 'not-allowed' }} disabled>
-            تا پایان اشتراک فعلی قابل انتخاب نیست
-          </button>
-        ) : selectedPeriod ? (
-          <button
-            className={isPopular ? 'btn primary' : 'btn'}
-            style={{
-              width: '100%', height: 44, fontWeight: 700,
-              ...(isPopular ? {} : { border: '1.5px solid var(--primary)', color: 'var(--primary)', background: 'var(--surface)' }),
-            }}
-            onClick={() => onPurchase(selectedPeriod)}
-          >
-            {isCurrent ? 'تمدید اشتراک' : 'خرید اشتراک'}
-          </button>
-        ) : (
-          <button className="btn" style={{ width: '100%', height: 44, cursor: 'default' }} disabled>
-            {isCurrent ? 'پلن فعلی شما' : 'رایگان'}
-          </button>
-        )}
-      </div>
+      <div style={{ borderTop: '1px solid var(--border)', margin: '0 8px 16px' }} />
+
+      {/* Buy button */}
+      {isFree ? (
+        <button className="btn" style={{ marginTop: 'auto', width: '100%', height: 48, cursor: 'default' }} disabled>
+          {isCurrent ? 'پلن فعلی شما' : 'رایگان'}
+        </button>
+      ) : isDowngrade ? (
+        <button className="btn" style={{ marginTop: 'auto', width: '100%', height: 48, opacity: 0.6, cursor: 'not-allowed' }} disabled>
+          تا پایان اشتراک فعلی قابل انتخاب نیست
+        </button>
+      ) : (
+        <button
+          onClick={() => selectedPeriod && onPurchase(selectedPeriod)}
+          disabled={!selectedPeriod}
+          style={{
+            marginTop: 'auto', width: '100%', height: 48, borderRadius: 4, border: 'none',
+            background: 'var(--primary)', color: '#fff', fontWeight: 700, fontSize: 16,
+            fontFamily: 'inherit', cursor: selectedPeriod ? 'pointer' : 'not-allowed',
+          }}
+        >
+          {isCurrent ? 'تمدید اشتراک' : 'خرید اشتراک'}
+        </button>
+      )}
     </div>
   );
 }