From 8dd0d1144b7b7527c314366fdca2238167cd6b1d Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Sat, 14 Mar 2026 02:08:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B5=E9=9D=A2=E6=A0=87=E9=A2=98/?=
 =?UTF-8?q?=E5=89=AF=E6=A0=87=E9=A2=98=E6=9B=B4=E6=96=B0=E3=80=81=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E5=92=8C=E5=80=8D=E7=8E=87=E8=B7=9F=E9=9A=8F=E5=B9=B3?=
 =?UTF-8?q?=E5=8F=B0=E9=A2=9C=E8=89=B2=E3=80=81messages=E8=B0=83=E5=BA=A6?=
 =?UTF-8?q?=E7=A7=BB=E5=88=B0=E6=A0=87=E9=A2=98=E8=A1=8C=E3=80=81=E8=BF=94?=
 =?UTF-8?q?=E5=9B=9E=E6=8C=89=E9=92=AE=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 标题改为"选择适合你的 充值/订阅服务"，副标题改为"充值余额或者订阅套餐"
2. ChannelCard: 按钮bg、倍率数字、额度描述 跟随平台颜色
3. platform-style: 新增 button + accent 字段
4. SubscriptionPlanCard/SubscriptionConfirm: /v1/messages 调度 badge 移到标题行
5. 充值返回按钮样式与订阅确认页统一(灰色+箭头图标)
---
 src/app/pay/page.tsx                    | 14 +++++--
 src/components/ChannelCard.tsx          | 20 ++++++----
 src/components/SubscriptionConfirm.tsx  | 49 +++++++++----------------
 src/components/SubscriptionPlanCard.tsx | 49 +++++++++----------------
 src/lib/platform-style.ts               | 22 +++++++++++
 5 files changed, 80 insertions(+), 74 deletions(-)

diff --git a/src/app/pay/page.tsx b/src/app/pay/page.tsx
index b1e29e7..d0311ab 100644
--- a/src/app/pay/page.tsx
+++ b/src/app/pay/page.tsx
@@ -473,10 +473,10 @@ function PayContent() {
   const allEntriesClosed = channelsLoaded && !canTopUp && !hasPlans;
   const showMainTabs = channelsLoaded && !allEntriesClosed && (hasChannels || hasPlans);
   const pageTitle = showMainTabs
-    ? pickLocaleText(locale, '选择适合你的 订阅套餐', 'Choose Your Plan')
+    ? pickLocaleText(locale, '选择适合你的 充值/订阅服务', 'Choose Your Recharge / Subscription')
     : pickLocaleText(locale, 'Sub2API 余额充值', 'Sub2API Balance Recharge');
   const pageSubtitle = showMainTabs
-    ? pickLocaleText(locale, '通过支付购买或兑换码激活获取订阅服务', 'Subscribe via payment or activation code')
+    ? pickLocaleText(locale, '充值余额或者订阅套餐', 'Top up balance or subscribe to a plan')
     : pickLocaleText(locale, '安全支付，自动到账', 'Secure payment, automatic crediting');
 
   return (
@@ -737,9 +737,15 @@ function PayContent() {
               <button
                 type="button"
                 onClick={() => setShowTopUpForm(false)}
-                className={['mb-4 text-sm', isDark ? 'text-emerald-400 hover:text-emerald-300' : 'text-emerald-600 hover:text-emerald-500'].join(' ')}
+                className={[
+                  'mb-4 flex items-center gap-1 text-sm transition-colors',
+                  isDark ? 'text-slate-400 hover:text-slate-200' : 'text-slate-500 hover:text-slate-700',
+                ].join(' ')}
               >
-                ← {pickLocaleText(locale, '返回', 'Back')}
+                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+                </svg>
+                {pickLocaleText(locale, '返回', 'Back')}
               </button>
               <PaymentForm
                 userId={resolvedUserId ?? 0}
diff --git a/src/components/ChannelCard.tsx b/src/components/ChannelCard.tsx
index 77ac5b4..67e4b9d 100644
--- a/src/components/ChannelCard.tsx
+++ b/src/components/ChannelCard.tsx
@@ -26,8 +26,9 @@ interface ChannelCardProps {
 
 export default function ChannelCard({ channel, onTopUp, isDark, locale }: ChannelCardProps) {
   const usableQuota = (1 / channel.rateMultiplier).toFixed(2);
-  const platformStyle = getPlatformStyle(channel.platform);
-  const tagCls = isDark ? platformStyle.modelTag.dark : platformStyle.modelTag.light;
+  const ps = getPlatformStyle(channel.platform);
+  const tagCls = isDark ? ps.modelTag.dark : ps.modelTag.light;
+  const accentCls = isDark ? ps.accent.dark : ps.accent.light;
 
   return (
     <div
@@ -52,16 +53,16 @@ export default function ChannelCard({ channel, onTopUp, isDark, locale }: Channe
               {pickLocaleText(locale, '当前倍率', 'Rate')}
             </span>
             <div className="flex items-baseline">
-              <span className="text-xl font-bold text-emerald-500">1</span>
+              <span className={['text-xl font-bold', accentCls].join(' ')}>1</span>
               <span className={['mx-1.5 text-lg', isDark ? 'text-slate-500' : 'text-slate-400'].join(' ')}>:</span>
-              <span className="text-xl font-bold text-emerald-500">{channel.rateMultiplier}</span>
+              <span className={['text-xl font-bold', accentCls].join(' ')}>{channel.rateMultiplier}</span>
             </div>
           </div>
           <p className={['mt-1 text-sm', isDark ? 'text-slate-400' : 'text-slate-500'].join(' ')}>
             {pickLocaleText(
               locale,
-              <>1元可用约<span className="font-medium text-emerald-500">{usableQuota}</span>美元额度</>,
-              <>1 CNY ≈ <span className="font-medium text-emerald-500">{usableQuota}</span> USD quota</>,
+              <>1元可用约<span className={['font-medium', accentCls].join(' ')}>{usableQuota}</span>美元额度</>,
+              <>1 CNY ≈ <span className={['font-medium', accentCls].join(' ')}>{usableQuota}</span> USD quota</>,
             )}
           </p>
         </div>
@@ -89,7 +90,7 @@ export default function ChannelCard({ channel, onTopUp, isDark, locale }: Channe
                   tagCls,
                 ].join(' ')}
               >
-                <span className={['h-1.5 w-1.5 rounded-full', platformStyle.modelTag.dot].join(' ')} />
+                <span className={['h-1.5 w-1.5 rounded-full', ps.modelTag.dot].join(' ')} />
                 {model}
               </span>
             ))}
@@ -126,7 +127,10 @@ export default function ChannelCard({ channel, onTopUp, isDark, locale }: Channe
       <button
         type="button"
         onClick={onTopUp}
-        className="mt-2 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-500 py-3 text-sm font-semibold text-white transition-colors hover:bg-emerald-600 active:bg-emerald-700"
+        className={[
+          'mt-2 inline-flex w-full items-center justify-center gap-2 rounded-xl py-3 text-sm font-semibold text-white transition-colors',
+          ps.button,
+        ].join(' ')}
       >
         <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
           <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
diff --git a/src/components/SubscriptionConfirm.tsx b/src/components/SubscriptionConfirm.tsx
index abb15a6..c029b25 100644
--- a/src/components/SubscriptionConfirm.tsx
+++ b/src/components/SubscriptionConfirm.tsx
@@ -75,7 +75,7 @@ export default function SubscriptionConfirm({
           isDark ? 'border-slate-700 bg-slate-800/80' : 'border-slate-200 bg-white',
         ].join(' ')}
       >
-        {/* Header: Platform badge + Name + Period */}
+        {/* Header: Platform badge + Name + Period + messages dispatch */}
         <div className="flex items-center gap-2 flex-wrap">
           {plan.platform && <PlatformBadge platform={plan.platform} />}
           <span className={['text-lg font-bold', isDark ? 'text-slate-100' : 'text-slate-900'].join(' ')}>
@@ -89,6 +89,14 @@ export default function SubscriptionConfirm({
           >
             {periodLabel}
           </span>
+          {isOpenAI && plan.allowMessagesDispatch && (
+            <span className={[
+              'rounded-full px-2 py-0.5 text-xs font-medium',
+              isDark ? 'bg-green-500/20 text-green-300' : 'bg-green-100 text-green-700',
+            ].join(' ')}>
+              /v1/messages
+            </span>
+          )}
         </div>
 
         {/* Price */}
@@ -156,39 +164,18 @@ export default function SubscriptionConfirm({
           </div>
         )}
 
-        {/* OpenAI specific: messages dispatch + default model */}
-        {isOpenAI && (
+        {/* OpenAI specific: default model */}
+        {isOpenAI && plan.defaultMappedModel && (
           <div className={[
-            'rounded-lg border p-3',
+            'flex items-center justify-between rounded-lg border px-3 py-2 text-sm',
             isDark ? 'border-green-500/20 bg-green-500/5' : 'border-green-500/20 bg-green-50/50',
           ].join(' ')}>
-            <div className="space-y-1.5 text-sm">
-              <div className="flex items-center justify-between">
-                <span className={isDark ? 'text-slate-400' : 'text-slate-500'}>
-                  {pickLocaleText(locale, '/v1/messages 调度', '/v1/messages Dispatch')}
-                </span>
-                <span className={[
-                  'rounded-full px-2 py-0.5 text-xs font-medium',
-                  plan.allowMessagesDispatch
-                    ? isDark ? 'bg-green-500/20 text-green-300' : 'bg-green-100 text-green-700'
-                    : isDark ? 'bg-slate-700 text-slate-400' : 'bg-slate-100 text-slate-500',
-                ].join(' ')}>
-                  {plan.allowMessagesDispatch
-                    ? pickLocaleText(locale, '已启用', 'Enabled')
-                    : pickLocaleText(locale, '未启用', 'Disabled')}
-                </span>
-              </div>
-              {plan.defaultMappedModel && (
-                <div className="flex items-center justify-between">
-                  <span className={isDark ? 'text-slate-400' : 'text-slate-500'}>
-                    {pickLocaleText(locale, '默认模型', 'Default Model')}
-                  </span>
-                  <span className={['text-xs font-mono', isDark ? 'text-slate-300' : 'text-slate-700'].join(' ')}>
-                    {plan.defaultMappedModel}
-                  </span>
-                </div>
-              )}
-            </div>
+            <span className={isDark ? 'text-slate-400' : 'text-slate-500'}>
+              {pickLocaleText(locale, '默认模型', 'Default Model')}
+            </span>
+            <span className={['text-xs font-mono', isDark ? 'text-slate-300' : 'text-slate-700'].join(' ')}>
+              {plan.defaultMappedModel}
+            </span>
           </div>
         )}
 
diff --git a/src/components/SubscriptionPlanCard.tsx b/src/components/SubscriptionPlanCard.tsx
index 46c3c1c..05c326b 100644
--- a/src/components/SubscriptionPlanCard.tsx
+++ b/src/components/SubscriptionPlanCard.tsx
@@ -57,7 +57,7 @@ export default function SubscriptionPlanCard({ plan, onSubscribe, isDark, locale
     >
       {/* Header: Platform badge + Name + Period */}
       <div className="mb-4">
-        <div className="mb-3 flex items-center gap-2">
+        <div className="mb-3 flex flex-wrap items-center gap-2">
           {plan.platform && <PlatformBadge platform={plan.platform} />}
           <h3 className={['text-lg font-bold', isDark ? 'text-slate-100' : 'text-slate-900'].join(' ')}>
             {plan.name}
@@ -70,6 +70,14 @@ export default function SubscriptionPlanCard({ plan, onSubscribe, isDark, locale
           >
             {periodLabel}
           </span>
+          {isOpenAI && plan.allowMessagesDispatch && (
+            <span className={[
+              'rounded-full px-2 py-0.5 text-xs font-medium',
+              isDark ? 'bg-green-500/20 text-green-300' : 'bg-green-100 text-green-700',
+            ].join(' ')}>
+              /v1/messages
+            </span>
+          )}
         </div>
 
         {/* Price */}
@@ -141,39 +149,18 @@ export default function SubscriptionPlanCard({ plan, onSubscribe, isDark, locale
         </div>
       )}
 
-      {/* OpenAI specific: messages dispatch + default model */}
-      {isOpenAI && (
+      {/* OpenAI specific: default model */}
+      {isOpenAI && plan.defaultMappedModel && (
         <div className={[
-          'mb-4 rounded-lg border p-3',
+          'mb-4 flex items-center justify-between rounded-lg border px-3 py-2 text-sm',
           isDark ? 'border-green-500/20 bg-green-500/5' : 'border-green-500/20 bg-green-50/50',
         ].join(' ')}>
-          <div className="space-y-1.5 text-sm">
-            <div className="flex items-center justify-between">
-              <span className={isDark ? 'text-slate-400' : 'text-slate-500'}>
-                {pickLocaleText(locale, '/v1/messages 调度', '/v1/messages Dispatch')}
-              </span>
-              <span className={[
-                'rounded-full px-2 py-0.5 text-xs font-medium',
-                plan.allowMessagesDispatch
-                  ? isDark ? 'bg-green-500/20 text-green-300' : 'bg-green-100 text-green-700'
-                  : isDark ? 'bg-slate-700 text-slate-400' : 'bg-slate-100 text-slate-500',
-              ].join(' ')}>
-                {plan.allowMessagesDispatch
-                  ? pickLocaleText(locale, '已启用', 'Enabled')
-                  : pickLocaleText(locale, '未启用', 'Disabled')}
-              </span>
-            </div>
-            {plan.defaultMappedModel && (
-              <div className="flex items-center justify-between">
-                <span className={isDark ? 'text-slate-400' : 'text-slate-500'}>
-                  {pickLocaleText(locale, '默认模型', 'Default Model')}
-                </span>
-                <span className={['text-xs font-mono', isDark ? 'text-slate-300' : 'text-slate-700'].join(' ')}>
-                  {plan.defaultMappedModel}
-                </span>
-              </div>
-            )}
-          </div>
+          <span className={isDark ? 'text-slate-400' : 'text-slate-500'}>
+            {pickLocaleText(locale, '默认模型', 'Default Model')}
+          </span>
+          <span className={['text-xs font-mono', isDark ? 'text-slate-300' : 'text-slate-700'].join(' ')}>
+            {plan.defaultMappedModel}
+          </span>
         </div>
       )}
 
diff --git a/src/lib/platform-style.ts b/src/lib/platform-style.ts
index fed0194..58ca41e 100644
--- a/src/lib/platform-style.ts
+++ b/src/lib/platform-style.ts
@@ -8,6 +8,10 @@ export interface PlatformStyleEntry {
   icon: string;
   /** Model tag classes: { light: border+bg+text, dark: border+bg+text, dot: bg for the dot } */
   modelTag: { light: string; dark: string; dot: string };
+  /** Button bg + hover + active classes */
+  button: string;
+  /** Accent text color for rate numbers, quota descriptions etc. */
+  accent: { light: string; dark: string };
 }
 
 const PLATFORM_STYLES: Record<string, PlatformStyleEntry> = {
@@ -17,6 +21,8 @@ const PLATFORM_STYLES: Record<string, PlatformStyleEntry> = {
     label: 'Claude',
     icon: 'M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z',
     modelTag: { light: 'border-orange-500/20 bg-gradient-to-r from-orange-500/10 to-amber-500/10 text-orange-600', dark: 'border-orange-500/20 bg-gradient-to-r from-orange-500/10 to-amber-500/10 text-orange-400', dot: 'bg-orange-500' },
+    button: 'bg-orange-500 hover:bg-orange-600 active:bg-orange-700',
+    accent: { light: 'text-orange-600', dark: 'text-orange-400' },
   },
   anthropic: {
     badge: 'bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/30',
@@ -24,12 +30,16 @@ const PLATFORM_STYLES: Record<string, PlatformStyleEntry> = {
     label: 'Anthropic',
     icon: 'M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z',
     modelTag: { light: 'border-orange-500/20 bg-gradient-to-r from-orange-500/10 to-amber-500/10 text-orange-600', dark: 'border-orange-500/20 bg-gradient-to-r from-orange-500/10 to-amber-500/10 text-orange-400', dot: 'bg-orange-500' },
+    button: 'bg-orange-500 hover:bg-orange-600 active:bg-orange-700',
+    accent: { light: 'text-orange-600', dark: 'text-orange-400' },
   },
   openai: {
     badge: 'bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/30',
     border: 'border-green-500/20',
     label: 'OpenAI',
     modelTag: { light: 'border-green-500/20 bg-gradient-to-r from-green-500/10 to-emerald-500/10 text-green-600', dark: 'border-green-500/20 bg-gradient-to-r from-green-500/10 to-emerald-500/10 text-green-400', dot: 'bg-green-500' },
+    button: 'bg-green-600 hover:bg-green-700 active:bg-green-800',
+    accent: { light: 'text-green-600', dark: 'text-green-400' },
     icon: 'M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z',
   },
   codex: {
@@ -37,6 +47,8 @@ const PLATFORM_STYLES: Record<string, PlatformStyleEntry> = {
     border: 'border-green-500/20',
     label: 'Codex',
     modelTag: { light: 'border-green-500/20 bg-gradient-to-r from-green-500/10 to-emerald-500/10 text-green-600', dark: 'border-green-500/20 bg-gradient-to-r from-green-500/10 to-emerald-500/10 text-green-400', dot: 'bg-green-500' },
+    button: 'bg-green-600 hover:bg-green-700 active:bg-green-800',
+    accent: { light: 'text-green-600', dark: 'text-green-400' },
     icon: 'M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z',
   },
   gemini: {
@@ -44,6 +56,8 @@ const PLATFORM_STYLES: Record<string, PlatformStyleEntry> = {
     border: 'border-blue-500/20',
     label: 'Gemini',
     modelTag: { light: 'border-blue-500/20 bg-gradient-to-r from-blue-500/10 to-indigo-500/10 text-blue-600', dark: 'border-blue-500/20 bg-gradient-to-r from-blue-500/10 to-indigo-500/10 text-blue-400', dot: 'bg-blue-500' },
+    button: 'bg-blue-500 hover:bg-blue-600 active:bg-blue-700',
+    accent: { light: 'text-blue-600', dark: 'text-blue-400' },
     icon: 'M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81',
   },
   google: {
@@ -51,6 +65,8 @@ const PLATFORM_STYLES: Record<string, PlatformStyleEntry> = {
     border: 'border-blue-500/20',
     label: 'Google',
     modelTag: { light: 'border-blue-500/20 bg-gradient-to-r from-blue-500/10 to-indigo-500/10 text-blue-600', dark: 'border-blue-500/20 bg-gradient-to-r from-blue-500/10 to-indigo-500/10 text-blue-400', dot: 'bg-blue-500' },
+    button: 'bg-blue-500 hover:bg-blue-600 active:bg-blue-700',
+    accent: { light: 'text-blue-600', dark: 'text-blue-400' },
     icon: 'M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81',
   },
   sora: {
@@ -58,6 +74,8 @@ const PLATFORM_STYLES: Record<string, PlatformStyleEntry> = {
     border: 'border-pink-500/20',
     label: 'Sora',
     modelTag: { light: 'border-pink-500/20 bg-gradient-to-r from-pink-500/10 to-rose-500/10 text-pink-600', dark: 'border-pink-500/20 bg-gradient-to-r from-pink-500/10 to-rose-500/10 text-pink-400', dot: 'bg-pink-500' },
+    button: 'bg-pink-500 hover:bg-pink-600 active:bg-pink-700',
+    accent: { light: 'text-pink-600', dark: 'text-pink-400' },
     // four-pointed sparkle star
     icon: 'M12 2l2.09 6.26L20.18 10l-6.09 1.74L12 18l-2.09-6.26L3.82 10l6.09-1.74L12 2z',
   },
@@ -66,6 +84,8 @@ const PLATFORM_STYLES: Record<string, PlatformStyleEntry> = {
     border: 'border-purple-500/20',
     label: 'Antigravity',
     modelTag: { light: 'border-purple-500/20 bg-gradient-to-r from-purple-500/10 to-violet-500/10 text-purple-600', dark: 'border-purple-500/20 bg-gradient-to-r from-purple-500/10 to-violet-500/10 text-purple-400', dot: 'bg-purple-500' },
+    button: 'bg-purple-500 hover:bg-purple-600 active:bg-purple-700',
+    accent: { light: 'text-purple-600', dark: 'text-purple-400' },
     // stylised angular "A" cursor shape
     icon: 'M12 2L4 22h4l2-5h4l2 5h4L12 2zm0 7l2.5 6h-5L12 9z',
   },
@@ -77,6 +97,8 @@ const FALLBACK_STYLE: PlatformStyleEntry = {
   label: '',
   icon: '',
   modelTag: { light: 'border-slate-500/20 bg-gradient-to-r from-slate-500/10 to-slate-400/10 text-slate-600', dark: 'border-slate-500/20 bg-gradient-to-r from-slate-500/10 to-slate-400/10 text-slate-400', dot: 'bg-slate-500' },
+  button: 'bg-emerald-500 hover:bg-emerald-600 active:bg-emerald-700',
+  accent: { light: 'text-emerald-600', dark: 'text-emerald-400' },
 };
 
 export function getPlatformStyle(platform: string): PlatformStyleEntry {