feat: 收口组件样式并调整移动端侧栏

src/features/storyboard/components/BeatShotDirectory.vue

@@ -55,3 +55,35 @@ const groups = computed(() => {
         </div>
     </div>
 </template>
+
+<style>
+/* 本组件专属布局与 Naive 内部结构覆盖。 */
+@reference "../../../styles/styles.css";
+.directory-group-heading {
+    @apply sticky top-0 z-[1] flex items-center justify-between gap-3 shrink-0 py-2.5 px-3.5 bg-(--app-control) font-mono font-semibold text-[11px] leading-[1.6] text-ink;
+}
+.directory-group-count {
+    @apply font-normal text-muted;
+}
+.beat-directory-group {
+    @apply min-w-0;
+}
+.beat-directory-items {
+    @apply flex flex-col;
+}
+.directory-mobile-beat {
+    @apply hidden;
+}
+@media (max-width: 760px) {
+    .directory-group-heading {
+        @apply hidden;
+    }
+    .beat-directory-group,
+    .beat-directory-items {
+        display: contents;
+    }
+    .directory-mobile-beat {
+        display: inline;
+    }
+}
+</style>

src/features/storyboard/components/ShotTools.vue

@@ -214,3 +214,20 @@ function exportResult(kind: 'spec' | 'prompt') {
         </section>
     </div>
 </template>
+
+<style>
+/* 本组件专属布局与 Naive 内部结构覆盖。 */
+@reference "../../../styles/styles.css";
+.alert {
+    @apply py-3 px-[15px] rounded-none bg-(--app-subtle) text-ink text-xs leading-[1.8] wrap-anywhere;
+}
+.reference-grid {
+    @apply grid grid-cols-[repeat(auto-fill,_minmax(150px,_1fr))] gap-3.5;
+}
+.reference-card {
+    @apply bg-(--app-subtle) rounded-none overflow-hidden;
+}
+.storyboard-json {
+    @apply p-4 rounded-none bg-(--app-subtle) font-mono text-[11px] leading-[1.9];
+}
+</style>