refactor(frontend): swap hardcoded AntD palette colors for CSS variables

The dot/badge/pill styles still hardcoded AntD's default palette values
(#52c41a, #1677ff, #ff4d4f, #fa8c16, #ff4d4f). Replace each with its
semantic --ant-color-* equivalent so they auto-adapt to any theme
customization through ConfigProvider.

- ClientsPage: .dot-green/.dot-blue/.dot-red/.dot-orange/.dot-gray now
  use --ant-color-success / -primary / -error / -warning / -text-quaternary.
  .bulk-count / .client-card / .client-card.is-selected backgrounds use
  color-mix on --ant-color-primary and --ant-color-fill-quaternary, which
  also let the body-dark .client-card fork go away.
- XrayMetricsModal: .obs-dot is-alive/is-dead and its pulse keyframe now
  build their box-shadow tint via color-mix on --ant-color-success and
  --ant-color-error instead of rgba literals.
- IndexPage: .action-update warning color uses --ant-color-warning.
- OutboundsTab: .outbound-card border, .address-pill background, and
  .mode-badge tint now use AntD CSS variables; the .xray-page.is-dark
  .address-pill fork is gone.
- InboundFormModal/InboundsPage/ClientBulkAddModal: drop the stale
  `, #1677ff`/`, #1890ff` fallbacks on var(--ant-color-primary), and
  switch .danger-icon to --ant-color-error.

The teal/cyan brand colors (#008771, #3c89e8, #e04141) used by traffic
and pill rows are intentionally kept hardcoded — they are brand-specific
shades, not AntD palette colors.

frontend/src/pages/clients/ClientBulkAddModal.css

@@ -1,5 +1,5 @@
 .random-icon {
   margin-left: 4px;
   cursor: pointer;
-  color: var(--ant-color-primary, #1677ff);
+  color: var(--ant-color-primary);
 }

frontend/src/pages/clients/ClientsPage.css

@@ -92,11 +92,11 @@
   vertical-align: middle;
 }
 
-.dot-green { background: #52c41a; }
+.dot-green { background: var(--ant-color-success); }
-.dot-blue { background: #1677ff; }
+.dot-blue { background: var(--ant-color-primary); }
-.dot-red { background: #ff4d4f; }
+.dot-red { background: var(--ant-color-error); }
-.dot-orange { background: #fa8c16; }
+.dot-orange { background: var(--ant-color-warning); }
-.dot-gray { background: rgba(128, 128, 128, 0.6); }
+.dot-gray { background: var(--ant-color-text-quaternary); }
 
 .status-tag {
   margin: 0 0 0 4px;
@@ -159,27 +159,22 @@
 
 .bulk-count {
   font-size: 12px;
-  background: rgba(22, 119, 255, 0.12);
+  background: color-mix(in srgb, var(--ant-color-primary) 12%, transparent);
-  color: var(--ant-color-primary, #1677ff);
+  color: var(--ant-color-primary);
   padding: 1px 8px;
   border-radius: 10px;
 }
 
 .client-card {
-  border: 1px solid rgba(128, 128, 128, 0.2);
+  border: 1px solid var(--ant-color-border-secondary);
   border-radius: 10px;
   padding: 10px 12px;
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--ant-color-fill-quaternary);
 }
 
 .client-card.is-selected {
-  border-color: var(--ant-color-primary, #1677ff);
+  border-color: var(--ant-color-primary);
-  background: rgba(22, 119, 255, 0.06);
+  background: color-mix(in srgb, var(--ant-color-primary) 6%, transparent);
-}
-
-.clients-page.is-dark .client-card {
-  background: rgba(255, 255, 255, 0.03);
-  border-color: rgba(255, 255, 255, 0.1);
 }
 
 .card-head {

frontend/src/pages/inbounds/InboundFormModal.css

@@ -8,13 +8,13 @@
 .random-icon {
   margin-left: 4px;
   cursor: pointer;
-  color: var(--ant-color-primary, #1890ff);
+  color: var(--ant-color-primary);
 }
 
 .danger-icon {
   margin-left: 6px;
   cursor: pointer;
-  color: #ff4d4f;
+  color: var(--ant-color-error);
 }
 
 .vless-auth-state {

frontend/src/pages/index/IndexPage.css

@@ -55,12 +55,12 @@
 }
 
 .index-page .action-update {
-  color: #fa8c16;
+  color: var(--ant-color-warning);
   font-weight: 600;
 }
 
 .index-page .action-update .anticon {
-  color: #fa8c16;
+  color: var(--ant-color-warning);
 }
 
 .index-page .history-tag {

frontend/src/pages/index/XrayMetricsModal.css

@@ -40,23 +40,23 @@
   border-radius: 50%;
   margin-right: 6px;
   vertical-align: middle;
-  box-shadow: 0 0 0 3px rgba(82, 196, 26, 0.18);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ant-color-success) 18%, transparent);
 }
 
 .obs-dot.is-alive {
-  background: #52c41a;
+  background: var(--ant-color-success);
-  box-shadow: 0 0 0 3px rgba(82, 196, 26, 0.22);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ant-color-success) 22%, transparent);
   animation: obs-dot-pulse 2.2s ease-in-out infinite;
 }
 
 .obs-dot.is-dead {
-  background: #f5222d;
+  background: var(--ant-color-error);
-  box-shadow: 0 0 0 3px rgba(245, 34, 45, 0.22);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ant-color-error) 22%, transparent);
 }
 
 @keyframes obs-dot-pulse {
-  0%, 100% { box-shadow: 0 0 0 3px rgba(82, 196, 26, 0.22); }
+  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ant-color-success) 22%, transparent); }
-  50% { box-shadow: 0 0 0 6px rgba(82, 196, 26, 0.06); }
+  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ant-color-success) 6%, transparent); }
 }
 
 @media (prefers-reduced-motion: reduce) {

frontend/src/pages/xray/OutboundsTab.css

@@ -10,7 +10,7 @@
 }
 
 .outbound-card {
-  border: 1px solid rgba(128, 128, 128, 0.2);
+  border: 1px solid var(--ant-color-border-secondary);
   border-radius: 8px;
   padding: 12px;
   margin-bottom: 8px;
@@ -65,11 +65,7 @@
   font-size: 11px;
   padding: 2px 6px;
   border-radius: 4px;
-  background: rgba(0, 0, 0, 0.05);
+  background: var(--ant-color-fill-tertiary);
-}
-
-.xray-page.is-dark .address-pill {
-  background: rgba(255, 255, 255, 0.06);
 }
 
 .action-cell {
@@ -181,8 +177,8 @@
   font-weight: 500;
   padding: 0 6px;
   border-radius: 8px;
-  background: rgba(22, 119, 255, 0.12);
+  background: color-mix(in srgb, var(--ant-color-primary) 12%, transparent);
-  color: #1677ff;
+  color: var(--ant-color-primary);
   margin-left: auto;
 }