style(frontend): improve readability and mobile polish

- bump statistic title/value contrast in dark and ultra-dark so totals
  on the inbounds summary card stay legible
- give index card actions explicit colors per theme so links like Stop,
  Logs, System History no longer fade into the card background
- show the panel version as a tag next to "3X-UI" on mobile, mirroring
  the Xray version tag pattern, and turn it orange when an update is
  available
- make the login settings button a proper circle by adding size="large"
  + an explicit border-radius fallback on .toolbar-btn

frontend/src/components/CustomStatistic.css

@@ -31,14 +31,22 @@
   margin-bottom: 6px !important;
   letter-spacing: 0.6px;
   text-transform: uppercase;
-  opacity: 0.55;
+  color: rgba(0, 0, 0, 0.55);
   font-weight: 500;
 }
 
 body.dark .ant-statistic-content {
-  color: var(--dark-color-text-primary);
+  color: rgba(255, 255, 255, 0.92);
 }
 
 body.dark .ant-statistic-title {
-  color: rgba(255, 255, 255, 0.55);
+  color: rgba(255, 255, 255, 0.72);
+}
+
+html[data-theme='ultra-dark'] .ant-statistic-content {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+html[data-theme='ultra-dark'] .ant-statistic-title {
+  color: rgba(255, 255, 255, 0.70);
 }

frontend/src/pages/index/IndexPage.css

@@ -163,7 +163,29 @@ html[data-theme='ultra-dark'] .index-page .ant-card .ant-card-actions > li {
   max-width: 100%;
   padding: 0 8px;
   flex-wrap: nowrap;
-  transition: opacity 0.15s ease, transform 0.15s ease;
+  color: rgba(0, 0, 0, 0.78);
+  font-weight: 500;
+  transition: opacity 0.15s ease, transform 0.15s ease, color 0.2s ease;
+}
+
+.index-page .action .anticon {
+  color: rgba(0, 0, 0, 0.72);
+}
+
+body.dark .index-page .action {
+  color: rgba(255, 255, 255, 0.82);
+}
+
+body.dark .index-page .action .anticon {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+html[data-theme='ultra-dark'] .index-page .action {
+  color: rgba(255, 255, 255, 0.86);
+}
+
+html[data-theme='ultra-dark'] .index-page .action .anticon {
+  color: rgba(255, 255, 255, 0.78);
 }
 
 .index-page .action > span:not(.anticon):not(.tg-icon) {

frontend/src/pages/index/IndexPage.tsx

@@ -11,6 +11,7 @@ import {
   Row,
   Space,
   Spin,
+  Tag,
   Tooltip,
 } from 'antd';
 import {
@@ -210,7 +211,18 @@ export default function IndexPage() {
 
                   <Col xs={24} lg={12}>
                     <Card
-                      title="3X-UI"
+                      title={
+                        <Space>
+                          <span>3X-UI</span>
+                          {isMobile && displayVersion && (
+                            <Tag color={panelUpdateInfo.updateAvailable ? 'orange' : 'green'}>
+                              {panelUpdateInfo.updateAvailable
+                                ? `v${panelUpdateInfo.latestVersion}`
+                                : `v${displayVersion}`}
+                            </Tag>
+                          )}
+                        </Space>
+                      }
                       hoverable
                       actions={[
                         <Space className="action" key="tg" onClick={openTelegram}>

frontend/src/pages/login/LoginPage.css

@@ -219,6 +219,13 @@
 .toolbar-btn {
   width: 40px;
   height: 40px;
+  min-width: 40px;
+  border-radius: 50%;
+  padding: 0;
+}
+
+.toolbar-btn .anticon {
+  font-size: 18px;
 }
 
 .theme-cycle {

frontend/src/pages/login/LoginPage.tsx

@@ -170,6 +170,7 @@ export default function LoginPage() {
             >
               <Button
                 shape="circle"
+                size="large"
                 className="toolbar-btn"
                 aria-label={t('menu.settings')}
                 icon={<SettingOutlined />}