diff --git a/src/styles/heroui.css b/src/styles/heroui.css
index 57613f95..7ec36160 100644
--- a/src/styles/heroui.css
+++ b/src/styles/heroui.css
@@ -1,20 +1,20 @@
 /**
- * HeroUI v3 + Tailwind CSS v4 样式配置
- * 文档: https://v3.heroui.com/docs/quick-start
+ * HeroUI + Tailwind CSS v4 配置
+ * 参考文档: https://www.heroui.com/docs/guide/tailwind-v4
  */
 
-/* 1. 导入 Tailwind CSS v4（必须在最前面） */
+/* 1. 导入 Tailwind CSS v4 */
 @import "tailwindcss";
 
-/* 2. 导入 HeroUI v3 样式 */
-@import "@heroui/styles";
+/* 2. 导入 HeroUI 插件（使用 npm 包路径） */
+@import "@heroui/theme";
 
-/**
- * Tailwind v4 内容扫描配置
- * 使用 @source 指令显式指定要扫描的文件路径
- * 路径相对于 CSS 文件所在位置（src/styles/）
- */
+/* 3. 配置内容扫描路径 */
 @source "../**/*.{js,jsx,ts,tsx}";
+@source "../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}";
+
+/* 4. 自定义深色模式变体 */
+@custom-variant dark (&:is(.dark *));
 
 /**
  * 自定义样式