样式修改

src/styles/index.css

@@ -8,6 +8,38 @@
 html, body {
   background: #000;
 }
+.lucid-glass-bar {
+  /* 基础背景：Figma 中通常是叠加的，这里取中值确保通透度 */
+  background: rgb(255 255 255 / 6%);
+
+  /* 核心模糊 */
+  backdrop-filter: blur(36px);
+  -webkit-backdrop-filter: blur(36px);
+
+  /* 圆角：由于你有 border-image，建议使用这种方式保留圆角 */
+  border-radius: 999px;
+
+  /* 边框：Figma 的 border-image 在 CSS 圆角容器上会有兼容问题
+     建议改用单纯的 border 配合 rgba 以达到线性渐变的效果 */
+  border: 1px solid rgba(255, 255, 255, 0.2);
+
+  /* 阴影叠加：按照 Figma 从上到下的顺序转换 */
+  box-shadow:
+    /* 1. 这里的 #F2F2F280 33px 扩散是导致发白的主因，建议将其放在最底层并调低不透明度 */
+    inset 0px 0px 33px 0px rgba(242, 242, 242, 0.15),
+
+      /* 2. 右下角的反向高光 (原本的 -3px -4.5px) */
+    inset -3px -4.5px 1.5px -3px rgba(179, 179, 179, 0.5),
+
+      /* 3. 左上角的微弱亮边 */
+    inset 3px 4.5px 1.5px -3px rgba(179, 179, 179, 0.2),
+
+      /* 4. 核心受光面 (Figma: 4.5px 4.5px #FFFFFF80) */
+    inset 4.5px 4.5px 1.5px -5.25px rgba(255, 255, 255, 0.4),
+
+      /* 5. 核心背光面 (Figma: -4.5px -4.5px #FFFFFF80) */
+    inset -4.5px -4.5px 1.5px -5.25px rgba(255, 255, 255, 0.3);
+}
 
 @import "tailwindcss";
 @import "tw-animate-css";