style(subscription): refine plan card layout

src/app/sidebar/components/sidebar-screen.module.css

@@ -12,7 +12,7 @@
 }
 
 .userSlot {
-  padding: var(--spacing-md, 12px) 0;
+  padding: 25px 0;
 }
 
 .cardSlot {

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-color: #f657a0;
-  border-width: 2px;
+  border-width: 3px;
-  box-shadow: 0 6px 16px rgba(248, 77, 150, 0.28);
+  box-shadow: 0 3px 5px rgba(247, 89, 168, 0.1);
+}
+
+.firstSelected {
+  padding-top: 24px;
 }
 
 .name {
-  margin: 0 0 var(--spacing-xs);
+  margin-top: var(--spacing-xl);
-  font-size: var(--font-size-sm);
+  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;

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)

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);
+  font-size: var(--font-size-md);
-  color: var(--color-text-secondary);
+  color: #3c3b3b;
   line-height: 1.5;
 }