diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 99b704be..91131eed 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -3,6 +3,8 @@ import { RouterProvider } from 'react-router-dom';
 import { message } from 'antd';
 import 'antd/dist/reset.css';
 import '@/styles/utils.css';
+import '@/styles/page-shell.css';
+import '@/styles/page-cards.css';
 
 import { setupAxios } from '@/api/axios-init';
 import { readyI18n } from '@/i18n/react';
diff --git a/frontend/src/pages/api-docs/ApiDocsPage.css b/frontend/src/pages/api-docs/ApiDocsPage.css
index f9988c4b..c6cb6daf 100644
--- a/frontend/src/pages/api-docs/ApiDocsPage.css
+++ b/frontend/src/pages/api-docs/ApiDocsPage.css
@@ -1,13 +1,4 @@
-.api-docs-page {
-  --bg-page: #e6e8ec;
-  --bg-card: #ffffff;
-  min-height: 100vh;
-  background: var(--bg-page);
-}
-
 .api-docs-page.is-dark {
-  --bg-page: #1a1b1f;
-  --bg-card: #23252b;
   --sw-bg: #1f2026;
   --sw-bg-soft: #25272e;
   --sw-bg-input: #15161a;
@@ -22,8 +13,6 @@
 }
 
 .api-docs-page.is-dark.is-ultra {
-  --bg-page: #000;
-  --bg-card: #101013;
   --sw-bg: #0a0a0d;
   --sw-bg-soft: #131316;
   --sw-bg-input: #050507;
diff --git a/frontend/src/pages/api-docs/ApiDocsPage.tsx b/frontend/src/pages/api-docs/ApiDocsPage.tsx
index e708b45c..8841c707 100644
--- a/frontend/src/pages/api-docs/ApiDocsPage.tsx
+++ b/frontend/src/pages/api-docs/ApiDocsPage.tsx
@@ -5,7 +5,6 @@ import 'swagger-ui-react/swagger-ui.css';
 
 import { useTheme } from '@/hooks/useTheme';
 import AppSidebar from '@/components/AppSidebar';
-import '@/styles/page-cards.css';
 import './ApiDocsPage.css';
 
 const basePath = window.X_UI_BASE_PATH || '';
diff --git a/frontend/src/pages/clients/ClientsPage.css b/frontend/src/pages/clients/ClientsPage.css
index 15639d2f..1c52262d 100644
--- a/frontend/src/pages/clients/ClientsPage.css
+++ b/frontend/src/pages/clients/ClientsPage.css
@@ -1,29 +1,3 @@
-.clients-page {
-  --bg-page: #e6e8ec;
-  --bg-card: #ffffff;
-  min-height: 100vh;
-  background: var(--bg-page);
-}
-
-.clients-page.is-dark {
-  --bg-page: #1a1b1f;
-  --bg-card: #23252b;
-}
-
-.clients-page.is-dark.is-ultra {
-  --bg-page: #000;
-  --bg-card: #101013;
-}
-
-.clients-page .ant-layout,
-.clients-page .ant-layout-content {
-  background: transparent;
-}
-
-.clients-page .content-shell {
-  background: transparent;
-}
-
 .clients-page .content-area {
   padding: 24px;
 }
@@ -39,10 +13,6 @@
   min-width: 100px;
 }
 
-.clients-page .loading-spacer {
-  min-height: calc(100vh - 120px);
-}
-
 .clients-page .summary-card {
   padding: 16px;
 }
diff --git a/frontend/src/pages/clients/ClientsPage.tsx b/frontend/src/pages/clients/ClientsPage.tsx
index 57993ec0..872f87b4 100644
--- a/frontend/src/pages/clients/ClientsPage.tsx
+++ b/frontend/src/pages/clients/ClientsPage.tsx
@@ -58,7 +58,6 @@ const ClientInfoModal = lazy(() => import('./ClientInfoModal'));
 const ClientQrModal = lazy(() => import('./ClientQrModal'));
 const ClientBulkAddModal = lazy(() => import('./ClientBulkAddModal'));
 const ClientBulkAdjustModal = lazy(() => import('./ClientBulkAdjustModal'));
-import '@/styles/page-cards.css';
 import './ClientsPage.css';
 
 const FILTER_STATE_KEY = 'clientsFilterState';
diff --git a/frontend/src/pages/inbounds/InboundsPage.css b/frontend/src/pages/inbounds/InboundsPage.css
index 2f3bc461..20416b50 100644
--- a/frontend/src/pages/inbounds/InboundsPage.css
+++ b/frontend/src/pages/inbounds/InboundsPage.css
@@ -1,44 +1,13 @@
-.inbounds-page {
-  --bg-page: #e6e8ec;
-  --bg-card: #ffffff;
-
-  min-height: 100vh;
-  background: var(--bg-page);
-}
-
-.inbounds-page.is-dark {
-  --bg-page: #1a1b1f;
-  --bg-card: #23252b;
-}
-
-.inbounds-page.is-dark.is-ultra {
-  --bg-page: #000;
-  --bg-card: #101013;
-}
-
-.inbounds-page .ant-layout,
-.inbounds-page .ant-layout-content {
-  background: transparent;
-}
-
-.content-shell {
-  background: transparent;
-}
-
-.content-area {
+.inbounds-page .content-area {
   padding: 24px;
 }
 
 @media (max-width: 768px) {
-  .content-area {
+  .inbounds-page .content-area {
     padding: 8px;
   }
 }
 
-.loading-spacer {
-  min-height: calc(100vh - 120px);
-}
-
 .summary-card {
   padding: 16px;
 }
diff --git a/frontend/src/pages/inbounds/InboundsPage.tsx b/frontend/src/pages/inbounds/InboundsPage.tsx
index e67ac45b..111e9601 100644
--- a/frontend/src/pages/inbounds/InboundsPage.tsx
+++ b/frontend/src/pages/inbounds/InboundsPage.tsx
@@ -36,7 +36,6 @@ import LazyMount from '@/components/LazyMount';
 const InboundFormModal = lazy(() => import('./InboundFormModal'));
 const InboundInfoModal = lazy(() => import('./InboundInfoModal'));
 const QrCodeModal = lazy(() => import('./QrCodeModal'));
-import '@/styles/page-cards.css';
 import './InboundsPage.css';
 
 type RowAction =
diff --git a/frontend/src/pages/index/IndexPage.css b/frontend/src/pages/index/IndexPage.css
index c1892613..9fb8ed51 100644
--- a/frontend/src/pages/index/IndexPage.css
+++ b/frontend/src/pages/index/IndexPage.css
@@ -1,30 +1,3 @@
-.index-page {
-  --bg-page: #e6e8ec;
-  --bg-card: #ffffff;
-
-  min-height: 100vh;
-  background: var(--bg-page);
-}
-
-.index-page.is-dark {
-  --bg-page: #1a1b1f;
-  --bg-card: #23252b;
-}
-
-.index-page.is-dark.is-ultra {
-  --bg-page: #000;
-  --bg-card: #101013;
-}
-
-.index-page .ant-layout,
-.index-page .ant-layout-content {
-  background: transparent;
-}
-
-.index-page .content-shell {
-  background: transparent;
-}
-
 .index-page .content-area {
   padding: 24px;
 }
@@ -36,10 +9,6 @@
   }
 }
 
-.index-page .loading-spacer {
-  min-height: calc(100vh - 120px);
-}
-
 .index-page .action {
   cursor: pointer;
   justify-content: center;
diff --git a/frontend/src/pages/index/IndexPage.tsx b/frontend/src/pages/index/IndexPage.tsx
index c091153a..c3a58105 100644
--- a/frontend/src/pages/index/IndexPage.tsx
+++ b/frontend/src/pages/index/IndexPage.tsx
@@ -53,7 +53,6 @@ const SystemHistoryModal = lazy(() => import('./SystemHistoryModal'));
 const XrayMetricsModal = lazy(() => import('./XrayMetricsModal'));
 const XrayLogModal = lazy(() => import('./XrayLogModal'));
 const VersionModal = lazy(() => import('./VersionModal'));
-import '@/styles/page-cards.css';
 import './IndexPage.css';
 
 export default function IndexPage() {
diff --git a/frontend/src/pages/nodes/NodesPage.css b/frontend/src/pages/nodes/NodesPage.css
index e8800311..e5328830 100644
--- a/frontend/src/pages/nodes/NodesPage.css
+++ b/frontend/src/pages/nodes/NodesPage.css
@@ -1,29 +1,3 @@
-.nodes-page {
-  --bg-page: #e6e8ec;
-  --bg-card: #ffffff;
-  min-height: 100vh;
-  background: var(--bg-page);
-}
-
-.nodes-page.is-dark {
-  --bg-page: #1a1b1f;
-  --bg-card: #23252b;
-}
-
-.nodes-page.is-dark.is-ultra {
-  --bg-page: #000;
-  --bg-card: #101013;
-}
-
-.nodes-page .ant-layout,
-.nodes-page .ant-layout-content {
-  background: transparent;
-}
-
-.nodes-page .content-shell {
-  background: transparent;
-}
-
 .nodes-page .content-area {
   padding: 24px;
 }
@@ -34,10 +8,6 @@
   }
 }
 
-.nodes-page .loading-spacer {
-  min-height: calc(100vh - 120px);
-}
-
 .nodes-page .summary-card {
   padding: 16px;
 }
diff --git a/frontend/src/pages/nodes/NodesPage.tsx b/frontend/src/pages/nodes/NodesPage.tsx
index 632938ff..b1a411f6 100644
--- a/frontend/src/pages/nodes/NodesPage.tsx
+++ b/frontend/src/pages/nodes/NodesPage.tsx
@@ -17,7 +17,6 @@ import AppSidebar from '@/components/AppSidebar';
 import NodeList from './NodeList';
 import NodeFormModal from './NodeFormModal';
 import { setMessageInstance } from '@/utils/messageBus';
-import '@/styles/page-cards.css';
 import './NodesPage.css';
 
 export default function NodesPage() {
diff --git a/frontend/src/pages/settings/SettingsPage.css b/frontend/src/pages/settings/SettingsPage.css
index d5d638ab..37d73ffd 100644
--- a/frontend/src/pages/settings/SettingsPage.css
+++ b/frontend/src/pages/settings/SettingsPage.css
@@ -1,37 +1,7 @@
-.settings-page {
-  --bg-page: #e6e8ec;
-  --bg-card: #ffffff;
-  min-height: 100vh;
-  background: var(--bg-page);
-}
-
-.settings-page.is-dark {
-  --bg-page: #1a1b1f;
-  --bg-card: #23252b;
-}
-
-.settings-page.is-dark.is-ultra {
-  --bg-page: #000;
-  --bg-card: #101013;
-}
-
-.settings-page .ant-layout,
-.settings-page .ant-layout-content {
-  background: transparent;
-}
-
-.settings-page .content-shell {
-  background: transparent;
-}
-
 .settings-page .content-area {
   padding: 24px;
 }
 
-.settings-page .loading-spacer {
-  min-height: calc(100vh - 120px);
-}
-
 .settings-page .conf-alert {
   margin-bottom: 10px;
 }
diff --git a/frontend/src/pages/settings/SettingsPage.tsx b/frontend/src/pages/settings/SettingsPage.tsx
index 8442f27b..af77f6b1 100644
--- a/frontend/src/pages/settings/SettingsPage.tsx
+++ b/frontend/src/pages/settings/SettingsPage.tsx
@@ -35,7 +35,6 @@ import SecurityTab from './SecurityTab';
 import TelegramTab from './TelegramTab';
 import SubscriptionGeneralTab from './SubscriptionGeneralTab';
 import SubscriptionFormatsTab from './SubscriptionFormatsTab';
-import '@/styles/page-cards.css';
 import './SettingsPage.css';
 
 interface ApiMsg {
diff --git a/frontend/src/pages/xray/NordModal.css b/frontend/src/pages/xray/NordModal.css
index 464d1b55..f5e88bcf 100644
--- a/frontend/src/pages/xray/NordModal.css
+++ b/frontend/src/pages/xray/NordModal.css
@@ -22,10 +22,6 @@
   background: var(--ant-color-fill-tertiary);
 }
 
-.zero-margin {
-  margin: 0;
-}
-
 .server-row {
   display: inline-flex;
   align-items: center;
diff --git a/frontend/src/pages/xray/WarpModal.css b/frontend/src/pages/xray/WarpModal.css
index 308f1b82..b93a1bd0 100644
--- a/frontend/src/pages/xray/WarpModal.css
+++ b/frontend/src/pages/xray/WarpModal.css
@@ -22,10 +22,6 @@
   background: var(--ant-color-fill-tertiary);
 }
 
-.zero-margin {
-  margin: 0;
-}
-
 .license-actions {
   display: flex;
   align-items: center;
diff --git a/frontend/src/pages/xray/XrayPage.css b/frontend/src/pages/xray/XrayPage.css
index 7ffd701a..a86065ad 100644
--- a/frontend/src/pages/xray/XrayPage.css
+++ b/frontend/src/pages/xray/XrayPage.css
@@ -1,38 +1,7 @@
-.xray-page {
-  --bg-page: #e6e8ec;
-  --bg-card: #ffffff;
-
-  min-height: 100vh;
-  background: var(--bg-page);
-}
-
-.xray-page.is-dark {
-  --bg-page: #1a1b1f;
-  --bg-card: #23252b;
-}
-
-.xray-page.is-dark.is-ultra {
-  --bg-page: #000;
-  --bg-card: #101013;
-}
-
-.xray-page .ant-layout,
-.xray-page .ant-layout-content {
-  background: transparent;
-}
-
-.xray-page .content-shell {
-  background: transparent;
-}
-
 .xray-page .content-area {
   padding: 24px;
 }
 
-.xray-page .loading-spacer {
-  min-height: calc(100vh - 120px);
-}
-
 .xray-page .header-row {
   display: flex;
   flex-wrap: wrap;
diff --git a/frontend/src/pages/xray/XrayPage.tsx b/frontend/src/pages/xray/XrayPage.tsx
index a0e262c9..02391eb6 100644
--- a/frontend/src/pages/xray/XrayPage.tsx
+++ b/frontend/src/pages/xray/XrayPage.tsx
@@ -44,7 +44,6 @@ import BalancersTab from './BalancersTab';
 import DnsTab from './DnsTab';
 import WarpModal from './WarpModal';
 import NordModal from './NordModal';
-import '@/styles/page-cards.css';
 import './XrayPage.css';
 
 const TAB_KEYS = ['tpl-basic', 'tpl-routing', 'tpl-outbound', 'tpl-balancer', 'tpl-dns', 'tpl-advanced'];
diff --git a/frontend/src/styles/page-shell.css b/frontend/src/styles/page-shell.css
new file mode 100644
index 00000000..f9f58236
--- /dev/null
+++ b/frontend/src/styles/page-shell.css
@@ -0,0 +1,65 @@
+.index-page,
+.clients-page,
+.inbounds-page,
+.xray-page,
+.settings-page,
+.nodes-page,
+.api-docs-page {
+  --bg-page: #e6e8ec;
+  --bg-card: #ffffff;
+  min-height: 100vh;
+  background: var(--bg-page);
+}
+
+.index-page.is-dark,
+.clients-page.is-dark,
+.inbounds-page.is-dark,
+.xray-page.is-dark,
+.settings-page.is-dark,
+.nodes-page.is-dark,
+.api-docs-page.is-dark {
+  --bg-page: #1a1b1f;
+  --bg-card: #23252b;
+}
+
+.index-page.is-dark.is-ultra,
+.clients-page.is-dark.is-ultra,
+.inbounds-page.is-dark.is-ultra,
+.xray-page.is-dark.is-ultra,
+.settings-page.is-dark.is-ultra,
+.nodes-page.is-dark.is-ultra,
+.api-docs-page.is-dark.is-ultra {
+  --bg-page: #000;
+  --bg-card: #101013;
+}
+
+.index-page .ant-layout,
+.index-page .ant-layout-content,
+.clients-page .ant-layout,
+.clients-page .ant-layout-content,
+.inbounds-page .ant-layout,
+.inbounds-page .ant-layout-content,
+.xray-page .ant-layout,
+.xray-page .ant-layout-content,
+.settings-page .ant-layout,
+.settings-page .ant-layout-content,
+.nodes-page .ant-layout,
+.nodes-page .ant-layout-content,
+.api-docs-page .ant-layout,
+.api-docs-page .ant-layout-content {
+  background: transparent;
+}
+
+.index-page .content-shell,
+.clients-page .content-shell,
+.inbounds-page .content-shell,
+.xray-page .content-shell,
+.settings-page .content-shell,
+.nodes-page .content-shell,
+.api-docs-page .content-shell {
+  background: transparent;
+}
+
+.loading-spacer {
+  min-height: calc(100vh - 120px);
+}
diff --git a/frontend/src/styles/utils.css b/frontend/src/styles/utils.css
index 11edcc15..40cec66d 100644
--- a/frontend/src/styles/utils.css
+++ b/frontend/src/styles/utils.css
@@ -13,3 +13,5 @@
 
 .my-8 { margin: 8px 0; }
 .my-10 { margin: 10px 0; }
+
+.zero-margin { margin: 0; }