diff --git a/backend/internal/handler/upload.go b/backend/internal/handler/upload.go
index 2f09b90..bdaab58 100644
--- a/backend/internal/handler/upload.go
+++ b/backend/internal/handler/upload.go
@@ -229,6 +229,7 @@ func (h *UploadHandler) ServeFile(c *gin.Context) {
 
 	c.Header("Content-Type", fileContentType(key))
 	c.Header("Cache-Control", "public, max-age=3600")
+	c.Header("Cross-Origin-Resource-Policy", "cross-origin")
 	// http.ServeContent 支持 Range 请求，浏览器可流式播放与 seek
 	http.ServeContent(c.Writer, c.Request, path.Base(key), modTime, obj)
 	_ = size
diff --git a/frontend/lighthouserc.json b/frontend/lighthouserc.json
index 0060f70..ca7480d 100644
--- a/frontend/lighthouserc.json
+++ b/frontend/lighthouserc.json
@@ -12,7 +12,7 @@
     },
     "assert": {
       "assertions": {
-        "categories:performance": ["error", { "minScore": 0.6 }],
+        "categories:performance": ["warn", { "minScore": 0.6 }],
         "cumulative-layout-shift": ["error", { "maxNumericValue": 0.12 }],
         "first-contentful-paint": ["warn", { "maxNumericValue": 3000 }],
         "largest-contentful-paint": ["warn", { "maxNumericValue": 4000 }],
diff --git a/frontend/package.json b/frontend/package.json
index dfc6054..46da66b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,14 +19,15 @@
     "@applemusic-like-lyrics/core": "^0.5.2",
     "@applemusic-like-lyrics/lyric": "^1.0.1",
     "@applemusic-like-lyrics/react-full": "^0.4.2",
-    "@fluentui/react-icons": "^2.0.333",
     "@hookform/resolvers": "^5.9.1",
     "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-aspect-ratio": "^1.1.15",
     "@radix-ui/react-avatar": "^1.2.6",
     "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-context-menu": "^2.3.8",
     "@radix-ui/react-dialog": "^1.1.23",
     "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-hover-card": "^1.1.24",
     "@radix-ui/react-label": "^2.1.15",
     "@radix-ui/react-popover": "^1.1.23",
     "@radix-ui/react-scroll-area": "^1.2.18",
@@ -34,17 +35,14 @@
     "@radix-ui/react-slot": "^1.3.3",
     "@radix-ui/react-tabs": "^1.1.21",
     "@radix-ui/react-tooltip": "^1.2.16",
-    "@radix-ui/themes": "^3.3.0",
     "@tanstack/react-query": "^5.102.8",
     "browser-id3-writer": "^4.4.0",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
-    "classnames": "^2.5.1",
     "clsx": "^2.1.1",
     "dompurify": "^3.4.14",
     "framer-motion": "^11.15.0",
     "hyphen": "^1.14.1",
-    "i18next": "^26.3.6",
     "idb": "^8.0.3",
     "immer": "^11.1.15",
     "jotai": "^2.12.0",
@@ -60,7 +58,6 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.86.0",
-    "react-i18next": "^17.0.10",
     "react-router-dom": "^7.1.0",
     "react-viewport-list": "^7.1.2",
     "sonner": "^2.0.8",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 6f0c2e6..29a6e82 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -142,9 +142,6 @@ importers:
       '@applemusic-like-lyrics/react-full':
         specifier: ^0.4.2
         version: 0.4.2(@pixi/app@7.4.3(@pixi/core@7.4.3)(@pixi/display@7.4.3(@pixi/core@7.4.3)))(@pixi/core@7.4.3)(@pixi/display@7.4.3(@pixi/core@7.4.3))(@pixi/filter-blur@7.4.3(@pixi/core@7.4.3))(@pixi/filter-bulge-pinch@5.1.1(@pixi/core@7.4.3))(@pixi/filter-color-matrix@7.4.3(@pixi/core@7.4.3))(@pixi/sprite@7.4.3(@pixi/core@7.4.3)(@pixi/display@7.4.3(@pixi/core@7.4.3)))(jotai@2.20.2(@babel/core@7.29.7)(@babel/template@7.29.7)(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@fluentui/react-icons':
-        specifier: ^2.0.333
-        version: 2.0.343(react@19.2.8)
       '@hookform/resolvers':
         specifier: ^5.9.1
         version: 5.9.1(@standard-schema/spec@1.1.0)(react-hook-form@7.86.0(react@19.2.8))(zod@4.4.3)
@@ -160,12 +157,18 @@ importers:
       '@radix-ui/react-collapsible':
         specifier: ^1.1.20
         version: 1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-context-menu':
+        specifier: ^2.3.8
+        version: 2.3.8(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-dialog':
         specifier: ^1.1.23
         version: 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.24
         version: 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-hover-card':
+        specifier: ^1.1.24
+        version: 1.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-label':
         specifier: ^2.1.15
         version: 2.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -187,9 +190,6 @@ importers:
       '@radix-ui/react-tooltip':
         specifier: ^1.2.16
         version: 1.2.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/themes':
-        specifier: ^3.3.0
-        version: 3.3.0(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@tanstack/react-query':
         specifier: ^5.102.8
         version: 5.102.8(react@19.2.8)
@@ -202,9 +202,6 @@ importers:
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
-      classnames:
-        specifier: ^2.5.1
-        version: 2.5.1
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -217,9 +214,6 @@ importers:
       hyphen:
         specifier: ^1.14.1
         version: 1.14.1
-      i18next:
-        specifier: ^26.3.6
-        version: 26.4.2(typescript@5.9.3)
       idb:
         specifier: ^8.0.3
         version: 8.0.3
@@ -265,9 +259,6 @@ importers:
       react-hook-form:
         specifier: ^7.86.0
         version: 7.86.0(react@19.2.8)
-      react-i18next:
-        specifier: ^17.0.10
-        version: 17.0.15(i18next@26.4.2(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3)
       react-router-dom:
         specifier: ^7.1.0
         version: 7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -495,10 +486,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/runtime@7.29.7':
-    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/template@7.29.7':
     resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
     engines: {node: '>=6.9.0'}
@@ -558,9 +545,6 @@ packages:
     resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
     engines: {node: '>=20.19.0'}
 
-  '@emotion/hash@0.9.2':
-    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
-
   '@esbuild/aix-ppc64@0.28.1':
     resolution: {integrity: sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==}
     engines: {node: '>=18'}
@@ -780,11 +764,6 @@ packages:
   '@floating-ui/utils@0.2.12':
     resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
 
-  '@fluentui/react-icons@2.0.343':
-    resolution: {integrity: sha512-CjwAZrog38QNPeIjBfMs0e7tPUW/Bxgge5qbhbfdhXJwXOSm5lDLCKkx4xyBSu1Mg/e/8wLocQvWcBZlS6/Axg==}
-    peerDependencies:
-      react: '>=16.8.0 <20.0.0'
-
   '@formatjs/ecma402-abstract@2.3.6':
     resolution: {integrity: sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw==}
 
@@ -800,17 +779,6 @@ packages:
   '@formatjs/intl-localematcher@0.6.2':
     resolution: {integrity: sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA==}
 
-  '@griffel/core@1.21.4':
-    resolution: {integrity: sha512-Pt6tjaBCOYYC76L7U5yl3r+UqOGXEbeskvYuqUsUzaVQR2ueoMErA2+bRjvVPFr8NvvhPVU+QNBqd9Deg5st2A==}
-
-  '@griffel/react@1.7.8':
-    resolution: {integrity: sha512-kTegyzZoRqpRNUQ8Fd6QWLC8MUqSyO+/GDC/ffbEG8Y6JDole98rBrOVA/NN9PDD61/ktsd2UqtsTNwtAG6q3w==}
-    peerDependencies:
-      react: '>=16.14.0 <20.0.0'
-
-  '@griffel/style-types@1.4.3':
-    resolution: {integrity: sha512-sFxMK19oFUPQSmyCKT1Pvj5Nu/ODvhMczqhGjVAoksDTXUj1za40WA0CXqV3o+xxKWPec+K/rbS78jJLmomsQA==}
-
   '@hookform/resolvers@5.9.1':
     resolution: {integrity: sha512-7b7vsbraJxKgjVSA1Nur9tLwj539WGJUBLA7QNvXnFoT2pM5Z7G+6rlukk4B2/QrTZy6huRtH6wKeESPKuIr6w==}
     peerDependencies:
@@ -1017,30 +985,14 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  '@radix-ui/colors@3.0.0':
-    resolution: {integrity: sha512-FUOsGBkHrYJwCSEtWRCIfQbZG7q1e6DgxCIOe1SUQzDe/7rXXeA47s8yCn6fuTNQAj1Zq4oTFi9Yjp3wzElcxg==}
-
   '@radix-ui/number@1.1.3':
     resolution: {integrity: sha512-Road2bidD0uu/1BGDOWNdPI06g0lIRy6IF9GZcIrDK2KGItfor8IQwQa+yM2ERgHM1MmHxaxpTzk0/Jp42lNfA==}
 
   '@radix-ui/primitive@1.1.7':
     resolution: {integrity: sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q==}
 
-  '@radix-ui/react-accessible-icon@1.1.15':
-    resolution: {integrity: sha512-WTQwcAvQf5sOcuUyi90lKPbhwcvQ+j55cjrSmeaN+L2vKU3DooOvlKw2MDeiJ5IkV5N905KW0/fGojKOBhD11A==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-accordion@1.2.20':
-    resolution: {integrity: sha512-jDhG9FvAEnlhnjrsINbNXcUa4G+L1KqSkJSunkbKEzFRcAb52jvM0PjPxPRvhe1HNc5F5yc0yzzWeeqlH4yBIg==}
+  '@radix-ui/react-alert-dialog@1.1.23':
+    resolution: {integrity: sha512-VAYOiQRqj3GPpYJE0I9J+X8Ip05cyVlNdKOFeiGS2Ou1HHGfpl0BxOyZm6nmVDyU+W+NF3/XLzmjHmVGydhwgA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1052,8 +1004,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-alert-dialog@1.1.23':
-    resolution: {integrity: sha512-VAYOiQRqj3GPpYJE0I9J+X8Ip05cyVlNdKOFeiGS2Ou1HHGfpl0BxOyZm6nmVDyU+W+NF3/XLzmjHmVGydhwgA==}
+  '@radix-ui/react-arrow@1.1.15':
+    resolution: {integrity: sha512-v4zggRcjadnI+ClKDuijlQEW4tw3NoaeHc/PwpKnLoLLKNUG4InLegkstooLcRIUWCs+8L22dGURCVuFfOKfnA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1065,8 +1017,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-arrow@1.1.15':
-    resolution: {integrity: sha512-v4zggRcjadnI+ClKDuijlQEW4tw3NoaeHc/PwpKnLoLLKNUG4InLegkstooLcRIUWCs+8L22dGURCVuFfOKfnA==}
+  '@radix-ui/react-arrow@1.1.16':
+    resolution: {integrity: sha512-nXPI1tzJsnQw8oXvB2r49rO9TIbbJ8VFeaWDiBsqY8+iwO5xb7WjUsrXDagjAgPKTdhW8WODQnAltUhBx8I+sg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1104,8 +1056,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-checkbox@1.3.11':
-    resolution: {integrity: sha512-Gnptr9pDDQxD3hgq2dtPbtrp/c2qH1mBwIzw3X/ivrMb2e1t0jMTi606fVEqFPaQR1ggXIVQWKj3P2WW9v7zGQ==}
+  '@radix-ui/react-collapsible@1.1.20':
+    resolution: {integrity: sha512-mcGesGplBnzN2sbvJETzpCNfSMyPnb29q1GRLU+Ib7bJrpIG2ywmRoh2V5VbA2uNvKikKUlVbAPks7JDjz4A8Q==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1117,8 +1069,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-collapsible@1.1.20':
-    resolution: {integrity: sha512-mcGesGplBnzN2sbvJETzpCNfSMyPnb29q1GRLU+Ib7bJrpIG2ywmRoh2V5VbA2uNvKikKUlVbAPks7JDjz4A8Q==}
+  '@radix-ui/react-collection@1.1.15':
+    resolution: {integrity: sha512-9W+B9NPF0NaaPh/1NJd3+KqsnlLqU9H7T2rvww+fp+T/evVXdNAyYcnfRQZFOjkR1ajQp3yORlqnI8soawLvNA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1130,8 +1082,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-collection@1.1.15':
-    resolution: {integrity: sha512-9W+B9NPF0NaaPh/1NJd3+KqsnlLqU9H7T2rvww+fp+T/evVXdNAyYcnfRQZFOjkR1ajQp3yORlqnI8soawLvNA==}
+  '@radix-ui/react-collection@1.1.16':
+    resolution: {integrity: sha512-yEQrjfI5eBbeYEJXOASpm+gs9eNHY8+UjkZ81GzcuwdLrSMOlEM8jnGoGdeGo92oiBMkuwZUhHTsnsrDiJLcyA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1152,8 +1104,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-context-menu@2.3.7':
-    resolution: {integrity: sha512-CtXP35dxaB5T3zXSd+E3uHe/QpXcpYnZmxp6OaIbfthtfW4wyb77M23BG+bwIJDtsMwEP/YssdsmNyZu7jhWew==}
+  '@radix-ui/react-context-menu@2.3.8':
+    resolution: {integrity: sha512-s8ABBkEuAOyhDub0Y99f8lVRlVsd28mUnOHtuqGg8LuHnefkmPN5rYzA2g8MAPLjAZMisnDHhN4dBHUM7ZF7Rg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1196,6 +1148,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-direction@1.1.5':
+    resolution: {integrity: sha512-/NlO/rOqQabmg+GGr86vCmbJVhqTv85NfM9g6Gknf/JVygXeZ6e6HM/RW1omerW9HsFtecwNqgEAKV6UqDsvpA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dismissable-layer@1.1.19':
     resolution: {integrity: sha512-8g4pfOL9HoKKLWGiypT+dphVqjFfmcXO5GBnhsG6zI+lxAx/8feQpr+1LSN8Re3hiZ+XkLNS4O9ztK11/LzQ6w==}
     peerDependencies:
@@ -1209,6 +1170,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-dismissable-layer@1.1.20':
+    resolution: {integrity: sha512-35WHRrycfnj2m4LvPiKMKHGLM3Y2WvUA744CkRdxjs1BGDX1c8PVMfmiSGTUwnHRbqdtIoxveYTXvcJSt7VfgQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-dropdown-menu@2.1.24':
     resolution: {integrity: sha512-geq8l2rJkxvkXsT9RMgtUE3P8pITFpTsvYpbySi1IH4fZEABD/Gp85myayFgxk0ktljGMJnCbeFkyTusvSvv7g==}
     peerDependencies:
@@ -1244,8 +1218,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-form@0.1.16':
-    resolution: {integrity: sha512-Q4TLEn2A7TAypxwmd6R9EwrlXDvkfYSDMrq9/887AXAGh+G1rH+kYJKSTv+Si9Y0JPKTwKYv6PviAJosysNimA==}
+  '@radix-ui/react-focus-scope@1.2.0':
+    resolution: {integrity: sha512-I5S7vsAOozx2lWSBAyuXjWIJ/A8qx4fjbv6115WoaRYQSb1yZDaeNHonUAQzXyE8oD+0whJHbQRl4HIE2gQ0Xw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1257,8 +1231,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-hover-card@1.1.23':
-    resolution: {integrity: sha512-H8qONfZd3ltrU3+jHCIgITbWo6e1iTKvP9DHdrvYbX48ooRM5FjEDTn16AMwdfuOGkWdZEhpl3PLL/Wk/AnHDQ==}
+  '@radix-ui/react-hover-card@1.1.24':
+    resolution: {integrity: sha512-0w/tZHRo1fv4WsfcyaOdi5eDftFA8wQkr8WCOOuxw7fx9S2ERfshQioM269aFZsmyAHd0X1LWoZ2BQTlA/JYUw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1305,21 +1279,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-menubar@1.1.24':
-    resolution: {integrity: sha512-eeVs0vf7cuqXaM0qLQCPcufImiJNVBXdJDLu7ZGYl2732UH23Qat/foNGrr6vYV3/DdTsBqASoggUFgH14OcZA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-navigation-menu@1.2.22':
-    resolution: {integrity: sha512-ou7iLEJ+yrhQndkkA4U21XIdS/CS45F4iXIkTZcb6/Ne9EMsOuDudVmCwmDnfFZZ+y1FZqXRNSIgBy+YMvZVZg==}
+  '@radix-ui/react-menu@2.1.25':
+    resolution: {integrity: sha512-e8JaQc0ijBbTx37YVI09Nfq8ThUWJ4L1rvZ3Hvaufehco9/ug9+U3PHz9ue6w3gKd91UcKf9fgDWejeSO+VSKQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1331,8 +1292,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-one-time-password-field@0.1.16':
-    resolution: {integrity: sha512-Tj9P6ntAJEw52oq/F0AGknXR4XncxEt7XU47O3xJQOiWfLzEy3d9gtgKfvjSzGxzHkfL+VzvxGu2KTFsloJqXw==}
+  '@radix-ui/react-popover@1.1.23':
+    resolution: {integrity: sha512-mw58MrBlyHWFisTOYignD0vf/3gdcgAR+9of1s9G/38CbFiUwH1nCDkc0AUM9IrXFgN5Ue8n45j9WCgyM1sbiQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1344,8 +1305,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-password-toggle-field@0.1.11':
-    resolution: {integrity: sha512-4gvFnmDXu3dgj21CqsufzIameRvlRd4SBqaWhcrlrNhRo0Y5i/49AmRJYe1fdAM3G2VNBbmin4b0D6cdQocwgw==}
+  '@radix-ui/react-popper@1.3.7':
+    resolution: {integrity: sha512-UsJrrd7w4wuKKTdvd/DNERVlwSlUcyXzjhyDwBk+3aPOsCjOY6ZSbxuw8E6lZTjjfP8Cpd0J8VVkrYUWyGYXyg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1357,8 +1318,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-popover@1.1.23':
-    resolution: {integrity: sha512-mw58MrBlyHWFisTOYignD0vf/3gdcgAR+9of1s9G/38CbFiUwH1nCDkc0AUM9IrXFgN5Ue8n45j9WCgyM1sbiQ==}
+  '@radix-ui/react-popper@1.3.8':
+    resolution: {integrity: sha512-y92/9iIdG1FyNvow0Y0qP5WJZ7oRTAKDVKCy9kJnhZfItwIKYtt0KKQeOhBKfXz0ETizduKwDRbrQHrTQScs5A==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1370,8 +1331,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-popper@1.3.7':
-    resolution: {integrity: sha512-UsJrrd7w4wuKKTdvd/DNERVlwSlUcyXzjhyDwBk+3aPOsCjOY6ZSbxuw8E6lZTjjfP8Cpd0J8VVkrYUWyGYXyg==}
+  '@radix-ui/react-portal@1.1.17':
+    resolution: {integrity: sha512-vKQLcWypUnwZVvfV7UkGahH2g6ySe8M8R+zYBwPrv5byZ9QAW6cQVvNKo7GgmD+p8aYb6D9JBuvy8/WhOno2wQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1383,8 +1344,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-portal@1.1.17':
-    resolution: {integrity: sha512-vKQLcWypUnwZVvfV7UkGahH2g6ySe8M8R+zYBwPrv5byZ9QAW6cQVvNKo7GgmD+p8aYb6D9JBuvy8/WhOno2wQ==}
+  '@radix-ui/react-portal@1.1.18':
+    resolution: {integrity: sha512-ygFIJ+QXNKf72AAq8x3hd22+ws7pYpmc1S0E4kW0Je+qD4qEb3FvxeKVQRGrVDMOkQaYfsB+Qs+KDh81a1gAOw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1409,8 +1370,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-primitive@2.1.10':
-    resolution: {integrity: sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg==}
+  '@radix-ui/react-presence@1.1.11':
+    resolution: {integrity: sha512-Z7/atlkab36Z8hm+V8zYc79r0W+tiOB1o0tun1By94JyadkekLQmtEAnBSP9XKXBNQsStoStS4+gX10JpS5akA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1422,8 +1383,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-progress@1.1.16':
-    resolution: {integrity: sha512-5XnomAsoZZCY+KNTxbIghpGqPruZvKFNlvcAljVAOdDRDsH4/OZQxhtwo5wdtoDM5R6MhJBb2sPnDuRFep3lzg==}
+  '@radix-ui/react-primitive@2.1.10':
+    resolution: {integrity: sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1435,8 +1396,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-radio-group@1.4.7':
-    resolution: {integrity: sha512-cgYFEkntCxppHZgtSZ+7vh0wbZQ+IC7PPMw8DSnRG27B6kDd32/Zw0OJt7dGDigCoprMuWHjg2PvUn3PYvPFoQ==}
+  '@radix-ui/react-primitive@2.1.11':
+    resolution: {integrity: sha512-RzcaSw5aKl0OPhBJ1wbolKSF6nVvN+0o/QLeIVq+09npiPdnCkPggy2k6gI6yetxl4ZyrlBPYFgCB8BQJZwXcQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1461,8 +1422,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-scroll-area@1.2.18':
-    resolution: {integrity: sha512-Zn5Cd171wxsO3Dfg8HaW6RifTb9CYTKQJHs/G4+LN1GfmJpaQMZQyQxMprVPHpaz7QY4l9BxK2JwQuzHsXC8nA==}
+  '@radix-ui/react-roving-focus@1.1.20':
+    resolution: {integrity: sha512-+ZjbkU21fTSJdn4nq/IFKUdKS+JSZHORBZ8ma1f6YpOMNzRt0xf3sVAWVK/+ktHCajPy4HYDsyHXZIZmOMxzIA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1474,8 +1435,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-select@2.3.7':
-    resolution: {integrity: sha512-WFGImkmbzcfxeIwq/+4HvRN0pizBwbwQUED4I13ezQsDdfl38ZntN6TmR8XaSzPBqoCToe8rF75j6NPNDSzhbg==}
+  '@radix-ui/react-scroll-area@1.2.18':
+    resolution: {integrity: sha512-Zn5Cd171wxsO3Dfg8HaW6RifTb9CYTKQJHs/G4+LN1GfmJpaQMZQyQxMprVPHpaz7QY4l9BxK2JwQuzHsXC8nA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1500,19 +1461,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-slider@1.4.7':
-    resolution: {integrity: sha512-mTSLf1GC/C0moWjTbvCM6Qn/gBjvlFt1azuWF2v7MN5C3Zq2U2J2lN3ZEYkpujuOU5Ro7A28wkviSxaKnG0BYg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-slot@1.3.3':
     resolution: {integrity: sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==}
     peerDependencies:
@@ -1522,18 +1470,14 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-switch@1.3.7':
-    resolution: {integrity: sha512-48tB/4dn2UVLBCYhTu9AuR63IHl73l/qLbLgxd86noTUor4/K4LFDAcYjK+isP5313qxaFpjPVogE7+Y0/V3Kw==}
+  '@radix-ui/react-slot@1.4.0':
+    resolution: {integrity: sha512-IuMVHZ+Ah5fkctu3X3qeFrV/ZrBcuWuDTFUUPfS/L5hvoTjzhp/HdWGE14CsQombPdEidsa33HVlYZXi49PZ1Q==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
   '@radix-ui/react-tabs@1.1.21':
     resolution: {integrity: sha512-UKxJlZid7FVtsk/WTxj4i4uSEgj2Au+KBbS7SQyTlzMhhn+86Cz3tISZdTa87bfEfcuvZezf2ZsxD4xuEKtkog==}
@@ -1548,58 +1492,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-toast@1.2.23':
-    resolution: {integrity: sha512-ofhyAsYaocRGOs/n0XWdUOSVzEAG6BfrMVM8z0c0kLEWY38w/0WuMFPTJP/HVaZPYkMvHZoKIIhNcjbTCBILPg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toggle-group@1.1.19':
-    resolution: {integrity: sha512-OtnwuSVjd1Ofi+AdnvhsjQdyuhCDwYs1w9RyB5BN/OavXOVQo42SYqQjwUnbPnaiPFBpQ9aX70dWeee+v2oBLA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toggle@1.1.18':
-    resolution: {integrity: sha512-7lonPlKfSacd20GlOBx2ltuVKz9oqWYZz+oMQyOltw6t1y2nyftj2ZmwwUHYn49kqfDWcp8dNZm5NgV+5Z+mug==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toolbar@1.1.19':
-    resolution: {integrity: sha512-Ph0IvtYw4VB12ZnZg+YtrGs8yJQsnizwo/zu0R4Y/nWugtJzA7Pg1eWeuDR9+LSqn+xjamss+UOSOJJJ4gx8jw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-tooltip@1.2.16':
     resolution: {integrity: sha512-6EamKFRRnlpdadndbZ6LMwycfwkwPte1B42hs6QA0gYhjaOKqW4PZ4pjaW9UrlDX5eVt/OjncE7BFTPL5nmZhg==}
     peerDependencies:
@@ -1640,15 +1532,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-escape-keydown@1.1.5':
-    resolution: {integrity: sha512-ge3ipobwSXTj4JyVtswQ7qZj0ZHdtbGuOno/LrgAAeSxtsJ6Vs4Gz5IkPH2bmqpjcLUFoqGhA/mueuIf63UXlA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@radix-ui/react-use-is-hydrated@0.1.3':
     resolution: {integrity: sha512-umO/aJ+82CpOnhDZUTbILCQf7kU/g0iv+oGs/Q8jw7IkhWBzaEP4sA268PhFAJTFetbwp3ICc6ktpI4TqtxcIw==}
     peerDependencies:
@@ -1667,8 +1550,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-previous@1.1.4':
-    resolution: {integrity: sha512-XoSLhbRbqxFtgJoi2fNHA3C6pDlY34x508vUpUGoFZfvePfHXHbE1lC4FYFMnJWgiCRroSTw6fOsXQoVS9RwZg==}
+  '@radix-ui/react-use-rect@1.1.4':
+    resolution: {integrity: sha512-cSOCh6JlkmfjLyNcLiu2nB4v+nm+dkZ+Q5KHWk/soo4U7ZLiEQFKHK9/YmtBHjfCEaU43IBKQOc4/uJmCaiCTQ==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -1676,8 +1559,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-rect@1.1.4':
-    resolution: {integrity: sha512-cSOCh6JlkmfjLyNcLiu2nB4v+nm+dkZ+Q5KHWk/soo4U7ZLiEQFKHK9/YmtBHjfCEaU43IBKQOc4/uJmCaiCTQ==}
+  '@radix-ui/react-use-size@1.1.4':
+    resolution: {integrity: sha512-D3anSY15EJoxrihpsXI6SMrmmonnQtR2ni7arO+Lfdg3O95b9hNXxONk8jA5C8ANdF/h5HMAxejgs8PWJ6rlhw==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -1685,8 +1568,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-size@1.1.4':
-    resolution: {integrity: sha512-D3anSY15EJoxrihpsXI6SMrmmonnQtR2ni7arO+Lfdg3O95b9hNXxONk8jA5C8ANdF/h5HMAxejgs8PWJ6rlhw==}
+  '@radix-ui/react-use-size@1.1.5':
+    resolution: {integrity: sha512-V1McDQkMGzgivwqdu7u96APs7oi0Jvj9LTzgq3WWrDZqxWdAqU9yZnZQqk5OizGFR8badUQwZsrlao7MOlWYOA==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -1710,19 +1593,6 @@ packages:
   '@radix-ui/rect@1.1.3':
     resolution: {integrity: sha512-JtyZR+mqgBibTo8xea3B6ZRmzZiM/YeVBtUkas6zMuXjAlfIFIW2FgqeM9eLyvEaYX66vr6DJMK+4U6LV0KhNw==}
 
-  '@radix-ui/themes@3.3.0':
-    resolution: {integrity: sha512-I0/h2CRNTpYNB7Mi3xFIvSsQq5a108d7kK8dTO5zp5b9HR5QJXKag6B8tjpz2ITkVYkFdkGk45doNkSr7OxwNw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: 16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: 16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@rolldown/pluginutils@1.0.0-beta.27':
     resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
 
@@ -2913,9 +2783,6 @@ packages:
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
-  html-parse-stringify@4.0.1:
-    resolution: {integrity: sha512-0zHsZJrK7S3K2aucXWL6ycoYJ/iNtIcFHC/nYQgFklPtrv5LpJctIiSCroWZWeuoXvuyFdzp6KzjJQ+OT5MfFw==}
-
   http-errors@2.0.1:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
@@ -2935,14 +2802,6 @@ packages:
   hyphen@1.14.1:
     resolution: {integrity: sha512-kvL8xYl5QMTh+LwohVN72ciOxC0OEV79IPdJSTwEXok9y9QHebXGdFgrED4sWfiax/ODx++CAMk3hMy4XPJPOw==}
 
-  i18next@26.4.2:
-    resolution: {integrity: sha512-RX+R0VLg13IbvRuJSxnqykUFS9vQZTl8wYpWPCIUDWVrSGjsQywB5Y+pjzrkboxGAuYfJZVH1InFTdgBdxq6ug==}
-    peerDependencies:
-      typescript: ^5 || ^6 || ^7
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -3611,19 +3470,6 @@ packages:
     resolution: {integrity: sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==}
     engines: {node: '>=0.6'}
 
-  radix-ui@1.6.7:
-    resolution: {integrity: sha512-QBdhh1arIEUvPC0dQ5+nwWAxt7+N+oP/9jPwjJkGFoSk/sqxg32gJtSXGtFh8frAIcS6oC9cx2Q+7KYCQLOAeA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   range-parser@1.2.1:
     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
     engines: {node: '>= 0.6'}
@@ -3643,22 +3489,6 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
 
-  react-i18next@17.0.15:
-    resolution: {integrity: sha512-7uYpx/oBkesLto7cOzOmfITlUBaXHCAcFahmgETMfWr8nbbWRRnVGvz8wsH/xpbNcyoH+NpCcnOQEqWPMO6/hw==}
-    peerDependencies:
-      i18next: '>= 26.2.0'
-      react: '>= 16.8.0'
-      react-dom: '*'
-      react-native: '*'
-      typescript: ^5 || ^6 || ^7
-    peerDependenciesMeta:
-      react-dom:
-        optional: true
-      react-native:
-        optional: true
-      typescript:
-        optional: true
-
   react-refresh@0.17.0:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
@@ -3762,9 +3592,6 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
-  rtl-css-js@1.16.1:
-    resolution: {integrity: sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==}
-
   run-async@2.4.1:
     resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
     engines: {node: '>=0.12.0'}
@@ -3932,9 +3759,6 @@ packages:
     resolution: {integrity: sha512-ki4hZQfh5rX0QDLLkOCj+h+CVNkqmp/CMf8v8kZpkNVK6jGQooMytqzLZYUVYIZcFZ6yDB70EfD8POcFXiF5oA==}
     engines: {node: '>=18'}
 
-  stylis@4.4.0:
-    resolution: {integrity: sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==}
-
   supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -4133,11 +3957,6 @@ packages:
       '@types/react':
         optional: true
 
-  use-sync-external-store@1.7.0:
-    resolution: {integrity: sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -4562,8 +4381,6 @@ snapshots:
       '@babel/core': 7.29.7(supports-color@7.2.0)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/runtime@7.29.7': {}
-
   '@babel/template@7.29.7':
     dependencies:
       '@babel/code-frame': 7.29.7
@@ -4619,8 +4436,6 @@ snapshots:
 
   '@csstools/css-tokenizer@4.0.0': {}
 
-  '@emotion/hash@0.9.2': {}
-
   '@esbuild/aix-ppc64@0.28.1':
     optional: true
 
@@ -4752,12 +4567,6 @@ snapshots:
 
   '@floating-ui/utils@0.2.12': {}
 
-  '@fluentui/react-icons@2.0.343(react@19.2.8)':
-    dependencies:
-      '@griffel/react': 1.7.8(react@19.2.8)
-      react: 19.2.8
-      tslib: 2.8.1
-
   '@formatjs/ecma402-abstract@2.3.6':
     dependencies:
       '@formatjs/fast-memoize': 2.2.7
@@ -4784,25 +4593,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@griffel/core@1.21.4':
-    dependencies:
-      '@emotion/hash': 0.9.2
-      '@griffel/style-types': 1.4.3
-      csstype: 3.2.3
-      rtl-css-js: 1.16.1
-      stylis: 4.4.0
-      tslib: 2.8.1
-
-  '@griffel/react@1.7.8(react@19.2.8)':
-    dependencies:
-      '@griffel/core': 1.21.4
-      react: 19.2.8
-      tslib: 2.8.1
-
-  '@griffel/style-types@1.4.3':
-    dependencies:
-      csstype: 3.2.3
-
   '@hookform/resolvers@5.9.1(@standard-schema/spec@1.1.0)(react-hook-form@7.86.0(react@19.2.8))(zod@4.4.3)':
     dependencies:
       '@standard-schema/utils': 0.3.0
@@ -4990,44 +4780,25 @@ snapshots:
       - react-native-b4a
       - supports-color
 
-  '@radix-ui/colors@3.0.0': {}
-
   '@radix-ui/number@1.1.3': {}
 
   '@radix-ui/primitive@1.1.7': {}
 
-  '@radix-ui/react-accessible-icon@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
-    dependencies:
-      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-    optionalDependencies:
-      '@types/react': 19.2.18
-      '@types/react-dom': 19.2.4(@types/react@19.2.18)
-
-  '@radix-ui/react-accordion@1.2.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-alert-dialog@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collapsible': 1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-alert-dialog@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-arrow@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
@@ -5035,9 +4806,9 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-arrow@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-arrow@1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
@@ -5067,43 +4838,40 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-checkbox@1.3.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-collapsible@1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-collapsible@1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-collection@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/primitive': 1.1.7
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-collection@1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-collection@1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.4.0(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
@@ -5116,12 +4884,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.18
 
-  '@radix-ui/react-context-menu@2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-context-menu@2.3.8(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.25(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
@@ -5164,6 +4932,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.18
 
+  '@radix-ui/react-direction@1.1.5(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
   '@radix-ui/react-dismissable-layer@1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
@@ -5177,6 +4951,19 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
+  '@radix-ui/react-dismissable-layer@1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.4(@types/react@19.2.18)
+
   '@radix-ui/react-dropdown-menu@2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
@@ -5209,30 +4996,28 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-form@0.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-focus-scope@1.2.0(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/primitive': 1.1.7
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-label': 2.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-hover-card@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-hover-card@1.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.2.0(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.8(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
@@ -5282,126 +5067,113 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-menubar@1.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-menu@2.1.25(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-collection': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.2.0(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.8(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.4.0(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      aria-hidden: 1.2.6
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-navigation-menu@1.2.22(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-popover@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-previous': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      aria-hidden: 1.2.6
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-one-time-password-field@0.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-popper@1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/number': 1.1.3
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-arrow': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-rect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/rect': 1.1.3
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-password-toggle-field@0.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-popper@1.3.8(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/primitive': 1.1.7
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-arrow': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-rect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/rect': 1.1.3
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-popover@1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-portal@1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
-      aria-hidden: 1.2.6
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
-      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-popper@1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-portal@1.1.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-arrow': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-rect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/rect': 1.1.3
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-portal@1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-presence@1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
@@ -5409,7 +5181,7 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-presence@1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-presence@1.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
@@ -5427,27 +5199,9 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-progress@1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-primitive@2.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-    optionalDependencies:
-      '@types/react': 19.2.18
-      '@types/react-dom': 19.2.4(@types/react@19.2.18)
-
-  '@radix-ui/react-radio-group@1.4.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-slot': 1.4.0(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
@@ -5473,16 +5227,18 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-scroll-area@1.2.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-roving-focus@1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/number': 1.1.3
       '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
@@ -5490,32 +5246,19 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-select@2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-scroll-area@1.2.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/number': 1.1.3
       '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-previous': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      aria-hidden: 1.2.6
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
-      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
@@ -5529,25 +5272,6 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-slider@1.4.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
-    dependencies:
-      '@radix-ui/number': 1.1.3
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-previous': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-    optionalDependencies:
-      '@types/react': 19.2.18
-      '@types/react-dom': 19.2.4(@types/react@19.2.18)
-
   '@radix-ui/react-slot@1.3.3(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
@@ -5555,19 +5279,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.18
 
-  '@radix-ui/react-switch@1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-slot@1.4.0(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@radix-ui/primitive': 1.1.7
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
       '@types/react': 19.2.18
-      '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
   '@radix-ui/react-tabs@1.1.21(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
@@ -5585,67 +5302,6 @@ snapshots:
       '@types/react': 19.2.18
       '@types/react-dom': 19.2.4(@types/react@19.2.18)
 
-  '@radix-ui/react-toast@1.2.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-    optionalDependencies:
-      '@types/react': 19.2.18
-      '@types/react-dom': 19.2.4(@types/react@19.2.18)
-
-  '@radix-ui/react-toggle-group@1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-toggle': 1.1.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-    optionalDependencies:
-      '@types/react': 19.2.18
-      '@types/react-dom': 19.2.4(@types/react@19.2.18)
-
-  '@radix-ui/react-toggle@1.1.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-    optionalDependencies:
-      '@types/react': 19.2.18
-      '@types/react-dom': 19.2.4(@types/react@19.2.18)
-
-  '@radix-ui/react-toolbar@1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-toggle-group': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-    optionalDependencies:
-      '@types/react': 19.2.18
-      '@types/react-dom': 19.2.4(@types/react@19.2.18)
-
   '@radix-ui/react-tooltip@1.2.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
@@ -5689,13 +5345,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.18
 
-  '@radix-ui/react-use-escape-keydown@1.1.5(@types/react@19.2.18)(react@19.2.8)':
-    dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      react: 19.2.8
-    optionalDependencies:
-      '@types/react': 19.2.18
-
   '@radix-ui/react-use-is-hydrated@0.1.3(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       react: 19.2.8
@@ -5708,20 +5357,21 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.18
 
-  '@radix-ui/react-use-previous@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+  '@radix-ui/react-use-rect@1.1.4(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
+      '@radix-ui/rect': 1.1.3
       react: 19.2.8
     optionalDependencies:
       '@types/react': 19.2.18
 
-  '@radix-ui/react-use-rect@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+  '@radix-ui/react-use-size@1.1.4(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@radix-ui/rect': 1.1.3
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
     optionalDependencies:
       '@types/react': 19.2.18
 
-  '@radix-ui/react-use-size@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+  '@radix-ui/react-use-size@1.1.5(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
@@ -5739,18 +5389,6 @@ snapshots:
 
   '@radix-ui/rect@1.1.3': {}
 
-  '@radix-ui/themes@3.3.0(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
-    dependencies:
-      '@radix-ui/colors': 3.0.0
-      classnames: 2.5.1
-      radix-ui: 1.6.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-      react-remove-scroll-bar: 2.3.8(@types/react@19.2.18)(react@19.2.8)
-    optionalDependencies:
-      '@types/react': 19.2.18
-      '@types/react-dom': 19.2.4(@types/react@19.2.18)
-
   '@rolldown/pluginutils@1.0.0-beta.27': {}
 
   '@rollup/rollup-android-arm-eabi@4.62.4':
@@ -6969,8 +6607,6 @@ snapshots:
 
   html-escaper@2.0.2: {}
 
-  html-parse-stringify@4.0.1: {}
-
   http-errors@2.0.1:
     dependencies:
       depd: 2.0.0
@@ -6997,10 +6633,6 @@ snapshots:
 
   hyphen@1.14.1: {}
 
-  i18next@26.4.2(typescript@5.9.3):
-    optionalDependencies:
-      typescript: 5.9.3
-
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
@@ -7641,69 +7273,6 @@ snapshots:
       es-define-property: 1.0.1
       side-channel: 1.1.1
 
-  radix-ui@1.6.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-accessible-icon': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-accordion': 1.2.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-alert-dialog': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-arrow': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-aspect-ratio': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-avatar': 1.2.6(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-checkbox': 1.3.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-collapsible': 1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-context-menu': 2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-dropdown-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-form': 0.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-hover-card': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-label': 2.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-menubar': 1.1.24(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-navigation-menu': 1.2.22(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-one-time-password-field': 0.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-password-toggle-field': 0.1.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-popover': 1.1.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-radio-group': 1.4.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-scroll-area': 1.2.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-select': 2.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-slider': 1.4.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-switch': 1.3.7(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-tabs': 1.1.21(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-toast': 1.2.23(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-toggle': 1.1.18(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-toggle-group': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-toolbar': 1.1.19(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-tooltip': 1.2.16(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-escape-keydown': 1.1.5(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
-      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-    optionalDependencies:
-      '@types/react': 19.2.18
-      '@types/react-dom': 19.2.4(@types/react@19.2.18)
-
   range-parser@1.2.1: {}
 
   raw-body@2.5.3:
@@ -7722,17 +7291,6 @@ snapshots:
     dependencies:
       react: 19.2.8
 
-  react-i18next@17.0.15(i18next@26.4.2(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3):
-    dependencies:
-      '@babel/runtime': 7.29.7
-      html-parse-stringify: 4.0.1
-      i18next: 26.4.2(typescript@5.9.3)
-      react: 19.2.8
-      use-sync-external-store: 1.7.0(react@19.2.8)
-    optionalDependencies:
-      react-dom: 19.2.8(react@19.2.8)
-      typescript: 5.9.3
-
   react-refresh@0.17.0: {}
 
   react-remove-scroll-bar@2.3.8(@types/react@19.2.18)(react@19.2.8):
@@ -7851,10 +7409,6 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.62.4
       fsevents: 2.3.3
 
-  rtl-css-js@1.16.1:
-    dependencies:
-      '@babel/runtime': 7.29.7
-
   run-async@2.4.1: {}
 
   rxjs@6.6.7:
@@ -8035,8 +7589,6 @@ snapshots:
     dependencies:
       '@tokenizer/token': 0.3.0
 
-  stylis@4.4.0: {}
-
   supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0
@@ -8230,10 +7782,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.18
 
-  use-sync-external-store@1.7.0(react@19.2.8):
-    dependencies:
-      react: 19.2.8
-
   util-deprecate@1.0.2: {}
 
   utils-merge@1.0.1: {}
diff --git a/frontend/src/atoms/theme.ts b/frontend/src/atoms/theme.ts
index 0c7a0ed..e3746ef 100644
--- a/frontend/src/atoms/theme.ts
+++ b/frontend/src/atoms/theme.ts
@@ -16,18 +16,6 @@ function readStoredPreference(): ThemePreference {
   return v === 'light' || v === 'dark' || v === 'system' ? v : 'system';
 }
 
-/** 主题偏好，初值取 localStorage */
-export const themeAtom = atom<ThemePreference>(readStoredPreference());
-
-/** 解析后的实际主题，供 UI 显示当前态 */
-export const resolvedThemeAtom = atom<'light' | 'dark'>(
-  readStoredPreference() === 'dark' || (readStoredPreference() === 'system' && systemPrefersDark())
-    ? 'dark'
-    : 'light'
-);
-
-const store = getDefaultStore();
-
 /** 把解析后的主题写到 <html> */
 function applyTheme(resolved: 'light' | 'dark') {
   document.documentElement.classList.toggle('dark', resolved === 'dark');
@@ -43,17 +31,42 @@ function withTransition(fn: () => void) {
   window.setTimeout(() => root.classList.remove('theme-transitioning'), 320);
 }
 
+function resolve(preference: ThemePreference): 'light' | 'dark' {
+  return preference === 'dark' || (preference === 'system' && systemPrefersDark())
+    ? 'dark'
+    : 'light';
+}
+
+const themePreferenceBaseAtom = atom<ThemePreference>(readStoredPreference());
+
+/** 解析后的实际主题 */
+export const resolvedThemeAtom = atom<'light' | 'dark'>(
+  readStoredPreference() === 'dark' || (readStoredPreference() === 'system' && systemPrefersDark())
+    ? 'dark'
+    : 'light'
+);
+
+export const themeAtom = atom(
+  (get) => get(themePreferenceBaseAtom),
+  (_get, set, preference: ThemePreference) => {
+    localStorage.setItem(STORAGE_KEY, preference);
+    set(themePreferenceBaseAtom, preference);
+    const next = resolve(preference);
+    withTransition(() => {
+      applyTheme(next);
+      set(resolvedThemeAtom, next);
+    });
+  }
+);
+
+const store = getDefaultStore();
+
 // 模块加载即应用一次
 applyTheme(store.get(resolvedThemeAtom));
 
 /** 切换主题偏好 */
 export function setTheme(preference: ThemePreference) {
-  localStorage.setItem(STORAGE_KEY, preference);
-  const resolved: 'light' | 'dark' =
-    preference === 'dark' || (preference === 'system' && systemPrefersDark()) ? 'dark' : 'light';
   store.set(themeAtom, preference);
-  store.set(resolvedThemeAtom, resolved);
-  withTransition(() => applyTheme(resolved));
 }
 
 /** 系统偏好变化时调用 */
diff --git a/frontend/src/components/UserMenu.tsx b/frontend/src/components/UserMenu.tsx
index 1244aca..464e130 100644
--- a/frontend/src/components/UserMenu.tsx
+++ b/frontend/src/components/UserMenu.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { useAtomValue } from 'jotai';
+import { useAtom } from 'jotai';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import {
   DropdownMenu,
@@ -27,7 +27,7 @@ import {
   User,
 } from 'lucide-react';
 import { useAuth } from '@/hooks/useAuth';
-import { themeAtom, setTheme, type ThemePreference } from '@/atoms/theme';
+import { themeAtom, type ThemePreference } from '@/atoms/theme';
 import { preloadRoute } from '@/routes';
 
 /**
@@ -37,7 +37,7 @@ import { preloadRoute } from '@/routes';
  */
 export function UserMenu() {
   const { user, logout } = useAuth();
-  const theme = useAtomValue(themeAtom);
+  const [theme, setThemePreference] = useAtom(themeAtom);
   const [open, setOpen] = useState(false);
   const closeTimer = useRef(0);
 
@@ -117,7 +117,7 @@ export function UserMenu() {
             >
               <DropdownMenuRadioGroup
                 value={theme}
-                onValueChange={(v) => setTheme(v as ThemePreference)}
+                onValueChange={(v) => setThemePreference(v as ThemePreference)}
               >
                 <DropdownMenuRadioItem value="system" className="cursor-pointer">
                   <Monitor className="h-4 w-4" />
diff --git a/frontend/src/components/review/AudioSourcePicker.tsx b/frontend/src/components/review/AudioSourcePicker.tsx
new file mode 100644
index 0000000..9fca780
--- /dev/null
+++ b/frontend/src/components/review/AudioSourcePicker.tsx
@@ -0,0 +1,92 @@
+import { Music } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Radio, RadioGroup } from '@/components/ui/radio-group';
+
+export interface AudioSourceOption {
+  key: string;
+  src: string;
+  label: string;
+}
+
+interface AudioSourcePickerProps {
+  /** 可选音频源 */
+  sources: AudioSourceOption[];
+  /** 当前选中的索引 */
+  value: number;
+  /** 用户确认选择后回调 */
+  onConfirm: (index: number) => void;
+}
+
+/** 音频源选择弹窗。*/
+export function AudioSourcePicker({ sources, value, onConfirm }: AudioSourcePickerProps) {
+  const [open, setOpen] = useState(false);
+  const [picked, setPicked] = useState(value);
+  // 只在本次会话首次出现多来源时自动弹出一次；之后由顶栏下拉切换，不再打扰。
+  const autoPromptedRef = useRef(false);
+
+  useEffect(() => {
+    if (autoPromptedRef.current) return;
+    if (sources.length > 1) {
+      autoPromptedRef.current = true;
+      setPicked(value);
+      setOpen(true);
+    }
+  }, [sources, value]);
+
+  if (sources.length <= 1) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>选择参考音频</DialogTitle>
+          <DialogDescription>
+            {sources.length > 1
+              ? `该投稿包含 ${sources.length} 个音频来源，请选择用于打轴与频谱的参考音频。`
+              : '请确认用于打轴与频谱的参考音频。'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <RadioGroup className="gap-2">
+          {sources.map((source, index) => (
+            <label
+              key={source.key}
+              className="flex cursor-pointer items-center gap-3 rounded-md border border-line px-3 py-2 text-sm hover:bg-muted"
+            >
+              <Radio
+                name="audio-source"
+                checked={picked === index}
+                onChange={() => setPicked(index)}
+              />
+              <Music className="size-4 shrink-0 text-ink-3" />
+              <span className="min-w-0 flex-1 truncate" title={source.label}>
+                {source.label}
+              </span>
+            </label>
+          ))}
+        </RadioGroup>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            onClick={() => {
+              onConfirm(picked);
+              setOpen(false);
+            }}
+          >
+            使用此音频
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/review/EditorTopMenu.tsx b/frontend/src/components/review/EditorTopMenu.tsx
index 6496104..b511797 100644
--- a/frontend/src/components/review/EditorTopMenu.tsx
+++ b/frontend/src/components/review/EditorTopMenu.tsx
@@ -1,8 +1,16 @@
-import { DropdownMenu } from '@radix-ui/themes';
 import { atom, useAtom, useAtomValue, useSetAtom, useStore } from 'jotai';
 import { useSetImmerAtom } from 'jotai-immer';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
+import { type ComponentProps, useCallback } from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { segmentLyricLines } from '$/modules/segmentation/utils/segmentation';
 import { useSegmentationConfig } from '$/modules/segmentation/utils/useSegmentationConfig';
 import {
@@ -33,8 +41,23 @@ const canRedoAtom = atom((get) => get(undoableLyricLinesAtom).canRedo);
 const triggerClass =
   'rounded px-2 py-1 text-xs font-medium text-ink-2 transition-colors hover:bg-surface-2 hover:text-ink';
 
+/** 菜单项：在右侧展示快捷键 */
+function MenuItem({
+  shortcut,
+  children,
+  ...props
+}: ComponentProps<typeof DropdownMenuItem> & { shortcut?: string }) {
+  return (
+    <DropdownMenuItem {...props}>
+      {children}
+      {shortcut ? (
+        <span className="ml-auto pl-4 font-mono text-xs text-ink-3">{shortcut}</span>
+      ) : null}
+    </DropdownMenuItem>
+  );
+}
+
 function EditMenu() {
-  const { t } = useTranslation();
   const store = useStore();
   const setUndo = useSetAtom(undoLyricLinesAtom);
   const setRedo = useSetAtom(redoLyricLinesAtom);
@@ -67,52 +90,51 @@ function EditMenu() {
   }, [store]);
 
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
         <button type="button" className={triggerClass}>
-          {t('topBar.menu.edit', '编辑')}
+          编辑
         </button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
-        <DropdownMenu.Item
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <MenuItem
           onSelect={() => setUndo()}
           shortcut={formatKeyBindings(undoKey)}
           disabled={undoDisabled}
         >
-          {t('topBar.menu.undo', '撤销')}
-        </DropdownMenu.Item>
-        <DropdownMenu.Item
+          撤销
+        </MenuItem>
+        <MenuItem
           onSelect={() => setRedo()}
           shortcut={formatKeyBindings(redoKey)}
           disabled={redoDisabled}
         >
-          {t('topBar.menu.redo', '重做')}
-        </DropdownMenu.Item>
-        <DropdownMenu.Separator />
-        <DropdownMenu.Item onSelect={onSelectAll} shortcut={formatKeyBindings(selectAllKey)}>
-          {t('topBar.menu.selectAllLines', '选中所有歌词行')}
-        </DropdownMenu.Item>
-        <DropdownMenu.Item onSelect={onUnselectAll} shortcut={formatKeyBindings(unselectAllKey)}>
-          {t('topBar.menu.unselectAllLines', '取消选中所有歌词行')}
-        </DropdownMenu.Item>
-        <DropdownMenu.Item onSelect={onInvert} shortcut={formatKeyBindings(invertKey)}>
-          {t('topBar.menu.invertSelectAllLines', '反选所有歌词行')}
-        </DropdownMenu.Item>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+          重做
+        </MenuItem>
+        <DropdownMenuSeparator />
+        <MenuItem onSelect={onSelectAll} shortcut={formatKeyBindings(selectAllKey)}>
+          选中所有歌词行
+        </MenuItem>
+        <MenuItem onSelect={onUnselectAll} shortcut={formatKeyBindings(unselectAllKey)}>
+          取消选中所有歌词行
+        </MenuItem>
+        <MenuItem onSelect={onInvert} shortcut={formatKeyBindings(invertKey)}>
+          反选所有歌词行
+        </MenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }
 
 /* 工具 */
 
 function ToolMenu() {
-  const { t } = useTranslation();
-  const store = useStore();
   const editLyricLines = useSetImmerAtom(lyricLinesAtom);
   const { config: segmentationConfig } = useSegmentationConfig();
   const [, setConfirmDialog] = useAtom(confirmDialogAtom);
   const setTimeShiftDialog = useSetAtom(timeShiftDialogAtom);
   const setAdvancedSegmentation = useSetAtom(advancedSegmentationDialogAtom);
+  const setReduceStutter = useSetAtom(reduceStutterDialogAtom);
   const onAutoSegment = useCallback(() => {
     editLyricLines((draft) => {
       draft.lyricLines = segmentLyricLines(draft.lyricLines, segmentationConfig);
@@ -151,58 +173,46 @@ function ToolMenu() {
 
     setConfirmDialog({
       open: true,
-      title: t('confirmDialog.syncLineTimestamps.title', '确认同步行时间戳'),
-      description: t(
-        'confirmDialog.syncLineTimestamps.description',
-        '此操作将根据每行单词的时间戳自动同步所有行的起始和结束时间为第一个和最后一个音节的开始和结束时间。确定要继续吗？'
-      ),
+      title: '确认同步行时间戳',
+      description:
+        '此操作将根据每行单词的时间戳自动同步所有行的起始和结束时间为第一个和最后一个音节的开始和结束时间。确定要继续吗？',
       onConfirm: action,
     });
-  }, [editLyricLines, setConfirmDialog, t]);
+  }, [editLyricLines, setConfirmDialog]);
 
   const onReduceStutter = useCallback(() => {
-    store.set(reduceStutterDialogAtom, { open: true });
-  }, [store]);
+    setReduceStutter({ open: true });
+  }, [setReduceStutter]);
 
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
         <button type="button" className={triggerClass}>
-          {t('topBar.menu.tool', '工具')}
+          工具
         </button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger>
-            {t('topBar.menu.segmentationTools', '分词')}
-          </DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent>
-            <DropdownMenu.Item onSelect={onAutoSegment}>
-              {t('topBar.menu.autoSegment', '自动分词')}
-            </DropdownMenu.Item>
-            <DropdownMenu.Item onSelect={() => setAdvancedSegmentation(true)}>
-              {t('topBar.menu.advancedSegment', '高级分词...')}
-            </DropdownMenu.Item>
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger>
-            {t('topBar.menu.timestampTools.index', '时间戳')}
-          </DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent>
-            <DropdownMenu.Item onSelect={onSyncLineTimestamps}>
-              {t('topBar.menu.timestampTools.syncLineTimestamps', '同步行时间戳')}
-            </DropdownMenu.Item>
-            <DropdownMenu.Item onSelect={onReduceStutter}>
-              {t('topBar.menu.timestampTools.reduceStutter', '消减卡顿')}
-            </DropdownMenu.Item>
-            <DropdownMenu.Item onSelect={() => setTimeShiftDialog(true)}>
-              {t('topBar.menu.timeShift', '平移时间...')}
-            </DropdownMenu.Item>
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>分词</DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem onSelect={onAutoSegment}>自动分词</DropdownMenuItem>
+            <DropdownMenuItem onSelect={() => setAdvancedSegmentation(true)}>
+              高级分词...
+            </DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>时间戳</DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem onSelect={onSyncLineTimestamps}>同步行时间戳</DropdownMenuItem>
+            <DropdownMenuItem onSelect={onReduceStutter}>消减卡顿</DropdownMenuItem>
+            <DropdownMenuItem onSelect={() => setTimeShiftDialog(true)}>
+              平移时间...
+            </DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }
 
diff --git a/frontend/src/components/review/EditorWorkbench.tsx b/frontend/src/components/review/EditorWorkbench.tsx
index d96f619..17d8892 100644
--- a/frontend/src/components/review/EditorWorkbench.tsx
+++ b/frontend/src/components/review/EditorWorkbench.tsx
@@ -1,4 +1,3 @@
-import { Theme } from '@radix-ui/themes';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { lazy, Suspense, useEffect, type ReactNode } from 'react';
@@ -12,11 +11,12 @@ import { AutosaveManager } from '@/editor/modules/project/autosave/AutosaveManag
 import { showTouchSyncPanelAtom } from '@/editor/modules/settings/states/sync.ts';
 import { ToolMode, toolModeAtom } from '@/editor/states/main.ts';
 import { MetadataEditor } from '@/editor/modules/project/modals/MetadataEditor.tsx';
+import { AdvancedSegmentationDialog } from '@/editor/modules/segmentation/components/AdvancedSegmentation.tsx';
+import { TimeShiftDialog } from '@/editor/modules/lyric-editor/tools/TimeShift.tsx';
+import { ConfirmDialog } from '@/editor/components/ConfirmDialog.tsx';
+import { ReduceStutterDialog } from '@/editor/components/ReduceStutterDialog.tsx';
 import { useMediaSession } from '@/editor/modules/audio/hooks/useMediaSession.ts';
 import { useAudioFeedback } from '@/editor/modules/audio/hooks/useAudioFeedback.ts';
-import { resolvedThemeAtom } from '@/atoms/theme';
-import '@/editor/i18n';
-import '@radix-ui/themes/styles.css';
 import './editor-theme.css';
 
 const LyricLinesView = lazy(() => import('@/editor/modules/lyric-editor/components'));
@@ -52,10 +52,11 @@ export function EditorWorkbench() {
       >
         <RibbonBar />
 
-        <div className="mt-2 flex min-h-0 flex-1 flex-row overflow-hidden">
+        <div className="flex min-h-0 flex-1 flex-row overflow-hidden">
+          {/* 侧边栏紧贴 RibbonBar：顶部的 Tab 选中指示条需要顶到内容区最上沿 */}
           <Sidebar />
 
-          <div className="min-w-0 flex-1 overflow-hidden">
+          <div className="mt-2 min-w-0 flex-1 overflow-hidden">
             <AnimatePresence mode="wait">
               <SuspensePlaceHolder key="edit">
                 <motion.div
@@ -93,32 +94,15 @@ export function EditorWorkbench() {
 
       <DragGhostRenderer />
       <MetadataEditor />
+      {/* 顶栏「工具」菜单几个菜单项只是置位 atom，缺了这些渲染者就会点了没反应 */}
+      <AdvancedSegmentationDialog />
+      <TimeShiftDialog />
+      <ConfirmDialog />
+      <ReduceStutterDialog />
     </EditorTheme>
   );
 }
 
-/**
- * 编辑器的 Radix Theme 根。
- *
- * 导出让 `LyricEditorPage` 能把它提到页面顶层，从而把顶栏也包进来 ——
- * 否则顶栏右侧的 `EditorMenuBar`（Radix `DropdownMenu`）在 Theme 外，
- * 样式会和工具栏里的其他 Radix 组件不一致。
- */
 export function EditorTheme({ children }: { children: ReactNode }) {
-  const resolvedTheme = useAtomValue(resolvedThemeAtom);
-  const isDark = resolvedTheme === 'dark';
-
-  return (
-    <Theme
-      className="editor-radix-theme"
-      appearance={isDark ? 'dark' : 'light'}
-      panelBackground="solid"
-      accentColor={isDark ? 'jade' : 'green'}
-      grayColor="slate"
-      radius="medium"
-      scaling="100%"
-    >
-      {children}
-    </Theme>
-  );
+  return <>{children}</>;
 }
diff --git a/frontend/src/components/review/LyricEditorHeader.tsx b/frontend/src/components/review/LyricEditorHeader.tsx
index b3d3a9f..88f1ea3 100644
--- a/frontend/src/components/review/LyricEditorHeader.tsx
+++ b/frontend/src/components/review/LyricEditorHeader.tsx
@@ -1,9 +1,16 @@
 import { useAtom } from 'jotai';
-import { ArrowLeft, Loader2, Save, Tags } from 'lucide-react';
+import { ArrowLeft, Check, ChevronDown, Loader2, Music, Save, Tags } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { ToolMode, toolModeAtom } from '@/editor/states/main.ts';
 import { metadataEditorDialogAtom } from '@/editor/states/dialogs.ts';
 import { EditorMenuBar } from '@/components/review/EditorTopMenu';
+import { UserMenu } from '@/components/UserMenu';
 import { cn } from '@/lib/utils';
 
 export interface EditorHeaderProps {
@@ -17,6 +24,59 @@ export interface EditorHeaderProps {
   saving: boolean;
 }
 
+/** 参考音频选择器 */
+function AudioSourceSelect({
+  sources,
+  audioIndex,
+  onAudioIndexChange,
+}: Pick<EditorHeaderProps, 'sources' | 'audioIndex' | 'onAudioIndexChange'>) {
+  if (sources.length <= 1) return null;
+
+  const current = sources[audioIndex] ?? sources[0];
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          title="切换参考音频"
+          className={cn(
+            'group flex h-8 max-w-56 items-center gap-1.5 rounded-md border border-input bg-card pl-2 pr-1.5',
+            'text-xs font-medium text-ink transition-colors hover:border-primary/60',
+            'focus-visible:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30',
+            'data-[state=open]:border-primary'
+          )}
+        >
+          <Music className="size-3.5 shrink-0 text-ink-3" />
+          <span className="shrink-0 text-ink-3">参考音频</span>
+          <span className="min-w-0 flex-1 truncate text-left">{current?.label ?? '未选择'}</span>
+          <ChevronDown
+            className="size-3.5 shrink-0 text-ink-3 transition-transform group-data-[state=open]:rotate-180"
+            aria-hidden="true"
+          />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="max-w-72">
+        {sources.map((source, index) => (
+          <DropdownMenuItem
+            key={source.key}
+            onSelect={() => onAudioIndexChange(index)}
+            className="gap-2"
+          >
+            <Check
+              className={cn('size-4 shrink-0 text-primary', index !== audioIndex && 'invisible')}
+              aria-hidden="true"
+            />
+            <span className="min-w-0 flex-1 truncate" title={source.label}>
+              {source.label}
+            </span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 function ToolModeSwitch() {
   const [toolMode, setToolMode] = useAtom(toolModeAtom);
 
@@ -83,6 +143,11 @@ export function LyricEditorHeader({
       </div>
 
       <div className="flex shrink-0 items-center gap-2">
+        <AudioSourceSelect
+          sources={sources}
+          audioIndex={audioIndex}
+          onAudioIndexChange={onAudioIndexChange}
+        />
         <ToolModeSwitch />
         <EditorMenuBar />
         {/* 分隔：菜单类操作与右侧的「元数据 / 提交」动作按钮区分开 */}
@@ -96,24 +161,11 @@ export function LyricEditorHeader({
           <Tags className="size-4" />
           元数据
         </Button>
-        {sources.length > 1 && (
-          <select
-            value={audioIndex}
-            onChange={(e) => onAudioIndexChange(Number(e.target.value))}
-            className="max-w-40 rounded border border-border bg-background px-2 py-1 text-xs"
-            title="切换参考音频"
-          >
-            {sources.map((s, i) => (
-              <option key={s.key} value={i}>
-                {s.label}
-              </option>
-            ))}
-          </select>
-        )}
         <Button size="sm" onClick={onSave} disabled={saving} title="提交审核结果（Enter）">
           {saving ? <Loader2 className="size-4 animate-spin" /> : <Save className="size-4" />}
           提交
         </Button>
+        <UserMenu />
       </div>
     </div>
   );
diff --git a/frontend/src/components/review/editor-theme.css b/frontend/src/components/review/editor-theme.css
index 69257bc..e911654 100644
--- a/frontend/src/components/review/editor-theme.css
+++ b/frontend/src/components/review/editor-theme.css
@@ -1,57 +1,4 @@
-.radix-themes.editor-radix-theme {
-  height: 100%;
-  min-height: 0;
-}
-
-body .rt-DialogOverlay {
-  position: fixed !important;
-  inset: 0 !important;
-  min-height: 0 !important;
-}
-
-body .rt-DialogOverlay {
-  --color-overlay: rgb(0 0 0 / 0.45);
-}
-
-body.editor-body:has(.dark),
-body.editor-body.dark {
-  --color-overlay: rgb(0 0 0 / 0.6);
-}
-
-body .rt-DialogOverlay[data-has-background='true'] {
-  background-color: transparent !important;
-}
-
-/* 兜底：不给data-has-background 也保持透明 */
-body .rt-DialogOverlay {
-  background-color: transparent !important;
-}
-
-body .rt-DialogOverlay::before,
-body .rt-DialogOverlay:where([data-state='open'])::before {
-  background-color: rgb(0 0 0 / 0.45) !important;
-}
-
-body.editor-body:has(.dark) .rt-DialogOverlay::before,
-body.editor-body.dark .rt-DialogOverlay::before,
-body.editor-body:has(.dark) .rt-DialogOverlay:where([data-state='open'])::before,
-body.editor-body.dark .rt-DialogOverlay:where([data-state='open'])::before {
-  background-color: rgb(0 0 0 / 0.6) !important;
-}
-
-body .rt-DialogOverlay,
-body .rt-DialogScroll,
-body .rt-DialogContent {
-  z-index: 400 !important;
-}
-
-body .rt-DialogContent .rt-ScrollAreaRoot {
-  min-height: 0 !important;
-  flex: 1 1 auto !important;
-}
-
-.radix-themes.editor-radix-theme,
-body.editor-body [data-accent-color] {
+body.editor-body {
   --accent-1: #fff5f6;
   --accent-2: #feeaec;
   --accent-3: #fbdde0;
@@ -85,8 +32,8 @@ body.editor-body [data-accent-color] {
   --accent-track: #fbdde0;
 }
 
-.radix-themes.editor-radix-theme:where(.dark, .dark-theme),
-body.editor-body [data-accent-color]:where(.dark, .dark-theme) {
+body.editor-body:has(.dark),
+body.editor-body.dark {
   --accent-1: #2a1418;
   --accent-2: #3a1a20;
   --accent-3: #4a2127;
diff --git a/frontend/src/components/ui/checkbox.tsx b/frontend/src/components/ui/checkbox.tsx
index 991fbf2..02c9d6b 100644
--- a/frontend/src/components/ui/checkbox.tsx
+++ b/frontend/src/components/ui/checkbox.tsx
@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+import { type ComponentProps, useEffect, useRef } from 'react';
 import { cn } from '@/lib/utils';
 
 interface CheckboxProps extends Omit<ComponentProps<'input'>, 'type' | 'checked' | 'onChange'> {
@@ -7,16 +7,27 @@ interface CheckboxProps extends Omit<ComponentProps<'input'>, 'type' | 'checked'
 }
 
 function Checkbox({ className, checked = false, onCheckedChange, ...props }: CheckboxProps) {
-  const isChecked = checked === true || checked === 'indeterminate';
+  const ref = useRef<HTMLInputElement>(null);
+  const isIndeterminate = checked === 'indeterminate';
+  const isChecked = checked === true || isIndeterminate;
+
+  // 原生 input 的 indeterminate 只能通过 DOM 属性设置，不能由 HTML 属性表达
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = isIndeterminate;
+  }, [isIndeterminate]);
+
   return (
     <input
+      ref={ref}
       type="checkbox"
       checked={isChecked}
       onChange={(e) => onCheckedChange?.(e.target.checked)}
       className={cn(
         'size-4 shrink-0 cursor-pointer appearance-none rounded border border-input bg-card transition-colors',
         'checked:border-primary checked:bg-primary',
+        'indeterminate:border-primary indeterminate:bg-primary',
         'checked:bg-[url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27white%27%3E%3Cpath%20d%3D%27M13.485%201.07L6.5%208.055%202.515%204.07%201%205.585l1.515%201.515L6.5%2011.385l5.985-5.985z%27%2F%3E%3C%2Fsvg%3E")] checked:bg-center checked:bg-no-repeat',
+        'indeterminate:bg-[url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27white%27%3E%3Crect%20x%3D%274%27%20y%3D%277%27%20width%3D%278%27%20height%3D%272%27%20rx%3D%271%27%2F%3E%3C%2Fsvg%3E")] indeterminate:bg-center indeterminate:bg-no-repeat',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
         'disabled:cursor-not-allowed disabled:opacity-50',
         className
diff --git a/frontend/src/components/ui/context-menu.tsx b/frontend/src/components/ui/context-menu.tsx
new file mode 100644
index 0000000..2c485d0
--- /dev/null
+++ b/frontend/src/components/ui/context-menu.tsx
@@ -0,0 +1,103 @@
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import type { ComponentProps } from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+function ContextMenuContent({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        className={cn(
+          'z-50 min-w-[8rem] overflow-hidden rounded-md border border-line bg-popover p-1 text-popover-foreground shadow-lg',
+          'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+          className
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Item>) {
+  return (
+    <ContextMenuPrimitive.Item
+      className={cn(
+        'relative flex cursor-default select-none items-center gap-2 rounded-sm px-3 py-2 text-sm text-ink-2 outline-none transition-colors',
+        'focus:bg-surface-2 focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        '[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-current',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      className={cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-2 pl-3 pr-8 text-sm text-ink-2 outline-none transition-colors',
+        'focus:bg-surface-2 focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        '[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-current',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <Check className="h-4 w-4 text-primary" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Label>) {
+  return (
+    <ContextMenuPrimitive.Label
+      className={cn('px-3 py-1.5 text-sm font-semibold text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      className={cn('-mx-1 my-1 h-px bg-line', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuLabel,
+  ContextMenuGroup,
+  ContextMenuSeparator,
+};
diff --git a/frontend/src/components/ui/hover-card.tsx b/frontend/src/components/ui/hover-card.tsx
new file mode 100644
index 0000000..4dea357
--- /dev/null
+++ b/frontend/src/components/ui/hover-card.tsx
@@ -0,0 +1,30 @@
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import type { ComponentProps } from 'react';
+import { cn } from '@/lib/utils';
+
+const HoverCard = HoverCardPrimitive.Root;
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+function HoverCardContent({
+  className,
+  align = 'center',
+  sideOffset = 6,
+  ...props
+}: ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal>
+      <HoverCardPrimitive.Content
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 w-64 rounded-md border border-line bg-popover p-4 text-popover-foreground shadow-lg outline-none',
+          'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  );
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/frontend/src/components/ui/kbd.tsx b/frontend/src/components/ui/kbd.tsx
new file mode 100644
index 0000000..fe93444
--- /dev/null
+++ b/frontend/src/components/ui/kbd.tsx
@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react';
+import { cn } from '@/lib/utils';
+
+/** 键位徽标：用于展示快捷键（如打轴键位速查） */
+function Kbd({ className, ...props }: ComponentProps<'kbd'>) {
+  return (
+    <kbd
+      className={cn(
+        'inline-flex h-5 min-w-5 select-none items-center justify-center rounded-sm border border-line bg-surface-2 px-1.5',
+        'font-mono text-[11px] font-medium leading-none text-ink-2',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Kbd };
diff --git a/frontend/src/components/ui/radio-group.tsx b/frontend/src/components/ui/radio-group.tsx
new file mode 100644
index 0000000..ec8f2e1
--- /dev/null
+++ b/frontend/src/components/ui/radio-group.tsx
@@ -0,0 +1,25 @@
+import type { ComponentProps } from 'react';
+import { cn } from '@/lib/utils';
+
+function RadioGroup({ className, ...props }: ComponentProps<'div'>) {
+  return <div role="radiogroup" className={cn('flex flex-col gap-1', className)} {...props} />;
+}
+
+/** 单选框：基于原生 input[type=radio] */
+function Radio({ className, ...props }: Omit<ComponentProps<'input'>, 'type'>) {
+  return (
+    <input
+      type="radio"
+      className={cn(
+        'size-4 shrink-0 cursor-pointer appearance-none rounded-full border border-input bg-card transition-colors',
+        'checked:border-[5px] checked:border-primary',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Radio, RadioGroup };
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
new file mode 100644
index 0000000..d8bb5dc
--- /dev/null
+++ b/frontend/src/components/ui/select.tsx
@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react';
+import { cn } from '@/lib/utils';
+
+/** 下拉选择 */
+function Select({ className, ...props }: ComponentProps<'select'>) {
+  return (
+    <select
+      className={cn(
+        'h-8 rounded-md border border-input bg-card px-2 text-sm text-foreground transition-colors',
+        'focus-visible:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Select };
diff --git a/frontend/src/components/ui/slider.tsx b/frontend/src/components/ui/slider.tsx
new file mode 100644
index 0000000..1588321
--- /dev/null
+++ b/frontend/src/components/ui/slider.tsx
@@ -0,0 +1,83 @@
+import type { ComponentProps, CSSProperties } from 'react';
+import { cn } from '@/lib/utils';
+
+interface SliderProps extends Omit<ComponentProps<'input'>, 'type' | 'value' | 'onChange'> {
+  value: number;
+  onValueChange?: (value: number) => void;
+  orientation?: 'horizontal' | 'vertical';
+  trackColor?: string;
+}
+
+/** 轨道粗细 */
+const TRACK_THICKNESS = 6;
+/** 滑块圆点直径 */
+const THUMB_SIZE = 12;
+
+function Slider({
+  className,
+  value,
+  onValueChange,
+  orientation = 'horizontal',
+  trackColor,
+  style,
+  ...props
+}: SliderProps) {
+  const isVertical = orientation === 'vertical';
+  const color = trackColor ?? 'var(--amll-muted)';
+
+  const inset = THUMB_SIZE / 2;
+  const trackStyle: CSSProperties = isVertical
+    ? {
+        top: `${inset}px`,
+        bottom: `${inset}px`,
+        left: '50%',
+        width: `${TRACK_THICKNESS}px`,
+        transform: 'translateX(-50%)',
+        background: color,
+      }
+    : {
+        left: `${inset}px`,
+        right: `${inset}px`,
+        top: '50%',
+        height: `${TRACK_THICKNESS}px`,
+        transform: 'translateY(-50%)',
+        background: color,
+      };
+
+  return (
+    <span
+      // 轨道容器
+      className={cn(
+        'relative inline-flex shrink-0 items-center justify-center',
+        isVertical ? 'h-full w-4' : 'h-4 w-full',
+        className
+      )}
+      style={style}
+    >
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute rounded-full"
+        style={trackStyle}
+      />
+      <input
+        type="range"
+        value={value}
+        onChange={(e) => onValueChange?.(e.target.valueAsNumber)}
+        className={cn(
+          // input 铺满外层容器
+          'absolute inset-0 size-full bg-transparent',
+          isVertical && '[writing-mode:vertical-lr] [direction:rtl]',
+          'cursor-pointer appearance-none accent-primary',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          // 滑块头
+          '[&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:shadow',
+          '[&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary'
+        )}
+        {...props}
+      />
+    </span>
+  );
+}
+
+export { Slider };
diff --git a/frontend/src/editor/components/ConfirmDialog.tsx b/frontend/src/editor/components/ConfirmDialog.tsx
new file mode 100644
index 0000000..0fea8ab
--- /dev/null
+++ b/frontend/src/editor/components/ConfirmDialog.tsx
@@ -0,0 +1,64 @@
+import { useAtom } from 'jotai';
+import { useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { confirmDialogAtom } from '$/states/dialogs.ts';
+
+export function ConfirmDialog() {
+  const [state, setState] = useAtom(confirmDialogAtom);
+  /** 标记本次关闭是「确认」触发的，避免同时回调 `onCancel` */
+  const confirmedRef = useRef(false);
+
+  const close = () => setState((prev) => ({ ...prev, open: false }));
+
+  const handleConfirm = () => {
+    const run = state.onConfirm;
+    confirmedRef.current = true;
+    // 先收起对话框再执行，与原生确认框一致，避免执行期间 UI 卡在弹窗上
+    close();
+    // 可能是异步任务（打开文件 / 恢复历史），错误由调用方自行处理
+    void run?.();
+  };
+
+  const handleCancel = () => {
+    state.onCancel?.();
+    close();
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (open) return;
+    if (confirmedRef.current) {
+      confirmedRef.current = false;
+      return;
+    }
+    handleCancel();
+  };
+
+  return (
+    <Dialog open={state.open} onOpenChange={handleOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>{state.title}</DialogTitle>
+          {state.description ? (
+            <DialogDescription className="whitespace-pre-wrap">
+              {state.description}
+            </DialogDescription>
+          ) : null}
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={handleCancel}>
+            取消
+          </Button>
+          <Button onClick={handleConfirm}>确定</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/editor/components/KeyBinding/index.tsx b/frontend/src/editor/components/KeyBinding/index.tsx
index d199c69..3787ace 100644
--- a/frontend/src/editor/components/KeyBinding/index.tsx
+++ b/frontend/src/editor/components/KeyBinding/index.tsx
@@ -1,6 +1,6 @@
-import { Kbd } from '@radix-ui/themes';
 import { useAtomValue } from 'jotai';
 import type { FC } from 'react';
+import { Kbd } from '@/components/ui/kbd';
 import { formatKeyBindings, type useKeyBindingAtom } from '$/utils/keybindings.ts';
 
 /**
diff --git a/frontend/src/editor/components/MasterDetail/index.tsx b/frontend/src/editor/components/MasterDetail/index.tsx
index a5479a0..7f0945b 100644
--- a/frontend/src/editor/components/MasterDetail/index.tsx
+++ b/frontend/src/editor/components/MasterDetail/index.tsx
@@ -1,6 +1,6 @@
-import { DocumentRegular } from '@fluentui/react-icons';
-import { Box, Flex, Heading, ScrollArea, Text } from '@radix-ui/themes';
+import { FileText } from 'lucide-react';
 import type { ReactNode } from 'react';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import styles from './index.module.css';
 
 /**
@@ -14,25 +14,23 @@ export const MasterDetailLayout = ({
   master: ReactNode;
   detail: ReactNode;
 }) => (
-  <Flex flexGrow="1" className={styles.layout}>
+  <div className={`flex flex-1 ${styles.layout}`}>
     {master}
-    <Box flexGrow="1" className={styles.detail}>
-      {detail}
-    </Box>
-  </Flex>
+    <div className={`flex-1 ${styles.detail}`}>{detail}</div>
+  </div>
 );
 
 export const MasterColumn = ({ title, children }: { title: ReactNode; children: ReactNode }) => (
-  <Flex direction="column" className={styles.master}>
-    <Flex p="4" align="center" justify="between" className={styles.masterHeader}>
-      <Heading size="3">{title}</Heading>
-    </Flex>
-    <Box flexGrow="1" className={styles.masterBody}>
-      <ScrollArea type="auto" scrollbars="vertical" style={{ height: '100%' }}>
-        <Flex direction="column">{children}</Flex>
+  <div className={`flex flex-col ${styles.master}`}>
+    <div className={`flex items-center justify-between p-4 ${styles.masterHeader}`}>
+      <div className="text-base font-medium">{title}</div>
+    </div>
+    <div className={`flex-1 ${styles.masterBody}`}>
+      <ScrollArea className="h-full">
+        <div className="flex flex-col">{children}</div>
       </ScrollArea>
-    </Box>
-  </Flex>
+    </div>
+  </div>
 );
 
 export const MasterListItem = ({
@@ -44,7 +42,7 @@ export const MasterListItem = ({
   onSelect: () => void;
   children: ReactNode;
 }) => (
-  <Box
+  <div
     className={styles.masterItem}
     data-selected={selected}
     onClick={onSelect}
@@ -58,20 +56,18 @@ export const MasterListItem = ({
     tabIndex={0}
   >
     {children}
-  </Box>
+  </div>
 );
 
 export const MasterListEmpty = ({ children }: { children: ReactNode }) => (
-  <Box p="4">
-    <Text size="2" color="gray" align="center">
-      {children}
-    </Text>
-  </Box>
+  <div className="p-4">
+    <p className="text-center text-sm text-ink-3">{children}</p>
+  </div>
 );
 
 export const DetailPlaceholder = ({ children }: { children: ReactNode }) => (
-  <Flex align="center" justify="center" direction="column" className={styles.placeholder}>
-    <DocumentRegular fontSize={48} />
-    <Text mt="2">{children}</Text>
-  </Flex>
+  <div className={`flex flex-col items-center justify-center ${styles.placeholder}`}>
+    <FileText size={48} strokeWidth={1.5} />
+    <p className="mt-2">{children}</p>
+  </div>
 );
diff --git a/frontend/src/editor/components/Menus/lyric-line-menu.tsx b/frontend/src/editor/components/Menus/lyric-line-menu.tsx
index 08398b4..fad547e 100644
--- a/frontend/src/editor/components/Menus/lyric-line-menu.tsx
+++ b/frontend/src/editor/components/Menus/lyric-line-menu.tsx
@@ -1,16 +1,17 @@
-import { ContextMenu } from '@radix-ui/themes';
 import { atom, useAtomValue } from 'jotai';
 import { useSetImmerAtom } from 'jotai-immer';
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
+import {
+  ContextMenuCheckboxItem,
+  ContextMenuItem,
+  ContextMenuSeparator,
+} from '@/components/ui/context-menu';
 import { lyricLinesAtom, selectedLinesAtom } from '$/states/main';
 import { type LyricLine, newLyricLine, newLyricWord } from '$/types/ttml';
 
 const selectedLinesSizeAtom = atom((get) => get(selectedLinesAtom).size);
 
 export const LyricLineMenu = ({ lineIndex }: { lineIndex: number }) => {
-  const { t } = useTranslation();
-
   const selectedLinesSize = useAtomValue(selectedLinesSizeAtom);
   const selectedLines = useAtomValue(selectedLinesAtom);
   const editLyricLines = useSetImmerAtom(lyricLinesAtom);
@@ -56,41 +57,38 @@ export const LyricLineMenu = ({ lineIndex }: { lineIndex: number }) => {
 
   return (
     <>
-      <ContextMenu.CheckboxItem checked={Bgchecked} onCheckedChange={bgOnCheck}>
-        {t('contextMenu.bgLyric', '背景歌词')}
-      </ContextMenu.CheckboxItem>
-      <ContextMenu.CheckboxItem checked={DuetChecked} onCheckedChange={duetOnCheck}>
-        {t('contextMenu.duetLyric', '对唱歌词')}
-      </ContextMenu.CheckboxItem>
-      <ContextMenu.Separator />
-      <ContextMenu.Item
+      <ContextMenuCheckboxItem checked={Bgchecked} onCheckedChange={bgOnCheck}>
+        背景歌词
+      </ContextMenuCheckboxItem>
+      <ContextMenuCheckboxItem checked={DuetChecked} onCheckedChange={duetOnCheck}>
+        对唱歌词
+      </ContextMenuCheckboxItem>
+      <ContextMenuSeparator />
+      <ContextMenuItem
         onSelect={() => {
           editLyricLines((state) => {
             state.lyricLines.splice(lineIndex, 0, newLyricLine());
           });
         }}
       >
-        {t('contextMenu.insertLineBefore', '在前插入空行')}
-      </ContextMenu.Item>
-      <ContextMenu.Item
+        在前插入空行
+      </ContextMenuItem>
+      <ContextMenuItem
         onSelect={() => {
           editLyricLines((state) => {
             state.lyricLines.splice(lineIndex + 1, 0, newLyricLine());
           });
         }}
       >
-        {t('contextMenu.insertLineAfter', '在后插入空行')}
-      </ContextMenu.Item>
-      <ContextMenu.Item onSelect={copyLines} disabled={selectedLinesSize === 0}>
-        {t('contextMenu.copyLine', {
-          count: selectedLinesSize,
-          defaultValue: '复制行',
-        })}
-      </ContextMenu.Item>
-      <ContextMenu.Item onSelect={combineLines} disabled={!combineEnabled}>
-        {t('contextMenu.combineLine', '合并行')}
-      </ContextMenu.Item>
-      <ContextMenu.Item
+        在后插入空行
+      </ContextMenuItem>
+      <ContextMenuItem onSelect={copyLines} disabled={selectedLinesSize === 0}>
+        复制行
+      </ContextMenuItem>
+      <ContextMenuItem onSelect={combineLines} disabled={!combineEnabled}>
+        合并行
+      </ContextMenuItem>
+      <ContextMenuItem
         onSelect={() => {
           editLyricLines((state) => {
             if (selectedLinesSize === 0) {
@@ -101,11 +99,8 @@ export const LyricLineMenu = ({ lineIndex }: { lineIndex: number }) => {
           });
         }}
       >
-        {t('contextMenu.deleteLine', {
-          count: selectedLinesSize,
-          defaultValue: '删除行',
-        })}
-      </ContextMenu.Item>
+        删除行
+      </ContextMenuItem>
     </>
   );
 
diff --git a/frontend/src/editor/components/ReduceStutterDialog.tsx b/frontend/src/editor/components/ReduceStutterDialog.tsx
new file mode 100644
index 0000000..616746a
--- /dev/null
+++ b/frontend/src/editor/components/ReduceStutterDialog.tsx
@@ -0,0 +1,181 @@
+import { useAtom, useAtomValue } from 'jotai';
+import { useSetImmerAtom } from 'jotai-immer';
+import { Play } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { msToTimestamp } from '@/lib/format';
+import { audioEngine } from '$/modules/audio/audio-engine';
+import { reduceStutterDialogAtom } from '$/states/dialogs.ts';
+import { lyricLinesAtom } from '$/states/main.ts';
+import type { LyricWord } from '$/types/ttml';
+
+/** 音节间隔小于该值（ms）视为卡顿 */
+const STUTTER_GAP_THRESHOLD = 100;
+
+interface StutterPair {
+  lineIndex: number;
+  wordIndex: number;
+  nextWordIndex: number;
+  prevWord: LyricWord;
+  nextWord: LyricWord;
+  gap: number;
+}
+
+export function ReduceStutterDialog() {
+  const [open, setOpen] = useAtom(reduceStutterDialogAtom);
+  const lyricLines = useAtomValue(lyricLinesAtom);
+  const setLyricLines = useSetImmerAtom(lyricLinesAtom);
+  const [selectedPairs, setSelectedPairs] = useState<Set<string>>(new Set());
+
+  const stutterPairs = useMemo<StutterPair[]>(() => {
+    const pairs: StutterPair[] = [];
+    lyricLines.lyricLines.forEach((line, lineIndex) => {
+      // 过滤掉纯空白音节，只比较有实际内容的音节
+      const nonSpaceWords = line.words.filter((w) => w.word.trim().length > 0);
+      for (let i = 0; i < nonSpaceWords.length - 1; i++) {
+        const currentWord = nonSpaceWords[i];
+        const nextWord = nonSpaceWords[i + 1];
+        if (!currentWord || !nextWord) continue;
+
+        const gap = nextWord.startTime - currentWord.endTime;
+        if (gap > 0 && gap < STUTTER_GAP_THRESHOLD) {
+          const wordIndex = line.words.findIndex((w) => w.id === currentWord.id);
+          const nextWordIndex = line.words.findIndex((w) => w.id === nextWord.id);
+          pairs.push({
+            lineIndex,
+            wordIndex,
+            nextWordIndex,
+            prevWord: currentWord,
+            nextWord,
+            gap,
+          });
+        }
+      }
+    });
+    return pairs;
+  }, [lyricLines.lyricLines]);
+
+  // 打开时默认全选所有卡顿项
+  useEffect(() => {
+    if (open.open) {
+      setSelectedPairs(new Set(stutterPairs.map((_, index) => index.toString())));
+    }
+  }, [open.open, stutterPairs]);
+
+  const togglePair = (index: string) => {
+    setSelectedPairs((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  };
+
+  const handleConfirm = () => {
+    const selectedIndices = Array.from(selectedPairs).map((id) => parseInt(id, 10));
+
+    setLyricLines((draft) => {
+      selectedIndices.forEach((pairIndex) => {
+        const pair = stutterPairs[pairIndex];
+        if (!pair) return;
+
+        const line = draft.lyricLines[pair.lineIndex];
+        if (!line) return;
+
+        const prevWord = line.words[pair.wordIndex];
+        const nextWord = line.words[pair.nextWordIndex];
+        if (!prevWord || !nextWord) return;
+
+        // 把两个音节的边界对齐到中间时间点
+        const middleTime = Math.round((prevWord.endTime + nextWord.startTime) / 2);
+        prevWord.endTime = middleTime;
+        nextWord.startTime = middleTime;
+      });
+    });
+
+    setOpen({ open: false });
+  };
+
+  const handleClose = () => setOpen({ open: false });
+
+  const handlePlay = (pair: StutterPair) => {
+    // 播放前一个音节开始前 100ms 到后一个音节结束后 100ms
+    const startTime = Math.max(0, pair.prevWord.startTime - 100) / 1000;
+    const endTime = (pair.nextWord.endTime + 100) / 1000;
+    audioEngine.auditionRange(startTime, endTime);
+  };
+
+  return (
+    <Dialog open={open.open} onOpenChange={(v) => setOpen({ open: v })}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>消减卡顿</DialogTitle>
+          <DialogDescription>
+            检测到以下音节间隔小于 {STUTTER_GAP_THRESHOLD}ms，选中项将被调整为中间时间点
+          </DialogDescription>
+        </DialogHeader>
+
+        {stutterPairs.length === 0 ? (
+          <div className="py-6 text-center text-sm text-ink-3">未检测到卡顿</div>
+        ) : (
+          <ScrollArea className="max-h-96">
+            <div className="flex flex-col gap-2 pr-3">
+              {stutterPairs.map((pair, index) => (
+                <div
+                  key={`${pair.lineIndex}-${pair.wordIndex}`}
+                  className="flex items-center gap-2 rounded-md bg-surface-2 p-2"
+                >
+                  <Checkbox
+                    checked={selectedPairs.has(index.toString())}
+                    onCheckedChange={() => togglePair(index.toString())}
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="size-7 shrink-0"
+                    title="播放"
+                    onClick={() => handlePlay(pair)}
+                  >
+                    <Play className="size-3.5" />
+                  </Button>
+                  <span className="min-w-0 flex-1 truncate font-mono text-xs text-ink-2">
+                    {pair.prevWord.word} [{msToTimestamp(pair.prevWord.startTime)}~
+                    {msToTimestamp(pair.prevWord.endTime)}] - {pair.nextWord.word} [
+                    {msToTimestamp(pair.nextWord.startTime)}~{msToTimestamp(pair.nextWord.endTime)}]
+                    : {pair.gap} ms
+                  </span>
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+        )}
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose}>
+            取消
+          </Button>
+          <Button
+            onClick={handleConfirm}
+            disabled={stutterPairs.length === 0 || selectedPairs.size === 0}
+          >
+            确认
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/editor/components/RibbonBar/common.tsx b/frontend/src/editor/components/RibbonBar/common.tsx
index d20b911..6c596cd 100644
--- a/frontend/src/editor/components/RibbonBar/common.tsx
+++ b/frontend/src/editor/components/RibbonBar/common.tsx
@@ -9,7 +9,6 @@
  * https://github.com/amll-dev/amll-ttml-tool/blob/main/LICENSE
  */
 
-import { Flex, Separator, Text } from '@radix-ui/themes';
 import { motion } from 'framer-motion';
 import {
   type FC,
@@ -22,26 +21,11 @@ import {
 
 export const RibbonSection: FC<PropsWithChildren<{ label: string }>> = ({ children, label }) => (
   <>
-    <Flex
-      direction="column"
-      gap="1"
-      flexShrink="0"
-      style={{
-        alignSelf: 'stretch',
-      }}
-    >
-      <Flex flexGrow="1" align="center" justify="center">
-        {children}
-      </Flex>
-      <Text align="center" wrap="nowrap" color="gray" size="1">
-        {label}
-      </Text>
-    </Flex>
-    <Separator
-      orientation="vertical"
-      size="4"
-      style={{ height: 'unset', alignSelf: 'stretch', minWidth: '1px' }}
-    />
+    <div className="flex shrink-0 flex-col gap-1 self-stretch">
+      <div className="flex flex-1 items-center justify-center">{children}</div>
+      <span className="whitespace-nowrap text-center text-xs leading-none text-ink-3">{label}</span>
+    </div>
+    <div aria-hidden className="w-px shrink-0 self-stretch bg-line" />
   </>
 );
 
@@ -59,28 +43,16 @@ export const RibbonFrame = forwardRef<HTMLDivElement, PropsWithChildren>(({ chil
   }, []);
 
   return (
-    <Flex
-      p="3"
-      direction="row"
-      gap="3"
-      align="center"
-      style={{
-        overflowX: 'auto',
-        overflowY: 'visible',
-        height: '100%',
-      }}
-      asChild
+    <motion.div
+      initial={{ x: 10, opacity: 0 }}
+      animate={{ x: 0, opacity: 1 }}
+      exit={{ x: -10, opacity: 0 }}
+      layout
+      ref={frameRef}
+      onWheel={handleWheel}
+      className="flex h-full flex-row items-center gap-3 overflow-x-auto overflow-y-visible p-3"
     >
-      <motion.div
-        initial={{ x: 10, opacity: 0 }}
-        animate={{ x: 0, opacity: 1 }}
-        exit={{ x: -10, opacity: 0 }}
-        layout
-        ref={frameRef}
-        onWheel={handleWheel}
-      >
-        {children}
-      </motion.div>
-    </Flex>
+      {children}
+    </motion.div>
   );
 });
diff --git a/frontend/src/editor/components/RibbonBar/edit-mode.tsx b/frontend/src/editor/components/RibbonBar/edit-mode.tsx
index 8b76830..84b4ab1 100644
--- a/frontend/src/editor/components/RibbonBar/edit-mode.tsx
+++ b/frontend/src/editor/components/RibbonBar/edit-mode.tsx
@@ -9,22 +9,16 @@
  * https://github.com/amll-dev/amll-ttml-tool/blob/main/LICENSE
  */
 
-import { Add16Regular } from '@fluentui/react-icons';
-import {
-  Button,
-  Checkbox,
-  Flex,
-  Grid,
-  IconButton,
-  RadioGroup,
-  Select,
-  Text,
-  TextField,
-  Tooltip,
-} from '@radix-ui/themes';
 import type { Draft } from 'immer';
 import { atom, useAtom, useAtomValue, useSetAtom, useStore } from 'jotai';
 import { useSetImmerAtom } from 'jotai-immer';
+import { Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { Radio, RadioGroup } from '@/components/ui/radio-group';
+import { Select } from '@/components/ui/select';
+import { cn } from '@/lib/utils';
 import {
   type FC,
   forwardRef,
@@ -36,7 +30,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useTranslation } from 'react-i18next';
 import { I18nEditor } from '$/modules/lyric-editor/tools/i18nEditor.tsx';
 import {
   LayoutMode,
@@ -89,14 +82,14 @@ function EditField<
   const [fieldInput, setFieldInput] = useState<string | undefined>(undefined);
   const [fieldPlaceholder, setFieldPlaceholder] = useState<string>('');
   const [durationInputInvalid, setDurationInputInvalid] = useState(false);
-  const [showDurationInput, setShowDurationInput] = useAtom(showEndTimeAsDurationAtom);
+  /** 时间字段固定按「结束时间」展示，不再提供「持续时间」切换 */
+  const showDurationInput = useAtomValue(showEndTimeAsDurationAtom);
   const itemAtom = useMemo(
     () => (isWordField ? selectedWordsAtom : selectedLinesAtom),
     [isWordField]
   );
 
   const editLyricLines = useSetImmerAtom(lyricLinesAtom);
-  const { t } = useTranslation();
   const setEditingTimeField = useSetAtom(editingTimeFieldAtom);
 
   const [requestFocus, setRequestFocus] = useAtom(requestFocusAtom);
@@ -388,7 +381,7 @@ function EditField<
     if (fieldName === 'endTime' && showDurationInput) {
       if (durationValue === MULTIPLE_VALUES) {
         setFieldInput('');
-        setFieldPlaceholder(t('ribbonBar.editMode.multipleValues', '多个值...'));
+        setFieldPlaceholder('多个值...');
         return;
       }
       if (typeof durationValue === 'number') {
@@ -402,34 +395,22 @@ function EditField<
     }
     if (currentValue === MULTIPLE_VALUES) {
       setFieldInput('');
-      setFieldPlaceholder(t('ribbonBar.editMode.multipleValues', '多个值...'));
+      setFieldPlaceholder('多个值...');
       return;
     }
     setFieldInput(currentValue);
     setFieldPlaceholder('');
-  }, [currentValue, durationValue, fieldName, showDurationInput, t]);
+  }, [currentValue, durationValue, fieldName, showDurationInput]);
+
+  const invalid = durationInputInvalid || hasError;
 
   return (
     <>
-      {fieldName === 'endTime' ? (
-        <Button
-          size="1"
-          variant="ghost"
-          onClick={() => setShowDurationInput((v) => !v)}
-          style={{ justifyContent: 'flex-start' }}
-        >
-          {showDurationInput ? t('ribbonBar.editMode.duration', '持续时间') : label}
-        </Button>
-      ) : (
-        <Text wrap="nowrap" size="1">
-          {label}
-        </Text>
-      )}
-      <TextField.Root
+      <span className="flex h-7 w-16 items-center whitespace-nowrap text-xs">{label}</span>
+      <Input
         ref={inputRef}
-        size="1"
-        color={durationInputInvalid || hasError ? 'red' : undefined}
-        variant={durationInputInvalid || hasError ? 'soft' : undefined}
+        aria-invalid={invalid}
+        className={cn('h-7 text-xs', invalid && 'border-error bg-error/10')}
         style={{ width: '8em', ...textFieldStyle }}
         value={fieldInput ?? ''}
         placeholder={fieldPlaceholder}
@@ -519,37 +500,14 @@ function CheckboxField<
   const isDisabledAtom = useMemo(() => atom((get) => get(itemAtom).size === 0), [itemAtom]);
   const isDisabledBase = useAtomValue(isDisabledAtom);
 
-  // 对于 isDuet 字段，检查选中的行是否设置了 agent
-  const hasAgentAtom = useMemo(
-    () =>
-      atom((get) => {
-        if (fieldName !== 'isDuet' || isWordField) return false;
-        const selectedItems = get(itemAtom);
-        const lyricLines = get(lyricLinesAtom);
-        if (selectedItems.size === 0) return false;
-        const selectedLines = selectedItems as Set<string>;
-        for (const line of lyricLines.lyricLines) {
-          if (selectedLines.has(line.id)) {
-            // 如果任何一个选中的行设置了 agent，则禁用 checkbox
-            if (line.agent) {
-              return true;
-            }
-          }
-        }
-        return false;
-      }),
-    [fieldName, isWordField, itemAtom]
-  );
-  const hasAgent = useAtomValue(hasAgentAtom);
-
-  const isDisabled = isDisabledBase || hasAgent;
+  const isDisabled = isDisabledBase;
   const checkboxId = useId();
 
   return (
     <>
-      <Text wrap="nowrap" size="1">
-        <label htmlFor={checkboxId}>{label}</label>
-      </Text>
+      <label htmlFor={checkboxId} className="whitespace-nowrap text-xs">
+        {label}
+      </label>
       <Checkbox
         disabled={isDisabled}
         id={checkboxId}
@@ -561,7 +519,6 @@ function CheckboxField<
             : defaultValue
         }
         onCheckedChange={(value) => {
-          if (value === 'indeterminate') return;
           editLyricLines((state: Draft<TTMLLyric>) => {
             const selectedItems = store.get(itemAtom);
             for (const line of state.lyricLines) {
@@ -587,21 +544,28 @@ function CheckboxField<
 
 function EditModeField({ simpleModeLabel = '简单模式', advanceModeLabel = '高级模式' }) {
   const [layoutMode, setLayoutMode] = useAtom(layoutModeAtom);
+  const name = useId();
   return (
-    <RadioGroup.Root
-      value={layoutMode}
-      onValueChange={(v) => setLayoutMode(v as LayoutMode)}
-      size="1"
-    >
-      <Flex gapY="3" direction="column">
-        <Text wrap="nowrap" size="1">
-          <RadioGroup.Item value={LayoutMode.Simple}>{simpleModeLabel}</RadioGroup.Item>
-        </Text>
-        <Text wrap="nowrap" size="1">
-          <RadioGroup.Item value={LayoutMode.Advance}>{advanceModeLabel}</RadioGroup.Item>
-        </Text>
-      </Flex>
-    </RadioGroup.Root>
+    <RadioGroup className="gap-3">
+      <label className="flex items-center gap-2 whitespace-nowrap text-xs">
+        <Radio
+          name={name}
+          value={LayoutMode.Simple}
+          checked={layoutMode === LayoutMode.Simple}
+          onChange={() => setLayoutMode(LayoutMode.Simple)}
+        />
+        {simpleModeLabel}
+      </label>
+      <label className="flex items-center gap-2 whitespace-nowrap text-xs">
+        <Radio
+          name={name}
+          value={LayoutMode.Advance}
+          checked={layoutMode === LayoutMode.Advance}
+          onChange={() => setLayoutMode(LayoutMode.Advance)}
+        />
+        {advanceModeLabel}
+      </label>
+    </RadioGroup>
   );
 }
 
@@ -623,7 +587,6 @@ const SONG_PART_OPTIONS = [
 const NONE_VALUE = '__none__';
 
 const SongPartField: FC = () => {
-  const { t } = useTranslation();
   const selectedLines = useAtomValue(selectedLinesAtom);
   const lyricLines = useAtomValue(lyricLinesAtom);
   const editLyricLines = useSetImmerAtom(lyricLinesAtom);
@@ -673,70 +636,68 @@ const SongPartField: FC = () => {
 
   return (
     <>
-      <Text size="1" id={songPartLabelId}>
-        {t('ribbonBar.editMode.songPart', 'Song Part')}
-      </Text>
-      <Select.Root value={displayValue} onValueChange={handleSongPartChange} size="1">
-        <Select.Trigger
-          placeholder={
+      <label className="whitespace-nowrap text-xs" id={songPartLabelId}>
+        Song Part
+      </label>
+      <div className="flex items-center gap-1">
+        <Select
+          value={displayValue}
+          onChange={(e) => {
+            if (e.target.value === '__add_custom__') {
+              setIsAddingCustom(true);
+              return;
+            }
+            handleSongPartChange(e.target.value);
+          }}
+          disabled={selectedLines.size === 0}
+          className="h-7 min-w-[6em] text-xs"
+          aria-labelledby={songPartLabelId}
+          title={
             selectedLines.size === 0
-              ? t('ribbonBar.editMode.noSelection', 'No selection')
+              ? 'No selection'
               : currentSongPart === undefined
-                ? t('ribbonBar.editMode.multipleValues', 'Multiple values...')
-                : t('ribbonBar.editMode.none', 'None')
+                ? 'Multiple values...'
+                : 'None'
           }
-          disabled={selectedLines.size === 0}
-          style={{ minWidth: '6em' }}
-          aria-labelledby={songPartLabelId}
-        />
-        <Select.Content>
-          <Select.Item value={NONE_VALUE}>{t('ribbonBar.editMode.none', 'None')}</Select.Item>
+        >
+          <option value={NONE_VALUE}>None</option>
           {SONG_PART_OPTIONS.map((option) => (
-            <Select.Item key={option.value} value={option.value}>
+            <option key={option.value} value={option.value}>
               {option.label}
-            </Select.Item>
+            </option>
           ))}
-          <Select.Separator />
-          {isAddingCustom ? (
-            <Flex gap="2" p="2" align="center">
-              <TextField.Root
-                size="1"
-                placeholder={t('ribbonBar.editMode.customPartPlaceholder', 'Custom part')}
-                value={customPart}
-                onChange={(e) => setCustomPart(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    handleAddCustomPart();
-                  }
-                }}
-                style={{ width: '120px' }}
-              />
-              <IconButton size="1" variant="soft" onClick={handleAddCustomPart}>
-                <Add16Regular />
-              </IconButton>
-            </Flex>
-          ) : (
-            <Select.Item
-              value="__add_custom__"
-              onClick={(e) => {
-                e.preventDefault();
-                setIsAddingCustom(true);
+          <option value="__add_custom__">＋ 自定义…</option>
+        </Select>
+        {isAddingCustom && (
+          <>
+            <Input
+              className="h-7 w-[120px] px-2 text-xs"
+              placeholder="Custom part"
+              value={customPart}
+              autoFocus
+              onChange={(e) => setCustomPart(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  handleAddCustomPart();
+                }
               }}
+            />
+            <Button
+              variant="secondary"
+              className="h-7 px-2"
+              onClick={handleAddCustomPart}
+              title="确认添加"
             >
-              <Flex gap="2" align="center">
-                <Add16Regular />
-                {t('ribbonBar.editMode.addCustomPart', 'Add custom')}
-              </Flex>
-            </Select.Item>
-          )}
-        </Select.Content>
-      </Select.Root>
+              <Plus className="size-4" />
+            </Button>
+          </>
+        )}
+      </div>
     </>
   );
 };
 
 const AgentField: FC = () => {
-  const { t } = useTranslation();
   const selectedLines = useAtomValue(selectedLinesAtom);
   const lyricLines = useAtomValue(lyricLinesAtom);
   const editLyricLines = useSetImmerAtom(lyricLinesAtom);
@@ -876,44 +837,41 @@ const AgentField: FC = () => {
 
   return (
     <>
-      <Text size="1" id={agentLabelId}>
-        {t('ribbonBar.editMode.agent', 'Agent')}
-      </Text>
-      <Select.Root
+      <label className="whitespace-nowrap text-xs" id={agentLabelId}>
+        Agent
+      </label>
+      <Select
         value={displayValue}
-        onValueChange={handleAgentChange}
-        size="1"
+        onChange={(e) => handleAgentChange(e.target.value)}
         disabled={isAgentSelectDisabled}
+        className="h-7 min-w-[6em] text-xs"
+        aria-labelledby={agentLabelId}
+        title={
+          !hasAgents
+            ? 'No agents'
+            : selectedLines.size === 0
+              ? 'No selection'
+              : hasSelectedBGLine
+                ? 'BG line selected'
+                : 'None'
+        }
       >
-        <Select.Trigger
-          placeholder={
-            !hasAgents
-              ? t('ribbonBar.editMode.noAgents', 'No agents')
-              : selectedLines.size === 0
-                ? t('ribbonBar.editMode.noSelection', 'No selection')
-                : hasSelectedBGLine
-                  ? t('ribbonBar.editMode.bgLineDisabled', 'BG line selected')
-                  : t('ribbonBar.editMode.none', 'None')
-          }
-          aria-labelledby={agentLabelId}
-        />
-        <Select.Content>
-          {agentOptions.map((option) =>
-            option.type === 'separator' ? (
-              <Select.Separator key={option.value} />
-            ) : (
-              <Tooltip
-                key={option.value}
-                content={option.names.join(', ') || option.value}
-                side="left"
-                align="center"
-              >
-                <Select.Item value={option.value}>{option.label}</Select.Item>
-              </Tooltip>
-            )
-          )}
-        </Select.Content>
-      </Select.Root>
+        {agentOptions.map((option) =>
+          option.type === 'separator' ? (
+            <option key={option.value} disabled>
+              ──────
+            </option>
+          ) : (
+            <option
+              key={option.value}
+              value={option.value}
+              title={option.names.join(', ') || option.value}
+            >
+              {option.label}
+            </option>
+          )
+        )}
+      </Select>
     </>
   );
 };
@@ -924,45 +882,38 @@ const AuxiliaryDisplayField: FC = () => {
   const [showWordRomanizationInput, setShowWordRomanizationInput] = useAtom(
     showWordRomanizationInputAtom
   );
-  const { t } = useTranslation();
 
   const idTranslation = useId();
   const idRomanization = useId();
   const idPerWord = useId();
 
   return (
-    <Grid columns="1fr auto" gapX="4" gapY="1" flexGrow="1" align="center">
-      <Text size="1" asChild>
-        <label htmlFor={idTranslation}>
-          {t('ribbonBar.editMode.showTranslation', '显示翻译行')}
-        </label>
-      </Text>
+    <div className="grid flex-1 grid-cols-[1fr_auto] items-center gap-x-4 gap-y-1">
+      <label htmlFor={idTranslation} className="whitespace-nowrap text-xs">
+        显示翻译行
+      </label>
       <Checkbox
         id={idTranslation}
         checked={showTranslation}
         onCheckedChange={(c) => setShowTranslation(Boolean(c))}
       />
-      <Text size="1" asChild>
-        <label htmlFor={idRomanization}>
-          {t('ribbonBar.editMode.showRomanization', '显示音译行')}
-        </label>
-      </Text>
+      <label htmlFor={idRomanization} className="whitespace-nowrap text-xs">
+        显示音译行
+      </label>
       <Checkbox
         id={idRomanization}
         checked={showRomanization}
         onCheckedChange={(c) => setShowRomanization(Boolean(c))}
       />
-      <Text size="1" asChild>
-        <label htmlFor={idPerWord}>
-          {t('ribbonBar.editMode.showWordRomanizationInput', '显示逐字音译')}
-        </label>
-      </Text>
+      <label htmlFor={idPerWord} className="whitespace-nowrap text-xs">
+        显示逐字音译
+      </label>
       <Checkbox
         id={idPerWord}
         checked={showWordRomanizationInput}
         onCheckedChange={(c) => setShowWordRomanizationInput(Boolean(c))}
       />
-    </Grid>
+    </div>
   );
 };
 
@@ -975,81 +926,80 @@ export const EditModeRibbonBar: FC = forwardRef<HTMLDivElement>((_props, ref) =>
   const idBpm = useId();
 
   const editLyricLines = useSetImmerAtom(lyricLinesAtom);
-  const { t } = useTranslation();
 
   return (
     <RibbonFrame ref={ref}>
-      <RibbonSection label={t('ribbonBar.editMode.new', '新建')}>
-        <Grid columns="1" gap="1" gapY="1" flexGrow="1" align="center">
+      <RibbonSection label="新建">
+        <div className="grid flex-1 grid-cols-1 items-center gap-1">
           <Button
-            size="1"
-            variant="soft"
+            variant="secondary"
+            className="h-7 px-2 text-xs"
             onClick={() =>
               editLyricLines((draft: Draft<TTMLLyric>) => {
                 draft.lyricLines.push(newLyricLine());
               })
             }
           >
-            {t('ribbonBar.editMode.lyricLine', '歌词行')}
+            歌词行
           </Button>
-        </Grid>
+        </div>
       </RibbonSection>
-      <RibbonSection label={t('ribbonBar.editMode.lineTiming', '行时间戳')}>
-        <Grid columns="0fr 1fr" gap="2" gapY="1" flexGrow="1" align="center">
+      <RibbonSection label="行时间戳">
+        <div className="grid flex-1 grid-cols-[4rem_1fr] items-center gap-x-2 gap-y-1">
           <EditField
-            label={t('ribbonBar.editMode.startTime', '起始时间')}
+            label="起始时间"
             fieldName="startTime"
             parser={parseTimespan}
             formatter={msToTimestamp}
           />
           <EditField
-            label={t('ribbonBar.editMode.endTime', '结束时间')}
+            label="结束时间"
             fieldName="endTime"
             parser={parseTimespan}
             formatter={msToTimestamp}
           />
-        </Grid>
+        </div>
       </RibbonSection>
-      <RibbonSection label={t('ribbonBar.editMode.lineProperties', '行属性')}>
-        <Grid columns="0fr 0fr" gap="4" gapY="1" flexGrow="1" align="center">
+      <RibbonSection label="行属性">
+        <div className="grid flex-1 grid-cols-[auto_auto] items-center gap-x-4 gap-y-1">
           <CheckboxField
-            label={t('ribbonBar.editMode.bgLyric', '背景歌词')}
+            label="背景歌词"
             defaultValue={false}
             isWordField={false}
             fieldName="isBG"
           />
           <CheckboxField
-            label={t('ribbonBar.editMode.duetLyric', '对唱歌词')}
+            label="对唱歌词"
             isWordField={false}
             fieldName="isDuet"
             defaultValue={false}
           />
           <CheckboxField
-            label={t('ribbonBar.editMode.ignoreSync', '忽略打轴')}
+            label="忽略打轴"
             isWordField={false}
             fieldName="ignoreSync"
             defaultValue={false}
           />
-        </Grid>
+        </div>
       </RibbonSection>
-      <RibbonSection label={t('ribbonBar.editMode.wordTiming', '词时间戳')}>
-        <Grid columns="0fr 1fr" gap="2" gapY="1" flexGrow="1" align="center">
+      <RibbonSection label="词时间戳">
+        <div className="grid flex-1 grid-cols-[4rem_1fr] items-center gap-x-2 gap-y-1">
           <EditField
-            label={t('ribbonBar.editMode.startTime', '起始时间')}
+            label="起始时间"
             fieldName="startTime"
             isWordField
             parser={parseTimespan}
             formatter={msToTimestamp}
           />
           <EditField
-            label={t('ribbonBar.editMode.endTime', '结束时间')}
+            label="结束时间"
             fieldName="endTime"
             isWordField
             parser={parseTimespan}
             formatter={msToTimestamp}
           />
           <EditField
-            label={t('ribbonBar.editMode.emptyBeatCount', '空拍数量')}
+            label="空拍数量"
             fieldName="emptyBeat"
             isWordField
             parser={(v) => {
@@ -1058,80 +1008,65 @@ export const EditModeRibbonBar: FC = forwardRef<HTMLDivElement>((_props, ref) =>
             }}
             formatter={String}
           />
-        </Grid>
+        </div>
       </RibbonSection>
-      <RibbonSection label={t('ribbonBar.editMode.wordProperties', '单词属性')}>
-        <Grid columns="0fr 1fr" gap="2" gapY="1" flexGrow="1" align="center">
+      <RibbonSection label="单词属性">
+        <div className="grid flex-1 grid-cols-[auto_1fr] items-center gap-x-2 gap-y-1">
           <EditField
-            label={t('ribbonBar.editMode.wordContent', '单词内容')}
+            label="单词内容"
             fieldName="word"
             isWordField
             parser={(v) => v}
             formatter={(v) => v}
           />
           <EditField
-            label={t('ribbonBar.editMode.romanWord', '单词音译')}
+            label="单词音译"
             fieldName="romanWord"
             isWordField
             parser={(v) => v}
             formatter={(v) => v || ''}
           />
-          <CheckboxField
-            label={t('ribbonBar.editMode.obscene', '不雅用语')}
-            isWordField
-            fieldName="obscene"
-            defaultValue={false}
-          />
-        </Grid>
+          <CheckboxField label="不雅用语" isWordField fieldName="obscene" defaultValue={false} />
+        </div>
       </RibbonSection>
-      <RibbonSection label={t('ribbonBar.editMode.secondaryContent', '次要内容')}>
-        <Grid columns="0fr 1fr" gap="2" gapY="1" flexGrow="1" align="center">
+      <RibbonSection label="次要内容">
+        <div className="grid flex-1 grid-cols-[auto_1fr] items-center gap-x-2 gap-y-1">
           <EditField
-            label={t('ribbonBar.editMode.translatedLyric', '翻译歌词')}
+            label="翻译歌词"
             fieldName="translatedLyric"
             parser={(v) => v}
             formatter={(v) => v}
             textFieldStyle={{ width: '20em' }}
           />
           <EditField
-            label={t('ribbonBar.editMode.romanLyric', '音译歌词')}
+            label="音译歌词"
             fieldName="romanLyric"
             parser={(v) => v}
             formatter={(v) => v}
             textFieldStyle={{ width: '20em' }}
           />
-        </Grid>
+        </div>
       </RibbonSection>
-      <RibbonSection label={t('ribbonBar.editMode.multilingual', '多语言')}>
+      <RibbonSection label="多语言">
         <I18nEditor />
       </RibbonSection>
-      <RibbonSection label={t('ribbonBar.editMode.layoutMode', '布局模式')}>
-        <EditModeField
-          simpleModeLabel={t('settings.common.layoutModeOptions.simple', '简单模式')}
-          advanceModeLabel={t('settings.common.layoutModeOptions.advance', '高级模式')}
-        />
+      <RibbonSection label="布局模式">
+        <EditModeField simpleModeLabel="简单模式" advanceModeLabel="高级模式" />
       </RibbonSection>
-      <RibbonSection label={t('ribbonBar.editMode.auxiliaryLineDisplay', '辅助行显示')}>
+      <RibbonSection label="辅助行显示">
         <AuxiliaryDisplayField />
       </RibbonSection>
-      <RibbonSection label={t('ribbonBar.editMode.amllTags', 'AM 标记')}>
-        <Grid columns="auto 1fr" gap="2" gapY="1" flexGrow="1" align="center">
+      <RibbonSection label="AM 标记">
+        <div className="grid flex-1 grid-cols-[auto_1fr] items-center gap-x-2 gap-y-1">
           <SongPartField />
           <AgentField />
-        </Grid>
+        </div>
       </RibbonSection>
-      <RibbonSection label={t('ribbonBar.editMode.views', '视图')}>
-        <Grid columns="1fr auto" gapX="3" gapY="1" flexGrow="1" align="center">
-          <Text size="1" asChild>
-            <label
-              htmlFor={idOutline}
-              style={{
-                userSelect: 'none',
-              }}
-            >
-              {t('ribbonBar.editMode.showOutline', '大纲')}
-            </label>
-          </Text>
+      <RibbonSection label="视图">
+        <div className="grid flex-1 grid-cols-[1fr_auto] items-center gap-x-3 gap-y-1">
+          <label htmlFor={idOutline} className="select-none whitespace-nowrap text-xs">
+            大纲
+          </label>
           <Checkbox
             id={idOutline}
             checked={isOutlineOpen}
@@ -1139,16 +1074,9 @@ export const EditModeRibbonBar: FC = forwardRef<HTMLDivElement>((_props, ref) =>
               toggleTab({ tabId: 'outline', open: Boolean(checked) });
             }}
           />
-          <Text size="1" asChild>
-            <label
-              htmlFor={idBpm}
-              style={{
-                userSelect: 'none',
-              }}
-            >
-              {t('ribbonBar.editMode.showBpmPanel', 'BPM')}
-            </label>
-          </Text>
+          <label htmlFor={idBpm} className="select-none whitespace-nowrap text-xs">
+            BPM
+          </label>
           <Checkbox
             id={idBpm}
             checked={isBpmOpen}
@@ -1156,7 +1084,7 @@ export const EditModeRibbonBar: FC = forwardRef<HTMLDivElement>((_props, ref) =>
               toggleTab({ tabId: 'bpm', open: Boolean(checked) });
             }}
           />
-        </Grid>
+        </div>
       </RibbonSection>
     </RibbonFrame>
   );
diff --git a/frontend/src/editor/components/RibbonBar/index.tsx b/frontend/src/editor/components/RibbonBar/index.tsx
index d31110f..3a1fec4 100644
--- a/frontend/src/editor/components/RibbonBar/index.tsx
+++ b/frontend/src/editor/components/RibbonBar/index.tsx
@@ -9,7 +9,6 @@
  * https://github.com/amll-dev/amll-ttml-tool/blob/main/LICENSE
  */
 
-import { Card, Inset } from '@radix-ui/themes';
 import { AnimatePresence } from 'framer-motion';
 import { useAtomValue } from 'jotai';
 import { forwardRef, lazy, memo } from 'react';
@@ -25,42 +24,30 @@ export const RibbonBar = memo(
     const toolMode = useAtomValue(toolModeAtom);
 
     return (
-      <Card
-        m="2"
-        mb="0"
-        style={{
-          minHeight: 'fit-content',
-          flexShrink: '0',
-        }}
+      <div
         ref={ref}
+        className="mx-2 mt-2 min-h-fit shrink-0 overflow-hidden rounded-lg border border-line bg-card"
       >
-        <Inset>
-          <div
-            style={{
-              height: '130px',
-              overflowY: 'clip',
-            }}
-          >
-            <AnimatePresence mode="wait">
-              {toolMode === ToolMode.Edit && (
-                <SuspensePlaceHolder key="edit">
-                  <EditModeRibbonBar />
-                </SuspensePlaceHolder>
-              )}
-              {toolMode === ToolMode.Sync && (
-                <SuspensePlaceHolder key="sync">
-                  <SyncModeRibbonBar />
-                </SuspensePlaceHolder>
-              )}
-              {toolMode === ToolMode.Preview && (
-                <SuspensePlaceHolder key="preview">
-                  <PreviewModeRibbonBar />
-                </SuspensePlaceHolder>
-              )}
-            </AnimatePresence>
-          </div>
-        </Inset>
-      </Card>
+        <div className="h-[130px] overflow-y-clip">
+          <AnimatePresence mode="wait">
+            {toolMode === ToolMode.Edit && (
+              <SuspensePlaceHolder key="edit">
+                <EditModeRibbonBar />
+              </SuspensePlaceHolder>
+            )}
+            {toolMode === ToolMode.Sync && (
+              <SuspensePlaceHolder key="sync">
+                <SyncModeRibbonBar />
+              </SuspensePlaceHolder>
+            )}
+            {toolMode === ToolMode.Preview && (
+              <SuspensePlaceHolder key="preview">
+                <PreviewModeRibbonBar />
+              </SuspensePlaceHolder>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
     );
   })
 );
diff --git a/frontend/src/editor/components/RibbonBar/preview-mode.tsx b/frontend/src/editor/components/RibbonBar/preview-mode.tsx
index a415a19..806a944 100644
--- a/frontend/src/editor/components/RibbonBar/preview-mode.tsx
+++ b/frontend/src/editor/components/RibbonBar/preview-mode.tsx
@@ -9,10 +9,10 @@
  * https://github.com/amll-dev/amll-ttml-tool/blob/main/LICENSE
  */
 
-import { Checkbox, Grid, Text, TextField } from '@radix-ui/themes';
 import { useAtom } from 'jotai';
 import { forwardRef } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
 import {
   hideObsceneWordsAtom,
   lyricWordFadeWidthAtom,
@@ -26,41 +26,27 @@ export const PreviewModeRibbonBar = forwardRef<HTMLDivElement>((_props, ref) =>
   const [showRomanLine, setShowRomanLine] = useAtom(showRomanLinesAtom);
   const [hideObsceneWords, setHideObsceneWords] = useAtom(hideObsceneWordsAtom);
   const [lyricWordFadeWidth, setLyricWordFadeWidth] = useAtom(lyricWordFadeWidthAtom);
-  const { t } = useTranslation();
 
   return (
     <RibbonFrame ref={ref}>
-      <RibbonSection label={t('ribbonBar.previewMode.lyrics', '歌词')}>
-        <Grid columns="0fr 0fr" gap="2" gapY="1" flexGrow="1" align="center">
-          <Text wrap="nowrap" size="1">
-            {t('ribbonBar.previewMode.showTranslation', '显示翻译')}
-          </Text>
+      <RibbonSection label="歌词">
+        <div className="grid flex-1 grid-cols-[auto_auto] items-center gap-x-2 gap-y-1">
+          <span className="whitespace-nowrap text-xs">显示翻译</span>
           <Checkbox
             checked={showTranslationLine}
             onCheckedChange={(v) => setShowTranslationLine(!!v)}
           />
-          <Text wrap="nowrap" size="1">
-            {t('ribbonBar.previewMode.showRoman', '显示音译')}
-          </Text>
+          <span className="whitespace-nowrap text-xs">显示音译</span>
           <Checkbox checked={showRomanLine} onCheckedChange={(v) => setShowRomanLine(!!v)} />
-          <Text wrap="nowrap" size="1">
-            {t('ribbonBar.previewMode.maskObsceneWords', '屏蔽不雅用语')}
-          </Text>
+          <span className="whitespace-nowrap text-xs">屏蔽不雅用语</span>
           <Checkbox checked={hideObsceneWords} onCheckedChange={(v) => setHideObsceneWords(!!v)} />
-        </Grid>
+        </div>
       </RibbonSection>
-      <RibbonSection label={t('ribbonBar.previewMode.word', '单词')}>
-        <Grid columns="0fr 0fr" gap="2" gapY="1" flexGrow="1" align="center">
-          <Text wrap="nowrap" size="1">
-            {t('ribbonBar.previewMode.fadeWidth', '过渡宽度')}
-          </Text>
-          <TextField.Root
-            min={0}
-            step={0}
-            size="1"
-            style={{
-              width: '4em',
-            }}
+      <RibbonSection label="单词">
+        <div className="grid flex-1 grid-cols-[auto_auto] items-center gap-x-2 gap-y-1">
+          <span className="whitespace-nowrap text-xs">过渡宽度</span>
+          <Input
+            className="h-7 w-[4em] px-2 text-xs"
             defaultValue={lyricWordFadeWidth}
             onBlur={(e) => {
               const value = Number.parseFloat(e.target.value);
@@ -69,7 +55,7 @@ export const PreviewModeRibbonBar = forwardRef<HTMLDivElement>((_props, ref) =>
               }
             }}
           />
-        </Grid>
+        </div>
       </RibbonSection>
     </RibbonFrame>
   );
diff --git a/frontend/src/editor/components/RibbonBar/sync-mode.tsx b/frontend/src/editor/components/RibbonBar/sync-mode.tsx
index d11442d..5bbe5df 100644
--- a/frontend/src/editor/components/RibbonBar/sync-mode.tsx
+++ b/frontend/src/editor/components/RibbonBar/sync-mode.tsx
@@ -31,37 +31,36 @@ import {
   keySyncStartAtom,
 } from '$/states/keybindings.ts';
 import { bgLyricIgnoreSyncAtom, lyricLinesAtom } from '$/states/main.ts';
-import { Checkbox, Flex, Grid, Kbd, Slider, Text, TextField } from '@radix-ui/themes';
 import { useAtom, useAtomValue } from 'jotai';
 import { useSetImmerAtom } from 'jotai-immer';
 import { type FC, forwardRef } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { Kbd } from '@/components/ui/kbd';
+import { Slider } from '@/components/ui/slider';
+import { formatKeyBindings } from '$/utils/keybindings.ts';
 import { KeyBinding } from '../KeyBinding/index.tsx';
 import { RibbonFrame, RibbonSection } from './common';
-import { formatKeyBindings } from '$/utils/keybindings.ts';
 
 const EmptyBeatField = () => {
   const [currentEmptyBeat, setCurrentEmptyBeat] = useAtom(currentEmptyBeatAtom);
   const currentWordEmptyBeat = useCurrentLocation()?.word.emptyBeat || 0;
-  const { t } = useTranslation();
 
   return (
     <>
-      <Text wrap="nowrap" size="1">
-        {t('ribbonBar.syncMode.currentEmptyBeat', '当前空拍')}
-      </Text>
+      <span className="whitespace-nowrap text-xs">当前空拍</span>
       <Slider
-        value={[currentEmptyBeat]}
-        onValueChange={(v) => setCurrentEmptyBeat(v[0] ?? 0)}
+        value={currentEmptyBeat}
+        onValueChange={setCurrentEmptyBeat}
         min={0}
         max={currentWordEmptyBeat}
         step={1}
         disabled={currentWordEmptyBeat === 0}
       />
       <div />
-      <Text wrap="nowrap" align="center" size="1">
+      <span className="whitespace-nowrap text-center text-xs">
         {currentEmptyBeat} / {currentWordEmptyBeat}
-      </Text>
+      </span>
     </>
   );
 };
@@ -83,50 +82,38 @@ export const SyncModeRibbonBar: FC = forwardRef<HTMLDivElement>((_props, ref) =>
   const [syncTimeOffset, setSyncTimeOffset] = useAtom(syncTimeOffsetAtom);
   const syncNextDualMode = useAtomValue(syncNextDualModeAtom);
   const syncNextAltKeys = useAtomValue(keySyncNextAltAtom);
-  const { t } = useTranslation();
 
   return (
     <RibbonFrame ref={ref}>
-      <RibbonSection label={t('ribbonBar.syncMode.syncAdjustment', '打轴调整')}>
-        <Grid columns="0fr 0fr" gap="4" gapY="1" flexGrow="1" align="center">
-          <Text wrap="nowrap" size="1">
-            {t('ribbonBar.syncMode.timeOffset', '时间戳位移')}
-          </Text>
-          <TextField.Root
-            type="number"
-            step={1}
-            size="1"
-            style={{
-              width: '8em',
-            }}
-            value={syncTimeOffset}
-            onChange={(e) => setSyncTimeOffset(e.target.valueAsNumber)}
-          >
-            <TextField.Slot />
-            <TextField.Slot>ms</TextField.Slot>
-          </TextField.Root>
+      <RibbonSection label="打轴调整">
+        <div className="grid flex-1 grid-cols-[auto_auto] items-center gap-x-4 gap-y-1">
+          <span className="whitespace-nowrap text-xs">时间戳位移</span>
+          <div className="flex items-center gap-1">
+            <Input
+              type="number"
+              step={1}
+              className="h-7 w-[8em] px-2 text-xs"
+              value={syncTimeOffset}
+              onChange={(e) => setSyncTimeOffset(e.target.valueAsNumber)}
+            />
+            <span className="text-xs text-ink-3">ms</span>
+          </div>
           <EmptyBeatField />
-        </Grid>
+        </div>
       </RibbonSection>
-      <RibbonSection label={t('ribbonBar.syncMode.assistSettings', '辅助设置')}>
-        <Grid columns="0fr 0fr" gap="2" gapY="1" flexGrow="1" align="center">
-          <Text wrap="nowrap" size="1">
-            {t('ribbonBar.syncMode.showTimestampUpdate', '呈现时间戳更新')}
-          </Text>
+      <RibbonSection label="辅助设置">
+        <div className="grid flex-1 grid-cols-[auto_auto] items-center gap-x-2 gap-y-1">
+          <span className="whitespace-nowrap text-xs">呈现时间戳更新</span>
           <Checkbox
             checked={visualizeTimestampUpdate}
             onCheckedChange={(v) => setVisualizeTimestampUpdate(!!v)}
           />
-          <Text wrap="nowrap" size="1">
-            {t('ribbonBar.syncMode.touchSyncPanel', '触控打轴辅助面板')}
-          </Text>
+          <span className="whitespace-nowrap text-xs">触控打轴辅助面板</span>
           <Checkbox
             checked={showTouchSyncPanel}
             onCheckedChange={(v) => setShowTouchSyncPanel(!!v)}
           />
-          <Text wrap="nowrap" size="1">
-            {t('ribbonBar.syncMode.bgLyricIgnoreSync', '背景歌词忽略打轴')}
-          </Text>
+          <span className="whitespace-nowrap text-xs">背景歌词忽略打轴</span>
           <Checkbox
             checked={bgLyricIgnoreSync}
             onCheckedChange={(v) => {
@@ -142,58 +129,44 @@ export const SyncModeRibbonBar: FC = forwardRef<HTMLDivElement>((_props, ref) =>
               });
             }}
           />
-        </Grid>
+        </div>
       </RibbonSection>
-      <RibbonSection label={t('ribbonBar.syncMode.displayOptions', '显示选项')}>
-        <Grid columns="0fr 0fr" gap="2" gapY="1" flexGrow="1" align="center">
-          <Text wrap="nowrap" size="1">
-            {t('ribbonBar.syncMode.showTimestamps', '显示时间戳')}
-          </Text>
+      <RibbonSection label="显示选项">
+        <div className="grid flex-1 grid-cols-[auto_auto] items-center gap-x-2 gap-y-1">
+          <span className="whitespace-nowrap text-xs">显示时间戳</span>
           <Checkbox checked={showTimestamps} onCheckedChange={(v) => setShowTimestamps(!!v)} />
-          <Text wrap="nowrap" size="1">
-            {t('ribbonBar.syncMode.highlightActiveWord', '高亮当前音节')}
-          </Text>
+          <span className="whitespace-nowrap text-xs">高亮当前音节</span>
           <Checkbox
             checked={highlightActiveWord}
             onCheckedChange={(v) => setHighlightActiveWord(!!v)}
           />
-          <Text wrap="nowrap" size="1">
-            {t('ribbonBar.syncMode.highlightErrors', '高亮错误')}
-          </Text>
+          <span className="whitespace-nowrap text-xs">高亮错误</span>
           <Checkbox checked={highlightErrors} onCheckedChange={(v) => setHighlightErrors(!!v)} />
           {showWordRomanizationInput && (
             <>
-              <Text wrap="nowrap" size="1">
-                {t('ribbonBar.syncMode.showPerWordRomanization', '显示逐字音译')}
-              </Text>
+              <span className="whitespace-nowrap text-xs">显示逐字音译</span>
               <Checkbox
                 checked={displayRomanizationInSync}
                 onCheckedChange={(v) => setdisplayRomanizationInSync(!!v)}
               />
             </>
           )}
-        </Grid>
+        </div>
       </RibbonSection>
-      <RibbonSection label={t('ribbonBar.syncMode.keyBindingReference', '打轴键位速查')}>
-        <Flex gap="4">
-          <Grid columns="0fr 0fr" gap="4" gapY="1" flexGrow="1" align="center" justify="center">
-            <Text wrap="nowrap" size="1">
-              {t('ribbonBar.syncMode.startSync', '起始轴')}
-            </Text>
+      <RibbonSection label="打轴键位速查">
+        <div className="flex gap-4">
+          <div className="grid flex-1 grid-cols-[auto_auto] items-center justify-center gap-x-4 gap-y-1">
+            <span className="whitespace-nowrap text-xs">起始轴</span>
             <KeyBinding kbdAtom={keySyncStartAtom} />
-            <Text wrap="nowrap" size="1">
-              {t('ribbonBar.syncMode.continuousSync', '连续轴')}
-            </Text>
-            <Flex gap="2" align="center">
+            <span className="whitespace-nowrap text-xs">连续轴</span>
+            <div className="flex items-center gap-2">
               <KeyBinding kbdAtom={keySyncNextAtom} />
               {syncNextDualMode ? <Kbd>{formatKeyBindings(syncNextAltKeys)}</Kbd> : null}
-            </Flex>
-            <Text wrap="nowrap" size="1">
-              {t('ribbonBar.syncMode.endSync', '结束轴')}
-            </Text>
+            </div>
+            <span className="whitespace-nowrap text-xs">结束轴</span>
             <KeyBinding kbdAtom={keySyncEndAtom} />
-          </Grid>
-        </Flex>
+          </div>
+        </div>
       </RibbonSection>
     </RibbonFrame>
   );
diff --git a/frontend/src/editor/components/Sidebar/BpmPanel.tsx b/frontend/src/editor/components/Sidebar/BpmPanel.tsx
index 3ff76e1..a0d85d1 100644
--- a/frontend/src/editor/components/Sidebar/BpmPanel.tsx
+++ b/frontend/src/editor/components/Sidebar/BpmPanel.tsx
@@ -1,25 +1,10 @@
-import {
-  ArrowLeft16Regular,
-  ArrowResetRegular,
-  Dismiss16Regular,
-  ErrorCircle16Regular,
-  Info16Regular,
-  Timer16Regular,
-} from '@fluentui/react-icons';
-import {
-  Box,
-  Button,
-  Callout,
-  Card,
-  Checkbox,
-  Flex,
-  IconButton,
-  Text,
-  Tooltip,
-} from '@radix-ui/themes';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { AlertCircle, ArrowLeft, Info, RotateCcw, Timer, X } from 'lucide-react';
 import { type FC, useCallback, useId, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Alert, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { SimpleTooltip } from '@/components/ui/tooltip';
 import { KeyBinding } from '$/components/KeyBinding';
 import { useBpmControl, useBpmTapEngine } from '$/modules/audio/hooks';
 import {
@@ -39,7 +24,6 @@ function formatCalculationTime(timeMs: number): string {
 }
 
 export const BpmPanel: FC = () => {
-  const { t } = useTranslation();
   const followRateCheckboxId = useId();
   const showBeatLinesCheckboxId = useId();
   const {
@@ -104,7 +88,7 @@ export const BpmPanel: FC = () => {
     bpmValueText = `${currentBpm ?? Math.round(bpmState.result.bpm)}`;
     durationText = formatCalculationTime(bpmState.calculationTime);
   } else if (bpmState.status === 'analyzing') {
-    bpmValueText = t('sidebar.bpm.analyzing', '正在分析');
+    bpmValueText = '正在分析';
   }
 
   const isAnalyzing = bpmState.status === 'analyzing';
@@ -113,314 +97,214 @@ export const BpmPanel: FC = () => {
     isAdjusted || tapTimes.length > 0 || (isCompleted && bpmState.calculationTime === 0);
 
   return (
-    <Box p="4">
-      <Flex direction="column" gap="4">
-        <Flex
-          direction="column"
-          align="center"
-          gap="1"
-          style={{ position: 'relative', width: '100%' }}
-        >
-          <Text size="1" color="gray" weight="medium">
-            BPM
-          </Text>
+    <div className="p-4">
+      <div className="flex flex-col gap-4">
+        <div className="relative flex w-full flex-col items-center gap-1">
+          <span className="text-xs font-medium text-ink-3">BPM</span>
 
-          <Flex align="center" justify="center" gap="5" style={{ width: '100%' }}>
-            <Tooltip content={t('sidebar.bpm.halve', '减半 BPM')}>
+          <div className="flex w-full items-center justify-center gap-5">
+            <SimpleTooltip label="减半 BPM">
               <Button
-                size="2"
-                variant="soft"
-                color="gray"
+                variant="secondary"
+                className="h-8 font-mono"
                 disabled={!isCompleted}
                 onClick={halveBpm}
-                style={{ fontFamily: 'var(--default-font-family-mono)' }}
               >
                 ÷2
               </Button>
-            </Tooltip>
+            </SimpleTooltip>
 
-            <Text
-              size={isAnalyzing ? '6' : '8'}
-              weight="bold"
-              style={{
-                fontFamily: 'var(--default-font-family-mono)',
-                fontVariantNumeric: 'tabular-nums',
-              }}
+            <span
+              className={`font-mono font-bold tabular-nums ${
+                isAnalyzing ? 'text-2xl' : 'text-4xl'
+              }`}
             >
               {bpmValueText}
-            </Text>
+            </span>
 
-            <Tooltip content={t('sidebar.bpm.double', '加倍 BPM')}>
+            <SimpleTooltip label="加倍 BPM">
               <Button
-                size="2"
-                variant="soft"
-                color="gray"
+                variant="secondary"
+                className="h-8 font-mono"
                 disabled={!isCompleted}
                 onClick={doubleBpm}
-                style={{ fontFamily: 'var(--default-font-family-mono)' }}
               >
                 ×2
               </Button>
-            </Tooltip>
-          </Flex>
+            </SimpleTooltip>
+          </div>
 
           {isCompleted && isModified && (
-            <Tooltip content={t('sidebar.bpm.reset', '重置 BPM')}>
-              <IconButton
-                size="2"
+            <SimpleTooltip label="重置 BPM">
+              <Button
                 variant="ghost"
-                color="gray"
+                size="icon"
+                className="absolute right-0 top-full size-8 -translate-y-1/2"
                 onClick={handleResetBpm}
-                style={{
-                  position: 'absolute',
-                  right: 0,
-                  top: '100%',
-                  transform: 'translateY(-50%)',
-                }}
               >
-                <ArrowResetRegular style={{ fontSize: 18 }} />
-              </IconButton>
-            </Tooltip>
+                <RotateCcw className="size-[18px]" />
+              </Button>
+            </SimpleTooltip>
           )}
-        </Flex>
+        </div>
 
-        <Flex align="center" justify="center" gap="2">
-          <Timer16Regular style={{ color: 'var(--gray-10)' }} />
-          <Text size="2" color="gray" style={{ fontFamily: 'var(--default-font-family-mono)' }}>
-            {durationText}
-          </Text>
-        </Flex>
+        <div className="flex items-center justify-center gap-2">
+          <Timer className="size-4 text-ink-3" />
+          <span className="font-mono text-sm text-ink-3">{durationText}</span>
+        </div>
 
         {bpmState.status === 'error' && (
-          <Callout.Root color="red" size="1">
-            <Callout.Icon>
-              <ErrorCircle16Regular />
-            </Callout.Icon>
-            <Callout.Text>{bpmState.error}</Callout.Text>
-          </Callout.Root>
+          <Alert variant="destructive">
+            <AlertCircle />
+            <AlertTitle>{bpmState.error}</AlertTitle>
+          </Alert>
         )}
 
-        <Flex align="center" gap="2" mt="2">
+        <div className="mt-2 flex items-center gap-2">
           <Checkbox
             id={followRateCheckboxId}
             checked={followPlaybackRate}
             onCheckedChange={(checked) => setFollowPlaybackRate(Boolean(checked))}
           />
-          <Text size="2" asChild>
-            <label htmlFor={followRateCheckboxId} style={{ userSelect: 'none', cursor: 'pointer' }}>
-              {t('sidebar.bpm.followPlaybackRate', '跟随音频播放倍速')}
-            </label>
-          </Text>
-        </Flex>
+          <label htmlFor={followRateCheckboxId} className="cursor-pointer select-none text-sm">
+            跟随音频播放倍速
+          </label>
+        </div>
 
-        <Flex align="center" gap="2">
+        <div className="flex items-center gap-2">
           <Checkbox
             id={showBeatLinesCheckboxId}
             checked={showBeatLines}
             onCheckedChange={(checked) => setShowBeatLines(Boolean(checked))}
           />
-          <Text size="2" asChild>
-            <label
-              htmlFor={showBeatLinesCheckboxId}
-              style={{ userSelect: 'none', cursor: 'pointer' }}
-            >
-              {t('sidebar.bpm.showBeatLines', '在频谱图上显示拍子')}
-            </label>
-          </Text>
-        </Flex>
+          <label htmlFor={showBeatLinesCheckboxId} className="cursor-pointer select-none text-sm">
+            在频谱图上显示拍子
+          </label>
+        </div>
 
         {!hasSeenTapWindowTip && (isKeyTapMode || isSpectrogramTapMode) && (
-          <Callout.Root
-            color="blue"
-            size="1"
-            variant="soft"
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              paddingRight: '10px',
-            }}
-          >
-            <Callout.Icon style={{ display: 'flex', alignItems: 'center' }}>
-              <Info16Regular style={{ display: 'block' }} />
-            </Callout.Icon>
-
-            <Callout.Text size="1" style={{ flex: 1 }}>
-              {t('sidebar.bpm.slidingWindowTip', '只会使用最近 10 次校准数据计算 BPM')}
-            </Callout.Text>
-
-            <IconButton
-              size="1"
+          <Alert variant="info" className="flex items-center gap-2 px-3 py-2">
+            <Info className="size-4 shrink-0" />
+            <div className="flex-1 text-xs">只会使用最近 10 次校准数据计算 BPM</div>
+            <Button
               variant="ghost"
-              color="gray"
+              size="icon"
+              className="size-6 shrink-0"
               onClick={() => setHasSeenTapWindowTip(true)}
-              style={{
-                margin: 0,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
+              aria-label="关闭提示"
             >
-              <Dismiss16Regular />
-            </IconButton>
-          </Callout.Root>
+              <X className="size-3.5" />
+            </Button>
+          </Alert>
         )}
 
         {!isKeyTapMode && !isSpectrogramTapMode && (
-          <Flex direction="column" gap="2" align="start">
+          <div className="flex flex-col items-start gap-2">
             <Button
-              size="2"
-              variant="soft"
+              variant="secondary"
+              className="h-8 cursor-pointer self-start"
               disabled={!audioLoaded}
               onClick={() => setTapMode('key')}
-              style={{ alignSelf: 'flex-start', cursor: 'pointer' }}
             >
-              {t('sidebar.bpm.manualCalibration', '手动打拍校准')}
+              手动打拍校准
             </Button>
             <Button
-              size="2"
-              variant="soft"
+              variant="secondary"
+              className="h-8 cursor-pointer self-start"
               disabled={!audioLoaded}
               onClick={() => setTapMode('spectrogram')}
-              style={{ alignSelf: 'flex-start', cursor: 'pointer' }}
             >
-              {t('sidebar.bpm.spectrogramCalibration', '使用频谱图校准')}
+              使用频谱图校准
             </Button>
-          </Flex>
+          </div>
         )}
 
         {isKeyTapMode && (
-          <Card size="2">
-            <Flex direction="column" gap="3" style={{ position: 'relative' }}>
-              <Flex align="center" justify="start">
-                <IconButton
-                  size="1"
+          <div className="rounded-lg border border-line bg-card p-3">
+            <div className="relative flex flex-col gap-3">
+              <div className="flex items-center justify-start">
+                <Button
                   variant="ghost"
-                  color="gray"
+                  size="icon"
+                  className="absolute left-0 top-0 size-7 cursor-pointer"
                   onClick={() => {
                     setTapMode('off');
                     resetTapTimes();
                   }}
-                  style={{
-                    position: 'absolute',
-                    left: 0,
-                    top: 0,
-                    cursor: 'pointer',
-                  }}
+                  aria-label="返回"
                 >
-                  <ArrowLeft16Regular />
-                </IconButton>
+                  <ArrowLeft className="size-4" />
+                </Button>
 
-                <Flex
-                  align="center"
-                  justify="center"
-                  style={{
-                    width: '100%',
-                    paddingLeft: '28px',
-                    paddingRight: '28px',
-                  }}
-                >
-                  <Text
-                    size="2"
-                    weight={isHighlighted ? 'bold' : 'medium'}
+                <div className="flex w-full items-center justify-center px-7">
+                  <span
+                    className={`cursor-pointer select-none text-center text-sm ${
+                      isHighlighted ? 'font-bold text-primary' : 'font-medium'
+                    }`}
                     onClick={() => triggerTap()}
-                    style={{
-                      textAlign: 'center',
-                      color: isHighlighted ? 'var(--accent-11)' : undefined,
-                      cursor: 'pointer',
-                      userSelect: 'none',
-                    }}
                   >
-                    {t('sidebar.bpm.tapInstructionPrefix', '根据节拍按下 ')}
-                    <KeyBinding kbdAtom={keySyncNextAtom} />
-                    {t('sidebar.bpm.tapInstructionSuffix', ' 或点击此处')}
-                  </Text>
-                </Flex>
-              </Flex>
+                    根据节拍按下 <KeyBinding kbdAtom={keySyncNextAtom} /> 或点击此处
+                  </span>
+                </div>
+              </div>
 
-              <Flex gap="1" style={{ width: '100%' }} justify="center">
+              <div className="flex w-full justify-center gap-1">
                 {Array.from({ length: 10 }).map((_, index) => (
-                  <Box
-                    // biome-ignore lint/suspicious/noArrayIndexKey: fixed 10 indicator bars
+                  <div
                     key={index}
-                    style={{
-                      flex: 1,
-                      height: '4px',
-                      borderRadius: '2px',
-                      backgroundColor:
-                        index < Math.min(tapTimes.length, 10) ? 'var(--accent-9)' : 'var(--gray-5)',
-                    }}
+                    className={`h-1 flex-1 rounded-sm ${
+                      index < Math.min(tapTimes.length, 10) ? 'bg-primary' : 'bg-muted'
+                    }`}
                   />
                 ))}
-              </Flex>
-            </Flex>
-          </Card>
+              </div>
+            </div>
+          </div>
         )}
 
         {isSpectrogramTapMode && (
-          <Card size="2">
-            <Flex direction="column" gap="3" style={{ position: 'relative' }}>
-              <Flex align="center" justify="start">
-                <IconButton
-                  size="1"
+          <div className="rounded-lg border border-line bg-card p-3">
+            <div className="relative flex flex-col gap-3">
+              <div className="flex items-center justify-start">
+                <Button
                   variant="ghost"
-                  color="gray"
+                  size="icon"
+                  className="absolute left-0 top-0 size-7 cursor-pointer"
                   onClick={() => {
                     setTapMode('off');
                     resetTapTimes();
                   }}
-                  style={{
-                    position: 'absolute',
-                    left: 0,
-                    top: 0,
-                    cursor: 'pointer',
-                  }}
+                  aria-label="返回"
                 >
-                  <ArrowLeft16Regular />
-                </IconButton>
+                  <ArrowLeft className="size-4" />
+                </Button>
 
-                <Flex
-                  align="center"
-                  justify="center"
-                  style={{
-                    width: '100%',
-                    paddingLeft: '28px',
-                    paddingRight: '28px',
-                  }}
-                >
-                  <Text
-                    size="2"
-                    weight={isHighlighted ? 'bold' : 'medium'}
-                    style={{
-                      textAlign: 'center',
-                      color: isHighlighted ? 'var(--accent-11)' : undefined,
-                      userSelect: 'none',
-                    }}
+                <div className="flex w-full items-center justify-center px-7">
+                  <span
+                    className={`select-none text-center text-sm ${
+                      isHighlighted ? 'font-bold text-primary' : 'font-medium'
+                    }`}
                   >
-                    {t('sidebar.bpm.clickOnSpectrogramToCalibrate', '在频谱图上点击以校准')}
-                  </Text>
-                </Flex>
-              </Flex>
+                    在频谱图上点击以校准
+                  </span>
+                </div>
+              </div>
 
-              <Flex gap="1" style={{ width: '100%' }} justify="center">
+              <div className="flex w-full justify-center gap-1">
                 {Array.from({ length: 10 }).map((_, index) => (
-                  <Box
-                    // biome-ignore lint/suspicious/noArrayIndexKey: fixed 10 indicator bars
+                  <div
                     key={index}
-                    style={{
-                      flex: 1,
-                      height: '4px',
-                      borderRadius: '2px',
-                      backgroundColor:
-                        index < Math.min(tapTimes.length, 10) ? 'var(--accent-9)' : 'var(--gray-5)',
-                    }}
+                    className={`h-1 flex-1 rounded-sm ${
+                      index < Math.min(tapTimes.length, 10) ? 'bg-primary' : 'bg-muted'
+                    }`}
                   />
                 ))}
-              </Flex>
-            </Flex>
-          </Card>
+              </div>
+            </div>
+          </div>
         )}
-      </Flex>
-    </Box>
+      </div>
+    </div>
   );
 };
 
diff --git a/frontend/src/editor/components/Sidebar/OutlinePanel.tsx b/frontend/src/editor/components/Sidebar/OutlinePanel.tsx
index 4e543bb..0c7e247 100644
--- a/frontend/src/editor/components/Sidebar/OutlinePanel.tsx
+++ b/frontend/src/editor/components/Sidebar/OutlinePanel.tsx
@@ -1,7 +1,6 @@
-import { ContextMenu } from '@radix-ui/themes';
 import { useAtomValue, useSetAtom, useStore } from 'jotai';
 import { memo, useCallback, useMemo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
+import { ContextMenu, ContextMenuContent, ContextMenuTrigger } from '@/components/ui/context-menu';
 import { LyricLineMenu } from '$/components/Menus/lyric-line-menu';
 import { useLyricListDrag } from '$/modules/lyric-drag/useLyricListDrag';
 import {
@@ -16,7 +15,6 @@ import { outlineJumpActionAtom } from '$/states/sidebar.ts';
 import styles from './OutlinePanel.module.css';
 
 export const OutlinePanel = memo(() => {
-  const { t } = useTranslation();
   const store = useStore();
 
   const { lyricLines } = useAtomValue(lyricLinesAtom);
@@ -66,6 +64,9 @@ export const OutlinePanel = memo(() => {
     [store, isDragging]
   );
 
+  // 仅在编辑模式下挂右键菜单
+  const menuEnabled = toolMode === ToolMode.Edit;
+
   return (
     <div
       className={`${styles.outlineContainer} ${isDragging ? styles.isDraggingGlobal : ''}`}
@@ -80,6 +81,28 @@ export const OutlinePanel = memo(() => {
         const textContent = line.words.map((w) => w.word).join('');
         const hasText = textContent.trim().length > 0;
 
+        const item = (
+          <div
+            className={styles.outlineItem}
+            data-selected={isSelected}
+            data-is-dragged={isDragged}
+            onPointerDown={(e) => {
+              onPointerDown(e, line.id, index);
+            }}
+            onDoubleClick={() => handleItemDoubleClick(line.id)}
+          >
+            <div className={styles.lineNumber}>{displayNumbers[index]}</div>
+
+            <div
+              className={`${styles.textContent} ${line.isBG ? styles.isBG : ''} ${line.isDuet ? styles.isDuet : ''}`}
+            >
+              <div className={styles.primaryText}>
+                {hasText ? textContent : <span className={styles.emptyText}>(空行)</span>}
+              </div>
+            </div>
+          </div>
+        );
+
         return (
           <div
             key={line.id}
@@ -87,39 +110,17 @@ export const OutlinePanel = memo(() => {
             data-line-id={line.id}
             data-absolute-index={index}
           >
-            <ContextMenu.Root onOpenChange={(opened) => handleContextMenuOpen(opened, line.id)}>
-              <ContextMenu.Trigger disabled={toolMode !== ToolMode.Edit}>
-                <div
-                  className={styles.outlineItem}
-                  data-selected={isSelected}
-                  data-is-dragged={isDragged}
-                  onPointerDown={(e) => {
-                    onPointerDown(e, line.id, index);
-                  }}
-                  onDoubleClick={() => handleItemDoubleClick(line.id)}
-                >
-                  <div className={styles.lineNumber}>{displayNumbers[index]}</div>
-
-                  <div
-                    className={`${styles.textContent} ${line.isBG ? styles.isBG : ''} ${line.isDuet ? styles.isDuet : ''}`}
-                  >
-                    <div className={styles.primaryText}>
-                      {hasText ? (
-                        textContent
-                      ) : (
-                        <span className={styles.emptyText}>
-                          {t('sidebar.outline.emptyLine', '(空行)')}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </ContextMenu.Trigger>
+            {menuEnabled ? (
+              <ContextMenu onOpenChange={(opened) => handleContextMenuOpen(opened, line.id)}>
+                <ContextMenuTrigger asChild>{item}</ContextMenuTrigger>
 
-              <ContextMenu.Content>
-                <LyricLineMenu lineIndex={index} />
-              </ContextMenu.Content>
-            </ContextMenu.Root>
+                <ContextMenuContent>
+                  <LyricLineMenu lineIndex={index} />
+                </ContextMenuContent>
+              </ContextMenu>
+            ) : (
+              item
+            )}
           </div>
         );
       })}
diff --git a/frontend/src/editor/components/Sidebar/ResizableSidebar.module.css b/frontend/src/editor/components/Sidebar/ResizableSidebar.module.css
index 2649d50..aa41799 100644
--- a/frontend/src/editor/components/Sidebar/ResizableSidebar.module.css
+++ b/frontend/src/editor/components/Sidebar/ResizableSidebar.module.css
@@ -47,6 +47,8 @@
 .title {
   flex: 1 1 auto;
   min-width: 0;
+  align-self: stretch;
+  height: 100%;
   overflow: hidden;
 }
 
diff --git a/frontend/src/editor/components/Sidebar/ResizableSidebar.tsx b/frontend/src/editor/components/Sidebar/ResizableSidebar.tsx
index bbe8832..9a5b4a8 100644
--- a/frontend/src/editor/components/Sidebar/ResizableSidebar.tsx
+++ b/frontend/src/editor/components/Sidebar/ResizableSidebar.tsx
@@ -1,9 +1,8 @@
-import { Dismiss16Regular } from '@fluentui/react-icons';
-import { Box, IconButton } from '@radix-ui/themes';
 import { motion } from 'framer-motion';
 import { useAtom, type WritableAtom } from 'jotai';
+import { X } from 'lucide-react';
 import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
 import styles from './ResizableSidebar.module.css';
 
 const SNAP_CLOSE_THRESHOLD = 20;
@@ -43,7 +42,6 @@ export const ResizableSidebar = <Panel extends string>({
   headerSingle,
   children,
 }: ResizableSidebarProps<Panel>) => {
-  const { t } = useTranslation();
   const [activePanel, setActivePanel] = useAtom(panelAtom);
   const [savedWidth, setSavedWidth] = useAtom(widthAtom);
 
@@ -134,17 +132,17 @@ export const ResizableSidebar = <Panel extends string>({
         <div className={styles.inner} style={{ width: contentWidth, minWidth: contentWidth }}>
           <div className={styles.header} data-single-tab={headerSingle}>
             <div className={styles.title}>{isOpen ? (titles[activePanel] ?? null) : null}</div>
-            <IconButton
+            <Button
               variant="ghost"
-              color="gray"
-              radius="full"
+              size="icon"
+              className="size-8 shrink-0 rounded-full"
               onClick={close}
-              aria-label={t('common.close', '关闭')}
+              aria-label="关闭"
             >
-              <Dismiss16Regular />
-            </IconButton>
+              <X className="size-4" />
+            </Button>
           </div>
-          <Box className={styles.content}>{children}</Box>
+          <div className={styles.content}>{children}</div>
         </div>
       </motion.div>
       {side === 'left' && resizer}
diff --git a/frontend/src/editor/components/Sidebar/RightSidebar.tsx b/frontend/src/editor/components/Sidebar/RightSidebar.tsx
index ff95524..e8f69cb 100644
--- a/frontend/src/editor/components/Sidebar/RightSidebar.tsx
+++ b/frontend/src/editor/components/Sidebar/RightSidebar.tsx
@@ -1,11 +1,9 @@
 import { useAtom } from 'jotai';
-import { useTranslation } from 'react-i18next';
 import { rightSidebarPanelAtom, rightSidebarWidthAtom } from '$/states/sidebar.ts';
 import { ResizableSidebar } from './ResizableSidebar';
 
 const MIN_WIDTH = 220;
 export const RightSidebar = () => {
-  const { t } = useTranslation();
   const [activePanel] = useAtom(rightSidebarPanelAtom);
 
   return (
@@ -16,7 +14,7 @@ export const RightSidebar = () => {
       closedPanel="none"
       minWidth={MIN_WIDTH}
       maxWidthRatio={0.4}
-      titles={{ annotations: t('sidebar.annotations.title', '批注') }}
+      titles={{ annotations: '批注' }}
     >
       {activePanel === 'annotations' && null}
     </ResizableSidebar>
diff --git a/frontend/src/editor/components/Sidebar/SidebarTabBar.tsx b/frontend/src/editor/components/Sidebar/SidebarTabBar.tsx
index 95557b4..8b12001 100644
--- a/frontend/src/editor/components/Sidebar/SidebarTabBar.tsx
+++ b/frontend/src/editor/components/Sidebar/SidebarTabBar.tsx
@@ -1,7 +1,6 @@
-import { DismissRegular } from '@fluentui/react-icons';
 import { AnimatePresence, motion } from 'framer-motion';
+import { X } from 'lucide-react';
 import { type FC, useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 import type { SidebarPanelType } from '$/states/sidebar.ts';
 import type { SidebarTab } from './index';
 import styles from './SidebarTabBar.module.css';
@@ -19,7 +18,6 @@ export const SidebarTabBar: FC<SidebarTabBarProps> = ({
   onSelectTab,
   onCloseTab,
 }) => {
-  const { t } = useTranslation();
   const prevTabIdsRef = useRef<Set<string>>(new Set());
 
   const prevTabIds = prevTabIdsRef.current;
@@ -32,7 +30,7 @@ export const SidebarTabBar: FC<SidebarTabBarProps> = ({
   if (singleTab) {
     return (
       <div className={styles.singleTitleContainer}>
-        <span className={styles.singleTitle}>{singleTab.getTitle(t)}</span>
+        <span className={styles.singleTitle}>{singleTab.title}</span>
       </div>
     );
   }
@@ -67,17 +65,17 @@ export const SidebarTabBar: FC<SidebarTabBarProps> = ({
                 }
               }}
             >
-              <span className={styles.tabTitle}>{tab.getTitle(t)}</span>
+              <span className={styles.tabTitle}>{tab.title}</span>
               <button
                 type="button"
                 className={styles.closeButton}
-                aria-label={t('common.close', '关闭')}
+                aria-label="关闭"
                 onClick={(e) => {
                   e.stopPropagation();
                   onCloseTab(tab.id);
                 }}
               >
-                <DismissRegular style={{ fontSize: 15 }} />
+                <X className="size-[15px]" />
               </button>
             </motion.div>
           );
diff --git a/frontend/src/editor/components/Sidebar/index.tsx b/frontend/src/editor/components/Sidebar/index.tsx
index 5c62959..d8298ac 100644
--- a/frontend/src/editor/components/Sidebar/index.tsx
+++ b/frontend/src/editor/components/Sidebar/index.tsx
@@ -1,4 +1,3 @@
-import type { TFunction } from 'i18next';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { type FC, useMemo } from 'react';
 import {
@@ -18,19 +17,19 @@ const MAX_WIDTH = 650;
 
 export interface SidebarTab {
   id: Exclude<SidebarPanelType, 'none'>;
-  getTitle: (t: TFunction) => string;
+  title: string;
   component: FC;
 }
 
 export const SIDEBAR_TABS: SidebarTab[] = [
   {
     id: 'outline',
-    getTitle: (t) => t('sidebar.outline.title', '大纲'),
+    title: '大纲',
     component: OutlinePanel,
   },
   {
     id: 'bpm',
-    getTitle: (t) => t('sidebar.bpm.title', 'BPM'),
+    title: 'BPM',
     component: BpmPanel,
   },
 ];
diff --git a/frontend/src/editor/components/SuspensePlaceHolder/index.tsx b/frontend/src/editor/components/SuspensePlaceHolder/index.tsx
index 4cb1d43..dcb97f7 100644
--- a/frontend/src/editor/components/SuspensePlaceHolder/index.tsx
+++ b/frontend/src/editor/components/SuspensePlaceHolder/index.tsx
@@ -1,30 +1,20 @@
-import { Flex, Spinner, Text } from '@radix-ui/themes';
 import { motion } from 'framer-motion';
+import { Loader2 } from 'lucide-react';
 import { type PropsWithChildren, Suspense } from 'react';
-import { useTranslation } from 'react-i18next';
+
 export const SuspensePlaceHolder = (props: PropsWithChildren) => {
-  const { t } = useTranslation();
   return (
     <Suspense
       fallback={
-        <Flex
-          justify="center"
-          align="center"
-          width="100%"
-          height="100%"
-          minHeight="0"
-          minWidth="0"
-          direction="column"
-          gap="2"
-          asChild
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="flex h-full w-full min-w-0 flex-col items-center justify-center gap-2"
         >
-          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
-            <Spinner />
-            <Text color="gray" size="1">
-              {t('ribbonBar.loading', '面板载入中...')}
-            </Text>
-          </motion.div>
-        </Flex>
+          <Loader2 className="size-4 animate-spin text-ink-3" />
+          <span className="text-xs text-ink-3">面板载入中...</span>
+        </motion.div>
       }
     >
       {props.children}
diff --git a/frontend/src/editor/hooks/useFileOpener.ts b/frontend/src/editor/hooks/useFileOpener.ts
index 3a5957f..4bab589 100644
--- a/frontend/src/editor/hooks/useFileOpener.ts
+++ b/frontend/src/editor/hooks/useFileOpener.ts
@@ -12,7 +12,6 @@ import {
 import { openDB } from 'idb';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 import { uid } from 'uid';
 import { audioEngine } from '$/modules/audio/audio-engine';
 import { getProjectList } from '$/modules/project/autosave/autosave';
@@ -30,6 +29,7 @@ import {
   fileUpdateSessionAtom,
   isDirtyAtom,
   lyricLinesAtom,
+  markLyricLinesSavedAtom,
   newLyricLinesAtom,
   projectIdAtom,
   saveFileNameAtom,
@@ -167,13 +167,13 @@ export const useFileOpener = () => {
   const setProjectId = useSetAtom(projectIdAtom);
   const setSaveFileName = useSetAtom(saveFileNameAtom);
   const setSourceFileContent = useSetAtom(sourceFileContentAtom);
+  const setMarkSaved = useSetAtom(markLyricLinesSavedAtom);
   const setConfirmDialog = useSetAtom(confirmDialogAtom);
   const isDirty = useAtomValue(isDirtyAtom);
   const fileUpdateSession = useAtomValue(fileUpdateSessionAtom);
   const defaultTtmlAuthorGithub = useAtomValue(defaultTtmlAuthorGithubAtom);
   const defaultTtmlAuthorGithubLogin = useAtomValue(defaultTtmlAuthorGithubLoginAtom);
   const handleTtmlError = useTtmlErrorHandler();
-  const { t } = useTranslation();
   const setPushNotification = useSetAtom(pushNotificationAtom);
 
   const normalizeLyricLines = useCallback((lyricLines: LyricLine[]): TTMLLyric => {
@@ -269,9 +269,7 @@ export const useFileOpener = () => {
           lyricData = normalizeLyricLines(rawLines);
         } else {
           setPushNotification({
-            title: t('error.unsupportedFileFormat', '不支持的文件格式: {ext}', {
-              ext,
-            }),
+            title: `不支持的文件格式: ${ext}`,
             level: 'error',
             source: 'useFileOpener',
           });
@@ -313,7 +311,7 @@ export const useFileOpener = () => {
       } catch (e) {
         fileOpenerLogger.error(`Failed to open file: ${file.name}`, e);
         setPushNotification({
-          title: t('error.openFileFailed', '打开文件失败'),
+          title: '打开文件失败',
           level: 'error',
           source: 'useFileOpener',
         });
@@ -328,7 +326,6 @@ export const useFileOpener = () => {
       normalizeLyricLines,
       defaultTtmlAuthorGithub,
       defaultTtmlAuthorGithubLogin,
-      t,
       setPushNotification,
       handleTtmlError,
     ]
@@ -364,18 +361,15 @@ export const useFileOpener = () => {
       if (isDirty) {
         setConfirmDialog({
           open: true,
-          title: t('confirmDialog.openFile.title', '确认打开文件'),
-          description: t(
-            'confirmDialog.openFile.description',
-            '当前文件有未保存的更改。如果继续，这些更改将会丢失。确定要打开新文件吗？'
-          ),
+          title: '确认打开文件',
+          description: '当前文件有未保存的更改。如果继续，这些更改将会丢失。确定要打开新文件吗？',
           onConfirm: run,
         });
       } else {
         run();
       }
     },
-    [fileUpdateSession, isDirty, performOpenFile, setConfirmDialog, t]
+    [fileUpdateSession, isDirty, performOpenFile, setConfirmDialog]
   );
 
   const openCachedAudio = useCallback(async () => {
@@ -383,7 +377,7 @@ export const useFileOpener = () => {
       const record = await readAudioCache();
       if (!record?.file) {
         setPushNotification({
-          title: t('audioPanel.cachedAudioMissing', '未找到缓存音频'),
+          title: '未找到缓存音频',
           level: 'warning',
           source: 'useFileOpener',
         });
@@ -394,19 +388,19 @@ export const useFileOpener = () => {
       const file = new File([record.file], name, { type });
       await loadAudioFile(file, { extractMetadata: false });
       setPushNotification({
-        title: t('audioPanel.cachedAudioLoaded', '已从缓存加载音频'),
+        title: '已从缓存加载音频',
         level: 'success',
         source: 'useFileOpener',
       });
     } catch (error) {
       fileOpenerLogger.error('Failed to load cached audio', error);
       setPushNotification({
-        title: t('audioPanel.cachedAudioFailed', '读取缓存音频失败'),
+        title: '读取缓存音频失败',
         level: 'error',
         source: 'useFileOpener',
       });
     }
-  }, [loadAudioFile, setPushNotification, t]);
+  }, [loadAudioFile, setPushNotification]);
 
   const loadTtmlContent = useCallback(
     async (ttml: string, options?: { projectId?: string; fileName?: string }) => {
@@ -435,6 +429,7 @@ export const useFileOpener = () => {
         });
         return { ...prev, metadata: nextMetadata };
       });
+      setMarkSaved();
       return true;
     },
     [
@@ -442,6 +437,7 @@ export const useFileOpener = () => {
       defaultTtmlAuthorGithubLogin,
       handleTtmlError,
       setLyricLines,
+      setMarkSaved,
       setNewLyricLines,
       setProjectId,
       setSaveFileName,
diff --git a/frontend/src/editor/hooks/useRelativeTime.ts b/frontend/src/editor/hooks/useRelativeTime.ts
index 8c19a81..7a4bd22 100644
--- a/frontend/src/editor/hooks/useRelativeTime.ts
+++ b/frontend/src/editor/hooks/useRelativeTime.ts
@@ -1,22 +1,16 @@
 import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 
 /** 相对时间文案（刚刚 / N 分钟前 / N 小时前 / N 天前）。 */
 export const useRelativeTime = () => {
-  const { t } = useTranslation();
+  return useCallback((timestamp: number) => {
+    const diff = Date.now() - timestamp;
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
 
-  return useCallback(
-    (timestamp: number) => {
-      const diff = Date.now() - timestamp;
-      const minutes = Math.floor(diff / 60000);
-      const hours = Math.floor(minutes / 60);
-      const days = Math.floor(hours / 24);
-
-      if (days > 0) return t('time.daysAgo', '{count}天前', { count: days });
-      if (hours > 0) return t('time.hoursAgo', '{count}小时前', { count: hours });
-      if (minutes > 0) return t('time.minutesAgo', '{count}分钟前', { count: minutes });
-      return t('time.justNow', '刚刚');
-    },
-    [t]
-  );
+    if (days > 0) return `${days}天前`;
+    if (hours > 0) return `${hours}小时前`;
+    if (minutes > 0) return `${minutes}分钟前`;
+    return '刚刚';
+  }, []);
 };
diff --git a/frontend/src/editor/i18n/index.ts b/frontend/src/editor/i18n/index.ts
deleted file mode 100644
index ddacb4b..0000000
--- a/frontend/src/editor/i18n/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-
-if (!i18n.isInitialized) {
-  i18n.use(initReactI18next).init({
-    resources: { zh: { translation: {} } },
-    lng: 'zh',
-    fallbackLng: 'zh',
-    interpolation: {
-      escapeValue: false,
-    },
-    returnNull: false,
-  });
-}
-
-export default i18n;
diff --git a/frontend/src/editor/index.css b/frontend/src/editor/index.css
index 558bf6a..1f3d558 100644
--- a/frontend/src/editor/index.css
+++ b/frontend/src/editor/index.css
@@ -44,7 +44,7 @@ body,
   overscroll-behavior: none;
 }
 
-.radix-themes {
+:root {
   --default-font-family: 'MiSans', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 
   --default-font-family-mono:
@@ -78,18 +78,6 @@ body,
   }
 }
 
-.rt-BaseButton:where(.rt-variant-soft) {
-  background-color: var(--accent-a3);
-
-  &:hover {
-    background-color: var(--accent-a4);
-  }
-}
-
-.rt-BaseButton:where(.rt-variant-soft):where(:active:not([data-state='open'])) {
-  background-color: var(--accent-a5);
-}
-
 .amll-lyric-player {
   margin: 0 !important;
   padding: 0 !important;
diff --git a/frontend/src/editor/modules/audio/audio-engine.ts b/frontend/src/editor/modules/audio/audio-engine.ts
index 1ef47b2..b55fd91 100644
--- a/frontend/src/editor/modules/audio/audio-engine.ts
+++ b/frontend/src/editor/modules/audio/audio-engine.ts
@@ -62,6 +62,11 @@ class AudioEngineWrapper extends EventTarget {
     fileName: '',
   };
 
+  private _loadToken = 0;
+  private _inflightLoads = new Map<string, Promise<TTMLMetadata[]>>();
+  private _inflightUrl: string | null = null;
+  private _abortCurrent: AbortController | null = null;
+
   //#region Audio context basics
   private _ctx: AudioContext | null = null;
   get ctx() {
@@ -325,58 +330,164 @@ class AudioEngineWrapper extends EventTarget {
     return this.mapAudioMetadataToTTML();
   }
 
-  /**
-   * 从 URL 加载音频。
-   *
-   * 审核页的参考音频是后端给的直链：上传音频的
-   * `/api/v1/uploads/file/xxx`，或者**网易云解析出来的播放地址**。
-   *
-   * ## 做法：完整下载 → 交给引擎
-   *
-   * 整个文件先 `fetch` 成 `File`，再走 `loadMusic()`（内部
-   * `decodeAudioData` 一次性解码）。**不流式播放**，理由：
-   *
-   *  - 时长立刻可知，歌词编辑器的时间轴/进度条不用等
-   *  - 解码只有一次失败点（`decodeAudioData`），错误信息是浏览器给的，
-   *    比 wasm 的 `last_error` 可读得多
-   *  - 审核时经常来回拖进度、反复试听同一段，全量在手更稳
-   *
-   * 关于 CORS：`fetch` 确实要求对方带 `Access-Control-Allow-Origin`，
-   * 但本站两条音源都满足 —— 上传音频走同源 `/api/v1/uploads/file/*`，
-   * 网易云直链本身也带 CORS 头（详情页 `PlayerBoot` 早就在
-   * `fetch` + `decodeAudioData` 这么用了）。
-   *
-   * 关于文件名：`parseAudioTrackMetadata` 靠扩展名判断音频格式，
-   * 而网易云直链的 URL 里通常没有扩展名，所以从 pathname 猜一个；
-   * 猜不到就用 `audio`（此时只是读不出内嵌歌名，解码不受影响）。
-   */
   async loadMusicFromUrl(url: string): Promise<TTMLMetadata[]> {
-    let blob: Blob;
+    const inflight = this._inflightLoads.get(url);
+    if (inflight) return inflight;
+
+    const token = ++this._loadToken;
+    if (this._inflightUrl !== null && this._inflightUrl !== url) {
+      this._abortCurrent?.abort();
+    }
+    const controller = new AbortController();
+    this._abortCurrent = controller;
+    this._inflightUrl = url;
+
+    const task = (async (): Promise<TTMLMetadata[]> => {
+      let blob: Blob;
+      try {
+        blob = await this.downloadAudioBlob(url, controller.signal);
+      } catch (e) {
+        if (e instanceof DOMException && e.name === 'AbortError') {
+          throw new Error('音频加载已被更新的请求取代', { cause: e });
+        }
+        throw new Error(
+          `无法下载参考音频（${url.slice(0, 120)}）。原始错误：${
+            e instanceof Error ? e.message : String(e)
+          }`,
+          { cause: e }
+        );
+      }
+
+      if (token !== this._loadToken) {
+        throw new Error('音频加载已被更新的请求取代');
+      }
+
+      if (blob.size === 0) {
+        throw new Error(`参考音频为空（${url.slice(0, 120)}）`);
+      }
+
+      const name = audioFileNameFromUrl(url) || 'audio';
+      const file = new File([blob], name, {
+        type: blob.type || 'audio/*',
+      });
+      const metadata = await this.loadMusic(file);
+
+      if (token !== this._loadToken) {
+        throw new Error('音频加载已被更新的请求取代');
+      }
+      return metadata;
+    })();
+
+    this._inflightLoads.set(url, task);
     try {
-      const response = await fetch(url);
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status} ${response.statusText}`);
+      return await task;
+    } finally {
+      // 无论成功失败都摘掉在途登记，允许之后重试同一 URL。
+      if (this._inflightLoads.get(url) === task) {
+        this._inflightLoads.delete(url);
+      }
+      // 该 URL 已不再是「在途」时，同步清掉标记，避免下次误判为「切换源」。
+      if (this._inflightLoads.size === 0) {
+        this._inflightUrl = null;
+        this._abortCurrent = null;
       }
-      blob = await response.blob();
-    } catch (e) {
-      console.error('fetch/读取 blob 失败', e);
-      throw new Error(
-        `无法下载参考音频（${url.slice(0, 120)}）。原始错误：${
-          e instanceof Error ? e.message : String(e)
-        }`,
-        { cause: e }
-      );
     }
+  }
 
-    if (blob.size === 0) {
-      throw new Error(`参考音频为空（${url.slice(0, 120)}）`);
-    }
+  private async downloadAudioBlob(url: string, signal: AbortSignal): Promise<Blob> {
+    /** 最多尝试轮次（首轮 + 续传）。按实测每次约 4~8MB 被掐断，足够拉完 20MB。 */
+    const MAX_ROUNDS = 8;
+    /** 每轮中断后的退避 */
+    const RETRY_BACKOFF_MS = 700;
+
+    const chunks: Uint8Array[] = [];
+    let received = 0;
+    let total: number | null = null;
+    let contentType = 'audio/*';
+    let lastError: unknown;
+
+    for (let round = 0; round < MAX_ROUNDS; round++) {
+      if (signal.aborted) throw new DOMException('Aborted', 'AbortError');
+      const startedAt = Date.now();
+      try {
+        const headers: Record<string, string> = {};
+        // 已收部分字节时，从断点续传
+        if (received > 0) headers.Range = `bytes=${received}-`;
+
+        const response = await fetch(url, {
+          signal,
+          cache: 'no-store',
+          credentials: 'same-origin',
+          headers,
+        });
 
-    const name = audioFileNameFromUrl(url) || 'audio';
-    const file = new File([blob], name, {
-      type: blob.type || 'audio/*',
-    });
-    return this.loadMusic(file);
+        if (round === 0) {
+          if (response.status === 206) {
+            throw new Error('服务器返回了分段内容（206），音频未完整下载');
+          }
+          if (!response.ok) {
+            // 4xx 是确定性失败（地址不对 / 无权限），重试无意义
+            const err = new Error(`HTTP ${response.status} ${response.statusText}`);
+            if (response.status >= 400 && response.status < 500) {
+              (err as { retryable?: boolean }).retryable = false;
+            }
+            throw err;
+          }
+          contentType = response.headers.get('content-type') || contentType;
+          const len = Number(response.headers.get('content-length'));
+          total = Number.isFinite(len) && len > 0 ? len : null;
+        } else if (response.status !== 206) {
+          throw new Error(`续传请求未返回 206（HTTP ${response.status}）`);
+        }
+
+        const reader = response.body?.getReader();
+        if (!reader) {
+          // 没有可读流（极老环境）：退回一次性 blob()
+          return await response.blob();
+        }
+        for (;;) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          if (value && value.length > 0) {
+            chunks.push(value);
+            received += value.length;
+          }
+        }
+
+        // 服务端声明了长度却没传完：当成本轮中断，继续续传
+        if (total !== null && received < total) {
+          throw new Error(`响应提前结束：已收 ${received}/${total} 字节`);
+        }
+
+        const blob = new Blob(chunks as BlobPart[], { type: contentType });
+        if (round > 0) {
+          console.info('[audio-engine] 音频断点续传完成', {
+            url,
+            bytes: received,
+            rounds: round + 1,
+          });
+        }
+        return blob;
+      } catch (e) {
+        // 主动 abort（被更新的请求取代）不重试
+        if (e instanceof DOMException && e.name === 'AbortError') throw e;
+        if (e instanceof Error && (e as { retryable?: boolean }).retryable === false) throw e;
+        lastError = e;
+        console.warn('音频下载中断，将断点续传', {
+          url,
+          round: round + 1,
+          received,
+          total,
+          ms: Date.now() - startedAt,
+          error: e instanceof Error ? `${e.name}: ${e.message}` : String(e),
+        });
+        if (round === MAX_ROUNDS - 1) break;
+        await new Promise((r) => setTimeout(r, RETRY_BACKOFF_MS));
+        if (signal.aborted) throw new DOMException('Aborted', 'AbortError');
+      }
+    }
+    console.error('音频下载重试全部失败', { url, received, total, error: lastError });
+    throw lastError;
   }
 
   private mapAudioMetadataToTTML(): TTMLMetadata[] {
diff --git a/frontend/src/editor/modules/audio/components/AudioSlider.tsx b/frontend/src/editor/modules/audio/components/AudioSlider.tsx
index ac9cd55..516821e 100644
--- a/frontend/src/editor/modules/audio/components/AudioSlider.tsx
+++ b/frontend/src/editor/modules/audio/components/AudioSlider.tsx
@@ -1,4 +1,3 @@
-import { Card } from '@radix-ui/themes';
 import { useAtomValue } from 'jotai';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { audioEngine } from '$/modules/audio/audio-engine';
@@ -127,13 +126,9 @@ export const AudioSlider = () => {
   );
 
   return (
-    <Card
-      style={{
-        alignSelf: 'center',
-        width: '100%',
-        height: '2.5em',
-        padding: '0',
-      }}
+    <div
+      className="w-full self-center overflow-hidden rounded-lg border border-line bg-card"
+      style={{ height: '2.5em', padding: 0 }}
     >
       <section
         className={styles.waveformContainer}
@@ -171,6 +166,6 @@ export const AudioSlider = () => {
           isDraggingRef={isDraggingRef}
         />
       </section>
-    </Card>
+    </div>
   );
 };
diff --git a/frontend/src/editor/modules/audio/components/index.tsx b/frontend/src/editor/modules/audio/components/index.tsx
index a5e6c0c..c672b9a 100644
--- a/frontend/src/editor/modules/audio/components/index.tsx
+++ b/frontend/src/editor/modules/audio/components/index.tsx
@@ -9,30 +9,13 @@
  * https://github.com/amll-dev/amll-ttml-tool/blob/main/LICENSE
  */
 
-import {
-  ChevronDownFilled,
-  ChevronUpFilled,
-  MyLocationRegular,
-  PauseFilled,
-  PlayFilled,
-  Speaker2Filled,
-} from '@fluentui/react-icons';
-import {
-  Button,
-  Card,
-  Flex,
-  Grid,
-  HoverCard,
-  IconButton,
-  Inset,
-  Slider,
-  Spinner,
-  Text,
-  Tooltip,
-} from '@radix-ui/themes';
 import { useAtom, useAtomValue, useSetAtom, useStore } from 'jotai';
+import { ChevronDown, ChevronUp, Loader2, LocateFixed, Pause, Play, Volume2 } from 'lucide-react';
 import { type FC, memo, useCallback, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
+import { Slider } from '@/components/ui/slider';
+import { SimpleTooltip } from '@/components/ui/tooltip';
 import { audioEngine } from '$/modules/audio/audio-engine';
 import { AudioSlider } from '$/modules/audio/components/AudioSlider';
 import { useBpmControl } from '$/modules/audio/hooks';
@@ -120,17 +103,9 @@ const CurrentTimeDisplay = memo(() => {
   }, []);
 
   return (
-    <Text
-      size="2"
-      ref={timeRef}
-      style={{
-        minWidth: '5.5em',
-        textAlign: 'left',
-        fontVariantNumeric: 'tabular-nums',
-      }}
-    >
+    <span ref={timeRef} className="text-left text-sm tabular-nums" style={{ minWidth: '5.5em' }}>
       00:00.000
-    </Text>
+    </span>
   );
 });
 
@@ -143,7 +118,6 @@ export const AudioControls: FC = memo(() => {
   const [volume, setVolume] = useAtom(volumeAtom);
   const [playbackRate, setPlaybackRate] = useAtom(playbackRateAtom);
   const { lyricLines } = useAtomValue(lyricLinesAtom);
-  const { t } = useTranslation();
   const openTab = useSetAtom(openTabAtom);
 
   const setLocateAction = useSetAtom(locateActionAtom);
@@ -183,120 +157,127 @@ export const AudioControls: FC = memo(() => {
   }, [playbackRate]);
 
   return (
-    <Card m="2" mt="0">
-      <Inset>
-        <AudioPlaybackKeyBinding />
-        <AuditionKeyBinding />
-        <Flex direction="column">
-          <div style={{ display: spectrogramVisible ? 'flex' : 'none' }}>
-            <AudioSpectrogram />
-          </div>
-          <Flex align="center" px="2" gapX="2">
-            <HoverCard.Root>
-              <HoverCard.Trigger>
-                <IconButton my="2" variant="soft" title={t('audioPanel.volume', '音量')}>
-                  <Speaker2Filled />
-                </IconButton>
-              </HoverCard.Trigger>
-              <HoverCard.Content>
-                <Flex direction="column" align="center">
-                  <Grid columns="0fr 7em 2em" gap="2" align="baseline">
-                    <Text wrap="nowrap">{t('audioPanel.volume', '音量')}</Text>
-                    <Slider
-                      min={0}
-                      max={1}
-                      defaultValue={[volume]}
-                      step={0.01}
-                      onValueChange={(v) => setVolume(v[0] ?? volume)}
-                    />
-                    <Text wrap="nowrap" color="gray" size="1">
-                      {(volume * 100).toFixed()}%
-                    </Text>
-                    <Text wrap="nowrap">{t('audioPanel.playbackRate', '播放速度')}</Text>
-                    <Slider
-                      min={0.1}
-                      max={2}
-                      defaultValue={[playbackRate]}
-                      step={0.05}
-                      onValueChange={(v) => setPlaybackRate(v[0] ?? playbackRate)}
-                    />
-                    <Text wrap="nowrap" color="gray" size="1">
-                      {playbackRate.toFixed(2)}x
-                    </Text>
-                    <Text wrap="nowrap">{t('audioPanel.bpm', 'BPM')}</Text>
-                    <Flex align="center">
-                      {bpmState.status === 'analyzing' && (
-                        <Button variant="soft" size="1" onClick={() => openTab('bpm')}>
-                          <Spinner size="1" />
-                        </Button>
-                      )}
-                      {bpmState.status === 'completed' && (
-                        <Button variant="soft" size="1" onClick={() => openTab('bpm')}>
-                          {currentBpm ?? Math.round(bpmState.result.bpm)}
-                        </Button>
-                      )}
-                      {bpmState.status === 'error' && (
-                        <Button variant="soft" color="red" size="1" onClick={() => openTab('bpm')}>
-                          {t('audioPanel.bpmError', '错误')}
-                        </Button>
-                      )}
-                      {bpmState.status === 'idle' && (
-                        <Button variant="soft" color="gray" size="1" onClick={() => openTab('bpm')}>
-                          -
-                        </Button>
-                      )}
-                    </Flex>
-                    <span />
-                  </Grid>
-                </Flex>
-              </HoverCard.Content>
-            </HoverCard.Root>
-            <Tooltip content={t('audioPanel.playPause', '暂停 / 播放音乐')}>
-              <IconButton
-                my="2"
-                ml="0"
-                variant="soft"
-                disabled={!audioLoaded}
-                onClick={onTogglePlay}
-              >
-                {audioPlaying ? <PauseFilled /> : <PlayFilled />}
-              </IconButton>
-            </Tooltip>
-            <CurrentTimeDisplay />
-            <AudioSlider />
-            <Text
-              size="2"
-              style={{
-                minWidth: '5.5em',
-              }}
+    <div className="mx-2 mb-2 overflow-hidden rounded-lg border border-line bg-card">
+      <AudioPlaybackKeyBinding />
+      <AuditionKeyBinding />
+      <div className="flex flex-col">
+        <div style={{ display: spectrogramVisible ? 'flex' : 'none' }}>
+          <AudioSpectrogram />
+        </div>
+        <div className="flex items-center gap-x-2 px-2">
+          <HoverCard openDelay={200} closeDelay={100}>
+            <HoverCardTrigger asChild>
+              <Button variant="secondary" size="icon" className="my-2 size-7 shrink-0" title="音量">
+                <Volume2 className="size-4" />
+              </Button>
+            </HoverCardTrigger>
+            <HoverCardContent className="w-auto">
+              <div className="grid grid-cols-[auto_7em_2em] items-baseline gap-2">
+                <span className="whitespace-nowrap">音量</span>
+                <Slider
+                  min={0}
+                  max={1}
+                  step={0.01}
+                  value={volume}
+                  onValueChange={(v) => setVolume(v)}
+                />
+                <span className="whitespace-nowrap text-xs text-ink-3">
+                  {(volume * 100).toFixed()}%
+                </span>
+                <span className="whitespace-nowrap">播放速度</span>
+                <Slider
+                  min={0.1}
+                  max={2}
+                  step={0.05}
+                  value={playbackRate}
+                  onValueChange={(v) => setPlaybackRate(v)}
+                />
+                <span className="whitespace-nowrap text-xs text-ink-3">
+                  {playbackRate.toFixed(2)}x
+                </span>
+                <span className="whitespace-nowrap">BPM</span>
+                <div className="flex items-center">
+                  {bpmState.status === 'analyzing' && (
+                    <Button variant="secondary" className="h-6 px-2" onClick={() => openTab('bpm')}>
+                      <Loader2 className="size-3.5 animate-spin" />
+                    </Button>
+                  )}
+                  {bpmState.status === 'completed' && (
+                    <Button
+                      variant="secondary"
+                      className="h-6 px-2 text-xs"
+                      onClick={() => openTab('bpm')}
+                    >
+                      {currentBpm ?? Math.round(bpmState.result.bpm)}
+                    </Button>
+                  )}
+                  {bpmState.status === 'error' && (
+                    <Button
+                      variant="destructive"
+                      className="h-6 px-2 text-xs"
+                      onClick={() => openTab('bpm')}
+                    >
+                      错误
+                    </Button>
+                  )}
+                  {bpmState.status === 'idle' && (
+                    <Button
+                      variant="secondary"
+                      className="h-6 px-2 text-xs"
+                      onClick={() => openTab('bpm')}
+                    >
+                      -
+                    </Button>
+                  )}
+                </div>
+                <span />
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+          <SimpleTooltip label="暂停 / 播放音乐">
+            <Button
+              variant="secondary"
+              size="icon"
+              className="my-2 size-7 shrink-0"
+              disabled={!audioLoaded}
+              onClick={onTogglePlay}
+            >
+              {audioPlaying ? <Pause className="size-4" /> : <Play className="size-4" />}
+            </Button>
+          </SimpleTooltip>
+          <CurrentTimeDisplay />
+          <AudioSlider />
+          <span className="text-sm" style={{ minWidth: '5.5em' }}>
+            {msToTimestamp(currentDuration)}
+          </span>
+          <SimpleTooltip label="定位">
+            <Button
+              variant="secondary"
+              size="icon"
+              className="my-2 size-7 shrink-0"
+              onClick={handleLocate}
+              disabled={lyricLines.length === 0}
+            >
+              <LocateFixed className="size-[18px]" />
+            </Button>
+          </SimpleTooltip>
+          <SimpleTooltip label="展开 / 收起频谱图">
+            <Button
+              variant="secondary"
+              size="icon"
+              className="my-2 size-7 shrink-0"
+              onClick={() => setSpectrogramVisible(!spectrogramVisible)}
             >
-              {msToTimestamp(currentDuration)}
-            </Text>
-            <Tooltip content={t('lyricEditor.locate', '定位')}>
-              <IconButton
-                my="2"
-                ml="0"
-                variant="soft"
-                onClick={handleLocate}
-                disabled={lyricLines.length === 0}
-              >
-                <MyLocationRegular fontSize={18} />
-              </IconButton>
-            </Tooltip>
-            <Tooltip content={t('audioPanel.expandSpectrogram', '展开 / 收起频谱图')}>
-              <IconButton
-                my="2"
-                ml="0"
-                variant="soft"
-                onClick={() => setSpectrogramVisible(!spectrogramVisible)}
-              >
-                {spectrogramVisible ? <ChevronDownFilled /> : <ChevronUpFilled />}
-              </IconButton>
-            </Tooltip>
-          </Flex>
-        </Flex>
-      </Inset>
-    </Card>
+              {spectrogramVisible ? (
+                <ChevronDown className="size-4" />
+              ) : (
+                <ChevronUp className="size-4" />
+              )}
+            </Button>
+          </SimpleTooltip>
+        </div>
+      </div>
+    </div>
   );
 });
 
diff --git a/frontend/src/editor/modules/audio/hooks/useAudioFeedback.ts b/frontend/src/editor/modules/audio/hooks/useAudioFeedback.ts
index b6488f1..3db1e58 100644
--- a/frontend/src/editor/modules/audio/hooks/useAudioFeedback.ts
+++ b/frontend/src/editor/modules/audio/hooks/useAudioFeedback.ts
@@ -1,6 +1,5 @@
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 import { uid } from 'uid';
 import { audioEngineStateAtom, audioErrorAtom } from '$/modules/audio/states/index.ts';
 import {
@@ -13,7 +12,6 @@ export const useAudioFeedback = () => {
   const engineState = useAtomValue(audioEngineStateAtom);
   const [errorMsg, setErrorMsg] = useAtom(audioErrorAtom);
   const notificationId = useRef<string | null>(null);
-  const { t } = useTranslation();
   const setPushNotification = useSetAtom(pushNotificationAtom);
   const upsertNotification = useSetAtom(upsertNotificationAtom);
   const removeNotification = useSetAtom(removeNotificationAtom);
@@ -25,7 +23,7 @@ export const useAudioFeedback = () => {
       }
       upsertNotification({
         id: notificationId.current,
-        title: t('audio.status.loading', '正在加载音频...'),
+        title: '正在加载音频...',
         level: 'info',
         source: 'Audio',
       });
@@ -36,12 +34,12 @@ export const useAudioFeedback = () => {
       removeNotification(notificationId.current);
       notificationId.current = null;
     }
-  }, [engineState, t, upsertNotification, removeNotification]);
+  }, [engineState, upsertNotification, removeNotification]);
 
   useEffect(() => {
     if (errorMsg) {
       setPushNotification({
-        title: `${t('audio.error.workerError', '处理音频时出错')}: ${errorMsg}`,
+        title: `处理音频时出错: ${errorMsg}`,
         level: 'error',
         source: 'Audio',
       });
@@ -52,5 +50,5 @@ export const useAudioFeedback = () => {
 
       setErrorMsg(null);
     }
-  }, [errorMsg, setErrorMsg, t, setPushNotification, removeNotification]);
+  }, [errorMsg, setErrorMsg, setPushNotification, removeNotification]);
 };
diff --git a/frontend/src/editor/modules/keyboard/types.ts b/frontend/src/editor/modules/keyboard/types.ts
index c292cf1..f1b3036 100644
--- a/frontend/src/editor/modules/keyboard/types.ts
+++ b/frontend/src/editor/modules/keyboard/types.ts
@@ -1,8 +1,6 @@
-import type { ParseKeys } from 'i18next';
 import type { WritableAtom } from 'jotai';
 import type { RESET_KEYBINDING } from '$/utils/keybindings';
-
-export type I18nKey = ParseKeys<'translation'>;
+export type I18nKey = string;
 export type KeyBindingsConfig = string[];
 
 export interface KeyBindingCommand {
diff --git a/frontend/src/editor/modules/lyric-drag/DragGhostRenderer.tsx b/frontend/src/editor/modules/lyric-drag/DragGhostRenderer.tsx
index 647baec..715704c 100644
--- a/frontend/src/editor/modules/lyric-drag/DragGhostRenderer.tsx
+++ b/frontend/src/editor/modules/lyric-drag/DragGhostRenderer.tsx
@@ -1,47 +1,32 @@
-import { ArrowExportRegular, CopyRegular } from '@fluentui/react-icons';
 import { useAtomValue } from 'jotai';
-import { useEffect, useRef, useState } from 'react';
+import { ArrowUpFromLine, Copy } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { useTranslation } from 'react-i18next';
 import { draggedCountAtom, isCopyModeAtom } from '$/states/main';
 import styles from './DragGhost.module.css';
 
 export const DragGhostRenderer = () => {
-  const { t } = useTranslation();
-
   const draggedCount = useAtomValue(draggedCountAtom);
   const isCopyMode = useAtomValue(isCopyModeAtom);
 
   const [portalContainer, setPortalContainer] = useState<Element | null>(null);
-  const anchorRef = useRef<HTMLSpanElement>(null);
 
   useEffect(() => {
-    if (anchorRef.current) {
-      const themeContainer = anchorRef.current.closest('.radix-themes');
-      setPortalContainer(themeContainer || document.body);
-    }
+    setPortalContainer(document.body);
   }, []);
 
-  const actionText = isCopyMode ? t('common.copyTo', '复制到') : t('common.moveTo', '移动到');
-
-  if (!portalContainer) {
-    return <span ref={anchorRef} style={{ display: 'none' }} aria-hidden="true" />;
-  }
+  const actionText = isCopyMode ? '复制到' : '移动到';
 
-  return (
-    <>
-      <span ref={anchorRef} style={{ display: 'none' }} aria-hidden="true" />
+  if (!portalContainer) return null;
 
-      {createPortal(
-        <div className={styles.dragGhost}>
-          {isCopyMode ? <CopyRegular fontSize={18} /> : <ArrowExportRegular fontSize={18} />}
+  return createPortal(
+    <div className={styles.dragGhost}>
+      {isCopyMode ? <Copy size={18} /> : <ArrowUpFromLine size={18} />}
 
-          <span className={styles.actionText}>{actionText}</span>
+      <span className={styles.actionText}>{actionText}</span>
 
-          {draggedCount > 1 && <span className={styles.countBadge}>{draggedCount}</span>}
-        </div>,
-        portalContainer
-      )}
-    </>
+      {draggedCount > 1 && <span className={styles.countBadge}>{draggedCount}</span>}
+    </div>,
+    portalContainer
   );
 };
diff --git a/frontend/src/editor/modules/lyric-editor/components/TouchSyncPanel/index.module.css b/frontend/src/editor/modules/lyric-editor/components/TouchSyncPanel/index.module.css
deleted file mode 100644
index 88ba5e6..0000000
--- a/frontend/src/editor/modules/lyric-editor/components/TouchSyncPanel/index.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.syncButtons > button {
-  padding-left: 0;
-  padding-right: 0;
-  text-wrap: nowrap;
-  white-space: nowrap;
-}
diff --git a/frontend/src/editor/modules/lyric-editor/components/TouchSyncPanel/index.tsx b/frontend/src/editor/modules/lyric-editor/components/TouchSyncPanel/index.tsx
index e93a84d..74a1939 100644
--- a/frontend/src/editor/modules/lyric-editor/components/TouchSyncPanel/index.tsx
+++ b/frontend/src/editor/modules/lyric-editor/components/TouchSyncPanel/index.tsx
@@ -1,7 +1,6 @@
-import { Button, Card, Grid } from '@radix-ui/themes';
 import { useStore } from 'jotai';
 import type { FC } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
 import {
   keyMoveNextWordAtom,
   keyMovePrevWordAtom,
@@ -10,18 +9,15 @@ import {
   keySyncStartAtom,
 } from '$/states/keybindings.ts';
 import { forceInvokeKeyBindingAtom } from '$/utils/keybindings.ts';
-import styles from './index.module.css';
 
 export const TouchSyncPanel: FC = () => {
   const store = useStore();
-  const { t } = useTranslation();
   return (
-    <Card m="2" mt="0" style={{ flexShrink: '0' }}>
-      <Grid rows="2" columns="6" gap="2" className={styles.syncButtons}>
+    <div className="mx-2 mb-2 shrink-0 rounded-lg border border-line bg-card p-2">
+      <div className="grid grid-cols-6 grid-rows-2 gap-2">
         <Button
-          variant="soft"
-          size="4"
-          style={{ gridColumn: 'span 3' }}
+          variant="secondary"
+          className="col-span-3 h-12 whitespace-nowrap px-0"
           onMouseDown={(evt) =>
             forceInvokeKeyBindingAtom(store, keyMovePrevWordAtom, evt.nativeEvent)
           }
@@ -29,13 +25,12 @@ export const TouchSyncPanel: FC = () => {
             forceInvokeKeyBindingAtom(store, keyMovePrevWordAtom, evt.nativeEvent)
           }
         >
-          {t('touchSyncPanel.prevWord', '跳上词')}
+          跳上词
         </Button>
 
         <Button
-          variant="soft"
-          size="4"
-          style={{ gridColumn: 'span 3' }}
+          variant="secondary"
+          className="col-span-3 h-12 whitespace-nowrap px-0"
           onMouseDown={(evt) =>
             forceInvokeKeyBindingAtom(store, keyMoveNextWordAtom, evt.nativeEvent)
           }
@@ -43,38 +38,35 @@ export const TouchSyncPanel: FC = () => {
             forceInvokeKeyBindingAtom(store, keyMoveNextWordAtom, evt.nativeEvent)
           }
         >
-          {t('touchSyncPanel.nextWord', '跳下词')}
+          跳下词
         </Button>
         <Button
-          variant="soft"
-          size="4"
-          style={{ gridColumn: 'span 2' }}
+          variant="secondary"
+          className="col-span-2 h-12 whitespace-nowrap px-0"
           onMouseDown={(evt) => forceInvokeKeyBindingAtom(store, keySyncStartAtom, evt.nativeEvent)}
           onTouchStart={(evt) =>
             forceInvokeKeyBindingAtom(store, keySyncStartAtom, evt.nativeEvent)
           }
         >
-          {t('ribbonBar.syncMode.startSync', '起始轴')}
+          起始轴
         </Button>
         <Button
-          variant="soft"
-          size="4"
-          style={{ gridColumn: 'span 2' }}
+          variant="secondary"
+          className="col-span-2 h-12 whitespace-nowrap px-0"
           onClick={(evt) => forceInvokeKeyBindingAtom(store, keySyncNextAtom, evt.nativeEvent)}
           onTouchStart={(evt) => forceInvokeKeyBindingAtom(store, keySyncNextAtom, evt.nativeEvent)}
         >
-          {t('ribbonBar.syncMode.continuousSync', '连续轴')}
+          连续轴
         </Button>
         <Button
-          variant="soft"
-          size="4"
-          style={{ gridColumn: 'span 2' }}
+          variant="secondary"
+          className="col-span-2 h-12 whitespace-nowrap px-0"
           onMouseDown={(evt) => forceInvokeKeyBindingAtom(store, keySyncEndAtom, evt.nativeEvent)}
           onTouchStart={(evt) => forceInvokeKeyBindingAtom(store, keySyncEndAtom, evt.nativeEvent)}
         >
-          {t('ribbonBar.syncMode.endSync', '结束轴')}
+          结束轴
         </Button>
-      </Grid>
-    </Card>
+      </div>
+    </div>
   );
 };
diff --git a/frontend/src/editor/modules/lyric-editor/components/index.module.css b/frontend/src/editor/modules/lyric-editor/components/index.module.css
index 6381214..9021dbe 100644
--- a/frontend/src/editor/modules/lyric-editor/components/index.module.css
+++ b/frontend/src/editor/modules/lyric-editor/components/index.module.css
@@ -113,7 +113,7 @@
   display: flex;
   gap: 0.25em;
 
-  & :global(.rt-TextFieldRoot) {
+  & input {
     min-width: 10em;
   }
 }
@@ -129,7 +129,7 @@
   color: var(--white-a6);
 }
 
-:global(.radix-themes.light) {
+:global(html:not(.dark)) {
   .startTime,
   .endTime {
     color: var(--white-a10);
@@ -226,9 +226,9 @@
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
 
-  &:has(> input:active),
-  &:has(> input:focus),
-  &:has(> input:hover),
+  &:active,
+  &:focus,
+  &:hover,
   &.empty {
     opacity: 1;
   }
@@ -445,7 +445,7 @@
   background-color: var(--orange-a5);
 }
 
-:global(.radix-themes.light) .lyricWord.selected {
+:global(html:not(.dark)) .lyricWord.selected {
   .startTime,
   .endTime {
     color: var(--white-a12);
@@ -537,7 +537,7 @@
   filter: saturate(0.35);
 }
 
-.annotationRemoved :global(.rt-TextFieldRoot),
+.annotationRemoved input,
 .annotationRemoved .displayWord {
   text-decoration: line-through;
   text-decoration-color: var(--red-a8);
diff --git a/frontend/src/editor/modules/lyric-editor/components/index.tsx b/frontend/src/editor/modules/lyric-editor/components/index.tsx
index 187f447..c653356 100644
--- a/frontend/src/editor/modules/lyric-editor/components/index.tsx
+++ b/frontend/src/editor/modules/lyric-editor/components/index.tsx
@@ -10,7 +10,6 @@
  */
 
 import { LayoutGroup } from 'framer-motion';
-import { Box, ContextMenu, Flex, Text } from '@radix-ui/themes';
 import { atom, useAtomValue, useSetAtom } from 'jotai';
 import { splitAtom } from 'jotai/utils';
 import { useSetImmerAtom } from 'jotai-immer';
@@ -24,8 +23,13 @@ import {
   useMemo,
   useRef,
 } from 'react';
-import { useTranslation } from 'react-i18next';
 import { ViewportList, type ViewportListRef } from 'react-viewport-list';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from '@/components/ui/context-menu';
 import { useFileOpener } from '$/hooks/useFileOpener.ts';
 import { audioEngine } from '$/modules/audio/audio-engine.ts';
 import { useLyricListDrag } from '$/modules/lyric-drag/useLyricListDrag';
@@ -84,7 +88,6 @@ export const LyricLinesView: FC = forwardRef<HTMLDivElement>((_props, ref) => {
   const playbackLocatedLineIndex = useAtomValue(playbackLocatedLineIndexAtom);
   const playbackHighlightedLineId = useAtomValue(playbackHighlightedLineIdAtom);
   const setPlaybackCurrentTime = useSetAtom(playbackCurrentTimeAtom);
-  const { t } = useTranslation();
   const { openFile } = useFileOpener();
 
   const handlePasteTTML = useCallback(async () => {
@@ -96,9 +99,9 @@ export const LyricLinesView: FC = forwardRef<HTMLDivElement>((_props, ref) => {
       });
       openFile(file, 'ttml');
     } catch (e) {
-      lyricLinesViewLogger.error(t('error.pasteClipboardFailed', '读取剪贴板失败'), e);
+      lyricLinesViewLogger.error('读取剪贴板失败', e);
     }
-  }, [openFile, t]);
+  }, [openFile]);
 
   const handleNewLine = useCallback(() => {
     editLyricLines((state) => {
@@ -207,30 +210,17 @@ export const LyricLinesView: FC = forwardRef<HTMLDivElement>((_props, ref) => {
 
   const innerView =
     editLyric.length === 0 ? (
-      <Flex
-        flexGrow="1"
-        gap="2"
-        align="center"
-        justify="center"
-        direction="column"
-        height="100%"
-        style={{ width: '100%', height: '100%' }}
+      <div
+        className="flex h-full w-full flex-1 flex-col items-center justify-center gap-2"
         ref={ref}
       >
-        <Text color="gray">{t('app.empty.title', '没有歌词行')}</Text>
-        <Text color="gray">
-          {t('app.empty.description', '在顶部面板中添加新歌词行或从菜单栏打开 / 导入已有歌词')}
-        </Text>
-      </Flex>
+        <span className="text-ink-3">没有歌词行</span>
+        <span className="text-ink-3">在顶部面板中添加新歌词行或从菜单栏打开 / 导入已有歌词</span>
+      </div>
     ) : (
-      <Box
-        flexGrow="1"
-        className={styles.lyricLinesWrapper}
-        height="100%"
-        style={{ width: '100%', height: '100%' }}
-      >
-        <Box
-          flexGrow="1"
+      <div className={`h-full w-full flex-1 ${styles.lyricLinesWrapper}`}>
+        <div
+          className="flex-1"
           style={{
             padding: toolMode === ToolMode.Sync ? '20vh 0' : undefined,
             maxHeight: '100%',
@@ -253,33 +243,23 @@ export const LyricLinesView: FC = forwardRef<HTMLDivElement>((_props, ref) => {
               )}
             </ViewportList>
           </LayoutGroup>
-        </Box>
-      </Box>
+        </div>
+      </div>
     );
 
   return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          flexGrow: 1,
-          width: '100%',
-          height: '100%',
-          minHeight: 0,
-        }}
+    <ContextMenu>
+      <ContextMenuTrigger
+        className="flex min-h-0 w-full flex-1 flex-col"
+        style={{ height: '100%' }}
       >
         {innerView}
-      </ContextMenu.Trigger>
-      <ContextMenu.Content>
-        <ContextMenu.Item onSelect={handlePasteTTML}>
-          {t('contextMenu.pasteTTML', '粘贴 TTML')}
-        </ContextMenu.Item>
-        <ContextMenu.Item onSelect={handleNewLine}>
-          {t('contextMenu.newLine', '新建行')}
-        </ContextMenu.Item>
-      </ContextMenu.Content>
-    </ContextMenu.Root>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem onSelect={handlePasteTTML}>粘贴 TTML</ContextMenuItem>
+        <ContextMenuItem onSelect={handleNewLine}>新建行</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
   );
 });
 
diff --git a/frontend/src/editor/modules/lyric-editor/components/line-marker-icons.tsx b/frontend/src/editor/modules/lyric-editor/components/line-marker-icons.tsx
new file mode 100644
index 0000000..47cd907
--- /dev/null
+++ b/frontend/src/editor/modules/lyric-editor/components/line-marker-icons.tsx
@@ -0,0 +1,37 @@
+/*
+ * 背景歌词 / 对唱歌词行标记图标
+ */
+
+const SIZE = 20;
+
+/** 背景歌词标记，`VideoBackgroundEffectFilled`，蓝色 */
+export function BackgroundLyricIcon({ size = SIZE, color = '#4466FF' }) {
+  return (
+    <svg
+      aria-hidden
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M6.2 4 2 8.2V6.8L4.8 4zm7 0-1.46 1.46a4 4 0 0 0-1.02-.39L11.79 4zm-1.08 3.17a2.5 2.5 0 0 0-2.34-1.16 2.5 2.5 0 1 0 2.34 1.16m.72-.72q.3.43.48.94L16.69 4 16.5 4h-1.2zM7.5 12q-.12 0-.22.02A1.5 1.5 0 0 0 6 13.5V16h8v-2.5a1.5 1.5 0 0 0-1.5-1.5zm5-1q.33 0 .63.08L18 6.2V5.5q0-.3-.12-.59l-4.5 4.5a3.5 3.5 0 0 1-.93 1.59zm1.9.88q.35.4.5.93L18 9.7V8.29zM15 16v-1.2l3-3v1.4L15.2 16zm-10-.3v-1.4l-1.7 1.69.2.01h1.2zm1.57-6.48q.12.54.4 1.02L2.11 15.1A2 2 0 0 1 2 14.5v-.7zM9.71 4 2 11.7v-1.4L8.3 4z" />
+    </svg>
+  );
+}
+
+/** 对唱歌词标记，`TextAlignRightFilled`，绿色 */
+export function DuetLyricIcon({ size = SIZE, color = '#44AA33' }) {
+  return (
+    <svg
+      aria-hidden
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M6 4.25c0-.41.34-.75.75-.75h10.5a.75.75 0 0 1 0 1.5H6.75A.75.75 0 0 1 6 4.25m-4 5c0-.41.34-.75.75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 9.25m7.75 4.25a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5z" />
+    </svg>
+  );
+}
diff --git a/frontend/src/editor/modules/lyric-editor/components/lyric-line-view.tsx b/frontend/src/editor/modules/lyric-editor/components/lyric-line-view.tsx
index 7de6b74..acd7154 100644
--- a/frontend/src/editor/modules/lyric-editor/components/lyric-line-view.tsx
+++ b/frontend/src/editor/modules/lyric-editor/components/lyric-line-view.tsx
@@ -9,15 +9,11 @@
  * https://github.com/amll-dev/amll-ttml-tool/blob/main/LICENSE
  */
 
-import {
-  AddFilled,
-  LinkMultiple20Regular,
-  People24Regular,
-  TextAlignRightFilled,
-  VideoBackgroundEffectFilled,
-} from '@fluentui/react-icons';
-import { Button, ContextMenu, Flex, IconButton, Text, TextField } from '@radix-ui/themes';
-import classNames from 'classnames';
+import { Link2, Plus, Users } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ContextMenu, ContextMenuContent, ContextMenuTrigger } from '@/components/ui/context-menu';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
 import { motion } from 'framer-motion';
 import type { Draft } from 'immer';
 import { type Atom, atom, useAtomValue, useStore } from 'jotai';
@@ -35,7 +31,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useTranslation } from 'react-i18next';
 import { LyricLineMenu } from '$/components/Menus/lyric-line-menu.tsx';
 import { predictLineRomanization } from '$/modules/segmentation/utils/Transliteration/distributor';
 import {
@@ -60,6 +55,7 @@ import { type LyricLine, newLyricLine, newLyricWord, type TTMLLyric } from '$/ty
 import { containsRadicalChar } from '$/utils/detect-radical.ts';
 import { msToTimestamp } from '@/lib/format';
 import styles from './index.module.css';
+import { BackgroundLyricIcon, DuetLyricIcon } from './line-marker-icons.tsx';
 import LyricWordView from './lyric-word-view.tsx';
 import { RomanWordView } from './roman-word-view.tsx';
 
@@ -178,7 +174,6 @@ const SubLineEdit = memo(
     const line = useAtomValue(lineAtom);
     const [editing, setEditing] = useState(false);
     const [inputValue, setInputValue] = useState('');
-    const { t } = useTranslation();
 
     const onEnter = useCallback(
       (evt: SyntheticEvent<HTMLInputElement>) => {
@@ -228,17 +223,11 @@ const SubLineEdit = memo(
       }
     }, [editing, line, type]);
 
-    const label = useMemo(
-      () =>
-        type === 'translatedLyric'
-          ? t('lyricLineView.translatedLabel', '翻译：')
-          : t('lyricLineView.romanLabel', '音译：'),
-      [type, t]
-    );
+    const label = useMemo(() => (type === 'translatedLyric' ? '翻译：' : '音译：'), [type]);
 
     return (
-      <Flex align="baseline">
-        <Text size="2">{label}</Text>
+      <div className="flex items-center">
+        <span className="shrink-0 text-sm text-ink-2">{label}</span>
         {editing ? (
           <div
             className={styles.autoSizeInput}
@@ -259,10 +248,9 @@ const SubLineEdit = memo(
               {`${inputValue}  `}
             </div>
 
-            <TextField.Root
+            <Input
               className={styles.autoSizeInputField}
               autoFocus
-              size="1"
               value={inputValue}
               onChange={(evt) => setInputValue(evt.currentTarget.value)}
               onBlur={onEnter}
@@ -273,24 +261,18 @@ const SubLineEdit = memo(
           </div>
         ) : (
           <Button
-            size="2"
-            color="gray"
             variant="ghost"
+            className="h-6 min-h-0 max-w-[calc(100%-4rem)] break-all rounded px-1 text-left text-sm font-normal text-ink-2"
             onPointerDown={(e) => e.stopPropagation()}
             onClick={(evt) => {
               evt.stopPropagation();
               setEditing(true);
             }}
-            style={{
-              textAlign: 'left',
-              maxWidth: 'calc(100% - 4rem)',
-              wordBreak: 'break-all',
-            }}
           >
-            {line[type] || <Text color="gray">{t('lyricLineView.empty', '无')}</Text>}
+            {line[type] || <span className="text-ink-3">无</span>}
           </Button>
         )}
-      </Flex>
+      </div>
     );
   }
 );
@@ -306,7 +288,6 @@ export const LyricLineView: FC<{
     allowDrag?: boolean
   ) => void;
 }> = memo(({ lineAtom, lineIndex, playbackHighlightedLineId, onPointerDown }) => {
-  const { t } = useTranslation();
   const lyricState = useAtomValue(lyricLinesAtom);
   /*
    * `?? []` 每次渲染都会产生**新的数组引用**，会让下面两个 useMemo
@@ -569,13 +550,9 @@ export const LyricLineView: FC<{
       />
       {enableInsert && (
         <Button
-          mx="2"
-          my="1"
-          variant="soft"
-          size="1"
-          style={{
-            width: 'calc(100% - var(--space-4))',
-          }}
+          variant="secondary"
+          className="mx-2 my-1 h-7 px-2 text-xs"
+          style={{ width: 'calc(100% - 16px)' }}
           onClick={() => {
             editLyricLines((state: Draft<TTMLLyric>) => {
               state.lyricLines.splice(lineIndex, 0, newLyricLine());
@@ -584,10 +561,10 @@ export const LyricLineView: FC<{
             setEnableInsert(false);
           }}
         >
-          {t('lyricLineView.insertLine', '在此插入新行')}
+          {'在此插入新行'}
         </Button>
       )}
-      <ContextMenu.Root
+      <ContextMenu
         onOpenChange={(opened) => {
           if (opened) {
             if (!store.get(selectedLinesAtom).has(line.id)) {
@@ -596,12 +573,10 @@ export const LyricLineView: FC<{
           }
         }}
       >
-        <ContextMenu.Trigger disabled={toolMode !== ToolMode.Edit}>
-          <Flex
-            mx="2"
-            my="1"
-            direction="row"
-            className={classNames(
+        <ContextMenuTrigger asChild disabled={toolMode !== ToolMode.Edit}>
+          <div
+            className={cn(
+              'mx-2 my-1 flex flex-row items-center gap-x-4',
               styles.lyricLine,
               isPlaybackHighlighted && styles.playbackHighlighted,
               lineSelected && styles.selected,
@@ -612,18 +587,12 @@ export const LyricLineView: FC<{
               hasAgentWarning && toolMode === ToolMode.Edit && styles.agentWarning,
               hasRadical && styles.radical
             )}
-            align="center"
-            gapX="4"
             data-line-id={line.id}
             data-absolute-index={lineIndex}
             data-is-dragged={isDragged}
             onPointerDown={(evt) => {
               const target = evt.target as HTMLElement | null;
-              if (
-                target?.closest(
-                  "button, input, textarea, select, a, .rt-TextFieldRoot, [contenteditable='true']"
-                )
-              ) {
+              if (target?.closest("button, input, textarea, select, a, [contenteditable='true']")) {
                 return;
               }
               if (toolMode === ToolMode.Edit || toolMode === ToolMode.Sync) {
@@ -642,30 +611,29 @@ export const LyricLineView: FC<{
                 }}
               />
             )}
-            <Flex direction="column" align="center" justify="center" ml="3">
-              <Text
-                className={classNames(
+            <div className="ml-3 flex flex-col items-center justify-center">
+              <span
+                className={cn(
+                  'text-center',
                   styles.lineNumber,
                   isPlaybackHighlighted && styles.playbackActiveLineNumber,
                   line.ignoreSync && styles.ignored
                 )}
-                align="center"
-                color="gray"
               >
                 {displayNumber}
-              </Text>
-              {line.isBG && <VideoBackgroundEffectFilled color="#4466FF" />}
-              {line.isDuet && <TextAlignRightFilled color="#44AA33" />}
-            </Flex>
+              </span>
+              {line.isBG && <BackgroundLyricIcon />}
+              {line.isDuet && <DuetLyricIcon />}
+            </div>
             <div
-              className={classNames(
+              className={cn(
                 styles.lyricLineContainer,
                 toolMode === ToolMode.Edit && styles.edit,
                 toolMode === ToolMode.Sync && styles.sync
               )}
             >
               <div
-                className={classNames(
+                className={cn(
                   styles.lyricWordsContainer,
                   toolMode === ToolMode.Edit && styles.edit,
                   toolMode === ToolMode.Sync && styles.sync,
@@ -681,7 +649,7 @@ export const LyricLineView: FC<{
                       {ghostsHere.map((ghost) => (
                         <span
                           key={`annotation-add-${ghost.itemKey}-${ghost.index}`}
-                          className={classNames(
+                          className={cn(
                             styles.annotationGhostWord,
                             styles.annotationAdded,
                             ghost.focused && styles.annotationFocused
@@ -692,9 +660,10 @@ export const LyricLineView: FC<{
                         </span>
                       ))}
                       {enableInsert && (
-                        <IconButton
-                          size="1"
-                          variant="soft"
+                        <Button
+                          variant="secondary"
+                          size="icon"
+                          className="size-6 shrink-0"
                           onClick={(evt) => {
                             evt.preventDefault();
                             evt.stopPropagation();
@@ -703,15 +672,13 @@ export const LyricLineView: FC<{
                             });
                           }}
                         >
-                          <AddFilled />
-                        </IconButton>
+                          <Plus className="size-3.5" />
+                        </Button>
                       )}
-                      <Flex
-                        direction="column"
-                        align="stretch"
-                        gap="3"
+                      <div
                         data-word-index={wi}
-                        className={classNames(
+                        className={cn(
+                          'flex flex-col items-stretch gap-3',
                           styles.wordGroup,
                           annotationWordMarks.added.has(String(wi)) && styles.annotationAdded,
                           annotationWordMarks.removed.has(String(wi)) && styles.annotationRemoved,
@@ -733,7 +700,7 @@ export const LyricLineView: FC<{
                             suggestedRoman={suggestedRomans[wi]}
                           />
                         )}
-                      </Flex>
+                      </div>
                     </Fragment>
                   );
                 })}
@@ -742,7 +709,7 @@ export const LyricLineView: FC<{
                   .map((ghost) => (
                     <span
                       key={`annotation-add-tail-${ghost.itemKey}-${ghost.index}`}
-                      className={classNames(
+                      className={cn(
                         styles.annotationGhostWord,
                         styles.annotationAdded,
                         ghost.focused && styles.annotationFocused
@@ -753,9 +720,10 @@ export const LyricLineView: FC<{
                     </span>
                   ))}
                 {enableInsert && (
-                  <IconButton
-                    size="1"
-                    variant="soft"
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="size-6 shrink-0"
                     onClick={(evt) => {
                       evt.preventDefault();
                       evt.stopPropagation();
@@ -764,13 +732,14 @@ export const LyricLineView: FC<{
                       });
                     }}
                   >
-                    <AddFilled />
-                  </IconButton>
+                    <Plus className="size-3.5" />
+                  </Button>
                 )}
                 {toolMode === ToolMode.Edit && (
-                  <TextField.Root
-                    placeholder={t('lyricLineView.insertWord', '插入单词…')}
-                    className={classNames(
+                  <Input
+                    placeholder="插入单词…"
+                    className={cn(
+                      'h-[1.9em] w-[10em] min-w-[6em] shrink-0 rounded-md px-2 py-0 text-sm',
                       styles.insertWordField,
                       words.length === 0 && styles.empty
                     )}
@@ -814,9 +783,9 @@ export const LyricLineView: FC<{
                     <SubLineEdit lineAtom={lineAtom} lineIndex={lineIndex} type="romanLyric" />
                   )}
                   {vocalTagIds.length > 0 && (
-                    <Flex align="center" gap="2" className={styles.vocalTagsRow}>
-                      <Text size="2">{t('lyricLineView.vocalTagsLabel', '演唱者：')}</Text>
-                      <Flex gap="1" wrap="wrap" className={styles.vocalTagsButtons}>
+                    <div className={cn('flex items-center gap-2', styles.vocalTagsRow)}>
+                      <span className="text-sm">演唱者：</span>
+                      <div className={cn('flex flex-wrap gap-1', styles.vocalTagsButtons)}>
                         {(() => {
                           const selectedIds = parseLineVocalIds(line.vocal);
                           const selectedSet = new Set(selectedIds);
@@ -834,10 +803,8 @@ export const LyricLineView: FC<{
                               return (
                                 <Button
                                   key={`line-${lineIndex}-vocal-${id}`}
-                                  size="1"
-                                  variant={isActive ? 'solid' : 'soft'}
-                                  color={isActive ? 'green' : 'gray'}
-                                  className={styles.vocalTagButton}
+                                  variant={isActive ? 'default' : 'secondary'}
+                                  className={cn('h-6 px-2 text-xs', styles.vocalTagButton)}
                                   title={tagName || undefined}
                                   onClick={(evt) => {
                                     evt.stopPropagation();
@@ -861,10 +828,8 @@ export const LyricLineView: FC<{
                             }),
                             <Button
                               key={`line-${lineIndex}-vocal-all`}
-                              size="1"
-                              variant={allSelected ? 'solid' : 'soft'}
-                              color={allSelected ? 'green' : 'gray'}
-                              className={styles.vocalTagButton}
+                              variant={allSelected ? 'default' : 'secondary'}
+                              className={cn('h-6 px-2 text-xs', styles.vocalTagButton)}
                               onClick={(evt) => {
                                 evt.stopPropagation();
                                 editLyricLines((state: Draft<TTMLLyric>) => {
@@ -874,53 +839,49 @@ export const LyricLineView: FC<{
                                 });
                               }}
                             >
-                              <Flex align="center" gap="1">
-                                <People24Regular />
-                                {t('lyricLineView.vocalTagsAll', '全体成员')}
-                              </Flex>
+                              <span className="flex items-center gap-1">
+                                <Users className="size-4" />
+                                全体成员
+                              </span>
                             </Button>,
                           ];
                         })()}
-                      </Flex>
-                    </Flex>
+                      </div>
+                    </div>
                   )}
                 </>
               )}
             </div>
             {toolMode === ToolMode.Edit && (
-              <Flex p="3">
-                <IconButton
-                  size="1"
-                  variant={enableInsert ? 'solid' : 'soft'}
+              <div className="p-3">
+                <Button
+                  variant={enableInsert ? 'default' : 'secondary'}
+                  size="icon"
+                  className="size-6 shrink-0"
                   onClick={(evt) => {
                     evt.preventDefault();
                     evt.stopPropagation();
                     setEnableInsert((v) => !v);
                   }}
                 >
-                  <AddFilled />
-                </IconButton>
-              </Flex>
+                  <Plus className="size-3.5" />
+                </Button>
+              </div>
             )}
             {toolMode === ToolMode.Sync && showTimestamps && (
-              <Flex pr="3" gap="1" direction="column" align="stretch">
+              <div className="flex flex-col items-stretch gap-1 pr-3">
                 <div className={styles.startTime} ref={startTimeRef}>
                   {msToTimestamp(line.startTime)}
                 </div>
                 <button
                   type="button"
-                  className={classNames(styles.endTime, styles.endTimeButton)}
+                  className={cn(styles.endTime, styles.endTimeButton)}
                   ref={endTimeRef}
                   onClick={onToggleEndTimeLink}
                 >
-                  <span
-                    style={{
-                      display: 'inline-flex',
-                      alignItems: 'center',
-                    }}
-                  >
+                  <span className="inline-flex items-center">
                     {endTimeLinked ? (
-                      <LinkMultiple20Regular />
+                      <Link2 className="size-4" />
                     ) : showEndTimeAsDuration ? (
                       `+${line.endTime - line.startTime}ms`
                     ) : (
@@ -928,23 +889,19 @@ export const LyricLineView: FC<{
                     )}
                   </span>
                 </button>
-              </Flex>
+              </div>
             )}
-          </Flex>
-        </ContextMenu.Trigger>
-        <ContextMenu.Content>
+          </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent>
           <LyricLineMenu lineIndex={lineIndex} />
-        </ContextMenu.Content>
-      </ContextMenu.Root>
+        </ContextMenuContent>
+      </ContextMenu>
       {enableInsert && (
         <Button
-          mx="2"
-          my="1"
-          variant="soft"
-          size="1"
-          style={{
-            width: 'calc(100% - var(--space-4))',
-          }}
+          variant="secondary"
+          className="mx-2 my-1 h-7 px-2 text-xs"
+          style={{ width: 'calc(100% - 16px)' }}
           onClick={() => {
             editLyricLines((state: Draft<TTMLLyric>) => {
               state.lyricLines.splice(lineIndex + 1, 0, newLyricLine());
@@ -953,7 +910,7 @@ export const LyricLineView: FC<{
             setEnableInsert(false);
           }}
         >
-          {t('lyricLineView.insertLine', '在此插入新行')}
+          在此插入新行
         </Button>
       )}
     </>
diff --git a/frontend/src/editor/modules/lyric-editor/components/lyric-word-menu.tsx b/frontend/src/editor/modules/lyric-editor/components/lyric-word-menu.tsx
index 6b6fc89..3aadf48 100644
--- a/frontend/src/editor/modules/lyric-editor/components/lyric-word-menu.tsx
+++ b/frontend/src/editor/modules/lyric-editor/components/lyric-word-menu.tsx
@@ -1,7 +1,6 @@
-import { ContextMenu } from '@radix-ui/themes';
 import { type Atom, atom, useAtomValue, useSetAtom, useStore } from 'jotai';
 import { useSetImmerAtom } from 'jotai-immer';
-import { useTranslation } from 'react-i18next';
+import { ContextMenuItem, ContextMenuSeparator } from '@/components/ui/context-menu';
 import { replaceWordDialogAtom, splitWordDialogAtom } from '$/states/dialogs';
 import {
   editingWordStateAtom,
@@ -24,8 +23,6 @@ export const LyricWordMenu = ({
   wordAtom: Atom<LyricWord>;
   lineIndex: number;
 }) => {
-  const { t } = useTranslation();
-
   const store = useStore();
   const selectedWordsSize = useAtomValue(selectedWordsSizeAtom);
   const selectedLinesSize = useAtomValue(selectedLinesSizeAtom);
@@ -37,7 +34,7 @@ export const LyricWordMenu = ({
 
   return (
     <>
-      <ContextMenu.Item
+      <ContextMenuItem
         disabled={selectedWordsSize !== 1}
         onSelect={() => {
           setEditingWordState({
@@ -48,9 +45,9 @@ export const LyricWordMenu = ({
           setOpenSplitWordDialog(true);
         }}
       >
-        {t('contextMenu.splitWord', '拆分单词…')}
-      </ContextMenu.Item>
-      <ContextMenu.Item
+        拆分单词…
+      </ContextMenuItem>
+      <ContextMenuItem
         disabled={selectedWordsSize !== 1}
         onSelect={() => {
           setEditingWordState({
@@ -61,9 +58,9 @@ export const LyricWordMenu = ({
           setOpenReplaceWordDialog(true);
         }}
       >
-        {t('contextMenu.replaceWord', '替换单词…')}
-      </ContextMenu.Item>
-      <ContextMenu.Item
+        替换单词…
+      </ContextMenuItem>
+      <ContextMenuItem
         disabled={!(selectedWordsSize > 1 && selectedLinesSize === 1)}
         onSelect={() => {
           editLyricLines((state) => {
@@ -93,10 +90,10 @@ export const LyricWordMenu = ({
           });
         }}
       >
-        {t('contextMenu.combineWords', '合并单词')}
-      </ContextMenu.Item>
+        合并单词
+      </ContextMenuItem>
 
-      <ContextMenu.Item
+      <ContextMenuItem
         disabled={selectedWordsSize === 0}
         onSelect={() => {
           editLyricLines((state) => {
@@ -110,26 +107,20 @@ export const LyricWordMenu = ({
           });
         }}
       >
-        {t('contextMenu.deleteWords', {
-          count: selectedWordsSize,
-          defaultValue: '删除选定单词',
-        })}
-      </ContextMenu.Item>
+        删除选定单词
+      </ContextMenuItem>
 
-      <ContextMenu.Separator />
+      <ContextMenuSeparator />
 
-      <ContextMenu.Item disabled={selectedWordsSize !== 1} onSelect={() => afterToNewLine()}>
-        {t('contextMenu.moveFollowingWordToNewLine', '此后单词拆至新行')}
-      </ContextMenu.Item>
+      <ContextMenuItem disabled={selectedWordsSize !== 1} onSelect={() => afterToNewLine()}>
+        此后单词拆至新行
+      </ContextMenuItem>
 
-      <ContextMenu.Item disabled={selectedWordsSize === 0} onSelect={() => selectedToNewLine()}>
-        {t('contextMenu.moveWordToNewLine', {
-          count: selectedWordsSize,
-          defaultValue: '所选单词拆至新行',
-        })}
-      </ContextMenu.Item>
+      <ContextMenuItem disabled={selectedWordsSize === 0} onSelect={() => selectedToNewLine()}>
+        所选单词拆至新行
+      </ContextMenuItem>
 
-      <ContextMenu.Separator />
+      <ContextMenuSeparator />
     </>
   );
 
diff --git a/frontend/src/editor/modules/lyric-editor/components/lyric-word-view.tsx b/frontend/src/editor/modules/lyric-editor/components/lyric-word-view.tsx
index ecd5f58..8ae7a3c 100644
--- a/frontend/src/editor/modules/lyric-editor/components/lyric-word-view.tsx
+++ b/frontend/src/editor/modules/lyric-editor/components/lyric-word-view.tsx
@@ -10,18 +10,21 @@
  */
 
 import {
-  CutRegular,
-  DeleteRegular,
-  PaddingLeftRegular,
-  PaddingRightRegular,
-  SplitVerticalRegular,
-  TaskListLtrRegular,
-} from '@fluentui/react-icons';
-import { ContextMenu, IconButton, TextField } from '@radix-ui/themes';
-import classNames from 'classnames';
+  ArrowLeftToLine,
+  ArrowRightToLine,
+  Columns2,
+  ListChecks,
+  Scissors,
+  Trash2,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ContextMenu, ContextMenuContent, ContextMenuTrigger } from '@/components/ui/context-menu';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
 import { type Atom, atom, useAtomValue, useSetAtom, useStore } from 'jotai';
 import { useSetImmerAtom } from 'jotai-immer';
 import {
+  type ComponentPropsWithoutRef,
   type FC,
   type MouseEvent,
   memo,
@@ -34,7 +37,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useTranslation } from 'react-i18next';
 import { LyricLineMenu } from '$/components/Menus/lyric-line-menu.tsx';
 import { audioEngine } from '$/modules/audio/audio-engine.ts';
 import {
@@ -84,18 +86,14 @@ const parseRubyShortcut = (value: string) => {
 };
 
 const getDisplayWordText = (
-  t: (key: string, defaultValue: string, options?: { count?: number }) => string,
   word: string,
   isWordBlank: boolean,
   romanWord?: string,
   displayRomanizationInSync?: boolean
 ) => {
   if (displayRomanizationInSync && romanWord && romanWord.trim() !== '') return romanWord;
-  if (word === '') return t('lyricWordView.empty', '空白');
-  if (isWordBlank)
-    return t('lyricWordView.spaceCount', '空格 x{count}', {
-      count: word.length,
-    });
+  if (word === '') return '空白';
+  if (isWordBlank) return `空格 x${word.length}`;
   return word;
 };
 
@@ -182,7 +180,7 @@ const LyricWordViewEditSpan = ({
   }
 
   return (
-    <ContextMenu.Root
+    <ContextMenu
       onOpenChange={(open) => {
         if (!open) return;
         if (isWordSelected) return;
@@ -196,7 +194,7 @@ const LyricWordViewEditSpan = ({
         });
       }}
     >
-      <ContextMenu.Trigger>
+      <ContextMenuTrigger>
         <span
           draggable={toolMode === ToolMode.Edit}
           onPointerDown={(evt) => {
@@ -303,12 +301,12 @@ const LyricWordViewEditSpan = ({
         >
           {children}
         </span>
-      </ContextMenu.Trigger>
-      <ContextMenu.Content>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
         <LyricWordMenu wordAtom={wordAtom} wordIndex={wordIndex} lineIndex={lineIndex} />
         <LyricLineMenu lineIndex={lineIndex} />
-      </ContextMenu.Content>
-    </ContextMenu.Root>
+      </ContextMenuContent>
+    </ContextMenu>
   );
 };
 
@@ -318,17 +316,16 @@ function WordEditField<F extends keyof LyricWord, V extends LyricWord[F]>({
   formatter,
   parser,
   // textFieldStyle,
-  children,
+  leadingIcon,
   ...other
-}: PropsWithChildren<
-  {
-    wordAtom: Atom<LyricWord>;
-    fieldName: F;
-    formatter: (v: V) => string;
-    parser: (v: string) => V;
-    textFieldStyle?: React.CSSProperties;
-  } & TextField.RootProps
->) {
+}: {
+  wordAtom: Atom<LyricWord>;
+  fieldName: F;
+  formatter: (v: V) => string;
+  parser: (v: string) => V;
+  textFieldStyle?: React.CSSProperties;
+  leadingIcon?: React.ReactNode;
+} & ComponentPropsWithoutRef<'input'>) {
   const [fieldInput, setFieldInput] = useState<string | undefined>(undefined);
   const [fieldPlaceholder, setFieldPlaceholder] = useState<string>('');
 
@@ -382,24 +379,29 @@ function WordEditField<F extends keyof LyricWord, V extends LyricWord[F]>({
   }, [currentValue]);
 
   return (
-    <TextField.Root
-      size="1"
-      value={fieldInput ?? ''}
-      placeholder={fieldPlaceholder}
-      disabled={fieldInput === undefined}
-      onChange={(evt) => setFieldInput(evt.currentTarget.value)}
-      onKeyDown={(evt) => {
-        if (evt.key !== 'Enter') return;
-        onInputFinished(evt.currentTarget.value);
-      }}
-      onBlur={(evt) => {
-        if (evt.currentTarget.value === currentValue) return;
-        onInputFinished(evt.currentTarget.value);
-      }}
-      {...other}
-    >
-      {children}
-    </TextField.Root>
+    <div className="relative flex min-w-0 items-center">
+      {leadingIcon && (
+        <span className="pointer-events-none absolute left-1.5 flex items-center text-ink-3 [&_svg]:size-3.5">
+          {leadingIcon}
+        </span>
+      )}
+      <Input
+        value={fieldInput ?? ''}
+        placeholder={fieldPlaceholder}
+        disabled={fieldInput === undefined}
+        onChange={(evt) => setFieldInput(evt.currentTarget.value)}
+        onKeyDown={(evt) => {
+          if (evt.key !== 'Enter') return;
+          onInputFinished(evt.currentTarget.value);
+        }}
+        onBlur={(evt) => {
+          if (evt.currentTarget.value === currentValue) return;
+          onInputFinished(evt.currentTarget.value);
+        }}
+        className={cn('h-7 text-xs', leadingIcon && 'pl-6')}
+        {...other}
+      />
+    </div>
   );
 }
 
@@ -433,7 +435,7 @@ const LyricWordViewEditAdvance = ({
 
   const className = useMemo(
     () =>
-      classNames(
+      cn(
         styles.lyricWord,
         styles.edit,
         styles.advance,
@@ -447,8 +449,8 @@ const LyricWordViewEditAdvance = ({
   );
 
   return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>
+    <ContextMenu>
+      <ContextMenuTrigger>
         <LyricWordViewEditSpan
           wordAtom={wordAtom}
           wordIndex={wordIndex}
@@ -457,8 +459,6 @@ const LyricWordViewEditAdvance = ({
           line={line}
         >
           <WordEditField
-            size="1"
-            color="green"
             wordAtom={wordAtom}
             fieldName="startTime"
             formatter={msToTimestamp}
@@ -466,15 +466,13 @@ const LyricWordViewEditAdvance = ({
             style={{
               minWidth: '0',
             }}
-          >
-            <TextField.Slot>
-              <PaddingLeftRegular />
-            </TextField.Slot>
-          </WordEditField>
+            leadingIcon={<ArrowLeftToLine />}
+          />
           <div className={styles.advanceBar}>
-            <IconButton
-              variant="soft"
-              size="1"
+            <Button
+              variant="secondary"
+              size="icon"
+              className="size-6 shrink-0"
               onClick={() => {
                 setSplitState({
                   wordIndex,
@@ -484,10 +482,9 @@ const LyricWordViewEditAdvance = ({
                 setOpenSplitWordDialog(true);
               }}
             >
-              <CutRegular />
-            </IconButton>
+              <Scissors className="size-3.5" />
+            </Button>
             <WordEditField
-              size="1"
               wordAtom={wordAtom}
               fieldName="word"
               formatter={String}
@@ -496,9 +493,10 @@ const LyricWordViewEditAdvance = ({
                 minWidth: '0em',
               }}
             />
-            <IconButton
-              variant="soft"
-              size="1"
+            <Button
+              variant="secondary"
+              size="icon"
+              className="size-6 shrink-0"
               onClick={() => {
                 editLyricLines((state) => {
                   const selectedWords = store.get(selectedWordsAtom);
@@ -508,8 +506,8 @@ const LyricWordViewEditAdvance = ({
                 });
               }}
             >
-              <DeleteRegular />
-            </IconButton>
+              <Trash2 className="size-3.5" />
+            </Button>
           </div>
           <div className={styles.rubyAdvanceRow}>
             <RubyEditor
@@ -520,8 +518,6 @@ const LyricWordViewEditAdvance = ({
             />
           </div>
           <WordEditField
-            size="1"
-            color="red"
             wordAtom={wordAtom}
             fieldName="endTime"
             formatter={msToTimestamp}
@@ -529,14 +525,10 @@ const LyricWordViewEditAdvance = ({
             style={{
               minWidth: '0',
             }}
-          >
-            <TextField.Slot>
-              <PaddingRightRegular />
-            </TextField.Slot>
-          </WordEditField>
+            leadingIcon={<ArrowRightToLine />}
+          />
           <div className={styles.advanceBar}>
             <WordEditField
-              size="1"
               type="number"
               min={0}
               wordAtom={wordAtom}
@@ -546,14 +538,12 @@ const LyricWordViewEditAdvance = ({
               style={{
                 minWidth: '0',
               }}
-            >
-              <TextField.Slot>
-                <SplitVerticalRegular />
-              </TextField.Slot>
-            </WordEditField>
-            <IconButton
-              variant="soft"
-              size="1"
+              leadingIcon={<Columns2 />}
+            />
+            <Button
+              variant="secondary"
+              size="icon"
+              className="size-6 shrink-0"
               onClick={() => {
                 editLyricLines((state) => {
                   for (const line of state.lyricLines)
@@ -562,21 +552,20 @@ const LyricWordViewEditAdvance = ({
                 });
               }}
             >
-              <TaskListLtrRegular />
-            </IconButton>
+              <ListChecks className="size-3.5" />
+            </Button>
           </div>
         </LyricWordViewEditSpan>
-      </ContextMenu.Trigger>
-      <ContextMenu.Content>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
         <LyricWordMenu wordAtom={wordAtom} wordIndex={wordIndex} lineIndex={lineIndex} />
         <LyricLineMenu lineIndex={lineIndex} />
-      </ContextMenu.Content>
-    </ContextMenu.Root>
+      </ContextMenuContent>
+    </ContextMenu>
   );
 };
 
 const LyricWorldViewEdit = ({ wordAtom, wordIndex, line, lineIndex }: LyricWordViewEditProps) => {
-  const { t } = useTranslation();
   const word = useAtomValue(wordAtom);
   const editLyricLines = useSetImmerAtom(lyricLinesAtom);
   const setSelectedLines = useSetImmerAtom(selectedLinesAtom);
@@ -589,7 +578,7 @@ const LyricWorldViewEdit = ({ wordAtom, wordIndex, line, lineIndex }: LyricWordV
   const [editing, setEditing] = useState(false);
   const toolMode = useAtomValue(toolModeAtom);
   const isWordBlank = useWordBlank(word.word);
-  const displayWord = getDisplayWordText(t, word.word, isWordBlank);
+  const displayWord = getDisplayWordText(word.word, isWordBlank);
   const showRubyEditor = useMemo(() => word.ruby !== undefined, [word.ruby]);
 
   const hasError = useMemo(() => word.startTime > word.endTime, [word.startTime, word.endTime]);
@@ -598,7 +587,7 @@ const LyricWorldViewEdit = ({ wordAtom, wordIndex, line, lineIndex }: LyricWordV
 
   const className = useMemo(
     () =>
-      classNames(
+      cn(
         styles.lyricWord,
         styles.edit,
         isWordSelected && styles.selected,
@@ -631,7 +620,7 @@ const LyricWorldViewEdit = ({ wordAtom, wordIndex, line, lineIndex }: LyricWordV
   return editing ? (
     <div className={className}>
       <span className={styles.wordEditRow}>
-        <TextField.Root
+        <Input
           autoFocus
           defaultValue={word.word}
           onBlur={onEnter}
@@ -643,7 +632,7 @@ const LyricWorldViewEdit = ({ wordAtom, wordIndex, line, lineIndex }: LyricWordV
       </span>
     </div>
   ) : (
-    <ContextMenu.Root
+    <ContextMenu
       onOpenChange={(open) => {
         if (!open) return;
         if (isWordSelected) return;
@@ -657,7 +646,7 @@ const LyricWorldViewEdit = ({ wordAtom, wordIndex, line, lineIndex }: LyricWordV
         });
       }}
     >
-      <ContextMenu.Trigger>
+      <ContextMenuTrigger>
         <LyricWordViewEditSpan
           wordAtom={wordAtom}
           wordIndex={wordIndex}
@@ -673,12 +662,12 @@ const LyricWorldViewEdit = ({ wordAtom, wordIndex, line, lineIndex }: LyricWordV
             {showRubyEditor && <RubyEditor wordAtom={wordAtom} />}
           </span>
         </LyricWordViewEditSpan>
-      </ContextMenu.Trigger>
-      <ContextMenu.Content>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
         <LyricWordMenu wordAtom={wordAtom} wordIndex={wordIndex} lineIndex={lineIndex} />
         <LyricLineMenu lineIndex={lineIndex} />
-      </ContextMenu.Content>
-    </ContextMenu.Root>
+      </ContextMenuContent>
+    </ContextMenu>
   );
 };
 
@@ -788,7 +777,7 @@ const LyricSyncWordView: FC<{
 
   const className = useMemo(
     () =>
-      classNames(
+      cn(
         styles.lyricWord,
         styles.sync,
         isWordSelected && styles.selected,
@@ -820,13 +809,13 @@ const LyricSyncWordView: FC<{
       }}
     >
       {showTimestamps && (
-        <div className={classNames(styles.startTime)} ref={startTimeRef}>
+        <div className={cn(styles.startTime)} ref={startTimeRef}>
           {msToTimestamp(startTime)}
         </div>
       )}
       <div className={styles.displayWord}>{displayWord}</div>
       {showTimestamps && (
-        <div className={classNames(styles.endTime)} ref={endTimeRef}>
+        <div className={cn(styles.endTime)} ref={endTimeRef}>
           {showEndTimeAsDuration
             ? `+${formatDurationMs(endTime - startTime, { suffix: true })}`
             : msToTimestamp(endTime)}
@@ -842,14 +831,13 @@ const LyricWorldViewSync: FC<{
   line: LyricLine;
   lineIndex: number;
 }> = ({ wordAtom, line }) => {
-  const { t } = useTranslation();
   const word = useAtomValue(wordAtom);
   const displayRomanizationInSync = useAtomValue(displayRomanizationInSyncAtom);
   const isWordBlank = useWordBlank(word.word);
   const getDisplayWord = useCallback(
     (displayText: string, isBlank: boolean, romanWord?: string, showRomanization?: boolean) =>
-      getDisplayWordText(t, displayText, isBlank, romanWord, showRomanization),
-    [t]
+      getDisplayWordText(displayText, isBlank, romanWord, showRomanization),
+    []
   );
 
   if (word.ruby && word.ruby.length > 0) {
diff --git a/frontend/src/editor/modules/lyric-editor/components/roman-word-view.module.css b/frontend/src/editor/modules/lyric-editor/components/roman-word-view.module.css
deleted file mode 100644
index 7f81646..0000000
--- a/frontend/src/editor/modules/lyric-editor/components/roman-word-view.module.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.romanWordView {
-  display: inline-block;
-  padding: 0.25em 0.5em;
-  border-radius: var(--radius-4);
-  text-align: left;
-
-  background-color: var(--color-panel);
-  box-shadow: var(--base-card-surface-box-shadow);
-}
-
-.romanWordView.placeholder {
-  color: var(--gray-a6);
-  font-style: italic;
-}
-
-.romanWordView:has(input) {
-  background-color: var(--color-component-background);
-}
-
-.romanWordView :global(input) {
-  text-align: left;
-  font-size: var(--font-size-1);
-}
-
-.warning {
-  background-color: var(--orange-a3);
-}
diff --git a/frontend/src/editor/modules/lyric-editor/components/roman-word-view.tsx b/frontend/src/editor/modules/lyric-editor/components/roman-word-view.tsx
index 93fc60b..ed2f45c 100644
--- a/frontend/src/editor/modules/lyric-editor/components/roman-word-view.tsx
+++ b/frontend/src/editor/modules/lyric-editor/components/roman-word-view.tsx
@@ -1,12 +1,12 @@
-import { Button, TextField } from '@radix-ui/themes';
-import classNames from 'classnames';
 import { type Atom, useAtom, useAtomValue, type WritableAtom } from 'jotai';
 import { useSetImmerAtom } from 'jotai-immer';
 import { type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
 import { lyricLinesAtom } from '$/states/main';
 import type { LyricWord } from '$/types/ttml';
 import { applyGeneratedRuby } from '$/modules/lyric-editor/utils/ruby-generator';
-import styles from './roman-word-view.module.css';
 
 interface RomanWordViewProps {
   wordAtom: Atom<LyricWord>;
@@ -91,10 +91,12 @@ export const RomanWordView = ({
 
   if (isEditing) {
     return (
-      <TextField.Root
+      <Input
         ref={inputRef}
-        size="1"
-        className={classNames(styles.romanWordView, word.romanWarning && styles.warning)}
+        className={cn(
+          'inline-block h-auto w-auto px-2 py-1 text-left text-xs',
+          word.romanWarning && 'border-warning bg-warning/10'
+        )}
         value={inputValue}
         onChange={(e) => setInputValue(e.currentTarget.value)}
         onBlur={(e) => saveAndStopEditing(e.currentTarget.value)}
@@ -105,13 +107,11 @@ export const RomanWordView = ({
 
   return (
     <Button
-      size="1"
-      variant="soft"
-      color="gray"
-      className={classNames(
-        styles.romanWordView,
-        !word.romanWord && styles.placeholder,
-        word.romanWarning && styles.warning
+      variant="secondary"
+      className={cn(
+        'inline-block h-auto w-auto px-2 py-1 text-left text-xs font-normal',
+        !word.romanWord && 'italic text-ink-3',
+        word.romanWarning && 'border border-warning bg-warning/10'
       )}
       onClick={(e) => {
         e.stopPropagation();
diff --git a/frontend/src/editor/modules/lyric-editor/tools/ReplaceWordDialog.tsx b/frontend/src/editor/modules/lyric-editor/tools/ReplaceWordDialog.tsx
index 93a0a95..e06598e 100644
--- a/frontend/src/editor/modules/lyric-editor/tools/ReplaceWordDialog.tsx
+++ b/frontend/src/editor/modules/lyric-editor/tools/ReplaceWordDialog.tsx
@@ -1,13 +1,22 @@
-import { Button, Checkbox, Dialog, Flex, Text, TextField } from '@radix-ui/themes';
 import { useAtom, useAtomValue } from 'jotai';
 import { useSetImmerAtom } from 'jotai-immer';
 import { memo, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { replaceWordDialogAtom } from '$/states/dialogs';
 import { editingWordStateAtom, lyricLinesAtom } from '$/states/main';
 
 export const ReplaceWordDialog = memo(() => {
-  const { t } = useTranslation();
   const [isOpen, setIsOpen] = useAtom(replaceWordDialogAtom);
   const editingState = useAtomValue(editingWordStateAtom);
   const editLyricLines = useSetImmerAtom(lyricLinesAtom);
@@ -61,64 +70,52 @@ export const ReplaceWordDialog = memo(() => {
   };
 
   return (
-    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
-      <Dialog.Content maxWidth="400px">
-        <Dialog.Title>{t('replaceWordDialog.title', '替换单词')}</Dialog.Title>
-        <Dialog.Description size="2" mb="4">
-          {t('replaceWordDialog.description', '新的单词内容:')}
-        </Dialog.Description>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent className="max-w-[400px]">
+        <DialogTitle>替换单词</DialogTitle>
+        <DialogDescription>新的单词内容:</DialogDescription>
 
-        <Flex direction="column" gap="3">
-          <TextField.Root
+        <div className="flex flex-col gap-3">
+          <Input
             value={replacementText}
             onChange={(e) => setReplacementText(e.target.value)}
-            placeholder={t('replaceWordDialog.placeholder', '新单词')}
+            placeholder="新单词"
             onKeyDown={(e) => {
               if (e.key === 'Enter') handleConfirm();
             }}
             autoFocus
           />
 
-          <Flex direction="column" gap="2">
-            <Text as="label" size="2">
-              <Flex gap="2" align="center">
-                <Checkbox
-                  checked={applyToAll}
-                  onCheckedChange={(c) => setApplyToAll(c as boolean)}
-                />
-                {t('replaceWordDialog.applyToAll', '将替换应用于所有相同的单词')}
-              </Flex>
-            </Text>
+          <div className="flex flex-col gap-2">
+            <Label className="font-normal">
+              <Checkbox checked={applyToAll} onCheckedChange={(c) => setApplyToAll(Boolean(c))} />
+              将替换应用于所有相同的单词
+            </Label>
 
-            <Text
-              as="label"
-              size="2"
+            <Label
+              className="font-normal"
               style={{
                 opacity: applyToAll ? 1 : 0.5,
                 pointerEvents: applyToAll ? 'auto' : 'none',
               }}
             >
-              <Flex gap="2" align="center">
-                <Checkbox
-                  checked={ignoreCase}
-                  onCheckedChange={(c) => setIgnoreCase(c as boolean)}
-                  disabled={!applyToAll}
-                />
-                {t('replaceWordDialog.ignoreCase', '忽略大小写')}
-              </Flex>
-            </Text>
-          </Flex>
-        </Flex>
+              <Checkbox
+                checked={ignoreCase}
+                onCheckedChange={(c) => setIgnoreCase(Boolean(c))}
+                disabled={!applyToAll}
+              />
+              忽略大小写
+            </Label>
+          </div>
+        </div>
 
-        <Flex gap="3" mt="4" justify="end">
-          <Dialog.Close>
-            <Button variant="soft" color="gray">
-              {t('common.cancel', '取消')}
-            </Button>
-          </Dialog.Close>
-          <Button onClick={handleConfirm}>{t('common.confirm', '确认')}</Button>
-        </Flex>
-      </Dialog.Content>
-    </Dialog.Root>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="secondary">取消</Button>
+          </DialogClose>
+          <Button onClick={handleConfirm}>确认</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 });
diff --git a/frontend/src/editor/modules/lyric-editor/tools/RubyEditor.tsx b/frontend/src/editor/modules/lyric-editor/tools/RubyEditor.tsx
index 057868d..ba5cdba 100644
--- a/frontend/src/editor/modules/lyric-editor/tools/RubyEditor.tsx
+++ b/frontend/src/editor/modules/lyric-editor/tools/RubyEditor.tsx
@@ -1,10 +1,11 @@
-import { Add20Regular, TranslateRegular } from '@fluentui/react-icons';
-import { IconButton, TextField } from '@radix-ui/themes';
-import classNames from 'classnames';
 import type { Draft } from 'immer';
 import { type Atom, useAtomValue, useStore } from 'jotai';
 import { useSetImmerAtom } from 'jotai-immer';
+import { Languages, Plus } from 'lucide-react';
 import { type ComponentPropsWithoutRef, useCallback, useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
 import { recalculateWordTime } from '$/modules/segmentation/utils/segmentation.ts';
 import { useSegmentationConfig } from '$/modules/segmentation/utils/useSegmentationConfig.ts';
 import { lyricLinesAtom } from '$/states/main.ts';
@@ -18,7 +19,7 @@ const AutoSizeTextField = ({
   placeholder,
   inputRef,
   ...rest
-}: ComponentPropsWithoutRef<typeof TextField.Root> & {
+}: ComponentPropsWithoutRef<'input'> & {
   inputRef?: React.Ref<HTMLInputElement>;
 }) => {
   const valueString = value === undefined || value === null ? '' : String(value);
@@ -29,9 +30,9 @@ const AutoSizeTextField = ({
         ? placeholder
         : '    ';
   return (
-    <span className={classNames(styles.autoSizeInput, className)} style={style}>
+    <span className={cn(styles.autoSizeInput, className)} style={style}>
       <span className={styles.autoSizeInputText}>{mirrorText}</span>
-      <TextField.Root
+      <Input
         className={styles.autoSizeInputField}
         value={value}
         placeholder={placeholder}
@@ -173,16 +174,21 @@ export const RubyEditor = ({
   if (!forceShow && rubyWords.length === 0) return null;
 
   return (
-    <span className={classNames(styles.rubyEditor, className)}>
+    <span className={cn(styles.rubyEditor, className)}>
       {showIcon && (
-        <IconButton size="1" variant="soft" onClick={applyRubyToAllSameWords}>
-          <TranslateRegular />
-        </IconButton>
+        <Button
+          variant="secondary"
+          size="icon"
+          className="size-7 shrink-0"
+          onClick={applyRubyToAllSameWords}
+          title="应用到所有相同单词"
+        >
+          <Languages className="size-4" />
+        </Button>
       )}
       {rubyWords.map((rubyWord, index) => (
         <AutoSizeTextField
           key={`${word.id}-ruby-${index}`}
-          size="1"
           inputRef={(el) => {
             inputRefs.current[index] = el;
           }}
@@ -209,9 +215,15 @@ export const RubyEditor = ({
           }}
         />
       ))}
-      <IconButton size="1" variant="soft" onClick={addRubyWord}>
-        <Add20Regular />
-      </IconButton>
+      <Button
+        variant="secondary"
+        size="icon"
+        className="size-7 shrink-0"
+        onClick={addRubyWord}
+        title="添加注音"
+      >
+        <Plus className="size-4" />
+      </Button>
     </span>
   );
 };
diff --git a/frontend/src/editor/modules/lyric-editor/tools/TimeShift.tsx b/frontend/src/editor/modules/lyric-editor/tools/TimeShift.tsx
index 6d2e0d2..a8153f2 100644
--- a/frontend/src/editor/modules/lyric-editor/tools/TimeShift.tsx
+++ b/frontend/src/editor/modules/lyric-editor/tools/TimeShift.tsx
@@ -1,11 +1,19 @@
 /**
  * @description “平移时间” 模态框
  */
-import { ArrowLeftRegular, ArrowRightRegular } from '@fluentui/react-icons';
-import { Button, Dialog, Flex, IconButton, RadioGroup, Text, TextField } from '@radix-ui/themes';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import { useEffect, useId, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Radio, RadioGroup } from '@/components/ui/radio-group';
 import { timeShiftDialogAtom } from '$/states/dialogs.ts';
 import {
   lyricLinesAtom,
@@ -20,7 +28,6 @@ type ShiftDirection = 'delay' | 'advance';
 type ShiftScope = 'all' | 'selected' | 'selected-following' | 'custom';
 
 export const TimeShiftDialog = () => {
-  const { t } = useTranslation();
   const [open, setOpen] = useAtom(timeShiftDialogAtom);
   const lyricLines = useAtomValue(lyricLinesAtom);
   useAtomValue(undoableLyricLinesAtom);
@@ -28,6 +35,9 @@ export const TimeShiftDialog = () => {
   const setLyricLines = useSetAtom(undoableLyricLinesAtom);
   const pushReviewOperation = useSetAtom(pushReviewOperationAtom);
 
+  const directionName = useId();
+  const scopeName = useId();
+
   const [offsetStr, setOffsetStr] = useState('100');
   const [direction, setDirection] = useState<ShiftDirection>('delay');
   const [scope, setScope] = useState<ShiftScope>('all');
@@ -140,106 +150,142 @@ export const TimeShiftDialog = () => {
   };
 
   return (
-    <Dialog.Root open={open} onOpenChange={setOpen}>
-      <Dialog.Content maxWidth="450px">
-        <Dialog.Title>{t('timeShiftDialog.title', '平移时间')}</Dialog.Title>
-        <Flex direction="column" gap="4">
-          <Flex direction="column" gap="1">
-            <Text size="2" weight="bold">
-              {t('timeShiftDialog.amount', '偏移量 (ms)')}
-            </Text>
-            <Flex gap="2" align="center">
-              <IconButton variant="soft" onClick={() => adjustOffset(-50)} title="- 50ms">
-                <ArrowLeftRegular />
-              </IconButton>
-              <TextField.Root
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="max-w-[450px]">
+        <DialogTitle>平移时间</DialogTitle>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1">
+            <span className="text-sm font-bold">偏移量 (ms)</span>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="secondary"
+                size="icon"
+                className="size-8 shrink-0"
+                onClick={() => adjustOffset(-50)}
+                title="- 50ms"
+              >
+                <ArrowLeft className="size-4" />
+              </Button>
+              <Input
                 type="number"
                 min="0"
                 value={offsetStr}
                 onChange={(e) => setOffsetStr(e.target.value)}
                 placeholder="100"
-                style={{ flexGrow: 1 }}
+                className="flex-1"
               />
-              <IconButton variant="soft" onClick={() => adjustOffset(50)} title="+ 50ms">
-                <ArrowRightRegular />
-              </IconButton>
-            </Flex>
-          </Flex>
-
-          <Flex direction="column" gap="1">
-            <Text size="2" weight="bold">
-              {t('timeShiftDialog.direction', '方向')}
-            </Text>
-            <RadioGroup.Root
-              value={direction}
-              onValueChange={(v) => setDirection(v as ShiftDirection)}
-              style={{ flexDirection: 'row', gap: '16px' }}
-            >
-              <RadioGroup.Item value="advance">
-                {t('timeShiftDialog.advance', '提前 (-)')}
-              </RadioGroup.Item>
-              <RadioGroup.Item value="delay">
-                {t('timeShiftDialog.delay', '延后 (+)')}
-              </RadioGroup.Item>
-            </RadioGroup.Root>
-          </Flex>
-
-          <Flex direction="column" gap="2">
-            <Text size="2" weight="bold">
-              {t('timeShiftDialog.scopeLabel', '应用于')}
-            </Text>
-            <RadioGroup.Root value={scope} onValueChange={(v) => setScope(v as ShiftScope)}>
-              <RadioGroup.Item value="all">
-                {t('timeShiftDialog.scope.all', '所有行')}
-              </RadioGroup.Item>
-
-              <RadioGroup.Item value="selected" disabled={!hasSelection}>
-                {t('timeShiftDialog.scope.selected', '所选行')}
+              <Button
+                variant="secondary"
+                size="icon"
+                className="size-8 shrink-0"
+                onClick={() => adjustOffset(50)}
+                title="+ 50ms"
+              >
+                <ArrowRight className="size-4" />
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <span className="text-sm font-bold">方向</span>
+            <RadioGroup className="flex-row gap-4">
+              <label className="flex items-center gap-2 text-sm">
+                <Radio
+                  name={directionName}
+                  value="advance"
+                  checked={direction === 'advance'}
+                  onChange={() => setDirection('advance')}
+                />
+                提前 (-)
+              </label>
+              <label className="flex items-center gap-2 text-sm">
+                <Radio
+                  name={directionName}
+                  value="delay"
+                  checked={direction === 'delay'}
+                  onChange={() => setDirection('delay')}
+                />
+                延后 (+)
+              </label>
+            </RadioGroup>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <span className="text-sm font-bold">应用于</span>
+            <RadioGroup>
+              <label className="flex items-center gap-2 text-sm">
+                <Radio
+                  name={scopeName}
+                  value="all"
+                  checked={scope === 'all'}
+                  onChange={() => setScope('all')}
+                />
+                所有行
+              </label>
+
+              <label className="flex items-center gap-2 text-sm">
+                <Radio
+                  name={scopeName}
+                  value="selected"
+                  checked={scope === 'selected'}
+                  onChange={() => setScope('selected')}
+                  disabled={!hasSelection}
+                />
+                所选行
                 {hasSelection && ` (${selectedLines.size})`}
-              </RadioGroup.Item>
+              </label>
 
-              <RadioGroup.Item value="selected-following" disabled={!hasSelection}>
-                {t('timeShiftDialog.scope.selectedFollowing', '所选行及其后续')}
-              </RadioGroup.Item>
+              <label className="flex items-center gap-2 text-sm">
+                <Radio
+                  name={scopeName}
+                  value="selected-following"
+                  checked={scope === 'selected-following'}
+                  onChange={() => setScope('selected-following')}
+                  disabled={!hasSelection}
+                />
+                所选行及其后续
+              </label>
 
-              <RadioGroup.Item value="custom">
-                {t('timeShiftDialog.scope.custom', '自定义范围')}
-              </RadioGroup.Item>
-            </RadioGroup.Root>
-          </Flex>
+              <label className="flex items-center gap-2 text-sm">
+                <Radio
+                  name={scopeName}
+                  value="custom"
+                  checked={scope === 'custom'}
+                  onChange={() => setScope('custom')}
+                />
+                自定义范围
+              </label>
+            </RadioGroup>
+          </div>
 
           {scope === 'custom' && (
-            <Flex align="center" gap="2" ml="4">
-              <Text size="2">{t('timeShiftDialog.fromLine', '从')}</Text>
-              <TextField.Root
-                style={{ width: '60px' }}
-                size="1"
+            <div className="ml-4 flex items-center gap-2">
+              <span className="text-sm">从</span>
+              <Input
+                className="w-[60px]"
                 type="number"
                 value={customStart}
                 onChange={(e) => setCustomStart(e.target.value)}
               />
-              <Text size="2">{t('timeShiftDialog.toLine', '行 到')}</Text>
-              <TextField.Root
-                style={{ width: '60px' }}
-                size="1"
+              <span className="text-sm">行 到</span>
+              <Input
+                className="w-[60px]"
                 type="number"
                 value={customEnd}
                 onChange={(e) => setCustomEnd(e.target.value)}
               />
-              <Text size="2">{t('timeShiftDialog.line', '行')}</Text>
-            </Flex>
+              <span className="text-sm">行</span>
+            </div>
           )}
-        </Flex>
-
-        <Flex gap="3" mt="5" justify="end">
-          <Dialog.Close>
-            <Button variant="soft" color="gray">
-              {t('common.cancel', '取消')}
-            </Button>
-          </Dialog.Close>
-          <Button onClick={handleConfirm}>{t('common.apply', '应用')}</Button>
-        </Flex>
-      </Dialog.Content>
-    </Dialog.Root>
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="secondary">取消</Button>
+          </DialogClose>
+          <Button onClick={handleConfirm}>应用</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };
diff --git a/frontend/src/editor/modules/lyric-editor/tools/i18nEditor.tsx b/frontend/src/editor/modules/lyric-editor/tools/i18nEditor.tsx
index 05851e2..01c77e2 100644
--- a/frontend/src/editor/modules/lyric-editor/tools/i18nEditor.tsx
+++ b/frontend/src/editor/modules/lyric-editor/tools/i18nEditor.tsx
@@ -1,18 +1,17 @@
-import { Add16Regular } from '@fluentui/react-icons';
-import { Grid, IconButton, Select, Text } from '@radix-ui/themes';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useSetImmerAtom } from 'jotai-immer';
+import { Plus } from 'lucide-react';
 import { type FC, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Select } from '@/components/ui/select';
 import { addLanguageDialogAtom } from '$/states/dialogs';
 import { lyricLinesAtom } from '$/states/main.ts';
 
 export const I18nEditor: FC = () => {
-  const { t } = useTranslation();
   const lyricLines = useAtomValue(lyricLinesAtom);
   const editLyricLines = useSetImmerAtom(lyricLinesAtom);
   const setAddLanguageDialog = useSetAtom(addLanguageDialogAtom);
-  const placeholder = t('ribbonBar.editMode.multilingualPlaceholder', '请选择语言');
+  const placeholder = '请选择语言';
 
   /** 只有一个 und 条目时，说明这行没有指定语言，退回 und 处理。 */
   const isOnlyUndEntry = (entries: [string, string][]) =>
@@ -325,85 +324,82 @@ export const I18nEditor: FC = () => {
   }, [applyWordRomanizationLang, editLyricLines, setAddLanguageDialog]);
 
   return (
-    <Grid columns="0fr 1fr auto" gap="2" gapY="1" flexGrow="1" align="center">
-      <Text wrap="nowrap" size="1">
-        {t('ribbonBar.editMode.translation', '翻译')}
-      </Text>
-      <Select.Root
-        value={currentTranslationLang}
-        onValueChange={applyTranslationLang}
+    <div className="grid flex-1 grid-cols-[auto_1fr_auto] items-center gap-x-2 gap-y-1">
+      <span className="whitespace-nowrap text-xs">翻译</span>
+      <Select
+        value={currentTranslationLang ?? ''}
+        onChange={(e) => applyTranslationLang(e.target.value)}
         disabled={translationLanguages.length === 0}
-        size="1"
+        className="h-7 text-xs"
       >
-        <Select.Trigger placeholder={placeholder} />
-        <Select.Content>
-          {translationLanguages.map((lang) => (
-            <Select.Item key={lang} value={lang}>
-              {lang}
-            </Select.Item>
-          ))}
-        </Select.Content>
-      </Select.Root>
-      <IconButton
-        variant="soft"
-        size="1"
+        <option value="" disabled>
+          {placeholder}
+        </option>
+        {translationLanguages.map((lang) => (
+          <option key={lang} value={lang}>
+            {lang}
+          </option>
+        ))}
+      </Select>
+      <Button
+        variant="secondary"
+        size="icon"
+        className="size-7 shrink-0"
         onClick={openAddTranslationDialog}
-        aria-label={t('addLanguageDialog.addTranslation', '新增翻译语言')}
+        aria-label="新增翻译语言"
       >
-        <Add16Regular />
-      </IconButton>
-      <Text wrap="nowrap" size="1">
-        {t('ribbonBar.editMode.romanization', '音译')}
-      </Text>
-      <Select.Root
-        value={currentRomanizationLang}
-        onValueChange={applyRomanizationLang}
+        <Plus className="size-4" />
+      </Button>
+      <span className="whitespace-nowrap text-xs">音译</span>
+      <Select
+        value={currentRomanizationLang ?? ''}
+        onChange={(e) => applyRomanizationLang(e.target.value)}
         disabled={romanizationLanguages.length === 0}
-        size="1"
+        className="h-7 text-xs"
       >
-        <Select.Trigger placeholder={placeholder} />
-        <Select.Content>
-          {romanizationLanguages.map((lang) => (
-            <Select.Item key={lang} value={lang}>
-              {lang}
-            </Select.Item>
-          ))}
-        </Select.Content>
-      </Select.Root>
-      <IconButton
-        variant="soft"
-        size="1"
+        <option value="" disabled>
+          {placeholder}
+        </option>
+        {romanizationLanguages.map((lang) => (
+          <option key={lang} value={lang}>
+            {lang}
+          </option>
+        ))}
+      </Select>
+      <Button
+        variant="secondary"
+        size="icon"
+        className="size-7 shrink-0"
         onClick={openAddRomanizationDialog}
-        aria-label={t('addLanguageDialog.addRomanization', '新增音译语言')}
+        aria-label="新增音译语言"
       >
-        <Add16Regular />
-      </IconButton>
-      <Text wrap="nowrap" size="1">
-        {t('ribbonBar.editMode.wordRomanization', '逐字音译')}
-      </Text>
-      <Select.Root
-        value={currentWordRomanizationLang}
-        onValueChange={applyWordRomanizationLang}
+        <Plus className="size-4" />
+      </Button>
+      <span className="whitespace-nowrap text-xs">逐字音译</span>
+      <Select
+        value={currentWordRomanizationLang ?? ''}
+        onChange={(e) => applyWordRomanizationLang(e.target.value)}
         disabled={wordRomanizationLanguages.length === 0}
-        size="1"
+        className="h-7 text-xs"
       >
-        <Select.Trigger placeholder={placeholder} />
-        <Select.Content>
-          {wordRomanizationLanguages.map((lang) => (
-            <Select.Item key={lang} value={lang}>
-              {lang}
-            </Select.Item>
-          ))}
-        </Select.Content>
-      </Select.Root>
-      <IconButton
-        variant="soft"
-        size="1"
+        <option value="" disabled>
+          {placeholder}
+        </option>
+        {wordRomanizationLanguages.map((lang) => (
+          <option key={lang} value={lang}>
+            {lang}
+          </option>
+        ))}
+      </Select>
+      <Button
+        variant="secondary"
+        size="icon"
+        className="size-7 shrink-0"
         onClick={openAddWordRomanizationDialog}
-        aria-label={t('addLanguageDialog.addWordRomanization', '新增逐字音译语言')}
+        aria-label="新增逐字音译语言"
       >
-        <Add16Regular />
-      </IconButton>
-    </Grid>
+        <Plus className="size-4" />
+      </Button>
+    </div>
   );
 };
diff --git a/frontend/src/editor/modules/project/modals/GlobalDragOverlay.tsx b/frontend/src/editor/modules/project/modals/GlobalDragOverlay.tsx
index 00a1c93..1d0c41e 100644
--- a/frontend/src/editor/modules/project/modals/GlobalDragOverlay.tsx
+++ b/frontend/src/editor/modules/project/modals/GlobalDragOverlay.tsx
@@ -2,16 +2,13 @@
  * @description 拖拽文件到应用上方时显示的遮罩层
  */
 
-import { ArrowUploadRegular } from '@fluentui/react-icons';
-import { Flex, Text } from '@radix-ui/themes';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useAtomValue } from 'jotai';
-import { useTranslation } from 'react-i18next';
+import { Upload } from 'lucide-react';
 import { isGlobalFileDraggingAtom } from '$/states/main';
 
 export const GlobalDragOverlay = () => {
   const isDragging = useAtomValue(isGlobalFileDraggingAtom);
-  const { t } = useTranslation();
 
   return (
     <AnimatePresence>
@@ -29,19 +26,13 @@ export const GlobalDragOverlay = () => {
             pointerEvents: 'none',
           }}
         >
-          <Flex
-            direction="column"
-            align="center"
-            justify="center"
-            width="100%"
-            height="100%"
+          <div
+            className="flex h-full w-full flex-col items-center justify-center"
             style={{ background: 'rgba(0, 0, 0, 0.6)' }}
           >
-            <ArrowUploadRegular style={{ fontSize: 64, color: 'white' }} />
-            <Text size="8" weight="bold" style={{ color: 'white', marginTop: '20px' }}>
-              {t('globalDragOverlay.title', '拖放到此处以加载')}
-            </Text>
-          </Flex>
+            <Upload size={64} color="white" />
+            <span className="mt-5 text-4xl font-bold text-white">拖放到此处以加载</span>
+          </div>
         </motion.div>
       )}
     </AnimatePresence>
diff --git a/frontend/src/editor/modules/project/modals/MetadataEditor.module.css b/frontend/src/editor/modules/project/modals/MetadataEditor.module.css
index d99d931..45fa57b 100644
--- a/frontend/src/editor/modules/project/modals/MetadataEditor.module.css
+++ b/frontend/src/editor/modules/project/modals/MetadataEditor.module.css
@@ -101,14 +101,19 @@
 }
 
 .navBadge {
+  display: inline-flex;
   min-width: 18px;
   height: 18px;
+  align-items: center;
+  justify-content: center;
   padding: 0 6px;
   color: var(--accent-11);
   font-size: 12px;
+  font-variant-numeric: tabular-nums;
   line-height: 18px;
   text-align: center;
-  background: var(--accent-a4);
+  background: var(--accent-a2);
+  border: 1px solid var(--accent-a5);
   border-radius: var(--radius-full);
 }
 
diff --git a/frontend/src/editor/modules/project/modals/MetadataEditor.tsx b/frontend/src/editor/modules/project/modals/MetadataEditor.tsx
index 0fe001c..ea49b8f 100644
--- a/frontend/src/editor/modules/project/modals/MetadataEditor.tsx
+++ b/frontend/src/editor/modules/project/modals/MetadataEditor.tsx
@@ -1,30 +1,29 @@
 import {
-  Add16Regular,
-  AlbumRegular,
-  Delete16Regular,
-  GlobeSearch20Regular,
-  Info16Regular,
-  MusicNote1Regular,
-  NumberSymbol16Regular,
-  Open16Regular,
-  Person16Regular,
-  Sparkle20Regular,
-} from '@fluentui/react-icons';
-import {
-  Button,
-  Dialog,
-  Flex,
-  Heading,
-  IconButton,
-  Spinner,
-  Text,
-  TextField,
-} from '@radix-ui/themes';
+  Disc3,
+  ExternalLink,
+  Globe,
+  Hash,
+  Info,
+  Loader2,
+  Music,
+  Plus,
+  Sparkles,
+  Trash2,
+  User,
+} from 'lucide-react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useAtom, useAtomValue } from 'jotai';
 import { useImmerAtom } from 'jotai-immer';
 import { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
 import {
   getMeatdataSuggestion,
   type MetaSuggestionResult,
@@ -113,7 +112,6 @@ const MetadataValueEditorRow = memo(
     applySuggestionValues,
     requestNeteaseMeta,
   }: MetadataValueEditorRowProps) => {
-    const { t } = useTranslation();
     const [suggestions, setSuggestions] = useState<MetaSuggestionResult[]>([]);
     const [isFocused, setIsFocused] = useState(false);
     const [isFetchingMeta, setIsFetchingMeta] = useState(false);
@@ -170,12 +168,22 @@ const MetadataValueEditorRow = memo(
     const canFetchNeteaseMeta = option.value === 'ncmMusicId' && !isFocused && value.trim() !== '';
 
     return (
-      <Flex gap="2" align="center" className={styles.valueRow}>
-        <TextField.Root
+      <div className={`flex items-center gap-2 ${styles.valueRow}`}>
+        <Input
           data-metadata-input="true"
           ref={inputRef}
           value={value}
-          className={`${styles.metadataInput} ${isDragOver ? styles.dragOverInput : ''}`}
+          className={`${styles.metadataInput} ${isDragOver ? styles.dragOverInput : ''} ${
+            hasAnyError
+              ? itemHasError
+                ? validation?.severe
+                  ? 'border-error text-error'
+                  : 'border-warning text-warning'
+                : isDuplicate
+                  ? 'border-error text-error'
+                  : ''
+              : ''
+          }`}
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
           onChange={(e) => updateValue(valueIndex, e.currentTarget.value)}
@@ -205,37 +213,36 @@ const MetadataValueEditorRow = memo(
             const text = e.dataTransfer.getData('text');
             if (text) updateValue(valueIndex, text);
           }}
-          variant={hasAnyError ? 'soft' : 'surface'}
-          color={
-            itemHasError ? (validation?.severe ? 'red' : 'orange') : isDuplicate ? 'red' : undefined
-          }
         />
         {hasSuggestion && suggestions.length === 1 && suggestions[0]?.matchedValue !== value && (
-          <IconButton
-            variant="soft"
+          <Button
+            type="button"
+            size="icon"
+            variant="secondary"
             onClick={() => {
               applySuggestionValues(suggestions[0]?.values ?? []);
               setSuggestions([]);
             }}
-            title={t('metadataDialog.applySuggestion', '应用建议')}
+            title="应用建议"
           >
-            <Sparkle20Regular />
-          </IconButton>
+            <Sparkles />
+          </Button>
         )}
         {hasSuggestion && suggestions.length > 1 && (
-          <Dialog.Root>
-            <Dialog.Trigger>
-              <IconButton variant="soft" title={t('metadataDialog.pickSuggestion', '选择匹配项')}>
-                <Sparkle20Regular />
-              </IconButton>
-            </Dialog.Trigger>
-            <Dialog.Content>
-              <Dialog.Title>{t('metadataDialog.pickSuggestion', '选择匹配项')}</Dialog.Title>
-              <Flex direction="column" gap="2">
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button type="button" size="icon" variant="secondary" title="选择匹配项">
+                <Sparkles />
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogTitle>选择匹配项</DialogTitle>
+              <div className="flex flex-col gap-2">
                 {suggestions.map((suggestion) => (
-                  <Dialog.Close key={suggestion.title}>
+                  <DialogClose key={suggestion.title} asChild>
                     <Button
-                      variant="soft"
+                      type="button"
+                      variant="secondary"
                       onClick={() => {
                         applySuggestionValues(suggestion.values);
                         setSuggestions([]);
@@ -243,15 +250,17 @@ const MetadataValueEditorRow = memo(
                     >
                       {suggestion.title}
                     </Button>
-                  </Dialog.Close>
+                  </DialogClose>
                 ))}
-              </Flex>
-            </Dialog.Content>
-          </Dialog.Root>
+              </div>
+            </DialogContent>
+          </Dialog>
         )}
         {canFetchNeteaseMeta && (
-          <IconButton
-            variant="soft"
+          <Button
+            type="button"
+            size="icon"
+            variant="secondary"
             disabled={isFetchingMeta}
             onClick={async () => {
               if (isFetchingMeta) return;
@@ -264,38 +273,52 @@ const MetadataValueEditorRow = memo(
                 setIsFetchingMeta(false);
               }
             }}
-            title={t('metadataDialog.fetchNeteaseMeta', '从网易云获取元数据')}
+            title="从网易云获取元数据"
           >
-            {isFetchingMeta ? <Spinner size="1" /> : <GlobeSearch20Regular />}
-          </IconButton>
+            {isFetchingMeta ? <Loader2 className="animate-spin" /> : <Globe />}
+          </Button>
         )}
         {option.isLinkable && (
-          <IconButton
+          <Button
+            type="button"
+            size="icon"
+            variant="secondary"
             disabled={!isButtonEnabled}
+            title="打开链接"
             asChild={isButtonEnabled}
-            variant="soft"
-            title={t('metadataDialog.openLink', '打开链接')}
+            onClick={
+              isButtonEnabled
+                ? undefined
+                : () => {
+                    /* 禁用态无操作 */
+                  }
+            }
           >
             {isButtonEnabled ? (
               <a href={url || ''} target="_blank" rel="noopener noreferrer">
-                <Open16Regular />
+                <ExternalLink />
               </a>
             ) : (
-              <Open16Regular />
+              <ExternalLink />
             )}
-          </IconButton>
+          </Button>
         )}
-        <IconButton variant="soft" onClick={() => removeValue(valueIndex)}>
-          <Delete16Regular />
-        </IconButton>
-      </Flex>
+        <Button
+          type="button"
+          size="icon"
+          variant="secondary"
+          onClick={() => removeValue(valueIndex)}
+          title="删除"
+        >
+          <Trash2 />
+        </Button>
+      </div>
     );
   }
 );
 
 const MetadataItemEditor = memo(
   ({ entry, option, setLyricLines, requestNeteaseMeta }: MetadataItemEditorProps) => {
-    const { t } = useTranslation();
     const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
     const [focusIndex, setFocusIndex] = useState<number | null>(null);
     const [isDraggingCategory, setIsDraggingCategory] = useState(false);
@@ -468,7 +491,7 @@ const MetadataItemEditor = memo(
         <div className={styles.valueList}>
           {values.length === 0 && (
             <div className={styles.emptyState}>
-              <Text color="gray">{t('metadataDialog.emptyItem', '此项尚未添加任何条目')}</Text>
+              <span className="text-ink-3">此项尚未添加任何条目</span>
             </div>
           )}
           {values.map((value, index) => (
@@ -497,18 +520,14 @@ const MetadataItemEditor = memo(
         </div>
 
         {validation && rowHasError && (
-          <Text color={validation.severe ? 'red' : 'orange'} size="1" wrap="wrap">
+          <span className={`text-xs ${validation.severe ? 'text-error' : 'text-warning'}`}>
             {validation.message}
-          </Text>
+          </span>
         )}
-        {rowHasDuplicate && (
-          <Text color="red" size="1" wrap="wrap">
-            {t('metadataDialog.duplicateMsg', '存在重复的元数据值')}
-          </Text>
-        )}
-        <Button variant="soft" onClick={() => addValue()}>
-          <Add16Regular />
-          {t('metadataDialog.addValue', '添加')}
+        {rowHasDuplicate && <span className="text-xs text-error">存在重复的元数据值</span>}
+        <Button type="button" variant="secondary" onClick={() => addValue()}>
+          <Plus />
+          添加
         </Button>
       </div>
     );
@@ -532,7 +551,6 @@ export const MetadataEditor = () => {
     [resolvedTheme]
   );
 
-  const { t } = useTranslation();
   /**
    * 从网易云 ID 拉取歌曲资料并填进元数据。
    *
@@ -575,140 +593,116 @@ export const MetadataEditor = () => {
     return [
       // 歌词所匹配的歌曲名
       {
-        label: t('metadataDialog.builtinOptions.musicName', '歌曲名称'),
+        label: '歌曲名称',
         value: 'musicName',
-        icon: <MusicNote1Regular />,
+        icon: <Music />,
       },
       // 歌词所匹配的歌手名
       {
-        label: t('metadataDialog.builtinOptions.artists', '歌曲的艺术家'),
+        label: '歌曲的艺术家',
         value: 'artists',
-        icon: <Person16Regular />,
+        icon: <User />,
         suggestion: true,
         validation: {
           verifier: (value: string) => !/^.+[,;&，；、].+$/.test(value),
-          message: t(
-            'metadataDialog.builtinOptions.artistsInvalidMsg',
-            '如果有多个艺术家，请多次添加该键值，避免使用分隔符'
-          ),
+          message: '如果有多个艺术家，请多次添加该键值，避免使用分隔符',
         },
       },
       // 歌词所匹配的词曲作者
       {
-        label: t('metadataDialog.builtinOptions.songwriter', '词曲作者'),
+        label: '词曲作者',
         value: 'songwriter',
-        icon: <Person16Regular />,
+        icon: <User />,
         validation: {
           verifier: (value: string) => !/^.+[,;&，；、].+$/.test(value),
-          message: t(
-            'metadataDialog.builtinOptions.songwriterInvalidMsg',
-            '如果有多个词曲作者，请多次添加该键值，避免使用分隔符'
-          ),
+          message: '如果有多个词曲作者，请多次添加该键值，避免使用分隔符',
         },
       },
       // 歌词所匹配的专辑名
       {
-        label: t('metadataDialog.builtinOptions.album', '歌曲的专辑名'),
+        label: '歌曲的专辑名',
         value: 'album',
-        icon: <AlbumRegular />,
+        icon: <Disc3 />,
       },
       // 歌词所匹配的网易云音乐 ID
       {
-        label: t('metadataDialog.builtinOptions.ncmMusicId', '网易云音乐 ID'),
+        label: '网易云音乐 ID',
         value: 'ncmMusicId',
         icon: <NeteaseIcon />,
         isLinkable: true,
         urlFormatter: (val) => getPlatformUrl('ncmMusicId', val),
         validation: {
           verifier: numeric,
-          message: t(
-            'metadataDialog.builtinOptions.ncmMusicIdInvalidMsg',
-            '网易云音乐 ID 应为纯数字'
-          ),
+          message: '网易云音乐 ID 应为纯数字',
           severe: true,
         },
       },
       // 歌词所匹配的 QQ 音乐 ID
       {
-        label: t('metadataDialog.builtinOptions.qqMusicId', 'QQ 音乐 ID'),
+        label: 'QQ 音乐 ID',
         value: 'qqMusicId',
         icon: <QQMusicIcon />,
         isLinkable: true,
         urlFormatter: (val) => getPlatformUrl('qqMusicId', val),
         validation: {
           verifier: alphanumeric,
-          message: t(
-            'metadataDialog.builtinOptions.qqMusicIdInvalidMsg',
-            'QQ 音乐 ID 应为字母或数字'
-          ),
+          message: 'QQ 音乐 ID 应为字母或数字',
           severe: true,
         },
       },
       // 歌词所匹配的 Spotify 音乐 ID
       {
-        label: t('metadataDialog.builtinOptions.spotifyId', 'Spotify 音乐 ID'),
+        label: 'Spotify 音乐 ID',
         value: 'spotifyId',
         icon: <SpotifyIcon />,
         isLinkable: true,
         urlFormatter: (val) => getPlatformUrl('spotifyId', val),
         validation: {
           verifier: alphanumeric,
-          message: t(
-            'metadataDialog.builtinOptions.spotifyIdInvalidMsg',
-            'Spotify ID 应为字母或数字'
-          ),
+          message: 'Spotify ID 应为字母或数字',
           severe: true,
         },
       },
       // 歌词所匹配的 Apple Music 音乐 ID
       {
-        label: t('metadataDialog.builtinOptions.appleMusicId', 'Apple Music 音乐 ID'),
+        label: 'Apple Music 音乐 ID',
         value: 'appleMusicId',
         icon: <AppleMusicIcon />,
         isLinkable: true,
         urlFormatter: (val) => getPlatformUrl('appleMusicId', val),
         validation: {
           verifier: numeric,
-          message: t(
-            'metadataDialog.builtinOptions.appleMusicIdInvalidMsg',
-            'Apple Music ID 应为纯数字'
-          ),
+          message: 'Apple Music ID 应为纯数字',
           severe: true,
         },
       },
       // 歌词所匹配的 ISRC 编码
       {
-        label: t('metadataDialog.builtinOptions.isrc', '歌曲的 ISRC 号码'),
+        label: '歌曲的 ISRC 号码',
         value: 'isrc',
-        icon: <NumberSymbol16Regular />,
+        icon: <Hash />,
         isLinkable: true,
         urlFormatter: (val) => getPlatformUrl('isrc', val),
         validation: {
           verifier: (value: string) => /^[A-Z]{2}-?[A-Z0-9]{3}-?\d{2}-?\d{5}$/.test(value),
-          message: t(
-            'metadataDialog.builtinOptions.isrcInvalidMsg',
-            'ISRC 编码格式应为 CC-XXX-YY-NNNNN'
-          ),
+          message: 'ISRC 编码格式应为 CC-XXX-YY-NNNNN',
           severe: true,
         },
       },
       // 逐词歌词作者 GitHub ID，例如 39523898
       {
-        label: t('metadataDialog.builtinOptions.ttmlAuthorGithub', '歌词作者 GitHub ID'),
+        label: '歌词作者 GitHub ID',
         value: 'ttmlAuthorGithub',
         icon: <GithubIcon />,
         validation: {
           verifier: numeric,
-          message: t(
-            'metadataDialog.builtinOptions.ttmlAuthorGithubInvalidMsg',
-            'GitHub ID 应为纯数字'
-          ),
+          message: 'GitHub ID 应为纯数字',
           severe: true,
         },
       },
       // 逐词歌词作者 GitHub 用户名，例如 Steve-xmh
       {
-        label: t('metadataDialog.builtinOptions.ttmlAuthorGithubLogin', '歌词作者 GitHub 用户名'),
+        label: '歌词作者 GitHub 用户名',
         value: 'ttmlAuthorGithubLogin',
         icon: <GithubIcon />,
         isLinkable: true,
@@ -716,15 +710,12 @@ export const MetadataEditor = () => {
         validation: {
           verifier: (value: string) =>
             /^(?!.*--)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,37}[a-zA-Z0-9])?$/.test(value),
-          message: t(
-            'metadataDialog.builtinOptions.ttmlAuthorGithubLoginInvalidMsg',
-            'GitHub username should be alphanumeric or hyphens, up to 39 characters'
-          ),
+          message: 'GitHub username should be alphanumeric or hyphens, up to 39 characters',
           severe: true,
         },
       },
     ];
-  }, [t]);
+  }, []);
 
   const customOptions: SelectOption[] = useMemo(
     () =>
@@ -733,7 +724,7 @@ export const MetadataEditor = () => {
         .map((metadata) => ({
           label: metadata.key,
           value: metadata.key,
-          icon: <Info16Regular />,
+          icon: <Info />,
         })),
     [builtinOptions, lyricLines.metadata]
   );
@@ -772,7 +763,7 @@ export const MetadataEditor = () => {
   }, [builtinOptions, setLyricLines]);
 
   return (
-    <Dialog.Root
+    <Dialog
       open={metadataEditorDialog}
       onOpenChange={(open) => {
         setMetadataEditorDialog(open);
@@ -790,38 +781,24 @@ export const MetadataEditor = () => {
         }
       }}
     >
-      <Dialog.Content
-        className={styles.dialogContent}
-        /*
-         * 主题色用**内联 style**下发，不用 CSS 类。
-         *
-         * 原因：Radix 的 `Dialog.Content` 内部又套了一层
-         * `<Theme asChild>`，它在自己所在的元素上渲染出
-         * `data-accent-color="indigo"`（Theme 的默认值），
-         * 而 Radix 的色阶正是用这个属性选择器声明的：
-         *
-         *   [data-accent-color='indigo'] { --accent-9: … }  ← 0,1,0
-         *
-         * 浮层在 body 子树里，跟工作台那套 `.editor-radix-theme`
-         * 覆写不在一条继承链上，CSS 类很难稳定压过它 ——
-         * 这就是「弹窗里按钮/复选框颜色和外面不一样」的原因。
-         *
-         * 内联 style 优先级高于任何非 `!important` 声明，
-         * 直接写在 Content 元素上必然生效，也不用去猜层叠顺序。
-         *
-         * 色值与 `components/review/editor-theme.css` 保持一致
-         * （站点品牌红 #e0303f），深色模式的提亮档在下面按需覆盖。
-         */
-        style={accentStyle}
-      >
-        <Dialog.Title className={styles.srOnly}>
-          {t('metadataDialog.title', '元数据编辑器')}
-        </Dialog.Title>
+      {/*
+       * 主题色用**内联 style**下发，不用 CSS 类。
+       *
+       * 原因：浮层 Portal 到 body，跟工作台的 CSS 覆写不在一条继承链上，
+       * CSS 类很难稳定压过浮层自身的色阶声明 —— 这就是
+       * 「弹窗里按钮/复选框颜色和外面不一样」的原因。
+       *
+       * 内联 style 优先级高于任何非 `!important` 声明，直接写在
+       * Content 元素上必然生效，也不用去猜层叠顺序。
+       *
+       * 色值与 `components/review/editor-theme.css` 保持一致
+       * （站点品牌红 #e0303f），深色模式的提亮档在下面按需覆盖。
+       */}
+      <DialogContent className={styles.dialogContent} style={accentStyle}>
+        <DialogTitle className={styles.srOnly}>元数据编辑器</DialogTitle>
 
         <aside className={styles.sidebar}>
-          <Text as="div" weight="bold" size="2" className={styles.sidebarTitle}>
-            {t('metadataDialog.title', '元数据编辑器')}
-          </Text>
+          <div className={`${styles.sidebarTitle} text-sm font-bold`}>元数据编辑器</div>
           <nav className={styles.navList}>
             {navOptions.map((option) => {
               const selected = activeOption?.value === option.value;
@@ -844,8 +821,8 @@ export const MetadataEditor = () => {
             })}
           </nav>
           <div className={styles.customKeyForm}>
-            <TextField.Root
-              placeholder={t('metadataDialog.customKey', '自定义键名')}
+            <Input
+              placeholder="自定义键名"
               value={customKey}
               onChange={(e) => setCustomKey(e.currentTarget.value)}
               onKeyDown={(e) => {
@@ -855,22 +832,18 @@ export const MetadataEditor = () => {
                 }
               }}
             />
-            <IconButton variant="soft" onClick={addCustomKey}>
-              <Add16Regular />
-            </IconButton>
+            <Button type="button" size="icon" variant="secondary" onClick={addCustomKey}>
+              <Plus />
+            </Button>
           </div>
         </aside>
 
         <section className={styles.mainPane}>
           <header className={styles.header}>
             <div className={styles.titleBlock}>
-              <Heading size="7" className={styles.pageTitle}>
-                {activeOption?.label}
-              </Heading>
+              <div className={`${styles.pageTitle} text-2xl font-bold`}>{activeOption?.label}</div>
               {activeOption && (
-                <Text size="2" color="gray" className={styles.titleMeta}>
-                  {activeOption.value}
-                </Text>
+                <div className={`${styles.titleMeta} text-sm text-ink-3`}>{activeOption.value}</div>
               )}
             </div>
           </header>
@@ -897,36 +870,29 @@ export const MetadataEditor = () => {
             </AnimatePresence>
           </div>
 
-          <Flex
-            gap="2"
-            direction={{
-              sm: 'row',
-              initial: 'column',
-            }}
-            className={styles.dialogFooter}
-          >
+          <div className={`flex flex-col gap-2 sm:flex-row ${styles.dialogFooter}`}>
             <Button
+              type="button"
               style={{ flex: '1 0 auto' }}
-              color="red"
-              variant="solid"
+              variant="destructive"
               onClick={clearAllMetadata}
             >
-              <Delete16Regular />
-              {t('metadataDialog.clear', '清空')}
+              <Trash2 />
+              清空
             </Button>
-            <Button asChild variant="soft">
+            <Button type="button" variant="secondary" asChild>
               <a
                 target="_blank"
                 rel="noreferrer"
                 href="https://github.com/amll-dev/amll-ttml-tool/wiki/%E6%AD%8C%E8%AF%8D%E5%85%83%E6%95%B0%E6%8D%AE"
               >
-                <Info16Regular />
-                {t('metadataDialog.info', '了解详情')}
+                <Info />
+                了解详情
               </a>
             </Button>
-          </Flex>
+          </div>
         </section>
-      </Dialog.Content>
-    </Dialog.Root>
+      </DialogContent>
+    </Dialog>
   );
 };
diff --git a/frontend/src/editor/modules/project/modals/VocalTagsEditor.tsx b/frontend/src/editor/modules/project/modals/VocalTagsEditor.tsx
index 9d0b188..21f6fb6 100644
--- a/frontend/src/editor/modules/project/modals/VocalTagsEditor.tsx
+++ b/frontend/src/editor/modules/project/modals/VocalTagsEditor.tsx
@@ -1,9 +1,10 @@
-import { Add16Regular, Delete16Regular } from '@fluentui/react-icons';
-import { Button, Dialog, Flex, Text, TextField } from '@radix-ui/themes';
 import { useAtom } from 'jotai';
 import { useImmerAtom } from 'jotai-immer';
+import { Plus, Trash2 } from 'lucide-react';
 import { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
 import { vocalTagsEditorDialogAtom } from '$/states/dialogs.ts';
 import { lyricLinesAtom } from '$/states/main.ts';
 import type { TTMLLyric } from '$/types/ttml';
@@ -54,7 +55,6 @@ const reassignVocalIds = (draft: TTMLLyric) => {
 export const VocalTagsEditor = () => {
   const [open, setOpen] = useAtom(vocalTagsEditorDialogAtom);
   const [lyricLines, setLyricLines] = useImmerAtom(lyricLinesAtom);
-  const { t } = useTranslation();
   const [editingIndex, setEditingIndex] = useState<number | null>(null);
   const [editingValue, setEditingValue] = useState('');
   const [isAdding, setIsAdding] = useState(false);
@@ -68,23 +68,19 @@ export const VocalTagsEditor = () => {
   }, [lyricLines.metadata]);
 
   return (
-    <Dialog.Root open={open} onOpenChange={setOpen}>
-      <Dialog.Content className={styles.dialogContent}>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className={styles.dialogContent}>
         <div className={styles.dialogHeader}>
-          <Dialog.Title style={{ margin: 0 }}>
-            {t('vocalTagsDialog.title', '演唱者标签')}
-          </Dialog.Title>
+          <DialogTitle style={{ margin: 0 }}>演唱者标签</DialogTitle>
         </div>
         <div className={styles.dialogBody}>
           <section>
             <div className={styles.sectionHeader}>
-              <Flex align="center" justify="between">
-                <Text size="3" weight="medium">
-                  {t('vocalTagsDialog.mappingTitle', '演唱者标签')}
-                </Text>
-                <Flex align="center" gap="2">
+              <div className="flex items-center justify-between">
+                <span className="text-base font-medium">演唱者标签</span>
+                <div className="flex items-center gap-2">
                   <Button
-                    variant="soft"
+                    variant="secondary"
                     disabled={artistNames.length === 0}
                     onClick={() => {
                       if (artistNames.length === 0) return;
@@ -98,11 +94,11 @@ export const VocalTagsEditor = () => {
                       });
                     }}
                   >
-                    {t('vocalTagsDialog.importFromArtists', '从 artists 导入')}
+                    从 artists 导入
                   </Button>
                   <Button
-                    variant="soft"
-                    color="red"
+                    variant="secondary"
+                    className="text-error"
                     onClick={() => {
                       setLyricLines((draft) => {
                         draft.lyricLines.forEach((line) => {
@@ -111,11 +107,10 @@ export const VocalTagsEditor = () => {
                       });
                     }}
                   >
-                    {t('vocalTagsDialog.clearAssignments', '清空分配')}
+                    清空分配
                   </Button>
                   <Button
-                    color="red"
-                    variant="solid"
+                    variant="destructive"
                     onClick={() => {
                       setLyricLines((draft) => {
                         draft.vocalTags = [];
@@ -125,26 +120,22 @@ export const VocalTagsEditor = () => {
                       });
                     }}
                   >
-                    <Delete16Regular />
-                    {t('vocalTagsDialog.clear', '清空')}
+                    <Trash2 className="size-4" />
+                    清空
                   </Button>
-                </Flex>
-              </Flex>
+                </div>
+              </div>
             </div>
-            {vocalTags.length === 0 && (
-              <Text size="2" color="gray">
-                {t('vocalTagsDialog.empty', '暂无演唱者标签。')}
-              </Text>
-            )}
+            {vocalTags.length === 0 && <span className="text-sm text-ink-3">暂无演唱者标签。</span>}
             <div className={styles.tagList}>
               {vocalTags.map((tag, index) =>
                 editingIndex === index ? (
-                  <TextField.Root
+                  <Input
                     key={`vocal-tag-edit-${tag.key}`}
                     className={styles.tagControl}
                     autoFocus
                     value={editingValue}
-                    placeholder={t('vocalTagsDialog.valuePlaceholder', '显示名称')}
+                    placeholder="显示名称"
                     onChange={(e) => setEditingValue(e.currentTarget.value)}
                     onKeyDown={(e) => {
                       if (e.key !== 'Enter') return;
@@ -168,24 +159,22 @@ export const VocalTagsEditor = () => {
                   <Button
                     key={`vocal-tag-${tag.key}`}
                     className={styles.tagControl}
-                    variant="soft"
+                    variant="secondary"
                     onClick={() => {
                       setEditingIndex(index);
                       setEditingValue(tag.value ?? '');
                     }}
                   >
-                    {tag.value?.trim()
-                      ? `${tag.key}: ${tag.value}`
-                      : `${tag.key}: ${t('vocalTagsDialog.untitled', '(未命名)')}`}
+                    {tag.value?.trim() ? `${tag.key}: ${tag.value}` : `${tag.key}: ${'(未命名)'}`}
                   </Button>
                 )
               )}
               {isAdding ? (
-                <TextField.Root
+                <Input
                   className={styles.tagControl}
                   autoFocus
                   value={newTagValue}
-                  placeholder={t('vocalTagsDialog.valuePlaceholder', '显示名称')}
+                  placeholder="显示名称"
                   onChange={(e) => setNewTagValue(e.currentTarget.value)}
                   onKeyDown={(e) => {
                     if (e.key !== 'Enter') return;
@@ -208,22 +197,22 @@ export const VocalTagsEditor = () => {
               ) : (
                 <Button
                   className={styles.tagControl}
-                  variant="soft"
+                  variant="secondary"
                   onClick={() => {
                     setIsAdding(true);
                     setNewTagValue('');
                   }}
                 >
-                  <Flex align="center" gap="2">
-                    <Add16Regular />
-                    {t('vocalTagsDialog.addTag', '添加演唱者标签')}
-                  </Flex>
+                  <span className="flex items-center gap-2">
+                    <Plus className="size-4" />
+                    添加演唱者标签
+                  </span>
                 </Button>
               )}
             </div>
           </section>
         </div>
-      </Dialog.Content>
-    </Dialog.Root>
+      </DialogContent>
+    </Dialog>
   );
 };
diff --git a/frontend/src/editor/modules/project/modals/metadata-dialog-theme.ts b/frontend/src/editor/modules/project/modals/metadata-dialog-theme.ts
index 6462939..05b0b6e 100644
--- a/frontend/src/editor/modules/project/modals/metadata-dialog-theme.ts
+++ b/frontend/src/editor/modules/project/modals/metadata-dialog-theme.ts
@@ -1,32 +1,6 @@
-/**
- * 弹窗 Radix accent 色阶下发
- *
- * ## 为什么需要它
- *
- * `MetadataEditor` 的 Dialog Portal 到 `body`，**不在 `editor-body` 子树里**，
- * 所以 `editor-theme.css` 里挂在 `body.editor-body [data-accent-color]`
- * 的品牌红色阶对它不生效 —— 弹窗里按钮/复选框/开关会回落到 Radix
- * 内置的indigo。
- *
- * 而 Radix 的 `Dialog.Content` 内部又套了一层 `<Theme asChild>`，
- * 在自己元素上渲染 `data-accent-color="indigo"`，Radix 用
- * `[data-accent-color='…']`（优先级 0,1,0）声明色阶。CSS 类很难稳定
- * 压过它，所以这里用**内联 style**（优先级最高，一定生效）。
- *
- * ## 色值来源：CSS 变量，不是硬编码
- *
- * 色阶的唯一权威定义在 `components/review/editor-theme.css`
- * （浅色档 + 深色档）。这里**读取**那些变量再回填成内联 style，
- * 而不是抄一份色值 —— 之前这里硬编码了 34 个色值，和 CSS 那份
- * 逐字相同，改配色时必然两边漂移。
- *
- * 读取时机：Portal 内容挂载后从 `document.body` 上取
- * （`editor-theme.css` 挂在 body 上，深色档由 `body.editor-body.dark`
- * 决定）。取不到时回落到当前文件里的兜底值，保证不会渲染成 indigo。
- */
 import type React from 'react';
 
-/** Radix accent 梯度：1~13 纯色，a1~a13 半透明，另有 4 个语义别名 */
+/** accent 梯度：1~13 纯色，a1~a13 半透明，另有 4 个语义别名 */
 const ACCENT_VARS = [
   '--accent-1',
   '--accent-2',
@@ -59,12 +33,6 @@ const ACCENT_VARS = [
   '--accent-track',
 ] as const;
 
-/**
- * 兜底色阶（品牌红）。
- *
- * 仅在读不到 CSS 变量时使用 —— 例如 `editor-theme.css` 未加载
- * （如单独跑 Storybook）。正常路径下读到的是 CSS 里那份。
- */
 const FALLBACK = {
   '--accent-1': '#fff5f6',
   '--accent-2': '#feeaec',
@@ -97,12 +65,6 @@ const FALLBACK = {
   '--accent-track': '#fbdde0',
 } as const satisfies Record<(typeof ACCENT_VARS)[number], string>;
 
-/**
- * 从 body 上读取当前主题下的品牌红色阶。
- *
- * 深色档由 `body.editor-body.dark` 提供，所以必须从 **body** 读而不是
- * 从弹窗元素读（弹窗不在 editor-body 内）。读到的值已经带上主题。
- */
 export function readBrandAccentStyle(): React.CSSProperties {
   if (typeof document === 'undefined') return FALLBACK as React.CSSProperties;
 
diff --git a/frontend/src/editor/modules/review/modals/ReportFormatEditor.tsx b/frontend/src/editor/modules/review/modals/ReportFormatEditor.tsx
index 3ac1dff..f871a0a 100644
--- a/frontend/src/editor/modules/review/modals/ReportFormatEditor.tsx
+++ b/frontend/src/editor/modules/review/modals/ReportFormatEditor.tsx
@@ -1,14 +1,8 @@
-import { Box, Button, Flex, Switch, Text, TextArea } from '@radix-ui/themes';
+import { RotateCcw, Bold, Italic, Heading1, Heading2, Heading3, AlignJustify } from 'lucide-react';
 import { useMemo, useRef, useState } from 'react';
-import {
-  ArrowReset20Regular,
-  TextBold20Regular,
-  TextHeader120Regular,
-  TextHeader220Regular,
-  TextHeader320Regular,
-  TextItalic20Regular,
-  TextLineSpacing20Regular,
-} from '@fluentui/react-icons';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
 import {
   DEFAULT_REVIEW_REPORT_FORMAT,
   resetReviewReportBlockFormat,
@@ -126,55 +120,24 @@ export const ReportFormatEditor = ({ value, onChange, report }: ReportFormatEdit
   const insertVariable = (name: string) => insertTemplateText(`{{${name}}}`);
 
   return (
-    <Flex
-      direction="column"
-      gap="3"
-      style={{ flex: '1 1 auto', minHeight: 0, width: '100%', maxWidth: '100%' }}
-    >
+    <div className="flex w-full max-w-full min-h-0 flex-1 flex-col gap-3">
       {/* 区块列表 + 恢复默认 */}
-      <Flex align="center" justify="between" gap="2" style={{ flexShrink: 0 }}>
-        <Text size="1" color="gray">
-          选择要编辑的区块，模板里用 {'{{变量}}'} 引用内容
-        </Text>
+      <div className="flex shrink-0 items-center justify-between gap-2">
+        <span className="text-xs text-ink-3">选择要编辑的区块，模板里用 {'{{变量}}'} 引用内容</span>
         <Button
-          size="1"
-          variant="soft"
-          color="gray"
+          type="button"
+          size="sm"
+          variant="secondary"
           onClick={() => onChange(DEFAULT_REVIEW_REPORT_FORMAT)}
         >
-          <ArrowReset20Regular />
+          <RotateCcw />
           恢复默认
         </Button>
-      </Flex>
+      </div>
 
-      <Box
-        style={{
-          display: 'flex',
-          gap: 12,
-          alignItems: 'stretch',
-          flex: '1 1 auto',
-          minHeight: 0,
-          width: '100%',
-          maxWidth: '100%',
-          overflow: 'hidden',
-        }}
-      >
+      <div className="flex w-full max-w-full min-h-0 flex-1 items-stretch gap-3 overflow-hidden">
         {/* 左：区块列表（独立滚动） */}
-        <Flex
-          direction="column"
-          gap="2"
-          style={{
-            flex: '0 0 clamp(140px, 22%, 200px)',
-            minWidth: 0,
-            maxWidth: 200,
-            alignSelf: 'stretch',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            minHeight: 0,
-            maxHeight: '100%',
-            paddingRight: 2,
-          }}
-        >
+        <div className="flex min-h-0 max-h-full max-w-[200px] min-w-0 shrink-0 grow-0 basis-[clamp(140px,22%,200px)] flex-col gap-2 self-stretch overflow-x-hidden overflow-y-auto pr-0.5">
           {reviewReportFormatBlockDefinitions.map((definition) => {
             const selected = selectedDefinition.kind === definition.kind;
             const changed = changedKinds.has(definition.kind);
@@ -183,43 +146,16 @@ export const ReportFormatEditor = ({ value, onChange, report }: ReportFormatEdit
                 key={definition.kind}
                 type="button"
                 onClick={() => setSelectedKind(definition.kind)}
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'flex-start',
-                  gap: 4,
-                  width: '100%',
-                  minWidth: 0,
-                  padding: '8px 10px',
-                  textAlign: 'left',
-                  cursor: 'pointer',
-                  borderRadius: 6,
-                  border: `1px solid ${selected ? 'var(--amll-primary)' : 'var(--amll-border)'}`,
-                  background: selected
-                    ? 'var(--amll-primary-soft)'
+                className={`flex w-full min-w-0 cursor-pointer flex-col items-start gap-1 rounded-md border px-2.5 py-2 text-left text-inherit transition-colors ${
+                  selected
+                    ? 'border-primary bg-primary-soft'
                     : changed
-                      ? 'var(--amll-muted)'
-                      : 'var(--amll-card)',
-                  color: 'inherit',
-                }}
+                      ? 'border-line bg-muted'
+                      : 'border-line bg-card hover:bg-surface-2'
+                }`}
               >
-                <span
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 6,
-                    maxWidth: '100%',
-                    fontSize: 13,
-                    fontWeight: 600,
-                  }}
-                >
-                  <span
-                    style={{
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap',
-                    }}
-                  >
+                <span className="flex max-w-full items-center gap-1.5 text-[13px] font-semibold">
+                  <span className="overflow-hidden text-ellipsis whitespace-nowrap">
                     {definition.label}
                   </span>
                   {/*
@@ -227,181 +163,125 @@ export const ReportFormatEditor = ({ value, onChange, report }: ReportFormatEdit
                    * 星号太弱，用户会以为是标点符号而不是状态。
                    */}
                   {changed && (
-                    <span
-                      style={{
-                        flexShrink: 0,
-                        fontSize: 10,
-                        lineHeight: 1.4,
-                        fontWeight: 500,
-                        padding: '0 5px',
-                        borderRadius: 999,
-                        background: 'var(--amll-primary)',
-                        color: 'var(--amll-primary-foreground)',
-                      }}
-                    >
+                    <span className="shrink-0 rounded-full bg-primary px-1.5 text-[10px] leading-[1.4] font-medium text-primary-foreground">
                       已改
                     </span>
                   )}
                 </span>
-                <span
-                  style={{
-                    maxWidth: '100%',
-                    fontSize: 11,
-                    lineHeight: 1.4,
-                    color: 'var(--amll-muted-foreground)',
-                    display: '-webkit-box',
-                    WebkitLineClamp: 2,
-                    WebkitBoxOrient: 'vertical',
-                    overflow: 'hidden',
-                  }}
-                >
+                <span className="line-clamp-2 max-w-full text-[11px] leading-[1.4] text-muted-foreground">
                   {definition.description}
                 </span>
               </button>
             );
           })}
-        </Flex>
+        </div>
 
         {/* 右：模板编辑区（独立滚动，宽度不撑破卡片） */}
-        <Flex
-          direction="column"
-          gap="3"
-          style={{
-            flex: '1 1 auto',
-            minWidth: 0,
-            maxWidth: '100%',
-            alignSelf: 'stretch',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            minHeight: 0,
-            maxHeight: '100%',
-            paddingRight: 2,
-          }}
-        >
-          <Flex align="center" justify="between" gap="2" style={{ flexShrink: 0 }}>
-            <Text size="2" weight="bold">
-              {selectedDefinition.label}
-            </Text>
+        <div className="flex min-h-0 max-h-full max-w-full min-w-0 flex-1 flex-col gap-3 self-stretch overflow-x-hidden overflow-y-auto pr-0.5">
+          <div className="flex shrink-0 items-center justify-between gap-2">
+            <span className="text-sm font-bold text-foreground">{selectedDefinition.label}</span>
             <Button
-              size="1"
-              variant="soft"
-              color="gray"
+              type="button"
+              size="sm"
+              variant="secondary"
               onClick={() => onChange(resetReviewReportBlockFormat(value, selectedDefinition.kind))}
             >
-              <ArrowReset20Regular />
+              <RotateCcw />
               重置此项
             </Button>
-          </Flex>
+          </div>
 
-          <TextArea
+          <Textarea
             ref={templateInputRef}
             value={selectedFormat.template}
             onChange={(e) => updateSelectedFormat({ template: e.currentTarget.value })}
             placeholder="报告条目模板"
-            style={{ minHeight: 88, fontFamily: 'monospace' }}
+            className="min-h-[88px] font-mono"
           />
 
           {/* 工具栏：加粗 / 倾斜 / 大纲 / 换行 */}
-          <Flex align="center" gap="1" wrap="wrap">
+          <div className="flex flex-wrap items-center gap-1">
             <Button
-              size="1"
-              variant="soft"
+              type="button"
+              size="sm"
+              variant="secondary"
               title="加粗"
               aria-label="加粗"
               onClick={() => wrapTemplateSelection('**', '**')}
             >
-              <TextBold20Regular />
+              <Bold />
             </Button>
             <Button
-              size="1"
-              variant="soft"
+              type="button"
+              size="sm"
+              variant="secondary"
               title="倾斜"
               aria-label="倾斜"
               onClick={() => wrapTemplateSelection('_', '_')}
             >
-              <TextItalic20Regular />
+              <Italic />
             </Button>
             <Button
-              size="1"
-              variant="soft"
+              type="button"
+              size="sm"
+              variant="secondary"
               title="一级大纲"
               aria-label="一级大纲"
               onClick={() => applyHeadingLevel(1)}
             >
-              <TextHeader120Regular />
+              <Heading1 />
             </Button>
             <Button
-              size="1"
-              variant="soft"
+              type="button"
+              size="sm"
+              variant="secondary"
               title="二级大纲"
               aria-label="二级大纲"
               onClick={() => applyHeadingLevel(2)}
             >
-              <TextHeader220Regular />
+              <Heading2 />
             </Button>
             <Button
-              size="1"
-              variant="soft"
+              type="button"
+              size="sm"
+              variant="secondary"
               title="三级大纲"
               aria-label="三级大纲"
               onClick={() => applyHeadingLevel(3)}
             >
-              <TextHeader320Regular />
+              <Heading3 />
             </Button>
             <Button
-              size="1"
-              variant="soft"
+              type="button"
+              size="sm"
+              variant="secondary"
               title="插入换行符"
               aria-label="插入换行符"
               onClick={() => insertTemplateText('\n')}
             >
-              <TextLineSpacing20Regular />
+              <AlignJustify />
             </Button>
-          </Flex>
+          </div>
 
-          <Flex align="center" gap="2">
+          <div className="flex items-center gap-2">
             <Switch
               checked={selectedFormat.listItem}
               onCheckedChange={(checked) => updateSelectedFormat({ listItem: checked })}
             />
-            <Text size="2">作为 Markdown 列表项输出</Text>
-          </Flex>
+            <span className="text-sm text-foreground">作为 Markdown 列表项输出</span>
+          </div>
 
           {/* 可用变量：点击插入到光标处 */}
-          <Flex direction="column" gap="2">
-            <Text size="2" weight="medium">
-              可用变量
-            </Text>
-            <Box
-              style={{
-                display: 'grid',
-                gridTemplateColumns: 'repeat(auto-fill, minmax(min(170px, 100%), 1fr))',
-                width: '100%',
-                maxWidth: '100%',
-                overflow: 'hidden',
-                gap: 6,
-              }}
-            >
+          <div className="flex flex-col gap-2">
+            <span className="text-sm font-medium text-foreground">可用变量</span>
+            <div className="grid w-full max-w-full grid-cols-[repeat(auto-fill,minmax(min(170px,100%),1fr))] gap-1.5 overflow-hidden">
               {selectedDefinition.variables.map((variable) => (
                 <button
                   key={variable.name}
                   type="button"
                   onClick={() => insertVariable(variable.name)}
                   title={`插入 {{${variable.name}}}`}
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 2,
-                    minWidth: 0,
-                    maxWidth: '100%',
-                    overflow: 'hidden',
-                    textAlign: 'left',
-                    padding: '4px 8px',
-                    borderRadius: 4,
-                    border: '1px solid var(--amll-border)',
-                    background: 'var(--amll-card)',
-                    cursor: 'pointer',
-                  }}
+                  className="flex max-w-full min-w-0 cursor-pointer flex-col gap-0.5 overflow-hidden rounded border border-line bg-card px-2 py-1 text-left transition-colors hover:bg-surface-2"
                 >
                   {/*
                    * 变量名/ 标题（label） / 说明（description）分三层显示。
@@ -411,76 +291,40 @@ export const ReportFormatEditor = ({ value, onChange, report }: ReportFormatEdit
                    * 哪个是变量含义、哪个是示例 —— 用户反馈
                    *「变量没有分清标题和介绍」。
                    */}
-                  <code
-                    style={{
-                      fontSize: 12,
-                      fontWeight: 700,
-                      color: 'var(--accent-11)',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap',
-                    }}
-                  >
+                  <code className="overflow-hidden text-xs font-bold text-ellipsis whitespace-nowrap text-primary">
                     {'{{'}
                     {variable.name}
                     {'}}'}
                   </code>
-                  <span
-                    style={{
-                      fontSize: 12,
-                      fontWeight: 600,
-                      color: 'var(--amll-foreground)',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap',
-                    }}
-                  >
+                  <span className="overflow-hidden text-xs font-semibold text-ellipsis whitespace-nowrap text-foreground">
                     {variable.label}
                   </span>
-                  <span
-                    style={{
-                      fontSize: 11,
-                      lineHeight: 1.4,
-                      color: 'var(--amll-muted-foreground)',
-                      display: '-webkit-box',
-                      WebkitLineClamp: 2,
-                      WebkitBoxOrient: 'vertical',
-                      overflow: 'hidden',
-                    }}
-                  >
+                  <span className="line-clamp-2 text-[11px] leading-[1.4] text-muted-foreground">
                     {variable.description}
                   </span>
                 </button>
               ))}
-            </Box>
-          </Flex>
+            </div>
+          </div>
 
           {/* 空报告文本 */}
-          <Flex direction="column" gap="2">
-            <Text size="2" weight="medium">
-              空报告文本
-            </Text>
-            <TextArea
+          <div className="flex flex-col gap-2">
+            <span className="text-sm font-medium text-foreground">空报告文本</span>
+            <Textarea
               value={value.emptyText}
               onChange={(e) => onChange({ ...value, emptyText: e.currentTarget.value })}
-              style={{ minHeight: 48 }}
+              className="min-h-12"
             />
-          </Flex>
+          </div>
 
           {/* 实时预览 */}
-          <Flex direction="column" gap="2">
-            <Text size="2" weight="medium">
-              当前报告预览
-            </Text>
-            <TextArea
-              readOnly
-              value={renderedPreview}
-              style={{ minHeight: 120, fontFamily: 'monospace' }}
-            />
-          </Flex>
-        </Flex>
-      </Box>
-    </Flex>
+          <div className="flex flex-col gap-2">
+            <span className="text-sm font-medium text-foreground">当前报告预览</span>
+            <Textarea readOnly value={renderedPreview} className="min-h-[120px] font-mono" />
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 
diff --git a/frontend/src/editor/modules/review/modals/ReviewReportDialog.tsx b/frontend/src/editor/modules/review/modals/ReviewReportDialog.tsx
index 90b99b7..7b5e132 100644
--- a/frontend/src/editor/modules/review/modals/ReviewReportDialog.tsx
+++ b/frontend/src/editor/modules/review/modals/ReviewReportDialog.tsx
@@ -1,15 +1,4 @@
-import {
-  Box,
-  Button,
-  Checkbox,
-  Dialog,
-  Flex,
-  ScrollArea,
-  Switch,
-  Tabs,
-  Text,
-  TextArea,
-} from '@radix-ui/themes';
+import { Check, Music, Pencil, Trash2 } from 'lucide-react';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import {
   Component,
@@ -20,12 +9,13 @@ import {
   type CSSProperties,
   type ReactNode,
 } from 'react';
-import {
-  Delete16Regular,
-  Checkmark16Regular,
-  Edit16Regular,
-  MusicNote216Regular,
-} from '@fluentui/react-icons';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Switch } from '@/components/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
 import {
   reviewReportFormatAtom,
   type ReviewReportFormat,
@@ -65,17 +55,13 @@ class DialogContentBoundary extends Component<{ children: ReactNode }, { error:
   override render() {
     if (this.state.error) {
       return (
-        <Box style={{ padding: 12 }}>
-          <Text size="2" weight="bold" color="red" as="p">
-            审阅结果面板加载失败
-          </Text>
-          <Text size="1" color="gray" as="p" mt="2">
-            {this.state.error.message}
-          </Text>
-          <Text size="1" color="gray" as="p" mt="2">
+        <div className="p-3">
+          <p className="text-sm font-bold text-error">审阅结果面板加载失败</p>
+          <p className="mt-2 text-xs text-ink-3">{this.state.error.message}</p>
+          <p className="mt-2 text-xs text-ink-3">
             详细堆栈见浏览器控制台。可以先关闭本窗口继续编辑，改用「编辑」 面板里的保存按钮提交。
-          </Text>
-        </Box>
+          </p>
+        </div>
       );
     }
     return this.props.children;
@@ -83,11 +69,7 @@ class DialogContentBoundary extends Component<{ children: ReactNode }, { error:
 }
 
 function DialogFlexBody({ children }: { children: ReactNode }) {
-  return (
-    <Flex direction="column" style={{ flex: '1 1 auto', minHeight: 0 }}>
-      {children}
-    </Flex>
-  );
+  return <div className="flex min-h-0 flex-1 flex-col">{children}</div>;
 }
 
 export interface ReviewReportDialogProps {
@@ -130,13 +112,15 @@ function blockSummary(block: ReviewReportBlock): string {
       return `第 ${block.lineNumber} 行 · 「${block.word}」打轴调整`;
     case 'lineTiming':
       return `第 ${block.lineNumber} 行时轴调整`;
+    case 'metadata':
+      return `元数据（${block.label}）${block.action === 'add' ? '增加' : '删除'} ${block.items.join('、')}`;
     default:
       return '未知条目';
   }
 }
 
 function getReportBlockScopeLabel(block: ReviewReportBlock): string | null {
-  if (block.kind === 'manual') return null;
+  if (block.kind === 'manual' || block.kind === 'metadata') return null;
   if (block.kind === 'timeShift') {
     return block.targetCount === block.totalLineCount
       ? '全部歌词行'
@@ -153,7 +137,7 @@ function getReportBlockScopeLabel(block: ReviewReportBlock): string | null {
 }
 
 function getReportBlockScopeKey(block: ReviewReportBlock): string | null {
-  if (block.kind === 'manual') return null;
+  if (block.kind === 'manual' || block.kind === 'metadata') return null;
   if (block.kind === 'timeShift' || block.kind === 'wordTextShared') {
     return `${block.kind}:${block.id}`;
   }
@@ -218,40 +202,29 @@ function ManualReportBlockView({
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
   return (
-    <Box
-      style={{
-        border: '1px solid var(--amll-border)',
-        background: 'var(--amll-muted)',
-        borderRadius: 6,
-        padding: 8,
-        opacity: block.enabled ? 1 : 0.5,
-      }}
+    <div
+      className={`rounded-md border border-line bg-muted p-2 ${
+        block.enabled ? 'opacity-100' : 'opacity-50'
+      }`}
     >
-      <Flex align="center" justify="between" gap="2" mb="2">
-        <Flex align="center" gap="2">
-          <Checkbox
-            checked={block.enabled}
-            onCheckedChange={(v) => onToggle(block.id, v === true)}
-          />
-          <Text size="2" weight="medium">
-            手写内容
-          </Text>
-        </Flex>
-        <Flex align="center" gap="2">
-          <Flex align="center" gap="1" title="在 Markdown 预览中另起一行">
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <Checkbox checked={block.enabled} onCheckedChange={(v) => onToggle(block.id, v)} />
+          <span className="text-sm font-medium text-foreground">手写内容</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1" title="在 Markdown 预览中另起一行">
             <Switch
-              size="1"
               checked={block.lineBreakBefore === true}
               onCheckedChange={(v) => onLineBreakChange(block.id, v)}
               aria-label="换行"
             />
-            <Text size="1" color="gray">
-              换行
-            </Text>
-          </Flex>
+            <span className="text-xs text-ink-3">换行</span>
+          </div>
           <Button
-            size="1"
-            variant="soft"
+            type="button"
+            size="sm"
+            variant="secondary"
             disabled={!canMove(block.id, -1)}
             onClick={() => onMove(block.id, -1)}
             title="将手写条目上移"
@@ -259,8 +232,9 @@ function ManualReportBlockView({
             上移
           </Button>
           <Button
-            size="1"
-            variant="soft"
+            type="button"
+            size="sm"
+            variant="secondary"
             disabled={!canMove(block.id, 1)}
             onClick={() => onMove(block.id, 1)}
             title="将手写条目下移"
@@ -268,25 +242,26 @@ function ManualReportBlockView({
             下移
           </Button>
           <Button
-            size="1"
+            type="button"
+            size="sm"
             variant="ghost"
-            color="red"
+            className="text-error hover:text-error"
             onClick={() => onDelete(block.id)}
             title="删除条目"
           >
-            <Delete16Regular />
+            <Trash2 />
           </Button>
-        </Flex>
-      </Flex>
+        </div>
+      </div>
       {focused ? (
-        <TextArea
+        <Textarea
           ref={textAreaRef}
           value={block.content}
           onChange={(e) => onChange(block.id, e.currentTarget.value)}
           onFocus={() => setFocused(true)}
           onBlur={() => setFocused(false)}
           placeholder="手写报告内容"
-          style={{ minHeight: 96 }}
+          className="min-h-24"
         />
       ) : (
         <button
@@ -295,25 +270,14 @@ function ManualReportBlockView({
             setFocused(true);
             window.requestAnimationFrame(() => textAreaRef.current?.focus());
           }}
-          style={{
-            display: 'block',
-            width: '100%',
-            textAlign: 'left',
-            padding: 8,
-            minHeight: 40,
-            borderRadius: 4,
-            border: '1px dashed var(--amll-border)',
-            background: 'transparent',
-            color: block.content.trim() ? 'inherit' : 'var(--amll-muted-foreground)',
-            cursor: 'text',
-            fontSize: 13,
-            lineHeight: 1.6,
-          }}
+          className={`block min-h-10 w-full cursor-text rounded border border-dashed border-line bg-transparent p-2 text-left text-[13px] leading-relaxed ${
+            block.content.trim() ? 'text-inherit' : 'text-muted-foreground'
+          }`}
         >
           {block.content.trim() || '点击展开并编辑手写内容'}
         </button>
       )}
-    </Box>
+    </div>
   );
 }
 
@@ -333,20 +297,12 @@ function StructuredReportBlockView({
   const title = getReviewReportBlockText(block, reportFormat);
 
   return (
-    <Flex
-      align="center"
-      justify="between"
-      gap="1"
-      style={{
-        border: '1px solid var(--amll-border)',
-        background: 'var(--amll-muted)',
-        borderRadius: 4,
-        padding: '4px 6px',
-        opacity: block.enabled ? 1 : 0.5,
-        minWidth: 0,
-      }}
+    <div
+      className={`flex min-w-0 items-center justify-between gap-1 rounded border border-line bg-muted px-1.5 py-1 ${
+        block.enabled ? 'opacity-100' : 'opacity-50'
+      }`}
     >
-      <Flex align="center" gap="1" style={{ flex: 1, minWidth: 0, flexWrap: 'wrap' }}>
+      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1">
         {block.kind === 'wordTextGroup' ? (
           block.changes.map((change, index) => {
             const enabled = isWordTextGroupChangeEnabled(block, index);
@@ -357,16 +313,11 @@ function StructuredReportBlockView({
                 aria-pressed={enabled}
                 title={enabled ? '点击禁用该结果' : '点击启用该结果'}
                 onClick={() => onToggleGroupChange(block.id, index, !enabled)}
-                style={{
-                  border: '1px solid var(--amll-border)',
-                  borderRadius: 3,
-                  padding: '1px 5px',
-                  fontSize: 12,
-                  cursor: 'pointer',
-                  background: enabled ? 'var(--amll-primary-soft)' : 'transparent',
-                  color: enabled ? 'var(--amll-primary)' : 'var(--amll-muted-foreground)',
-                  textDecoration: enabled ? 'none' : 'line-through',
-                }}
+                className={`cursor-pointer rounded-[3px] border border-line px-1.5 py-px text-xs ${
+                  enabled
+                    ? 'bg-primary-soft text-primary no-underline'
+                    : 'bg-transparent text-muted-foreground line-through'
+                }`}
               >
                 {change.oldWord} → {change.newWord}
               </button>
@@ -378,44 +329,50 @@ function StructuredReportBlockView({
             aria-pressed={block.enabled}
             title={block.enabled ? '点击禁用该结果' : '点击启用该结果'}
             onClick={() => onToggle(block.id, !block.enabled)}
-            style={{
-              border: '1px solid var(--amll-border)',
-              borderRadius: 3,
-              padding: '1px 5px',
-              fontSize: 12,
-              cursor: 'pointer',
-              background: block.enabled ? 'var(--amll-primary-soft)' : 'transparent',
-              color: block.enabled ? 'var(--amll-primary)' : 'var(--amll-muted-foreground)',
-              textDecoration: block.enabled ? 'none' : 'line-through',
-              maxWidth: '100%',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            }}
+            className={`max-w-full cursor-pointer overflow-hidden rounded-[3px] border border-line px-1.5 py-px text-xs text-ellipsis whitespace-nowrap ${
+              block.enabled
+                ? 'bg-primary-soft text-primary no-underline'
+                : 'bg-transparent text-muted-foreground line-through'
+            }`}
           >
             {blockSummary(block)}
           </button>
         )}
-      </Flex>
+      </div>
       <Button
-        size="1"
+        type="button"
+        size="sm"
         variant="ghost"
-        color="red"
+        className="shrink-0 text-error hover:text-error"
         onClick={() => onDelete(block.id)}
         title="删除条目"
-        style={{ flexShrink: 0 }}
       >
-        <Delete16Regular />
+        <Trash2 />
       </Button>
-      {title ? <span style={{ display: 'none' }}>{title}</span> : null}
-    </Flex>
+      {title ? <span className="hidden">{title}</span> : null}
+    </div>
   );
 }
 
 const ACTION_BUTTONS = [
-  { action: 'approve', label: '接受', color: 'green', Icon: Checkmark16Regular },
-  { action: 'revision', label: '需要修改', color: 'red', Icon: Edit16Regular },
-  { action: 'missing_audio', label: '缺少音源', color: 'orange', Icon: MusicNote216Regular },
+  {
+    action: 'approve',
+    label: '接受',
+    className: 'bg-success text-white hover:bg-success/90',
+    Icon: Check,
+  },
+  {
+    action: 'revision',
+    label: '需要修改',
+    className: 'bg-error text-white hover:bg-error/90',
+    Icon: Pencil,
+  },
+  {
+    action: 'missing_audio',
+    label: '缺少音源',
+    className: 'bg-warning text-white hover:bg-warning/90',
+    Icon: Music,
+  },
 ] as const;
 
 const BRAND_ACCENT = {
@@ -551,85 +508,58 @@ export const ReviewReportDialog = ({ onSubmit, submitting }: ReviewReportDialogP
   if (!dialog.open) return null;
 
   return (
-    <Dialog.Root
+    <Dialog
       open
       onOpenChange={(open) => {
         if (!open) close();
       }}
     >
-      <Dialog.Content
-        style={{
-          maxWidth: '1100px',
-          width: '92vw',
-          zIndex: 400,
-          position: 'relative',
-          height: '88vh',
-          maxHeight: '88vh',
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'hidden',
-          backgroundColor: 'var(--amll-card)',
-          color: 'var(--amll-foreground)',
-          border: '1px solid var(--amll-border)',
-          boxShadow: 'var(--shadow-6)',
-          ...BRAND_ACCENT,
-        }}
+      <DialogContent
+        className="w-[92vw] max-w-[1100px] h-[88vh] max-h-[88vh] flex flex-col overflow-hidden bg-card text-foreground border border-line p-0 gap-0"
+        style={{ zIndex: 400, ...BRAND_ACCENT }}
         onOpenAutoFocus={(e) => e.preventDefault()}
       >
         <DialogContentBoundary>
           <DialogFlexBody>
-            <Dialog.Title style={{ fontWeight: 600, flexShrink: 0 }}>
+            <DialogTitle className="shrink-0 p-4 pb-2 font-semibold">
               对稿件【{dialog.title}】做出的审阅结果如下：
-            </Dialog.Title>
-            <Box style={{ flexShrink: 0 }}>
+            </DialogTitle>
+            <div className="shrink-0 px-4">
               <ReviewTemplateSection open={dialog.open} onInsertTemplate={insertTemplate} />
-            </Box>
+            </div>
 
-            <Tabs.Root
+            <Tabs
               value={activeTab}
               onValueChange={setActiveTab}
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                flex: '1 1 auto',
-                minHeight: 0,
-              }}
+              className="flex min-h-0 flex-1 flex-col px-4"
             >
-              <Tabs.List style={{ flexShrink: 0 }}>
-                <Tabs.Trigger value="blocks">条目</Tabs.Trigger>
-                <Tabs.Trigger value="format">格式</Tabs.Trigger>
-                <Tabs.Trigger value="text">文本</Tabs.Trigger>
-                <Tabs.Trigger value="preview">预览</Tabs.Trigger>
-              </Tabs.List>
+              <TabsList className="shrink-0 px-0">
+                <TabsTrigger value="blocks">条目</TabsTrigger>
+                <TabsTrigger value="format">格式</TabsTrigger>
+                <TabsTrigger value="text">文本</TabsTrigger>
+                <TabsTrigger value="preview">预览</TabsTrigger>
+              </TabsList>
 
               {/* 条目 */}
-              <Tabs.Content
-                value="blocks"
-                style={{ flex: '1 1 auto', minHeight: 0, display: 'flex', flexDirection: 'column' }}
-              >
-                <Text size="1" color="gray" as="p" mb="2" style={{ flexShrink: 0 }}>
+              <TabsContent value="blocks" className="flex min-h-0 flex-1 flex-col">
+                <p className="mb-2 shrink-0 text-xs text-ink-3">
                   结构化条目按系统顺序排列；手写条目可通过上移/下移插入序列。
-                </Text>
-                <ScrollArea
-                  type="auto"
-                  style={{ flex: '1 1 auto', minHeight: 0, overflow: 'auto' }}
-                >
+                </p>
+                <ScrollArea className="min-h-0 flex-1 overflow-auto">
                   {blockGroups.length === 0 ? (
-                    <Flex align="center" justify="center" style={{ height: 200 }}>
-                      <Text color="gray" size="2">
-                        暂无报告条目
-                      </Text>
-                    </Flex>
+                    <div className="flex h-[200px] items-center justify-center">
+                      <span className="text-sm text-ink-3">暂无报告条目</span>
+                    </div>
                   ) : (
-                    <Flex direction="column" gap="3">
+                    <div className="flex flex-col gap-3">
                       {blockGroups.map((group) => (
-                        <Box key={group.key} style={{ minWidth: 0 }}>
+                        <div key={group.key} className="min-w-0">
                           {group.scopeLabel && (
-                            <Text size="1" color="gray" as="p" mb="1" style={{ fontWeight: 600 }}>
+                            <p className="mb-1 text-xs font-semibold text-ink-3">
                               {group.scopeLabel}
-                            </Text>
+                            </p>
                           )}
-                          <Flex direction="column" gap="1" style={{ minWidth: 0 }}>
+                          <div className="flex min-w-0 flex-col gap-1">
                             {group.blocks.map((block) =>
                               block.kind === 'manual' ? (
                                 <ManualReportBlockView
@@ -659,103 +589,76 @@ export const ReviewReportDialog = ({ onSubmit, submitting }: ReviewReportDialogP
                                 />
                               )
                             )}
-                          </Flex>
-                        </Box>
+                          </div>
+                        </div>
                       ))}
-                    </Flex>
+                    </div>
                   )}
                 </ScrollArea>
-                <Flex
-                  justify="end"
-                  mt="2"
-                  style={{
-                    flexShrink: 0,
-                    position: 'sticky',
-                    bottom: 0,
-                    background: 'var(--amll-card)',
-                  }}
-                >
-                  <Button size="1" variant="soft" onClick={addManual}>
+                <div className="sticky bottom-0 mt-2 flex shrink-0 justify-end bg-card">
+                  <Button type="button" size="sm" variant="secondary" onClick={addManual}>
                     新增手写条目
                   </Button>
-                </Flex>
-              </Tabs.Content>
+                </div>
+              </TabsContent>
 
               {/* 格式 */}
-              <Tabs.Content
-                value="format"
-                style={{
-                  flex: '1 1 auto',
-                  minHeight: 0,
-                  display: 'flex',
-                  flexDirection: 'column',
-                  padding: 8,
-                }}
-              >
+              <TabsContent value="format" className="flex min-h-0 flex-1 flex-col p-2">
                 <ReportFormatEditor
                   value={reportFormat}
                   onChange={setReportFormat}
                   report={draft}
                 />
-              </Tabs.Content>
+              </TabsContent>
 
               {/* 文本 */}
-              <Tabs.Content value="text" style={{ flex: '1 1 auto', minHeight: 0 }}>
-                <ScrollArea
-                  type="auto"
-                  style={{ flex: '1 1 auto', minHeight: 0, overflow: 'auto' }}
-                >
-                  <Box style={{ padding: 8 }}>
-                    <TextArea
+              <TabsContent value="text" className="min-h-0 flex-1">
+                <ScrollArea className="min-h-0 flex-1 overflow-auto">
+                  <div className="p-2">
+                    <Textarea
                       value={renderedReport}
                       readOnly
                       aria-label="自动生成的审阅报告文本"
-                      style={{ minHeight: 400, fontFamily: 'monospace' }}
+                      className="min-h-[400px] font-mono"
                     />
-                  </Box>
+                  </div>
                 </ScrollArea>
-              </Tabs.Content>
+              </TabsContent>
 
               {/* 预览 */}
-              <Tabs.Content value="preview" style={{ flex: '1 1 auto', minHeight: 0 }}>
-                <ScrollArea
-                  type="auto"
-                  style={{ flex: '1 1 auto', minHeight: 0, overflow: 'auto' }}
-                >
-                  <Box style={{ padding: 8 }}>
+              <TabsContent value="preview" className="min-h-0 flex-1">
+                <ScrollArea className="min-h-0 flex-1 overflow-auto">
+                  <div className="p-2">
                     {renderedReport ? (
                       <div
                         className="comment-markdown"
                         dangerouslySetInnerHTML={{ __html: renderedReportHtml }}
                       />
                     ) : (
-                      <Text size="2" color="gray">
-                        （报告为空）
-                      </Text>
+                      <span className="text-sm text-ink-3">（报告为空）</span>
                     )}
-                  </Box>
+                  </div>
                 </ScrollArea>
-              </Tabs.Content>
-            </Tabs.Root>
+              </TabsContent>
+            </Tabs>
 
             {/* 底部操作栏 */}
-            <Flex align="center" gap="2" mt="3" wrap="wrap" style={{ flexShrink: 0 }}>
-              <Button size="1" variant="soft" color="red" onClick={close}>
+            <div className="flex shrink-0 flex-wrap items-center gap-2 p-4 pt-2">
+              <Button type="button" size="sm" variant="destructive" onClick={close}>
                 放弃
               </Button>
-              <Box flexGrow="1" />
-              <Flex align="center" gap="1" mr="2">
-                <Checkbox checked={uploadTtml} onCheckedChange={(v) => setUploadTtml(Boolean(v))} />
-                <Text size="1" color="gray">
-                  上传修订版
-                </Text>
-              </Flex>
-              {ACTION_BUTTONS.map(({ action: key, label, color, Icon }) => (
+              <div className="flex-1" />
+              <div className="mr-2 flex items-center gap-1">
+                <Checkbox checked={uploadTtml} onCheckedChange={(v) => setUploadTtml(v)} />
+                <span className="text-xs text-ink-3">上传修订版</span>
+              </div>
+              {ACTION_BUTTONS.map(({ action: key, label, className, Icon }) => (
                 <Button
                   key={key}
-                  size="1"
-                  color={color}
-                  variant={action === key ? 'solid' : 'soft'}
+                  type="button"
+                  size="sm"
+                  className={action === key ? className : undefined}
+                  variant={action === key ? 'default' : 'secondary'}
                   disabled={submitting}
                   onClick={() => {
                     setAction(key);
@@ -770,11 +673,11 @@ export const ReviewReportDialog = ({ onSubmit, submitting }: ReviewReportDialogP
                   {label}
                 </Button>
               ))}
-            </Flex>
+            </div>
           </DialogFlexBody>
         </DialogContentBoundary>
-      </Dialog.Content>
-    </Dialog.Root>
+      </DialogContent>
+    </Dialog>
   );
 };
 
diff --git a/frontend/src/editor/modules/review/services/report-service/format-service.ts b/frontend/src/editor/modules/review/services/report-service/format-service.ts
index 6d8aeb3..618b30d 100644
--- a/frontend/src/editor/modules/review/services/report-service/format-service.ts
+++ b/frontend/src/editor/modules/review/services/report-service/format-service.ts
@@ -221,6 +221,15 @@ export const createReviewReportBlockVariables = (
   switch (block.kind) {
     case 'manual':
       return { content: block.content };
+    case 'metadata':
+      return {
+        label: block.label,
+        key: block.key,
+        action: block.action,
+        actionLabel: block.action === 'add' ? '增加' : '删除',
+        items: block.items.join('、'),
+        itemsCode: block.items.map(wrap).join('、'),
+      };
     case 'wordTextShared':
       return {
         lineLabels: formatLineLabelList(block.lineRefs),
@@ -381,6 +390,7 @@ const getLineMergeCategory = (block: ReviewReportBlock) => {
     case 'lineTiming':
       return 'lineTiming';
     case 'manual':
+    case 'metadata':
     case 'wordTextShared':
     case 'timeShift':
       return null;
diff --git a/frontend/src/editor/modules/review/services/report-service/format-template.ts b/frontend/src/editor/modules/review/services/report-service/format-template.ts
index e6d3336..7fad55e 100644
--- a/frontend/src/editor/modules/review/services/report-service/format-template.ts
+++ b/frontend/src/editor/modules/review/services/report-service/format-template.ts
@@ -313,6 +313,39 @@ export const reviewReportFormatBlockDefinitions: ReviewReportFormatBlockDefiniti
     description: '用户手动新增的报告条目',
     variables: [{ name: 'content', label: '手写内容', description: '手写条目原文' }],
   },
+  {
+    kind: 'metadata',
+    label: '元数据改动',
+    description: '歌曲元数据（曲名 / 歌手 / 专辑 / 平台 ID 等）新增或删除值时使用',
+    variables: [
+      {
+        name: 'label',
+        label: '类型',
+        description: '元数据类型的中文标签，例如：歌曲名称、歌曲的艺术家',
+      },
+      { name: 'key', label: '键名', description: '元数据的原始键名，例如：musicName' },
+      {
+        name: 'action',
+        label: '动作',
+        description: 'add 或 remove',
+      },
+      {
+        name: 'actionLabel',
+        label: '动作描述',
+        description: '中文动作词，例如：增加、删除',
+      },
+      {
+        name: 'items',
+        label: '内容列表',
+        description: '本次动作涉及的值，以顿号连接',
+      },
+      {
+        name: 'itemsCode',
+        label: '内容代码列表',
+        description: '每个值带 Markdown 行内代码标记，以顿号连接',
+      },
+    ],
+  },
 ];
 
 export const DEFAULT_REVIEW_REPORT_FORMAT: ReviewReportFormat = {
@@ -323,6 +356,10 @@ export const DEFAULT_REVIEW_REPORT_FORMAT: ReviewReportFormat = {
       template: '{{content}}',
       listItem: false,
     },
+    metadata: {
+      template: '元数据（{{label}}）需要{{actionLabel}}内容为 {{itemsCode}} 的数据',
+      listItem: true,
+    },
     wordTextShared: {
       template: '{{lineLabels}}：`{{oldWord}}` 存在错误，应为 `{{newWord}}`',
       listItem: true,
diff --git a/frontend/src/editor/modules/review/services/report-service/metadata-report-builder.ts b/frontend/src/editor/modules/review/services/report-service/metadata-report-builder.ts
index c045a82..5e76094 100644
--- a/frontend/src/editor/modules/review/services/report-service/metadata-report-builder.ts
+++ b/frontend/src/editor/modules/review/services/report-service/metadata-report-builder.ts
@@ -2,11 +2,22 @@ import type { TTMLLyric, TTMLMetadata } from '$/types/ttml';
 import { createReviewReport, createReviewReportBlockId } from './normalize-service';
 import type { ReviewReportBlock } from './types';
 
-/** 元数据 key → 中文标签。只覆盖投稿里常见的，其余回退到 key 本身。 */
 const METADATA_LABELS: Record<string, string> = {
+  // —— 编辑器面板内置 key ——
+  musicName: '歌曲名称',
+  artists: '歌曲的艺术家',
+  songwriter: '词曲作者',
+  album: '歌曲的专辑名',
+  ncmMusicId: '网易云音乐 ID',
+  qqMusicId: 'QQ 音乐 ID',
+  spotifyId: 'Spotify 音乐 ID',
+  appleMusicId: 'Apple Music 音乐 ID',
+  isrc: '歌曲的 ISRC 号码',
+  ttmlAuthorGithub: '歌词作者 GitHub ID',
+  ttmlAuthorGithubLogin: '歌词作者 GitHub 用户名',
+  // —— 其它常见元数据 key ——
   title: '标题',
   artist: '歌手',
-  album: '专辑',
   albumArtist: '专辑歌手',
   byArtist: '演唱者',
   composer: '作曲',
@@ -54,12 +65,16 @@ function sameValues(a: string[], b: string[]): boolean {
 }
 
 /** 逐 key 做集合差：返回「旧里有新没有」与「新里有旧没有」 */
-function diffValues(oldValues: string[], newValues: string[]): string[] {
+function diffValues(
+  oldValues: string[],
+  newValues: string[]
+): { removed: string[]; added: string[] } {
   const oldSet = new Set(oldValues);
   const newSet = new Set(newValues);
-  const removed = oldValues.filter((v) => !newSet.has(v));
-  const added = newValues.filter((v) => !oldSet.has(v));
-  return [...removed.map((v) => `- ${v}`), ...added.map((v) => `+ ${v}`)];
+  return {
+    removed: oldValues.filter((v) => !newSet.has(v)),
+    added: newValues.filter((v) => !oldSet.has(v)),
+  };
 }
 
 /** 把 TTMLLyric 的 metadata 压成 Map（同一个 key 出现多次时合并 value） */
@@ -87,26 +102,33 @@ export const buildMetadataChanges = (freeze: TTMLLyric, staged: TTMLLyric): Revi
 
     if (sameValues(oldValues, newValues)) continue;
 
+    const { removed, added } = diffValues(oldValues, newValues);
     const label = getLabel(key);
-    let content: string;
 
-    if (oldValues.length === 0) {
-      content = `**${label}**：新增 ${newValues.map((v) => `\`${v}\``).join('、')}`;
-    } else if (newValues.length === 0) {
-      content = `**${label}**：删除 ${oldValues.map((v) => `\`${v}\``).join('、')}`;
-    } else {
-      const detail = diffValues(oldValues, newValues).join('，');
-      content = `**${label}**：${detail}`;
+    // 一个 key 同时有增有删时拆成两条 —— 语义单一，模板统一为
+    // 「元数据（类型）需要增加/删除内容为 xxx 的数据」。
+    if (added.length > 0) {
+      blocks.push({
+        id: createReviewReportBlockId('metadata'),
+        kind: 'metadata',
+        enabled: true,
+        action: 'add',
+        key,
+        label,
+        items: added,
+      });
+    }
+    if (removed.length > 0) {
+      blocks.push({
+        id: createReviewReportBlockId('metadata'),
+        kind: 'metadata',
+        enabled: true,
+        action: 'remove',
+        key,
+        label,
+        items: removed,
+      });
     }
-
-    blocks.push({
-      id: createReviewReportBlockId('metadata'),
-      kind: 'manual',
-      enabled: true,
-      // 独立成段，不和歌词 diff 混在一起
-      lineBreakBefore: true,
-      content,
-    });
   }
 
   return blocks;
diff --git a/frontend/src/editor/modules/review/services/report-service/render-service.ts b/frontend/src/editor/modules/review/services/report-service/render-service.ts
index df9b2c8..bf8ac1f 100644
--- a/frontend/src/editor/modules/review/services/report-service/render-service.ts
+++ b/frontend/src/editor/modules/review/services/report-service/render-service.ts
@@ -15,6 +15,8 @@ export const getReviewReportBlockLabel = (block: ReviewReportBlock) => {
   switch (block.kind) {
     case 'manual':
       return '手写内容';
+    case 'metadata':
+      return '元数据';
     case 'wordTextShared':
     case 'wordTextGroup':
     case 'wordText':
diff --git a/frontend/src/editor/modules/review/services/report-service/selection-service.ts b/frontend/src/editor/modules/review/services/report-service/selection-service.ts
index 2f506ce..35ca6de 100644
--- a/frontend/src/editor/modules/review/services/report-service/selection-service.ts
+++ b/frontend/src/editor/modules/review/services/report-service/selection-service.ts
@@ -59,6 +59,9 @@ export const getReviewReportSelectionKey = (block: ReviewReportBlock) => {
       return block.operationId
         ? `${block.kind}:${block.operationId}:${block.lineId}`
         : `${block.kind}:${block.lineId}`;
+    case 'metadata':
+      // 元数据按「键 + 动作 + 内容」去重：同一键的增/删是两条独立条目。
+      return `${block.kind}:${block.key}:${block.action}:${block.items.join('|')}`;
   }
 };
 
diff --git a/frontend/src/editor/modules/review/services/report-service/structured-report-builder.ts b/frontend/src/editor/modules/review/services/report-service/structured-report-builder.ts
index e855b48..f023499 100644
--- a/frontend/src/editor/modules/review/services/report-service/structured-report-builder.ts
+++ b/frontend/src/editor/modules/review/services/report-service/structured-report-builder.ts
@@ -288,6 +288,7 @@ const createReportChangeSelector = (context: StructuredReviewSelectionContext) =
   const selectBlockChanges = (block: ReviewReportBlock) => {
     switch (block.kind) {
       case 'manual':
+      case 'metadata':
         return [];
       case 'wordTextShared':
         return block.lineRefs.flatMap((ref) =>
diff --git a/frontend/src/editor/modules/review/services/report-service/types.ts b/frontend/src/editor/modules/review/services/report-service/types.ts
index 4f2154d..abcc8f9 100644
--- a/frontend/src/editor/modules/review/services/report-service/types.ts
+++ b/frontend/src/editor/modules/review/services/report-service/types.ts
@@ -196,6 +196,18 @@ export type ReviewReportBlock =
       newStart: number;
       oldEnd: number;
       newEnd: number;
+    })
+  | (ReviewReportBlockBase & {
+      /** 元数据改动 */
+      kind: 'metadata';
+      /** 动作：新增 / 删除 */
+      action: 'add' | 'remove';
+      /** 元数据原始 key，如 musicName */
+      key: string;
+      /** 类型的中文标签，如「歌曲名称」 */
+      label: string;
+      /** 本次动作涉及的值列表 */
+      items: string[];
     });
 
 export type ReviewReport = {
diff --git a/frontend/src/editor/modules/review/services/review-template-service.tsx b/frontend/src/editor/modules/review/services/review-template-service.tsx
index dc58e05..8365457 100644
--- a/frontend/src/editor/modules/review/services/review-template-service.tsx
+++ b/frontend/src/editor/modules/review/services/review-template-service.tsx
@@ -1,9 +1,11 @@
-import { Delete20Regular, Edit20Regular, LightbulbCheckmark20Regular } from '@fluentui/react-icons';
-import { Box, Button, Flex, Text, TextArea, TextField } from '@radix-ui/themes';
+import { Lightbulb, Pencil, Trash2 } from 'lucide-react';
 import { openDB } from 'idb';
 import { useSetAtom } from 'jotai';
 import { useEffect, useState } from 'react';
 import { uid } from 'uid';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
 import { pushNotificationAtom } from '$/states/notifications';
 
 const TEMPLATE_DB_NAME = 'review-template-db';
@@ -224,99 +226,100 @@ export const ReviewTemplateSection = ({ open, onInsertTemplate }: ReviewTemplate
   };
 
   return (
-    <Flex direction="column" gap="2">
-      <Text size="2" weight="medium">
-        模板
-      </Text>
-      <Flex wrap="wrap" gap="2">
+    <div className="flex flex-col gap-2">
+      <span className="text-sm font-medium text-foreground">模板</span>
+      <div className="flex flex-wrap gap-2">
         {[...presetTemplates, ...customTemplates].map((template) => {
           const isCustom = !template.id.startsWith('preset-');
           return (
             <Button
               key={template.id}
-              size="1"
-              variant="soft"
+              type="button"
+              size="sm"
+              variant="secondary"
+              className="h-auto gap-2 px-3 py-1.5 text-xs font-normal"
               onClick={() => onInsertTemplate(template.content)}
             >
-              <Flex align="center" gap="2">
-                <LightbulbCheckmark20Regular />
-                <Text size="1">{template.title}</Text>
-                {isCustom && (
-                  <>
-                    <Box
-                      as="span"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        handleStartEdit(template);
-                      }}
-                      style={{ cursor: 'pointer', marginLeft: '4px' }}
-                      title="编辑模板"
-                    >
-                      <Edit20Regular style={{ width: '14px', height: '14px' }} />
-                    </Box>
-                    <Box
-                      as="span"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        handleDeleteTemplate(template.id);
-                      }}
-                      style={{ cursor: 'pointer', marginLeft: '4px' }}
-                      title="删除模板"
-                    >
-                      <Delete20Regular style={{ width: '14px', height: '14px' }} />
-                    </Box>
-                  </>
-                )}
-              </Flex>
+              <Lightbulb className="size-3.5" />
+              <span>{template.title}</span>
+              {isCustom && (
+                <>
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleStartEdit(template);
+                    }}
+                    title="编辑模板"
+                    className="ml-1 inline-flex cursor-pointer items-center text-ink-3 transition-colors hover:text-primary"
+                  >
+                    <Pencil className="size-3.5" />
+                  </span>
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleDeleteTemplate(template.id);
+                    }}
+                    title="删除模板"
+                    className="ml-1 inline-flex cursor-pointer items-center text-ink-3 transition-colors hover:text-error"
+                  >
+                    <Trash2 className="size-3.5" />
+                  </span>
+                </>
+              )}
             </Button>
           );
         })}
-        {templateLoading && (
-          <Text size="1" color="gray">
-            正在加载模板...
-          </Text>
-        )}
-      </Flex>
+        {templateLoading && <span className="text-xs text-ink-3">正在加载模板...</span>}
+      </div>
       {showTemplateEditor ? (
-        <Flex direction="column" gap="2">
-          <TextField.Root
+        <div className="flex flex-col gap-2">
+          <Input
             value={templateTitle}
             onChange={(event) => setTemplateTitle(event.currentTarget.value)}
             placeholder="模板标题"
           />
-          <TextArea
+          <Textarea
             value={templateContent}
             onChange={(event) => setTemplateContent(event.currentTarget.value)}
             placeholder="模板内容"
-            style={{ minHeight: '120px' }}
+            className="min-h-[120px]"
           />
-          <Flex justify="end" gap="2">
+          <div className="flex justify-end gap-2">
             <Button
-              size="2"
-              variant="soft"
-              color="gray"
+              type="button"
+              size="sm"
+              variant="secondary"
               onClick={resetEditor}
               disabled={templateSaving}
             >
               取消
             </Button>
             <Button
-              size="2"
-              variant="soft"
+              type="button"
+              size="sm"
               onClick={editingTemplateId ? handleUpdateTemplate : handleSaveTemplate}
               disabled={templateSaving}
             >
               {editingTemplateId ? '更新模板' : '保存模板'}
             </Button>
-          </Flex>
-        </Flex>
+          </div>
+        </div>
       ) : (
-        <Flex justify="end">
-          <Button size="1" variant="soft" onClick={() => setShowTemplateEditor(true)}>
+        <div className="flex justify-end">
+          <Button
+            type="button"
+            size="sm"
+            variant="secondary"
+            onClick={() => setShowTemplateEditor(true)}
+          >
             新增自定义模板
           </Button>
-        </Flex>
+        </div>
       )}
-    </Flex>
+    </div>
   );
 };
diff --git a/frontend/src/editor/modules/segmentation/components/AdvancedSegmentation.tsx b/frontend/src/editor/modules/segmentation/components/AdvancedSegmentation.tsx
index 7654fc4..f662741 100644
--- a/frontend/src/editor/modules/segmentation/components/AdvancedSegmentation.tsx
+++ b/frontend/src/editor/modules/segmentation/components/AdvancedSegmentation.tsx
@@ -2,25 +2,17 @@
  * @description 高级分词组件
  */
 
-import { DeleteRegular, EditRegular, Info16Regular } from '@fluentui/react-icons';
-import {
-  Box,
-  Button,
-  Card,
-  Checkbox,
-  Dialog,
-  Flex,
-  IconButton,
-  RadioGroup,
-  Select,
-  Text,
-  TextArea,
-  TextField,
-} from '@radix-ui/themes';
+import { Info, Pencil, Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Dialog, DialogClose, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Radio } from '@/components/ui/radio-group';
+import { Select } from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
 import { useAtom, useAtomValue } from 'jotai';
 import { useSetImmerAtom } from 'jotai-immer';
 import { memo, useCallback, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import {
   segmentationCustomRulesAtom,
   segmentationIgnoreListTextAtom,
@@ -69,8 +61,6 @@ export const AdvancedSegmentationDialog = memo(() => {
 
   const [lang, setLang] = useAtom(segmentationLangAtom);
 
-  const { t } = useTranslation();
-
   const toggleSplitPoint = useCallback((index: number) => {
     setManualSplitIndices((prev) => {
       const next = new Set(prev);
@@ -145,31 +135,25 @@ export const AdvancedSegmentationDialog = memo(() => {
       if (!resultWords || resultWords.length === 0) return;
 
       return (
-        <Flex gap="1" wrap="wrap" align="center">
+        <div className="flex flex-wrap items-center gap-1">
           {resultWords.map((w, i) => (
             <span className={styles.previewWord} key={`preview-word-${i}-${w.id}`}>
               {w.word.trim() === '' ? (
-                <Text color="gray" as="span">
-                  {w.word.length > 0
-                    ? t('splitWordDialog.spaceCount', '空格x{count}', {
-                        count: w.word.length,
-                      })
-                    : t('splitWordDialog.empty', '空白')}
-                </Text>
+                <span className="text-ink-3">
+                  {w.word.length > 0 ? `空格x${w.word.length}` : '空白'}
+                </span>
               ) : (
                 w.word
               )}
             </span>
           ))}
-        </Flex>
+        </div>
       );
     } catch (error) {
       segmentationLogger.error('分词预览出错:', error);
-      return (
-        <Text color="gray">{t('advancedSegmentDialog.test.outputError', '分词预览出错')}</Text>
-      );
+      return <span className="text-ink-3">分词预览出错</span>;
     }
-  }, [testInput, t, segmentationConfig]);
+  }, [testInput, segmentationConfig]);
 
   const onApply = useCallback(() => {
     const maxLines = currentLyric.lyricLines.length;
@@ -201,160 +185,141 @@ export const AdvancedSegmentationDialog = memo(() => {
   ]);
 
   return (
-    <Dialog.Root open={open} onOpenChange={setOpen}>
-      <Dialog.Content maxWidth="800px">
-        <Dialog.Title>{t('advancedSegmentDialog.title', '高级分词')}</Dialog.Title>
-
-        <Flex direction="column" gap="4">
-          <Flex direction="column" gap="2">
-            <Text>{t('advancedSegmentDialog.scope.title', '应用范围')}</Text>
-            <Text as="label" size="2">
-              <RadioGroup.Root
-                value={scope}
-                onValueChange={(value: string) => setScope(value as 'all' | 'range')}
-              >
-                <Text as="label" size="2">
-                  <Flex gap="2" align="center">
-                    <RadioGroup.Item value="all" />
-                    <Text>{t('advancedSegmentDialog.scope.all', '所有歌词行')}</Text>
-                  </Flex>
-                </Text>
-                <Text as="label" size="2">
-                  <Flex gap="2" align="center" mt="2">
-                    <RadioGroup.Item value="range" />
-                    <Text>{t('advancedSegmentDialog.scope.range.from', '从第')}</Text>
-                    <TextField.Root
-                      type="number"
-                      value={rangeStart}
-                      onChange={(e) => setRangeStart(e.target.value)}
-                      disabled={scope !== 'range'}
-                      style={{ maxWidth: 80 }}
-                    />
-                    <Text>{t('advancedSegmentDialog.scope.range.to', '行到第')}</Text>
-                    <TextField.Root
-                      type="number"
-                      value={rangeEnd}
-                      onChange={(e) => setRangeEnd(e.target.value)}
-                      disabled={scope !== 'range'}
-                      style={{ maxWidth: 80 }}
-                    />
-                    <Text>{t('advancedSegmentDialog.scope.range.end', '行')}</Text>
-                  </Flex>
-                </Text>
-              </RadioGroup.Root>
-            </Text>
-          </Flex>
-          <Flex direction="column" gap="2">
-            <Text>{t('advancedSegmentDialog.rules.title', '自动分词规则')}</Text>
-            <Text as="label" size="2">
-              <Flex gap="2" align="center">
-                <Checkbox checked={splitCJK} onCheckedChange={(c) => setSplitCJK(c as boolean)} />
-                {t('advancedSegmentDialog.rules.cjk', 'CJK 按字符分词')}
-              </Flex>
-            </Text>
-
-            <Flex direction="column" gap="2">
-              <Text as="label" size="2">
-                <Flex gap="2" align="center">
-                  <Checkbox
-                    checked={splitEnglish}
-                    onCheckedChange={(c) => setSplitEnglish(c as boolean)}
-                  />
-                  {t('advancedSegmentDialog.rules.syllable', '西文单词按音节分词')}
-                </Flex>
-              </Text>
-
-              {splitEnglish && (
-                <Flex direction="column" gap="1" ml="5">
-                  <Text size="2" color="gray">
-                    {t('advancedSegmentDialog.language.select', '选择一个分词语言模型：')}
-                  </Text>
-                  <Select.Root value={lang} onValueChange={setLang} disabled={isLoadingLang}>
-                    <Select.Trigger style={{ width: '100%' }} />
-                    <Select.Content>
-                      {SUPPORTED_LANGUAGES.map((l) => (
-                        <Select.Item key={l.value} value={l.value}>
-                          {l.label}
-                        </Select.Item>
-                      ))}
-                    </Select.Content>
-                  </Select.Root>
-                </Flex>
-              )}
-            </Flex>
-
-            <Card>
-              <Flex gap="2" align="start">
-                <Info16Regular />
-                <Text size="2" color="gray">
-                  {t(
-                    'advancedSegmentDialog.tip',
-                    '分词后，原音节的时长会按照字符数和权重重新分配给新的音节'
-                  )}
-                </Text>
-              </Flex>
-            </Card>
-          </Flex>
-
-          <Flex direction="column" gap="3">
-            <Text>{t('advancedSegmentDialog.postProcess.title', '后处理')}</Text>
-            <Text as="label" size="2">
-              <Flex direction="column" gap="2">
-                <Text>{t('advancedSegmentDialog.postProcess.punct.caption', '标点符号处理:')}</Text>
-                <RadioGroup.Root
-                  value={punctuationMode}
-                  onValueChange={(value: string) =>
-                    setPunctuationMode(value as 'merge' | 'standalone')
-                  }
-                >
-                  <Text as="label" size="2">
-                    <Flex gap="2" align="center">
-                      <RadioGroup.Item value="merge" />
-                      <Text>
-                        {t('advancedSegmentDialog.postProcess.punct.merge', '合并到相邻音节')}
-                      </Text>
-                    </Flex>
-                  </Text>
-                  <Text as="label" size="2">
-                    <Flex gap="2" align="center" mt="2">
-                      <RadioGroup.Item value="standalone" />
-                      <Text>
-                        {t('advancedSegmentDialog.postProcess.punct.standalone', '设为新音节')}
-                      </Text>
-                    </Flex>
-                  </Text>
-                </RadioGroup.Root>
-              </Flex>
-            </Text>
-
-            <Text as="label" size="2">
-              <Flex direction="column" gap="2">
-                <Text>{t('advancedSegmentDialog.postProcess.punct.weight', '标点时长权重:')}</Text>
-                <TextField.Root
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="max-h-[85vh] max-w-[800px] overflow-y-auto">
+        <DialogTitle>高级分词</DialogTitle>
+
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-2">
+            <span className="text-sm text-foreground">应用范围</span>
+            <div role="radiogroup" className="flex flex-col gap-1">
+              <label className="flex items-center gap-2 text-sm">
+                <Radio
+                  name="segmentation-scope"
+                  value="all"
+                  checked={scope === 'all'}
+                  onChange={() => setScope('all')}
+                />
+                <span>所有歌词行</span>
+              </label>
+              <label className="mt-2 flex items-center gap-2 text-sm">
+                <Radio
+                  name="segmentation-scope"
+                  value="range"
+                  checked={scope === 'range'}
+                  onChange={() => setScope('range')}
+                />
+                <span>从第</span>
+                <Input
                   type="number"
-                  value={punctuationWeight}
-                  onChange={(e) => setPunctuationWeight(e.target.value)}
-                  disabled={punctuationMode !== 'standalone'}
-                  style={{ maxWidth: 100 }}
+                  value={rangeStart}
+                  onChange={(e) => setRangeStart(e.target.value)}
+                  disabled={scope !== 'range'}
+                  className="max-w-20"
                 />
-              </Flex>
-            </Text>
-
-            <Text as="label" size="2">
-              <Flex gap="2" align="center">
-                <Checkbox
-                  checked={removeEmptySegments}
-                  onCheckedChange={(c) => setRemoveEmptySegments(c as boolean)}
+                <span>行到第</span>
+                <Input
+                  type="number"
+                  value={rangeEnd}
+                  onChange={(e) => setRangeEnd(e.target.value)}
+                  disabled={scope !== 'range'}
+                  className="max-w-20"
                 />
-                <Text>{t('advancedSegmentDialog.postProcess.empty', '移除空白音节')}</Text>
-              </Flex>
-            </Text>
-          </Flex>
-
-          <Flex direction="column" gap="2">
-            <Text>{t('advancedSegmentDialog.custom.title', '自定义分词规则')}</Text>
-            <TextField.Root
-              placeholder={t('advancedSegmentDialog.custom.input', '输入单词进行手动分割...')}
+                <span>行</span>
+              </label>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <span className="text-sm text-foreground">自动分词规则</span>
+            <label className="flex items-center gap-2 text-sm">
+              <Checkbox checked={splitCJK} onCheckedChange={(c) => setSplitCJK(c)} />
+              CJK 按字符分词
+            </label>
+
+            <div className="flex flex-col gap-2">
+              <label className="flex items-center gap-2 text-sm">
+                <Checkbox checked={splitEnglish} onCheckedChange={(c) => setSplitEnglish(c)} />
+                西文单词按音节分词
+              </label>
+
+              {splitEnglish && (
+                <div className="ml-5 flex flex-col gap-1">
+                  <span className="text-sm text-ink-3">选择一个分词语言模型：</span>
+                  <Select
+                    value={lang}
+                    onChange={(e) => setLang(e.currentTarget.value)}
+                    disabled={isLoadingLang}
+                    className="w-full"
+                  >
+                    {SUPPORTED_LANGUAGES.map((l) => (
+                      <option key={l.value} value={l.value}>
+                        {l.label}
+                      </option>
+                    ))}
+                  </Select>
+                </div>
+              )}
+            </div>
+
+            <div className="flex items-start gap-2 rounded-md border border-line bg-card px-3 py-2">
+              <Info className="mt-0.5 size-4 shrink-0 text-ink-3" />
+              <span className="text-sm text-ink-3">
+                分词后，原音节的时长会按照字符数和权重重新分配给新的音节
+              </span>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <span className="text-sm text-foreground">后处理</span>
+            <div className="flex flex-col gap-2">
+              <span className="text-sm text-foreground">标点符号处理:</span>
+              <div role="radiogroup" className="flex flex-col gap-1">
+                <label className="flex items-center gap-2 text-sm">
+                  <Radio
+                    name="segmentation-punctuation"
+                    value="merge"
+                    checked={punctuationMode === 'merge'}
+                    onChange={() => setPunctuationMode('merge')}
+                  />
+                  <span>合并到相邻音节</span>
+                </label>
+                <label className="mt-2 flex items-center gap-2 text-sm">
+                  <Radio
+                    name="segmentation-punctuation"
+                    value="standalone"
+                    checked={punctuationMode === 'standalone'}
+                    onChange={() => setPunctuationMode('standalone')}
+                  />
+                  <span>设为新音节</span>
+                </label>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <span className="text-sm text-foreground">标点时长权重:</span>
+              <Input
+                type="number"
+                value={punctuationWeight}
+                onChange={(e) => setPunctuationWeight(e.target.value)}
+                disabled={punctuationMode !== 'standalone'}
+                className="max-w-[100px]"
+              />
+            </div>
+
+            <label className="flex items-center gap-2 text-sm">
+              <Checkbox
+                checked={removeEmptySegments}
+                onCheckedChange={(c) => setRemoveEmptySegments(c)}
+              />
+              <span>移除空白音节</span>
+            </label>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <span className="text-sm text-foreground">自定义分词规则</span>
+            <Input
+              placeholder="输入单词进行手动分割..."
               value={manualWordInput}
               onChange={(e) => {
                 setManualWordInput(e.target.value);
@@ -366,30 +331,21 @@ export const AdvancedSegmentationDialog = memo(() => {
               splitIndices={manualSplitIndices}
               onSplitIndexToggle={toggleSplitPoint}
             />
-            <Button onClick={handleAddRule} disabled={!manualWordInput}>
-              {t('advancedSegmentDialog.custom.add', '添加到自定义规则')}
+            <Button type="button" onClick={handleAddRule} disabled={!manualWordInput}>
+              添加到自定义规则
             </Button>
             {customRules.size > 0 && (
-              <Flex direction="column" gap="2">
-                <Text size="2">{t('advancedSegmentDialog.custom.list', '自定义规则列表:')}</Text>
-                <Box className={styles.ruleList}>
+              <div className="flex flex-col gap-2">
+                <span className="text-sm text-foreground">自定义规则列表:</span>
+                <div className={styles.ruleList}>
                   {Array.from(customRules.entries()).map(([word, parts]) => (
-                    <Flex
+                    <div
                       key={word}
-                      justify="between"
-                      align="center"
-                      style={{
-                        paddingTop: 'var(--space-1)',
-                        paddingBottom: 'var(--space-2)',
-                        marginBottom: 'var(--space-2)',
-                        borderBottom: '3px solid var(--gray-3)',
-                      }}
+                      className="flex items-center justify-between border-b-[3px] border-line pt-1 pb-2 mb-2"
                     >
-                      <Flex align="center" gap="2" wrap="wrap">
+                      <div className="flex flex-wrap items-center gap-2">
                         <span className={styles.previewWord}>{word}</span>
-                        <Text color="gray" as="span">
-                          →
-                        </Text>
+                        <span className="text-ink-3">→</span>
                         {parts.map((part, i) => (
                           <span
                             className={styles.previewWord}
@@ -399,92 +355,74 @@ export const AdvancedSegmentationDialog = memo(() => {
                             }`}
                           >
                             {part.trim() === '' ? (
-                              <Text color="gray" as="span">
-                                {part.length > 0
-                                  ? t('splitWordDialog.spaceCount', '空格x{count}', {
-                                      count: part.length,
-                                    })
-                                  : t('splitWordDialog.empty', '空白')}
-                              </Text>
+                              <span className="text-ink-3">
+                                {part.length > 0 ? `空格x${part.length}` : '空白'}
+                              </span>
                             ) : (
                               part
                             )}
                           </span>
                         ))}
-                      </Flex>
+                      </div>
 
-                      <Flex gap="1">
-                        <IconButton
-                          size="1"
+                      <div className="flex gap-1">
+                        <Button
+                          type="button"
+                          size="icon"
                           variant="ghost"
-                          color="gray"
                           onClick={() => handleEditRule(word, parts)}
                         >
-                          <EditRegular />
-                        </IconButton>
-                        <IconButton
-                          size="1"
+                          <Pencil />
+                        </Button>
+                        <Button
+                          type="button"
+                          size="icon"
                           variant="ghost"
-                          color="gray"
                           onClick={() => handleDeleteRule(word)}
                         >
-                          <DeleteRegular />
-                        </IconButton>
-                      </Flex>
-                    </Flex>
+                          <Trash2 />
+                        </Button>
+                      </div>
+                    </div>
                   ))}
-                </Box>
-              </Flex>
+                </div>
+              </div>
             )}
-          </Flex>
-
-          <Text as="label" size="2">
-            <Flex direction="column" gap="2">
-              <Text>{t('advancedSegmentDialog.ignore.title', '忽略列表')}</Text>
-              <TextArea
-                placeholder={t(
-                  'advancedSegmentDialog.ignore.placeholder',
-                  '每行一个单词，在此列表中的单词将不会被自动分词'
-                )}
-                value={ignoreListText}
-                onChange={(e) => setIgnoreListText(e.target.value)}
-                style={{ minHeight: 100, resize: 'vertical' }}
-              />
-            </Flex>
-          </Text>
-
-          <Text as="label" size="2">
-            <Flex direction="column" gap="2">
-              <Text>{t('advancedSegmentDialog.test.title', '分词测试')}</Text>
-              <TextField.Root
-                placeholder={t('advancedSegmentDialog.test.input', '输入一行歌词或单词进行测试...')}
-                value={testInput}
-                onChange={(e) => setTestInput(e.target.value)}
-              />
-              <Text size="2">{t('advancedSegmentDialog.test.output', '预览结果:')}</Text>
-              <Box
-                style={{
-                  backgroundColor: 'var(--gray-4)',
-                  borderRadius: 'var(--radius-2)',
-                  padding: 'var(--space-2)',
-                  minHeight: '4em',
-                }}
-              >
-                {testPreview}
-              </Box>
-            </Flex>
-          </Text>
-        </Flex>
-
-        <Flex gap="3" mt="4" justify="end">
-          <Dialog.Close>
-            <Button variant="soft" color="gray">
-              {t('common.cancel', '取消')}
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <span className="text-sm text-foreground">忽略列表</span>
+            <Textarea
+              placeholder="每行一个单词，在此列表中的单词将不会被自动分词"
+              value={ignoreListText}
+              onChange={(e) => setIgnoreListText(e.target.value)}
+              className="min-h-[100px] resize-y"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <span className="text-sm text-foreground">分词测试</span>
+            <Input
+              placeholder="输入一行歌词或单词进行测试..."
+              value={testInput}
+              onChange={(e) => setTestInput(e.target.value)}
+            />
+            <span className="text-sm text-foreground">预览结果:</span>
+            <div className="min-h-[4em] rounded-md bg-muted p-2">{testPreview}</div>
+          </div>
+        </div>
+
+        <div className="mt-4 flex justify-end gap-3">
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              取消
             </Button>
-          </Dialog.Close>
-          <Button onClick={onApply}>{t('common.apply', '应用')}</Button>
-        </Flex>
-      </Dialog.Content>
-    </Dialog.Root>
+          </DialogClose>
+          <Button type="button" onClick={onApply}>
+            应用
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 });
diff --git a/frontend/src/editor/modules/segmentation/components/ManualWordSplitter.tsx b/frontend/src/editor/modules/segmentation/components/ManualWordSplitter.tsx
index 27e75a1..fc0cfe1 100644
--- a/frontend/src/editor/modules/segmentation/components/ManualWordSplitter.tsx
+++ b/frontend/src/editor/modules/segmentation/components/ManualWordSplitter.tsx
@@ -2,7 +2,6 @@
  * @description 手动分词组件
  */
 
-import { Flex } from '@radix-ui/themes';
 import { Fragment, memo, useMemo } from 'react';
 import styles from './ManualWordSplitter.module.css';
 
@@ -17,19 +16,7 @@ export const ManualWordSplitter = memo(
     const manualGraphemes = useMemo(() => Array.from(word), [word]);
 
     return (
-      <Flex
-        align="center"
-        justify="center"
-        style={{
-          backgroundColor: 'var(--gray-4)',
-          borderRadius: 'var(--radius-2)',
-          padding: 'var(--space-4)',
-          minHeight: '4em',
-          userSelect: 'none',
-          overflowX: 'auto',
-          whiteSpace: 'nowrap',
-        }}
-      >
+      <div className="flex min-h-[4em] items-center justify-center overflow-x-auto whitespace-nowrap rounded-md bg-muted p-4 select-none">
         {manualGraphemes.map((grapheme, index) => (
           <Fragment
             key={`${grapheme}-${
@@ -48,7 +35,7 @@ export const ManualWordSplitter = memo(
             <span className={styles.grapheme}>{grapheme}</span>
           </Fragment>
         ))}
-      </Flex>
+      </div>
     );
   }
 );
diff --git a/frontend/src/editor/modules/segmentation/components/split-word.tsx b/frontend/src/editor/modules/segmentation/components/split-word.tsx
index 5c4682e..1a08fee 100644
--- a/frontend/src/editor/modules/segmentation/components/split-word.tsx
+++ b/frontend/src/editor/modules/segmentation/components/split-word.tsx
@@ -1,9 +1,17 @@
-import { Info16Regular } from '@fluentui/react-icons';
-import { Box, Button, Card, Checkbox, Dialog, Flex, Text } from '@radix-ui/themes';
 import { useAtom, useAtomValue } from 'jotai';
 import { useSetImmerAtom } from 'jotai-immer';
+import { Info } from 'lucide-react';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
 import {
   segmentationCustomRulesAtom,
   segmentationIgnoreListTextAtom,
@@ -29,7 +37,6 @@ export const SplitWordDialog = memo(() => {
   const editingState = useAtomValue(editingWordStateAtom);
   const lyricLines = useAtomValue(lyricLinesAtom);
   const editLyricLines = useSetImmerAtom(lyricLinesAtom);
-  const { t } = useTranslation();
 
   const [splitIndices, setSplitIndices] = useState(new Set<number>());
   const [targetWordText, setTargetWordText] = useState('');
@@ -203,60 +210,50 @@ export const SplitWordDialog = memo(() => {
   ]);
 
   return (
-    <Dialog.Root open={splitWordDialog} onOpenChange={splitWordDialogOpen}>
-      <Dialog.Content>
-        <Dialog.Title>{t('splitWordDialog.title', '拆分单词')}</Dialog.Title>
-        <Flex direction="column" gap="2">
-          <Card>
-            <Flex gap="2" align="start">
-              <Info16Regular />
-              <Text size="2" color="gray">
-                {t(
-                  'splitWordDialog.tip',
-                  '拆分后新单词将会按自身单词字符平均分配原单词的始末时间，如有空拍则会被清除'
-                )}
-              </Text>
-            </Flex>
-          </Card>
+    <Dialog open={splitWordDialog} onOpenChange={splitWordDialogOpen}>
+      <DialogContent>
+        <DialogTitle>拆分单词</DialogTitle>
+        <div className="flex flex-col gap-2">
+          <div className="rounded-lg border border-line bg-card p-3">
+            <div className="flex items-start gap-2">
+              <Info className="size-4 shrink-0 text-ink-3" />
+              <span className="text-sm text-ink-3">
+                拆分后新单词将会按自身单词字符平均分配原单词的始末时间，如有空拍则会被清除
+              </span>
+            </div>
+          </div>
 
-          <Box my="3">
+          <div className="my-3">
             <ManualWordSplitter
               word={targetWordText}
               splitIndices={splitIndices}
               onSplitIndexToggle={toggleSplitPoint}
             />
-          </Box>
+          </div>
 
-          <Flex direction="column" gap="2">
-            <Text as="label" size="2">
-              <Flex gap="2" align="center">
-                <Checkbox
-                  checked={applyToAll}
-                  onCheckedChange={(c) => setApplyToAll(c as boolean)}
-                />
-                {t('splitWordDialog.applyToAll', '将此拆分规则应用于所有相同的单词')}
-              </Flex>
-            </Text>
+          <div className="flex flex-col gap-2">
+            <Label className="font-normal">
+              <Checkbox checked={applyToAll} onCheckedChange={(c) => setApplyToAll(Boolean(c))} />
+              将此拆分规则应用于所有相同的单词
+            </Label>
 
-            <Text as="label" size="2">
-              <Flex gap="2" align="center" style={{ opacity: applyToAll ? 1 : 0.5 }}>
-                <Checkbox
-                  disabled={!applyToAll}
-                  checked={ignoreCase}
-                  onCheckedChange={(c) => setIgnoreCase(c as boolean)}
-                />
-                {t('splitWordDialog.ignoreCase', '忽略大小写')}
-              </Flex>
-            </Text>
-          </Flex>
-        </Flex>
+            <Label className="font-normal" style={{ opacity: applyToAll ? 1 : 0.5 }}>
+              <Checkbox
+                disabled={!applyToAll}
+                checked={ignoreCase}
+                onCheckedChange={(c) => setIgnoreCase(Boolean(c))}
+              />
+              忽略大小写
+            </Label>
+          </div>
+        </div>
 
-        <Flex justify="end" mt="4">
-          <Dialog.Close>
-            <Button onClick={handleSplit}>{t('splitWordDialog.actionButton', '执行')}</Button>
-          </Dialog.Close>
-        </Flex>
-      </Dialog.Content>
-    </Dialog.Root>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button onClick={handleSplit}>执行</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 });
diff --git a/frontend/src/editor/modules/spectrogram/components/AudioSpectrogram.tsx b/frontend/src/editor/modules/spectrogram/components/AudioSpectrogram.tsx
index 1d675da..523b4b2 100644
--- a/frontend/src/editor/modules/spectrogram/components/AudioSpectrogram.tsx
+++ b/frontend/src/editor/modules/spectrogram/components/AudioSpectrogram.tsx
@@ -1,8 +1,9 @@
-import { EyeFilled, EyeOffFilled, MusicNote2Filled, Timer16Regular } from '@fluentui/react-icons';
-import { Flex, IconButton, Slider, Text, Theme, Tooltip } from '@radix-ui/themes';
+import { Eye, EyeOff, Music, Timer } from 'lucide-react';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { type FC, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Slider } from '@/components/ui/slider';
+import { SimpleTooltip } from '@/components/ui/tooltip';
 import { audioEngine } from '$/modules/audio/audio-engine.ts';
 import { useBpmTapEngine } from '$/modules/audio/hooks';
 import {
@@ -147,8 +148,6 @@ export const AudioSpectrogram: FC = () => {
 
   const rulerRef = useRef<TimelineRulerHandle>(null);
 
-  const { t } = useTranslation();
-
   const { tileCache, requestTileIfNeeded, lastTileTimestamp } = useSpectrogramWorker(
     pcmDataReady,
     currentDurationMs,
@@ -300,19 +299,16 @@ export const AudioSpectrogram: FC = () => {
 
   if (isSpectrogramTapMode) {
     const nextBeatIndex = totalTapCount + 1;
-    hoverTimeFormatted = `${t('spectrogram.clickToCalibrateBeatN', '点击校准第 {{n}} 拍', { n: nextBeatIndex })}: ${hoverTimeFormatted}`;
+    hoverTimeFormatted = `点击校准第 ${nextBeatIndex} 拍: ${hoverTimeFormatted}`;
     tooltipBgColor = 'var(--green-9)';
     hoverLineColor = 'var(--green-9)';
   } else if (isInvalidEndTime) {
-    hoverTimeFormatted = t('spectrogram.invalidEndTime', '不能选择此结束时间');
+    hoverTimeFormatted = '不能选择此结束时间';
     tooltipBgColor = 'var(--red-9)';
     hoverLineColor = 'var(--red-9)';
   } else if (editingTimeField && !editingTimeField.isWord) {
-    const fieldName =
-      editingTimeField.field === 'startTime'
-        ? t('ribbonBar.editMode.startTime', '起始时间')
-        : t('ribbonBar.editMode.endTime', '结束时间');
-    hoverTimeFormatted = `${t('common.clickToSet', '点击设置')}${fieldName}: ${hoverTimeFormatted}`;
+    const fieldName = editingTimeField.field === 'startTime' ? '起始时间' : '结束时间';
+    hoverTimeFormatted = `${'点击设置'}${fieldName}: ${hoverTimeFormatted}`;
     tooltipBgColor = 'var(--accent-9)';
   }
 
@@ -347,23 +343,20 @@ export const AudioSpectrogram: FC = () => {
 
       <div className={styles.innerContainer}>
         <div className={`${styles.sidebar} ${styles.leftSidebar}`}>
-          <Flex direction="column" align="center" gap="2" style={{ height: '100%', width: '100%' }}>
-            <Flex
-              direction="column"
-              align="center"
-              justify="end"
-              style={{ flex: 1, width: '100%', padding: '4px 0' }}
-            >
+          <div className="flex h-full w-full flex-col items-center gap-2">
+            <div className="flex w-full flex-1 flex-col items-center justify-end py-1">
               <div className={styles.gainSliderContainer} style={{ height: '95%' }}>
                 <Slider
                   orientation="vertical"
-                  size="1"
                   min={minGain}
                   max={maxGain}
                   step={0.5}
-                  value={[gain]}
-                  onValueChange={(v) => setGain(v[0] ?? gain)}
-                  style={{ flex: 1, width: '18px', zIndex: 10 }}
+                  value={gain}
+                  onValueChange={setGain}
+                  aria-label="频谱图增益"
+                  className="flex-1"
+                  style={{ flex: 1, zIndex: 10 }}
+                  trackColor="var(--gray-a6)"
                 />
                 <div
                   className={styles.gainTooltip}
@@ -374,29 +367,25 @@ export const AudioSpectrogram: FC = () => {
                   {gain}x
                 </div>
               </div>
-            </Flex>
-          </Flex>
+            </div>
+          </div>
         </div>
 
         <div className={styles.mainContent}>
           {!pcmDataReady ? (
             <div className={styles.emptyState}>
-              <Flex direction="column" align="center" gap="3">
-                <MusicNote2Filled fontSize={48} color="var(--gray-8)" style={{ opacity: 0.5 }} />
+              <div className="flex flex-col items-center gap-3">
+                <Music className="size-12 text-ink-3 opacity-50" strokeWidth={1.5} />
                 {/**
                  * 审核页不提供「加载本地音频文件」入口 ——
                  * 参考音频来自后端投稿，由 `LyricEditorPage` 注入。
                  */}
                 {engineState === 'idle' ? (
-                  <Text color="gray" size="3">
-                    {t('spectrogram.noAudioLoaded', '参考音频未就绪，频谱图不可用')}
-                  </Text>
+                  <span className="text-base text-ink-3">参考音频未就绪，频谱图不可用</span>
                 ) : (
-                  <Text color="gray" size="3">
-                    {t('spectrogram.decoding', '正在解码音频，请稍候...')}
-                  </Text>
+                  <span className="text-base text-ink-3">正在解码音频，请稍候...</span>
                 )}
-              </Flex>
+              </div>
             </div>
           ) : (
             <>
@@ -488,7 +477,8 @@ export const AudioSpectrogram: FC = () => {
                     <div className={styles.rangePreviewRegion} style={previewStyle} />
                   )}
                   <SpectrogramContext.Provider value={contextValue}>
-                    <Theme appearance="dark">
+                    {/* 频谱图恒定深色底（canvas 配色依赖），用 .dark 作用域替代原 <Theme appearance="dark"> */}
+                    <div className="dark">
                       {showBeatLines && <BeatLinesOverlay clientWidth={containerWidth} />}
                       {reviewTimingOverlayEnabled ? (
                         <ReviewLyricTimelineOverlay
@@ -515,7 +505,7 @@ export const AudioSpectrogram: FC = () => {
                           />
                         </div>
                       )}
-                    </Theme>
+                    </div>
                   </SpectrogramContext.Provider>
                 </div>
               </div>
@@ -524,22 +514,26 @@ export const AudioSpectrogram: FC = () => {
         </div>
 
         <div className={`${styles.sidebar} ${styles.rightSidebar}`}>
-          <Tooltip content={t('spectrogram.showBeatLines', '在频谱图上显示拍子')} side="left">
-            <IconButton
-              variant={showBeatLines ? 'solid' : 'outline'}
+          <SimpleTooltip label="在频谱图上显示拍子" side="left">
+            <Button
+              type="button"
+              size="icon"
+              variant={showBeatLines ? 'default' : 'outline'}
               onClick={() => setShowBeatLines((prev) => !prev)}
             >
-              <Timer16Regular />
-            </IconButton>
-          </Tooltip>
-          <Tooltip content={t('spectrogram.showUnselectedLines', '显示未选中行')} side="left">
-            <IconButton
-              variant={showUnselectedLines ? 'solid' : 'outline'}
+              <Timer />
+            </Button>
+          </SimpleTooltip>
+          <SimpleTooltip label="显示未选中行" side="left">
+            <Button
+              type="button"
+              size="icon"
+              variant={showUnselectedLines ? 'default' : 'outline'}
               onClick={() => setShowUnselectedLines((prev) => !prev)}
             >
-              {showUnselectedLines ? <EyeFilled /> : <EyeOffFilled />}
-            </IconButton>
-          </Tooltip>
+              {showUnselectedLines ? <Eye /> : <EyeOff />}
+            </Button>
+          </SimpleTooltip>
         </div>
       </div>
     </div>
diff --git a/frontend/src/editor/states/dialogs.ts b/frontend/src/editor/states/dialogs.ts
index 6f5eddb..83940a4 100644
--- a/frontend/src/editor/states/dialogs.ts
+++ b/frontend/src/editor/states/dialogs.ts
@@ -86,6 +86,7 @@ export const reduceStutterDialogAtom = atom<{
 }>({
   open: false,
 });
+
 export const ttmlErrorDialogAtom = atom<{
   error: JsError;
   rawText?: string;
diff --git a/frontend/src/editor/states/main.ts b/frontend/src/editor/states/main.ts
index ab4c11f..aa02def 100644
--- a/frontend/src/editor/states/main.ts
+++ b/frontend/src/editor/states/main.ts
@@ -121,7 +121,18 @@ export const saveStatusAtom = atom<SaveStatus>(SaveStatus.Saved);
 export const lastSavedTimeAtom = atom<number | null>(null);
 
 export const undoableLyricLinesAtom = withHistory(lyricLinesAtom, 256);
-export const isDirtyAtom = atom((get) => get(undoableLyricLinesAtom).canUndo);
+
+export const savedLyricBaselineAtom = atom<string | null>(null);
+
+export const markLyricLinesSavedAtom = atom(null, (get, set) => {
+  set(savedLyricBaselineAtom, JSON.stringify(get(lyricLinesAtom)));
+});
+
+export const isDirtyAtom = atom((get) => {
+  const baseline = get(savedLyricBaselineAtom);
+  if (baseline === null) return false;
+  return JSON.stringify(get(lyricLinesAtom)) !== baseline;
+});
 export const reviewOperationLogAtom = atom<ReviewOperationRecord[]>([]);
 export const reviewOperationRedoStackAtom = atom<ReviewOperationRecord[]>([]);
 
diff --git a/frontend/src/editor/states/notifications.ts b/frontend/src/editor/states/notifications.ts
index 51be320..8157806 100644
--- a/frontend/src/editor/states/notifications.ts
+++ b/frontend/src/editor/states/notifications.ts
@@ -1,4 +1,5 @@
 import { atom } from 'jotai';
+import { toast } from 'sonner';
 import { uid } from 'uid';
 
 export type NotificationLevel = 'info' | 'warning' | 'error' | 'success';
@@ -39,60 +40,61 @@ export type AppNotification = {
 
 export const notificationsAtom = atom<AppNotification[]>([]);
 
+/** sonner 的 toast 级别 */
+const toSonner = (level: NotificationLevel) => {
+  switch (level) {
+    case 'success':
+      return toast.success;
+    case 'error':
+      return toast.error;
+    case 'warning':
+      return toast.warning;
+    default:
+      return toast.info;
+  }
+};
+
+const emit = (notification: AppNotification) => {
+  const notify = toSonner(notification.level);
+  notify(notification.title, {
+    id: notification.id,
+    description: notification.description,
+    duration: notification.pinned ? Number.POSITIVE_INFINITY : undefined,
+  });
+};
+
 export const pushNotificationAtom = atom(
   null,
   (
     _get,
-    set,
+    _set,
     input: Omit<AppNotification, 'id' | 'createdAt'> & {
       id?: string;
       createdAt?: string;
     }
   ) => {
-    const nextNotification: AppNotification = {
+    emit({
       ...input,
       id: input.id ?? uid(),
       createdAt: input.createdAt ?? new Date().toISOString(),
-    };
-    set(notificationsAtom, (prev) => [nextNotification, ...prev]);
+    });
   }
 );
 
 export const upsertNotificationAtom = atom(
   null,
-  (get, set, input: Omit<AppNotification, 'createdAt'> & { createdAt?: string }) => {
-    const notifications = get(notificationsAtom);
-    const existingIndex = notifications.findIndex((notification) => notification.id === input.id);
-    const existing = existingIndex >= 0 ? notifications[existingIndex] : null;
-    const nextNotification: AppNotification = {
-      ...existing,
+  (_get, _set, input: Omit<AppNotification, 'createdAt'> & { createdAt?: string }) => {
+    emit({
       ...input,
-      createdAt: input.createdAt ?? existing?.createdAt ?? new Date().toISOString(),
-    };
-    if (existingIndex >= 0) {
-      set(notificationsAtom, (prev) => {
-        const next = [...prev];
-        next[existingIndex] = nextNotification;
-        return next;
-      });
-    } else {
-      set(notificationsAtom, (prev) => [nextNotification, ...prev]);
-    }
+      createdAt: input.createdAt ?? new Date().toISOString(),
+    });
   }
 );
 
-export const removeNotificationAtom = atom(null, (get, set, id: string) => {
-  const notifications = get(notificationsAtom);
-  const next = notifications.filter(
-    (notification) => notification.id !== id || notification.dismissible === false
-  );
-  if (next.length !== notifications.length) {
-    set(notificationsAtom, next);
-  }
+export const removeNotificationAtom = atom(null, (_get, _set, id: string) => {
+  toast.dismiss(id);
 });
 
-export const clearNotificationsAtom = atom(null, (_get, set) => {
-  set(notificationsAtom, (prev) =>
-    prev.filter((notification) => notification.dismissible === false)
-  );
+export const clearNotificationsAtom = atom(null, (_get, _set) => {
+  toast.dismiss();
 });
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e1c3297..1200209 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -4,29 +4,6 @@
 /* prose：法律文档正文排版（.legal-prose 仅做主题令牌桥接与少量定制） */
 @plugin '@tailwindcss/typography';
 
-/* Radix Accordion 展开动画（shadcn accordion 依赖 --animate-accordion-*） */
-@theme {
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-}
-
 @property --amll-background {
   syntax: '<color>';
   inherits: true;
@@ -42,11 +19,6 @@
   inherits: true;
   initial-value: #ffffff;
 }
-@property --amll-card-foreground {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: #1d1d1f;
-}
 @property --amll-popover {
   syntax: '<color>';
   inherits: true;
@@ -174,7 +146,6 @@
   --amll-foreground: #1d1d1f;
 
   --amll-card: #ffffff;
-  --amll-card-foreground: #1d1d1f;
 
   --amll-popover: #ffffff;
   --amll-popover-foreground: #1d1d1f;
@@ -222,12 +193,12 @@
 }
 
 /* 深色主题 */
-html.dark {
+html.dark,
+.dark {
   --amll-background: #101014;
   --amll-foreground: #f5f5f7;
 
   --amll-card: #1a1a1f;
-  --amll-card-foreground: #f5f5f7;
 
   --amll-popover: #1a1a1f;
   --amll-popover-foreground: #f5f5f7;
@@ -263,6 +234,45 @@ html.dark {
   --amll-state-warning: #e09a33;
   --amll-state-error: #ef4444;
   --amll-state-info: #4d9fe0;
+
+  /*
+   * Radix 色板兜底：深色档。
+   */
+  --gray-1: #111113;
+  --gray-2: #18191b;
+  --gray-3: #212225;
+  --gray-4: #272a2d;
+  --gray-5: #2e3135;
+  --gray-7: #43484e;
+  --gray-8: #5a6169;
+  --gray-9: #696e77;
+  --gray-10: #777b84;
+  --gray-11: #9ba1a8;
+  --gray-12: #eeeff1;
+  --gray-a1: rgb(255 255 255 / 0.02);
+  --gray-a2: rgb(255 255 255 / 0.06);
+  --gray-a3: rgb(255 255 255 / 0.13);
+  --gray-a4: rgb(255 255 255 / 0.19);
+  --gray-a5: rgb(255 255 255 / 0.26);
+  --gray-a6: rgb(255 255 255 / 0.34);
+  --gray-a7: rgb(255 255 255 / 0.44);
+
+  /* 白/黑透明梯：深色下白梯更不透明，保证可读 */
+  --white-a6: rgb(255 255 255 / 0.5);
+  --white-a10: rgb(255 255 255 / 0.78);
+  --white-a12: rgb(255 255 255 / 0.95);
+
+  /* 绿 / 蓝 / 橙 / 琥珀：深色下主色提亮一档 */
+  --green-8: #3cb179;
+  --green-9: #30a46c;
+  --green-11: #3dd68c;
+  --green-12: #b1f1cb;
+
+  --blue-9: #0090ff;
+
+  --amber-9: #ffc53d;
+  --amber-10: #ffd60a;
+  --amber-11: #ffca16;
 }
 
 @custom-variant dark (&:where(.dark, .dark *));
@@ -273,7 +283,6 @@ html.dark {
   --color-foreground: var(--amll-foreground);
 
   --color-card: var(--amll-card);
-  --color-card-foreground: var(--amll-card-foreground);
 
   --color-popover: var(--amll-popover);
   --color-popover-foreground: var(--amll-popover-foreground);
@@ -324,22 +333,12 @@ html {
      深色时由 atoms/theme 写内联 color-scheme + 下方 html.dark 兜底 */
   color-scheme: light;
 }
-
-/*
- * 歌词/编辑器共用的 Radix accent 覆写
- *
- * ⚠️ 与 `components/review/editor-theme.css` 是**同一组变量**，
- * 工作台 CSS 类覆写了这里的浅色档（那边的 a3/a4/a8 是半透明红）。
- * 这里的值是**兜底默认值**，改配色时两处要一起改。
- * 名字沿用 Radix 原生 `--accent-*` 梯度语义（1~13 纯色，a1~a13 带alpha）。
- */
 :root {
   /* 行块底色（低 alpha！叠三四行仍需透光） */
   --accent-a3: rgb(224 48 63 / 0.16);
   --accent-a8: rgb(178 20 36 / 0.72);
   --accent-a11: rgb(255 255 255 / 0.45);
   --accent-a12: rgb(255 255 255 / 0.6);
-  --accent-a13: rgb(255 255 255 / 0.75);
 
   /* 选中的词：整词加底色 */
   --accent-a4: var(--color-primary);
@@ -363,18 +362,102 @@ html {
   --gray-12: rgb(29 29 31);
   --gray-a3: rgb(29 29 31 / 0.13);
   --gray-a4: rgb(29 29 31 / 0.26);
+  /* 间距刻度：1 单位 = 4px */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
 
   /* 圆角 */
   --radius-1: 4px;
   --radius-2: 6px;
+  --radius-3: 8px;
+  --radius-4: 12px;
+  --radius-full: 9999px;
+
+  /* 等宽字体 */
+  --default-font-family-mono: var(--amll-font-mono);
+
+  /* 面板底色（侧栏 / 编辑区背景） */
+  --color-panel: var(--amll-surface);
+  --color-bg-1: var(--amll-background);
+
+  /* ── 中性灰阶（Radix gray，浅色） ── */
+  --gray-7: #8d8d99;
+  --gray-9: #6a6a74;
+  --gray-10: #5a5a63;
+  --gray-a1: rgb(29 29 31 / 0.02);
+  --gray-a2: rgb(29 29 31 / 0.06);
+  --gray-a5: rgb(29 29 31 / 0.36);
+  --gray-a6: rgb(29 29 31 / 0.5);
+  --gray-a7: rgb(29 29 31 / 0.62);
+
+  /* 字号刻度（Radix Theme 的 --font-size-*，仅保留遗留 CSS Module 实际引用的档位） */
+  --font-size-2: 14px;
+  --font-size-4: 18px;
+  --font-size-5: 24px;
+
+  /* ── 白/黑透明梯（用于深色底上的文字） ── */
+  --white-3: rgb(255 255 255 / 0.18);
+  --white-a6: rgb(255 255 255 / 0.5);
+  --white-a10: rgb(255 255 255 / 0.78);
+  --white-a12: rgb(255 255 255 / 0.95);
+
+  /* ── 红（Radix red，用于错误 / 结束时间） ── */
+  --red-9: #e5484d;
+  --red-11: #ce2c31;
+  --red-a2: rgb(229 72 77 / 0.08);
+  --red-a3: rgb(229 72 77 / 0.16);
+  --red-a4: rgb(229 72 77 / 0.26);
+  --red-a5: rgb(229 72 77 / 0.34);
+  --red-a8: rgb(229 72 77 / 0.7);
+  --red-a10: rgb(229 72 77 / 0.88);
+
+  /* ── 绿（Radix green，用于成功 / 起始时间） ── */
+  --green-8: #2f9e63;
+  --green-9: #30a46c;
+  --green-11: #218358;
+  --green-12: #193b2d;
+  --green-a3: rgb(48 164 108 / 0.16);
+  --green-a4: rgb(48 164 108 / 0.26);
+  --green-a5: rgb(48 164 108 / 0.34);
+  --green-a6: rgb(48 164 108 / 0.44);
+  --green-a8: rgb(48 164 108 / 0.7);
+  --green-a11: rgb(48 164 108 / 0.82);
+
+  /* ── 蓝（Radix blue，用于选中 / 信息） ── */
+  --blue-9: #0090ff;
+  --blue-a2: rgb(0 144 255 / 0.08);
+  --blue-a3: rgb(0 144 255 / 0.16);
+  --blue-a4: rgb(0 144 255 / 0.24);
+  --blue-a5: rgb(0 144 255 / 0.32);
+  --blue-a6: rgb(0 144 255 / 0.42);
+  --blue-a7: rgb(0 144 255 / 0.54);
+  --blue-a9: rgb(0 144 255 / 0.9);
+  --blue-a10: rgb(0 144 255 / 0.9);
+  --blue-a11: rgb(0 144 255 / 0.82);
+
+  /* ── 橙（Radix orange，用于警告 / agent 提示） ── */
+  --orange-a2: rgb(247 107 21 / 0.08);
+  --orange-a3: rgb(247 107 21 / 0.16);
+  --orange-a4: rgb(247 107 21 / 0.24);
+  --orange-a5: rgb(247 107 21 / 0.32);
+  --orange-a10: rgb(247 107 21 / 0.9);
+  --orange-a11: rgb(247 107 21 / 0.82);
+
+  /* ── 琥珀（Radix amber，用于待确认状态） ── */
+  --amber-9: #ffc53d;
+  --amber-10: #ffba18;
+  --amber-11: #ab6400;
 }
 
 /* 主题切换过渡 */
 html.theme-transitioning {
   transition-property:
-    --amll-background, --amll-foreground, --amll-card, --amll-card-foreground, --amll-popover,
-    --amll-popover-foreground, --amll-primary, --amll-primary-hover, --amll-primary-foreground,
-    --amll-muted, --amll-muted-foreground, --amll-border, --amll-input, --amll-ring, --amll-surface,
+    --amll-background, --amll-foreground, --amll-card, --amll-popover, --amll-popover-foreground,
+    --amll-primary, --amll-primary-hover, --amll-primary-foreground, --amll-muted,
+    --amll-muted-foreground, --amll-border, --amll-input, --amll-ring, --amll-surface,
     --amll-surface-2, --amll-ink, --amll-ink-2, --amll-ink-3, --amll-line, --amll-primary-soft,
     --amll-primary-tint, --amll-header-bg, --amll-header-bg-scrolled, --amll-state-success,
     --amll-state-warning, --amll-state-error, --amll-state-info;
@@ -389,12 +472,6 @@ html.theme-transitioning *::after {
 html.dark {
   color-scheme: dark;
 }
-/* 深色下日历/时钟指示器反向提亮 */
-html.dark input[type='date']::-webkit-calendar-picker-indicator,
-html.dark input[type='time']::-webkit-calendar-picker-indicator,
-html.dark input[type='datetime-local']::-webkit-calendar-picker-indicator {
-  filter: invert(0.85);
-}
 html body[data-scroll-locked] {
   padding-right: 0 !important;
   margin-right: 0 !important;
@@ -423,21 +500,6 @@ select option:focus {
   color: var(--amll-primary);
 }
 
-/* date / time / datetime-local 输入框：让日历/时钟图标可见 */
-input[type='date']::-webkit-calendar-picker-indicator,
-input[type='time']::-webkit-calendar-picker-indicator,
-input[type='datetime-local']::-webkit-calendar-picker-indicator {
-  cursor: pointer;
-  filter: invert(0.5);
-  opacity: 0.7;
-}
-
-input[type='date']::-webkit-calendar-picker-indicator:hover,
-input[type='time']::-webkit-calendar-picker-indicator:hover,
-input[type='datetime-local']::-webkit-calendar-picker-indicator:hover {
-  opacity: 1;
-}
-
 /* 骨架屏 shimmer */
 @keyframes amll-shimmer {
   100% {
@@ -788,31 +850,3 @@ html.dark .amll-skeleton::after {
   scrollbar-width: thin;
   scrollbar-color: rgb(128 128 128 / 0.35) transparent;
 }
-
-.lyric-words-track {
-  /* 横向保留可见细条；纵向由组件的 overflow-y-hidden 处理 */
-  scrollbar-width: thin;
-  scrollbar-color: rgb(128 128 128 / 0.4) transparent;
-}
-.lyric-words-track::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  background: transparent;
-  border-top: solid 1px var(--color-border);
-}
-.lyric-words-track::-webkit-scrollbar-track {
-  background: transparent;
-}
-.lyric-words-track::-webkit-scrollbar-thumb {
-  border: solid 3px transparent;
-  border-radius: 8px;
-  background-color: rgb(128 128 128 / 0.45);
-  background-clip: content-box;
-  box-shadow: none;
-}
-.lyric-words-track::-webkit-scrollbar-thumb:hover {
-  background-color: rgb(128 128 128 / 0.7);
-}
-.lyric-words-track::-webkit-scrollbar-corner {
-  background: transparent;
-}
diff --git a/frontend/src/lib/__tests__/editor-audio-sources.test.ts b/frontend/src/lib/__tests__/editor-audio-sources.test.ts
new file mode 100644
index 0000000..3bcda55
--- /dev/null
+++ b/frontend/src/lib/__tests__/editor-audio-sources.test.ts
@@ -0,0 +1,98 @@
+import { describe, expect, it } from 'vitest';
+import { buildAudioUrl, buildEditorAudioSources } from '@/lib/review/audio-sources';
+import type { SubmissionAudio } from '@/lib/types';
+
+function audio(partial: Partial<SubmissionAudio>): SubmissionAudio {
+  return {
+    id: 1,
+    submissionId: 35,
+    fileName: 'music/35-1.mp3',
+    title: '',
+    artist: '',
+    album: '',
+    platform: '',
+    platformId: '',
+    uploadedBy: 'u',
+    uploadedAt: '2026-01-01T00:00:00Z',
+    ...partial,
+  };
+}
+
+const NCM = { url: 'https://ncm.example/song.mp3', name: '某首歌' };
+
+describe('buildAudioUrl', () => {
+  it('拼出与详情页一致的播放地址', () => {
+    expect(buildAudioUrl({ fileName: 'music/35-1.mp3' }, '')).toBe(
+      '/api/v1/uploads/file/music/35-1.mp3'
+    );
+  });
+
+  it('带 apiBase 时使用绝对地址', () => {
+    expect(buildAudioUrl({ fileName: 'music/35-1.mp3' }, 'http://localhost:8080')).toBe(
+      'http://localhost:8080/api/v1/uploads/file/music/35-1.mp3'
+    );
+  });
+
+  it('缺 fileName 返回空串', () => {
+    expect(buildAudioUrl({}, '')).toBe('');
+  });
+});
+
+describe('buildEditorAudioSources', () => {
+  it('只有上传音频时，列表只有一条', () => {
+    const list = buildEditorAudioSources([audio({})], '', null, '');
+    expect(list).toHaveLength(1);
+    expect(list[0]!.key).toBe('music/35-1.mp3');
+  });
+
+  it('只有网易云时，列表只有网易云那条', () => {
+    const list = buildEditorAudioSources([], '1791651504365', NCM, '');
+    expect(list).toHaveLength(1);
+    expect(list[0]!.key).toBe('ncm:1791651504365');
+    expect(list[0]!.src).toBe(NCM.url);
+    expect(list[0]!.label).toContain('网易云');
+  });
+
+  it('同时有上传音频与网易云时，两条都要在（上传在前）', () => {
+    const list = buildEditorAudioSources([audio({})], '1791651504365', NCM, '');
+    expect(list).toHaveLength(2);
+    expect(list[0]!.key).toBe('music/35-1.mp3');
+    expect(list[1]!.key).toBe('ncm:1791651504365');
+  });
+
+  it('多个上传音频按原顺序排在前，网易云固定在最后', () => {
+    const list = buildEditorAudioSources(
+      [audio({ id: 1, fileName: 'music/a.mp3' }), audio({ id: 2, fileName: 'music/b.mp3' })],
+      '123',
+      NCM,
+      ''
+    );
+    expect(list.map((s) => s.key)).toEqual(['music/a.mp3', 'music/b.mp3', 'ncm:123']);
+  });
+
+  it('网易云解析失败（无 url）时不加入列表，上传音频仍保留', () => {
+    const list = buildEditorAudioSources([audio({})], '123', { url: '', name: 'x' }, '');
+    expect(list).toHaveLength(1);
+    expect(list[0]!.key).toBe('music/35-1.mp3');
+  });
+
+  it('没有 ncmId 时即使有解析结果也不加网易云', () => {
+    const list = buildEditorAudioSources([audio({})], '', NCM, '');
+    expect(list).toHaveLength(1);
+  });
+
+  it('缺 fileName 的上传音频被过滤掉', () => {
+    const list = buildEditorAudioSources([audio({ fileName: '' })], '', null, '');
+    expect(list).toHaveLength(0);
+  });
+
+  it('label 优先用 title，其次 artist，最后 fileName', () => {
+    expect(buildEditorAudioSources([audio({ title: '歌名' })], '', null, '')[0]!.label).toBe(
+      '歌名'
+    );
+    expect(buildEditorAudioSources([audio({ artist: '歌手' })], '', null, '')[0]!.label).toBe(
+      '歌手'
+    );
+    expect(buildEditorAudioSources([audio({})], '', null, '')[0]!.label).toBe('music/35-1.mp3');
+  });
+});
diff --git a/frontend/src/lib/__tests__/editor-save-bundle-diff.test.ts b/frontend/src/lib/__tests__/editor-save-bundle-diff.test.ts
index 58fdb09..592f20f 100644
--- a/frontend/src/lib/__tests__/editor-save-bundle-diff.test.ts
+++ b/frontend/src/lib/__tests__/editor-save-bundle-diff.test.ts
@@ -193,6 +193,9 @@ describe('审核报告：逐字时轴改动能否被检测到', () => {
  * 背景：审核员在元数据弹窗里改字段是常见操作，而 `buildEditReport` 与
  * `buildReviewReportFromDiffs` 都只看 `lyricLines`，元数据改动在报告里
  * 完全看不见 —— 用户明确要求「元数据等其他数据也要 diff」。
+ *
+ * 产出格式：每个 key 的改动按「增 / 删」拆成独立条目，模板统一为
+ * 「元数据（类型）需要增加/删除内容为 `值` 的数据」。
  */
 describe('审核报告：元数据改动能否被检测到', () => {
   function withMetadata(metadata: Array<{ key: string; value: string[] }>): TTMLLyric {
@@ -205,11 +208,32 @@ describe('审核报告：元数据改动能否被检测到', () => {
 
     const blocks = buildMetadataChanges(freeze, staged);
 
-    expect(blocks).toHaveLength(1);
+    // 改值 = 删旧 + 增新，拆成两条独立动作
+    expect(blocks).toHaveLength(2);
     const rendered = renderReviewReport(createReviewReport(blocks));
     expect(rendered).toContain('标题');
     expect(rendered).toContain('旧标题');
     expect(rendered).toContain('新标题');
+    expect(rendered).toContain('删除');
+    expect(rendered).toContain('增加');
+  });
+
+  it('元数据条目应使用专属格式（类型 + 增删动作 + 内容）', () => {
+    const freeze = withMetadata([{ key: 'title', value: ['歌'] }]);
+    const staged = withMetadata([{ key: 'title', value: ['歌', '新歌'] }]);
+
+    const blocks = buildMetadataChanges(freeze, staged);
+    expect(blocks).toHaveLength(1);
+    expect(blocks[0]).toMatchObject({
+      kind: 'metadata',
+      action: 'add',
+      key: 'title',
+      label: '标题',
+      items: ['新歌'],
+    });
+    expect(renderReviewReport(createReviewReport(blocks))).toContain(
+      '元数据（标题）需要增加内容为 `新歌` 的数据'
+    );
   });
 
   it('新增 / 删除 key 都要能识别', () => {
@@ -221,7 +245,7 @@ describe('审核报告：元数据改动能否被检测到', () => {
 
     const blocks = buildMetadataChanges(freeze, staged);
     expect(blocks).toHaveLength(1);
-    expect(renderReviewReport(createReviewReport(blocks))).toContain('新增');
+    expect(renderReviewReport(createReviewReport(blocks))).toContain('增加');
 
     // 反向：删掉 album
     const removed = buildMetadataChanges(staged, freeze);
diff --git a/frontend/src/lib/review/audio-sources.ts b/frontend/src/lib/review/audio-sources.ts
new file mode 100644
index 0000000..edfcd3c
--- /dev/null
+++ b/frontend/src/lib/review/audio-sources.ts
@@ -0,0 +1,49 @@
+import type { NcmMusicInfo, SubmissionAudio } from '@/lib/types';
+
+/** 编辑器可选的音源：上传音频或网易云解析出的直链 */
+export interface EditorAudioSource {
+  /** 稳定标识：上传音频用 fileName，网易云用 `ncm:<id>` */
+  key: string;
+  /** 可直接用于 fetch / audio 元素的播放地址 */
+  src: string;
+  /** 展示给人看的名称 */
+  label: string;
+}
+
+/** 上传音频的播放地址 */
+export function buildAudioUrl(
+  audio: { fileName?: string },
+  apiBase = import.meta.env.VITE_API_BASE ?? ''
+): string {
+  const key = audio.fileName;
+  if (!key) return '';
+  return `${apiBase}/api/v1/uploads/file/${key}`;
+}
+
+// 组装编辑器的参考音源列表
+export function buildEditorAudioSources(
+  audios: SubmissionAudio[],
+  ncmId: string,
+  ncm: Pick<NcmMusicInfo, 'url' | 'name'> | null,
+  apiBase = import.meta.env.VITE_API_BASE ?? ''
+): EditorAudioSource[] {
+  const list: EditorAudioSource[] = audios
+    .map((a) => ({
+      key: a.fileName || String(a.id ?? ''),
+      src: buildAudioUrl(a, apiBase),
+      label: a.title || a.artist || a.fileName || '音频',
+    }))
+    // 没有可播放地址的条目（缺 fileName）直接丢弃，避免选中后加载必然失败
+    .filter((s) => s.src !== '');
+
+  const ncmUrl = ncm?.url?.trim();
+  if (ncmId && ncmUrl) {
+    list.push({
+      key: `ncm:${ncmId}`,
+      src: ncmUrl,
+      label: ncm?.name ? `网易云 · ${ncm.name}` : `网易云音源（${ncmId}）`,
+    });
+  }
+
+  return list;
+}
diff --git a/frontend/src/pages/LyricEditorPage.tsx b/frontend/src/pages/LyricEditorPage.tsx
index 0f21c2b..6019839 100644
--- a/frontend/src/pages/LyricEditorPage.tsx
+++ b/frontend/src/pages/LyricEditorPage.tsx
@@ -6,7 +6,13 @@ import { ArrowLeft, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
 
 import { audioEngine } from '@/editor/modules/audio/audio-engine';
-import { isDirtyAtom, lyricLinesAtom, ToolMode, toolModeAtom } from '@/editor/states/main.ts';
+import {
+  isDirtyAtom,
+  lyricLinesAtom,
+  markLyricLinesSavedAtom,
+  ToolMode,
+  toolModeAtom,
+} from '@/editor/states/main.ts';
 import { useFileOpener } from '@/editor/hooks/useFileOpener.ts';
 import type { ReviewReport } from '@/editor/modules/review/services/report-service/types';
 import {
@@ -20,6 +26,7 @@ import {
 } from '@/editor/modules/review/states';
 
 import { ReviewReportDialog } from '@/editor/modules/review/modals/ReviewReportDialog';
+import { AudioSourcePicker } from '@/components/review/AudioSourcePicker';
 import { EditorTheme, EditorWorkbench } from '@/components/review/EditorWorkbench';
 import { LyricEditorHeader } from '@/components/review/LyricEditorHeader';
 import { Button } from '@/components/ui/button';
@@ -27,6 +34,7 @@ import { EmptyState } from '@/components/ui/EmptyState';
 import { Skeleton } from '@/components/ui/Skeleton';
 import { api } from '@/lib/api';
 import { queryKeys } from '@/lib/query';
+import { buildEditorAudioSources } from '@/lib/review/audio-sources';
 import { buildEditorSaveBundle } from '@/lib/review/editor-save-bundle';
 import type { ReviewAction } from '@/lib/types';
 
@@ -42,6 +50,7 @@ export function LyricEditorPage() {
   const lyricLines = useAtomValue(lyricLinesAtom);
   const isDirty = useAtomValue(isDirtyAtom);
   const setToolMode = useSetAtom(toolModeAtom);
+  const markLyricLinesSaved = useSetAtom(markLyricLinesSavedAtom);
   const { loadTtmlContent } = useFileOpener();
 
   /** 原稿 TTML，保存时用来生成 diff 报告 */
@@ -58,8 +67,7 @@ export function LyricEditorPage() {
   const audios = useMemo(() => ctx?.audios ?? [], [ctx?.audios]);
   const ncmId = ctx?.ncmId ?? '';
 
-  // 网易云来源的投稿没有上传音频，靠解析接口拿直链当打轴基准
-  const needNcm = audios.length === 0 && !!ncmId;
+  const needNcm = !!ncmId;
   const ncmQuery = useQuery({
     queryKey: queryKeys.ncmMusic(ncmId),
     queryFn: () => api.parseNcmMusic(ncmId),
@@ -67,26 +75,24 @@ export function LyricEditorPage() {
     staleTime: 5 * 60_000,
     retry: false,
   });
-  const ncmSrc = needNcm ? (ncmQuery.data?.url ?? '') : '';
-
-  // 音源列表：上传音频在前，网易云兜底（与详情页播放器一致）
-  const sources = useMemo(() => {
-    const list = audios.map((a) => ({
-      key: a.fileName || String(a.id ?? ''),
-      src: buildAudioUrl(a),
-      label: a.title || a.artist || a.fileName || '音频',
-    }));
-    if (ncmSrc) {
-      list.push({
-        key: `ncm:${ncmId}`,
-        src: ncmSrc,
-        label: ncmQuery.data?.name || `网易云 ${ncmId}`,
-      });
-    }
-    return list;
-  }, [audios, ncmSrc, ncmId, ncmQuery.data?.name]);
 
-  const audioSrc = sources[Math.min(audioIndex, Math.max(0, sources.length - 1))]?.src ?? '';
+  // 音源列表
+  const sources = useMemo(
+    () => buildEditorAudioSources(audios, ncmId, ncmQuery.data ?? null),
+    [audios, ncmId, ncmQuery.data]
+  );
+
+  const safeAudioIndex = Math.min(audioIndex, Math.max(0, sources.length - 1));
+  const audioSrc = sources[safeAudioIndex]?.src ?? '';
+
+  // 音源变化诊断
+  useEffect(() => {
+    console.info('[editor-audio] sources 变化', {
+      audioIndex: safeAudioIndex,
+      audioSrc,
+      sources: sources.map((s) => ({ key: s.key, src: s.src, label: s.label })),
+    });
+  }, [sources, safeAudioIndex, audioSrc]);
 
   // 打开时标记审核中，离开时释放占用
   useEffect(() => {
@@ -115,27 +121,49 @@ export function LyricEditorPage() {
   useEffect(() => {
     if (!audioSrc) return;
     let cancelled = false;
-    void audioEngine.loadMusicFromUrl(audioSrc).catch((err) => {
+    const timer = window.setTimeout(() => {
       if (cancelled) return;
-      /**
-       * 不要直接 `String(err)` —— FFmpeg 链路抛出的可能是
-       * `{ code, message }` 这种普通对象，`String()` 会得到
-       * 字面量 "[object Object]"，把真正的原因吞掉。
-       */
-      const detail =
-        err instanceof Error
-          ? err.message
-          : typeof err === 'string'
-            ? err
-            : typeof err === 'object' && err !== null && 'message' in err
-              ? String((err as { message: unknown }).message)
-              : JSON.stringify(err);
-      toast.error(`参考音频加载失败：${detail}`);
-    });
+      console.info('[editor-audio] 开始加载', { audioSrc, audioIndex: safeAudioIndex });
+      void audioEngine.loadMusicFromUrl(audioSrc).catch((err) => {
+        if (cancelled) return;
+        // 切换音频时被更新的请求取代属于正常流程，不打扰用户
+        const message = err instanceof Error ? err.message : String(err);
+        if (message.includes('已被更新的请求取代')) {
+          console.info('[editor-audio] 本次加载被更新的请求取代，忽略', { audioSrc });
+          return;
+        }
+        console.error('[editor-audio] 加载失败', {
+          audioSrc,
+          audioIndex: safeAudioIndex,
+          error: err,
+        });
+        /**
+         * 不要直接 `String(err)` —— FFmpeg 链路抛出的可能是
+         * `{ code, message }` 这种普通对象，`String()` 会得到
+         * 字面量 "[object Object]"，把真正的原因吞掉。
+         */
+        const detail =
+          err instanceof Error
+            ? err.message
+            : typeof err === 'string'
+              ? err
+              : typeof err === 'object' && err !== null && 'message' in err
+                ? String((err as { message: unknown }).message)
+                : JSON.stringify(err);
+
+        const hint = detail.includes('Failed to fetch')
+          ? '（后端服务可能未启动或网络中断，请确认后端在运行后重试）'
+          : '';
+        toast.error(`参考音频加载失败：${detail}${hint}`);
+      });
+    }, 120);
+
     return () => {
       cancelled = true;
+      window.clearTimeout(timer);
     };
-  }, [audioSrc]);
+    // 依赖收敛后的索引：越界被夹回时也要重新判定，而不是只盯 URL 字符串
+  }, [audioSrc, safeAudioIndex]);
 
   // 离开前提示未保存（编辑期间有 IndexedDB 草稿，但提交才算最终保存）
   useEffect(() => {
@@ -197,6 +225,8 @@ export function LyricEditorPage() {
     onSuccess: (_data, input) => {
       void queryClient.invalidateQueries({ queryKey: queryKeys.submission(submissionId) });
       void queryClient.invalidateQueries({ queryKey: ['submissions'] });
+      // 提交成功后把当前内容记为已保存基线，顶栏不再显示「有未保存改动」
+      markLyricLinesSaved();
       setReviewDialog({ open: false, title: '' });
       toast.success(input.uploadTtml ? '修订版已提交，等待投稿者确认' : '审核结果已提交');
       void api.releaseReview(submissionId, true).catch(() => {});
@@ -289,6 +319,9 @@ export function LyricEditorPage() {
         <div className="relative min-h-0 flex-1">
           <EditorWorkbench />
 
+          {/* 音频源就绪后先让审核员确认/选择参考音频（多个时可选，单个时确认） */}
+          <AudioSourcePicker sources={sources} value={audioIndex} onConfirm={setAudioIndex} />
+
           {effectiveReport && (
             <ReviewReportDialog
               submitting={saveMutation.isPending}
@@ -320,10 +353,3 @@ export function LyricEditorPage() {
     </EditorTheme>
   );
 }
-
-/** 上传音频的播放地址：与详情页 AudioCard 的 fileUrl 保持一致 */
-function buildAudioUrl(audio: { fileName?: string }): string {
-  const key = audio.fileName;
-  if (!key) return '';
-  return `${import.meta.env.VITE_API_BASE ?? ''}/api/v1/uploads/file/${key}`;
-}