style(ui): 添加梦幻视觉效果和优化话题卡片样式

- 新增梦幻发光效果变量和动画实现
- 为主题背景添加浮动光晕装饰元素
- 重构话题卡片渐变背景和交互效果
- 实现卡片悬停时的平滑变换动画
- 添加响应式设计和可访问性支持
- 优化主题样式层级和渲染性能

scss/main.scss

@@ -2,6 +2,9 @@
 
 :root {
   --main-grid-gap: 0.5em;
+  --dream-glow-a: oklch(from var(--accent-color) calc(l * 1.08) calc(c * 0.45) h / 0.18);
+  --dream-glow-b: oklch(from var(--accent-color) calc(l * 1.2) calc(c * 0.35) calc(h + 26deg) / 0.14);
+  --dream-glow-c: oklch(from var(--accent-color) calc(l * 0.95) calc(c * 0.4) calc(h - 20deg) / 0.12);
 }
 
 html:not(:has(.has-full-page-chat)) {
@@ -14,12 +17,72 @@ html:not(:has(.has-full-page-chat)) {
 
 body {
   -webkit-font-smoothing: antialiased;
+  position: relative;
 
   @include viewport.until(sm) {
     background-color: var(--d-content-background);
   }
 }
 
+body:not(.has-full-page-chat, .wizard)::before,
+body:not(.has-full-page-chat, .wizard)::after {
+  content: "";
+  position: fixed;
+  width: min(42vw, 32rem);
+  aspect-ratio: 1 / 1;
+  border-radius: 999px;
+  filter: blur(48px);
+  pointer-events: none;
+  z-index: 0;
+}
+
+body:not(.has-full-page-chat, .wizard)::before {
+  top: 5rem;
+  left: -8rem;
+  background: radial-gradient(circle at 30% 30%, var(--dream-glow-a), transparent 65%);
+  animation: dreamy-float-a 18s ease-in-out infinite alternate;
+}
+
+body:not(.has-full-page-chat, .wizard)::after {
+  right: -6rem;
+  bottom: 2rem;
+  background: radial-gradient(circle at 65% 35%, var(--dream-glow-b), transparent 62%);
+  animation: dreamy-float-b 22s ease-in-out infinite alternate;
+}
+
+.d-header-wrap,
+#main-outlet-wrapper,
+.sidebar-wrapper,
+.sidebar-hamburger-dropdown {
+  position: relative;
+  z-index: 1;
+}
+
+@keyframes dreamy-float-a {
+  from {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    transform: translate3d(3rem, -1.5rem, 0) scale(1.08);
+  }
+}
+
+@keyframes dreamy-float-b {
+  from {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    transform: translate3d(-2.5rem, 2rem, 0) scale(1.1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  body:not(.has-full-page-chat, .wizard)::before,
+  body:not(.has-full-page-chat, .wizard)::after {
+    animation: none;
+  }
+}
+
 #main-outlet-wrapper {
   gap: var(--main-grid-gap);
 }