diff --git a/ui/.eslintrc.cjs b/ui/.eslintrc.cjs
index d82915f5c..d551651c6 100644
--- a/ui/.eslintrc.cjs
+++ b/ui/.eslintrc.cjs
@@ -15,7 +15,7 @@ module.exports = {
     "plugin:import/typescript",
     "plugin:prettier/recommended",
     "plugin:react-hooks/recommended",
-    "plugin:tailwindcss/recommended",
+    "plugin:better-tailwindcss/recommended-warn",
   ],
   ignorePatterns: ["dist", ".eslintrc.cjs"],
   parser: "@typescript-eslint/parser",
@@ -88,6 +88,9 @@ module.exports = {
         },
       },
     ],
+    "better-tailwindcss": {
+      entryPoint: "src/global.css",
+    },
     "react-refresh/only-export-components": [
       "warn",
       {
@@ -100,7 +103,6 @@ module.exports = {
         ignoreDeclarationSort: true,
       },
     ],
-    "tailwindcss/no-custom-classname": "off",
   },
   settings: {
     "import/resolver": {
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 43e91d134..e318a43ca 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -35,11 +35,13 @@
         "react-dom": "^18.3.1",
         "react-i18next": "^15.5.3",
         "react-router-dom": "^7.6.2",
-        "tailwind-merge": "^2.6.0",
+        "tailwind-merge": "^3.3.1",
         "zod": "^3.25.67",
         "zustand": "^5.0.5"
       },
       "devDependencies": {
+        "@tailwindcss/postcss": "^4.1.11",
+        "@tailwindcss/vite": "^4.1.11",
         "@types/file-saver": "^2.0.7",
         "@types/fs-extra": "^11.0.4",
         "@types/node": "^22.15.17",
@@ -50,20 +52,17 @@
         "@typescript-eslint/parser": "^8.34.1",
         "@vitejs/plugin-legacy": "^6.1.1",
         "@vitejs/plugin-react": "^4.6.0",
-        "autoprefixer": "^10.4.21",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^10.1.5",
         "eslint-import-resolver-typescript": "^3.8.3",
+        "eslint-plugin-better-tailwindcss": "^3.4.3",
         "eslint-plugin-import": "^2.32.0",
         "eslint-plugin-prettier": "^5.5.0",
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.20",
-        "eslint-plugin-tailwindcss": "^3.18.0",
         "fs-extra": "^11.3.0",
-        "postcss": "^8.5.6",
         "prettier": "^3.6.0",
-        "tailwindcss": "^3.4.17",
-        "tailwindcss-animate": "^1.0.7",
+        "tailwindcss": "^4.1.11",
         "typescript": "^5.8.3",
         "vite": "^6.3.5"
       }
@@ -2733,6 +2732,19 @@
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
+    "node_modules/@eslint/css-tree": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmmirror.com/@eslint/css-tree/-/css-tree-3.6.1.tgz",
+      "integrity": "sha512-5DIsBME23tUQD5zHD+T38lC2DG4jB8x8JRa+yDncLne2TIZA0VuCpcSazOX1EC+sM/q8w24qeevXfmfsIxAeqA==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.21.0",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "2.1.4",
       "resolved": "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
@@ -2855,48 +2867,16 @@
       "deprecated": "Use @eslint/object-schema instead",
       "dev": true
     },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmmirror.com/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
       "dev": true,
       "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+        "minipass": "^7.0.4"
       },
       "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+        "node": ">=18.0.0"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
@@ -3048,16 +3028,6 @@
         "node": ">=12.4.0"
       }
     },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmmirror.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@pkgr/core": {
       "version": "0.2.7",
       "resolved": "https://registry.npmmirror.com/@pkgr/core/-/core-0.2.7.tgz",
@@ -3494,6 +3464,281 @@
       "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
       "dev": true
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/node/-/node-4.1.11.tgz",
+      "integrity": "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==",
+      "dev": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "lightningcss": "1.30.1",
+        "magic-string": "^0.30.17",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.11"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide/-/oxide-4.1.11.tgz",
+      "integrity": "sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "detect-libc": "^2.0.4",
+        "tar": "^7.4.3"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.11",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.11",
+        "@tailwindcss/oxide-darwin-x64": "4.1.11",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.11",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.11",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.11",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.11",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.11",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.11",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.11",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.11",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.11"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.11.tgz",
+      "integrity": "sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.11.tgz",
+      "integrity": "sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.11.tgz",
+      "integrity": "sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.11.tgz",
+      "integrity": "sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.11.tgz",
+      "integrity": "sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.11.tgz",
+      "integrity": "sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.11.tgz",
+      "integrity": "sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.11.tgz",
+      "integrity": "sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.11.tgz",
+      "integrity": "sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.11.tgz",
+      "integrity": "sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@emnapi/wasi-threads": "^1.0.2",
+        "@napi-rs/wasm-runtime": "^0.2.11",
+        "@tybys/wasm-util": "^0.9.0",
+        "tslib": "^2.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz",
+      "integrity": "sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.11.tgz",
+      "integrity": "sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/postcss/-/postcss-4.1.11.tgz",
+      "integrity": "sha512-q/EAIIpF6WpLhKEuQSEVMZNMIY8KhWoAemZ9eylNAih9jxMGAYPPWBn3I9QL/2jZ+e7OEz/tZkX5HwbBR4HohA==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.11",
+        "@tailwindcss/oxide": "4.1.11",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.11"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/vite/-/vite-4.1.11.tgz",
+      "integrity": "sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw==",
+      "dev": true,
+      "dependencies": {
+        "@tailwindcss/node": "4.1.11",
+        "@tailwindcss/oxide": "4.1.11",
+        "tailwindcss": "4.1.11"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmmirror.com/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -4163,31 +4408,6 @@
         "react-dom": ">=16.0.0"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmmirror.com/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmmirror.com/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz",
@@ -4310,43 +4530,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/autoprefixer": {
-      "version": "10.4.21",
-      "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.21.tgz",
-      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "browserslist": "^4.24.4",
-        "caniuse-lite": "^1.0.30001702",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -4416,18 +4599,6 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -4562,15 +4733,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001706",
       "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001706.tgz",
@@ -4591,40 +4753,13 @@
         }
       ]
     },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
       "dev": true,
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
       "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
+        "node": ">=18"
       }
     },
     "node_modules/classnames": {
@@ -4654,15 +4789,6 @@
         "@codemirror/view": "^6.0.0"
       }
     },
-    "node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmmirror.com/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/compute-scroll-into-view": {
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
@@ -4750,18 +4876,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
@@ -4888,17 +5002,14 @@
         "node": ">=6"
       }
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmmirror.com/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
-    },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmmirror.com/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+    "node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
@@ -4926,28 +5037,16 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true
-    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.74",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.74.tgz",
       "integrity": "sha512-ck3//9RC+6oss/1Bh9tiAVFy5vfSKbRHAFh7Z3/eTRkEqJeWgymloShB17Vg3Z4nmDNp35vAd1BZ6CMW4Wt6Iw==",
       "dev": true
     },
-    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true
-    },
     "node_modules/enhanced-resolve": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-5.18.0.tgz",
-      "integrity": "sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==",
+      "version": "5.18.2",
+      "resolved": "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
+      "integrity": "sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==",
       "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -5298,6 +5397,28 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/eslint-plugin-better-tailwindcss": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-better-tailwindcss/-/eslint-plugin-better-tailwindcss-3.4.3.tgz",
+      "integrity": "sha512-gw2d3rrVAXw7qwzPZs9CYRA32baGJiJCDM3R/65OgDgHEi4IF1JX9CDqRxmcKhbAHTfQjY0GtS6s04ZVjEpaEQ==",
+      "dev": true,
+      "dependencies": {
+        "@eslint/css-tree": "^3.6.1",
+        "enhanced-resolve": "^5.18.2",
+        "jiti": "^2.4.2",
+        "postcss": "^8.5.6",
+        "postcss-import": "^16.1.1",
+        "synckit": "^0.11.8",
+        "tailwind-csstree": "^0.1.1"
+      },
+      "engines": {
+        "node": "^20.11.0 || >=21.2.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0",
+        "tailwindcss": "^3.3.0 || ^4.0.0"
+      }
+    },
     "node_modules/eslint-plugin-import": {
       "version": "2.32.0",
       "resolved": "https://registry.npmmirror.com/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
@@ -5434,22 +5555,6 @@
         "eslint": ">=8.40"
       }
     },
-    "node_modules/eslint-plugin-tailwindcss": {
-      "version": "3.18.0",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.18.0.tgz",
-      "integrity": "sha512-PQDU4ZMzFH0eb2DrfHPpbgo87Zgg2EXSMOj1NSfzdZm+aJzpuwGerfowMIaVehSREEa0idbf/eoNYAOHSJoDAQ==",
-      "dev": true,
-      "dependencies": {
-        "fast-glob": "^3.2.5",
-        "postcss": "^8.4.4"
-      },
-      "engines": {
-        "node": ">=18.12.0"
-      },
-      "peerDependencies": {
-        "tailwindcss": "^3.4.0"
-      }
-    },
     "node_modules/eslint-scope": {
       "version": "7.2.2",
       "resolved": "https://registry.npmmirror.com/eslint-scope/-/eslint-scope-7.2.2.tgz",
@@ -5797,35 +5902,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/foreground-child": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.2.1.tgz",
-      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
     "node_modules/fs-extra": {
       "version": "11.3.0",
       "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-11.3.0.tgz",
@@ -6327,18 +6403,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-boolean-object": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/is-boolean-object/-/is-boolean-object-1.2.1.tgz",
@@ -6448,15 +6512,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-generator-function": {
       "version": "1.0.10",
       "resolved": "https://registry.npmmirror.com/is-generator-function/-/is-generator-function-1.0.10.tgz",
@@ -6684,28 +6739,13 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmmirror.com/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
     "node_modules/jiti": {
-      "version": "1.21.6",
-      "resolved": "https://registry.npmmirror.com/jiti/-/jiti-1.21.6.tgz",
-      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/jiti/-/jiti-2.4.2.tgz",
+      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
       "dev": true,
       "bin": {
-        "jiti": "bin/jiti.js"
+        "jiti": "lib/jiti-cli.mjs"
       }
     },
     "node_modules/js-cookie": {
@@ -6817,23 +6857,233 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+    "node_modules/lightningcss": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmmirror.com/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
       "dev": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
       "engines": {
-        "node": ">=14"
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/antonk52"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
       }
     },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmmirror.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmmirror.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmmirror.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmmirror.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmmirror.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -6925,6 +7175,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.21.0",
+      "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.21.0.tgz",
+      "integrity": "sha512-+ZKPQezM5vYJIkCxaC+4DTnRrVZR1CgsKLu5zsQERQx6Tea8Y+wMx5A24rq8A8NepCeatIQufVAekKNgiBMsGQ==",
+      "dev": true
+    },
     "node_modules/meow": {
       "version": "13.2.0",
       "resolved": "https://registry.npmmirror.com/meow/-/meow-13.2.0.tgz",
@@ -6992,23 +7248,39 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/minizlib": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/minizlib/-/minizlib-3.0.2.tgz",
+      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+      "dev": true,
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "dev": true,
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true
     },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
     "node_modules/nanoid": {
       "version": "5.1.5",
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-5.1.5.tgz",
@@ -7038,24 +7310,6 @@
       "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
       "dev": true
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmmirror.com/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
@@ -7064,15 +7318,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -7237,12 +7482,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
-      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
-      "dev": true
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
@@ -7288,28 +7527,6 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmmirror.com/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true
-    },
     "node_modules/path-to-regexp": {
       "version": "8.2.0",
       "resolved": "https://registry.npmmirror.com/path-to-regexp/-/path-to-regexp-8.2.0.tgz",
@@ -7345,15 +7562,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/pirates": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmmirror.com/pirates/-/pirates-4.0.6.tgz",
-      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/pocketbase": {
       "version": "0.26.1",
       "resolved": "https://registry.npmmirror.com/pocketbase/-/pocketbase-0.26.1.tgz",
@@ -7397,9 +7605,9 @@
       }
     },
     "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmmirror.com/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-import/-/postcss-import-16.1.1.tgz",
+      "integrity": "sha512-2xVS1NCZAfjtVdvXiyegxzJ447GyqCeEI5V7ApgQVOWnros1p5lGNovJNapwPpMombyFBfqDwt7AD3n2l0KOfQ==",
       "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
@@ -7407,104 +7615,12 @@
         "resolve": "^1.1.7"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=18.0.0"
       },
       "peerDependencies": {
         "postcss": "^8.0.0"
       }
     },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmmirror.com/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmmirror.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmmirror.com/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -8326,18 +8442,6 @@
         "pify": "^2.3.0"
       }
     },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.9",
       "resolved": "https://registry.npmmirror.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.9.tgz",
@@ -8848,18 +8952,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
@@ -8914,71 +9006,6 @@
       "resolved": "https://registry.npmmirror.com/string-convert/-/string-convert-0.2.1.tgz",
       "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
     },
-    "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
-    },
-    "node_modules/string-width/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/string-width/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/string.prototype.trim": {
       "version": "1.2.10",
       "resolved": "https://registry.npmmirror.com/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
@@ -9047,19 +9074,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -9091,48 +9105,6 @@
       "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.4.tgz",
       "integrity": "sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now=="
     },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmmirror.com/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmmirror.com/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -9178,60 +9150,33 @@
       "integrity": "sha512-Nk8c4lXvMB98MtbmjX7JwJRgJOL8fluecYCfCeYBznwmpOs8Bf15hLM6z4z71EDAhQVrQrI+wt1aLWSXZq+hXA==",
       "dev": true
     },
+    "node_modules/tailwind-csstree": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmmirror.com/tailwind-csstree/-/tailwind-csstree-0.1.1.tgz",
+      "integrity": "sha512-Tv5IXRHtlb7LanNXjmGg0vu84Iu+/sKDqTLJBO0kP/rggfjJDKnS/HV+e0qn8yIrRByhGg+908rSOxT/7o1diw==",
+      "dev": true,
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
     "node_modules/tailwind-merge": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmmirror.com/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
-      "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
+      "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/dcastil"
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
-      "dev": true,
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/tailwindcss-animate": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmmirror.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
-      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
-      "dev": true,
-      "peerDependencies": {
-        "tailwindcss": ">=3.0.0 || insiders"
-      }
+      "version": "4.1.11",
+      "resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-4.1.11.tgz",
+      "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
+      "dev": true
     },
     "node_modules/tapable": {
       "version": "2.2.1",
@@ -9242,6 +9187,32 @@
         "node": ">=6"
       }
     },
+    "node_modules/tar": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmmirror.com/tar/-/tar-7.4.3.tgz",
+      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+      "dev": true,
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tar/node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/terser": {
       "version": "5.37.0",
       "resolved": "https://registry.npmmirror.com/terser/-/terser-5.37.0.tgz",
@@ -9274,27 +9245,6 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmmirror.com/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmmirror.com/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/throttle-debounce": {
       "version": "5.0.2",
       "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.2.tgz",
@@ -9379,12 +9329,6 @@
         "typescript": ">=4.8.4"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmmirror.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
-    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmmirror.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -9645,12 +9589,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
-    },
     "node_modules/vite": {
       "version": "6.3.5",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-6.3.5.tgz",
@@ -9887,133 +9825,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
@@ -10031,6 +9842,8 @@
       "resolved": "https://registry.npmmirror.com/yaml/-/yaml-2.5.0.tgz",
       "integrity": "sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "bin": {
         "yaml": "bin.mjs"
       },
diff --git a/ui/package.json b/ui/package.json
index 019cb4301..3dcf7c408 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -37,11 +37,13 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^15.5.3",
     "react-router-dom": "^7.6.2",
-    "tailwind-merge": "^2.6.0",
+    "tailwind-merge": "^3.3.1",
     "zod": "^3.25.67",
     "zustand": "^5.0.5"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/vite": "^4.1.11",
     "@types/file-saver": "^2.0.7",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.15.17",
@@ -52,20 +54,17 @@
     "@typescript-eslint/parser": "^8.34.1",
     "@vitejs/plugin-legacy": "^6.1.1",
     "@vitejs/plugin-react": "^4.6.0",
-    "autoprefixer": "^10.4.21",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-import-resolver-typescript": "^3.8.3",
+    "eslint-plugin-better-tailwindcss": "^3.4.3",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-prettier": "^5.5.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-tailwindcss": "^3.18.0",
     "fs-extra": "^11.3.0",
-    "postcss": "^8.5.6",
     "prettier": "^3.6.0",
-    "tailwindcss": "^3.4.17",
-    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss": "^4.1.11",
     "typescript": "^5.8.3",
     "vite": "^6.3.5"
   }
diff --git a/ui/postcss.config.js b/ui/postcss.config.js
deleted file mode 100644
index 2aa7205d4..000000000
--- a/ui/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
diff --git a/ui/src/components/access/AccessFormEmailConfig.tsx b/ui/src/components/access/AccessFormEmailConfig.tsx
index e36e4984c..09d6f9ef9 100644
--- a/ui/src/components/access/AccessFormEmailConfig.tsx
+++ b/ui/src/components/access/AccessFormEmailConfig.tsx
@@ -95,7 +95,7 @@ const AccessFormEmailConfig = ({ form: formInst, formName, disabled, initialValu
 
         <div className="w-2/5">
           <Form.Item name="smtpPort" label={t("access.form.email_smtp_port.label")} rules={[formRule]}>
-            <InputNumber className="w-full" placeholder={t("access.form.email_smtp_port.placeholder")} min={1} max={65535} />
+            <InputNumber style={{ width: "100%" }} placeholder={t("access.form.email_smtp_port.placeholder")} min={1} max={65535} />
           </Form.Item>
         </div>
       </div>
diff --git a/ui/src/components/access/AccessFormSSHConfig.tsx b/ui/src/components/access/AccessFormSSHConfig.tsx
index 99120f14c..69db5ffeb 100644
--- a/ui/src/components/access/AccessFormSSHConfig.tsx
+++ b/ui/src/components/access/AccessFormSSHConfig.tsx
@@ -129,7 +129,7 @@ const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues
 
         <div className="w-1/3">
           <Form.Item name="port" label={t("access.form.ssh_port.label")} rules={[formRule]}>
-            <InputNumber className="w-full" min={1} max={65535} placeholder={t("access.form.ssh_port.placeholder")} />
+            <InputNumber style={{ width: "100%" }} min={1} max={65535} placeholder={t("access.form.ssh_port.placeholder")} />
           </Form.Item>
         </div>
       </div>
@@ -198,7 +198,7 @@ const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues
                             </div>
                             <div className="w-1/3">
                               <Form.Item name={[field.name, "port"]} label={t("access.form.ssh_port.label")} rules={[formRule]}>
-                                <InputNumber className="w-full" placeholder={t("access.form.ssh_port.placeholder")} min={1} max={65535} />
+                                <InputNumber style={{ width: "100%" }} placeholder={t("access.form.ssh_port.placeholder")} min={1} max={65535} />
                               </Form.Item>
                             </div>
                           </div>
diff --git a/ui/src/components/access/AccessFormWebhookConfig.tsx b/ui/src/components/access/AccessFormWebhookConfig.tsx
index b0459469f..32899c768 100644
--- a/ui/src/components/access/AccessFormWebhookConfig.tsx
+++ b/ui/src/components/access/AccessFormWebhookConfig.tsx
@@ -304,7 +304,7 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
       </Form.Item>
 
       <Show when={!usage || usage === "deployment"}>
-        <Form.Item className="mb-0" htmlFor="null">
+        <Form.Item noStyle>
           <label className="mb-1 block">
             <div className="flex w-full items-center justify-between gap-4">
               <div className="max-w-full grow truncate">
@@ -335,7 +335,7 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
       </Show>
 
       <Show when={!usage || usage === "notification"}>
-        <Form.Item className="mb-0" htmlFor="null">
+        <Form.Item noStyle>
           <label className="mb-1 block">
             <div className="flex w-full items-center justify-between gap-4">
               <div className="max-w-full grow truncate">
diff --git a/ui/src/components/access/AccessSelect.tsx b/ui/src/components/access/AccessSelect.tsx
index 01f302496..b9ddc3ff3 100644
--- a/ui/src/components/access/AccessSelect.tsx
+++ b/ui/src/components/access/AccessSelect.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Avatar, Select, type SelectProps, Space, Typography, theme } from "antd";
+import { Avatar, Select, type SelectProps, Typography, theme } from "antd";
 
 import { type AccessModel } from "@/domain/access";
 import { accessProvidersMap } from "@/domain/provider";
@@ -38,23 +38,19 @@ const AccessSelect = ({ filter, ...props }: AccessTypeSelectProps) => {
     const access = accesses.find((e) => e.id === key);
     if (!access) {
       return (
-        <Space className="max-w-full grow truncate" size={4}>
+        <div className="flex items-center gap-2 overflow-hidden truncate">
           <Avatar shape="square" size="small" />
-          <Typography.Text className="leading-loose" ellipsis>
-            {key}
-          </Typography.Text>
-        </Space>
+          <Typography.Text ellipsis>{key}</Typography.Text>
+        </div>
       );
     }
 
     const provider = accessProvidersMap.get(access.provider);
     return (
-      <Space className="max-w-full grow truncate" size={4}>
+      <div className="flex items-center gap-2 overflow-hidden truncate">
         <Avatar shape="square" src={provider?.icon} size="small" />
-        <Typography.Text className="leading-loose" ellipsis>
-          {access.name}
-        </Typography.Text>
-      </Space>
+        <Typography.Text ellipsis>{access.name}</Typography.Text>
+      </div>
     );
   };
 
diff --git a/ui/src/components/notification/NotifyChannelEditFormEmailFields.tsx b/ui/src/components/notification/NotifyChannelEditFormEmailFields.tsx
index fd935b7cf..73beb5447 100644
--- a/ui/src/components/notification/NotifyChannelEditFormEmailFields.tsx
+++ b/ui/src/components/notification/NotifyChannelEditFormEmailFields.tsx
@@ -51,7 +51,7 @@ const NotifyChannelEditFormEmailFields = () => {
 
         <div className="w-2/5">
           <Form.Item name="smtpPort" label={t("settings.notification.channel.form.email_smtp_port.label")} rules={[formRule]}>
-            <InputNumber className="w-full" placeholder={t("settings.notification.channel.form.email_smtp_port.placeholder")} min={1} max={65535} />
+            <InputNumber style={{ width: "100%" }} placeholder={t("settings.notification.channel.form.email_smtp_port.placeholder")} min={1} max={65535} />
           </Form.Item>
         </div>
 
diff --git a/ui/src/components/provider/ACMEDns01ProviderPicker.tsx b/ui/src/components/provider/ACMEDns01ProviderPicker.tsx
index 5a5be8cae..81f950623 100644
--- a/ui/src/components/provider/ACMEDns01ProviderPicker.tsx
+++ b/ui/src/components/provider/ACMEDns01ProviderPicker.tsx
@@ -59,7 +59,7 @@ const ACMEDns01ProviderPicker = ({ className, style, autoFocus, filter, placehol
               return (
                 <Col key={index} xs={24} md={12} span={12}>
                   <Card
-                    className="h-16 w-full overflow-hidden shadow-sm"
+                    className="h-16 w-full overflow-hidden shadow-xs"
                     styles={{ body: { height: "100%", padding: "0.5rem 1rem" } }}
                     hoverable
                     onClick={() => {
diff --git a/ui/src/components/provider/ACMEDns01ProviderSelect.tsx b/ui/src/components/provider/ACMEDns01ProviderSelect.tsx
index 227bfcdda..d761023b7 100644
--- a/ui/src/components/provider/ACMEDns01ProviderSelect.tsx
+++ b/ui/src/components/provider/ACMEDns01ProviderSelect.tsx
@@ -1,6 +1,6 @@
-import { memo, useEffect, useState } from "react";
+import { memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Avatar, Select, type SelectProps, Space, Typography, theme } from "antd";
+import { Avatar, Select, type SelectProps, Typography, theme } from "antd";
 
 import { type ACMEDns01Provider, acmeDns01ProvidersMap } from "@/domain/provider";
 
@@ -16,29 +16,30 @@ const ACMEDns01ProviderSelect = ({ filter, ...props }: ACMEDns01ProviderSelectPr
 
   const { token: themeToken } = theme.useToken();
 
-  const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: ACMEDns01Provider }>>([]);
-  useEffect(() => {
-    const allItems = Array.from(acmeDns01ProvidersMap.values());
-    const filteredItems = filter != null ? allItems.filter(filter) : allItems;
-    setOptions(
-      filteredItems.map((item) => ({
-        key: item.type,
-        value: item.type,
-        label: t(item.name),
-        data: item,
-      }))
-    );
+  const options = useMemo<Array<{ key: string; value: string; label: string; data: ACMEDns01Provider }>>(() => {
+    return Array.from(acmeDns01ProvidersMap.values())
+      .filter((provider) => {
+        if (filter) {
+          return filter(provider);
+        }
+
+        return true;
+      })
+      .map((provider) => ({
+        key: provider.type,
+        value: provider.type,
+        label: t(provider.name),
+        data: provider,
+      }));
   }, [filter]);
 
   const renderOption = (key: string) => {
     const provider = acmeDns01ProvidersMap.get(key);
     return (
-      <Space className="max-w-full grow overflow-hidden truncate" size={4}>
+      <div className="flex items-center gap-2 overflow-hidden truncate">
         <Avatar shape="square" src={provider?.icon} size="small" />
-        <Typography.Text className="leading-loose" ellipsis>
-          {t(provider?.name ?? "")}
-        </Typography.Text>
-      </Space>
+        <Typography.Text ellipsis>{t(provider?.name ?? "")}</Typography.Text>
+      </div>
     );
   };
 
diff --git a/ui/src/components/provider/AccessProviderPicker.tsx b/ui/src/components/provider/AccessProviderPicker.tsx
index 507a95c82..84225de71 100644
--- a/ui/src/components/provider/AccessProviderPicker.tsx
+++ b/ui/src/components/provider/AccessProviderPicker.tsx
@@ -74,7 +74,7 @@ const AccessProviderPicker = ({ className, style, autoFocus, filter, placeholder
               return (
                 <Col key={index} xs={24} md={12} span={8}>
                   <Card
-                    className={mergeCls("h-20 w-full overflow-hidden shadow-sm", provider.builtin ? " cursor-not-allowed" : "")}
+                    className={mergeCls("h-20 w-full overflow-hidden shadow-xs", provider.builtin ? " cursor-not-allowed" : "")}
                     styles={{ body: { height: "100%", padding: "0.5rem 1rem" } }}
                     hoverable
                     onClick={() => {
@@ -91,7 +91,7 @@ const AccessProviderPicker = ({ className, style, autoFocus, filter, placeholder
                         <Typography.Text className="mb-1 line-clamp-1" type={provider.builtin ? "secondary" : undefined}>
                           {t(provider.name)}
                         </Typography.Text>
-                        <div className="origin-left scale-[75%]">
+                        <div className="origin-left scale-75">
                           <Show when={provider.builtin}>
                             <Tag>{t("access.props.provider.builtin")}</Tag>
                           </Show>
diff --git a/ui/src/components/provider/AccessProviderSelect.tsx b/ui/src/components/provider/AccessProviderSelect.tsx
index 055b3ddc5..3ba346387 100644
--- a/ui/src/components/provider/AccessProviderSelect.tsx
+++ b/ui/src/components/provider/AccessProviderSelect.tsx
@@ -1,6 +1,6 @@
-import { memo, useEffect, useMemo, useState } from "react";
+import { memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Avatar, Select, type SelectProps, Space, Tag, Typography, theme } from "antd";
+import { Avatar, Select, type SelectProps, Tag, Typography, theme } from "antd";
 
 import Show from "@/components/Show";
 import { ACCESS_USAGES, type AccessProvider, type AccessUsageType, accessProvidersMap } from "@/domain/provider";
@@ -18,19 +18,22 @@ const AccessProviderSelect = ({ filter, showOptionTags, ...props }: AccessProvid
 
   const { token: themeToken } = theme.useToken();
 
-  const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: AccessProvider }>>([]);
-  useEffect(() => {
-    const allItems = Array.from(accessProvidersMap.values());
-    const filteredItems = filter != null ? allItems.filter(filter) : allItems;
-    setOptions(
-      filteredItems.map((item) => ({
-        key: item.type,
-        value: item.type,
-        label: t(item.name),
-        disabled: item.builtin,
-        data: item,
-      }))
-    );
+  const options = useMemo<Array<{ key: string; value: string; label: string; data: AccessProvider }>>(() => {
+    return Array.from(accessProvidersMap.values())
+      .filter((provider) => {
+        if (filter) {
+          return filter(provider);
+        }
+
+        return true;
+      })
+      .map((provider) => ({
+        key: provider.type,
+        value: provider.type,
+        label: t(provider.name),
+        disabled: provider.builtin,
+        data: provider,
+      }));
   }, [filter]);
 
   const showOptionTagForDNS = useMemo(() => {
@@ -50,13 +53,13 @@ const AccessProviderSelect = ({ filter, showOptionTags, ...props }: AccessProvid
     const provider = accessProvidersMap.get(key) ?? ({ type: "", name: "", icon: "", usages: [] } as unknown as AccessProvider);
     return (
       <div className="flex max-w-full items-center justify-between gap-4 overflow-hidden">
-        <Space className="max-w-full grow truncate" size={4}>
+        <div className="flex items-center gap-2 overflow-hidden truncate">
           <Avatar shape="square" src={provider.icon} size="small" />
-          <Typography.Text className="leading-loose" type={provider.builtin ? "secondary" : undefined} ellipsis>
+          <Typography.Text type={provider.builtin ? "secondary" : undefined} ellipsis>
             {t(provider.name)}
           </Typography.Text>
-        </Space>
-        <div className="origin-right scale-[75%]">
+        </div>
+        <div className="origin-right scale-75">
           <Show when={provider.builtin}>
             <Tag>{t("access.props.provider.builtin")}</Tag>
           </Show>
diff --git a/ui/src/components/provider/CAProviderSelect.tsx b/ui/src/components/provider/CAProviderSelect.tsx
index d1fdbba9b..5aef86d19 100644
--- a/ui/src/components/provider/CAProviderSelect.tsx
+++ b/ui/src/components/provider/CAProviderSelect.tsx
@@ -1,6 +1,6 @@
-import { memo, useEffect, useState } from "react";
+import { memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Avatar, Select, type SelectProps, Space, Typography, theme } from "antd";
+import { Avatar, Select, type SelectProps, Typography, theme } from "antd";
 
 import { type CAProvider, caProvidersMap } from "@/domain/provider";
 
@@ -16,45 +16,49 @@ const CAProviderSelect = ({ filter, ...props }: CAProviderSelectProps) => {
 
   const { token: themeToken } = theme.useToken();
 
-  const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: CAProvider }>>([]);
-  useEffect(() => {
-    const allItems = Array.from(caProvidersMap.values());
-    const filteredItems = filter != null ? allItems.filter(filter) : allItems;
-    setOptions([
-      {
-        key: "",
-        value: "",
-        label: t("provider.default_ca_provider.label"),
-        data: {} as CAProvider,
-      },
-      ...filteredItems.map((item) => ({
-        key: item.type,
-        value: item.type,
-        label: t(item.name),
-        data: item,
-      })),
-    ]);
+  const options = useMemo<Array<{ key: string; value: string; label: string; data: CAProvider }>>(() => {
+    const temp = Array.from(caProvidersMap.values())
+      .filter((provider) => {
+        if (filter) {
+          return filter(provider);
+        }
+
+        return true;
+      })
+      .map((provider) => ({
+        key: provider.type as string,
+        value: provider.type as string,
+        label: t(provider.name),
+        data: provider,
+      }));
+
+    temp.unshift({
+      key: "",
+      value: "",
+      label: t("provider.default_ca_provider.label"),
+      data: {} as CAProvider,
+    });
+
+    return temp;
   }, [filter]);
 
   const renderOption = (key: string) => {
     if (key === "") {
       return (
-        <Space className="max-w-full grow overflow-hidden truncate" size={4}>
-          <Typography.Text className="italic leading-loose" type="secondary" ellipsis italic>
+        <div className="flex items-center gap-2 overflow-hidden truncate">
+          <Typography.Text className="italic" ellipsis italic>
             {t("provider.default_ca_provider.label")}
           </Typography.Text>
-        </Space>
+        </div>
       );
     }
 
     const provider = caProvidersMap.get(key);
     return (
-      <Space className="max-w-full grow overflow-hidden truncate" size={4}>
+      <div className="flex items-center gap-2 overflow-hidden truncate">
         <Avatar shape="square" src={provider?.icon} size="small" />
-        <Typography.Text className="leading-loose" ellipsis>
-          {t(provider?.name ?? "")}
-        </Typography.Text>
-      </Space>
+        <Typography.Text ellipsis>{t(provider?.name ?? "")}</Typography.Text>
+      </div>
     );
   };
 
diff --git a/ui/src/components/provider/DeploymentProviderPicker.tsx b/ui/src/components/provider/DeploymentProviderPicker.tsx
index 9b4411899..319709816 100644
--- a/ui/src/components/provider/DeploymentProviderPicker.tsx
+++ b/ui/src/components/provider/DeploymentProviderPicker.tsx
@@ -96,7 +96,7 @@ const DeploymentProviderPicker = ({ className, style, autoFocus, filter, placeho
                   return (
                     <Col key={index} xs={24} md={12} span={12}>
                       <Card
-                        className="h-16 w-full overflow-hidden shadow-sm"
+                        className="h-16 w-full overflow-hidden shadow-xs"
                         styles={{ body: { height: "100%", padding: "0.5rem 1rem" } }}
                         hoverable
                         onClick={() => {
diff --git a/ui/src/components/provider/DeploymentProviderSelect.tsx b/ui/src/components/provider/DeploymentProviderSelect.tsx
index 07fa45774..77d2a4635 100644
--- a/ui/src/components/provider/DeploymentProviderSelect.tsx
+++ b/ui/src/components/provider/DeploymentProviderSelect.tsx
@@ -1,6 +1,6 @@
-import { memo, useEffect, useState } from "react";
+import { memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Avatar, Select, type SelectProps, Space, Typography, theme } from "antd";
+import { Avatar, Select, type SelectProps, Typography, theme } from "antd";
 
 import { type DeploymentProvider, deploymentProvidersMap } from "@/domain/provider";
 
@@ -16,29 +16,30 @@ const DeploymentProviderSelect = ({ filter, ...props }: DeploymentProviderSelect
 
   const { token: themeToken } = theme.useToken();
 
-  const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: DeploymentProvider }>>([]);
-  useEffect(() => {
-    const allItems = Array.from(deploymentProvidersMap.values());
-    const filteredItems = filter != null ? allItems.filter(filter) : allItems;
-    setOptions(
-      filteredItems.map((item) => ({
-        key: item.type,
-        value: item.type,
-        label: t(item.name),
-        data: item,
-      }))
-    );
+  const options = useMemo<Array<{ key: string; value: string; label: string; data: DeploymentProvider }>>(() => {
+    return Array.from(deploymentProvidersMap.values())
+      .filter((provider) => {
+        if (filter) {
+          return filter(provider);
+        }
+
+        return true;
+      })
+      .map((provider) => ({
+        key: provider.type,
+        value: provider.type,
+        label: t(provider.name),
+        data: provider,
+      }));
   }, [filter]);
 
   const renderOption = (key: string) => {
     const provider = deploymentProvidersMap.get(key);
     return (
-      <Space className="max-w-full grow overflow-hidden truncate" size={4}>
+      <div className="flex items-center gap-2 overflow-hidden truncate">
         <Avatar shape="square" src={provider?.icon} size="small" />
-        <Typography.Text className="leading-loose" ellipsis>
-          {t(provider?.name ?? "")}
-        </Typography.Text>
-      </Space>
+        <Typography.Text ellipsis>{t(provider?.name ?? "")}</Typography.Text>
+      </div>
     );
   };
 
diff --git a/ui/src/components/provider/NotificationProviderSelect.tsx b/ui/src/components/provider/NotificationProviderSelect.tsx
index 8b0dd353d..4f2164ee2 100644
--- a/ui/src/components/provider/NotificationProviderSelect.tsx
+++ b/ui/src/components/provider/NotificationProviderSelect.tsx
@@ -1,6 +1,6 @@
-import { memo, useEffect, useState } from "react";
+import { memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Avatar, Select, type SelectProps, Space, Typography, theme } from "antd";
+import { Avatar, Select, type SelectProps, Typography, theme } from "antd";
 
 import { type NotificationProvider, notificationProvidersMap } from "@/domain/provider";
 
@@ -16,29 +16,30 @@ const NotificationProviderSelect = ({ filter, ...props }: NotificationProviderSe
 
   const { token: themeToken } = theme.useToken();
 
-  const [options, setOptions] = useState<Array<{ key: string; value: string; label: string; data: NotificationProvider }>>([]);
-  useEffect(() => {
-    const allItems = Array.from(notificationProvidersMap.values());
-    const filteredItems = filter != null ? allItems.filter(filter) : allItems;
-    setOptions(
-      filteredItems.map((item) => ({
-        key: item.type,
-        value: item.type,
-        label: t(item.name),
-        data: item,
-      }))
-    );
+  const options = useMemo<Array<{ key: string; value: string; label: string; data: NotificationProvider }>>(() => {
+    return Array.from(notificationProvidersMap.values())
+      .filter((provider) => {
+        if (filter) {
+          return filter(provider);
+        }
+
+        return true;
+      })
+      .map((provider) => ({
+        key: provider.type,
+        value: provider.type,
+        label: t(provider.name),
+        data: provider,
+      }));
   }, [filter]);
 
   const renderOption = (key: string) => {
     const provider = notificationProvidersMap.get(key);
     return (
-      <Space className="max-w-full grow overflow-hidden truncate" size={4}>
+      <div className="flex items-center gap-2 overflow-hidden truncate">
         <Avatar shape="square" src={provider?.icon} size="small" />
-        <Typography.Text className="leading-loose" ellipsis>
-          {t(provider?.name ?? "")}
-        </Typography.Text>
-      </Space>
+        <Typography.Text ellipsis>{t(provider?.name ?? "")}</Typography.Text>
+      </div>
     );
   };
 
diff --git a/ui/src/components/workflow/WorkflowElementsContainer.tsx b/ui/src/components/workflow/WorkflowElementsContainer.tsx
index 3dc2bd6d9..3b5537f50 100644
--- a/ui/src/components/workflow/WorkflowElementsContainer.tsx
+++ b/ui/src/components/workflow/WorkflowElementsContainer.tsx
@@ -21,7 +21,7 @@ const WorkflowElementsContainer = ({ className, style, disabled }: WorkflowEleme
   return (
     <div className={mergeCls("relative size-full overflow-hidden", className)} style={style}>
       <div className="size-full overflow-auto">
-        <div className="relative z-[1]">
+        <div className="relative z-1">
           <div className="origin-center transition-transform duration-300" style={{ zoom: `${scale}` }}>
             <div className="p-4">
               <WorkflowElements disabled={disabled} />
@@ -30,14 +30,16 @@ const WorkflowElementsContainer = ({ className, style, disabled }: WorkflowEleme
         </div>
       </div>
 
-      <Card className="absolute bottom-4 right-6 z-[2] rounded-lg p-2 shadow-lg" styles={{ body: { padding: 0 } }}>
-        <div className="flex items-center gap-2">
-          <Button icon={<MinusOutlinedIcon />} disabled={scale <= MIN_SCALE} onClick={() => setScale((s) => Math.max(MIN_SCALE, s - STEP_SCALE))} />
-          <Typography.Text className="min-w-[3em] text-center">{Math.round(scale * 100)}%</Typography.Text>
-          <Button icon={<PlusOutlinedIcon />} disabled={scale >= MAX_SCALE} onClick={() => setScale((s) => Math.min(MAX_SCALE, s + STEP_SCALE))} />
-          <Button icon={<ExpandOutlinedIcon />} onClick={() => setScale(1)} />
-        </div>
-      </Card>
+      <div className="absolute bottom-4 right-6 z-2">
+        <Card className="rounded-lg p-2 shadow-lg" styles={{ body: { padding: 0 } }}>
+          <div className="flex items-center gap-2">
+            <Button icon={<MinusOutlinedIcon />} disabled={scale <= MIN_SCALE} onClick={() => setScale((s) => Math.max(MIN_SCALE, s - STEP_SCALE))} />
+            <Typography.Text className="min-w-12 text-center">{Math.round(scale * 100)}%</Typography.Text>
+            <Button icon={<PlusOutlinedIcon />} disabled={scale >= MAX_SCALE} onClick={() => setScale((s) => Math.min(MAX_SCALE, s + STEP_SCALE))} />
+            <Button icon={<ExpandOutlinedIcon />} onClick={() => setScale(1)} />
+          </div>
+        </Card>
+      </div>
     </div>
   );
 };
diff --git a/ui/src/components/workflow/node/AddNode.tsx b/ui/src/components/workflow/node/AddNode.tsx
index 207ec7c7c..e3fe7e46f 100644
--- a/ui/src/components/workflow/node/AddNode.tsx
+++ b/ui/src/components/workflow/node/AddNode.tsx
@@ -65,8 +65,8 @@ const AddNode = ({ node, disabled }: AddNodeProps) => {
   return (
     <div className="relative py-6 before:absolute before:left-1/2 before:top-0 before:h-full before:w-[2px] before:-translate-x-1/2 before:bg-stone-200 before:content-['']">
       <Dropdown menu={{ items: dropdownMenus }} trigger={["click"]}>
-        <div className="relative z-[1] flex size-5 cursor-pointer items-center justify-center rounded-full bg-stone-400 hover:bg-stone-500">
-          <PlusOutlinedIcon className="text-white" />
+        <div className="relative z-1 flex size-5 cursor-pointer items-center justify-center rounded-full text-white bg-stone-400 hover:bg-stone-500">
+          <PlusOutlinedIcon />
         </div>
       </Dropdown>
     </div>
diff --git a/ui/src/components/workflow/node/ApplyNodeConfigForm.tsx b/ui/src/components/workflow/node/ApplyNodeConfigForm.tsx
index cdcb689c4..a9db794ae 100644
--- a/ui/src/components/workflow/node/ApplyNodeConfigForm.tsx
+++ b/ui/src/components/workflow/node/ApplyNodeConfigForm.tsx
@@ -318,7 +318,7 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
             />
           </Form.Item>
 
-          <Form.Item className="mb-0" htmlFor="null">
+          <Form.Item noStyle>
             <label className="mb-1 block">
               <div className="flex w-full items-center justify-between gap-4">
                 <div className="max-w-full grow truncate">
@@ -375,7 +375,7 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
         </Divider>
 
         <Form className={className} style={style} {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
-          <Form.Item className="mb-0" htmlFor="null">
+          <Form.Item noStyle>
             <label className="mb-1 block">
               <div className="flex w-full items-center justify-between gap-4">
                 <div className="max-w-full grow truncate">
@@ -404,7 +404,7 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
             </Form.Item>
           </Form.Item>
 
-          <Form.Item className="mb-0" htmlFor="null" hidden={!showCAProviderAccess}>
+          <Form.Item hidden={!showCAProviderAccess} noStyle>
             <label className="mb-1 block">
               <div className="flex w-full items-center justify-between gap-4">
                 <div className="max-w-full grow truncate">
diff --git a/ui/src/components/workflow/node/BranchNode.tsx b/ui/src/components/workflow/node/BranchNode.tsx
index f8a755d0d..048fcaa24 100644
--- a/ui/src/components/workflow/node/BranchNode.tsx
+++ b/ui/src/components/workflow/node/BranchNode.tsx
@@ -40,7 +40,7 @@ const BranchNode = ({ node, disabled }: BrandNodeProps) => {
         }}
       >
         <Button
-          className="absolute left-1/2 z-[1] -translate-x-1/2 -translate-y-1/2 text-xs"
+          className="absolute left-1/2 z-1 -translate-x-1/2 -translate-y-1/2 text-xs"
           disabled={disabled}
           size="small"
           shape="round"
@@ -55,38 +55,18 @@ const BranchNode = ({ node, disabled }: BrandNodeProps) => {
         {node.branches?.map((branch, index) => (
           <div
             key={branch.id}
-            className="relative flex flex-col items-center before:absolute  before:left-1/2 before:top-0 before:h-full before:w-[2px] before:-translate-x-1/2 before:bg-stone-200 before:content-['']"
+            className="relative flex flex-col items-center before:absolute before:left-1/2 before:top-0 before:h-full before:w-[2px] before:-translate-x-1/2 before:bg-stone-200 before:content-['']"
           >
             {index == 0 && (
               <>
-                <div
-                  className="absolute -left-px -top-1 h-2 w-1/2"
-                  style={{
-                    backgroundColor: themeToken.colorBgContainer,
-                  }}
-                ></div>
-                <div
-                  className="absolute -bottom-1 -left-px z-50 h-2 w-1/2"
-                  style={{
-                    backgroundColor: themeToken.colorBgContainer,
-                  }}
-                ></div>
+                <div className="absolute -left-[1px] -top-1 h-2 w-1/2" style={{ backgroundColor: themeToken.colorBgContainer }}></div>
+                <div className="absolute -bottom-1 -left-[1px] z-50 h-2 w-1/2" style={{ backgroundColor: themeToken.colorBgContainer }}></div>
               </>
             )}
-            {node.branches && index == node.branches.length - 1 && (
+            {index == node.branches?.length! - 1 && (
               <>
-                <div
-                  className="absolute -right-px -top-1 h-2 w-1/2"
-                  style={{
-                    backgroundColor: themeToken.colorBgContainer,
-                  }}
-                ></div>
-                <div
-                  className="absolute -bottom-1 -right-px z-50 h-2 w-1/2"
-                  style={{
-                    backgroundColor: themeToken.colorBgContainer,
-                  }}
-                ></div>
+                <div className="absolute -right-[1px] -top-1 h-2 w-1/2" style={{ backgroundColor: themeToken.colorBgContainer }}></div>
+                <div className="absolute -bottom-1 -right-[1px] z-50 h-2 w-1/2" style={{ backgroundColor: themeToken.colorBgContainer }}></div>
               </>
             )}
             <div className="relative flex flex-col items-center">{renderBranch(branch, node.id, index)}</div>
diff --git a/ui/src/components/workflow/node/ConditionNode.tsx b/ui/src/components/workflow/node/ConditionNode.tsx
index 2c8b3d813..9da286a15 100644
--- a/ui/src/components/workflow/node/ConditionNode.tsx
+++ b/ui/src/components/workflow/node/ConditionNode.tsx
@@ -64,24 +64,26 @@ const ConditionNode = ({ node, disabled, branchId, branchIndex }: ConditionNodeP
         }
         placement="rightTop"
       >
-        <Card className="relative z-[1] mt-10 w-[256px] shadow-md" styles={{ body: { padding: 0 } }} hoverable onClick={() => setDrawerOpen(true)}>
-          <div className="flex h-[48px] flex-col items-center justify-center truncate px-4 py-2">
-            <div className="relative w-full overflow-hidden" onClick={(e) => e.stopPropagation()}>
-              <SharedNode.Title
-                className="focus:bg-background focus:text-foreground overflow-hidden outline-slate-200 focus:rounded-sm"
-                node={node}
-                disabled={disabled}
-              />
-              <div className="absolute right-0 top-1/2 -translate-y-1/2" onClick={() => setDrawerOpen(true)}>
-                {node.config?.expression ? (
-                  <Button color="primary" icon={<FilterFilledIcon />} variant="link" />
-                ) : (
-                  <Button color="default" icon={<FilterOutlinedIcon />} variant="link" />
-                )}
+        <div className="relative w-[256px] z-1 mt-10">
+          <Card className="shadow-md" styles={{ body: { padding: 0 } }} hoverable onClick={() => setDrawerOpen(true)}>
+            <div className="flex h-[48px] flex-col items-center justify-center truncate px-4 py-2">
+              <div className="relative w-full overflow-hidden" onClick={(e) => e.stopPropagation()}>
+                <SharedNode.Title
+                  className="focus:bg-background focus:text-foreground overflow-hidden outline-slate-200 focus:rounded-xs"
+                  node={node}
+                  disabled={disabled}
+                />
+                <div className="absolute right-0 top-1/2 -translate-y-1/2" onClick={() => setDrawerOpen(true)}>
+                  {node.config?.expression ? (
+                    <Button color="primary" icon={<FilterFilledIcon />} variant="link" />
+                  ) : (
+                    <Button color="default" icon={<FilterOutlinedIcon />} variant="link" />
+                  )}
+                </div>
               </div>
             </div>
-          </div>
-        </Card>
+          </Card>
+        </div>
       </Popover>
 
       <SharedNode.ConfigDrawer
diff --git a/ui/src/components/workflow/node/ConditionNodeConfigFormExpressionEditor.tsx b/ui/src/components/workflow/node/ConditionNodeConfigFormExpressionEditor.tsx
index 1696d46c4..e8b48e94c 100644
--- a/ui/src/components/workflow/node/ConditionNodeConfigFormExpressionEditor.tsx
+++ b/ui/src/components/workflow/node/ConditionNodeConfigFormExpressionEditor.tsx
@@ -269,11 +269,7 @@ const ConditionNodeConfigFormExpressionEditor = forwardRef<ConditionNodeConfigFo
         onValuesChange={handleFormChange}
       >
         <Show when={formModel.conditions?.length > 1}>
-          <Form.Item
-            className="mb-2"
-            name="logicalOperator"
-            rules={[{ required: true, message: t("workflow_node.condition.form.expression.logical_operator.errmsg") }]}
-          >
+          <Form.Item name="logicalOperator" rules={[{ required: true, message: t("workflow_node.condition.form.expression.logical_operator.errmsg") }]}>
             <Radio.Group block>
               <Radio.Button value="and">{t("workflow_node.condition.form.expression.logical_operator.option.and.label")}</Radio.Button>
               <Radio.Button value="or">{t("workflow_node.condition.form.expression.logical_operator.option.or.label")}</Radio.Button>
diff --git a/ui/src/components/workflow/node/DeployNodeConfigForm.tsx b/ui/src/components/workflow/node/DeployNodeConfigForm.tsx
index 10fb17655..b0e1c7eba 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigForm.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigForm.tsx
@@ -475,7 +475,7 @@ const DeployNodeConfigForm = forwardRef<DeployNodeConfigFormInstance, DeployNode
               />
             </Form.Item>
 
-            <Form.Item className="mb-0" htmlFor="null" hidden={!showProviderAccess}>
+            <Form.Item hidden={!showProviderAccess} noStyle>
               <label className="mb-1 block">
                 <div className="flex w-full items-center justify-between gap-4">
                   <div className="max-w-full grow truncate">
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormBaotaWAFSiteConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormBaotaWAFSiteConfig.tsx
index f50bb3802..627bd7e53 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormBaotaWAFSiteConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormBaotaWAFSiteConfig.tsx
@@ -69,7 +69,7 @@ const DeployNodeConfigFormBaotaWAFSiteConfig = ({
       </Form.Item>
 
       <Form.Item name="sitePort" label={t("workflow_node.deploy.form.baotawaf_site_port.label")} rules={[formRule]}>
-        <InputNumber className="w-full" placeholder={t("access.form.ssh_port.placeholder")} min={1} max={65535} />
+        <InputNumber style={{ width: "100%" }} placeholder={t("access.form.ssh_port.placeholder")} min={1} max={65535} />
       </Form.Item>
     </Form>
   );
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormLocalConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormLocalConfig.tsx
index eddeb981a..4212b31ec 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormLocalConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormLocalConfig.tsx
@@ -406,7 +406,7 @@ const DeployNodeConfigFormLocalConfig = ({ form: formInst, formName, disabled, i
         </Select>
       </Form.Item>
 
-      <Form.Item className="mb-0" htmlFor="null">
+      <Form.Item noStyle>
         <label className="mb-1 block">
           <div className="flex w-full items-center justify-between gap-4">
             <div className="max-w-full grow truncate">
@@ -442,7 +442,7 @@ const DeployNodeConfigFormLocalConfig = ({ form: formInst, formName, disabled, i
         </Form.Item>
       </Form.Item>
 
-      <Form.Item className="mb-0" htmlFor="null">
+      <Form.Item noStyle>
         <label className="mb-1 block">
           <div className="flex w-full items-center justify-between gap-4">
             <div className="max-w-full grow truncate">
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormSSHConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormSSHConfig.tsx
index ebeb1cff9..d656e0a22 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormSSHConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormSSHConfig.tsx
@@ -431,7 +431,7 @@ const DeployNodeConfigFormSSHConfig = ({ form: formInst, formName, disabled, ini
         </Form.Item>
       </Show>
 
-      <Form.Item className="mb-0" htmlFor="null">
+      <Form.Item noStyle>
         <label className="mb-1 block">
           <div className="flex w-full items-center justify-between gap-4">
             <div className="max-w-full grow truncate">
@@ -467,7 +467,7 @@ const DeployNodeConfigFormSSHConfig = ({ form: formInst, formName, disabled, ini
         </Form.Item>
       </Form.Item>
 
-      <Form.Item className="mb-0" htmlFor="null">
+      <Form.Item noStyle>
         <label className="mb-1 block">
           <div className="flex w-full items-center justify-between gap-4">
             <div className="max-w-full grow truncate">
diff --git a/ui/src/components/workflow/node/ExecuteResultBranchNode.tsx b/ui/src/components/workflow/node/ExecuteResultBranchNode.tsx
index 098c66d73..146957a17 100644
--- a/ui/src/components/workflow/node/ExecuteResultBranchNode.tsx
+++ b/ui/src/components/workflow/node/ExecuteResultBranchNode.tsx
@@ -28,45 +28,23 @@ const ExecuteResultBranchNode = ({ node, disabled }: BrandNodeProps) => {
     <>
       <div
         className="relative flex gap-x-16 before:absolute before:inset-x-[128px] before:top-0 before:h-[2px] before:bg-stone-200 before:content-[''] after:absolute after:inset-x-[128px] after:bottom-0 after:h-[2px] after:bg-stone-200 after:content-['']"
-        style={{
-          backgroundColor: themeToken.colorBgContainer,
-        }}
+        style={{ backgroundColor: themeToken.colorBgContainer }}
       >
         {node.branches?.map((branch, index) => (
           <div
             key={branch.id}
-            className="relative flex flex-col items-center before:absolute  before:left-1/2 before:top-0 before:h-full before:w-[2px] before:-translate-x-1/2 before:bg-stone-200 before:content-['']"
+            className="relative flex flex-col items-center before:absolute before:left-1/2 before:top-0 before:h-full before:w-[2px] before:-translate-x-1/2 before:bg-stone-200 before:content-['']"
           >
             {index == 0 && (
               <>
-                <div
-                  className="absolute -left-px -top-1 h-2 w-1/2"
-                  style={{
-                    backgroundColor: themeToken.colorBgContainer,
-                  }}
-                ></div>
-                <div
-                  className="absolute -bottom-1 -left-px z-50 h-2 w-1/2"
-                  style={{
-                    backgroundColor: themeToken.colorBgContainer,
-                  }}
-                ></div>
+                <div className="absolute -left-[1px] -top-1 h-2 w-1/2" style={{ backgroundColor: themeToken.colorBgContainer }}></div>
+                <div className="absolute -bottom-1 -left-[1px] z-50 h-2 w-1/2" style={{ backgroundColor: themeToken.colorBgContainer }}></div>
               </>
             )}
             {node.branches && index == node.branches.length - 1 && (
               <>
-                <div
-                  className="absolute -right-px -top-1 h-2 w-1/2"
-                  style={{
-                    backgroundColor: themeToken.colorBgContainer,
-                  }}
-                ></div>
-                <div
-                  className="absolute -bottom-1 -right-px z-50 h-2 w-1/2"
-                  style={{
-                    backgroundColor: themeToken.colorBgContainer,
-                  }}
-                ></div>
+                <div className="absolute -right-[1px] -top-1 h-2 w-1/2" style={{ backgroundColor: themeToken.colorBgContainer }}></div>
+                <div className="absolute -bottom-1 -right-[1px] z-50 h-2 w-1/2" style={{ backgroundColor: themeToken.colorBgContainer }}></div>
               </>
             )}
             <div className="relative flex flex-col items-center">{renderBranch(branch, node.id, index)}</div>
diff --git a/ui/src/components/workflow/node/ExecuteResultNode.tsx b/ui/src/components/workflow/node/ExecuteResultNode.tsx
index ce991d95d..838c83e7a 100644
--- a/ui/src/components/workflow/node/ExecuteResultNode.tsx
+++ b/ui/src/components/workflow/node/ExecuteResultNode.tsx
@@ -35,22 +35,24 @@ const ExecuteResultNode = ({ node, disabled, branchId, branchIndex }: ConditionN
         }
         placement="rightTop"
       >
-        <Card className="relative z-[1] mt-10 w-[256px] shadow-md" styles={{ body: { padding: 0 } }} hoverable>
-          <div className="flex h-[48px] flex-col items-center justify-center truncate px-4 py-2">
-            <div className="flex items-center space-x-2">
-              {node.type === WorkflowNodeType.ExecuteSuccess ? (
-                <CheckCircleOutlinedIcon style={{ color: themeToken.colorSuccess }} />
-              ) : (
-                <CloseCircleOutlinedIcon style={{ color: themeToken.colorError }} />
-              )}
-              <SharedNode.Title
-                className="focus:bg-background focus:text-foreground overflow-hidden outline-slate-200 focus:rounded-sm"
-                node={node}
-                disabled={disabled}
-              />
+        <div className="relative z-1 mt-10 w-[256px]">
+          <Card className="shadow-md" styles={{ body: { padding: 0 } }} hoverable>
+            <div className="flex h-[48px] flex-col items-center justify-center truncate px-4 py-2">
+              <div className="flex items-center space-x-2">
+                {node.type === WorkflowNodeType.ExecuteSuccess ? (
+                  <CheckCircleOutlinedIcon style={{ color: themeToken.colorSuccess }} />
+                ) : (
+                  <CloseCircleOutlinedIcon style={{ color: themeToken.colorError }} />
+                )}
+                <SharedNode.Title
+                  className="focus:bg-background focus:text-foreground overflow-hidden outline-slate-200 focus:rounded-xs"
+                  node={node}
+                  disabled={disabled}
+                />
+              </div>
             </div>
-          </div>
-        </Card>
+          </Card>
+        </div>
       </Popover>
 
       <AddNode node={node} disabled={disabled} />
diff --git a/ui/src/components/workflow/node/MonitorNodeConfigForm.tsx b/ui/src/components/workflow/node/MonitorNodeConfigForm.tsx
index 9a8f6bc4a..18bbd3c30 100644
--- a/ui/src/components/workflow/node/MonitorNodeConfigForm.tsx
+++ b/ui/src/components/workflow/node/MonitorNodeConfigForm.tsx
@@ -91,7 +91,7 @@ const MonitorNodeConfigForm = forwardRef<MonitorNodeConfigFormInstance, MonitorN
 
           <div className="w-1/3">
             <Form.Item name="port" label={t("workflow_node.monitor.form.port.label")} rules={[formRule]}>
-              <InputNumber className="w-full" min={1} max={65535} placeholder={t("workflow_node.monitor.form.port.placeholder")} />
+              <InputNumber style={{ width: "100%" }} min={1} max={65535} placeholder={t("workflow_node.monitor.form.port.placeholder")} />
             </Form.Item>
           </div>
         </div>
diff --git a/ui/src/components/workflow/node/NotifyNodeConfigForm.tsx b/ui/src/components/workflow/node/NotifyNodeConfigForm.tsx
index 5b90bbfd7..661009c41 100644
--- a/ui/src/components/workflow/node/NotifyNodeConfigForm.tsx
+++ b/ui/src/components/workflow/node/NotifyNodeConfigForm.tsx
@@ -187,7 +187,7 @@ const NotifyNodeConfigForm = forwardRef<NotifyNodeConfigFormInstance, NotifyNode
           <Input.TextArea autoSize={{ minRows: 3, maxRows: 10 }} placeholder={t("workflow_node.notify.form.message.placeholder")} />
         </Form.Item>
 
-        <Form.Item className="mb-0" htmlFor="null">
+        <Form.Item noStyle>
           <label className="mb-1 block">
             <div className="flex w-full items-center justify-between gap-4">
               <div className="max-w-full grow truncate line-through">{t("workflow_node.notify.form.channel.label")}</div>
@@ -231,7 +231,7 @@ const NotifyNodeConfigForm = forwardRef<NotifyNodeConfigFormInstance, NotifyNode
           />
         </Form.Item>
 
-        <Form.Item className="mb-0" htmlFor="null">
+        <Form.Item noStyle>
           <label className="mb-1 block">
             <div className="flex w-full items-center justify-between gap-4">
               <div className="max-w-full grow truncate">
diff --git a/ui/src/components/workflow/node/UnknownNode.tsx b/ui/src/components/workflow/node/UnknownNode.tsx
index 2586c6e2d..bb81c5881 100644
--- a/ui/src/components/workflow/node/UnknownNode.tsx
+++ b/ui/src/components/workflow/node/UnknownNode.tsx
@@ -19,23 +19,25 @@ const UnknownNode = ({ node, disabled }: MonitorNodeProps) => {
 
   return (
     <>
-      <Card className="relative w-[256px] overflow-hidden shadow-md" styles={{ body: { padding: 0 } }} hoverable variant="borderless">
-        <div className="cursor-pointer ">
-          <Alert
-            type="error"
-            message={
-              <div className="flex items-center justify-between gap-4 overflow-hidden">
-                <div className="flex-1 text-center text-xs">
-                  INVALID NODE
-                  <br />
-                  PLEASE REMOVE
+      <div className="relative w-[256px] overflow-hidden">
+        <Card className="shadow-md" styles={{ body: { padding: 0 } }} hoverable variant="borderless">
+          <div className="cursor-pointer ">
+            <Alert
+              type="error"
+              message={
+                <div className="flex items-center justify-between gap-4 overflow-hidden">
+                  <div className="flex-1 text-center text-xs">
+                    INVALID NODE
+                    <br />
+                    PLEASE REMOVE
+                  </div>
+                  <Button color="primary" icon={<CloseCircleOutlinedIcon />} variant="text" onClick={handleClickRemove} />
                 </div>
-                <Button color="primary" icon={<CloseCircleOutlinedIcon />} variant="text" onClick={handleClickRemove} />
-              </div>
-            }
-          />
-        </div>
-      </Card>
+              }
+            />
+          </div>
+        </Card>
+      </div>
 
       <AddNode node={node} disabled={disabled} />
     </>
diff --git a/ui/src/components/workflow/node/_SharedNode.tsx b/ui/src/components/workflow/node/_SharedNode.tsx
index 5fe6fc3e3..bfcc02297 100644
--- a/ui/src/components/workflow/node/_SharedNode.tsx
+++ b/ui/src/components/workflow/node/_SharedNode.tsx
@@ -251,19 +251,21 @@ const SharedNodeBlock = ({ children, node, disabled, onClick }: SharedNodeBlockP
         content={<SharedNodeMenu node={node} disabled={disabled} trigger={<Button color="primary" icon={<MoreOutlinedIcon />} variant="text" />} />}
         placement="rightTop"
       >
-        <Card className="relative w-[256px] overflow-hidden shadow-md" styles={{ body: { padding: 0 } }} hoverable>
-          <div className="bg-primary flex h-[48px] flex-col items-center justify-center truncate px-4 py-2 text-white">
-            <SharedNodeTitle
-              className="focus:bg-background focus:text-foreground overflow-hidden outline-none focus:rounded-sm"
-              node={node}
-              disabled={disabled}
-            />
-          </div>
+        <div className="relative w-[256px] overflow-hidden">
+          <Card className="shadow-md" styles={{ body: { padding: 0 } }} hoverable>
+            <div className="bg-primary flex h-[48px] flex-col items-center justify-center truncate px-4 py-2 text-white">
+              <SharedNodeTitle
+                className="focus:bg-background focus:text-foreground overflow-hidden outline-hidden focus:rounded-xs"
+                node={node}
+                disabled={disabled}
+              />
+            </div>
 
-          <div className="flex cursor-pointer flex-col justify-center px-4 py-2" onClick={handleNodeClick}>
-            <div className="overflow-hidden text-sm">{children}</div>
-          </div>
-        </Card>
+            <div className="flex cursor-pointer flex-col justify-center px-4 py-2" onClick={handleNodeClick}>
+              <div className="overflow-hidden text-sm">{children}</div>
+            </div>
+          </Card>
+        </div>
       </Popover>
 
       <AddNode node={node} disabled={disabled} />
diff --git a/ui/src/global.css b/ui/src/global.css
index 2a7ef5894..8aa1c3c7e 100644
--- a/ui/src/global.css
+++ b/ui/src/global.css
@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@config "../tailwind.config.js";
 
 @layer base {
   :root {
diff --git a/ui/src/pages/ConsoleLayout.tsx b/ui/src/pages/ConsoleLayout.tsx
index 7cb324d8a..9468766ef 100644
--- a/ui/src/pages/ConsoleLayout.tsx
+++ b/ui/src/pages/ConsoleLayout.tsx
@@ -51,12 +51,12 @@ const ConsoleLayout = () => {
         </div>
       </Layout.Sider>
 
-      <Layout className="flex flex-col overflow-hidden pl-[256px] max-md:pl-0">
+      <Layout className="flex flex-col overflow-hidden">
         <Show when={!isBrowserHappy()}>
           <Alert message={t("common.text.happy_browser")} type="warning" showIcon closable />
         </Show>
 
-        <Layout.Header className="p-0 shadow-sm" style={{ background: themeToken.colorBgContainer }}>
+        <Layout.Header className="shadow-xs" style={{ background: themeToken.colorBgContainer, padding: 0 }}>
           <div className="flex size-full items-center justify-between overflow-hidden px-4">
             <div className="flex items-center gap-4">
               <SiderMenuDrawer trigger={<Button className="md:hidden" icon={<MenuOutlinedIcon />} size="large" />} />
diff --git a/ui/src/pages/accesses/AccessList.tsx b/ui/src/pages/accesses/AccessList.tsx
index a99dd588e..3cbe16b8c 100644
--- a/ui/src/pages/accesses/AccessList.tsx
+++ b/ui/src/pages/accesses/AccessList.tsx
@@ -55,10 +55,10 @@ const AccessList = () => {
       ellipsis: true,
       render: (_, record) => {
         return (
-          <Space className="max-w-full truncate" size={4}>
+          <div className="max-w-full flex items-center gap-2 overflow-hidden truncate">
             <Avatar shape="square" src={accessProvidersMap.get(record.provider)?.icon} size="small" />
             <Typography.Text ellipsis>{t(accessProvidersMap.get(record.provider)?.name ?? "")}</Typography.Text>
-          </Space>
+          </div>
         );
       },
     },
diff --git a/ui/src/pages/settings/SettingsAccount.tsx b/ui/src/pages/settings/SettingsAccount.tsx
index fccacd25b..06f4e22a7 100644
--- a/ui/src/pages/settings/SettingsAccount.tsx
+++ b/ui/src/pages/settings/SettingsAccount.tsx
@@ -57,7 +57,7 @@ const SettingsAccount = () => {
       {MessageContextHolder}
       {NotificationContextHolder}
 
-      <div className="md:max-w-[40rem]">
+      <div className="md:max-w-160">
         <Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
           <Form.Item name="username" label={t("settings.account.form.email.label")} rules={[formRule]}>
             <Input placeholder={t("settings.account.form.email.placeholder")} onChange={handleInputChange} />
diff --git a/ui/src/pages/settings/SettingsNotification.tsx b/ui/src/pages/settings/SettingsNotification.tsx
index 2c9d593a0..e65beb477 100644
--- a/ui/src/pages/settings/SettingsNotification.tsx
+++ b/ui/src/pages/settings/SettingsNotification.tsx
@@ -16,17 +16,17 @@ const SettingsNotification = () => {
 
   return (
     <div>
-      <Card className="shadow" title={t("settings.notification.template.card.title")}>
-        <div className="md:max-w-[40rem]">
+      <Card className="shadow-sm" title={t("settings.notification.template.card.title")}>
+        <div className="md:max-w-160">
           <NotifyTemplate />
         </div>
       </Card>
 
       <Divider />
 
-      <Card className="shadow" styles={{ body: loadedAtOnce ? { padding: 0 } : {} }} title={t("settings.notification.channels.card.title")}>
+      <Card className="shadow-sm" styles={{ body: loadedAtOnce ? { padding: 0 } : {} }} title={t("settings.notification.channels.card.title")}>
         <Alert type="warning" banner message="本页面相关功能即将在后续版本中废弃，请使用「授权管理」页面来管理通知渠道。" />
-        <NotifyChannels classNames={{ form: "md:max-w-[40rem]" }} />
+        <NotifyChannels classNames={{ form: "md:max-w-160" }} />
       </Card>
     </div>
   );
diff --git a/ui/src/pages/settings/SettingsPassword.tsx b/ui/src/pages/settings/SettingsPassword.tsx
index 7d9d5abbe..a65c05476 100644
--- a/ui/src/pages/settings/SettingsPassword.tsx
+++ b/ui/src/pages/settings/SettingsPassword.tsx
@@ -62,7 +62,7 @@ const SettingsPassword = () => {
       {MessageContextHolder}
       {NotificationContextHolder}
 
-      <div className="md:max-w-[40rem]">
+      <div className="md:max-w-160">
         <Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
           <Form.Item name="oldPassword" label={t("settings.password.form.old_password.label")} rules={[formRule]}>
             <Input.Password placeholder={t("settings.password.form.old_password.placeholder")} onChange={handleInputChange} />
diff --git a/ui/src/pages/settings/SettingsPersistence.tsx b/ui/src/pages/settings/SettingsPersistence.tsx
index fa68ea509..532464328 100644
--- a/ui/src/pages/settings/SettingsPersistence.tsx
+++ b/ui/src/pages/settings/SettingsPersistence.tsx
@@ -83,7 +83,7 @@ const SettingsPersistence = () => {
       {NotificationContextHolder}
 
       <Show when={!loading} fallback={<Skeleton active />}>
-        <div className="md:max-w-[40rem]">
+        <div className="md:max-w-160">
           <Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
             <Form.Item
               name="workflowRunsMaxDaysRetention"
@@ -92,7 +92,7 @@ const SettingsPersistence = () => {
               rules={[formRule]}
             >
               <InputNumber
-                className="w-full"
+                style={{ width: "100%" }}
                 min={0}
                 max={36500}
                 placeholder={t("settings.persistence.form.workflow_runs_max_days.placeholder")}
@@ -108,7 +108,7 @@ const SettingsPersistence = () => {
               rules={[formRule]}
             >
               <InputNumber
-                className="w-full"
+                style={{ width: "100%" }}
                 min={0}
                 max={36500}
                 placeholder={t("settings.persistence.form.expired_certificates_max_days.placeholder")}
diff --git a/ui/src/pages/settings/SettingsSSLProvider.tsx b/ui/src/pages/settings/SettingsSSLProvider.tsx
index 02be893d2..fb3ea8ac2 100644
--- a/ui/src/pages/settings/SettingsSSLProvider.tsx
+++ b/ui/src/pages/settings/SettingsSSLProvider.tsx
@@ -430,7 +430,11 @@ const SettingsSSLProvider = () => {
 
       <Show when={!loading} fallback={<Skeleton active />}>
         <Form form={formInst} disabled={formPending} layout="vertical" initialValues={{ provider: providerType }}>
-          <Form.Item className="mb-2" name="provider" label={t("settings.sslprovider.form.provider.label")}>
+          <Form.Item>
+            <Alert type="warning" message={<span dangerouslySetInnerHTML={{ __html: t("settings.sslprovider.form.provider.alert") }}></span>} />
+          </Form.Item>
+
+          <Form.Item name="provider" label={t("settings.sslprovider.form.provider.label")}>
             <CheckCard.Group className="w-full" onChange={(value) => setProviderType(value as CAProviderType)}>
               <CheckCard
                 avatar={<img src={"/imgs/providers/letsencrypt.svg"} className="size-8" />}
@@ -476,13 +480,9 @@ const SettingsSSLProvider = () => {
               />
             </CheckCard.Group>
           </Form.Item>
-
-          <Form.Item>
-            <Alert type="warning" message={<span dangerouslySetInnerHTML={{ __html: t("settings.sslprovider.form.provider.alert") }}></span>} />
-          </Form.Item>
         </Form>
 
-        <div className="md:max-w-[40rem]">{providerFormEl}</div>
+        <div className="md:max-w-160">{providerFormEl}</div>
       </Show>
     </SSLProviderContext.Provider>
   );
diff --git a/ui/src/pages/workflows/WorkflowDetail.tsx b/ui/src/pages/workflows/WorkflowDetail.tsx
index 1ca2d5a74..9a95791ec 100644
--- a/ui/src/pages/workflows/WorkflowDetail.tsx
+++ b/ui/src/pages/workflows/WorkflowDetail.tsx
@@ -270,7 +270,7 @@ const WorkflowDetail = () => {
             }}
             loading={!initialized}
           >
-            <div className="absolute inset-x-6 top-4 z-[2] flex items-center justify-between gap-4">
+            <div className="absolute inset-x-6 top-4 z-2 flex items-center justify-between gap-4">
               <div className="flex-1 overflow-hidden">
                 <Show when={workflow.hasDraft!}>
                   <Alert banner message={<div className="truncate">{t("workflow.detail.orchestration.draft.alert")}</div>} type="warning" />
diff --git a/ui/src/pages/workflows/WorkflowNew.tsx b/ui/src/pages/workflows/WorkflowNew.tsx
index f0ec81ef1..0b749214c 100644
--- a/ui/src/pages/workflows/WorkflowNew.tsx
+++ b/ui/src/pages/workflows/WorkflowNew.tsx
@@ -119,7 +119,7 @@ const WorkflowNew = () => {
       </Card>
 
       <div className="p-4">
-        <div className="mx-auto max-w-[1600px] px-2">
+        <div className="mx-auto max-w-400 px-2">
           <Typography.Text type="secondary">
             <div className="mb-8 mt-4 text-xl">{t("workflow.new.templates.title")}</div>
           </Typography.Text>
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
index 8e4d86f0f..aaefc1508 100644
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -7,10 +7,6 @@ module.exports = {
     container: {
       center: "true",
       padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-        "3xl": "1920px",
-      },
     },
     extend: {
       colors: {
@@ -22,5 +18,4 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
 };
diff --git a/ui/vite.config.ts b/ui/vite.config.ts
index 9ca807580..74a3cd296 100644
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -1,6 +1,7 @@
 import { type SpawnSyncReturns, execFileSync } from "node:child_process";
 import path from "node:path";
 
+import tailwindcssPlugin from "@tailwindcss/vite";
 import legacyPlugin from "@vitejs/plugin-legacy";
 import reactPlugin from "@vitejs/plugin-react";
 import fs from "fs-extra";
@@ -14,7 +15,7 @@ const preserveFilesPlugin = (filesToPreserve: string[]): Plugin => {
       // 在构建开始时将要保留的文件或目录移动到临时位置
       filesToPreserve.forEach((file) => {
         const srcPath = path.resolve(__dirname, file);
-        const tempPath = path.resolve(__dirname, `node_modules`, `.tmp`, `build_${file}`);
+        const tempPath = path.resolve(__dirname, `node_modules/.tmp/build/${file}`);
         if (fs.existsSync(srcPath)) {
           fs.moveSync(srcPath, tempPath, { overwrite: true });
         }
@@ -24,7 +25,7 @@ const preserveFilesPlugin = (filesToPreserve: string[]): Plugin => {
       // 在构建完成后将临时位置的文件或目录移回原来的位置
       filesToPreserve.forEach((file) => {
         const srcPath = path.resolve(__dirname, file);
-        const tempPath = path.resolve(__dirname, `node_modules`, `.tmp`, `build_${file}`);
+        const tempPath = path.resolve(__dirname, `node_modules/.tmp/build/${file}`);
         if (fs.existsSync(tempPath)) {
           fs.moveSync(tempPath, srcPath, { overwrite: true });
         }
@@ -56,6 +57,7 @@ export default defineConfig(({ mode }) => {
       legacyPlugin({
         targets: ["defaults", "not IE 11"],
       }),
+      tailwindcssPlugin(),
       preserveFilesPlugin(["dist/.gitkeep"]),
     ],
     resolve: {