From 52aad5b7f3edd3b579f43652906bf55fb2ae8279 Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Thu, 18 Jun 2026 19:20:35 +0800
Subject: [PATCH] style(subscription): refine plan card layout

---
 .../components/sidebar-screen.module.css      |  2 +-
 .../subscription-plan-card.module.css         | 24 ++++++++++++-------
 .../components/subscription-plan-card.tsx     |  1 +
 .../components/subscription-screen.module.css |  8 +++----
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/app/sidebar/components/sidebar-screen.module.css b/src/app/sidebar/components/sidebar-screen.module.css
index 2fc4a9a1..b27ea4ae 100644
--- a/src/app/sidebar/components/sidebar-screen.module.css
+++ b/src/app/sidebar/components/sidebar-screen.module.css
@@ -12,7 +12,7 @@
 }
 
 .userSlot {
-  padding: var(--spacing-md, 12px) 0;
+  padding: 25px 0;
 }
 
 .cardSlot {
diff --git a/src/app/subscription/components/subscription-plan-card.module.css b/src/app/subscription/components/subscription-plan-card.module.css
index 4a0d2217..3e37649e 100644
--- a/src/app/subscription/components/subscription-plan-card.module.css
+++ b/src/app/subscription/components/subscription-plan-card.module.css
@@ -3,10 +3,12 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  height: 154px;
   padding: var(--spacing-sm) var(--spacing-xs) 0;
   background: #ffffff;
   border: 1px solid transparent;
-  border-radius: var(--radius-lg);
+  border-radius: 13px;
+  border-style: solid;
   cursor: pointer;
   text-align: center;
   overflow: hidden;
@@ -27,14 +29,18 @@
 }
 
 .selected {
-  border-color: var(--color-accent);
-  border-width: 2px;
-  box-shadow: 0 6px 16px rgba(248, 77, 150, 0.28);
+  border-color: #f657a0;
+  border-width: 3px;
+  box-shadow: 0 3px 5px rgba(247, 89, 168, 0.1);
+}
+
+.firstSelected {
+  padding-top: 24px;
 }
 
 .name {
-  margin: 0 0 var(--spacing-xs);
-  font-size: var(--font-size-sm);
+  margin-top: var(--spacing-xl);
+  font-size: var(--font-size-md);
   font-weight: 500;
   color: var(--color-auth-text-primary);
   line-height: 1.2;
@@ -44,6 +50,7 @@
   display: flex;
   align-items: baseline;
   justify-content: center;
+  margin-top: 20px;
   gap: 2px;
   color: #000;
   line-height: 1;
@@ -72,10 +79,11 @@
 
 .perDayBar {
   align-self: stretch;
-  margin: 0 calc(-1 * var(--spacing-xs)) 0;
+  margin: auto calc(-1 * var(--spacing-xs)) 0;
   padding: 6px 0;
+  border-radius: 0 0 13px 13px;
   color: #ffffff;
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-md);
   font-weight: 600;
   text-align: center;
   line-height: 1.2;
diff --git a/src/app/subscription/components/subscription-plan-card.tsx b/src/app/subscription/components/subscription-plan-card.tsx
index 28e9b038..e3436b62 100644
--- a/src/app/subscription/components/subscription-plan-card.tsx
+++ b/src/app/subscription/components/subscription-plan-card.tsx
@@ -46,6 +46,7 @@ export function SubscriptionPlanCard({
   const classes = [
     styles.card,
     selected ? styles.selected : "",
+    selected && gradientIndex === 0 ? styles.firstSelected : "",
     className,
   ]
     .filter(Boolean)
diff --git a/src/app/subscription/components/subscription-screen.module.css b/src/app/subscription/components/subscription-screen.module.css
index 213cee68..f2e54eff 100644
--- a/src/app/subscription/components/subscription-screen.module.css
+++ b/src/app/subscription/components/subscription-screen.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   min-height: 100dvh;
   background: var(--color-page-background);
-  padding: 30px 20px 10px;
+  padding: 30px 30px 10px;
 }
 
 .header {
@@ -44,10 +44,10 @@
 }
 
 .autoRenewCaption {
-  margin: var(--spacing-md) 0 0;
+  margin-top: var(--spacing-xxl);
   padding: 0 var(--spacing-xs);
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
+  font-size: var(--font-size-md);
+  color: #3c3b3b;
   line-height: 1.5;
 }