style(subscription): refine plan card layout

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;