feat: implement storyforge mobile v4 shell

2026-03-22 10:39:53 +08:00
parent 35c97ffe4d
commit fe07a5f212
8 changed files with 3396 additions and 325 deletions
--- a/README.md
+++ b/README.md
@@ -17,6 +17,7 @@ StoryForge 现在拆成独立项目目录，和 `AI-glasses` 分开维护。
 - [新媒体运营中台产品逻辑手册](./docs/PRODUCT_LOGIC_NEW_MEDIA_OPERATING_SYSTEM_2026-03-22.md)
 - [新媒体运营平台 UI 参考包](./output/ui/new-media-ops-reference-2026-03-22/README.md)
 - [Web V4 UI 原型](./output/ui/storyforge-web-v4-html-prototype-2026-03-22/README.md)
+- [Web V4 前端骨架](./web/storyforge-web-v4/README.md)
 - [Mobile V4 UI 原型](./output/ui/storyforge-mobile-v4-html-prototype-2026-03-22/README.md)

 ## Android
--- a/android-app/app/src/main/java/com/aiglasses/app/storyforge/StoryForgeScreen.kt
+++ b/android-app/app/src/main/java/com/aiglasses/app/storyforge/StoryForgeScreen.kt
--- a/android-app/app/src/main/java/com/aiglasses/app/storyforge/StoryForgeViewModel.kt
+++ b/android-app/app/src/main/java/com/aiglasses/app/storyforge/StoryForgeViewModel.kt
@@ -15,7 +15,9 @@ import kotlinx.coroutines.launch
 import retrofit2.HttpException

 enum class StoryForgeTab {
-    Explore,
+    Overview,
+    Benchmark,
+    Agent,
    Production,
    Mine
 }
@@ -53,7 +55,7 @@ data class StoryForgeUiState(
    val originalHost: String = "",
    val isAuthenticated: Boolean = false,
    val isApproved: Boolean = false,
-    val currentTab: StoryForgeTab = StoryForgeTab.Explore,
+    val currentTab: StoryForgeTab = StoryForgeTab.Overview,
    val busy: Boolean = false,
    val generateBusy: Boolean = false,
    val statusMessage: String = "准备连接 StoryForge",
@@ -847,7 +849,7 @@ class StoryForgeViewModel(application: Application) : AndroidViewModel(applicati
        _state.value = state.value.copy(
            latestJob = job,
            latestJobId = job.id,
-            currentTab = StoryForgeTab.Explore
+            currentTab = StoryForgeTab.Benchmark
        )
        refreshWorkspace()
        startJobPolling(job.id)
--- a/android-app/app/src/main/java/com/aiglasses/app/ui/theme/AppTheme.kt
+++ b/android-app/app/src/main/java/com/aiglasses/app/ui/theme/AppTheme.kt
@@ -13,51 +13,82 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp

 private val LightColors = lightColorScheme(
-    primary = Color(0xFF0E4B43),
-    secondary = Color(0xFF9C6427),
-    tertiary = Color(0xFF2A5B8A),
-    background = Color(0xFFF7F3EC),
-    surface = Color(0xFFFFFCF8),
+    primary = Color(0xFF4E89F5),
+    secondary = Color(0xFF87AEEB),
+    tertiary = Color(0xFF17283A),
+    background = Color(0xFFF2F7FF),
+    surface = Color(0xFFFFFFFF),
+    surfaceVariant = Color(0xFFEAF2FF),
    onPrimary = Color.White,
    onSecondary = Color.White,
-    onBackground = Color(0xFF1A1713),
-    onSurface = Color(0xFF1A1713)
+    onBackground = Color(0xFF152332),
+    onSurface = Color(0xFF152332),
+    outline = Color(0xFFC9D8EA)
 )

 private val DarkColors = darkColorScheme(
-    primary = Color(0xFF7FD6C7),
-    secondary = Color(0xFFFFC27A),
-    tertiary = Color(0xFF98C7FF),
-    background = Color(0xFF101714),
-    surface = Color(0xFF18211D),
-    onPrimary = Color(0xFF062D29),
-    onSecondary = Color(0xFF4B2B00),
-    onBackground = Color(0xFFF0E8DB),
-    onSurface = Color(0xFFF0E8DB)
+    primary = Color(0xFF8CB7FF),
+    secondary = Color(0xFF7EA5DE),
+    tertiary = Color(0xFFE6EEF9),
+    background = Color(0xFF101823),
+    surface = Color(0xFF162131),
+    surfaceVariant = Color(0xFF1D2B3D),
+    onPrimary = Color(0xFF0C1B30),
+    onSecondary = Color(0xFF0C1B30),
+    onBackground = Color(0xFFEAF1FB),
+    onSurface = Color(0xFFEAF1FB),
+    outline = Color(0xFF35506F)
 )

 private val AppTypography = Typography(
    headlineLarge = TextStyle(
-        fontFamily = FontFamily.Serif,
+        fontFamily = FontFamily.SansSerif,
        fontWeight = FontWeight.Bold,
-        fontSize = 34.sp,
-        lineHeight = 40.sp
+        fontSize = 30.sp,
+        lineHeight = 36.sp
+    ),
+    headlineMedium = TextStyle(
+        fontFamily = FontFamily.SansSerif,
+        fontWeight = FontWeight.Bold,
+        fontSize = 26.sp,
+        lineHeight = 32.sp
    ),
    headlineSmall = TextStyle(
-        fontFamily = FontFamily.Serif,
+        fontFamily = FontFamily.SansSerif,
        fontWeight = FontWeight.SemiBold,
        fontSize = 22.sp,
        lineHeight = 28.sp
    ),
+    titleLarge = TextStyle(
+        fontFamily = FontFamily.SansSerif,
+        fontWeight = FontWeight.Bold,
+        fontSize = 20.sp,
+        lineHeight = 26.sp
+    ),
    bodyLarge = TextStyle(
        fontFamily = FontFamily.SansSerif,
        fontSize = 16.sp,
        lineHeight = 24.sp
    ),
+    bodyMedium = TextStyle(
+        fontFamily = FontFamily.SansSerif,
+        fontSize = 14.sp,
+        lineHeight = 21.sp
+    ),
+    bodySmall = TextStyle(
+        fontFamily = FontFamily.SansSerif,
+        fontSize = 12.sp,
+        lineHeight = 18.sp
+    ),
    labelLarge = TextStyle(
        fontFamily = FontFamily.SansSerif,
        fontWeight = FontWeight.Medium,
        fontSize = 14.sp
+    ),
+    labelSmall = TextStyle(
+        fontFamily = FontFamily.SansSerif,
+        fontWeight = FontWeight.Medium,
+        fontSize = 11.sp
    )
 )

--- a/web/storyforge-web-v4/README.md
+++ b/web/storyforge-web-v4/README.md
@@ -0,0 +1,30 @@
+# StoryForge Web V4
+
+这是 `StoryForge` 当前面向正式前端实现的 Web 承载目录。
+
+## 入口
+
+- 页面：`index.html`
+- 样式：`assets/styles.css`
+- 页面交互：`assets/app.js`
+
+## 当前定位
+
+- 这不是最终生产版，而是从 `Web V4` 高保真原型提升出来的真实前端骨架
+- 目录已经从 `output/ui/` 原型区独立出来，后续应直接在这里继续接真实接口
+- 当前保留的核心页面结构：
+  - 项目总台
+  - 我的项目
+  - 找对标
+  - 跟踪账号
+  - 自动流程
+  - Agent
+  - 生产中心
+  - 发布与复盘
+  - 额度
+
+## 后续建议
+
+- 先补前端服务层，再接业务接口
+- 不要把这套页面重新塞回 `scripts/douyin-browser-capture/control_panel.mjs`
+- 抖音采集控制台仍作为独立工具存在，这里才是正式业务应用壳
--- a/web/storyforge-web-v4/assets/app.js
+++ b/web/storyforge-web-v4/assets/app.js
@@ -0,0 +1,24 @@
+const navButtons = document.querySelectorAll("[data-screen-target]");
+const screens = document.querySelectorAll("[data-screen]");
+
+function activateScreen(id) {
+  navButtons.forEach((button) => {
+    const active = button.dataset.screenTarget === id;
+    button.classList.toggle("is-active", active);
+  });
+
+  screens.forEach((screen) => {
+    screen.classList.toggle("is-active", screen.dataset.screen === id);
+  });
+}
+
+navButtons.forEach((button) => {
+  button.addEventListener("click", () => {
+    const next = button.dataset.screenTarget;
+    activateScreen(next);
+    window.location.hash = next;
+  });
+});
+
+const initial = window.location.hash.replace("#", "") || "dashboard";
+activateScreen(initial);
--- a/web/storyforge-web-v4/assets/styles.css
+++ b/web/storyforge-web-v4/assets/styles.css
@@ -0,0 +1,865 @@
+:root {
+  --bg: #f4f8fd;
+  --bg-soft: #eef4fb;
+  --panel: #ffffff;
+  --panel-soft: #f7fbff;
+  --line: #d9e5f2;
+  --line-strong: #c8d8ea;
+  --text: #182433;
+  --muted: #66788f;
+  --blue-50: #f3f8ff;
+  --blue-100: #e8f1ff;
+  --blue-200: #d9e8ff;
+  --blue-300: #c4ddff;
+  --blue-500: #6aa4ff;
+  --blue-600: #4f8fee;
+  --blue-700: #3977d8;
+  --green: #2db584;
+  --orange: #f29a38;
+  --red: #e46767;
+  --shadow: 0 18px 40px rgba(67, 93, 125, 0.12);
+  --shadow-soft: 0 10px 24px rgba(67, 93, 125, 0.08);
+  --radius-xl: 24px;
+  --radius-lg: 18px;
+  --radius-md: 14px;
+  --radius-sm: 10px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  background:
+    radial-gradient(circle at top left, rgba(129, 180, 255, 0.18), transparent 28%),
+    linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
+  color: var(--text);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+select {
+  font: inherit;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-columns: 272px minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.sidebar {
+  background: rgba(255, 255, 255, 0.82);
+  border-right: 1px solid rgba(201, 220, 239, 0.75);
+  backdrop-filter: blur(14px);
+  padding: 22px 18px 18px;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 10px 20px;
+}
+
+.brand-mark {
+  width: 42px;
+  height: 42px;
+  border-radius: 14px;
+  background: linear-gradient(145deg, #b9d7ff 0%, #6ea8ff 100%);
+  display: grid;
+  place-items: center;
+  color: white;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.brand h1 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.brand p {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.nav-group {
+  margin-top: 14px;
+}
+
+.nav-title {
+  padding: 0 10px 8px;
+  color: var(--muted);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  border: none;
+  background: transparent;
+  border-radius: 14px;
+  padding: 11px 12px;
+  color: var(--text);
+  cursor: pointer;
+  text-align: left;
+  transition: 0.18s ease;
+}
+
+.nav-item:hover {
+  background: rgba(106, 164, 255, 0.08);
+}
+
+.nav-item.is-active {
+  background: linear-gradient(180deg, #edf5ff 0%, #e6f0ff 100%);
+  box-shadow: inset 0 0 0 1px rgba(106, 164, 255, 0.22);
+  color: var(--blue-700);
+}
+
+.nav-item .icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 10px;
+  background: var(--blue-50);
+  display: grid;
+  place-items: center;
+  font-size: 14px;
+}
+
+.sidebar-foot {
+  margin-top: 22px;
+  padding: 14px;
+  border-radius: 18px;
+  background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
+  border: 1px solid var(--line);
+}
+
+.sidebar-foot h3 {
+  margin: 0 0 8px;
+  font-size: 14px;
+}
+
+.sidebar-foot p {
+  margin: 0 0 10px;
+  color: var(--muted);
+  line-height: 1.55;
+  font-size: 12px;
+}
+
+.chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.chip {
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: var(--blue-50);
+  border: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.chip.active {
+  background: var(--blue-100);
+  color: var(--blue-700);
+  border-color: rgba(79, 143, 238, 0.22);
+}
+
+.content {
+  padding: 18px 22px 26px;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 16px 18px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.82);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(201, 220, 239, 0.75);
+  box-shadow: var(--shadow-soft);
+}
+
+.topbar-left,
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.workspace-switch,
+.search,
+.mini-card {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+}
+
+.workspace-switch {
+  padding: 10px 14px;
+  min-width: 190px;
+}
+
+.workspace-switch strong {
+  display: block;
+  font-size: 13px;
+}
+
+.workspace-switch span {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.search {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 340px;
+  padding: 12px 14px;
+  color: var(--muted);
+}
+
+.search input {
+  border: none;
+  outline: none;
+  background: transparent;
+  width: 100%;
+  color: var(--text);
+}
+
+.top-pill {
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: var(--blue-50);
+  color: var(--muted);
+  border: 1px solid var(--line);
+  font-size: 12px;
+}
+
+.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+  background: linear-gradient(145deg, #bedcff 0%, #82b8ff 100%);
+  display: grid;
+  place-items: center;
+  font-size: 13px;
+  color: white;
+  font-weight: 700;
+}
+
+.screen {
+  display: none;
+  margin-top: 18px;
+}
+
+.screen.is-active {
+  display: block;
+}
+
+.screen-head {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 18px;
+}
+
+.screen-head h2 {
+  margin: 0 0 6px;
+  font-size: 28px;
+}
+
+.screen-head p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.45;
+  max-width: 560px;
+}
+
+.action-row {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.btn {
+  border: none;
+  border-radius: 12px;
+  padding: 10px 13px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  transition: 0.18s ease;
+}
+
+.btn-primary {
+  background: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-600) 100%);
+  color: white;
+  box-shadow: 0 8px 18px rgba(79, 143, 238, 0.22);
+}
+
+.btn-secondary {
+  background: white;
+  color: var(--text);
+  border: 1px solid var(--line);
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+}
+
+.layout-grid {
+  display: grid;
+  gap: 18px;
+}
+
+.grid-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.grid-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.grid-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.grid-main {
+  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
+}
+
+.grid-split {
+  grid-template-columns: 280px minmax(0, 1fr) 310px;
+}
+
+.panel {
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(201, 220, 239, 0.9);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-soft);
+  overflow: hidden;
+}
+
+.panel.pad {
+  padding: 17px;
+}
+
+.panel h3,
+.panel h4 {
+  margin: 0;
+}
+
+.panel-subtitle {
+  margin-top: 6px;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.stat-card {
+  padding: 18px;
+  border-radius: 20px;
+  background: linear-gradient(180deg, #fbfdff 0%, #f3f8ff 100%);
+  border: 1px solid rgba(201, 220, 239, 0.9);
+  box-shadow: var(--shadow);
+}
+
+.stat-card small {
+  color: var(--muted);
+}
+
+.stat-card strong {
+  display: block;
+  margin-top: 10px;
+  font-size: 28px;
+}
+
+.stat-foot {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.positive { color: var(--green); }
+.warn { color: var(--orange); }
+.negative { color: var(--red); }
+
+.list {
+  display: grid;
+  gap: 10px;
+}
+
+.task-item,
+.entity-card,
+.topic-card,
+.review-card,
+.queue-card {
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, #fff 0%, #f9fbff 100%);
+}
+
+.task-item,
+.queue-card,
+.review-card {
+  padding: 15px;
+}
+
+.task-item h4,
+.entity-card h4,
+.topic-card h4,
+.queue-card h4,
+.review-card h4 {
+  margin: 0 0 6px;
+  font-size: 15px;
+}
+
+.task-item p,
+.entity-card p,
+.topic-card p,
+.queue-card p,
+.review-card p {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.4;
+  font-size: 11px;
+}
+
+.task-meta,
+.entity-meta,
+.row-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  margin-top: 10px;
+}
+
+.tag {
+  padding: 5px 9px;
+  border-radius: 999px;
+  background: #f6f9fe;
+  border: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.1;
+}
+
+.row-meta .tag {
+  background: var(--blue-50);
+  border-color: rgba(106, 164, 255, 0.18);
+  color: var(--blue-700);
+  font-weight: 600;
+}
+
+.tag.blue {
+  background: var(--blue-100);
+  color: var(--blue-700);
+}
+
+.tag.green {
+  background: rgba(45, 181, 132, 0.1);
+  border-color: rgba(45, 181, 132, 0.18);
+  color: #1b8b61;
+}
+
+.tag.orange {
+  background: rgba(242, 154, 56, 0.1);
+  border-color: rgba(242, 154, 56, 0.18);
+  color: #b76d16;
+}
+
+.tag.red {
+  background: rgba(228, 103, 103, 0.1);
+  border-color: rgba(228, 103, 103, 0.18);
+  color: #b24c4c;
+}
+
+.two-col {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 16px;
+}
+
+.three-col {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.table-wrap {
+  overflow: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 920px;
+}
+
+th,
+td {
+  padding: 12px 12px;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+  vertical-align: top;
+}
+
+thead th {
+  background: #f8fbff;
+  color: var(--muted);
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 0.02em;
+}
+
+tbody tr:hover {
+  background: rgba(106, 164, 255, 0.055);
+}
+
+.entity-cell {
+  display: flex;
+  gap: 12px;
+  align-items: start;
+}
+
+.avatar-lg {
+  width: 46px;
+  height: 46px;
+  border-radius: 15px;
+  background: linear-gradient(145deg, #c9e2ff 0%, #8bbcff 100%);
+  display: grid;
+  place-items: center;
+  color: white;
+  font-weight: 700;
+}
+
+.cell-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.cell-desc {
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.5;
+}
+
+.kpi-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.metric {
+  font-weight: 600;
+  color: var(--text);
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 16px;
+  border-bottom: 1px solid var(--line);
+  background: linear-gradient(180deg, #fbfdff 0%, #f4f9ff 100%);
+}
+
+.toolbar-stack {
+  display: grid;
+  gap: 10px;
+  min-width: min(760px, 100%);
+}
+
+.search-inline {
+  min-width: 320px;
+  width: min(720px, 100%);
+  padding: 10px 12px;
+}
+
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.filter {
+  min-width: 132px;
+  padding: 10px 11px;
+  border-radius: 12px;
+  border: 1px solid var(--line);
+  background: white;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.panel-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 12px;
+}
+
+.side-stack {
+  display: grid;
+  gap: 16px;
+}
+
+.insight-card {
+  padding: 15px;
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, #fff 0%, #f6faff 100%);
+}
+
+.insight-card h4 {
+  margin: 0 0 8px;
+  font-size: 15px;
+}
+
+.insight-card ul {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--muted);
+  line-height: 1.5;
+  font-size: 11px;
+}
+
+.tab-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin: 16px 0 18px;
+}
+
+.tab {
+  padding: 8px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: #fff;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.tab.active {
+  background: var(--blue-100);
+  color: var(--blue-700);
+  border-color: rgba(79, 143, 238, 0.2);
+}
+
+.hero-card {
+  padding: 20px;
+  border-radius: 24px;
+  background: linear-gradient(145deg, rgba(212, 230, 255, 0.85) 0%, rgba(245, 250, 255, 0.96) 72%);
+  border: 1px solid rgba(180, 210, 248, 0.85);
+  box-shadow: var(--shadow-soft);
+}
+
+.hero-card h3 {
+  margin: 0 0 8px;
+  font-size: 18px;
+}
+
+.hero-card p {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.45;
+  font-size: 13px;
+}
+
+.mini-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.mini-card {
+  padding: 14px;
+}
+
+.mini-card strong {
+  display: block;
+  margin-top: 8px;
+  font-size: 17px;
+}
+
+.playbook-list {
+  display: grid;
+  gap: 12px;
+}
+
+.playbook-item {
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
+}
+
+.playbook-item.active {
+  border-color: rgba(79, 143, 238, 0.24);
+  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
+}
+
+.timeline {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.step {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: #fff;
+  border: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.step.done {
+  color: #167657;
+  border-color: rgba(45, 181, 132, 0.18);
+  background: rgba(45, 181, 132, 0.08);
+}
+
+.step.current {
+  color: var(--blue-700);
+  border-color: rgba(79, 143, 238, 0.2);
+  background: var(--blue-100);
+}
+
+.bar-chart {
+  display: grid;
+  gap: 10px;
+}
+
+.bar-row {
+  display: grid;
+  grid-template-columns: 108px minmax(0, 1fr) 48px;
+  gap: 10px;
+  align-items: center;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.bar-track {
+  height: 10px;
+  border-radius: 999px;
+  background: #eef3f8;
+  overflow: hidden;
+}
+
+.bar-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #93c3ff 0%, #5c95ef 100%);
+}
+
+.calendar {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.day {
+  min-height: 118px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  padding: 12px;
+  background: linear-gradient(180deg, #fff 0%, #f9fbff 100%);
+}
+
+.day strong {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 13px;
+}
+
+.slot {
+  margin-top: 8px;
+  padding: 8px 10px;
+  border-radius: 12px;
+  background: var(--blue-50);
+  border: 1px solid rgba(106, 164, 255, 0.16);
+  font-size: 12px;
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.footer-note {
+  margin-top: 18px;
+  color: var(--muted);
+  font-size: 12px;
+  text-align: right;
+}
+
+@media (max-width: 1320px) {
+  .grid-main,
+  .grid-split,
+  .grid-5,
+  .grid-4,
+  .grid-3,
+  .three-col,
+  .two-col {
+    grid-template-columns: 1fr;
+  }
+  .calendar {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1080px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+  }
+  .sidebar {
+    position: relative;
+    height: auto;
+  }
+  .topbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .topbar-left,
+  .topbar-right {
+    flex-wrap: wrap;
+  }
+  .search {
+    min-width: 0;
+  }
+}
--- a/web/storyforge-web-v4/index.html
+++ b/web/storyforge-web-v4/index.html