diff --git a/frontend-web/src/roundtable-planning/styles/roundtable-planning.css b/frontend-web/src/roundtable-planning/styles/roundtable-planning.css
index f48040c2..eacf15cb 100644
--- a/frontend-web/src/roundtable-planning/styles/roundtable-planning.css
+++ b/frontend-web/src/roundtable-planning/styles/roundtable-planning.css
@@ -21,9 +21,41 @@
   background: #fddadc;
 }
 
-/* 深色模式：跟随全局 ThemeContext（html.dark）或组件 .roundtable-planning--dark */
+/* 深色模式：跟随全局 ThemeContext（html.dark）或组件 .roundtable-planning--dark
+ *
+ * 仅在本页 + 深色下，把语义 token 覆盖为《深蓝色 UI 规范》取值
+ * （docs/ui规范-深蓝/tokens.css，§1 深蓝系 ZS-004 / 渐蓝系 ZS-002）。
+ * 全模块组件均经由这些 token（bg-background / text-foreground / border-border …）
+ * 着色，所以这里统一覆盖即可整页换肤；浅色模式（无 .dark）保持红色主题不受影响。 */
 .dark .roundtable-planning,
 .roundtable-planning--dark {
+  /* —— 背景 / 容器（ZS-004 深蓝系） —— */
+  --background: #0c1836;          /* zs-004-09 页面背景 */
+  --foreground: #c5cfe0;          /* zs-004-02 正文字体 */
+  --card: #122347;                /* zs-004-08 卡片背景 */
+  --card-foreground: #c5cfe0;
+  --popover: #122347;             /* 下拉 / 浮层与卡片同底 */
+  --popover-foreground: #c5cfe0;
+  --muted: #16294d;               /* 次级容器（步骤条 / slate-50 表面） */
+  --muted-foreground: #6e88b0;    /* zs-004-04 次级字体 */
+  --secondary: #1a2f5a;           /* zs-004-07 次级按钮底 */
+  --secondary-foreground: #c5cfe0;
+  --accent: #1a2f5a;              /* hover / 软高亮表面 */
+  --accent-foreground: #e8edf5;   /* zs-004-01 */
+
+  /* —— 主色 / 链接（ZS-002 渐蓝系） —— */
+  --primary: #1677ff;             /* zs-002-06 主操作 */
+  --primary-foreground: #ffffff;
+  --ring: rgba(22, 119, 255, 0.45);
+
+  /* —— 边框 / 控件描边（取较浅阶以保证深底上可见） —— */
+  --border: #2d4473;              /* zs-004-06 容器边框 */
+  --input: #4a6491;               /* zs-004-05 控件描边 */
+
+  /* —— 功能语义色 —— */
+  --destructive: #f5222d;         /* zs-001-06 错误 */
+
+  /* —— 圆桌局部别名（回落到上面已覆盖的 token） —— */
   --rt-page-bg: var(--background);
   --rt-primary: var(--primary);
   --rt-primary-hover: var(--primary);
@@ -47,98 +79,226 @@
   background: color-mix(in oklch, var(--primary) 35%, transparent);
 }
 
-/* 页面底与浅色专用背景 */
-.dark .roundtable-planning.bg-\[\#fef6f6\],
-.roundtable-planning--dark.bg-\[\#fef6f6\] {
+/* =============================================================================
+ * 深色兜底映射 —— 把组件里写死的浅色 Tailwind 类映射到上面的深蓝 token。
+ *
+ * 这些组件原本只为浅色红主题写死了 slate / white / emerald 等色，深色靠这里
+ * 统一改写。作用域 :is(.dark .roundtable-planning, .roundtable-planning--dark)
+ * 同时覆盖「全局 html.dark」与「组件 --dark 修饰类」两种触发方式；浅色模式
+ * （无 .dark / 无 --dark）完全不命中，红主题不受影响。
+ *
+ * 维护：组件里新增写死颜色时，往下面对应分组补一行即可，不要在组件里写
+ * `dark:` 变体与本表打架（本表用 !important，会盖过同元素的 dark: 变体）。
+ * ========================================================================== */
+
+/* ---- 页面底色：浅红 → 深蓝页面底 ---- */
+:is(.dark .roundtable-planning, .roundtable-planning--dark).bg-\[\#fef6f6\],
+:is(.dark .roundtable-planning, .roundtable-planning--dark) .bg-\[\#fef6f6\] {
   background-color: var(--background) !important;
 }
 
-/* 表面：白底卡片 → card */
-.dark .roundtable-planning .bg-white,
-.roundtable-planning--dark .bg-white {
+/* ---- 表面：白 / 近白底 → 卡片底 ---- */
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(.bg-white, .hover\:bg-white:hover, .bg-\[\#fcfcfd\], .bg-\[\#fffdfa\]) {
   background-color: var(--card) !important;
 }
 
-.dark .roundtable-planning .bg-slate-50,
-.dark .roundtable-planning .bg-slate-50\/20,
-.dark .roundtable-planning .bg-slate-50\/30,
-.roundtable-planning--dark .bg-slate-50,
-.roundtable-planning--dark .bg-slate-50\/20,
-.roundtable-planning--dark .bg-slate-50\/30 {
-  background-color: color-mix(in oklch, var(--muted) 80%, transparent) !important;
+/* ---- 次级表面：slate-50/100（含透明度档）→ muted ---- */
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(
+    .bg-slate-50, .bg-slate-50\/20, .bg-slate-50\/30, .bg-slate-50\/50,
+    .bg-slate-50\/60, .bg-slate-50\/80, .bg-slate-100, .bg-slate-100\/80
+  ) {
+  background-color: var(--muted) !important;
 }
 
-.dark .roundtable-planning .from-slate-50,
-.roundtable-planning--dark .from-slate-50 {
+/* ---- 次级表面 hover → accent ---- */
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(
+    .hover\:bg-slate-50:hover, .hover\:bg-slate-50\/60:hover,
+    .hover\:bg-slate-100:hover
+  ) {
+  background-color: var(--accent) !important;
+}
+
+/* ---- 禁用 / 较实的中性底 → secondary ---- */
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(.bg-slate-300, .disabled\:bg-slate-300:disabled) {
+  background-color: var(--secondary) !important;
+}
+
+/* ---- slate-200 作分隔条 → border 色 ---- */
+:is(.dark .roundtable-planning, .roundtable-planning--dark) .bg-slate-200 {
+  background-color: var(--border) !important;
+}
+
+/* ---- 渐变端点 ---- */
+:is(.dark .roundtable-planning, .roundtable-planning--dark) .from-slate-50 {
   --tw-gradient-from: var(--muted) !important;
 }
-
-.dark .roundtable-planning .to-white,
-.roundtable-planning--dark .to-white {
+:is(.dark .roundtable-planning, .roundtable-planning--dark) .to-white {
   --tw-gradient-to: var(--card) !important;
 }
-
-/* 品牌浅红底 → accent */
-.dark .roundtable-planning [class*="brand-200"],
-.roundtable-planning--dark [class*="brand-200"] {
-  background-color: color-mix(in oklch, var(--accent) 55%, transparent) !important;
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(.from-\[var\(--brand-200\)\]) {
+  --tw-gradient-from: color-mix(in oklch, var(--accent) 60%, transparent) !important;
+}
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(.via-\[var\(--brand-200\)\]) {
+  --tw-gradient-via: color-mix(in oklch, var(--accent) 60%, transparent) !important;
 }
 
-.dark .roundtable-planning .border-red-100,
-.dark .roundtable-planning .border-red-100\/50,
-.dark .roundtable-planning .border-red-200,
-.dark .roundtable-planning .border-red-200\/50,
-.dark .roundtable-planning .border-red-200\/85,
-.roundtable-planning--dark .border-red-100,
-.roundtable-planning--dark .border-red-100\/50,
-.roundtable-planning--dark .border-red-200,
-.roundtable-planning--dark .border-red-200\/50,
-.roundtable-planning--dark .border-red-200\/85 {
-  border-color: var(--border) !important;
+/* ---- 品牌浅红底（brand-200 等） → accent ---- */
+:is(.dark .roundtable-planning, .roundtable-planning--dark) [class*="brand-200"] {
+  background-color: color-mix(in oklch, var(--accent) 70%, transparent) !important;
 }
 
-.dark .roundtable-planning .border-slate-100,
-.dark .roundtable-planning .border-slate-200,
-.dark .roundtable-planning .border-slate-200\/50,
-.dark .roundtable-planning .border-\[\#e2e8f0\],
-.roundtable-planning--dark .border-slate-100,
-.roundtable-planning--dark .border-slate-200,
-.roundtable-planning--dark .border-slate-200\/50,
-.roundtable-planning--dark .border-\[\#e2e8f0\] {
-  border-color: var(--border) !important;
-}
-
-/* 文字 */
-.dark .roundtable-planning .text-slate-900,
-.dark .roundtable-planning .text-slate-800,
-.dark .roundtable-planning .text-slate-700,
-.dark .roundtable-planning .text-\[\#334155\],
-.roundtable-planning--dark .text-slate-900,
-.roundtable-planning--dark .text-slate-800,
-.roundtable-planning--dark .text-slate-700,
-.roundtable-planning--dark .text-\[\#334155\] {
+/* ---- 中性文字：深 → 正文色 ---- */
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(
+    .text-slate-900, .text-slate-800, .text-slate-700, .text-\[\#334155\],
+    .hover\:text-slate-900:hover, .hover\:text-slate-800:hover,
+    .hover\:text-slate-700:hover
+  ) {
   color: var(--foreground) !important;
 }
 
-.dark .roundtable-planning .text-slate-600,
-.dark .roundtable-planning .text-slate-500,
-.dark .roundtable-planning .text-slate-400,
-.roundtable-planning--dark .text-slate-600,
-.roundtable-planning--dark .text-slate-500,
-.roundtable-planning--dark .text-slate-400 {
+/* ---- 中性文字：中 / 浅 → 次级文字色 ---- */
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(
+    .text-slate-650, .text-slate-600, .text-slate-500, .text-slate-400,
+    .text-slate-300, .text-\[\#94a3b8\],
+    .hover\:text-slate-650:hover, .hover\:text-slate-600:hover,
+    .placeholder\:text-slate-400::placeholder
+  ) {
   color: var(--muted-foreground) !important;
 }
 
-.dark .roundtable-planning .hover\:text-slate-800:hover,
-.roundtable-planning--dark .hover\:text-slate-800:hover {
-  color: var(--foreground) !important;
+/* ---- 中性边框：slate / red / 白 / #e2e8f0（含透明度档）→ border ---- */
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(
+    .border-white, .border-slate-50, .border-slate-100, .border-slate-150,
+    .border-slate-200, .border-slate-200\/50, .border-slate-200\/80,
+    .border-slate-300, .border-slate-400, .border-slate-700,
+    .border-\[\#e2e8f0\],
+    .border-red-50, .border-red-100, .border-red-100\/50, .border-red-200,
+    .border-red-200\/50, .border-red-200\/85
+  ) {
+  border-color: var(--border) !important;
 }
 
-.dark .roundtable-planning .hover\:bg-slate-50:hover,
-.roundtable-planning--dark .hover\:bg-slate-50:hover {
-  background-color: var(--accent) !important;
+/* ---- divide-slate-100 子项分隔线 → border ---- */
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
+  border-color: var(--border) !important;
 }
 
+/* ---- focus ring：brand-200 → 主色淡环 ---- */
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(
+    .ring-\[var\(--brand-200\)\],
+    .focus-within\:ring-\[var\(--brand-200\)\]\/50:focus-within,
+    .focus\:ring-\[var\(--brand-200\)\]\/50:focus
+  ) {
+  --tw-ring-color: color-mix(in oklch, var(--primary) 30%, transparent) !important;
+}
+
+/* ---- 选中边框 border-primary → 主色描边（柔化） ---- */
+:is(.dark .roundtable-planning, .roundtable-planning--dark) .border-primary,
+:is(.dark .roundtable-planning, .roundtable-planning--dark) .border-2.border-primary {
+  border-color: color-mix(in oklch, var(--primary) 55%, var(--border)) !important;
+}
+
+/* =============================================================================
+ * 功能语义色（成功/警告/错误/信息/装饰）—— 深色下：浅底改深色同色调、深字提亮。
+ * 保留色相作为语义提示，只调明度以适配深蓝底。实心中等色按钮（emerald-600 等
+ * 配白字）本就在深底上可读，故不改。
+ * ========================================================================== */
+
+/* —— 成功 · emerald —— */
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(.bg-emerald-50, .bg-emerald-50\/40, .bg-emerald-50\/50, .bg-emerald-100, .bg-emerald-100\/40) {
+  background-color: color-mix(in oklch, #10b981 18%, var(--card)) !important;
+}
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(.border-emerald-200, .border-emerald-200\/40, .border-emerald-200\/50) {
+  border-color: color-mix(in oklch, #10b981 42%, var(--border)) !important;
+}
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(.text-emerald-800, .text-emerald-700, .text-emerald-600) {
+  color: #6ee7b7 !important;
+}
+
+/* —— 警告 · amber —— */
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(
+    .bg-amber-50, .bg-amber-50\/60, .bg-amber-100, .bg-amber-100\/40, .bg-amber-200,
+    .hover\:bg-amber-100:hover, .hover\:bg-amber-200:hover
+  ) {
+  background-color: color-mix(in oklch, #f59e0b 20%, var(--card)) !important;
+}
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(
+    .border-amber-100, .border-amber-200, .border-amber-200\/40, .border-amber-300,
+    .border-amber-300\/50, .border-amber-500, .border-amber-700\/50
+  ) {
+  border-color: color-mix(in oklch, #f59e0b 42%, var(--border)) !important;
+}
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(.text-amber-900, .text-amber-800, .text-amber-700, .text-amber-600) {
+  color: #fcd34d !important;
+}
+:is(.dark .roundtable-planning, .roundtable-planning--dark) .focus\:ring-amber-200:focus {
+  --tw-ring-color: color-mix(in oklch, #f59e0b 35%, transparent) !important;
+}
+
+/* —— 错误 · red / rose —— */
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(.bg-red-50, .bg-red-200, .bg-rose-50, .hover\:bg-rose-50:hover) {
+  background-color: color-mix(in oklch, #ef4444 18%, var(--card)) !important;
+}
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(.text-red-700, .text-rose-600, .hover\:text-rose-600:hover) {
+  color: #fca5a5 !important;
+}
+
+/* —— 信息 · sky（部分组件已自带 dark: 变体，这里兜底无 dark: 的） —— */
+:is(.dark .roundtable-planning, .roundtable-planning--dark) .bg-sky-50 {
+  background-color: color-mix(in oklch, #0ea5e9 18%, var(--card)) !important;
+}
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(.border-sky-200, .border-sky-300\/50) {
+  border-color: color-mix(in oklch, #0ea5e9 42%, var(--border)) !important;
+}
+
+/* —— 装饰 · purple —— */
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(.bg-purple-50, .bg-purple-100\/40) {
+  background-color: color-mix(in oklch, #a855f7 18%, var(--card)) !important;
+}
+:is(.dark .roundtable-planning, .roundtable-planning--dark) .border-purple-200 {
+  border-color: color-mix(in oklch, #a855f7 42%, var(--border)) !important;
+}
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  :is(.text-purple-700, .text-purple-500) {
+  color: #d8b4fe !important;
+}
+
+/* —— 装饰 · orange / pink —— */
+:is(.dark .roundtable-planning, .roundtable-planning--dark) .bg-orange-50 {
+  background-color: color-mix(in oklch, #f97316 18%, var(--card)) !important;
+}
+:is(.dark .roundtable-planning, .roundtable-planning--dark) .border-orange-200\/50 {
+  border-color: color-mix(in oklch, #f97316 42%, var(--border)) !important;
+}
+:is(.dark .roundtable-planning, .roundtable-planning--dark) .bg-pink-100\/40 {
+  background-color: color-mix(in oklch, #ec4899 18%, var(--card)) !important;
+}
+
+/* =============================================================================
+ * 结构件覆盖（顶栏 / 步骤条 / 次要按钮）—— 保留原有针对性规则。
+ * ========================================================================== */
+
 /* 顶栏 */
 .dark .roundtable-planning > header,
 .roundtable-planning--dark > header {
@@ -161,29 +321,6 @@
   color: var(--foreground) !important;
 }
 
-/* 输入区 focus ring */
-.dark .roundtable-planning .focus-within\:ring-\[var\(--brand-200\)\]\/50:focus-within,
-.roundtable-planning--dark .focus-within\:ring-\[var\(--brand-200\)\]\/50:focus-within {
-  --tw-ring-color: color-mix(in oklch, var(--primary) 25%, transparent) !important;
-}
-
-/* 渐变横幅 */
-.dark .roundtable-planning .from-\[var\(--brand-200\)\],
-.roundtable-planning--dark .from-\[var\(--brand-200\)\] {
-  --tw-gradient-from: color-mix(in oklch, var(--accent) 40%, transparent) !important;
-}
-
-.dark .roundtable-planning .border-primary,
-.roundtable-planning--dark .border-2.border-primary {
-  border-color: color-mix(in oklch, var(--primary) 50%, var(--border)) !important;
-}
-
-/* 分隔线 */
-.dark .roundtable-planning .bg-slate-200,
-.roundtable-planning--dark .bg-slate-200 {
-  background-color: var(--border) !important;
-}
-
 /* Custom elegant scrollbar styling */
 ::-webkit-scrollbar {
   width: 6px;