From d87b3268fbaab3773245928963e997f3fdd6a59c Mon Sep 17 00:00:00 2001
From: NanamiAdmin <yzt114@yeah.net>
Date: Mon, 13 Apr 2026 18:41:09 +0800
Subject: [PATCH] chore(ui): redesign interface with SF Pro fonts and modern
 styling

- Update theme variables and styles for light/dark modes
- Implement SF Pro font family across all components
- Redesign cards, buttons, forms, and scrollbars
- Add backdrop filters and improve visual hierarchy
- Optimize spacing, typography, and interactive elements
---
 .gitignore                   |   3 +-
 src/App.vue                  |   8 +-
 src/components/SideBar.vue   |  99 +++++----
 src/components/TopBar.vue    | 252 +++++++++++++----------
 src/styles/common.css        | 388 +++++++++++++++++------------------
 src/styles/themes.css        |  97 +++++++--
 src/views/Home.vue           |  13 +-
 src/views/InstanceDetail.vue | 238 ++++++++++++++++-----
 src/views/Instances.vue      |  44 ++--
 src/views/Login.vue          |  72 ++++---
 src/views/Logs.vue           |  47 ++---
 src/views/Monitor.vue        |  12 +-
 src/views/Sessions.vue       |  17 +-
 src/views/SystemInfo.vue     |   1 +
 src/views/Users.vue          |  36 +---
 vite.config.js               |   2 +-
 16 files changed, 797 insertions(+), 532 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2e1814b..5c06b72 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,8 +22,9 @@ docs/_book
 
 # TODO: where does this rule come from?
 test/
+dist/
 
 node_modules/
-
+design.md
 agent.md
 api-backend.md
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index bc990bc..5ce18dc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -34,10 +34,15 @@ export default {
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 17px;
+    line-height: 1.47;
+    letter-spacing: -0.374px;
     background-color: var(--bg-color);
     color: var(--text-color);
     transition: background-color 0.3s, color 0.3s;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 #app {
@@ -48,5 +53,6 @@ body {
 mark {
     background-color: var(--mark-bg);
     padding: 0 2px;
+    border-radius: 2px;
 }
 </style>
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 4d6fb12..f40e1a7 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -98,123 +98,141 @@ export default {
 .sidebar {
     position: fixed;
     left: 0;
-    top: 64px;
+    top: 48px;
     bottom: 0;
     width: 240px;
-    background: var(--sidebar-bg);
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
     overflow-y: auto;
     display: flex;
     flex-direction: column;
 }
 
 .sidebar::-webkit-scrollbar {
-    width: 8px;
+    width: 4px;
 }
 
 .sidebar::-webkit-scrollbar-track {
-    background: var(--bg-color);
-    border-radius: 0 8px 8px 0;
+    background: transparent;
 }
 
 .sidebar::-webkit-scrollbar-thumb {
-    background: var(--primary-color);
-    border-radius: 4px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 2px;
 }
 
 .sidebar::-webkit-scrollbar-thumb:hover {
-    background: var(--sidebar-active-bg);
+    background: rgba(255, 255, 255, 0.3);
 }
 
 .menu {
-    padding: 16px 0;
+    padding: 8px 0;
     flex: 1;
 }
 
 .menu-item {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     display: flex;
     align-items: center;
     padding: 12px 24px;
-    color: var(--sidebar-text);
+    color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
     transition: all 0.3s;
-    margin: 4px 12px;
-    border-radius: 6px;
+    margin: 2px 12px;
+    border-radius: 8px;
+    font-size: 15px;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
+    font-weight: 400;
 }
 
 .menu-item:hover {
-    color: var(--sidebar-text-hover);
-    background: var(--sidebar-bg-hover);
+    color: #ffffff;
+    background: rgba(255, 255, 255, 0.1);
 }
 
 .menu-item.active {
-    color: var(--sidebar-text-hover);
-    background: var(--sidebar-active-bg);
+    color: #ffffff;
+    background: var(--primary-color);
 }
 
 .menu-icon {
-    font-size: 18px;
+    font-size: 14px;
     margin-right: 12px;
-    width: 24px;
+    width: 20px;
     text-align: center;
 }
 
 .menu-text {
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 400;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
 }
 
 .theme-toggle {
-    padding: 16px;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 12px;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .theme-button {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 10px 16px;
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--sidebar-text);
+    padding: 8px 15px;
+    background: rgba(255, 255, 255, 0.08);
+    color: rgba(255, 255, 255, 0.8);
     border: none;
-    border-radius: 6px;
+    border-radius: 8px;
     cursor: pointer;
     transition: all 0.3s;
     font-size: 14px;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
 }
 
 .theme-button:hover {
-    background: rgba(255, 255, 255, 0.2);
-    color: var(--sidebar-text-hover);
+    background: rgba(255, 255, 255, 0.15);
+    color: #ffffff;
 }
 
 .theme-icon {
-    font-size: 16px;
+    font-size: 14px;
     margin-right: 8px;
 }
 
 .theme-text {
-    font-weight: 500;
+    font-weight: 400;
 }
 
 .status-info {
-    padding: 16px;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 12px;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .status-item {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 12px;
     margin-bottom: 8px;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 14px;
-    color: var(--sidebar-text);
-    font-weight: 500;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
+    color: rgba(255, 255, 255, 0.8);
+    font-weight: 400;
+}
+
+.status-item p {
+    margin: 0;
 }
 
 .status-dot {
-    width: 8px;
-    height: 8px;
+    width: 10px;
+    height: 10px;
     border-radius: 50%;
     background: #ff4d4f;
 }
@@ -224,8 +242,11 @@ export default {
 }
 
 .status-text {
-    font-size: 14px;
-    color: var(--sidebar-text);
-    font-weight: 500;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    line-height: 1.33;
+    letter-spacing: -0.12px;
+    color: rgba(255, 255, 255, 0.48);
+    font-weight: 400;
 }
 </style>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 69945ed..6511304 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -19,58 +19,58 @@
                 <span>v{{ softwareInfo.Version }}</span>
             </div>
             <div class="user-profile" @click.stop="toggleMenu">
-                <div class="user-info" ref="userInfoRef">
-                    <div class="avatar">{{ username.charAt(0).toUpperCase() }}</div>
-                    <span class="username">{{ username }}</span>
-                </div>
-                <div class="user-menu" v-show="menuVisible" @click.stop>
-                    <button class="menu-item" @click="showEditUser = true">
-                        <i class="fas fa-user-cog"></i>
-                        <span>User Settings</span>
-                    </button>
-                    <button class="menu-item" @click="handleLogout">
-                        <i class="fas fa-sign-out-alt"></i>
-                        <span>Logout</span>
-                    </button>
-                </div>
+            <div class="user-info" ref="userInfoRef">
+                <div class="avatar">{{ username.charAt(0).toUpperCase() }}</div>
+                <span class="username">{{ username }}</span>
             </div>
-        <div v-if="showEditUser" class="modal-overlay" @click="closeEditUserDialog">
-            <div class="modal" @click.stop>
-                <h3>User Settings</h3>
-                <form @submit.prevent="handleEditUserSubmit" class="form">
-                    <div class="form-group">
-                        <label>Username</label>
-                        <input 
-                            type="text" 
-                            v-model="editFormData.newUsername" 
-                            required
-                        >
-                    </div>
-                    <div class="form-group">
-                        <label>New Password</label>
-                        <input 
-                            type="password" 
-                            v-model="editFormData.newPasswd" 
-                        >
-                    </div>
-                    <div class="form-group">
-                        <label>Confirm Password</label>
-                        <input 
-                            type="password" 
-                            v-model="editFormData.confirmPasswd" 
-                        >
-                    </div>
-                    <div class="form-actions">
-                        <button type="button" class="cancel-btn" @click="closeEditUserDialog">Cancel</button>
-                        <button type="submit" class="submit-btn" :disabled="loading">
-                            {{ loading ? 'Processing...' : 'Submit' }}
-                        </button>
-                    </div>
-                </form>
+            <div class="user-menu" v-show="menuVisible && !showEditUser" @click.stop>
+                <button class="menu-item" @click="showEditUser = true">
+                    <i class="fas fa-user-cog"></i>
+                    <span>User Settings</span>
+                </button>
+                <button class="menu-item" @click="handleLogout">
+                    <i class="fas fa-sign-out-alt"></i>
+                    <span>Logout</span>
+                </button>
             </div>
         </div>
         </div>
     </div>
+    <div v-if="showEditUser" class="modal-overlay" @click="closeEditUserDialog">
+        <div class="modal" @click.stop>
+            <h3>User Settings</h3>
+            <form @submit.prevent="handleEditUserSubmit" class="form">
+                <div class="form-group">
+                    <label>Username</label>
+                    <input 
+                        type="text" 
+                        v-model="editFormData.newUsername" 
+                        required
+                    >
+                </div>
+                <div class="form-group">
+                    <label>New Password</label>
+                    <input 
+                        type="password" 
+                        v-model="editFormData.newPasswd" 
+                    >
+                </div>
+                <div class="form-group">
+                    <label>Confirm Password</label>
+                    <input 
+                        type="password" 
+                        v-model="editFormData.confirmPasswd" 
+                    >
+                </div>
+                <div class="form-actions">
+                    <button type="button" class="cancel-btn" @click="closeEditUserDialog">Cancel</button>
+                    <button type="submit" class="submit-btn" :disabled="loading">
+                        {{ loading ? 'Processing...' : 'Submit' }}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -227,15 +227,15 @@ export default {
     justify-content: space-between;
     align-items: center;
     padding: 0 24px;
-    height: 64px;
-    background: var(--card-bg);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    height: 56px;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
-    transition: background-color 0.3s;
 }
 
 .topbar-left {
@@ -244,9 +244,12 @@ export default {
 }
 
 .logo {
-    font-size: 24px;
+    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 21px;
     font-weight: 600;
-    color: var(--primary-color);
+    line-height: 1.19;
+    letter-spacing: 0.231px;
+    color: #ffffff;
     margin: 0;
 }
 
@@ -264,20 +267,30 @@ export default {
 }
 
 .search-box input {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     width: 100%;
-    padding: 10px 40px 10px 16px;
-    border: 1px solid var(--border-color);
-    border-radius: 20px;
-    font-size: 14px;
+    padding: 0px 14px;
+    padding-right: 36px;
+    height: 32px;
+    border: 3px solid rgba(255, 255, 255, 0.08);
+    border-radius: 11px;
+    font-size: 12px;
+    line-height: 1.33;
+    letter-spacing: -0.12px;
     transition: all 0.3s;
-    background: var(--bg-color);
-    color: var(--text-color);
+    background: rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+}
+
+.search-box input::placeholder {
+    color: rgba(255, 255, 255, 0.48);
 }
 
 .search-box input:focus {
     outline: none;
     border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    box-shadow: 0 0 0 2px var(--focus-ring);
+    background: rgba(255, 255, 255, 0.15);
 }
 
 .search-icon {
@@ -285,8 +298,8 @@ export default {
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
-    font-size: 16px;
-    color: #999;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.48);
 }
 
 .topbar-right {
@@ -295,11 +308,12 @@ export default {
     gap: 24px;
 }
 
-
-
 .version-info {
-    font-size: 14px;
-    color: #999;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    line-height: 1.33;
+    letter-spacing: -0.12px;
+    color: rgba(255, 255, 255, 0.48);
 }
 
 .user-profile {
@@ -309,39 +323,45 @@ export default {
 .user-info {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 8px;
     cursor: pointer;
-    padding: 8px 12px;
-    border-radius: 8px;
+    padding: 4px 8px;
+    border-radius: 980px;
     transition: background-color 0.2s;
 }
 
 .user-info:hover {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: rgba(255, 255, 255, 0.1);
 }
 
 .user-profile:hover .user-info {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: rgba(255, 255, 255, 0.1);
 }
 
 .avatar {
-    width: 36px;
-    height: 36px;
+    width: 28px;
+    height: 28px;
     border-radius: 50%;
-    background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
+    background: var(--primary-color);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-weight: 600;
-    font-size: 14px;
+    font-size: 12px;
+    line-height: 1.33;
+    letter-spacing: -0.12px;
     flex-shrink: 0;
 }
 
 .username {
-    font-size: 14px;
-    color: var(--text-color);
-    font-weight: 500;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    line-height: 1.33;
+    letter-spacing: -0.12px;
+    color: rgba(255, 255, 255, 0.8);
+    font-weight: 400;
     white-space: nowrap;
 }
 
@@ -351,17 +371,19 @@ export default {
     right: 0;
     margin-top: 8px;
     min-width: 180px;
-    background: var(--card-bg);
+    background: rgba(29, 29, 31, 0.95);
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
     border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--card-shadow);
     overflow: hidden;
     z-index: 101;
-    border: 1px solid var(--border-color);
 }
 
 .user-menu .menu-item {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     width: 100%;
-    padding: 12px 16px;
+    padding: 8px 15px;
     display: flex;
     align-items: center;
     gap: 12px;
@@ -369,16 +391,19 @@ export default {
     border: none;
     cursor: pointer;
     font-size: 14px;
-    color: var(--text-color);
+    line-height: 1.29;
+    letter-spacing: -0.224px;
+    color: rgba(255, 255, 255, 0.8);
     transition: background-color 0.2s;
 }
 
 .user-menu .menu-item:hover {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: var(--primary-color);
+    color: #ffffff;
 }
 
 .user-menu .menu-item i {
-    font-size: 16px;
+    font-size: 14px;
     width: 20px;
     text-align: center;
 }
@@ -390,6 +415,7 @@ export default {
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -402,11 +428,15 @@ export default {
     padding: 24px;
     width: 90%;
     max-width: 500px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--card-shadow);
 }
 
 .modal h3 {
-    font-size: 20px;
+    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 21px;
+    font-weight: 700;
+    line-height: 1.19;
+    letter-spacing: 0.231px;
     color: var(--text-color);
     margin: 0 0 20px 0;
 }
@@ -416,27 +446,34 @@ export default {
 }
 
 .form-group label {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     display: block;
     margin-bottom: 8px;
     font-size: 14px;
-    font-weight: 500;
-    color: var(--text-color);
+    font-weight: 600;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
+    color: var(--text-secondary);
 }
 
 .form-group input {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     width: 100%;
-    padding: 10px;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    font-size: 14px;
-    background: var(--bg-color);
+    padding: 10px 14px;
+    border: 3px solid var(--border-color);
+    border-radius: 11px;
+    font-size: 17px;
+    line-height: 1.47;
+    letter-spacing: -0.374px;
+    background: var(--surface-light);
     color: var(--text-color);
-    transition: border-color 0.3s;
+    transition: border-color 0.3s, background-color 0.3s;
 }
 
 .form-group input:focus {
     outline: none;
     border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px var(--focus-ring);
 }
 
 .form-actions {
@@ -447,27 +484,34 @@ export default {
 }
 
 .cancel-btn {
-    padding: 10px 20px;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    background: transparent;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 8px 15px;
+    border: 3px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--surface-light);
     color: var(--text-color);
     cursor: pointer;
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 2.41;
     transition: all 0.3s;
 }
 
 .cancel-btn:hover {
-    background: var(--hover-bg);
-    border-color: var(--primary-color);
+    background: var(--surface-hover);
 }
 
 .submit-btn {
-    padding: 10px 20px;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 8px 15px;
     border: none;
-    border-radius: 6px;
+    border-radius: 8px;
     background: var(--primary-color);
     color: white;
     cursor: pointer;
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 2.41;
     transition: all 0.3s;
 }
 
@@ -476,7 +520,7 @@ export default {
 }
 
 .submit-btn:disabled {
-    opacity: 0.6;
+    opacity: 0.48;
     cursor: not-allowed;
 }
 </style>
diff --git a/src/styles/common.css b/src/styles/common.css
index 035b59c..8c751d9 100644
--- a/src/styles/common.css
+++ b/src/styles/common.css
@@ -3,9 +3,13 @@
 }
 
 .page-header h2 {
-    font-size: 24px;
+    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 40px;
+    font-weight: 600;
+    line-height: 1.10;
     color: var(--text-color);
     margin: 0;
+    letter-spacing: normal;
     transition: color 0.3s;
 }
 
@@ -13,7 +17,7 @@
     background: var(--card-bg);
     border-radius: 8px;
     padding: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--card-shadow);
     transition: background-color 0.3s;
 }
 
@@ -25,7 +29,11 @@
 }
 
 .card-header h3 {
-    font-size: 16px;
+    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 21px;
+    font-weight: 700;
+    line-height: 1.19;
+    letter-spacing: 0.231px;
     color: var(--text-color);
     margin: 0;
     transition: color 0.3s;
@@ -55,19 +63,38 @@
 }
 
 .form-group label {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 14px;
-    font-weight: 500;
-    color: var(--text-color);
+    font-weight: 600;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
+    color: var(--text-secondary);
 }
 
 .form-group input,
 .form-group select {
-    padding: 10px;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    font-size: 14px;
-    background: var(--bg-color);
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 10px 14px;
+    border: 3px solid var(--border-color);
+    border-radius: 11px;
+    font-size: 17px;
+    line-height: 1.47;
+    letter-spacing: -0.374px;
+    background: var(--surface-light);
     color: var(--text-color);
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px var(--focus-ring);
+}
+
+.form-group input:disabled {
+    opacity: 0.48;
+    cursor: not-allowed;
 }
 
 .form-group.checkbox-group {
@@ -80,164 +107,85 @@
     width: auto;
 }
 
-
 .empty-state {
     text-align: center;
     padding: 60px 20px;
-    color: #999;
-    font-size: 16px;
+    color: var(--text-tertiary);
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 17px;
+    line-height: 1.47;
+    letter-spacing: -0.374px;
 }
 
 .action-btn {
-    padding: 8px 16px;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 8px 15px;
     border: none;
-    border-radius: 6px;
-    font-size: 14px;
-    font-weight: 500;
+    border-radius: 8px;
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 2.41;
     cursor: pointer;
     transition: all 0.3s;
 }
 
 .delete-btn {
-    background: #ff4d4f;
+    background: var(--status-stopped);
     color: white;
+    border-radius: 8px;
 }
 
 .delete-btn:hover {
-    background: #f04142;
+    opacity: 0.85;
 }
 
 .edit-btn {
-    background: #f0f0f0;
+    background: var(--surface-light);
     color: var(--text-color);
+    border-radius: 8px;
 }
 
 .edit-btn:hover {
-    background: #e0e0e0;
+    background: var(--surface-hover);
 }
 
 .start-btn {
-    background: #52c41a;
+    background: var(--primary-color);
     color: white;
+    border-radius: 8px;
 }
 
 .start-btn:hover {
-    background: #45a049;
+    background: var(--primary-hover);
 }
 
 .stop-btn {
-    background: #ff4d4f;
+    background: var(--status-stopped);
     color: white;
+    border-radius: 8px;
 }
 
 .stop-btn:hover {
-    background: #f04142;
+    opacity: 0.85;
 }
 
 .add-btn {
-    padding: 10px 20px;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 8px 15px;
     background: var(--primary-color);
     color: white;
     border: none;
-    border-radius: 6px;
+    border-radius: 980px;
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 400;
+    line-height: 1.43;
+    letter-spacing: -0.224px;
     cursor: pointer;
     transition: all 0.3s;
 }
 
 .add-btn:hover {
-    background: #5568d3;
-}
-
-.form {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.form-group label {
-    font-size: 14px;
-    color: #666;
-    font-weight: 500;
-}
-
-.form-group input,
-.form-group select {
-    padding: 10px;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    font-size: 14px;
-    background: var(--bg-color);
-    color: var(--text-color);
-    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
-}
-
-.form-group input:focus,
-.form-group select:focus {
-    outline: none;
-    border-color: var(--primary-color);
-}
-
-.form-group input:disabled {
-    background: #f5f5f5;
-    cursor: not-allowed;
-}
-
-.dark .form-group label {
-    color: #b0b0b0;
-}
-
-.dark .form-group input,
-.dark .form-group select {
-    background: #3d3d3d;
-    color: var(--text-color);
-    border-color: var(--border-color);
-}
-
-.dark .form-group input:disabled {
-    background: #2a2a2a;
-    color: #666;
-}
-
-.dark .cancel-btn {
-    background: #3d3d3d;
-    color: var(--text-color);
-}
-
-.dark .cancel-btn:hover {
-    background: #4d4d4d;
-}
-
-.dark .info-row .label,
-.dark .info-label,
-.dark .detail-key,
-.dark .config-key {
-    color: #b0b0b0;
-}
-
-.dark .log-item {
-    background: #2a2a2a;
-}
-
-.dark .proxy-item,
-.dark .config-item {
-    background: #2a2a2a;
-}
-
-.dark .common-btn {
-    background: #3d3d3d;
-    color: var(--text-color);
-}
-
-.dark .common-btn:hover {
-    background: #4d4d4d;
+    background: var(--primary-hover);
 }
 
 .form-actions {
@@ -248,23 +196,26 @@
 
 .cancel-btn,
 .submit-btn {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     flex: 1;
-    padding: 10px;
+    padding: 8px 15px;
     border: none;
-    border-radius: 6px;
-    font-size: 14px;
-    font-weight: 500;
+    border-radius: 8px;
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 2.41;
     cursor: pointer;
     transition: all 0.3s;
 }
 
 .cancel-btn {
-    background: #f0f0f0;
+    background: var(--surface-light);
     color: var(--text-color);
+    border: 3px solid var(--border-color);
 }
 
 .cancel-btn:hover {
-    background: #e0e0e0;
+    background: var(--surface-hover);
 }
 
 .submit-btn {
@@ -273,22 +224,25 @@
 }
 
 .submit-btn:hover:not(:disabled) {
-    background: #5568d3;
+    background: var(--primary-hover);
 }
 
 .submit-btn:disabled {
-    opacity: 0.6;
+    opacity: 0.48;
     cursor: not-allowed;
 }
 
 .info-row {
     display: flex;
     justify-content: space-between;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 14px;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
 }
 
 .info-row .label {
-    color: #666;
+    color: var(--text-tertiary);
 }
 
 .info-row .value {
@@ -300,11 +254,14 @@
 .info-item {
     display: flex;
     justify-content: space-between;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 14px;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
 }
 
 .info-label {
-    color: #666;
+    color: var(--text-tertiary);
     font-weight: 500;
 }
 
@@ -317,69 +274,60 @@
 }
 
 .status-badge {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     padding: 4px 12px;
-    border-radius: 12px;
+    border-radius: 980px;
     font-size: 12px;
-    font-weight: 500;
+    font-weight: 600;
+    line-height: 1.33;
+    letter-spacing: -0.12px;
 }
 
 .status-badge.running {
-    background: #f6ffed;
-    color: #52c41a;
+    background: var(--status-running-bg);
+    color: var(--status-running);
 }
 
 .status-badge.stopped {
-    background: #fff1f0;
-    color: #ff4d4f;
+    background: var(--status-stopped-bg);
+    color: var(--status-stopped);
 }
 
 .status-badge.active {
-    background: #f6ffed;
-    color: #52c41a;
+    background: var(--status-running-bg);
+    color: var(--status-running);
 }
 
 .status-badge.inactive {
-    background: #fff1f0;
-    color: #ff4d4f;
+    background: var(--status-stopped-bg);
+    color: var(--status-stopped);
 }
 
 .type-badge {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     display: inline-block;
     padding: 2px 8px;
-    border-radius: 4px;
+    border-radius: 980px;
     font-size: 12px;
-    font-weight: 500;
+    font-weight: 600;
+    line-height: 1.33;
+    letter-spacing: -0.12px;
     transition: background-color 0.3s, color 0.3s;
 }
 
 .type-badge.superuser {
-    background: #fff7e6;
-    color: #fa8c16;
+    background: var(--type-superuser-bg);
+    color: var(--type-superuser-color);
 }
 
 .type-badge.admin {
-    background: #e6f7ff;
-    color: #1890ff;
+    background: var(--type-admin-bg);
+    color: var(--type-admin-color);
 }
 
 .type-badge.visitor {
-    background: #f9f9f9;
-    color: #666;
-}
-
-.dark .type-badge.superuser {
-    background: #3a2510;
-    color: #ffb74d;
-}
-
-.dark .type-badge.admin {
-    background: #0d2633;
-    color: #40a9ff;
-}
-
-.dark .type-badge.visitor {
-    background: #2a2a2a;
-    color: #b0b0b0;
+    background: var(--type-visitor-bg);
+    color: var(--type-visitor-color);
 }
 
 .modal-overlay {
@@ -389,6 +337,7 @@
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -400,12 +349,16 @@
     border-radius: 12px;
     padding: 24px;
     width: 400px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--card-shadow);
     transition: background-color 0.3s;
 }
 
 .modal h3 {
-    font-size: 20px;
+    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 21px;
+    font-weight: 700;
+    line-height: 1.19;
+    letter-spacing: 0.231px;
     color: var(--text-color);
     margin: 0 0 20px 0;
     transition: color 0.3s;
@@ -421,14 +374,16 @@
     display: flex;
     gap: 12px;
     padding: 12px;
-    background: #f9f9f9;
-    border-radius: 6px;
+    background: var(--surface-light);
+    border-radius: 8px;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, monospace;
     font-size: 14px;
-    font-family: 'Consolas', 'Monaco', monospace;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
 }
 
 .log-time {
-    color: #999;
+    color: var(--text-tertiary);
     min-width: 160px;
 }
 
@@ -437,32 +392,32 @@
     font-weight: 600;
     text-align: center;
     padding: 2px 8px;
-    border-radius: 4px;
+    border-radius: 980px;
 }
 
 .log-level.DEBUG {
-    color: #52c41a;
-    background: #f6ffed;
+    color: var(--log-debug-color);
+    background: var(--log-debug-bg);
 }
 
 .log-level.INFO {
-    color: #1890ff;
-    background: #e6f7ff;
+    color: var(--log-info-color);
+    background: var(--log-info-bg);
 }
 
 .log-level.WARN {
-    color: #faad14;
-    background: #fffbe6;
+    color: var(--log-warn-color);
+    background: var(--log-warn-bg);
 }
 
 .log-level.ERROR {
-    color: #ff4d4f;
-    background: #fff1f0;
+    color: var(--log-error-color);
+    background: var(--log-error-bg);
 }
 
 .log-level.FATAL {
-    color: #cf1322;
-    background: #fff1f0;
+    color: var(--log-fatal-color);
+    background: var(--log-fatal-bg);
 }
 
 .log-message {
@@ -476,43 +431,55 @@
     width: 48px;
     height: 48px;
     border-radius: 50%;
-    background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
+    background: var(--primary-color);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
+    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-weight: 600;
     font-size: 18px;
 }
 
 .common-btn {
-    padding: 8px 16px;
-    background: #f0f0f0;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 8px 15px;
+    background: var(--surface-light);
     border: none;
-    border-radius: 6px;
+    border-radius: 8px;
     cursor: pointer;
-    font-size: 14px;
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 2.41;
     transition: all 0.3s;
 }
 
 .common-btn:hover {
-    background: #e0e0e0;
+    background: var(--surface-hover);
 }
 
 .config-item {
     display: flex;
     justify-content: space-between;
     padding: 12px;
-    background: #f9f9f9;
-    border-radius: 6px;
+    background: var(--surface-light);
+    border-radius: 8px;
 }
 
 .config-key {
-    color: #666;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
+    color: var(--text-tertiary);
     font-weight: 500;
 }
 
 .config-value {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
     color: var(--text-color);
     transition: color 0.3s;
 }
@@ -522,8 +489,8 @@
     flex-direction: column;
     gap: 12px;
     padding: 12px;
-    background: #f9f9f9;
-    border-radius: 6px;
+    background: var(--surface-light);
+    border-radius: 8px;
 }
 
 .proxy-header {
@@ -533,8 +500,11 @@
 }
 
 .proxy-name {
+    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 18px;
     font-weight: 600;
+    line-height: 1.14;
+    letter-spacing: 0.196px;
     color: var(--text-color);
     transition: color 0.3s;
 }
@@ -546,12 +516,15 @@
 }
 
 .proxy-type {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     display: inline-block;
     padding: 4px 12px;
-    border-radius: 12px;
-    font-size: 14px;
-    font-weight: 500;
-    background: var(--primary-bg);
+    border-radius: 980px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.33;
+    letter-spacing: -0.12px;
+    background: var(--status-running-bg);
     color: var(--primary-color);
     text-transform: uppercase;
 }
@@ -566,11 +539,14 @@
 .proxy-detail {
     display: flex;
     justify-content: space-between;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 14px;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
 }
 
 .detail-key {
-    color: #666;
+    color: var(--text-tertiary);
 }
 
 .detail-value {
@@ -582,12 +558,16 @@
     background: var(--card-bg);
     border-radius: 8px;
     padding: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--card-shadow);
     transition: background-color 0.3s;
 }
 
 .section h3 {
-    font-size: 18px;
+    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 21px;
+    font-weight: 700;
+    line-height: 1.19;
+    letter-spacing: 0.231px;
     color: var(--text-color);
     margin: 0 0 16px 0;
     transition: color 0.3s;
@@ -599,11 +579,14 @@
 }
 
 .filter-controls select {
-    padding: 8px 16px;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    font-size: 14px;
-    background: var(--card-bg);
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 0px 14px;
+    border: 3px solid var(--border-color);
+    border-radius: 11px;
+    font-size: 17px;
+    line-height: 1.47;
+    letter-spacing: -0.374px;
+    background: var(--surface-light);
     color: var(--text-color);
     cursor: pointer;
     transition: background-color 0.3s, color 0.3s, border-color 0.3s;
@@ -612,6 +595,7 @@
 .filter-controls select:focus {
     outline: none;
     border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px var(--focus-ring);
 }
 
 .proxy-actions {
diff --git a/src/styles/themes.css b/src/styles/themes.css
index 4d1c49f..cc4da04 100644
--- a/src/styles/themes.css
+++ b/src/styles/themes.css
@@ -1,27 +1,82 @@
 :root {
-    --bg-color: #f5f5f5;
-    --text-color: #333;
-    --sidebar-bg: #001529;
-    --sidebar-text: rgba(255, 255, 255, 0.65);
-    --sidebar-text-hover: white;
+    --bg-color: #f5f5f7;
+    --text-color: #1d1d1f;
+    --text-secondary: rgba(0, 0, 0, 0.8);
+    --text-tertiary: rgba(0, 0, 0, 0.48);
+    --sidebar-bg: rgba(0, 0, 0, 0.8);
+    --sidebar-text: rgba(255, 255, 255, 0.8);
+    --sidebar-text-hover: #ffffff;
     --sidebar-bg-hover: rgba(255, 255, 255, 0.1);
-    --sidebar-active-bg: #667eea;
-    --card-bg: white;
-    --border-color: #e8e8e8;
-    --primary-color: #667eea;
-    --mark-bg: #fffb8f;
+    --sidebar-active-bg: #0071e3;
+    --card-bg: #ffffff;
+    --border-color: rgba(0, 0, 0, 0.04);
+    --primary-color: #0071e3;
+    --primary-hover: #0077ed;
+    --mark-bg: rgba(0, 113, 227, 0.12);
+    --link-color: #0066cc;
+    --link-dark-color: #2997ff;
+    --focus-ring: #0071e3;
+    --card-shadow: rgba(0, 0, 0, 0.22) 3px 5px 30px 0px;
+    --surface-light: #fafafc;
+    --surface-hover: #ededf2;
+    --overlay-bg: rgba(210, 210, 215, 0.64);
+    --status-running: #0071e3;
+    --status-stopped: #ff4d4f;
+    --status-running-bg: rgba(0, 113, 227, 0.08);
+    --status-stopped-bg: rgba(255, 77, 79, 0.08);
+    --log-debug-color: #52c41a;
+    --log-info-color: #0071e3;
+    --log-warn-color: #faad14;
+    --log-error-color: #ff4d4f;
+    --log-fatal-color: #cf1322;
+    --log-debug-bg: rgba(82, 196, 26, 0.08);
+    --log-info-bg: rgba(0, 113, 227, 0.08);
+    --log-warn-bg: rgba(250, 173, 20, 0.08);
+    --log-error-bg: rgba(255, 77, 79, 0.08);
+    --log-fatal-bg: rgba(207, 19, 34, 0.08);
+    --type-superuser-bg: rgba(250, 140, 22, 0.1);
+    --type-superuser-color: #d48806;
+    --type-admin-bg: rgba(0, 113, 227, 0.1);
+    --type-admin-color: #0071e3;
+    --type-visitor-bg: rgba(0, 0, 0, 0.04);
+    --type-visitor-color: rgba(0, 0, 0, 0.48);
 }
 
 .dark {
-    --bg-color: #1a1a1a;
-    --text-color: #e0e0e0;
-    --sidebar-bg: #121212;
-    --sidebar-text: rgba(255, 255, 255, 0.7);
-    --sidebar-text-hover: white;
+    --bg-color: #000000;
+    --text-color: #ffffff;
+    --text-secondary: rgba(255, 255, 255, 0.8);
+    --text-tertiary: rgba(255, 255, 255, 0.48);
+    --sidebar-bg: rgba(0, 0, 0, 0.8);
+    --sidebar-text: rgba(255, 255, 255, 0.8);
+    --sidebar-text-hover: #ffffff;
     --sidebar-bg-hover: rgba(255, 255, 255, 0.15);
-    --sidebar-active-bg: #7f56d9;
-    --card-bg: #2d2d2d;
-    --border-color: #3d3d3d;
-    --primary-color: #9e77ed;
-    --mark-bg: #4a4a00;
-}
\ No newline at end of file
+    --sidebar-active-bg: #0071e3;
+    --card-bg: #1d1d1f;
+    --border-color: rgba(255, 255, 255, 0.08);
+    --primary-color: #2997ff;
+    --primary-hover: #3ba0ff;
+    --mark-bg: rgba(41, 151, 255, 0.2);
+    --link-color: #2997ff;
+    --link-dark-color: #2997ff;
+    --focus-ring: #2997ff;
+    --card-shadow: rgba(0, 0, 0, 0.5) 3px 5px 30px 0px;
+    --surface-light: #272729;
+    --surface-hover: #3a3a3c;
+    --overlay-bg: rgba(210, 210, 215, 0.64);
+    --status-running: #2997ff;
+    --status-stopped: #ff4d4f;
+    --status-running-bg: rgba(41, 151, 255, 0.15);
+    --status-stopped-bg: rgba(255, 77, 79, 0.15);
+    --log-debug-bg: rgba(82, 196, 26, 0.15);
+    --log-info-bg: rgba(41, 151, 255, 0.15);
+    --log-warn-bg: rgba(250, 173, 20, 0.15);
+    --log-error-bg: rgba(255, 77, 79, 0.15);
+    --log-fatal-bg: rgba(207, 19, 34, 0.15);
+    --type-superuser-bg: rgba(250, 140, 22, 0.2);
+    --type-superuser-color: #ffb74d;
+    --type-admin-bg: rgba(41, 151, 255, 0.2);
+    --type-admin-color: #40a9ff;
+    --type-visitor-bg: rgba(255, 255, 255, 0.08);
+    --type-visitor-color: rgba(255, 255, 255, 0.48);
+}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 15b625f..22dffe0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -46,27 +46,26 @@ export default {
 
 .main-content {
     margin-left: 240px;
-    margin-top: 64px;
+    margin-top: 48px;
     padding: 24px;
     flex: 1;
     overflow-y: auto;
 }
 
 .main-content::-webkit-scrollbar {
-    width: 8px;
+    width: 4px;
 }
 
 .main-content::-webkit-scrollbar-track {
-    background: var(--bg-color);
-    border-radius: 0 8px 8px 0;
+    background: transparent;
 }
 
 .main-content::-webkit-scrollbar-thumb {
-    background: var(--primary-color);
-    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 2px;
 }
 
 .main-content::-webkit-scrollbar-thumb:hover {
-    background: var(--sidebar-active-bg);
+    background: rgba(0, 0, 0, 0.3);
 }
 </style>
diff --git a/src/views/InstanceDetail.vue b/src/views/InstanceDetail.vue
index b220784..fbad70e 100644
--- a/src/views/InstanceDetail.vue
+++ b/src/views/InstanceDetail.vue
@@ -776,8 +776,7 @@ export default {
 .proxy-item {
     padding: 16px;
     border-radius: 8px;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
+    background: var(--surface-light);
 }
 
 .proxy-header {
@@ -789,18 +788,24 @@ export default {
 }
 
 .proxy-name {
-    font-size: 16px;
+    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 18px;
     font-weight: 600;
+    line-height: 1.14;
+    letter-spacing: 0.196px;
     color: var(--text-color);
 }
 
 .proxy-type {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     display: inline-block;
     padding: 4px 12px;
-    border-radius: 12px;
+    border-radius: 980px;
     font-size: 12px;
-    font-weight: 500;
-    background: var(--primary-bg);
+    font-weight: 600;
+    line-height: 1.33;
+    letter-spacing: -0.12px;
+    background: var(--status-running-bg);
     color: var(--primary-color);
     text-transform: uppercase;
 }
@@ -809,24 +814,26 @@ export default {
     display: flex;
     align-items: center;
     gap: 8px;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 14px;
-    border: 5px solid var(--border-color);
+    line-height: 1.29;
+    letter-spacing: -0.224px;
 }
 
 .proxy-key {
-    color: var(--text-secondary);
+    color: var(--text-tertiary);
     font-weight: 500;
     min-width: 90px;
 }
 
 .proxy-value {
     color: var(--text-color);
-    font-family: monospace;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, monospace;
 }
 
 .log-item {
     padding: 8px;
-    border-radius: 4px;
+    border-radius: 8px;
 }
 
 .log-time {
@@ -835,34 +842,34 @@ export default {
 
 .log-level {
     min-width: 60px;
-    font-weight: 500;
+    font-weight: 600;
     padding: 2px 8px;
-    border-radius: 4px;
+    border-radius: 980px;
 }
 
 .log-level.DEBUG {
-    color: #52c41a;
-    background: #f6ffed;
+    color: var(--log-debug-color);
+    background: var(--log-debug-bg);
 }
 
 .log-level.INFO {
-    color: #1890ff;
-    background: #e6f7ff;
+    color: var(--log-info-color);
+    background: var(--log-info-bg);
 }
 
 .log-level.WARN {
-    color: #faad14;
-    background: #fffbe6;
+    color: var(--log-warn-color);
+    background: var(--log-warn-bg);
 }
 
 .log-level.ERROR {
-    color: #ff4d4f;
-    background: #fff1f0;
+    color: var(--log-error-color);
+    background: var(--log-error-bg);
 }
 
 .log-level.FATAL {
-    color: #cf1322;
-    background: #fff1f0;
+    color: var(--log-fatal-color);
+    background: var(--log-fatal-bg);
 }
 
 .empty-state {
@@ -877,6 +884,7 @@ export default {
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -885,14 +893,19 @@ export default {
 
 .modal {
     background: var(--card-bg);
-    border-radius: 8px;
+    border-radius: 12px;
     padding: 24px;
     width: 90%;
     max-width: 500px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--card-shadow);
 }
 
 .modal h3 {
+    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 21px;
+    font-weight: 700;
+    line-height: 1.19;
+    letter-spacing: 0.231px;
     margin-top: 0;
     margin-bottom: 20px;
     color: var(--text-color);
@@ -906,26 +919,34 @@ export default {
 }
 
 .cancel-btn {
-    padding: 10px 20px;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    background: transparent;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 8px 15px;
+    border: 3px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--surface-light);
     color: var(--text-color);
     cursor: pointer;
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 2.41;
     transition: all 0.3s;
 }
 
 .cancel-btn:hover {
-    background: var(--hover-bg);
+    background: var(--surface-hover);
 }
 
 .submit-btn {
-    padding: 10px 20px;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 8px 15px;
     border: none;
-    border-radius: 4px;
+    border-radius: 8px;
     background: var(--primary-color);
     color: white;
     cursor: pointer;
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 2.41;
     transition: all 0.3s;
 }
 
@@ -934,7 +955,7 @@ export default {
 }
 
 .submit-btn:disabled {
-    background: var(--disabled-bg);
+    opacity: 0.48;
     cursor: not-allowed;
 }
 
@@ -960,79 +981,183 @@ export default {
 .status-item {
     padding: 16px;
     border-radius: 8px;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
+    background: var(--surface-light);
     display: flex;
     align-items: center;
     gap: 12px;
 }
 
 .status-key {
-    color: var(--text-secondary);
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
+    color: var(--text-tertiary);
     font-weight: 500;
     min-width: 90px;
 }
 
 .status-value {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, monospace;
+    font-size: 14px;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
     color: var(--text-color);
-    font-family: monospace;
 }
 
 .status-value.running {
-    color: #52c41a;
+    color: var(--status-running);
     font-weight: 600;
 }
 
 .status-value.stopped {
-    color: #ff4d4f;
+    color: var(--status-stopped);
     font-weight: 600;
 }
 
 .common-btn.status-btn {
-    padding: 8px 16px;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 8px 15px;
     border: none;
-    border-radius: 4px;
-    background: #52c41a;
+    border-radius: 8px;
+    background: var(--primary-color);
     color: white;
     cursor: pointer;
     transition: all 0.3s;
     display: flex;
-    align-items: flex-end;
+    align-items: center;
     gap: 8px;
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 2.41;
 }
 
 .common-btn.status-btn:hover {
-    background: #40a412;
+    background: var(--primary-hover);
 }
 
 .common-btn.stop-btn {
-    background: #ff4d4f;
+    background: var(--status-stopped);
 }
 
 .common-btn.stop-btn:hover {
-    background: #cf1616;
+    opacity: 0.85;
 }
 
 .common-btn.restart-btn {
-    padding: 8px 16px;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 8px 15px;
     border: none;
-    border-radius: 4px;
-    background: #1890ff;
-    color: white;
+    border-radius: 8px;
+    background: var(--surface-light);
+    color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s;
     display: flex;
-    align-items: flex-end;
+    align-items: center;
     gap: 8px;
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 2.41;
 }
 
 .common-btn.restart-btn:hover {
-    background: #096dd9;
+    background: var(--surface-hover);
 }
 
 .status-btn i,
 .restart-btn i {
     font-size: 14px;
+    display: flex;
+    align-items: center;
+}
+
+.proxy-actions .common-btn {
+    padding: 6px 12px;
+    font-size: 12px;
+    color: var(--text-color);
+}
+
+.proxy-actions .delete-btn {
+    background: var(--status-stopped-bg);
+    color: var(--status-stopped);
+}
+
+.proxy-actions .delete-btn:hover {
+    background: var(--status-stopped);
+    color: white;
+}
+
+.proxy-actions .edit-btn {
+    background: var(--surface-light);
+    color: var(--text-color);
+}
+
+.proxy-actions .edit-btn:hover {
+    background: var(--surface-hover);
+}
+
+.proxy-actions .add-btn {
+    background: var(--primary-color);
+    color: white;
+}
+
+.proxy-actions .add-btn:hover {
+    background: var(--primary-hover);
+}
+
+.proxy-details .proxy-detail {
+    background: var(--surface-light);
+    border-radius: 8px;
+    padding: 12px;
+}
+
+.proxy-details .proxy-detail:last-child {
+    background: var(--surface-hover);
+    border-radius: 8px;
+    padding: 12px;
+}
+
+.page-header .common-btn {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 8px 15px;
+    border: none;
+    border-radius: 8px;
+    background: var(--surface-light);
+    color: var(--text-color);
+    cursor: pointer;
+    transition: all 0.3s;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 2.41;
+}
+
+.page-header .common-btn:hover {
+    background: var(--surface-hover);
+}
+
+.section h3 .common-btn {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 8px 15px;
+    border: none;
+    border-radius: 8px;
+    background: var(--surface-light);
+    color: var(--text-color);
+    cursor: pointer;
+    transition: all 0.3s;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 2.41;
+}
+
+.section h3 .common-btn:hover {
+    background: var(--surface-hover);
 }
 
 .section:last-child .logs-container {
@@ -1041,20 +1166,19 @@ export default {
 }
 
 .section:last-child .logs-container::-webkit-scrollbar {
-    width: 8px;
+    width: 4px;
 }
 
 .section:last-child .logs-container::-webkit-scrollbar-track {
-    background: var(--bg-color);
-    border-radius: 0 8px 8px 0;
+    background: transparent;
 }
 
 .section:last-child .logs-container::-webkit-scrollbar-thumb {
-    background: var(--primary-color);
-    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 2px;
 }
 
 .section:last-child .logs-container::-webkit-scrollbar-thumb:hover {
-    background: var(--sidebar-active-bg);
+    background: rgba(0, 0, 0, 0.3);
 }
 </style>
diff --git a/src/views/Instances.vue b/src/views/Instances.vue
index 6961754..7bb2ae4 100644
--- a/src/views/Instances.vue
+++ b/src/views/Instances.vue
@@ -339,11 +339,12 @@ export default {
     background-color: var(--card-bg);
     padding: 16px;
     border-radius: 8px;
+    box-shadow: var(--card-shadow);
 }
 
 .instance-card:hover {
     transform: translateY(-4px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    box-shadow: rgba(0, 0, 0, 0.22) 3px 8px 36px 0px;
 }
 
 .card-footer {
@@ -353,8 +354,11 @@ export default {
 }
 
 .instance-name {
-    font-size: 18px;
-    font-weight: 600;
+    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 21px;
+    font-weight: 700;
+    line-height: 1.19;
+    letter-spacing: 0.231px;
     color: var(--text-color);
     margin: 0;
     transition: color 0.3s;
@@ -367,6 +371,7 @@ export default {
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -375,14 +380,19 @@ export default {
 
 .modal {
     background: var(--card-bg);
-    border-radius: 8px;
+    border-radius: 12px;
     padding: 24px;
     width: 90%;
     max-width: 500px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--card-shadow);
 }
 
 .modal h3 {
+    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 21px;
+    font-weight: 700;
+    line-height: 1.19;
+    letter-spacing: 0.231px;
     margin-top: 0;
     margin-bottom: 20px;
     color: var(--text-color);
@@ -396,26 +406,34 @@ export default {
 }
 
 .cancel-btn {
-    padding: 10px 20px;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    background: transparent;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 8px 15px;
+    border: 3px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--surface-light);
     color: var(--text-color);
     cursor: pointer;
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 2.41;
     transition: all 0.3s;
 }
 
 .cancel-btn:hover {
-    background: var(--hover-bg);
+    background: var(--surface-hover);
 }
 
 .submit-btn {
-    padding: 10px 20px;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 8px 15px;
     border: none;
-    border-radius: 4px;
+    border-radius: 8px;
     background: var(--primary-color);
     color: white;
     cursor: pointer;
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 2.41;
     transition: all 0.3s;
 }
 
@@ -424,7 +442,7 @@ export default {
 }
 
 .submit-btn:disabled {
-    background: var(--disabled-bg);
+    opacity: 0.48;
     cursor: not-allowed;
 }
 </style>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 6470691..23ee843 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -136,46 +136,52 @@ export default {
     justify-content: center;
     align-items: center;
     min-height: 100vh;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #000000;
 }
 
 .login-box {
-    background: var(--card-bg, white);
+    background: var(--card-bg);
     padding: 40px;
     border-radius: 12px;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--card-shadow);
     width: 400px;
     transition: background-color 0.3s;
 }
 
 .title {
+    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     text-align: center;
-    color: var(--text-color, #333);
+    color: var(--text-color);
     margin-bottom: 30px;
-    font-size: 28px;
+    font-size: 40px;
+    font-weight: 600;
+    line-height: 1.10;
     transition: color 0.3s;
 }
 
 .tabs {
     display: flex;
     margin-bottom: 30px;
-    border-bottom: 2px solid var(--border-color, #e8e8e8);
+    border-bottom: 2px solid var(--border-color);
 }
 
 .tab {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     flex: 1;
     padding: 12px;
     border: none;
     background: none;
     cursor: pointer;
-    font-size: 16px;
-    color: #666;
+    font-size: 17px;
+    line-height: 1.47;
+    letter-spacing: -0.374px;
+    color: var(--text-tertiary);
     transition: all 0.3s;
 }
 
 .tab.active {
-    color: var(--primary-color, #667eea);
-    border-bottom: 2px solid var(--primary-color, #667eea);
+    color: var(--primary-color);
+    border-bottom: 2px solid var(--primary-color);
     margin-bottom: -2px;
 }
 
@@ -192,45 +198,53 @@ export default {
 }
 
 .form-group label {
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 14px;
-    color: #666;
-    font-weight: 500;
+    font-weight: 600;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
+    color: var(--text-secondary);
 }
 
 .form-group input {
-    padding: 12px;
-    border: 1px solid var(--border-color, #ddd);
-    border-radius: 6px;
-    font-size: 14px;
-    transition: border-color 0.3s;
-    background: var(--bg-color, #f5f5f5);
-    color: var(--text-color, #333);
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 10px 14px;
+    border: 3px solid var(--border-color);
+    border-radius: 11px;
+    font-size: 17px;
+    line-height: 1.47;
+    letter-spacing: -0.374px;
+    transition: border-color 0.3s, background-color 0.3s;
+    background: var(--surface-light);
+    color: var(--text-color);
 }
 
 .form-group input:focus {
     outline: none;
-    border-color: var(--primary-color, #667eea);
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px var(--focus-ring);
 }
 
 .submit-btn {
-    padding: 12px;
-    background: linear-gradient(135deg, var(--primary-color, #667eea) 0%, #764ba2 100%);
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 8px 15px;
+    background: var(--primary-color);
     color: white;
     border: none;
-    border-radius: 6px;
-    font-size: 16px;
-    font-weight: 500;
+    border-radius: 8px;
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 2.41;
     cursor: pointer;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: all 0.3s;
 }
 
 .submit-btn:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+    background: var(--primary-hover);
 }
 
 .submit-btn:disabled {
-    opacity: 0.6;
+    opacity: 0.48;
     cursor: not-allowed;
 }
 </style>
diff --git a/src/views/Logs.vue b/src/views/Logs.vue
index 02a0a56..86b4954 100644
--- a/src/views/Logs.vue
+++ b/src/views/Logs.vue
@@ -133,30 +133,29 @@ export default {
 
 .logs-container {
     background: var(--card-bg);
-    border-radius: 8px 0 0 8px;
+    border-radius: 8px;
     padding: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--card-shadow);
     max-height: calc(100vh - 200px);
     overflow-y: auto;
     transition: background-color 0.3s;
 }
 
 .logs-container::-webkit-scrollbar {
-    width: 8px;
+    width: 4px;
 }
 
 .logs-container::-webkit-scrollbar-track {
-    background: var(--bg-color);
-    border-radius: 0 8px 8px 0;
+    background: transparent;
 }
 
 .logs-container::-webkit-scrollbar-thumb {
-    background: var(--primary-color);
-    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 2px;
 }
 
 .logs-container::-webkit-scrollbar-thumb:hover {
-    background: var(--sidebar-active-bg);
+    background: rgba(0, 0, 0, 0.3);
 }
 
 .log-list {
@@ -169,14 +168,16 @@ export default {
     display: flex;
     gap: 12px;
     padding: 12px;
-    background: #f9f9f9;
-    border-radius: 6px;
+    background: var(--surface-light);
+    border-radius: 8px;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, monospace;
     font-size: 14px;
-    font-family: 'Consolas', 'Monaco', monospace;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
 }
 
 .log-time {
-    color: #999;
+    color: var(--text-tertiary);
     min-width: 160px;
 }
 
@@ -185,32 +186,32 @@ export default {
     font-weight: 600;
     text-align: center;
     padding: 2px 8px;
-    border-radius: 4px;
+    border-radius: 980px;
 }
 
 .log-level.DEBUG {
-    color: #52c41a;
-    background: #f6ffed;
+    color: var(--log-debug-color);
+    background: var(--log-debug-bg);
 }
 
 .log-level.INFO {
-    color: #1890ff;
-    background: #e6f7ff;
+    color: var(--log-info-color);
+    background: var(--log-info-bg);
 }
 
 .log-level.WARN {
-    color: #faad14;
-    background: #fffbe6;
+    color: var(--log-warn-color);
+    background: var(--log-warn-bg);
 }
 
 .log-level.ERROR {
-    color: #ff4d4f;
-    background: #fff1f0;
+    color: var(--log-error-color);
+    background: var(--log-error-bg);
 }
 
 .log-level.FATAL {
-    color: #cf1322;
-    background: #fff1f0;
+    color: var(--log-fatal-color);
+    background: var(--log-fatal-bg);
 }
 
 .log-message {
diff --git a/src/views/Monitor.vue b/src/views/Monitor.vue
index 0e411ed..981691d 100644
--- a/src/views/Monitor.vue
+++ b/src/views/Monitor.vue
@@ -276,8 +276,11 @@ export default {
 }
 
 .card-value {
-    font-size: 24px;
-    font-weight: 600;
+    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 28px;
+    font-weight: 400;
+    line-height: 1.14;
+    letter-spacing: 0.196px;
     color: var(--primary-color);
 }
 
@@ -296,11 +299,14 @@ export default {
 .network-item {
     display: flex;
     justify-content: space-between;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 14px;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
 }
 
 .network-label {
-    color: #666;
+    color: var(--text-tertiary);
 }
 
 .network-value {
diff --git a/src/views/Sessions.vue b/src/views/Sessions.vue
index f70c5e6..81d20b5 100644
--- a/src/views/Sessions.vue
+++ b/src/views/Sessions.vue
@@ -100,17 +100,19 @@ export default {
     background-color: var(--card-bg);
     padding: 16px;
     border-radius: 8px;
+    box-shadow: var(--card-shadow);
 }
 
 .session-icon {
     width: 48px;
     height: 48px;
     border-radius: 50%;
-    background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
+    background: var(--primary-color);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
+    color: #ffffff;
 }
 
 .session-info {
@@ -119,8 +121,11 @@ export default {
 
 .session-user {
     margin-left: 8px;
-    font-size: 16px;
-    font-weight: 600;
+    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 21px;
+    font-weight: 700;
+    line-height: 1.19;
+    letter-spacing: 0.231px;
     color: var(--text-color);
     margin-bottom: 4px;
     transition: color 0.3s;
@@ -128,9 +133,11 @@ export default {
 
 .session-id {
     margin-left: 8px;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, monospace;
     font-size: 12px;
-    color: #999;
-    font-family: 'Consolas', Courier, monospace;
+    line-height: 1.33;
+    letter-spacing: -0.12px;
+    color: var(--text-tertiary);
 }
 
 .card-body {
diff --git a/src/views/SystemInfo.vue b/src/views/SystemInfo.vue
index 184ce5e..e72b416 100644
--- a/src/views/SystemInfo.vue
+++ b/src/views/SystemInfo.vue
@@ -199,5 +199,6 @@ export default {
 
 .card-icon {
     font-size: 24px;
+    color: var(--primary-color);
 }
 </style>
diff --git a/src/views/Users.vue b/src/views/Users.vue
index 8bb9f32..1b74508 100644
--- a/src/views/Users.vue
+++ b/src/views/Users.vue
@@ -230,6 +230,7 @@ export default {
     padding: 12px;
     border-radius: 8px;
     background-color: var(--card-bg);
+    box-shadow: var(--card-shadow);
     transition: background-color 0.3s;
 }
 
@@ -247,8 +248,11 @@ export default {
 }
 
 .user-name {
-    font-size: 16px;
-    font-weight: 600;
+    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 21px;
+    font-weight: 700;
+    line-height: 1.19;
+    letter-spacing: 0.231px;
     color: var(--text-color);
     transition: color 0.3s;
     word-break: break-all;
@@ -269,12 +273,14 @@ export default {
 .meta-item {
     display: flex;
     gap: 8px;
+    font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 14px;
+    line-height: 1.29;
+    letter-spacing: -0.224px;
 }
 
 .meta-label {
-    color: var(--text-color);
-    opacity: 0.65;
+    color: var(--text-tertiary);
 }
 
 .meta-value {
@@ -286,26 +292,4 @@ export default {
     display: flex;
     gap: 8px;
 }
-
-.dark .user-item {
-    background-color: var(--card-bg);
-}
-
-.dark .meta-label {
-    color: var(--text-color);
-    opacity: 0.65;
-}
-
-.dark .edit-btn {
-    background: #3d3d3d;
-    color: var(--text-color);
-}
-
-.dark .edit-btn:hover {
-    background: #4d4d4d;
-}
-
-.dark .delete-btn:hover {
-    background: #f04142;
-}
 </style>
diff --git a/vite.config.js b/vite.config.js
index 5de54fe..76c9f6f 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
-const APP_TARGET = '192.168.1.19:8080'
+const APP_TARGET = '10.0.64.19:8080'
 
 export default defineConfig({
     define: {