diff --git a/src/components/LoginGuard/index.tsx b/src/components/LoginGuard/index.tsx
index efc5e07..aae0f6c 100644
--- a/src/components/LoginGuard/index.tsx
+++ b/src/components/LoginGuard/index.tsx
@@ -66,7 +66,7 @@ export default function LoginGuard(props: { children: React.ReactNode }) {
           <Image className='login-guard-icon' src={assetUrl('/icon/个人.png')} mode='aspectFit' />
           <Text className='login-guard-title'>请先登录</Text>
           <Text className='login-guard-desc'>登录后查看您的专属内容</Text>
-          <View className='btn-gradient login-guard-btn' onTap={() => Taro.switchTab({ url: '/pages/profile/index' })}>
+          <View className='btn-primary login-guard-btn' onTap={() => Taro.switchTab({ url: '/pages/profile/index' })}>
             <Text>去登录</Text>
           </View>
         </View>
diff --git a/src/components/LoginModal/index.scss b/src/components/LoginModal/index.scss
index b5bf27b..51317e9 100644
--- a/src/components/LoginModal/index.scss
+++ b/src/components/LoginModal/index.scss
@@ -40,7 +40,7 @@
   border-radius: 50%;
   margin: 0 auto 24px;
   background: var(--bg-input);
-  border: 3px dashed var(--line-star);
+  border: 1rpx solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -48,6 +48,10 @@
   padding: 0;
 }
 
+.avatar-btn:active {
+  border-color: var(--accent-primary);
+}
+
 .avatar-img {
   width: 100%;
   height: 100%;
@@ -63,7 +67,7 @@
   width: 100%;
   height: 80px;
   background: var(--bg-input);
-  border: 3px dashed var(--line-star);
+  border: 1rpx solid var(--border);
   border-radius: 16px;
   padding: 0 24px;
   font-size: 28px;
@@ -72,12 +76,16 @@
   text-align: center;
 }
 
+.nickname-input:focus {
+  border-color: var(--accent-primary);
+}
+
 .login-actions {
   display: flex;
   gap: 20px;
 }
 
-.login-actions .btn-outline,
-.login-actions .btn-gradient {
+.login-actions .btn-secondary,
+.login-actions .btn-primary {
   flex: 1;
 }
diff --git a/src/components/LoginModal/index.tsx b/src/components/LoginModal/index.tsx
index 9099dc2..72f7f43 100644
--- a/src/components/LoginModal/index.tsx
+++ b/src/components/LoginModal/index.tsx
@@ -80,8 +80,7 @@ export default function LoginModal({ visible, onClose, onLogin }: { visible: boo
 
   return (
     <View className='modal-overlay'>
-      <View className='login-card dashed-card'>
-        <View className='star-badge' />
+      <View className='surface-card login-card'>
         <Text className='login-title'>智绘微刻</Text>
         <Text className='login-desc'>登录后同步您的设计清单和订单</Text>
 
@@ -106,10 +105,10 @@ export default function LoginModal({ visible, onClose, onLogin }: { visible: boo
         />
 
         <View className='login-actions'>
-          <View className='btn-outline' onTap={onClose}>
+          <View className='btn-secondary' onTap={onClose}>
             <Text>取消</Text>
           </View>
-          <View className='btn-gradient' onTap={handleLogin}>
+          <View className='btn-primary' onTap={handleLogin}>
             <Text>登录</Text>
           </View>
         </View>
diff --git a/src/components/ThemeToggle/index.scss b/src/components/ThemeToggle/index.scss
index eeec992..7d3f71f 100644
--- a/src/components/ThemeToggle/index.scss
+++ b/src/components/ThemeToggle/index.scss
@@ -5,7 +5,7 @@
   width: 80px;
   height: 80px;
   border-radius: 50%;
-  background: rgba(0, 0, 0, 0.35);
+  background: rgba(25, 25, 25, 0.42);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.25);
@@ -19,7 +19,7 @@
 
 .theme-toggle:active {
   transform: scale(0.92);
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(25, 25, 25, 0.52);
 }
 
 .theme-icon {