优化

frontend/app/web-gold/src/components/LoginModal.vue

@@ -573,7 +573,7 @@ async function handleLoginSuccess(info) {
 .brand-pane {
   width: 50%;
   height: 100%;
-  background: linear-gradient(135deg, var(--color-slate-900) 0%, var(--color-slate-800) 100%);
+  background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
   position: relative;
   overflow: hidden;
 }
@@ -646,9 +646,9 @@ async function handleLoginSuccess(info) {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--color-slate-800);
+  background: var(--color-gray-800);
   border-radius: 10px;
-  border: 1px solid var(--color-slate-700);
+  border: 1px solid var(--color-gray-700);
 }
 
 .feature-text {
@@ -676,7 +676,7 @@ async function handleLoginSuccess(info) {
   width: 40px;
   height: 40px;
   border: none;
-  background: var(--color-slate-100);
+  background: var(--color-gray-100);
   border-radius: 10px;
   color: var(--color-text-secondary);
   cursor: pointer;
@@ -687,7 +687,7 @@ async function handleLoginSuccess(info) {
 }
 
 .close-btn:hover {
-  background: var(--color-slate-200);
+  background: var(--color-gray-200);
   color: var(--color-text);
 }
 
@@ -705,7 +705,7 @@ async function handleLoginSuccess(info) {
   display: flex;
   gap: 8px;
   margin-bottom: 12px;
-  background: var(--color-slate-50);
+  background: var(--color-gray-50);
   padding: 4px;
   border-radius: 12px;
   border: 1px solid var(--color-border);
@@ -815,7 +815,7 @@ async function handleLoginSuccess(info) {
 }
 
 .send-code-btn:hover:not(:disabled) {
-  background: var(--color-slate-50);
+  background: var(--color-gray-50);
   border-color: var(--color-primary);
 }
 
@@ -866,7 +866,7 @@ async function handleLoginSuccess(info) {
 }
 
 .back-btn:hover {
-  background: var(--color-slate-50);
+  background: var(--color-gray-50);
   color: var(--color-text);
 }
 

frontend/app/web-gold/src/components/SidebarNav.vue

@@ -116,7 +116,7 @@ const remainingPercent = computed(() => {
   align-items: center;
   gap: 10px;
   padding: 8px 12px;
-  color: var(--color-slate-600);
+  color: var(--color-gray-600);
   background: transparent;
   border: 1px solid transparent;
   cursor: pointer;
@@ -128,19 +128,19 @@ const remainingPercent = computed(() => {
 }
 
 .nav-item:hover {
-  background: var(--color-slate-50);
-  color: var(--color-slate-700);
+  background: var(--color-gray-50);
+  color: var(--color-gray-700);
 }
 
 .nav-item.is-active {
-  background: var(--color-blue-50);
-  color: var(--color-blue-700);
+  background: var(--color-primary-50);
+  color: var(--color-primary-700);
   border-color: transparent;
 }
 
 .nav-item.is-active:hover {
-  background: var(--color-blue-100);
-  color: var(--color-blue-800);
+  background: var(--color-primary-100);
+  color: var(--color-primary-700);
 }
 
 .nav-item__icon {
@@ -166,20 +166,20 @@ const remainingPercent = computed(() => {
 .user-card {
   padding: 12px;
   border-radius: 12px;
-  background: var(--color-slate-50);
+  background: var(--color-gray-50);
   cursor: pointer;
   transition: background .2s ease, transform .12s ease;
 }
 
 .user-card:hover {
-  background: var(--color-slate-100);
+  background: var(--color-gray-100);
   transform: translateY(-1px);
 }
 
 .user-card__mobile {
   font-size: 14px;
   font-weight: 500;
-  color: var(--color-slate-700);
+  color: var(--color-gray-700);
   margin-bottom: 6px;
 }
 

frontend/app/web-gold/src/components/TopNav.vue

@@ -4,7 +4,7 @@ import { useUserStore } from '@/stores/user'
 import UserDropdown from '@/components/UserDropdown.vue'
 
 const styles = {
-  background: 'var(--color-slate-900)',
+  background: 'var(--color-gray-900)',
   color: 'var(--color-text-inverse)'
 }