style(sidebar): refine action buttons

src/app/sidebar/components/back-bar.module.css

@@ -7,11 +7,11 @@
 .link {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-xs, 4px);
+  justify-content: center;
+  width: 32px;
+  height: 32px;
   color: #000000;
   text-decoration: none;
-  font-size: var(--font-size-lg, 16px);
-  font-weight: 400;
   background: none;
   border: 0;
   padding: 0;
@@ -26,9 +26,3 @@
   color: currentColor;
   flex-shrink: 0;
 }
-
-.text {
-  color: currentColor;
-  font-size: var(--font-size-lg, 16px);
-  font-weight: 400;
-}

src/app/sidebar/components/back-bar.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { ChevronLeft } from "lucide-react";
 import Link from "next/link";
 
 import { ROUTES } from "@/router/routes";
@@ -7,7 +8,7 @@ import { ROUTES } from "@/router/routes";
 import styles from "./back-bar.module.css";
 
 /**
- * 顶部返回栏：chevron + "Back" 文字，链接至聊天页。
+ * 顶部返回栏：图标按钮，链接至聊天页。
  *
  * 视觉规格（与设计稿对齐）：
  *   - 黑色文本（浅色主题下）
@@ -21,23 +22,12 @@ export function BackBar() {
         className={styles.link}
         aria-label="Back"
       >
-        <svg
+        <ChevronLeft
-          width="20"
+          size={24}
-          height="20"
+          strokeWidth={2.5}
-          viewBox="0 0 24 24"
-          fill="none"
           aria-hidden="true"
           className={styles.icon}
-        >
-          <path
-            d="M15 6l-6 6 6 6"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
         />
-        </svg>
-        <span className={styles.text}>Back</span>
       </Link>
     </header>
   );

src/app/sidebar/components/vip-benefits-card.module.css

@@ -88,22 +88,26 @@
 }
 
 .activateBtn {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
-  border-radius: var(--radius-full, 999px);
+  border-radius: 22px;
-  background: linear-gradient(
+  background-image:
-    90deg,
+    linear-gradient(
-    var(--color-button-gradient-start, #ff67e0),
+      135deg,
-    var(--color-button-gradient-end, #ff52a2)
+      #ff67e0 0%,
-  );
+      rgba(255, 109, 225, 0.29) 20%,
+      rgba(254, 122, 228, 0.47) 66%,
+      rgba(252, 140, 231, 0.59) 100%
+    ),
+    linear-gradient(#fb5e9d, #fb5e9d);
+  background-blend-mode: normal, normal;
   color: var(--color-text-primary, #ffffff);
   font-size: var(--font-size-md, 14px);
   font-weight: 600;
   border: 0;
   cursor: pointer;
-  width: 100%;
   box-sizing: border-box;
 }
 

src/app/sidebar/components/voice-package-card.module.css

@@ -74,22 +74,20 @@
 }
 
 .buyBtn {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
-  border-radius: var(--radius-full, 999px);
+  border-radius: 22px;
-  background: linear-gradient(
+  background-image:
-    90deg,
+    linear-gradient(91deg, #f67382 0%, #f66690 44%, #f657a0 100%),
-    var(--color-button-gradient-start, #ff67e0),
+    linear-gradient(#f69757, #f69757);
-    var(--color-button-gradient-end, #ff52a2)
+  background-blend-mode: normal, normal;
-  );
   color: var(--color-text-primary, #ffffff);
   font-size: var(--font-size-md, 14px);
   font-weight: 600;
   border: 0;
   cursor: pointer;
-  width: 100%;
   box-sizing: border-box;
 }
 

src/app/sidebar/components/voice-package-card.tsx

@@ -19,7 +19,6 @@ export interface VoicePackageCardProps {
  * 视觉规格（与设计稿对齐）：
  *   - 白色卡片 + 粉色→橙色渐变描边
  *   - 标题 "Voice Message Package"（粉色加粗）
- *   - 右上角大圆形渐变麦克风图标
  *   - "0min/0min used/remaining" 文案（前缀粉色加粗）
  *   - 底部 "Buy Package" 粉色胶囊按钮
  */