diff --git a/frontend/src/pages/api-docs/ApiDocsPage.css b/frontend/src/pages/api-docs/ApiDocsPage.css
index f6ac4f7b..f9988c4b 100644
--- a/frontend/src/pages/api-docs/ApiDocsPage.css
+++ b/frontend/src/pages/api-docs/ApiDocsPage.css
@@ -51,7 +51,7 @@
 .api-docs-page .docs-wrapper {
   background: var(--bg-card);
   border-radius: 8px;
-  border: 1px solid rgba(128, 128, 128, 0.12);
+  border: 1px solid var(--ant-color-border-secondary);
   overflow: hidden;
 }
 
diff --git a/frontend/src/pages/clients/ClientInfoModal.css b/frontend/src/pages/clients/ClientInfoModal.css
index 60292aac..1320fd98 100644
--- a/frontend/src/pages/clients/ClientInfoModal.css
+++ b/frontend/src/pages/clients/ClientInfoModal.css
@@ -40,7 +40,7 @@
 }
 
 .link-panel {
-  border: 1px solid rgba(128, 128, 128, 0.2);
+  border: 1px solid var(--ant-color-border);
   border-radius: 8px;
   padding: 10px;
   margin-bottom: 10px;
diff --git a/frontend/src/pages/clients/ClientsPage.tsx b/frontend/src/pages/clients/ClientsPage.tsx
index 2e4f3315..57993ec0 100644
--- a/frontend/src/pages/clients/ClientsPage.tsx
+++ b/frontend/src/pages/clients/ClientsPage.tsx
@@ -216,13 +216,12 @@ export default function ClientsPage() {
     return 'active';
   }, [expireDiff, trafficDiff]);
 
-  function bucketBadgeColor(bucket: Bucket | null): string {
+  function bucketBadgeStatus(bucket: Bucket | null): 'success' | 'warning' | 'error' | 'default' {
     switch (bucket) {
-      case 'depleted': return '#ff4d4f';
-      case 'expiring': return '#fa8c16';
-      case 'deactive': return 'rgba(128,128,128,0.6)';
-      case 'active': return '#52c41a';
-      default: return 'rgba(128,128,128,0.6)';
+      case 'depleted': return 'error';
+      case 'expiring': return 'warning';
+      case 'active': return 'success';
+      default: return 'default';
     }
   }
 
@@ -838,7 +837,7 @@ export default function ClientsPage() {
                                       checked={selectedRowKeys.includes(row.email)}
                                       onChange={(e) => toggleSelect(row.email, e.target.checked)}
                                     />
-                                    <Badge color={bucketBadgeColor(bucket)} />
+                                    <Badge status={bucketBadgeStatus(bucket)} />
                                     <span className="tag-name">{row.email}</span>
                                     {bucket === 'depleted' && <Tag color="red" className="status-tag">{t('depleted')}</Tag>}
                                     {bucket === 'expiring' && <Tag color="orange" className="status-tag">{t('depletingSoon')}</Tag>}
diff --git a/frontend/src/pages/inbounds/InboundInfoModal.css b/frontend/src/pages/inbounds/InboundInfoModal.css
index 4d2cefe4..2240375b 100644
--- a/frontend/src/pages/inbounds/InboundInfoModal.css
+++ b/frontend/src/pages/inbounds/InboundInfoModal.css
@@ -39,7 +39,7 @@
   align-items: center;
   gap: 12px;
   padding: 6px 0;
-  border-bottom: 1px solid rgba(128, 128, 128, 0.12);
+  border-bottom: 1px solid var(--ant-color-border-secondary);
 }
 
 .info-row:last-child {
@@ -108,7 +108,7 @@
 .share-buttons {
   margin-inline-start: 4px;
   padding-inline-start: 8px;
-  border-inline-start: 1px solid rgba(128, 128, 128, 0.25);
+  border-inline-start: 1px solid var(--ant-color-border);
 }
 
 .summary-table {
@@ -153,7 +153,7 @@
 }
 
 .link-panel {
-  border: 1px solid rgba(128, 128, 128, 0.2);
+  border: 1px solid var(--ant-color-border);
   border-radius: 8px;
   padding: 10px;
   margin-bottom: 10px;
diff --git a/frontend/src/pages/inbounds/InboundList.css b/frontend/src/pages/inbounds/InboundList.css
index 59684579..7246719e 100644
--- a/frontend/src/pages/inbounds/InboundList.css
+++ b/frontend/src/pages/inbounds/InboundList.css
@@ -66,20 +66,15 @@
 }
 
 .inbound-card {
-  border: 1px solid rgba(128, 128, 128, 0.2);
+  border: 1px solid var(--ant-color-border-secondary);
   border-radius: 10px;
   padding: 12px;
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--ant-color-fill-quaternary);
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
-.inbounds-page.is-dark .inbound-card {
-  background: rgba(255, 255, 255, 0.03);
-  border-color: rgba(255, 255, 255, 0.1);
-}
-
 .card-head {
   display: flex;
   align-items: center;
diff --git a/frontend/src/pages/inbounds/QrPanel.css b/frontend/src/pages/inbounds/QrPanel.css
index 8f739c9c..b2e2c1d8 100644
--- a/frontend/src/pages/inbounds/QrPanel.css
+++ b/frontend/src/pages/inbounds/QrPanel.css
@@ -1,5 +1,5 @@
 .qr-panel {
-  border: 1px solid rgba(128, 128, 128, 0.2);
+  border: 1px solid var(--ant-color-border-secondary);
   border-radius: 8px;
   padding: 10px;
   margin-bottom: 10px;
diff --git a/frontend/src/pages/index/LogModal.css b/frontend/src/pages/index/LogModal.css
index 09b67842..dff5fbe6 100644
--- a/frontend/src/pages/index/LogModal.css
+++ b/frontend/src/pages/index/LogModal.css
@@ -32,7 +32,7 @@
   word-break: break-word;
   max-height: 60vh;
   overflow-y: auto;
-  border: 1px solid rgba(128, 128, 128, 0.25);
+  border: 1px solid var(--ant-color-border);
   border-radius: 6px;
   background: rgba(0, 0, 0, 0.04);
 }
diff --git a/frontend/src/pages/index/XrayLogModal.css b/frontend/src/pages/index/XrayLogModal.css
index 3a63f4a5..ad80e8cb 100644
--- a/frontend/src/pages/index/XrayLogModal.css
+++ b/frontend/src/pages/index/XrayLogModal.css
@@ -23,7 +23,7 @@
   line-height: 1.5;
   max-height: 60vh;
   overflow: auto;
-  border: 1px solid rgba(128, 128, 128, 0.25);
+  border: 1px solid var(--ant-color-border);
   border-radius: 6px;
   background: rgba(0, 0, 0, 0.04);
 }
diff --git a/frontend/src/pages/nodes/NodeList.css b/frontend/src/pages/nodes/NodeList.css
index 43754c43..baca92fb 100644
--- a/frontend/src/pages/nodes/NodeList.css
+++ b/frontend/src/pages/nodes/NodeList.css
@@ -52,20 +52,15 @@
 }
 
 .node-card {
-  border: 1px solid rgba(128, 128, 128, 0.2);
+  border: 1px solid var(--ant-color-border-secondary);
   border-radius: 10px;
   padding: 12px;
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--ant-color-fill-quaternary);
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
-.nodes-page.is-dark .node-card {
-  background: rgba(255, 255, 255, 0.03);
-  border-color: rgba(255, 255, 255, 0.1);
-}
-
 .card-head {
   display: flex;
   align-items: center;
@@ -135,7 +130,7 @@
 .card-history {
   margin-top: 4px;
   padding-top: 8px;
-  border-top: 1px solid rgba(128, 128, 128, 0.15);
+  border-top: 1px solid var(--ant-color-border-secondary);
 }
 
 .card-empty {
diff --git a/frontend/src/pages/settings/SecurityTab.css b/frontend/src/pages/settings/SecurityTab.css
index 158f45ed..e078c081 100644
--- a/frontend/src/pages/settings/SecurityTab.css
+++ b/frontend/src/pages/settings/SecurityTab.css
@@ -22,7 +22,7 @@
 }
 
 .api-token-row {
-  border: 1px solid rgba(128, 128, 128, 0.18);
+  border: 1px solid var(--ant-color-border-secondary);
   border-radius: 8px;
   padding: 10px 12px;
   display: flex;
@@ -78,7 +78,7 @@
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 12.5px;
   padding: 4px 8px;
-  background: rgba(128, 128, 128, 0.08);
+  background: var(--ant-color-fill-tertiary);
   border-radius: 4px;
   word-break: break-all;
 }
diff --git a/frontend/src/pages/xray/NordModal.css b/frontend/src/pages/xray/NordModal.css
index 1ef2ca1e..fa46344f 100644
--- a/frontend/src/pages/xray/NordModal.css
+++ b/frontend/src/pages/xray/NordModal.css
@@ -19,7 +19,7 @@
 }
 
 .nord-data-table .row-odd {
-  background: rgba(128, 128, 128, 0.06);
+  background: var(--ant-color-fill-tertiary);
 }
 
 .zero-margin {
diff --git a/frontend/src/pages/xray/RoutingTab.css b/frontend/src/pages/xray/RoutingTab.css
index 386febea..cdcb5f9a 100644
--- a/frontend/src/pages/xray/RoutingTab.css
+++ b/frontend/src/pages/xray/RoutingTab.css
@@ -113,7 +113,7 @@
   gap: 8px;
   padding: 10px 12px;
   background: var(--bg-card, #fff);
-  border: 1px solid rgba(128, 128, 128, 0.15);
+  border: 1px solid var(--ant-color-border-secondary);
   border-radius: 8px;
   transition: opacity 0.15s, box-shadow 0.15s;
 }
@@ -123,11 +123,11 @@
 }
 
 .rule-card.drop-before {
-  box-shadow: inset 0 2px 0 0 #1677ff;
+  box-shadow: inset 0 2px 0 0 var(--ant-color-primary);
 }
 
 .rule-card.drop-after {
-  box-shadow: inset 0 -2px 0 0 #1677ff;
+  box-shadow: inset 0 -2px 0 0 var(--ant-color-primary);
 }
 
 .rule-card-head {
@@ -188,7 +188,7 @@
   flex-wrap: wrap;
   gap: 4px;
   padding-top: 6px;
-  border-top: 1px dashed rgba(128, 128, 128, 0.2);
+  border-top: 1px dashed var(--ant-color-border);
 }
 
 .criterion-chip {
@@ -197,7 +197,7 @@
   gap: 4px;
   padding: 1px 6px;
   font-size: 11px;
-  background: rgba(128, 128, 128, 0.08);
+  background: var(--ant-color-fill-tertiary);
   border-radius: 4px;
   max-width: 100%;
   overflow: hidden;
diff --git a/frontend/src/pages/xray/WarpModal.css b/frontend/src/pages/xray/WarpModal.css
index cd6b1b7d..ae9638e3 100644
--- a/frontend/src/pages/xray/WarpModal.css
+++ b/frontend/src/pages/xray/WarpModal.css
@@ -19,7 +19,7 @@
 }
 
 .warp-data-table .row-odd {
-  background: rgba(128, 128, 128, 0.06);
+  background: var(--ant-color-fill-tertiary);
 }
 
 .zero-margin {