From 36e75143fa5c2a5eaf954ee0b9c69d08065e414e Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Fri, 8 May 2026 17:21:03 +0200
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20Phase=209=20=E2=80=94=20restor?=
 =?UTF-8?q?e=20index=20dashboard,=20fix=20login/CSRF,=20port=20legacy=20st?=
 =?UTF-8?q?yles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Index dashboard regains the 8 cards that were lost in the SPA port
  (3X-UI panel info, Operation Hours, System Load, Usage, Overall Speed,
  Total Data, IP Addresses, Connection Stats), plus a Config button that
  shows the live xray config.json. Version display falls back through
  panelUpdateInfo → window.__X_UI_CUR_VER__ → '?' so dev mode isn't blank.
- Xray config no longer hangs on load: useXraySetting surfaces failures
  instead of leaving a perpetual spinner, and the Vite dev proxy stops
  hijacking POST requests to migrated routes (only GETs get bypassed).
- Inbound page no longer throws __asyncLoader/emitsOptions errors —
  inbound.js was missing imports (NumberFormatter, SizeFormatter,
  Wireguard) and InboundList kept emitting after unmount.
- Login round-trip works after logout: a public /csrf-token endpoint
  bootstraps the SPA before authentication, axios caches the token
  module-level, and the dev 401 handler navigates to /login.html
  instead of reloading the dashboard into a redirect loop.
- legacy.css mirrors the legacy panel's surface/text variables so dark
  and ultra-dark themes match main; every SPA entry imports it.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/api/axios-init.js                |  18 +-
 frontend/src/components/AppSidebar.vue        |   2 +-
 frontend/src/inbounds.js                      |   1 +
 frontend/src/index.js                         |   5 +
 frontend/src/login.js                         |   1 +
 frontend/src/models/inbound.js                |   2 +-
 frontend/src/pages/inbounds/InboundList.vue   |   6 +-
 frontend/src/pages/index/BackupModal.vue      |  19 +-
 frontend/src/pages/index/CpuHistoryModal.vue  |  18 +-
 .../src/pages/index/CustomGeoFormModal.vue    |  19 +-
 frontend/src/pages/index/CustomGeoSection.vue |  62 ++--
 frontend/src/pages/index/IndexPage.vue        | 264 +++++++++++++++---
 frontend/src/pages/index/LogModal.vue         |   4 +-
 frontend/src/pages/index/PanelUpdateModal.vue |  35 ++-
 frontend/src/pages/index/StatusCard.vue       |  40 +--
 frontend/src/pages/index/VersionModal.vue     |  28 +-
 frontend/src/pages/index/XrayLogModal.vue     |   5 +-
 frontend/src/pages/index/XrayStatusCard.vue   |  33 ++-
 frontend/src/pages/login/LoginPage.vue        | 235 +++++++++-------
 frontend/src/pages/xray/useXraySetting.js     |  21 +-
 frontend/src/settings.js                      |   1 +
 frontend/src/styles/legacy.css                |   1 +
 frontend/src/xray.js                          |   1 +
 frontend/vite.config.js                       |   7 +-
 web/controller/dist.go                        |  30 +-
 web/controller/index.go                       |  17 ++
 26 files changed, 585 insertions(+), 290 deletions(-)
 create mode 100644 frontend/src/styles/legacy.css

diff --git a/frontend/src/api/axios-init.js b/frontend/src/api/axios-init.js
index a9cafc78..f651e82a 100644
--- a/frontend/src/api/axios-init.js
+++ b/frontend/src/api/axios-init.js
@@ -2,7 +2,10 @@ import axios from 'axios';
 import qs from 'qs';
 
 const SAFE_METHODS = new Set(['GET', 'HEAD', 'OPTIONS', 'TRACE']);
-const CSRF_TOKEN_PATH = '/panel/csrf-token';
+// Public CSRF endpoint — works pre-login (the panel-scoped
+// /panel/csrf-token sits behind checkLogin and would 401 a fresh
+// login page that hasn't authenticated yet).
+const CSRF_TOKEN_PATH = '/csrf-token';
 
 // Cached session CSRF token. The legacy panel injects it via a
 // <meta name="csrf-token"> tag rendered by Go; the new SPA pages
@@ -79,7 +82,18 @@ export function setupAxios() {
     async (error) => {
       const status = error.response?.status;
       if (status === 401) {
-        window.location.reload();
+        // 401 → session is gone. In production, the panel routes
+        // are gated by Go's checkLogin which redirects to base_path
+        // serving the login page; a reload is enough. In dev, Vite
+        // serves /index.html directly at "/", so a reload would put
+        // the user right back on the dashboard and the interceptor
+        // would loop. Navigate to the dev login entry instead.
+        if (import.meta.env.DEV) {
+          const basePath = window.__X_UI_BASE_PATH__ || '/';
+          window.location.href = `${basePath}login.html`;
+        } else {
+          window.location.reload();
+        }
         return Promise.reject(error);
       }
       // 403 with a stale/missing CSRF token: drop the cache, re-fetch, retry once.
diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index fb866d35..58b13c90 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -52,7 +52,7 @@ const tabs = computed(() => [
   { key: `${prefix}panel/inbounds`, icon: 'user',      title: t('menu.inbounds') },
   { key: `${prefix}panel/settings`, icon: 'setting',   title: t('menu.settings') },
   { key: `${prefix}panel/xray`,     icon: 'tool',      title: t('menu.xray') },
-  { key: `${prefix}logout/`,        icon: 'logout',    title: t('logout') },
+  { key: `${prefix}logout`,         icon: 'logout',    title: t('logout') },
 ]);
 
 const activeTab = ref([props.requestUri]);
diff --git a/frontend/src/inbounds.js b/frontend/src/inbounds.js
index 15b34d2e..ba90f0ed 100644
--- a/frontend/src/inbounds.js
+++ b/frontend/src/inbounds.js
@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import Antd, { message } from 'ant-design-vue';
 import 'ant-design-vue/dist/reset.css';
+import '@/styles/legacy.css';
 
 import { setupAxios } from '@/api/axios-init.js';
 import '@/composables/useTheme.js';
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 61d9dc12..b1712151 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,6 +1,11 @@
 import { createApp } from 'vue';
 import Antd, { message } from 'ant-design-vue';
 import 'ant-design-vue/dist/reset.css';
+// Legacy panel CSS — overrides AD-Vue defaults to match the
+// pre-migration look (palette, dark mode contrast, tag colors,
+// table/tooltip styling). Loaded after AD-Vue's reset so its
+// rules win.
+import '@/styles/legacy.css';
 
 import { setupAxios } from '@/api/axios-init.js';
 // Importing useTheme triggers the boot side-effect that applies the
diff --git a/frontend/src/login.js b/frontend/src/login.js
index ec90a9fb..8ca1cc3d 100644
--- a/frontend/src/login.js
+++ b/frontend/src/login.js
@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import Antd, { message } from 'ant-design-vue';
 import 'ant-design-vue/dist/reset.css';
+import '@/styles/legacy.css';
 
 import { setupAxios } from '@/api/axios-init.js';
 // Importing this module triggers the boot side-effect that applies the
diff --git a/frontend/src/models/inbound.js b/frontend/src/models/inbound.js
index d2e2bac6..791885e9 100644
--- a/frontend/src/models/inbound.js
+++ b/frontend/src/models/inbound.js
@@ -1,4 +1,4 @@
-import { ObjectUtil, RandomUtil, Base64 } from '@/utils';
+import { ObjectUtil, RandomUtil, Base64, NumberFormatter, SizeFormatter, Wireguard } from '@/utils';
 
 export const Protocols = {
     VMESS: 'vmess',
diff --git a/frontend/src/pages/inbounds/InboundList.vue b/frontend/src/pages/inbounds/InboundList.vue
index ea570a50..60760430 100644
--- a/frontend/src/pages/inbounds/InboundList.vue
+++ b/frontend/src/pages/inbounds/InboundList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import {
   PlusOutlined,
@@ -89,6 +89,10 @@ watch(refreshIntervalMs, (next) => {
   localStorage.setItem('refreshInterval', String(next));
   if (isRefreshEnabled.value) startAutoRefresh();
 });
+// Without this, a stale setInterval keeps firing emit('refresh') after
+// the component unmounts, which Vue surfaces as "emitsOptions" /
+// "__asyncLoader" exceptions on the next tick.
+onBeforeUnmount(stopAutoRefresh);
 
 // Toggle the filter mode — flip cleans the other input.
 function onToggleFilter() {
diff --git a/frontend/src/pages/index/BackupModal.vue b/frontend/src/pages/index/BackupModal.vue
index 862e58df..a7a9fc4f 100644
--- a/frontend/src/pages/index/BackupModal.vue
+++ b/frontend/src/pages/index/BackupModal.vue
@@ -67,7 +67,9 @@ function importDb() {
           <template #description>{{ t('pages.index.exportDatabaseDesc') }}</template>
         </a-list-item-meta>
         <a-button type="primary" @click="exportDb">
-          <template #icon><DownloadOutlined /></template>
+          <template #icon>
+            <DownloadOutlined />
+          </template>
         </a-button>
       </a-list-item>
 
@@ -77,7 +79,9 @@ function importDb() {
           <template #description>{{ t('pages.index.importDatabaseDesc') }}</template>
         </a-list-item-meta>
         <a-button type="primary" @click="importDb">
-          <template #icon><UploadOutlined /></template>
+          <template #icon>
+            <UploadOutlined />
+          </template>
         </a-button>
       </a-list-item>
     </a-list>
@@ -85,6 +89,13 @@ function importDb() {
 </template>
 
 <style scoped>
-.backup-list { width: 100%; }
-.backup-item { display: flex; align-items: center; gap: 16px; }
+.backup-list {
+  width: 100%;
+}
+
+.backup-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
 </style>
diff --git a/frontend/src/pages/index/CpuHistoryModal.vue b/frontend/src/pages/index/CpuHistoryModal.vue
index c392a4e4..fdc68367 100644
--- a/frontend/src/pages/index/CpuHistoryModal.vue
+++ b/frontend/src/pages/index/CpuHistoryModal.vue
@@ -63,21 +63,9 @@ watch(bucket, () => { if (props.open) fetchBucket(); });
     </template>
 
     <div class="cpu-chart-wrap">
-      <Sparkline
-        :data="points"
-        :labels="labels"
-        :vb-width="840"
-        :height="220"
-        :stroke="status?.cpu?.color || '#008771'"
-        :stroke-width="2.2"
-        :show-grid="true"
-        :show-axes="true"
-        :tick-count-x="5"
-        :max-points="points.length || 1"
-        :fill-opacity="0.18"
-        :marker-radius="3.2"
-        :show-tooltip="true"
-      />
+      <Sparkline :data="points" :labels="labels" :vb-width="840" :height="220" :stroke="status?.cpu?.color || '#008771'"
+        :stroke-width="2.2" :show-grid="true" :show-axes="true" :tick-count-x="5" :max-points="points.length || 1"
+        :fill-opacity="0.18" :marker-radius="3.2" :show-tooltip="true" />
       <div class="cpu-chart-meta">
         Timeframe: {{ bucket }} sec per point (total {{ points.length }} points)
       </div>
diff --git a/frontend/src/pages/index/CustomGeoFormModal.vue b/frontend/src/pages/index/CustomGeoFormModal.vue
index 5b58b31a..c5c871d6 100644
--- a/frontend/src/pages/index/CustomGeoFormModal.vue
+++ b/frontend/src/pages/index/CustomGeoFormModal.vue
@@ -84,15 +84,9 @@ async function submit() {
 </script>
 
 <template>
-  <a-modal
-    :open="open"
-    :title="editing ? t('pages.index.customGeoModalEdit') : t('pages.index.customGeoModalAdd')"
-    :confirm-loading="saving"
-    :ok-text="t('pages.index.customGeoModalSave')"
-    :cancel-text="t('close')"
-    @ok="submit"
-    @cancel="close"
-  >
+  <a-modal :open="open" :title="editing ? t('pages.index.customGeoModalEdit') : t('pages.index.customGeoModalAdd')"
+    :confirm-loading="saving" :ok-text="t('pages.index.customGeoModalSave')" :cancel-text="t('close')" @ok="submit"
+    @cancel="close">
     <a-form layout="vertical">
       <a-form-item :label="t('pages.index.customGeoType')">
         <a-select v-model:value="form.type" :disabled="editing">
@@ -101,11 +95,8 @@ async function submit() {
         </a-select>
       </a-form-item>
       <a-form-item :label="t('pages.index.customGeoAlias')">
-        <a-input
-          v-model:value="form.alias"
-          :disabled="editing"
-          :placeholder="t('pages.index.customGeoAliasPlaceholder')"
-        />
+        <a-input v-model:value="form.alias" :disabled="editing"
+          :placeholder="t('pages.index.customGeoAliasPlaceholder')" />
       </a-form-item>
       <a-form-item :label="t('pages.index.customGeoUrl')">
         <a-input v-model:value="form.url" placeholder="https://" />
diff --git a/frontend/src/pages/index/CustomGeoSection.vue b/frontend/src/pages/index/CustomGeoSection.vue
index c429b533..55f13cec 100644
--- a/frontend/src/pages/index/CustomGeoSection.vue
+++ b/frontend/src/pages/index/CustomGeoSection.vue
@@ -134,34 +134,26 @@ watch(() => props.active, (next) => { if (next) loadList(); }, { immediate: true
 
 <template>
   <div class="custom-geo-section">
-    <a-alert
-      type="info"
-      show-icon
-      class="mb-10"
-      :message="t('pages.index.customGeoRoutingHint')"
-    />
+    <a-alert type="info" show-icon class="mb-10" :message="t('pages.index.customGeoRoutingHint')" />
 
     <div class="toolbar">
       <a-button type="primary" :loading="loading" @click="openAdd">
-        <template #icon><PlusOutlined /></template>
+        <template #icon>
+          <PlusOutlined />
+        </template>
         {{ t('pages.index.customGeoAdd') }}
       </a-button>
       <a-button :loading="updatingAll" :disabled="!list.length" @click="updateAll">
-        <template #icon><ReloadOutlined /></template>
+        <template #icon>
+          <ReloadOutlined />
+        </template>
         {{ t('pages.index.geofilesUpdateAll') }}
       </a-button>
       <span v-if="list.length" class="custom-geo-count">{{ list.length }}</span>
     </div>
 
-    <a-table
-      :columns="columns"
-      :data-source="list"
-      :pagination="false"
-      :row-key="(r) => r.id"
-      :loading="loading"
-      size="small"
-      :scroll="{ x: 760 }"
-    >
+    <a-table :columns="columns" :data-source="list" :pagination="false" :row-key="(r) => r.id" :loading="loading"
+      size="small" :scroll="{ x: 760 }">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'alias'">
           <div class="custom-geo-alias-cell">
@@ -199,22 +191,23 @@ watch(() => props.active, (next) => { if (next) loadList(); }, { immediate: true
           <a-space size="small">
             <a-tooltip :title="t('pages.index.customGeoEdit')">
               <a-button type="link" size="small" @click="openEdit(record)">
-                <template #icon><EditOutlined /></template>
+                <template #icon>
+                  <EditOutlined />
+                </template>
               </a-button>
             </a-tooltip>
             <a-tooltip :title="t('pages.index.customGeoDownload')">
-              <a-button
-                type="link"
-                size="small"
-                :loading="actionId === record.id"
-                @click="downloadOne(record.id)"
-              >
-                <template #icon><ReloadOutlined /></template>
+              <a-button type="link" size="small" :loading="actionId === record.id" @click="downloadOne(record.id)">
+                <template #icon>
+                  <ReloadOutlined />
+                </template>
               </a-button>
             </a-tooltip>
             <a-tooltip :title="t('pages.index.customGeoDelete')">
               <a-button type="link" size="small" danger @click="confirmDelete(record)">
-                <template #icon><DeleteOutlined /></template>
+                <template #icon>
+                  <DeleteOutlined />
+                </template>
               </a-button>
             </a-tooltip>
           </a-space>
@@ -229,16 +222,14 @@ watch(() => props.active, (next) => { if (next) loadList(); }, { immediate: true
       </template>
     </a-table>
 
-    <CustomGeoFormModal
-      v-model:open="formOpen"
-      :record="editingRecord"
-      @saved="loadList"
-    />
+    <CustomGeoFormModal v-model:open="formOpen" :record="editingRecord" @saved="loadList" />
   </div>
 </template>
 
 <style scoped>
-.mb-10 { margin-bottom: 10px; }
+.mb-10 {
+  margin-bottom: 10px;
+}
 
 .toolbar {
   display: flex;
@@ -256,6 +247,7 @@ watch(() => props.active, (next) => { if (next) loadList(); }, { immediate: true
   font-size: 12px;
   opacity: 0.75;
 }
+
 :global(body.dark) .custom-geo-count {
   background: rgba(255, 255, 255, 0.08);
 }
@@ -265,10 +257,12 @@ watch(() => props.active, (next) => { if (next) loadList(); }, { immediate: true
   align-items: center;
   gap: 6px;
 }
+
 .custom-geo-alias {
   font-weight: 500;
   word-break: break-all;
 }
+
 .custom-geo-type-tag {
   margin: 0;
 }
@@ -286,12 +280,15 @@ watch(() => props.active, (next) => { if (next) loadList(); }, { immediate: true
   background: rgba(0, 0, 0, 0.05);
   user-select: all;
 }
+
 .custom-geo-copyable:hover {
   background: rgba(0, 0, 0, 0.1);
 }
+
 :global(body.dark) .custom-geo-ext-code {
   background: rgba(255, 255, 255, 0.08);
 }
+
 :global(body.dark) .custom-geo-copyable:hover {
   background: rgba(255, 255, 255, 0.14);
 }
@@ -305,6 +302,7 @@ watch(() => props.active, (next) => { if (next) loadList(); }, { immediate: true
   padding: 18px 0;
   opacity: 0.6;
 }
+
 .custom-geo-empty-icon {
   font-size: 32px;
   margin-bottom: 6px;
diff --git a/frontend/src/pages/index/IndexPage.vue b/frontend/src/pages/index/IndexPage.vue
index 5c7ac0cf..28395559 100644
--- a/frontend/src/pages/index/IndexPage.vue
+++ b/frontend/src/pages/index/IndexPage.vue
@@ -2,15 +2,29 @@
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { theme as antdTheme } from 'ant-design-vue';
-import { BarsOutlined, CloudServerOutlined, CloudDownloadOutlined } from '@ant-design/icons-vue';
+import {
+  BarsOutlined,
+  ControlOutlined,
+  CloudServerOutlined,
+  CloudDownloadOutlined,
+  CloudUploadOutlined,
+  ArrowUpOutlined,
+  ArrowDownOutlined,
+  GlobalOutlined,
+  SwapOutlined,
+  EyeOutlined,
+  EyeInvisibleOutlined,
+} from '@ant-design/icons-vue';
 
 const { t } = useI18n();
 
-import { HttpUtil } from '@/utils';
+import { HttpUtil, SizeFormatter, TimeFormatter } from '@/utils';
 import { theme as themeState } from '@/composables/useTheme.js';
 import { useStatus } from '@/composables/useStatus.js';
 import { useMediaQuery } from '@/composables/useMediaQuery.js';
 import AppSidebar from '@/components/AppSidebar.vue';
+import CustomStatistic from '@/components/CustomStatistic.vue';
+import TextModal from '@/components/TextModal.vue';
 import StatusCard from './StatusCard.vue';
 import XrayStatusCard from './XrayStatusCard.vue';
 import PanelUpdateModal from './PanelUpdateModal.vue';
@@ -47,6 +61,16 @@ onMounted(() => {
 const basePath = window.__X_UI_BASE_PATH__ || '';
 const requestUri = window.location.pathname;
 
+// In production, dist.go injects window.__X_UI_CUR_VER__ at serve time.
+// In dev, Vite serves the HTML directly so the global is missing — fall
+// back to currentVersion from the panel-update API once it answers.
+const displayVersion = computed(
+  () => panelUpdateInfo.value?.currentVersion || window.__X_UI_CUR_VER__ || '?',
+);
+
+// Hide/reveal the public IPv4/IPv6 — same pattern as legacy.
+const showIp = ref(false);
+
 // Modal open state.
 const logsOpen = ref(false);
 const backupOpen = ref(false);
@@ -54,6 +78,8 @@ const panelUpdateOpen = ref(false);
 const cpuHistoryOpen = ref(false);
 const xrayLogsOpen = ref(false);
 const versionOpen = ref(false);
+const configTextOpen = ref(false);
+const configText = ref('');
 
 // Page-level loading overlay; modals can request it via @busy.
 const loading = ref(false);
@@ -76,6 +102,20 @@ async function restartXray() {
 function openCpuHistory() { cpuHistoryOpen.value = true; }
 function openXrayLogs() { xrayLogsOpen.value = true; }
 function openVersionSwitch() { versionOpen.value = true; }
+
+// Legacy "Config" action — fetch the rendered xray config and show
+// it as JSON in the shared TextModal (same UX as main).
+async function openConfig() {
+  loading.value = true;
+  try {
+    const msg = await HttpUtil.get('/panel/api/server/getConfigJson');
+    if (!msg?.success) return;
+    configText.value = JSON.stringify(msg.obj, null, 2);
+    configTextOpen.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
 </script>
 
 <template>
@@ -94,68 +134,191 @@ function openVersionSwitch() { versionOpen.value = true; }
               </a-col>
 
               <a-col :sm="24" :lg="12">
-                <XrayStatusCard
-                  :status="status"
-                  :is-mobile="isMobile"
-                  :ip-limit-enable="ipLimitEnable"
-                  @stop-xray="stopXray"
-                  @restart-xray="restartXray"
-                  @open-xray-logs="openXrayLogs"
-                  @open-logs="logsOpen = true"
-                  @open-version-switch="openVersionSwitch"
-                />
+                <XrayStatusCard :status="status" :is-mobile="isMobile" :ip-limit-enable="ipLimitEnable"
+                  @stop-xray="stopXray" @restart-xray="restartXray" @open-xray-logs="openXrayLogs"
+                  @open-logs="logsOpen = true" @open-version-switch="openVersionSwitch" />
               </a-col>
 
               <a-col :sm="24" :lg="12">
                 <a-card :title="t('menu.link')" hoverable>
-                  <template v-if="panelUpdateInfo.updateAvailable" #extra>
-                    <a-tooltip :title="`${t('pages.index.updatePanel')}: ${panelUpdateInfo.latestVersion}`">
-                      <a-tag color="orange" class="update-tag" @click="panelUpdateOpen = true">
-                        <CloudDownloadOutlined />
-                        {{ panelUpdateInfo.latestVersion }}
-                        <span v-if="!isMobile">{{ t('update') }}</span>
-                      </a-tag>
-                    </a-tooltip>
-                  </template>
                   <template #actions>
                     <a-space class="action" @click="logsOpen = true">
                       <BarsOutlined />
                       <span v-if="!isMobile">{{ t('pages.index.logs') }}</span>
                     </a-space>
+                    <a-space class="action" @click="openConfig">
+                      <ControlOutlined />
+                      <span v-if="!isMobile">{{ t('pages.index.config') }}</span>
+                    </a-space>
                     <a-space class="action" @click="backupOpen = true">
                       <CloudServerOutlined />
                       <span v-if="!isMobile">{{ t('pages.index.backupTitle') }}</span>
                     </a-space>
-                    <a-space class="action" @click="panelUpdateOpen = true">
-                      <CloudDownloadOutlined />
-                      <span v-if="!isMobile">
-                        {{ panelUpdateInfo.updateAvailable
-                          ? `${t('update')} → ${panelUpdateInfo.latestVersion}`
-                          : t('pages.index.panelUpToDate') }}
-                      </span>
-                    </a-space>
                   </template>
                 </a-card>
               </a-col>
+
+              <a-col :sm="24" :lg="12">
+                <a-card title="3X-UI" hoverable>
+                  <template v-if="panelUpdateInfo.updateAvailable" #extra>
+                    <a-tooltip :title="`${t('pages.index.updatePanel')}: ${panelUpdateInfo.latestVersion}`">
+                      <a-tag color="orange" class="update-tag" @click="panelUpdateOpen = true">
+                        <CloudDownloadOutlined />
+                        {{ panelUpdateInfo.latestVersion }}
+                        <span v-if="!isMobile">{{ t('pages.index.updatePanel') }}</span>
+                      </a-tag>
+                    </a-tooltip>
+                  </template>
+                  <a href="https://github.com/MHSanaei/3x-ui/releases" target="_blank" rel="noopener noreferrer">
+                    <a-tag color="green">v{{ displayVersion }}</a-tag>
+                  </a>
+                  <a href="https://t.me/XrayUI" target="_blank" rel="noopener noreferrer">
+                    <a-tag color="green">@XrayUI</a-tag>
+                  </a>
+                  <a href="https://github.com/MHSanaei/3x-ui/wiki" target="_blank" rel="noopener noreferrer">
+                    <a-tag color="purple">{{ t('pages.index.documentation') }}</a-tag>
+                  </a>
+                </a-card>
+              </a-col>
+
+              <a-col :sm="24" :lg="12">
+                <a-card :title="t('pages.index.operationHours')" hoverable>
+                  <a-tag :color="status.xray.color">
+                    Xray: {{ TimeFormatter.formatSecond(status.appStats.uptime) }}
+                  </a-tag>
+                  <a-tag color="green">OS: {{ TimeFormatter.formatSecond(status.uptime) }}</a-tag>
+                </a-card>
+              </a-col>
+
+              <a-col :sm="24" :lg="12">
+                <a-card :title="t('pages.index.systemLoad')" hoverable>
+                  <a-tooltip :title="t('pages.index.systemLoadDesc')">
+                    <a-tag color="green">
+                      {{ status.loads[0] }} | {{ status.loads[1] }} | {{ status.loads[2] }}
+                    </a-tag>
+                  </a-tooltip>
+                </a-card>
+              </a-col>
+
+              <a-col :sm="24" :lg="12">
+                <a-card :title="t('usage')" hoverable>
+                  <a-tag color="green">
+                    {{ t('pages.index.memory') }}: {{ SizeFormatter.sizeFormat(status.appStats.mem) }}
+                  </a-tag>
+                  <a-tag color="green">
+                    {{ t('pages.index.threads') }}: {{ status.appStats.threads }}
+                  </a-tag>
+                </a-card>
+              </a-col>
+
+              <a-col :sm="24" :lg="12">
+                <a-card :title="t('pages.index.overallSpeed')" hoverable>
+                  <a-row :gutter="isMobile ? [8, 8] : 0">
+                    <a-col :span="12">
+                      <CustomStatistic :title="t('pages.index.upload')"
+                        :value="SizeFormatter.sizeFormat(status.netIO.up)">
+                        <template #prefix>
+                          <ArrowUpOutlined />
+                        </template>
+                        <template #suffix>/s</template>
+                      </CustomStatistic>
+                    </a-col>
+                    <a-col :span="12">
+                      <CustomStatistic :title="t('pages.index.download')"
+                        :value="SizeFormatter.sizeFormat(status.netIO.down)">
+                        <template #prefix>
+                          <ArrowDownOutlined />
+                        </template>
+                        <template #suffix>/s</template>
+                      </CustomStatistic>
+                    </a-col>
+                  </a-row>
+                </a-card>
+              </a-col>
+
+              <a-col :sm="24" :lg="12">
+                <a-card :title="t('pages.index.totalData')" hoverable>
+                  <a-row :gutter="isMobile ? [8, 8] : 0">
+                    <a-col :span="12">
+                      <CustomStatistic :title="t('pages.index.sent')"
+                        :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
+                        <template #prefix>
+                          <CloudUploadOutlined />
+                        </template>
+                      </CustomStatistic>
+                    </a-col>
+                    <a-col :span="12">
+                      <CustomStatistic :title="t('pages.index.received')"
+                        :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
+                        <template #prefix>
+                          <CloudDownloadOutlined />
+                        </template>
+                      </CustomStatistic>
+                    </a-col>
+                  </a-row>
+                </a-card>
+              </a-col>
+
+              <a-col :sm="24" :lg="12">
+                <a-card :title="t('pages.index.ipAddresses')" hoverable>
+                  <template #extra>
+                    <a-tooltip :title="t('pages.index.toggleIpVisibility')" :placement="isMobile ? 'topRight' : 'top'">
+                      <component :is="showIp ? EyeOutlined : EyeInvisibleOutlined" class="ip-toggle-icon"
+                        @click="showIp = !showIp" />
+                    </a-tooltip>
+                  </template>
+                  <a-row :class="showIp ? 'ip-visible' : 'ip-hidden'" :gutter="isMobile ? [8, 8] : 0">
+                    <a-col :span="isMobile ? 24 : 12">
+                      <CustomStatistic title="IPv4" :value="status.publicIP.ipv4">
+                        <template #prefix>
+                          <GlobalOutlined />
+                        </template>
+                      </CustomStatistic>
+                    </a-col>
+                    <a-col :span="isMobile ? 24 : 12">
+                      <CustomStatistic title="IPv6" :value="status.publicIP.ipv6">
+                        <template #prefix>
+                          <GlobalOutlined />
+                        </template>
+                      </CustomStatistic>
+                    </a-col>
+                  </a-row>
+                </a-card>
+              </a-col>
+
+              <a-col :sm="24" :lg="12">
+                <a-card :title="t('pages.index.connectionCount')" hoverable>
+                  <a-row :gutter="isMobile ? [8, 8] : 0">
+                    <a-col :span="12">
+                      <CustomStatistic title="TCP" :value="status.tcpCount">
+                        <template #prefix>
+                          <SwapOutlined />
+                        </template>
+                      </CustomStatistic>
+                    </a-col>
+                    <a-col :span="12">
+                      <CustomStatistic title="UDP" :value="status.udpCount">
+                        <template #prefix>
+                          <SwapOutlined />
+                        </template>
+                      </CustomStatistic>
+                    </a-col>
+                  </a-row>
+                </a-card>
+              </a-col>
             </a-row>
           </a-spin>
         </a-layout-content>
       </a-layout>
 
-      <PanelUpdateModal
-        v-model:open="panelUpdateOpen"
-        :info="panelUpdateInfo"
-        @busy="setBusy"
-      />
+      <PanelUpdateModal v-model:open="panelUpdateOpen" :info="panelUpdateInfo" @busy="setBusy" />
       <LogModal v-model:open="logsOpen" />
-      <BackupModal
-        v-model:open="backupOpen"
-        :base-path="basePath"
-        @busy="setBusy"
-      />
+      <BackupModal v-model:open="backupOpen" :base-path="basePath" @busy="setBusy" />
       <CpuHistoryModal v-model:open="cpuHistoryOpen" :status="status" />
       <XrayLogModal v-model:open="xrayLogsOpen" />
       <VersionModal v-model:open="versionOpen" :status="status" @busy="setBusy" />
+      <TextModal v-model:open="configTextOpen" :title="t('pages.index.config')" :content="configText"
+        file-name="config.json" />
     </a-layout>
   </a-config-provider>
 </template>
@@ -184,8 +347,13 @@ function openVersionSwitch() { versionOpen.value = true; }
   background: transparent;
 }
 
-.content-shell { background: transparent; }
-.content-area { padding: 24px; }
+.content-shell {
+  background: transparent;
+}
+
+.content-area {
+  padding: 24px;
+}
 
 .loading-spacer {
   min-height: calc(100vh - 120px);
@@ -203,4 +371,18 @@ function openVersionSwitch() { versionOpen.value = true; }
   align-items: center;
   gap: 4px;
 }
+
+.ip-toggle-icon {
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.ip-hidden :deep(.ant-statistic-content-value) {
+  filter: blur(6px);
+  transition: filter 0.2s ease;
+}
+
+.ip-visible :deep(.ant-statistic-content-value) {
+  filter: none;
+}
 </style>
diff --git a/frontend/src/pages/index/LogModal.vue b/frontend/src/pages/index/LogModal.vue
index ec932143..735ea0ba 100644
--- a/frontend/src/pages/index/LogModal.vue
+++ b/frontend/src/pages/index/LogModal.vue
@@ -125,7 +125,9 @@ watch([rows, level, syslog], () => { if (props.open) refresh(); });
       </a-form-item>
       <a-form-item style="margin-left: auto">
         <a-button type="primary" @click="download">
-          <template #icon><DownloadOutlined /></template>
+          <template #icon>
+            <DownloadOutlined />
+          </template>
         </a-button>
       </a-form-item>
     </a-form>
diff --git a/frontend/src/pages/index/PanelUpdateModal.vue b/frontend/src/pages/index/PanelUpdateModal.vue
index d4cbd241..4d98796b 100644
--- a/frontend/src/pages/index/PanelUpdateModal.vue
+++ b/frontend/src/pages/index/PanelUpdateModal.vue
@@ -61,13 +61,8 @@ function updatePanel() {
 
 <template>
   <a-modal :open="open" :title="t('pages.index.updatePanel')" :closable="true" :footer="null" @cancel="close">
-    <a-alert
-      v-if="info.updateAvailable"
-      type="warning"
-      class="mb-12"
-      :message="t('pages.index.panelUpdateDesc')"
-      show-icon
-    />
+    <a-alert v-if="info.updateAvailable" type="warning" class="mb-12" :message="t('pages.index.panelUpdateDesc')"
+      show-icon />
 
     <a-list bordered class="version-list">
       <a-list-item class="version-list-item">
@@ -86,7 +81,9 @@ function updatePanel() {
 
     <div class="actions-row">
       <a-button type="primary" :disabled="!info.updateAvailable" @click="updatePanel">
-        <template #icon><CloudDownloadOutlined /></template>
+        <template #icon>
+          <CloudDownloadOutlined />
+        </template>
         {{ t('pages.index.updatePanel') }}
       </a-button>
     </div>
@@ -94,8 +91,22 @@ function updatePanel() {
 </template>
 
 <style scoped>
-.mb-12 { margin-bottom: 12px; }
-.version-list { width: 100%; }
-.version-list-item { display: flex; justify-content: space-between; }
-.actions-row { display: flex; justify-content: flex-end; margin-top: 12px; }
+.mb-12 {
+  margin-bottom: 12px;
+}
+
+.version-list {
+  width: 100%;
+}
+
+.version-list-item {
+  display: flex;
+  justify-content: space-between;
+}
+
+.actions-row {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+}
 </style>
diff --git a/frontend/src/pages/index/StatusCard.vue b/frontend/src/pages/index/StatusCard.vue
index e0c10221..608a296f 100644
--- a/frontend/src/pages/index/StatusCard.vue
+++ b/frontend/src/pages/index/StatusCard.vue
@@ -21,37 +21,32 @@ defineEmits(['open-cpu-history']);
       <a-col :sm="24" :md="12">
         <a-row>
           <a-col :span="12" class="text-center">
-            <a-progress
-              type="dashboard"
-              status="normal"
-              :stroke-color="status.cpu.color"
-              :percent="status.cpu.percent"
-            />
+            <a-progress type="dashboard" status="normal" :stroke-color="status.cpu.color"
+              :percent="status.cpu.percent" />
             <div>
               <b>{{ t('pages.index.cpu') }}:</b> {{ CPUFormatter.cpuCoreFormat(status.cpuCores) }}
               <a-tooltip>
                 <template #title>
                   <div><b>{{ t('pages.index.logicalProcessors') }}:</b> {{ status.logicalPro }}</div>
-                  <div><b>{{ t('pages.index.frequency') }}:</b> {{ CPUFormatter.cpuSpeedFormat(status.cpuSpeedMhz) }}</div>
+                  <div><b>{{ t('pages.index.frequency') }}:</b> {{ CPUFormatter.cpuSpeedFormat(status.cpuSpeedMhz) }}
+                  </div>
                 </template>
                 <AreaChartOutlined />
               </a-tooltip>
               <a-tooltip>
                 <template #title>{{ t('pages.index.cpu') }}</template>
                 <a-button size="small" shape="circle" class="ml-8" @click="$emit('open-cpu-history')">
-                  <template #icon><HistoryOutlined /></template>
+                  <template #icon>
+                    <HistoryOutlined />
+                  </template>
                 </a-button>
               </a-tooltip>
             </div>
           </a-col>
 
           <a-col :span="12" class="text-center">
-            <a-progress
-              type="dashboard"
-              status="normal"
-              :stroke-color="status.mem.color"
-              :percent="status.mem.percent"
-            />
+            <a-progress type="dashboard" status="normal" :stroke-color="status.mem.color"
+              :percent="status.mem.percent" />
             <div>
               <b>{{ t('pages.index.memory') }}:</b> {{ SizeFormatter.sizeFormat(status.mem.current) }} /
               {{ SizeFormatter.sizeFormat(status.mem.total) }}
@@ -64,12 +59,8 @@ defineEmits(['open-cpu-history']);
       <a-col :sm="24" :md="12">
         <a-row>
           <a-col :span="12" class="text-center">
-            <a-progress
-              type="dashboard"
-              status="normal"
-              :stroke-color="status.swap.color"
-              :percent="status.swap.percent"
-            />
+            <a-progress type="dashboard" status="normal" :stroke-color="status.swap.color"
+              :percent="status.swap.percent" />
             <div>
               <b>{{ t('pages.index.swap') }}:</b> {{ SizeFormatter.sizeFormat(status.swap.current) }} /
               {{ SizeFormatter.sizeFormat(status.swap.total) }}
@@ -77,12 +68,8 @@ defineEmits(['open-cpu-history']);
           </a-col>
 
           <a-col :span="12" class="text-center">
-            <a-progress
-              type="dashboard"
-              status="normal"
-              :stroke-color="status.disk.color"
-              :percent="status.disk.percent"
-            />
+            <a-progress type="dashboard" status="normal" :stroke-color="status.disk.color"
+              :percent="status.disk.percent" />
             <div>
               <b>{{ t('pages.index.storage') }}:</b> {{ SizeFormatter.sizeFormat(status.disk.current) }} /
               {{ SizeFormatter.sizeFormat(status.disk.total) }}
@@ -98,6 +85,7 @@ defineEmits(['open-cpu-history']);
 .text-center {
   text-align: center;
 }
+
 .ml-8 {
   margin-left: 8px;
 }
diff --git a/frontend/src/pages/index/VersionModal.vue b/frontend/src/pages/index/VersionModal.vue
index c1181f36..78eb228a 100644
--- a/frontend/src/pages/index/VersionModal.vue
+++ b/frontend/src/pages/index/VersionModal.vue
@@ -87,19 +87,11 @@ watch(() => props.open, (next) => { if (next) fetchVersions(); });
     <a-spin :spinning="loading">
       <a-collapse v-model:active-key="activeKey" accordion>
         <a-collapse-panel key="1" header="Xray">
-          <a-alert
-            type="warning"
-            class="mb-12"
-            :message="t('pages.index.xraySwitchClickDesk')"
-            show-icon
-          />
+          <a-alert type="warning" class="mb-12" :message="t('pages.index.xraySwitchClickDesk')" show-icon />
           <a-list bordered class="version-list">
             <a-list-item v-for="(version, index) in versions" :key="version" class="version-list-item">
               <a-tag :color="index % 2 === 0 ? 'purple' : 'green'">{{ version }}</a-tag>
-              <a-radio
-                :checked="version === `v${status?.xray?.version}`"
-                @click="switchXrayVersion(version)"
-              />
+              <a-radio :checked="version === `v${status?.xray?.version}`" @click="switchXrayVersion(version)" />
             </a-list-item>
           </a-list>
         </a-collapse-panel>
@@ -127,9 +119,19 @@ watch(() => props.open, (next) => { if (next) fetchVersions(); });
 </template>
 
 <style scoped>
-.mb-12 { margin-bottom: 12px; }
-.version-list { width: 100%; }
-.version-list-item { display: flex; justify-content: space-between; align-items: center; }
+.mb-12 {
+  margin-bottom: 12px;
+}
+
+.version-list {
+  width: 100%;
+}
+
+.version-list-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 
 .reload-icon {
   cursor: pointer;
diff --git a/frontend/src/pages/index/XrayLogModal.vue b/frontend/src/pages/index/XrayLogModal.vue
index 061450f1..d82a47c6 100644
--- a/frontend/src/pages/index/XrayLogModal.vue
+++ b/frontend/src/pages/index/XrayLogModal.vue
@@ -129,7 +129,9 @@ watch([rows, showDirect, showBlocked, showProxy], () => { if (props.open) refres
       </a-form-item>
       <a-form-item style="margin-left: auto">
         <a-button type="primary" @click="download">
-          <template #icon><DownloadOutlined /></template>
+          <template #icon>
+            <DownloadOutlined />
+          </template>
         </a-button>
       </a-form-item>
     </a-form>
@@ -170,6 +172,7 @@ watch([rows, showDirect, showBlocked, showProxy], () => { if (props.open) refres
   border-collapse: collapse;
   width: auto;
 }
+
 .xraylog-table td,
 .xraylog-table th {
   padding: 2px 15px;
diff --git a/frontend/src/pages/index/XrayStatusCard.vue b/frontend/src/pages/index/XrayStatusCard.vue
index 5bf2a9f6..9ca53551 100644
--- a/frontend/src/pages/index/XrayStatusCard.vue
+++ b/frontend/src/pages/index/XrayStatusCard.vue
@@ -42,12 +42,8 @@ function badgeAnimationClass(color) {
 
     <template #extra>
       <template v-if="status.xray.state !== 'error'">
-        <a-badge
-          status="processing"
-          :class="['xray-processing-animation', badgeAnimationClass(status.xray.color)]"
-          :text="status.xray.stateMsg"
-          :color="status.xray.color"
-        />
+        <a-badge status="processing" :class="['xray-processing-animation', badgeAnimationClass(status.xray.color)]"
+          :text="status.xray.stateMsg" :color="status.xray.color" />
       </template>
       <template v-else>
         <a-popover>
@@ -64,12 +60,8 @@ function badgeAnimationClass(color) {
               {{ line }}
             </span>
           </template>
-          <a-badge
-            status="processing"
-            :text="status.xray.stateMsg"
-            :color="status.xray.color"
-            :class="['xray-processing-animation', 'xray-error-animation']"
-          />
+          <a-badge status="processing" :text="status.xray.stateMsg" :color="status.xray.color"
+            :class="['xray-processing-animation', 'xray-error-animation']" />
         </a-popover>
       </template>
     </template>
@@ -122,18 +114,31 @@ function badgeAnimationClass(color) {
 .xray-processing-animation .ant-badge-status-dot {
   animation: xray-pulse 1.2s linear infinite;
 }
+
 .xray-running-animation .ant-badge-status-processing::after {
   border-color: var(--color-primary-100, #008771);
 }
+
 .xray-stop-animation .ant-badge-status-processing::after {
   border-color: #fa8c16;
 }
+
 .xray-error-animation .ant-badge-status-processing::after {
   border-color: #f5222d;
 }
 
 @keyframes xray-pulse {
-  0%, 50%, 100% { transform: scale(1); opacity: 1; }
-  10% { transform: scale(1.5); opacity: 0.2; }
+
+  0%,
+  50%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  10% {
+    transform: scale(1.5);
+    opacity: 0.2;
+  }
 }
 </style>
diff --git a/frontend/src/pages/login/LoginPage.vue b/frontend/src/pages/login/LoginPage.vue
index 9f888e60..b22803c1 100644
--- a/frontend/src/pages/login/LoginPage.vue
+++ b/frontend/src/pages/login/LoginPage.vue
@@ -73,103 +73,96 @@ async function login() {
 
 <template>
   <a-config-provider :theme="antdThemeConfig">
-  <a-layout class="login-app" :class="{ 'is-dark': themeState.isDark, 'is-ultra': themeState.isUltra }">
-    <a-layout-content class="login-content">
-      <div class="waves-header">
-        <div class="waves-inner-header"></div>
-        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-          viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
-          <defs>
-            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
-          </defs>
-          <g class="parallax">
-            <use xlink:href="#gentle-wave" x="48" y="0" />
-            <use xlink:href="#gentle-wave" x="48" y="3" />
-            <use xlink:href="#gentle-wave" x="48" y="5" />
-            <use xlink:href="#gentle-wave" x="48" y="7" />
-          </g>
-        </svg>
-      </div>
+    <a-layout class="login-app" :class="{ 'is-dark': themeState.isDark, 'is-ultra': themeState.isUltra }">
+      <a-layout-content class="login-content">
+        <div class="waves-header">
+          <div class="waves-inner-header"></div>
+          <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+            viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
+            <defs>
+              <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
+            </defs>
+            <g class="parallax">
+              <use xlink:href="#gentle-wave" x="48" y="0" />
+              <use xlink:href="#gentle-wave" x="48" y="3" />
+              <use xlink:href="#gentle-wave" x="48" y="5" />
+              <use xlink:href="#gentle-wave" x="48" y="7" />
+            </g>
+          </svg>
+        </div>
 
-      <a-row type="flex" justify="center" align="middle" class="login-row">
-        <a-col :xs="22" :sm="14" :md="10" :lg="8" :xl="6" class="login-card">
-          <div v-if="!fetched" class="login-loading">
-            <a-spin size="large" />
-          </div>
-
-          <div v-else>
-            <div class="login-settings">
-              <a-popover :overlay-class-name="currentTheme" :title="t('menu.settings')" placement="bottomRight" trigger="click">
-                <template #content>
-                  <ThemeSwitchLogin />
-                </template>
-                <a-button shape="circle">
-                  <template #icon><SettingOutlined /></template>
-                </a-button>
-              </a-popover>
+        <a-row type="flex" justify="center" align="middle" class="login-row">
+          <a-col :xs="22" :sm="14" :md="10" :lg="8" :xl="6" class="login-card">
+            <div v-if="!fetched" class="login-loading">
+              <a-spin size="large" />
             </div>
 
-            <a-row justify="center">
-              <a-col :span="24">
-                <h2 class="login-title">
-                  <Transition name="headline" mode="out-in">
-                    <b :key="headlineIndex">{{ HEADLINE_WORDS[headlineIndex] }}</b>
-                  </Transition>
-                </h2>
-              </a-col>
-            </a-row>
-
-            <a-form layout="vertical" @submit.prevent="login">
-              <a-form-item>
-                <a-input
-                  v-model:value="user.username"
-                  autocomplete="username"
-                  name="username"
-                  :placeholder="t('username')"
-                  autofocus
-                  required
-                >
-                  <template #prefix><UserOutlined /></template>
-                </a-input>
-              </a-form-item>
-
-              <a-form-item>
-                <a-input-password
-                  v-model:value="user.password"
-                  autocomplete="current-password"
-                  name="password"
-                  :placeholder="t('password')"
-                  required
-                >
-                  <template #prefix><LockOutlined /></template>
-                </a-input-password>
-              </a-form-item>
-
-              <a-form-item v-if="twoFactorEnable">
-                <a-input
-                  v-model:value="user.twoFactorCode"
-                  autocomplete="one-time-code"
-                  name="twoFactorCode"
-                  :placeholder="t('twoFactorCode')"
-                  required
-                >
-                  <template #prefix><KeyOutlined /></template>
-                </a-input>
-              </a-form-item>
-
-              <a-form-item>
-                <a-row justify="center">
-                  <a-button type="primary" html-type="submit" :loading="submitting" block>
-                    {{ submitting ? '' : t('login') }}
+            <div v-else>
+              <div class="login-settings">
+                <a-popover :overlay-class-name="currentTheme" :title="t('menu.settings')" placement="bottomRight"
+                  trigger="click">
+                  <template #content>
+                    <ThemeSwitchLogin />
+                  </template>
+                  <a-button shape="circle">
+                    <template #icon>
+                      <SettingOutlined />
+                    </template>
                   </a-button>
-                </a-row>
-              </a-form-item>
-            </a-form>
-          </div>
-        </a-col>
-      </a-row>
-    </a-layout-content>
-  </a-layout>
+                </a-popover>
+              </div>
+
+              <a-row justify="center">
+                <a-col :span="24">
+                  <h2 class="login-title">
+                    <Transition name="headline" mode="out-in">
+                      <b :key="headlineIndex">{{ HEADLINE_WORDS[headlineIndex] }}</b>
+                    </Transition>
+                  </h2>
+                </a-col>
+              </a-row>
+
+              <a-form layout="vertical" @submit.prevent="login">
+                <a-form-item>
+                  <a-input v-model:value="user.username" autocomplete="username" name="username"
+                    :placeholder="t('username')" autofocus required>
+                    <template #prefix>
+                      <UserOutlined />
+                    </template>
+                  </a-input>
+                </a-form-item>
+
+                <a-form-item>
+                  <a-input-password v-model:value="user.password" autocomplete="current-password" name="password"
+                    :placeholder="t('password')" required>
+                    <template #prefix>
+                      <LockOutlined />
+                    </template>
+                  </a-input-password>
+                </a-form-item>
+
+                <a-form-item v-if="twoFactorEnable">
+                  <a-input v-model:value="user.twoFactorCode" autocomplete="one-time-code" name="twoFactorCode"
+                    :placeholder="t('twoFactorCode')" required>
+                    <template #prefix>
+                      <KeyOutlined />
+                    </template>
+                  </a-input>
+                </a-form-item>
+
+                <a-form-item>
+                  <a-row justify="center">
+                    <a-button type="primary" html-type="submit" :loading="submitting" block>
+                      {{ submitting ? '' : t('login') }}
+                    </a-button>
+                  </a-row>
+                </a-form-item>
+              </a-form>
+            </div>
+          </a-col>
+        </a-row>
+      </a-layout-content>
+    </a-layout>
   </a-config-provider>
 </template>
 
@@ -200,9 +193,12 @@ async function login() {
 }
 
 .login-app.is-dark {
-  --bg-page: #222d42;        /* legacy .dark .under = surface-200 */
-  --bg-wave-header: #0a1222; /* legacy --dark-color-background (login-bg defaults to this) */
-  --bg-card: #151f31;        /* legacy surface-100 */
+  --bg-page: #222d42;
+  /* legacy .dark .under = surface-200 */
+  --bg-wave-header: #0a1222;
+  /* legacy --dark-color-background (login-bg defaults to this) */
+  --bg-card: #151f31;
+  /* legacy surface-100 */
   --color-title: rgba(255, 255, 255, 0.92);
   --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45);
   --wave-fill: #222d42;
@@ -210,9 +206,12 @@ async function login() {
 }
 
 .login-app.is-dark.is-ultra {
-  --bg-page: #0f2d32;        /* legacy ultra .under = login-wave override */
-  --bg-wave-header: #0a2227; /* legacy ultra --dark-color-login-background */
-  --bg-card: #0c0e12;        /* legacy ultra surface-100 */
+  --bg-page: #0f2d32;
+  /* legacy ultra .under = login-wave override */
+  --bg-wave-header: #0a2227;
+  /* legacy ultra --dark-color-login-background */
+  --bg-card: #0c0e12;
+  /* legacy ultra surface-100 */
   /* Top three waves use a brighter teal so motion reads against the
    * dark wave-header bg. Bottom wave keeps the legacy color so its
    * flat lower edge merges into bg-page without a visible seam — if
@@ -229,6 +228,7 @@ async function login() {
 .login-app :deep(.ant-layout-content) {
   background: transparent;
 }
+
 .login-app {
   background: var(--bg-page);
 }
@@ -290,10 +290,12 @@ async function login() {
 .headline-leave-active {
   transition: opacity 0.4s ease, transform 0.4s ease;
 }
+
 .headline-enter-from {
   opacity: 0;
   transform: translateY(-12px);
 }
+
 .headline-leave-to {
   opacity: 0;
   transform: translateY(12px);
@@ -327,14 +329,30 @@ async function login() {
  * inline fill="..." on each <use> which made them lock to one palette.
  * Animation durations match the legacy (4s/7s/10s/13s) so the bottom
  * wave actually visibly moves in dark mode where contrast is low. */
-.parallax > use {
+.parallax>use {
   fill: var(--wave-fill);
   animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
 }
-.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 4s;  opacity: 0.2; }
-.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 7s;  opacity: 0.4; }
-.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 10s; opacity: 0.6; }
-.parallax > use:nth-child(4) {
+
+.parallax>use:nth-child(1) {
+  animation-delay: -2s;
+  animation-duration: 4s;
+  opacity: 0.2;
+}
+
+.parallax>use:nth-child(2) {
+  animation-delay: -3s;
+  animation-duration: 7s;
+  opacity: 0.4;
+}
+
+.parallax>use:nth-child(3) {
+  animation-delay: -4s;
+  animation-duration: 10s;
+  opacity: 0.6;
+}
+
+.parallax>use:nth-child(4) {
   animation-delay: -5s;
   animation-duration: 13s;
   fill: var(--wave-fill-bottom);
@@ -342,7 +360,12 @@ async function login() {
 }
 
 @keyframes move-forever {
-  0% { transform: translate3d(-90px, 0, 0); }
-  100% { transform: translate3d(85px, 0, 0); }
+  0% {
+    transform: translate3d(-90px, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(85px, 0, 0);
+  }
 }
 </style>
diff --git a/frontend/src/pages/xray/useXraySetting.js b/frontend/src/pages/xray/useXraySetting.js
index 4e7bc74e..69560ba7 100644
--- a/frontend/src/pages/xray/useXraySetting.js
+++ b/frontend/src/pages/xray/useXraySetting.js
@@ -24,6 +24,9 @@ export function useXraySetting() {
   const fetched = ref(false);
   const spinning = ref(false);
   const saveDisabled = ref(true);
+  // Holds a user-facing message when fetchAll fails; lets the page
+  // render an error UI instead of an endless spinner.
+  const fetchError = ref('');
 
   const xraySetting = ref('');
   const oldXraySetting = ref('');
@@ -46,9 +49,22 @@ export function useXraySetting() {
   const outboundTestStates = ref({});
 
   async function fetchAll() {
+    fetchError.value = '';
     const msg = await HttpUtil.post('/panel/xray/');
-    if (!msg?.success) return;
-    const obj = JSON.parse(msg.obj);
+    if (!msg?.success) {
+      fetchError.value = msg?.msg || 'Failed to load xray config';
+      // Mark as fetched so the spinner clears and the error UI renders.
+      fetched.value = true;
+      return;
+    }
+    let obj;
+    try {
+      obj = JSON.parse(msg.obj);
+    } catch (e) {
+      fetchError.value = `Malformed xray config response: ${e?.message || e}`;
+      fetched.value = true;
+      return;
+    }
     const pretty = JSON.stringify(obj.xraySetting, null, 2);
     syncing = true;
     xraySetting.value = pretty;
@@ -188,6 +204,7 @@ export function useXraySetting() {
     fetched,
     spinning,
     saveDisabled,
+    fetchError,
     xraySetting,
     templateSettings,
     outboundTestUrl,
diff --git a/frontend/src/settings.js b/frontend/src/settings.js
index 0c9a85a6..49b8b872 100644
--- a/frontend/src/settings.js
+++ b/frontend/src/settings.js
@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import Antd, { message } from 'ant-design-vue';
 import 'ant-design-vue/dist/reset.css';
+import '@/styles/legacy.css';
 
 import { setupAxios } from '@/api/axios-init.js';
 // Importing useTheme triggers the boot side-effect that applies the
diff --git a/frontend/src/styles/legacy.css b/frontend/src/styles/legacy.css
new file mode 100644
index 00000000..774af85c
--- /dev/null
+++ b/frontend/src/styles/legacy.css
@@ -0,0 +1 @@
+:root{--color-primary-100:#008771;--dark-color-background:#0a1222;--dark-color-surface-100:#151f31;--dark-color-surface-200:#222d42;--dark-color-surface-300:#2c3950;--dark-color-surface-400:rgba(65,85,119,.5);--dark-color-surface-500:#2c3950;--dark-color-surface-600:#313f5a;--dark-color-surface-700:#111929;--dark-color-surface-700-rgb:17,25,41;--dark-color-table-hover:rgba(44,57,80,.2);--dark-color-text-primary:rgba(255,255,255,.75);--dark-color-stroke:#2c3950;--dark-color-btn-danger:#cd3838;--dark-color-btn-danger-border:transparent;--dark-color-btn-danger-hover:#e94b4b;--dark-color-tag-bg:rgba(255,255,255,.05);--dark-color-tag-border:rgba(255,255,255,.15);--dark-color-tag-color:rgba(255,255,255,.75);--dark-color-tag-green-bg:17,36,33;--dark-color-tag-green-border:25,81,65;--dark-color-tag-green-color:#3ad3ba;--dark-color-tag-purple-bg:#201425;--dark-color-tag-purple-border:#5a2969;--dark-color-tag-purple-color:#d988cd;--dark-color-tag-red-bg:#291515;--dark-color-tag-red-border:#5c2626;--dark-color-tag-red-color:#e04141;--dark-color-tag-orange-bg:#312313;--dark-color-tag-orange-border:#593914;--dark-color-tag-orange-color:#ffa031;--dark-color-tag-blue-bg:#111a2c;--dark-color-tag-blue-border:#1348ab;--dark-color-tag-blue-color:#529fff;--dark-color-codemirror-line-hover:rgba(0,135,113,.2);--dark-color-codemirror-line-selection:rgba(0,135,113,.3);--dark-color-login-background:var(--dark-color-background);--dark-color-login-wave:var(--dark-color-surface-200);--dark-color-tooltip:rgba(61,76,104,.9);--dark-color-back-top:rgba(61,76,104,.9);--dark-color-back-top-hover:rgba(61,76,104,1);--dark-color-scrollbar:#313f5a;--dark-color-scrollbar-webkit:#7484a0;--dark-color-scrollbar-webkit-hover:#90a4c7;--dark-color-table-ring:rgb(38 52 77);--dark-color-spin-container:#151f31;--dark-color-text-secondary:rgba(255,255,255,.45);--dark-color-table-header-bg:var(--dark-color-background);--dark-color-table-body-bg:var(--dark-color-surface-100);--dark-color-table-row-selected:rgba(0,135,113,.14);--dark-color-table-row-selected-hover:rgba(0,135,113,.22);--dark-color-table-column-sorted-bg:rgba(0,135,113,.08);--dark-color-table-sort-icon-muted:rgba(255,255,255,.35);--dark-color-table-pagination-surface:var(--dark-color-surface-200);--dark-color-table-filter-dropdown-bg:var(--dark-color-surface-200)}html[data-theme-animations='off']{.ant-menu,.ant-layout-sider,.ant-card,.ant-tag,.ant-progress-circle>*,.ant-input,.ant-table-row-expand-icon,.ant-switch,.ant-table-thead>tr>th,.ant-select-selection,.ant-btn,.ant-input-number,.ant-input-group-addon,.ant-checkbox-inner,.ant-progress-bg,.ant-progress-success-bg,.ant-radio-button-wrapper:not(:first-child):before,.ant-radio-button-wrapper,#login,.cm-s-xq.CodeMirror{transition:border 0s,background 0s!important}.ant-menu.ant-menu-inline .ant-menu-item:not(.ant-menu-sub .ant-menu-item),.ant-layout-sider-trigger,.ant-alert-close-icon .anticon-close,.ant-tabs-nav .ant-tabs-tab,.ant-input-number-input,.ant-collapse>.ant-collapse-item>.ant-collapse-header,.Line-Hover,.ant-menu-theme-switch,.ant-menu-submenu-title{transition:color 0s!important}.wave-btn-bg{transition:width 0s!important}}html[data-theme='ultra-dark']{--dark-color-background:#21242a;--dark-color-surface-100:#0c0e12;--dark-color-surface-200:#222327;--dark-color-surface-300:#32353b;--dark-color-surface-400:rgba(255,255,255,.1);--dark-color-surface-500:#3b404b;--dark-color-surface-600:#505663;--dark-color-surface-700:#101113;--dark-color-surface-700-rgb:16,17,19;--dark-color-table-hover:rgba(89,89,89,.15);--dark-color-text-primary:rgb(255 255 255 / 85%);--dark-color-stroke:#202025;--dark-color-tag-green-bg:17,36,33;--dark-color-tag-green-border:29,95,77;--dark-color-tag-green-color:#59cbac;--dark-color-tag-purple-bg:#241121;--dark-color-tag-purple-border:#5a2969;--dark-color-tag-purple-color:#d686ca;--dark-color-tag-red-bg:#2a1215;--dark-color-tag-red-border:#58181c;--dark-color-tag-red-color:#e84749;--dark-color-tag-orange-bg:#2b1d11;--dark-color-tag-orange-border:#593815;--dark-color-tag-orange-color:#e89a3c;--dark-color-tag-blue-bg:#111a2c;--dark-color-tag-blue-border:#0f367e;--dark-color-tag-blue-color:#3c89e8;--dark-color-codemirror-line-hover:rgba(82,84,94,.2);--dark-color-codemirror-line-selection:rgba(82,84,94,.3);--dark-color-login-background:#0a2227;--dark-color-login-wave:#0f2d32;--dark-color-tooltip:rgba(88,93,100,.9);--dark-color-back-top:rgba(88,93,100,.9);--dark-color-back-top-hover:rgba(88,93,100,1);--dark-color-scrollbar:rgb(107,107,107);--dark-color-scrollbar-webkit:#9f9f9f;--dark-color-scrollbar-webkit-hover:#d1d1d1;--dark-color-table-ring:rgb(37 39 42);--dark-color-spin-container:#1d1d1d;--dark-color-text-secondary:rgb(255 255 255 / 50%);--dark-color-table-row-selected:rgba(0,135,113,.2);--dark-color-table-row-selected-hover:rgba(0,135,113,.3);--dark-color-table-column-sorted-bg:rgba(0,135,113,.12);--dark-color-table-sort-icon-muted:rgb(255 255 255 / 42%);--dark-color-table-pagination-surface:var(--dark-color-surface-300);--dark-color-table-filter-dropdown-bg:var(--dark-color-surface-300);.ant-dropdown-menu-dark,.dark .ant-dropdown-menu{background-color:var(--dark-color-surface-500)}.dark .ant-dropdown-menu-submenu-title:hover,.dark .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled),.dark .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled){background-color:rgb(0 93 78 / .3)}.dark .waves-header{background-color:#0a2227}.dark .ant-calendar-year-panel-year:hover,.dark .ant-calendar-month-panel-month:hover,.dark .ant-calendar-decade-panel-decade:hover{background-color:var(--dark-color-surface-600)}}html,body{height:100vh;width:100vw;margin:0;padding:0;overflow:hidden}body{color:rgb(0 0 0 / .65);font-size:14px;font-variant:tabular-nums;line-height:1.5;background-color:#fff;font-feature-settings:"tnum"}html{--antd-wave-shadow-color:var(--color-primary-100);line-height:1.15;text-size-adjust:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-moz-tap-highlight-color:#fff0;-webkit-tap-highlight-color:#fff0}@supports (scrollbar-width:auto) and (not selector(::-webkit-scrollbar)){:not(.dark){scrollbar-color:#9a9a9a #fff0;scrollbar-width:thin}.dark *{scrollbar-color:var(--dark-color-scrollbar) #fff0;scrollbar-width:thin}}::-webkit-scrollbar{width:10px;height:10px;background-color:#fff0}::-webkit-scrollbar-track{background-color:#fff0;margin-block:.5em}.ant-modal-wrap::-webkit-scrollbar-track{background-color:#fff;margin-block:0}::-webkit-scrollbar-thumb{border-radius:9999px;background-color:#9a9a9a;border:2px solid #fff0;background-clip:content-box}::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{background-color:#828282}.dark .ant-modal-wrap::-webkit-scrollbar-track{background-color:var(--dark-color-background)}.dark::-webkit-scrollbar-thumb{background-color:var(--dark-color-scrollbar-webkit)}.dark::-webkit-scrollbar-thumb:hover,.dark::-webkit-scrollbar-thumb:active{background-color:var(--dark-color-scrollbar-webkit-hover)}::-moz-selection{color:var(--color-primary-100);background-color:#cfe8e4}::selection{color:var(--color-primary-100);background-color:#cfe8e4}#app{height:100%;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;padding:0;overflow:auto}.ant-layout,.ant-layout *{box-sizing:border-box}.ant-spin-container:after{border-radius:1.5rem}.dark .ant-spin-container:after{background:var(--dark-color-spin-container)}style attribute{text-align:center}.ant-table-thead>tr>th{padding:12px 8px}.ant-table-tbody>tr>td{padding:10px 8px}.ant-table-thead>tr>th{color:rgb(0 0 0 / .85);font-weight:500;text-align:left;border-bottom:1px solid #e8e8e8;transition:background .3s ease}.ant-table table{border-radius:1rem}.ant-table-bordered .ant-table-tbody:not(.ant-table-expanded-row .ant-table-wrapper .ant-table-tbody)>tr:last-child>td:first-child{border-bottom-left-radius:1rem}.ant-table-bordered .ant-table-tbody:not(.ant-table-expanded-row .ant-table-wrapper .ant-table-tbody)>tr:last-child>td:last-child{border-bottom-right-radius:1rem}.ant-table{box-sizing:border-box;margin:0;padding:0;color:rgb(0 0 0 / .65);font-size:14px;font-variant:tabular-nums;line-height:1.5;list-style:none;font-feature-settings:"tnum";position:relative;clear:both}.ant-table .ant-table-body:not(.ant-table-expanded-row .ant-table-body){overflow-x:auto!important}.ant-card-hoverable{cursor:auto;cursor:pointer}.ant-card{box-sizing:border-box;margin:0;padding:0;color:rgb(0 0 0 / .65);font-size:14px;font-variant:tabular-nums;line-height:1.5;list-style:none;position:relative;background-color:#fff;border-radius:2px;transition:all .3s}.ant-space{width:100%}.ant-layout-sider-zero-width-trigger{display:none}@media (max-width:768px){.ant-layout-sider{display:none}.ant-card,.ant-alert-error{margin:.5rem}.ant-tabs{margin:.5rem;padding:.5rem}.ant-modal-body{padding:20px}.ant-form-item-label{line-height:1.5;padding:8px 0 0}:not(.dark)::-webkit-scrollbar{width:8px;height:8px;background-color:#fff0}.dark::-webkit-scrollbar{width:8px;height:8px;background-color:#fff0}}.ant-layout-content{min-height:auto}.ant-card,.ant-tabs{border-radius:1.5rem}.ant-card-hoverable{cursor:auto}.ant-card+.ant-card{margin-top:20px}.drawer-handle{position:absolute;top:72px;width:41px;height:40px;cursor:pointer;z-index:0;text-align:center;line-height:40px;font-size:16px;display:flex;justify-content:center;align-items:center;background-color:#fff;right:-40px;box-shadow:2px 0 8px rgb(0 0 0 / .15);border-radius:0 4px 4px 0}.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{background-color:#006655!important;background-image:linear-gradient(270deg,#fff0 30%,#009980,#fff0 100%);background-repeat:no-repeat;animation:ma-bg-move linear 6.6s infinite;color:#fff;border-radius:.5rem}.ant-layout-sider-collapsed .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{border-radius:0}.ant-menu-item-active,.ant-menu-item:hover,.ant-menu-submenu-title:hover,.ant-menu-item:active,.ant-menu-submenu-title:active{color:var(--color-primary-100);background-color:#e8f4f2}.ant-menu-inline .ant-menu-item,.ant-menu-inline .ant-menu-submenu-title{border-radius:.5rem}.ant-menu-inline .ant-menu-item:after,.ant-menu{border-right-width:0}.ant-layout-sider-children,.ant-pagination ul{padding:.5rem}.ant-layout-sider-collapsed .ant-layout-sider-children{padding:.5rem 0}.ant-dropdown-menu,.ant-select-dropdown-menu{padding:.5rem}.ant-dropdown-menu-item,.ant-dropdown-menu-item:hover,.ant-select-dropdown-menu-item,.ant-select-dropdown-menu-item:hover,.ant-select-selection--multiple .ant-select-selection__choice{border-radius:.5rem}.ant-select-dropdown--multiple .ant-select-dropdown-menu .ant-select-dropdown-menu-item,.ant-select-dropdown--single .ant-select-dropdown-menu .ant-select-dropdown-menu-item-selected{margin-block:2px}@media (min-width:769px){.drawer-handle{display:none}.ant-tabs{padding:2rem}}.fade-in-enter,.fade-in-leave-active,.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active,.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.fade-in-linear-enter-active,.fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.fade-in-linear-enter-active,.fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.fade-in-enter-active,.fade-in-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.zoom-in-center-enter-active,.zoom-in-center-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.zoom-in-center-enter,.zoom-in-center-leave-active{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.zoom-in-top-enter-active,.zoom-in-top-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center top;transform-origin:center top}.zoom-in-top-enter,.zoom-in-top-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.zoom-in-bottom-enter-active,.zoom-in-bottom-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center bottom;transform-origin:center bottom}.zoom-in-bottom-enter,.zoom-in-bottom-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.zoom-in-left-enter-active,.zoom-in-left-leave-active{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:top left;transform-origin:top left}.zoom-in-left-enter,.zoom-in-left-leave-active{opacity:0;-webkit-transform:scale(.45,.45);transform:scale(.45,.45)}.list-enter-active,.list-leave-active{-webkit-transition:all .3s;transition:all .3s}.list-enter,.list-leave-active{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.ant-tooltip-inner{min-height:0;padding-inline:1rem}.ant-list-item-meta-title{font-size:14px}.ant-progress-inner{background-color:#ebeef5}.deactive-client .ant-collapse-header{color:#ffffff!important;background-color:#ff7f7f}.ant-table-expand-icon-th,.ant-table-row-expand-icon-cell{width:30px;min-width:30px}.ant-tabs{background-color:#fff}.ant-form-item{margin-bottom:0}.ant-setting-textarea{margin-top:1.5rem}.client-table-header{background-color:#f0f2f5}.client-table-odd-row{background-color:#fafafa}.ant-table-pagination.ant-pagination{float:left}.ant-tag{margin-right:0;margin-inline:2px;display:inline-flex;align-items:center;justify-content:space-evenly}.ant-tag:not(.qr-tag){column-gap:4px}#inbound-info-modal .ant-tag{margin-block:2px}.tr-info-table{display:inline-table;margin-block:10px;width:100%}#inbound-info-modal .tr-info-table .ant-tag{margin-block:0;margin-inline:0}.tr-info-row{display:flex;flex-direction:column;row-gap:2px;margin-block:10px}.tr-info-row a{margin-left:6px}.tr-info-row code{padding-inline:8px;max-height:80px;overflow-y:auto}.tr-info-tag{max-width:100%;text-wrap:balance;overflow:hidden;overflow-wrap:anywhere}.tr-info-title{display:inline-flex;align-items:center;justify-content:flex-start;column-gap:4px}.ant-tag-blue{background-color:#edf4fa;border-color:#a9c5e7;color:#0e49b5}.ant-tag-green{background-color:#eafff9;border-color:#76ccb4;color:#199270}.ant-tag-purple{background-color:#f2eaf1;border-color:#d5bed2;color:#7a316f}.ant-tag-orange,.ant-alert-warning{background-color:#ffeee1;border-color:#fec093;color:#f37b24}.ant-tag-red,.ant-alert-error{background-color:#ffe9e9;border-color:#ff9e9e;color:#cf3c3c}.ant-input::placeholder{opacity:.5}.ant-input:hover,.ant-input:focus{background-color:#e8f4f2}.ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled){background-color:#e8f4f2}.delete-icon:hover{color:#e04141}.normal-icon:hover{color:var(--color-primary-100)}.dark::-moz-selection{color:#fff;background-color:var(--color-primary-100)}.dark::selection{color:#fff;background-color:var(--color-primary-100)}.dark .normal-icon:hover{color:#fff}.dark .ant-layout-sider,.dark .ant-drawer-content,.ant-menu-dark,.ant-menu-dark .ant-menu-sub,.dark .ant-card,.dark .ant-table,.dark .ant-collapse-content,.dark .ant-tabs{background-color:var(--dark-color-surface-100);color:var(--dark-color-text-primary)}.dark .ant-card-hoverable:hover,.dark .ant-space-item>.ant-tabs:hover{box-shadow:0 2px 8px #fff0}.dark>.ant-layout,.dark .drawer-handle,.dark .ant-table-thead>tr>th,.dark .ant-table-expanded-row,.dark .ant-table-expanded-row:hover,.dark .ant-table-expanded-row .ant-table-tbody,.dark .ant-calendar{background-color:var(--dark-color-background);color:var(--dark-color-text-primary)}.dark .ant-table-expanded-row .ant-table-thead>tr:first-child>th{border-radius:0}.dark .ant-calendar,.dark .ant-card-bordered{border-color:var(--dark-color-background)}.dark .ant-table-bordered,.dark .ant-table-bordered.ant-table-empty .ant-table-placeholder,.dark .ant-table-bordered .ant-table-body>table,.dark .ant-table-bordered .ant-table-fixed-left table,.dark .ant-table-bordered .ant-table-fixed-right table,.dark .ant-table-bordered .ant-table-header>table,.dark .ant-table-bordered .ant-table-thead>tr:not(:last-child)>th,.dark .ant-table-bordered .ant-table-tbody>tr>td,.dark .ant-table-bordered .ant-table-thead>tr>th{border-color:var(--dark-color-surface-400)}.dark .ant-table-tbody>tr>td,.dark .ant-table-thead>tr>th,.dark .ant-card-head,.dark .ant-modal-header,.dark .ant-collapse>.ant-collapse-item,.dark .ant-tabs-bar,.dark .ant-list-split .ant-list-item,.dark .ant-popover-title,.dark .ant-calendar-header,.dark .ant-calendar-input-wrap{border-bottom-color:var(--dark-color-surface-400)}.dark .ant-modal-footer,.dark .ant-collapse-content,.dark .ant-calendar-footer,.dark .ant-divider-horizontal.ant-divider-with-text-left:before,.dark .ant-divider-horizontal.ant-divider-with-text-left:after,.dark .ant-divider-horizontal.ant-divider-with-text-center:before,.dark .ant-divider-horizontal.ant-divider-with-text-center:after{border-top-color:var(--dark-color-surface-300)}.ant-divider-horizontal.ant-divider-with-text-left:before{width:10%}.dark .ant-progress-text,.dark .ant-card-head,.dark .ant-form,.dark .ant-collapse>.ant-collapse-item>.ant-collapse-header,.dark .ant-modal-close-x,.dark .ant-form .anticon,.dark .ant-tabs-tab-arrow-show:not(.ant-tabs-tab-btn-disabled),.dark .anticon-close,.dark .ant-list-item-meta-title,.dark .ant-select-selection i,.dark .ant-modal-confirm-title,.dark .ant-modal-confirm-content,.dark .ant-popover-message,.dark .ant-modal,.dark .ant-divider-inner-text,.dark .ant-popover-title,.dark .ant-popover-inner-content,.dark h2,.dark .ant-modal-title,.dark .ant-form-item-label>label,.dark .ant-checkbox-wrapper,.dark .ant-form-item,.dark .ant-calendar-footer .ant-calendar-today-btn,.dark .ant-calendar-footer .ant-calendar-time-picker-btn,.dark .ant-calendar-day-select,.dark .ant-calendar-month-select,.dark .ant-calendar-year-select,.dark .ant-calendar-date,.dark .ant-calendar-year-panel-year,.dark .ant-calendar-month-panel-month,.dark .ant-calendar-decade-panel-decade{color:var(--dark-color-text-primary)}.dark .ant-pagination-options-size-changer .ant-select-arrow .anticon.anticon-down.ant-select-arrow-icon{color:rgb(255 255 255 / 35%)}.dark .ant-pagination-item a,.dark .ant-pagination-next a,.dark .ant-pagination-prev a{color:var(--dark-color-text-primary)}.dark .ant-pagination-item:focus a,.dark .ant-pagination-item:hover a,.dark .ant-pagination-item-active a,.dark .ant-pagination-next:hover .ant-pagination-item-link{color:var(--color-primary-100)}.dark .ant-pagination-item-active{background-color:#fff0}.dark .ant-list-item-meta-description{color:rgb(255 255 255 / .45)}.dark .ant-pagination-disabled i,.dark .ant-tabs-tab-btn-disabled{color:rgb(255 255 255 / .25)}.dark .ant-input,.dark .ant-input-group-addon,.dark .ant-collapse,.dark .ant-select-selection,.dark .ant-input-number,.dark .ant-input-number-handler-wrap,.dark .ant-table-placeholder,.dark .ant-empty-normal,.dark .ant-select-dropdown,.dark .ant-select-dropdown li,.dark .ant-select-dropdown-menu-item,.dark .client-table-header,.dark .ant-select-selection--multiple .ant-select-selection__choice{background-color:var(--dark-color-surface-200);border-color:var(--dark-color-surface-300);color:var(--dark-color-text-primary)}.dark .ant-select-dropdown--multiple .ant-select-dropdown-menu .ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-selected:not(.ant-dropdown-menu-submenu-title:hover){background-color:var(--dark-color-surface-300)}.dark .ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-selected{background-color:var(--dark-color-surface-300)}.dark .ant-calendar-time-picker-inner{background-color:var(--dark-color-background)}.dark .ant-select-selection:hover,.dark .ant-calendar-picker-clear,.dark .ant-input-number:hover,.dark .ant-input-number:focus,.dark .ant-input:hover,.dark .ant-input:focus{background-color:rgb(0 135 113 / .3);border-color:var(--color-primary-100)}.dark .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled){border-color:var(--color-primary-100);background-color:rgb(0 135 113 / .3)}.dark .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger){color:var(--dark-color-text-primary);background-color:rgb(10 117 87 / 30%);border:1px solid var(--color-primary-100)}.dark .ant-radio-button-wrapper,.dark .ant-radio-button-wrapper:before{color:var(--dark-color-text-primary);background-color:rgb(0 135 113 / .3);border-color:var(--color-primary-100)}.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){background-color:#e8f4f2}.dark .ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.dark .ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){color:#fff;background-color:rgb(10 117 87 / 50%);border-color:var(--color-primary-100)}.dark .ant-btn-primary[disabled],.dark .ant-btn-danger[disabled],.dark .ant-calendar-ok-btn-disabled{color:rgb(255 255 255 / 35%);background-color:var(--dark-color-surface-200);border-color:var(--dark-color-surface-300)}.dark .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,.dark .client-table-odd-row{background-color:var(--dark-color-table-hover)}.dark .ant-table-row-expand-icon{color:#fff;background-color:#fff0;border-color:rgb(255 255 255 / 20%)}.dark .ant-table-row-expand-icon:hover{color:var(--color-primary-100);background-color:#fff0;border-color:var(--color-primary-100)}.dark .ant-switch:not(.ant-switch-checked),.dark .ant-progress-line .ant-progress-inner{background-color:var(--dark-color-surface-500)}.dark .ant-progress-circle-trail{stroke:var(--dark-color-stroke)!important}.dark .ant-popover-inner{background-color:var(--dark-color-surface-500)}.dark>.ant-popover-content>.ant-popover-arrow{border-color:var(--dark-color-surface-500)}@media (max-width:768px){.dark .ant-popover-inner{background-color:var(--dark-color-surface-200)}.dark>.ant-popover-content>.ant-popover-arrow{border-color:var(--dark-color-surface-200)}}.ant-dropdown-menu-dark .ant-dropdown-menu-item:hover,.dark .ant-select-dropdown-menu-item-selected,.dark .ant-calendar-time-picker-select-option-selected{background-color:var(--dark-color-surface-600)}.ant-menu-dark .ant-menu-item:hover,.ant-menu-dark .ant-menu-submenu-title:hover{background-color:var(--dark-color-surface-300)}.dark .ant-menu-item:active,.dark .ant-menu-submenu-title:active{color:#fff;background-color:var(--dark-color-surface-300)}.dark .ant-alert-message{color:rgb(255 255 255 / .85)}.dark .ant-tag{color:var(--dark-color-tag-color);background-color:var(--dark-color-tag-bg);border-color:var(--dark-color-tag-border)}.dark .ant-tag-blue{background-color:var(--dark-color-tag-blue-bg);border-color:var(--dark-color-tag-blue-border);color:var(--dark-color-tag-blue-color)}.dark .ant-tag-red,.dark .ant-alert-error{background-color:var(--dark-color-tag-red-bg);border-color:var(--dark-color-tag-red-border);color:var(--dark-color-tag-red-color)}.dark .ant-tag-orange,.dark .ant-alert-warning{background-color:var(--dark-color-tag-orange-bg);border-color:var(--dark-color-tag-orange-border);color:var(--dark-color-tag-orange-color)}.dark .ant-tag-green{background-color:rgb(var(--dark-color-tag-green-bg));border-color:rgb(var(--dark-color-tag-green-border));color:var(--dark-color-tag-green-color)}.dark .ant-tag-purple{background-color:var(--dark-color-tag-purple-bg);border-color:var(--dark-color-tag-purple-border);color:var(--dark-color-tag-purple-color)}.dark .ant-modal-content,.dark .ant-modal-header{background-color:var(--dark-color-surface-700)}.dark .ant-calendar-next-month-btn-day .ant-calendar-date,.dark .ant-calendar-last-month-cell .ant-calendar-date{color:var(--dark-color-surface-300)}.dark .ant-calendar-selected-day .ant-calendar-date{background-color:var(--color-primary-100)!important;color:#fff}.dark .ant-calendar-date:hover,.dark .ant-calendar-time-picker-select li:hover{background-color:var(--dark-color-surface-600);color:#fff}.dark .ant-calendar-header a:hover,.dark .ant-calendar-header a:hover::before,.dark .ant-calendar-header a:hover::after{border-color:#fff}.dark .ant-calendar-time-picker-select{border-right-color:var(--dark-color-surface-300)}.has-warning .ant-select-selection,.has-warning .ant-select-selection:hover,.has-warning .ant-input,.has-warning .ant-input:hover{background-color:#ffeee1;border-color:#fec093}.has-warning .ant-input::placeholder{color:#f37b24}.has-warning .ant-input:not([disabled]):hover{border-color:#fec093}.dark .has-warning .ant-select-selection,.dark .has-warning .ant-select-selection:hover,.dark .has-warning .ant-input,.dark .has-warning .ant-input:hover{border-color:#784e1d;background:#312313}.dark .has-warning .ant-input::placeholder{color:rgb(255 160 49 / 70%)}.dark .has-warning .anticon{color:#ffa031}.dark .has-success .anticon{color:var(--color-primary-100);animation-name:diffZoomIn1!important}.dark .anticon-close-circle{color:#e04141}.dark .ant-spin-nested-loading>div>.ant-spin .ant-spin-text{text-shadow:0 1px 2px #0007}.dark .ant-spin{color:#fff}.dark .ant-spin-dot-item{background-color:#fff}.ant-checkbox-wrapper,.ant-input-group-addon,.ant-tabs-tab,.ant-input::placeholder,.ant-collapse-header,.ant-menu,.ant-radio-button-wrapper{-webkit-user-select:none;user-select:none}.ant-calendar-date,.ant-calendar-year-panel-year,.ant-calendar-decade-panel-decade,.ant-calendar-month-panel-month{border-radius:4px}.ant-checkbox-inner,.ant-checkbox-checked:after,.ant-table-row-expand-icon{border-radius:6px}.ant-calendar-date:hover{background-color:#e8f4f2}.ant-calendar-date:active{background-color:#e8f4f2;color:rgb(0 0 0 / .65)}.ant-calendar-today .ant-calendar-date{color:var(--color-primary-100);font-weight:400;border-color:var(--color-primary-100)}.dark .ant-calendar-today .ant-calendar-date{color:#fff;border-color:var(--color-primary-100)}.ant-calendar-selected-day .ant-calendar-date{background:var(--color-primary-100);color:#fff}li.ant-select-dropdown-menu-item:empty:after{content:"None";font-weight:400;color:rgb(0 0 0 / .25)}.dark li.ant-select-dropdown-menu-item:empty:after{content:"None";font-weight:400;color:rgb(255 255 255 / .3)}.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:hover .ant-select-selected-icon{color:rgb(0 0 0 / .87)}.dark.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:hover .ant-select-selected-icon{color:#fff}.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected .ant-select-selected-icon,.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected:hover .ant-select-selected-icon{color:var(--color-primary-100)}.ant-select-selection:hover,.ant-input-number-focused,.ant-input-number:hover{background-color:#e8f4f2}.dark .ant-input-number-handler:active{background-color:var(--color-primary-100)}.dark .ant-input-number-handler:hover .ant-input-number-handler-down-inner,.dark .ant-input-number-handler:hover .ant-input-number-handler-up-inner{color:#fff}.dark .ant-input-number-handler-down{border-top:1px solid rgb(217 217 217 / .3)}.dark .ant-calendar-year-panel-header .ant-calendar-year-panel-century-select,.dark .ant-calendar-year-panel-header .ant-calendar-year-panel-decade-select,.dark .ant-calendar-year-panel-header .ant-calendar-year-panel-month-select,.dark .ant-calendar-year-panel-header .ant-calendar-year-panel-year-select,.dark .ant-calendar-month-panel-header .ant-calendar-month-panel-century-select,.dark .ant-calendar-month-panel-header .ant-calendar-month-panel-decade-select,.dark .ant-calendar-month-panel-header .ant-calendar-month-panel-month-select,.dark .ant-calendar-month-panel-header .ant-calendar-month-panel-year-select{color:rgb(255 255 255 / .85)}.dark .ant-calendar-year-panel-header{border-bottom:1px solid var(--dark-color-surface-200)}.dark .ant-calendar-year-panel-last-decade-cell .ant-calendar-year-panel-year,.dark .ant-calendar-year-panel-next-decade-cell .ant-calendar-year-panel-year{color:rgb(255 255 255 / .35)}.dark .ant-divider:not(.ant-divider-with-text-center,.ant-divider-with-text-left,.ant-divider-with-text-right),.ant-dropdown-menu-dark,.dark .ant-calendar-year-panel-year:hover,.dark .ant-calendar-month-panel-month:hover,.dark .ant-calendar-decade-panel-decade:hover{background-color:var(--dark-color-surface-200)}.dark .ant-calendar-header a:hover{color:#fff}.dark .ant-calendar-month-panel-header{background-color:var(--dark-color-background);border-bottom:1px solid var(--dark-color-surface-200)}.dark .ant-calendar-year-panel,.dark .ant-calendar table{background-color:var(--dark-color-background)}.dark .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year,.dark .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year:hover,.dark .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month,.dark .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month:hover,.dark .ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade,.dark .ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade:hover{color:#fff;background-color:var(--color-primary-100)!important}.dark .ant-calendar-last-month-cell .ant-calendar-date,.dark .ant-calendar-last-month-cell .ant-calendar-date:hover,.dark .ant-calendar-next-month-btn-day .ant-calendar-date,.dark .ant-calendar-next-month-btn-day .ant-calendar-date:hover{color:rgb(255 255 255 / 25%);background:#fff0;border-color:#fff0}.dark .ant-calendar-today .ant-calendar-date:hover{color:#fff;border-color:var(--color-primary-100);background-color:var(--color-primary-100)}.dark .ant-calendar-decade-panel-last-century-cell .ant-calendar-decade-panel-decade,.dark .ant-calendar-decade-panel-next-century-cell .ant-calendar-decade-panel-decade{color:rgb(255 255 255 / 25%)}.dark .ant-calendar-decade-panel-header{border-bottom:1px solid var(--dark-color-surface-200);background-color:var(--dark-color-background)}.dark .ant-checkbox-inner{background-color:rgb(0 135 113 / .3);border-color:rgb(0 135 113 / .3)}.dark .ant-checkbox-checked .ant-checkbox-inner{background-color:var(--color-primary-100);border-color:var(--color-primary-100)}.dark .ant-calendar-input{background-color:var(--dark-color-background);color:var(--dark-color-text-primary)}.dark .ant-calendar-input::placeholder{color:rgb(255 255 255 / .25)}.ant-input-group.ant-input-group-compact-addon:not(:first-child):not(:last-child),.ant-input-group.ant-input-group-compact-wrap:not(:first-child):not(:last-child),.ant-input-group.ant-input-group-compact>.ant-input:not(:first-child):not(:last-child),.ant-input-number-handler,.ant-input-number-handler-wrap{border-radius:0}.ant-input-number{overflow:clip}.ant-modal-body,.ant-collapse-content>.ant-collapse-content-box{overflow-x:auto}.ant-modal-body{overflow-y:hidden}.ant-calendar-year-panel-year:hover,.ant-calendar-decade-panel-decade:hover,.ant-calendar-month-panel-month:hover,.ant-dropdown-menu-item:hover,.ant-dropdown-menu-submenu-title:hover,.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled),.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled),.ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,.ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,.ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,.ant-table-thead>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td{background-color:#e8f4f2}.dark .ant-dropdown-menu-submenu-title:hover,.dark .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled),.dark .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled){background-color:rgb(0 93 78 / .3)}.ant-select-dropdown,.ant-popover-inner{overflow-x:hidden}.ant-popover-inner-content{max-height:450px;overflow-y:auto}@media (max-height:900px){.ant-popover-inner-content{max-height:400px}}@media (max-height:768px){.ant-popover-inner-content{max-height:300px}}@media (max-width:768px){.ant-popover-inner-content{max-height:300px}}.qr-modal{display:flex;align-items:flex-end;gap:10px;flex-direction:column;flex-wrap:wrap;row-gap:24px}.qr-box{width:220px}.qr-cv{width:100%;height:100%}.dark .qr-cv{background-color:#fff;padding:1px;border-radius:.25rem}.qr-bg{background-color:#fff;display:flex;justify-content:center;align-content:center;padding:.8rem;border-radius:1rem;border:solid 1px #e8e8e8;height:220px;width:220px;transition:all .1s}.qr-bg:hover{border-color:#76ccb4;background-color:#eafff9}.qr-bg:hover:active{border-color:#76ccb4;background-color:rgb(197 241 228 / 70%)}.dark .qr-bg{background-color:var(--dark-color-surface-700);border-color:var(--dark-color-surface-300)}.dark .qr-bg:hover{background-color:rgb(var(--dark-color-tag-green-bg));border-color:rgb(var(--dark-color-tag-green-border))}.dark .qr-bg:hover:active{background-color:#17322e}@property --tr-rotate{syntax:'<angle>';initial-value:45deg;inherits:false}.qr-bg-sub{background-image:linear-gradient(var(--tr-rotate),#76ccb4,transparent,#d5bed2);display:flex;justify-content:center;align-content:center;padding:1px;border-radius:1rem;height:220px;width:220px}.dark .qr-bg-sub{background-image:linear-gradient(var(--tr-rotate),#195141,transparent,#5a2969)}.qr-bg-sub:hover{animation:tr-rotate-gradient 3.5s linear infinite}@keyframes tr-rotate-gradient{from{--tr-rotate:45deg}to{--tr-rotate:405deg}}.qr-bg-sub-inner{background-color:#fff;padding:.8rem;border-radius:1rem;transition:all .1s}.qr-bg-sub-inner:hover{background-color:rgb(255 255 255 / 60%);backdrop-filter:blur(25px)}.qr-bg-sub-inner:hover:active{background-color:rgb(255 255 255 / 30%)}.dark .qr-bg-sub-inner{background-color:rgb(var(--dark-color-surface-700-rgb))}.dark .qr-bg-sub-inner:hover{background-color:rgba(var(--dark-color-surface-700-rgb),.5);backdrop-filter:blur(25px)}.dark .qr-bg-sub-inner:hover:active{background-color:rgba(var(--dark-color-surface-700-rgb),.2)}.qr-tag{text-align:center;margin-bottom:10px;width:100%;overflow:hidden;margin-inline:0}@media (min-width:769px){.qr-modal{flex-direction:row;max-width:680px}}.tr-marquee{justify-content:flex-start}.tr-marquee span{padding-right:25%;white-space:nowrap;transform-origin:center}@keyframes move-ltr{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}.ant-input-group-addon:not(:first-child):not(:last-child){border-radius:0 1rem 1rem 0}b,strong{font-weight:500}.ant-collapse>.ant-collapse-item>.ant-collapse-header{padding:10px 16px 10px 40px}.dark .ant-message-notice-content{background-color:var(--dark-color-surface-200);border:1px solid var(--dark-color-surface-300);color:var(--dark-color-text-primary)}.ant-btn-danger{background-color:var(--dark-color-btn-danger);border-color:var(--dark-color-btn-danger-border)}.ant-btn-danger:focus,.ant-btn-danger:hover{background-color:var(--dark-color-btn-danger-hover);border-color:var(--dark-color-btn-danger-hover)}.dark .ant-alert-close-icon .anticon-close:hover{color:#fff}.ant-empty-small{margin:4px 0;background-color:transparent!important}.ant-empty-small .ant-empty-image{height:20px}.ant-menu-theme-switch,.ant-menu-theme-switch:hover{background-color:transparent!important;cursor:default!important}.dark .ant-tooltip-inner,.dark .ant-tooltip-arrow:before{background-color:var(--dark-color-tooltip)}.ant-select-sm .ant-select-selection__rendered{margin-left:10px}.ant-collapse{-moz-animation:collfade .3s ease;-webkit-animation:.3s collfade .3s ease;animation:collfade .3s ease}@-webkit-keyframes collfade{0%{transform:scaleY(.8);transform-origin:0 0%;opacity:0}100%{transform:scaleY(1);transform-origin:0 0%;opacity:1}}@keyframes collfade{0%{transform:scaleY(.8);transform-origin:0 0%;opacity:0}100%{transform:scaleY(1);transform-origin:0 0%;opacity:1}}.ant-table-tbody>tr>td{border-color:#f0f0f0}.ant-table-row-expand-icon{vertical-align:middle;margin-inline-end:8px;position:relative;transform:scale(.9411764705882353)}.ant-table-row-collapsed::before{transform:rotate(-180deg);top:7px;inset-inline-end:3px;inset-inline-start:3px;height:1px;position:absolute;background:currentcolor;transition:transform .3s ease-out;content:""}.ant-table-row-collapsed::after{transform:rotate(0deg);top:3px;bottom:3px;inset-inline-start:7px;width:1px;position:absolute;background:currentcolor;transition:transform .3s ease-out;content:""}.ant-table-row-expanded::before{top:7px;inset-inline-end:3px;inset-inline-start:3px;height:1px;position:absolute;background:currentcolor;transition:transform .3s ease-out;content:""}.ant-table-row-expanded::after{top:3px;bottom:3px;inset-inline-start:7px;width:1px;transform:rotate(90deg);position:absolute;background:currentcolor;transition:transform .3s ease-out;content:""}.ant-menu-theme-switch.ant-menu-item .ant-switch:not(.ant-switch-disabled):active:after,.ant-switch:not(.ant-switch-disabled):active:before{width:16px}.dark .ant-select-disabled .ant-select-selection{background:var(--dark-color-surface-100);border-color:var(--dark-color-surface-200);color:rgb(255 255 255 / .25)}.dark .ant-select-disabled .anticon{color:rgb(255 255 255 / .25)}.dark .ant-input-number-handler-down-disabled,.dark .ant-input-number-handler-up-disabled{background-color:rgb(0 0 0 / .1)}.dark .ant-input-number-handler-down-disabled .anticon,.dark .ant-input-number-handler-up-disabled .anticon,.dark .ant-input-number-handler-down:hover.ant-input-number-handler-down-disabled .anticon,.dark .ant-input-number-handler-up:hover.ant-input-number-handler-up-disabled .anticon{color:rgb(255 255 255 / .25)}.dark .ant-input-number-handler-down:active.ant-input-number-handler-down-disabled,.dark .ant-input-number-handler-up:active.ant-input-number-handler-up-disabled{background-color:rgb(0 0 0 / .2)}.ant-menu-dark .ant-menu-inline.ant-menu-sub{background:var(--dark-color-surface-100);box-shadow:none}.dark .ant-layout-sider-trigger{background:var(--dark-color-surface-100);color:rgb(255 255 255 / 65%)}.ant-layout-sider{overflow:auto}.dark .ant-back-top-content{background-color:var(--dark-color-back-top)}.dark .ant-back-top-content:hover{background-color:var(--dark-color-back-top-hover)}.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn{text-transform:capitalize}.ant-calendar{border-color:#fff0;border-width:0}.ant-calendar-time-picker-select li:focus,li.ant-calendar-time-picker-select-option-selected{color:rgb(0 0 0 / .65);font-weight:400;background-color:#e8f4f2}.dark li.ant-calendar-time-picker-select-option-selected{color:var(--dark-color-text-primary);font-weight:400}.dark .ant-calendar-time-picker-select li:focus{color:#fff;font-weight:400;background-color:var(--color-primary-100)}.ant-calendar-time-picker-select li:hover{background:#f5f5f5}.ant-calendar-date{transition:background .3s ease,color .3s ease}li.ant-calendar-time-picker-select-option-selected{margin-block:2px}.ant-calendar-time-picker-select{padding:4px}.ant-calendar-time-picker-select li{height:28px;line-height:28px;border-radius:4px}@media (min-width:769px){.index-page .ant-layout-content{margin:24px 16px}}.index-page .ant-card-dark h2{color:var(--dark-color-text-primary)}.index-page~div .ant-backup-list-item{gap:10px}.index-page~div .ant-version-list-item{--padding:12px;padding:var(--padding)!important;gap:var(--padding)}.index-page.dark~div .ant-version-list-item svg{color:var(--dark-color-text-primary)}.index-page.dark~div .ant-backup-list-item svg,.index-page.dark .ant-badge-status-text,.index-page.dark .ant-card-extra{color:var(--dark-color-text-primary)}.index-page.dark .ant-card-actions>li{color:rgb(255 255 255 / .55)}.index-page.dark~div .ant-radio-inner{background-color:var(--dark-color-surface-100);border-color:var(--dark-color-surface-600)}.index-page.dark~div .ant-radio-checked .ant-radio-inner{border-color:var(--color-primary-100)}.index-page.dark~div .ant-backup-list,.index-page.dark~div .ant-version-list,.index-page.dark .ant-card-actions,.index-page.dark .ant-card-actions>li:not(:last-child){border-color:var(--dark-color-stroke)}.index-page .ant-card-actions{background:#fff0}.index-page .ip-hidden{-webkit-user-select:none;-moz-user-select:none;user-select:none;filter:blur(10px)}.index-page .xray-running-animation .ant-badge-status-dot,.index-page .xray-processing-animation .ant-badge-status-dot{animation:runningAnimation 1.2s linear infinite}.index-page .xray-running-animation .ant-badge-status-processing:after{border-color:var(--color-primary-100)}.index-page .xray-stop-animation .ant-badge-status-processing:after{border-color:#fa8c16}.index-page .xray-error-animation .ant-badge-status-processing:after{border-color:#f5222d}@keyframes runningAnimation{0%,50%,100%{transform:scale(1);opacity:1}10%{transform:scale(1.5);opacity:.2}}.index-page .card-placeholder{text-align:center;padding:30px 0;margin-top:10px;background:#fff0;border:none}.index-page~div .log-container{height:auto;max-height:500px;overflow:auto;margin-top:.5rem}#app.login-app *{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app.login-app h1{text-align:center;height:110px}#app.login-app .ant-form-item-children .ant-btn,#app.login-app .ant-input{height:50px;border-radius:30px}#app.login-app .ant-input-group-addon{border-radius:0 30px 30px 0;width:50px;font-size:18px}#app.login-app .ant-input-affix-wrapper .ant-input-prefix{left:23px}#app.login-app .ant-input-affix-wrapper .ant-input:not(:first-child){padding-left:50px}#app.login-app .centered{display:flex;text-align:center;align-items:center;justify-content:center;width:100%}#app.login-app .title{font-size:2rem;margin-block-end:2rem}#app.login-app .title b{font-weight:bold!important}#app.login-app{overflow:hidden}#app.login-app #login{animation:charge .5s both;background-color:#fff;border-radius:2rem;padding:4rem 3rem;transition:all .3s;user-select:none;-webkit-user-select:none;-moz-user-select:none}#app.login-app #login:hover{box-shadow:0 2px 8px rgb(0 0 0 / .09)}@keyframes charge{from{transform:translateY(5rem);opacity:0}to{transform:translateY(0);opacity:1}}#app.login-app .under{background-color:#c7ebe2;z-index:0}#app.login-app.dark .under{background-color:var(--dark-color-login-wave)}#app.login-app.dark #login{background-color:var(--dark-color-surface-100)}#app.login-app.dark h1{color:#fff}#app.login-app .ant-btn-primary-login{width:100%}#app.login-app .ant-btn-primary-login:focus,#app.login-app .ant-btn-primary-login:hover{color:#fff;background-color:#065;border-color:#065;background-image:linear-gradient(270deg,#fff0 30%,#009980,#fff0 100%);background-repeat:no-repeat;animation:ma-bg-move ease-in-out 5s infinite;background-position-x:-500px;width:95%;animation-delay:-.5s;box-shadow:0 2px 0 rgb(0 0 0 / .045)}#app.login-app .ant-btn-primary-login.active,#app.login-app .ant-btn-primary-login:active{color:#fff;background-color:#065;border-color:#065}@keyframes ma-bg-move{0%{background-position:-500px 0}50%{background-position:1000px 0}100%{background-position:1000px 0}}#app.login-app .wave-btn-bg{position:relative;border-radius:25px;width:100%;transition:all .3s cubic-bezier(.645,.045,.355,1)}#app.login-app.dark .wave-btn-bg{color:#fff;position:relative;background-color:#0a7557;border:2px double #fff0;background-origin:border-box;background-clip:padding-box,border-box;background-size:300%;width:100%;z-index:1}#app.login-app.dark .wave-btn-bg:hover{animation:wave-btn-tara 4s ease infinite}#app.login-app.dark .wave-btn-bg-cl{background-image:linear-gradient(#fff0,#fff0),radial-gradient(circle at left top,#006655,#009980,#006655)!important;border-radius:3em}#app.login-app.dark .wave-btn-bg-cl:hover{width:95%}#app.login-app.dark .wave-btn-bg-cl:before{position:absolute;content:"";top:-5px;left:-5px;bottom:-5px;right:-5px;z-index:-1;background:inherit;background-size:inherit;border-radius:4em;opacity:0;transition:.5s}#app.login-app.dark .wave-btn-bg-cl:hover::before{opacity:1;filter:blur(20px);animation:wave-btn-tara 8s linear infinite}@keyframes wave-btn-tara{to{background-position:300%}}#app.login-app.dark .ant-btn-primary-login{font-size:14px;color:#fff;text-align:center;background-image:linear-gradient(rgb(13 14 33 / .45),rgb(13 14 33 / .35));border-radius:2rem;border:none;outline:none;background-color:#fff0;height:46px;position:relative;white-space:nowrap;cursor:pointer;touch-action:manipulation;padding:0 15px;width:100%;animation:none;background-position-x:0;box-shadow:none}#app.login-app .waves-header{position:fixed;width:100%;text-align:center;background-color:#dbf5ed;color:#fff;z-index:-1}#app.login-app.dark .waves-header{background-color:var(--dark-color-login-background)}#app.login-app .waves-inner-header{height:50vh;width:100%;margin:0;padding:0}#app.login-app .waves{position:relative;width:100%;height:15vh;margin-bottom:-8px;min-height:100px;max-height:150px}#app.login-app .parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}#app.login-app.dark .parallax>use{fill:var(--dark-color-login-wave)}#app.login-app .parallax>use:nth-child(1){animation-delay:-2s;animation-duration:4s;opacity:.2}#app.login-app .parallax>use:nth-child(2){animation-delay:-3s;animation-duration:7s;opacity:.4}#app.login-app .parallax>use:nth-child(3){animation-delay:-4s;animation-duration:10s;opacity:.6}#app.login-app .parallax>use:nth-child(4){animation-delay:-5s;animation-duration:13s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}100%{transform:translate3d(85px,0,0)}}@media (max-width:768px){#app.login-app .waves{height:40px;min-height:40px}}#app.login-app .words-wrapper{width:100%;display:inline-block;position:relative;text-align:center}#app.login-app .words-wrapper b{width:100%;display:inline-block;position:absolute;left:0;top:0}#app.login-app .words-wrapper b.is-visible{position:relative}#app.login-app .headline.zoom .words-wrapper{-webkit-perspective:300px;-moz-perspective:300px;perspective:300px}#app.login-app .headline{display:flex;justify-content:center;align-items:center}#app.login-app .headline.zoom b{opacity:0}#app.login-app .headline.zoom b.is-visible{opacity:1;-webkit-animation:zoom-in .8s;-moz-animation:zoom-in .8s;animation:cubic-bezier(.215,.61,.355,1) zoom-in .8s}#app.login-app .headline.zoom b.is-hidden{-webkit-animation:zoom-out .8s;-moz-animation:zoom-out .8s;animation:cubic-bezier(.215,.61,.355,1) zoom-out .4s}@-webkit-keyframes zoom-in{0%{opacity:0;-webkit-transform:translateZ(100px)}100%{opacity:1;-webkit-transform:translateZ(0)}}@-moz-keyframes zoom-in{0%{opacity:0;-moz-transform:translateZ(100px)}100%{opacity:1;-moz-transform:translateZ(0)}}@keyframes zoom-in{0%{opacity:0;-webkit-transform:translateZ(100px);-moz-transform:translateZ(100px);-ms-transform:translateZ(100px);-o-transform:translateZ(100px);transform:translateZ(100px)}100%{opacity:1;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}}@-webkit-keyframes zoom-out{0%{opacity:1;-webkit-transform:translateZ(0)}100%{opacity:0;-webkit-transform:translateZ(-100px)}}@-moz-keyframes zoom-out{0%{opacity:1;-moz-transform:translateZ(0)}100%{opacity:0;-moz-transform:translateZ(-100px)}}@keyframes zoom-out{0%{opacity:1;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}100%{opacity:0;-webkit-transform:translateZ(-100px);-moz-transform:translateZ(-100px);-ms-transform:translateZ(-100px);-o-transform:translateZ(-100px);transform:translateZ(-100px)}}#app.login-app .setting-section{position:absolute;top:0;right:0;padding:22px}#app.login-app .ant-space-item .ant-switch{margin:2px 0 4px}#app.login-app .ant-layout-content{transition:none}.inbounds-page .ant-table:not(.ant-table-expanded-row .ant-table){outline:1px solid #f0f0f0;outline-offset:-1px;border-radius:1rem;overflow-x:hidden}.inbounds-page.dark .ant-table:not(.ant-table-expanded-row .ant-table){outline-color:var(--dark-color-table-ring)}.inbounds-page .ant-table .ant-table-content .ant-table-scroll .ant-table-body{overflow-y:hidden}.inbounds-page .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper{margin:-10px 22px!important}.inbounds-page .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper .ant-table{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.inbounds-page .ant-table .ant-table-content .ant-table-tbody tr:last-child tr:last-child td{border-bottom-color:#fff0}.inbounds-page .ant-table .ant-table-tbody tr:last-child.ant-table-expanded-row .ant-table-wrapper .ant-table-tbody>tr:last-child>td:first-child{border-bottom-left-radius:6px}.inbounds-page .ant-table .ant-table-tbody tr:last-child.ant-table-expanded-row .ant-table-wrapper .ant-table-tbody>tr:last-child>td:last-child{border-bottom-right-radius:6px}@media (min-width:769px){.inbounds-page .ant-layout-content{margin:24px 16px}}@media (max-width:768px){.inbounds-page .ant-card-body{padding:.5rem}.inbounds-page .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper{margin:-10px 2px!important}}.inbounds-page.dark~div .ant-switch-small:not(.ant-switch-checked){background-color:var(--dark-color-surface-100)}.inbounds-page .ant-custom-popover-title{display:flex;align-items:center;gap:10px;margin:5px 0}.inbounds-page .ant-col-sm-24{margin:.5rem -2rem .5rem 2rem}.inbounds-page tr.hideExpandIcon .ant-table-row-expand-icon{display:none}.inbounds-page .infinite-tag,.inbounds-page~div .infinite-tag{padding:0 5px;border-radius:2rem;min-width:50px;min-height:22px}.inbounds-page .infinite-bar .ant-progress-inner .ant-progress-bg{background-color:#F2EAF1;border:#D5BED2 solid 1px}.inbounds-page.dark .infinite-bar .ant-progress-inner .ant-progress-bg{background-color:#7a316f!important;border:#7a316f solid 1px}.inbounds-page~div .ant-collapse{margin:5px 0}.inbounds-page .info-large-tag,.inbounds-page~div .info-large-tag{max-width:200px;overflow:hidden}.inbounds-page .client-comment{font-size:12px;opacity:.75;cursor:help}.inbounds-page .client-email{font-weight:500}.inbounds-page .client-popup-item{display:flex;align-items:center;gap:5px}.inbounds-page .online-animation .ant-badge-status-dot{animation:onlineAnimation 1.2s linear infinite}@keyframes onlineAnimation{0%,50%,100%{transform:scale(1);opacity:1}10%{transform:scale(1.5);opacity:.2}}.inbounds-page .tr-table-box{display:flex;gap:4px;justify-content:center;align-items:center}.inbounds-page .tr-table-rt{flex-basis:70px;min-width:70px;text-align:end}.inbounds-page .tr-table-lt{flex-basis:70px;min-width:70px;text-align:start}.inbounds-page .tr-table-bar{flex-basis:160px;min-width:60px}.inbounds-page .tr-infinity-ch{font-size:14pt;max-height:24px;display:inline-flex;align-items:center}.inbounds-page .ant-table-expanded-row .ant-table .ant-table-body{overflow-x:hidden}.inbounds-page .ant-table-expanded-row .ant-table-tbody>tr>td{padding:10px 2px}.inbounds-page .ant-table-expanded-row .ant-table-thead>tr>th{padding:12px 2px}.idx-cpu-history-svg{display:block;overflow:unset!important}.dark .idx-cpu-history-svg .cpu-grid-line{stroke:rgb(255 255 255 / .08)}.dark .idx-cpu-history-svg .cpu-grid-h-line{stroke:rgb(255 255 255 / .25)}.dark .idx-cpu-history-svg .cpu-grid-y-text,.dark .idx-cpu-history-svg .cpu-grid-x-text{fill:rgb(200 200 200 / .8)}.idx-cpu-history-svg .cpu-grid-text{stroke-width:3;paint-order:stroke;stroke:rgb(0 0 0 / .05)}.dark .idx-cpu-history-svg .cpu-grid-text{fill:#fff;stroke:rgb(0 0 0 / .35)}.inbounds-page~div #inbound-modal form textarea.ant-input{margin:4px 0}@media (min-width:769px){.settings-page .ant-layout-content{margin:24px 16px}}@media (max-width:768px){.settings-page .ant-tabs-nav .ant-tabs-tab{margin:0;padding:12px .5rem}}.settings-page .ant-tabs-bar{margin:0}.settings-page .ant-list-item{display:block}.settings-page .alert-msg{color:#c27512;font-weight:400;font-size:16px;padding:.5rem 1rem;text-align:center;background:rgb(255 145 0 / 15%);margin:1.5rem 2.5rem 0;border-radius:.5rem;transition:all .5s;animation:settings-page-signal 3s cubic-bezier(.18,.89,.32,1.28) infinite}.settings-page .alert-msg:hover{cursor:default;transition-duration:.3s;animation:settings-page-signal .9s ease infinite}@keyframes settings-page-signal{0%{box-shadow:0 0 0 0 rgb(194 118 18 / .5)}50%{box-shadow:0 0 0 6px #fff0}100%{box-shadow:0 0 0 6px #fff0}}.settings-page .alert-msg>i{color:inherit;font-size:24px}.settings-page.dark .ant-input-password-icon{color:var(--dark-color-text-primary)}.settings-page .ant-collapse-content-box .ant-alert{margin-block-end:12px}@media (min-width:769px){.xray-page .ant-layout-content{margin:24px 16px}}@media (max-width:768px){.xray-page .ant-tabs-nav .ant-tabs-tab{margin:0;padding:12px .5rem}.xray-page .ant-table-thead>tr>th,.xray-page .ant-table-tbody>tr>td{padding:10px 0}}.xray-page .ant-tabs-bar{margin:0}.xray-page .ant-list-item{display:block}.xray-page .ant-list-item>li{padding:10px 20px!important}.xray-page .ant-collapse-content-box .ant-alert{margin-block-end:12px}#app.login-app #login input.ant-input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px #f8f8f8 inset;box-shadow:0 0 0 100px #f8f8f8 inset;transition:background-color 9999s ease-in-out 0s,color 9999s ease-in-out 0s;background-clip:text}#app.login-app #login .ant-input-affix-wrapper:hover .ant-input:-webkit-autofill:not(.ant-input-disabled),#app.login-app #login input.ant-input:-webkit-autofill:hover,#app.login-app #login input.ant-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 100px #e8f4f2 inset;box-shadow:0 0 0 100px #e8f4f2 inset}#app.login-app.dark #login .ant-input-affix-wrapper:hover .ant-input:-webkit-autofill:not(.ant-input-disabled),#app.login-app.dark #login input.ant-input:-webkit-autofill{-webkit-text-fill-color:var(--dark-color-text-primary);caret-color:var(--dark-color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--dark-color-surface-200) inset;box-shadow:0 0 0 1000px var(--dark-color-surface-200) inset;transition:background-color 9999s ease-in-out 0s,color 9999s ease-in-out 0s}#app.login-app.dark #login .ant-input-affix-wrapper:hover .ant-input:-webkit-autofill:not(.ant-input-disabled),#app.login-app.dark #login input.ant-input:-webkit-autofill:hover,#app.login-app.dark #login input.ant-input:-webkit-autofill:focus{border-color:var(--dark-color-surface-300)}.dark .ant-descriptions-bordered .ant-descriptions-item-label{background-color:var(--dark-color-background)}.dark .ant-descriptions-bordered .ant-descriptions-view,.dark .ant-descriptions-bordered .ant-descriptions-row,.dark .ant-descriptions-bordered .ant-descriptions-item-label,.dark .ant-list-bordered{border-color:var(--dark-color-surface-400)}.dark .ant-descriptions-bordered .ant-descriptions-item-label,.dark .ant-descriptions-bordered .ant-descriptions-item-content{color:var(--dark-color-text-primary)}.dark .ant-dropdown-menu{background-color:var(--dark-color-surface-200)}.dark .ant-dropdown-menu .ant-dropdown-menu-item{color:hsl(0 0% 100% / .65)}.dark .ant-dropdown-menu .ant-dropdown-menu-item:hover{background-color:var(--dark-color-surface-600)}.subscription-page .ant-list.ant-list-split.ant-list-bordered{overflow:hidden}.subscription-page .ant-list.ant-list-split.ant-list-bordered .ant-list-item{overflow-x:auto}.subscription-page .ant-btn.ant-btn-primary.ant-btn-lg.ant-dropdown-trigger{border-radius:4rem;padding:0 20px}.subscription-page .subscription-card{margin:2rem 0}.mb-10{margin-bottom:10px}.mb-12{margin-bottom:12px}.mt-5{margin-top:5px}.mr-8{margin-right:8px}.ml-10{margin-left:10px}.mr-05{margin-right:.5rem}.fs-1rem{font-size:1rem}.w-100{width:100%}.w-70{width:70px}.w-95{width:95px}.text-center{text-align:center}.cursor-pointer{cursor:pointer}.float-right{float:right}.va-middle{vertical-align:middle}.d-flex{display:flex}.justify-end{justify-content:flex-end}.max-w-400{max-width:400px;display:inline-block}.ant-space.jc-center{justify-content:center}.min-h-0{min-height:0}.min-h-100vh{min-height:100vh}.h-100{height:100%}.h-50px{height:50px}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-hidden{overflow-y:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-auto{overflow-x:auto}.mt-1rem{margin-top:1rem}.my-3rem{margin-top:3rem;margin-bottom:3rem}.dark .ant-alert-info{background-color:var(--dark-color-tag-blue-bg);border:1px solid var(--dark-color-tag-blue-border)}.dark .ant-alert-info .ant-alert-message{color:var(--dark-color-text-primary)}.dark .ant-alert-info .ant-alert-description{color:rgba(255,255,255,.65)}html[data-theme='ultra-dark'] .dark .ant-alert-info .ant-alert-description{color:rgb(255 255 255 / 72%)}.dark .ant-alert-info .ant-alert-icon{color:var(--dark-color-tag-blue-color)}body.dark .custom-geo-section .ant-table:not(.ant-table-expanded-row .ant-table){outline:1px solid var(--dark-color-table-ring);outline-offset:-1px;border-radius:1rem;overflow-x:hidden}.dark .ant-table{background-color:var(--dark-color-table-body-bg);color:var(--dark-color-text-primary)}.dark .ant-table table{background-color:var(--dark-color-table-body-bg)}.dark .ant-table-thead>tr>th{background-color:var(--dark-color-table-header-bg);color:var(--dark-color-text-primary)}.dark .ant-table-thead>tr>th.ant-table-column-sort{background-color:var(--dark-color-table-column-sorted-bg)}.dark .ant-table-thead .ant-table-column-sorter{color:var(--dark-color-table-sort-icon-muted)}.dark .ant-table-thead .ant-table-column-sorter-up.on,.dark .ant-table-thead .ant-table-column-sorter-down.on{color:var(--color-primary-100)}.dark .ant-table-thead>tr>th .anticon-filter,.dark .ant-table-thead>tr>th .ant-table-filter-icon{color:var(--dark-color-table-sort-icon-muted)}.dark .ant-table-thead>tr>th.ant-table-column-has-filters.ant-table-column-sort .anticon-filter,.dark .ant-table-filter-open .anticon-filter{color:var(--color-primary-100)}.dark .ant-table-filter-dropdown{background-color:var(--dark-color-table-filter-dropdown-bg);border:1px solid var(--dark-color-surface-400)}.dark .ant-table-filter-dropdown .ant-table-filter-dropdown-btns{border-top:1px solid var(--dark-color-surface-300)}.dark .ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td{background-color:var(--dark-color-table-hover)}.dark .ant-table-tbody>tr.ant-table-row-selected>td{background-color:var(--dark-color-table-row-selected)!important}.dark .ant-table-tbody>tr.ant-table-row-selected.ant-table-row-hover>td,.dark .ant-table-tbody>tr.ant-table-row-selected:hover>td{background-color:var(--dark-color-table-row-selected-hover)!important}.dark .ant-table-tbody>tr>td.ant-table-column-sort{background-color:var(--dark-color-table-column-sorted-bg)}.dark .ant-empty-normal .ant-empty-description{color:var(--dark-color-text-secondary)}.dark .ant-table-placeholder .ant-empty-description{color:var(--dark-color-text-secondary)}.dark .ant-table-footer{background-color:var(--dark-color-surface-200);color:var(--dark-color-text-primary);border-top-color:var(--dark-color-surface-400)}.dark .ant-table.ant-table-bordered .ant-table-footer{border-color:var(--dark-color-surface-400)}.dark .ant-table-summary,.dark .ant-table-summary .ant-table-tbody>tr>td,.dark .ant-table-summary .ant-table-thead>tr>th{background-color:var(--dark-color-surface-200);color:var(--dark-color-text-primary);border-color:var(--dark-color-surface-400)}.dark .ant-table-pagination .ant-pagination-total-text,.dark .ant-table-pagination .ant-pagination-options-quick-jumper{color:var(--dark-color-text-secondary)}.dark .ant-pagination-item:not(.ant-pagination-item-active){background-color:var(--dark-color-table-pagination-surface);border-color:var(--dark-color-surface-400)}.dark .ant-pagination-prev .ant-pagination-item-link,.dark .ant-pagination-next .ant-pagination-item-link{background-color:var(--dark-color-table-pagination-surface);border-color:var(--dark-color-surface-400)}.dark .ant-pagination-options .ant-select-selection{background-color:var(--dark-color-table-pagination-surface);border-color:var(--dark-color-surface-400)}.dark .ant-table-fixed-left .ant-table-thead>tr>th,.dark .ant-table-fixed-right .ant-table-thead>tr>th{background-color:var(--dark-color-table-header-bg)}.dark .ant-table-fixed-left .ant-table-tbody>tr>td,.dark .ant-table-fixed-right .ant-table-tbody>tr>td{background-color:var(--dark-color-table-body-bg)}.dark .ant-table-fixed-left .ant-table-tbody>tr.ant-table-row-selected>td,.dark .ant-table-fixed-right .ant-table-tbody>tr.ant-table-row-selected>td{background-color:var(--dark-color-table-row-selected)!important}.dark .ant-table-fixed-left .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,.dark .ant-table-fixed-right .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td{background-color:var(--dark-color-table-hover)}.dark .ant-table-fixed-left .ant-table-tbody>tr.ant-table-row-selected:hover>td,.dark .ant-table-fixed-right .ant-table-tbody>tr.ant-table-row-selected:hover>td,.dark .ant-table-fixed-left .ant-table-tbody>tr.ant-table-row-selected.ant-table-row-hover>td,.dark .ant-table-fixed-right .ant-table-tbody>tr.ant-table-row-selected.ant-table-row-hover>td{background-color:var(--dark-color-table-row-selected-hover)!important}.dark .ant-table-expanded-row .ant-table{background-color:var(--dark-color-table-body-bg)}.dark .ant-table-tbody>tr>td{background-color:transparent}.dark .ant-table-tbody a,.dark .ant-table-thead a,.dark .ant-table-tbody .ant-btn-link,.dark .ant-table-thead .ant-btn-link{color:var(--color-primary-100)}.dark .ant-table-tbody>tr>td{border-color:var(--dark-color-surface-400)}@media (max-width:768px){.inbounds-page .client-email{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.inbounds-page .ant-table-expanded-row .ant-table-thead>tr>th{padding:6px 1px}.inbounds-page .ant-table-expanded-row .ant-table-tbody>tr>td{padding:6px 1px}.inbounds-page .ant-radio-group{display:flex;flex-wrap:wrap;gap:2px}.inbounds-page .ant-radio-group .ant-radio-button-wrapper{border-radius:2px!important;border-left-width:1px!important;margin:1px}.inbounds-page .ant-radio-group .ant-radio-button-wrapper::before{display:none}}.index-page.dark~div .ant-version-list-item{color:var(--dark-color-text-primary)}
\ No newline at end of file
diff --git a/frontend/src/xray.js b/frontend/src/xray.js
index 90af3e55..2956a2fd 100644
--- a/frontend/src/xray.js
+++ b/frontend/src/xray.js
@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import Antd, { message } from 'ant-design-vue';
 import 'ant-design-vue/dist/reset.css';
+import '@/styles/legacy.css';
 
 import { setupAxios } from '@/api/axios-init.js';
 import '@/composables/useTheme.js';
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index d5ff27ad..b1e50e41 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -35,7 +35,12 @@ function makeBackendProxy(target, patterns) {
       // Returning a path from bypass tells Vite to serve that file from
       // its own dev server instead of forwarding the request — used here
       // to short-circuit /panel/<route> for pages we've already migrated.
+      //
+      // Only GETs get bypassed: the xray page reuses its page URL
+      // (`POST /panel/xray/`) for data, so a method-blind bypass would
+      // hand HTML back to fetch calls and break the page in dev.
       bypass(req) {
+        if (req.method !== 'GET') return undefined;
         const url = req.url.split('?')[0];
         if (Object.prototype.hasOwnProperty.call(MIGRATED_ROUTES, url)) {
           return MIGRATED_ROUTES[url];
@@ -85,7 +90,7 @@ export default defineConfig({
       // Patterns are anchored regex so /login.html and /index.html
       // (which Vite serves itself) are NOT forwarded — only the bare
       // backend paths and their sub-routes.
-      '^/(login|logout|getTwoFactorEnable)$',
+      '^/(login|logout|getTwoFactorEnable|csrf-token)$',
       '^/(panel|server)(/|$)',
     ]),
   },
diff --git a/web/controller/dist.go b/web/controller/dist.go
index b2592757..24eca57d 100644
--- a/web/controller/dist.go
+++ b/web/controller/dist.go
@@ -3,11 +3,16 @@ package controller
 import (
 	"bytes"
 	"embed"
+	htmlpkg "html"
 	"net/http"
 	"strings"
 	"time"
 
 	"github.com/gin-gonic/gin"
+
+	"github.com/mhsanaei/3x-ui/v2/config"
+	"github.com/mhsanaei/3x-ui/v2/logger"
+	"github.com/mhsanaei/3x-ui/v2/web/session"
 )
 
 // distFS is filled in once at startup by the web package via SetDistFS.
@@ -72,7 +77,7 @@ func serveDistPage(c *gin.Context, name string) {
 	// Escape just enough that a hostile basePath setting can't break
 	// out of the JS string literal. The setting is admin-controlled
 	// but defense-in-depth costs nothing here.
-	escaped := strings.NewReplacer(
+	jsEscape := strings.NewReplacer(
 		`\`, `\\`,
 		`"`, `\"`,
 		"\n", `\n`,
@@ -80,8 +85,27 @@ func serveDistPage(c *gin.Context, name string) {
 		"<", `<`,
 		">", `>`,
 		"&", `&`,
-	).Replace(basePath)
-	inject := []byte(`<script>window.__X_UI_BASE_PATH__="` + escaped + `";</script></head>`)
+	)
+	escapedBase := jsEscape.Replace(basePath)
+	escapedVer := jsEscape.Replace(config.GetVersion())
+
+	// Embed a CSRF token in the served HTML the same way the legacy
+	// templates did via `<meta name="csrf-token">`. Without this the
+	// SPA login page has no way to acquire a token (the existing
+	// /panel/csrf-token endpoint sits behind checkLogin), and POST
+	// /login is rejected by CSRFMiddleware. EnsureCSRFToken creates
+	// a session token on first call even for anonymous visitors.
+	csrfToken, err := session.EnsureCSRFToken(c)
+	if err != nil {
+		logger.Warning("Unable to mint CSRF token for", name+":", err)
+		csrfToken = ""
+	}
+	csrfMeta := []byte(`<meta name="csrf-token" content="` + htmlpkg.EscapeString(csrfToken) + `">`)
+
+	inject := []byte(`<script>window.__X_UI_BASE_PATH__="` + escapedBase +
+		`";window.__X_UI_CUR_VER__="` + escapedVer + `";</script>`)
+	inject = append(inject, csrfMeta...)
+	inject = append(inject, []byte(`</head>`)...)
 	out := bytes.Replace(body, []byte("</head>"), inject, 1)
 
 	c.Header("Cache-Control", "no-cache, no-store, must-revalidate")
diff --git a/web/controller/index.go b/web/controller/index.go
index de470c0c..3c29c0e4 100644
--- a/web/controller/index.go
+++ b/web/controller/index.go
@@ -40,6 +40,12 @@ func NewIndexController(g *gin.RouterGroup) *IndexController {
 func (a *IndexController) initRouter(g *gin.RouterGroup) {
 	g.GET("/", a.index)
 	g.GET("/logout", a.logout)
+	// Public CSRF endpoint — the SPA login page (served by Vite in
+	// dev or by serveDistPage in prod) needs a token to POST /login,
+	// but the panel-side /panel/csrf-token sits behind checkLogin.
+	// EnsureCSRFToken creates a session token even for anonymous
+	// callers, so any pre-login flow can bootstrap from here.
+	g.GET("/csrf-token", a.csrfToken)
 
 	g.POST("/login", middleware.CSRFMiddleware(), a.login)
 	g.POST("/getTwoFactorEnable", middleware.CSRFMiddleware(), a.getTwoFactorEnable)
@@ -148,6 +154,17 @@ func (a *IndexController) logout(c *gin.Context) {
 	c.Redirect(http.StatusTemporaryRedirect, c.GetString("base_path"))
 }
 
+// csrfToken returns the session CSRF token. Public — the login page
+// needs a token before authenticating.
+func (a *IndexController) csrfToken(c *gin.Context) {
+	token, err := session.EnsureCSRFToken(c)
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"success": false, "msg": err.Error()})
+		return
+	}
+	c.JSON(http.StatusOK, gin.H{"success": true, "obj": token})
+}
+
 // getTwoFactorEnable retrieves the current status of two-factor authentication.
 func (a *IndexController) getTwoFactorEnable(c *gin.Context) {
 	status, err := a.settingService.GetTwoFactorEnable()