feat(back-button): enhance button styles and add variant support; refactor back navigation in sidebar and coins rules screen

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

@@ -1,28 +0,0 @@
-.bar {
-  padding: var(--spacing-md, 12px) 0;
-  display: flex;
-  align-items: center;
-}
-
-.link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  color: #000000;
-  text-decoration: none;
-  background: none;
-  border: 0;
-  padding: 0;
-  cursor: pointer;
-}
-
-.link:hover {
-  opacity: 0.7;
-}
-
-.icon {
-  color: currentColor;
-  flex-shrink: 0;
-}

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

@@ -1,34 +0,0 @@
-"use client";
-
-import { ChevronLeft } from "lucide-react";
-import Link from "next/link";
-
-import { ROUTES } from "@/router/routes";
-
-import styles from "./back-bar.module.css";
-
-/**
- * 顶部返回栏：图标按钮，链接至聊天页。
- *
- * 视觉规格（与设计稿对齐）：
- *   - 黑色文本（浅色主题下）
- *   - 居左对齐，顶部留白
- */
-export function BackBar() {
-  return (
-    <header className={styles.bar}>
-      <Link
-        href={ROUTES.chat}
-        className={styles.link}
-        aria-label="Back"
-      >
-        <ChevronLeft
-          size={24}
-          strokeWidth={2.5}
-          aria-hidden="true"
-          className={styles.icon}
-        />
-      </Link>
-    </header>
-  );
-}

src/app/sidebar/components/index.ts

@@ -2,7 +2,6 @@
  * @file Automatically generated by barrelsby.
  */
 
-export * from "./back-bar";
 export * from "./sidebar-wallet-card";
 export * from "./user-header";
 export * from "./vip-benefits-card";

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

@@ -49,7 +49,7 @@
 }
 
 .topBar {
-  margin: 4px 0 -2px;
+  margin: 10px 0 -2px;
 }
 
 .hero {

src/app/sidebar/sidebar-screen.tsx

@@ -4,13 +4,13 @@ import { LogOut } from "lucide-react";
 import { signOut } from "next-auth/react";
 import { useRouter } from "next/navigation";
 
+import { BackButton } from "@/app/_components";
 import { MobileShell } from "@/app/_components/core";
 import { ROUTES } from "@/router/routes";
 import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
 import { useUserDispatch, useUserState } from "@/stores/user/user-context";
 
 import {
-  BackBar,
   SidebarWalletCard,
   UserHeader,
   type SidebarUserState,
@@ -56,7 +56,7 @@ export function SidebarScreen() {
         <div className={styles.bgOrbTwo} aria-hidden="true" />
 
         <div className={styles.topBar}>
-          <BackBar />
+          <BackButton href={ROUTES.chat} variant="soft" />
         </div>
 
         <section className={`${styles.userSlot} ${styles.revealOne}`}>