fix: 強化 AI 觀測台新版視覺規範

web/static/css/ewoooc-v3-page-guard.css

@@ -461,3 +461,496 @@
     align-items: flex-start;
   }
 }
+
+/* AI observability pages load page-level CSS before this guard. Keep the 10
+   cockpit pages on the same V3 tokens even when older inline styles remain. */
+body.momo-observability-mode {
+  --obs-title-size: var(--momo-text-display, 30px);
+  --obs-value-size: var(--momo-text-display, 30px);
+  --obs-section-title-size: var(--momo-text-title, 17px);
+  --obs-body-size: var(--momo-text-body, 14px);
+  --obs-label-size: var(--momo-text-label, 11px);
+  --obs-ink: var(--momo-text-primary, #2a2520);
+  --obs-muted: var(--momo-text-secondary, #6b6155);
+  --obs-accent: var(--momo-page-accent, var(--momo-warm-saffron, #b8792f));
+  --obs-line: var(--momo-border, rgba(42, 37, 32, 0.16));
+  --obs-card: var(--momo-bg-surface, #faf6ec);
+  --obs-dot: radial-gradient(color-mix(in srgb, var(--momo-text-tertiary, #9b9081) 28%, transparent) 0.8px, transparent 0.8px);
+}
+
+body.momo-observability-mode .momo-content {
+  background-color: var(--momo-bg-body) !important;
+  background-image: var(--obs-dot) !important;
+  background-size: 16px 16px !important;
+  color: var(--obs-ink) !important;
+  font-family: var(--momo-font-family) !important;
+  overflow-x: hidden;
+}
+
+body.momo-observability-mode :is(
+  .obs-war-room,
+  .obs-warroom,
+  .agent-page,
+  .biz-warroom,
+  .runtime-page,
+  .calls-page,
+  .gov-page,
+  .gate-page,
+  .rag-page,
+  .quality-page,
+  .ppt-page
+) {
+  color: var(--obs-ink) !important;
+  font-family: var(--momo-font-family) !important;
+}
+
+body.momo-observability-mode :is(
+  .obs-hero,
+  .agent-hero,
+  .biz-command,
+  .runtime-hero,
+  .calls-hero,
+  .gov-hero,
+  .gate-hero,
+  .rag-hero,
+  .qa-hero,
+  .quality-hero,
+  .ppt-hero,
+  .container-fluid > h2:first-child
+) {
+  border: 1px solid var(--obs-line) !important;
+  border-radius: var(--momo-radius-md, 8px) !important;
+  background-color: var(--momo-bg-surface) !important;
+  background-image: var(--obs-dot) !important;
+  background-size: 16px 16px !important;
+  box-shadow: var(--momo-shadow-soft) !important;
+  color: var(--obs-ink) !important;
+  padding: var(--momo-space-4, 16px) !important;
+}
+
+body.momo-observability-mode .biz-warroom::before,
+body.momo-observability-mode .biz-command::before,
+body.momo-observability-mode .biz-command::after {
+  display: none !important;
+}
+
+body.momo-observability-mode :is(
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .obs-title,
+  .agent-title,
+  .biz-command h1,
+  .runtime-title,
+  .calls-title,
+  .gov-title,
+  .gate-title,
+  .rag-title,
+  .qa-title,
+  .quality-title,
+  .ppt-title
+) {
+  color: var(--obs-ink) !important;
+  font-family: var(--momo-font-display) !important;
+  font-weight: 800 !important;
+  letter-spacing: 0 !important;
+  line-height: 1.2 !important;
+}
+
+body.momo-observability-mode :is(
+  .obs-title,
+  .agent-title,
+  .biz-command h1,
+  .runtime-title,
+  .calls-title,
+  .gov-title,
+  .gate-title,
+  .rag-title,
+  .qa-title,
+  .quality-title,
+  .ppt-title,
+  .container-fluid > h2:first-child
+) {
+  font-size: var(--obs-title-size) !important;
+  max-width: 820px;
+}
+
+body.momo-observability-mode :is(
+  .obs-subtitle,
+  .agent-subtitle,
+  .biz-command p,
+  .runtime-subtitle,
+  .calls-subtitle,
+  .gov-subtitle,
+  .gate-subtitle,
+  .rag-subtitle,
+  .qa-subtitle,
+  .quality-subtitle,
+  .ppt-subtitle,
+  .text-muted
+) {
+  color: var(--obs-muted) !important;
+  font-family: var(--momo-font-family) !important;
+  font-size: var(--obs-body-size) !important;
+  letter-spacing: 0 !important;
+  line-height: 1.7 !important;
+}
+
+body.momo-observability-mode :is(
+  .obs-kicker,
+  .agent-kicker,
+  .biz-kicker,
+  .runtime-kicker,
+  .calls-kicker,
+  .gov-kicker,
+  .gate-kicker,
+  .rag-kicker,
+  .qa-kicker,
+  .quality-kicker,
+  .ppt-kicker,
+  .obs-label,
+  .agent-label,
+  .biz-signal .label,
+  .runtime-label,
+  .calls-label,
+  .gov-label,
+  .gate-label,
+  .rag-label,
+  .qa-label,
+  .quality-label,
+  .ppt-label,
+  [class$="-label"]
+) {
+  color: var(--obs-accent) !important;
+  font-family: var(--momo-font-mono) !important;
+  font-size: var(--obs-label-size) !important;
+  font-weight: 700 !important;
+  letter-spacing: 0 !important;
+  text-transform: none !important;
+}
+
+body.momo-observability-mode :is(
+  .obs-value,
+  .obs-signal-value,
+  .agent-value,
+  .biz-value,
+  .biz-signal .value,
+  .runtime-value,
+  .calls-value,
+  .gov-value,
+  .gate-value,
+  .rag-value,
+  .qa-value,
+  .quality-value,
+  .ppt-value,
+  .display-4,
+  .display-5,
+  .h1,
+  [class$="-mini"] strong
+) {
+  color: var(--obs-ink) !important;
+  font-family: var(--momo-font-mono) !important;
+  font-size: var(--obs-value-size) !important;
+  font-weight: 800 !important;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0 !important;
+  line-height: 1.1 !important;
+}
+
+body.momo-observability-mode :is(
+  .obs-panel-title,
+  .agent-panel-title,
+  .biz-panel-head h3,
+  .runtime-panel-title,
+  .calls-panel-title,
+  .gov-panel-title,
+  .gate-panel-title,
+  .rag-panel-title,
+  .qa-panel-title,
+  .quality-panel-title,
+  .ppt-panel-title,
+  [class$="-table-title"] h3,
+  .card-title
+) {
+  font-size: var(--obs-section-title-size) !important;
+  letter-spacing: 0 !important;
+  line-height: 1.35 !important;
+}
+
+body.momo-observability-mode :is(
+  .card,
+  .obs-signal,
+  .agent-signal,
+  .biz-signal,
+  .runtime-signal,
+  .calls-signal,
+  .gov-signal,
+  .gate-signal,
+  .rag-signal,
+  .qa-signal,
+  .quality-signal,
+  .ppt-signal,
+  .obs-panel,
+  .agent-panel,
+  .biz-panel,
+  .runtime-panel,
+  .calls-panel,
+  .gov-panel,
+  .gate-panel,
+  .rag-panel,
+  .qa-panel,
+  .quality-panel,
+  .ppt-panel,
+  .agent-card,
+  .caller-card,
+  .rec-card,
+  .fix-card,
+  .root-card,
+  .episode-card,
+  .biz-decision-card,
+  .obs-route-card,
+  [class$="-mini"],
+  .strategy-card,
+  .episode-text,
+  .similar-box,
+  .host-lane,
+  .list-group-item,
+  .dropdown-menu,
+  .modal-content,
+  .alert
+) {
+  border-color: var(--obs-line) !important;
+  border-radius: var(--momo-radius-md, 8px) !important;
+  background-color: var(--obs-card) !important;
+  background-image: var(--obs-dot) !important;
+  background-size: 14px 14px !important;
+  box-shadow: var(--momo-shadow-soft) !important;
+  color: var(--obs-ink) !important;
+}
+
+body.momo-observability-mode :is(
+  .obs-table-shell,
+  .agent-table-shell,
+  .biz-table-shell,
+  .runtime-table-shell,
+  .calls-table-shell,
+  .gov-table-shell,
+  .gate-table-shell,
+  .rag-table-shell,
+  .qa-table-shell,
+  .quality-table-shell,
+  .ppt-table-shell,
+  .table-responsive,
+  .obs-chart-frame,
+  .chart-frame,
+  .chart-container,
+  .obs-modal-preview
+) {
+  max-width: 100%;
+  overflow-x: auto;
+  border-color: var(--obs-line) !important;
+  border-radius: var(--momo-radius-md, 8px) !important;
+  background-color: var(--momo-bg-surface) !important;
+  background-image: var(--obs-dot) !important;
+  background-size: 14px 14px !important;
+  box-shadow: var(--momo-shadow-soft) !important;
+}
+
+body.momo-observability-mode :is(.btn, .form-control, .form-select, .input-group-text, .badge) {
+  border-radius: var(--momo-radius-md, 8px) !important;
+  font-family: var(--momo-font-family) !important;
+  letter-spacing: 0 !important;
+}
+
+body.momo-observability-mode .badge {
+  border: 1px solid var(--momo-border-light) !important;
+  background: var(--momo-tag-muted-bg) !important;
+  color: var(--momo-tag-muted-text) !important;
+  font-family: var(--momo-font-mono) !important;
+  font-size: var(--momo-text-label) !important;
+  font-weight: 700 !important;
+}
+
+body.momo-observability-mode :is(.badge.bg-success, .status-good) {
+  color: var(--momo-success-text) !important;
+}
+
+body.momo-observability-mode .badge.bg-success {
+  background: var(--momo-success-bg) !important;
+  border-color: var(--momo-success-border) !important;
+}
+
+body.momo-observability-mode :is(.badge.bg-warning, .status-warn) {
+  color: var(--momo-warning-text) !important;
+}
+
+body.momo-observability-mode .badge.bg-warning {
+  background: var(--momo-warning-bg) !important;
+  border-color: var(--momo-warning-border) !important;
+}
+
+body.momo-observability-mode :is(.badge.bg-danger, .status-bad) {
+  color: var(--momo-danger-text) !important;
+}
+
+body.momo-observability-mode .badge.bg-danger {
+  background: var(--momo-danger-bg) !important;
+  border-color: var(--momo-danger-border) !important;
+}
+
+body.momo-observability-mode :is(.badge.bg-info, .badge.bg-primary, .badge.bg-secondary, .badge.bg-light, .status-blue) {
+  color: var(--momo-info-text) !important;
+}
+
+body.momo-observability-mode :is(.badge.bg-info, .badge.bg-primary, .badge.bg-secondary, .badge.bg-light) {
+  background: var(--momo-info-bg) !important;
+  border-color: var(--momo-info-border) !important;
+}
+
+body.momo-observability-mode .table {
+  --bs-table-bg: transparent;
+  --bs-table-color: var(--obs-ink);
+  color: var(--obs-ink) !important;
+  font-size: var(--momo-text-body-sm) !important;
+}
+
+body.momo-observability-mode :is(.table thead th, table thead th, .table-light th) {
+  background: var(--momo-bg-paper) !important;
+  color: var(--momo-text-secondary) !important;
+  font-family: var(--momo-font-mono) !important;
+  font-size: var(--momo-text-label) !important;
+  font-weight: 700 !important;
+  letter-spacing: 0 !important;
+  white-space: nowrap;
+}
+
+body.momo-observability-mode :is(
+  .obs-command-strip,
+  .agent-command,
+  .biz-signal-grid,
+  .runtime-command,
+  .calls-command,
+  .gov-command,
+  .gate-command,
+  .rag-command,
+  .qa-command,
+  .quality-command,
+  .ppt-command
+) {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
+  gap: var(--momo-space-3, 12px) !important;
+}
+
+body.momo-observability-mode :is(
+  .obs-grid,
+  .agent-grid,
+  .biz-hero,
+  .biz-layout,
+  .runtime-grid,
+  .calls-grid,
+  .gov-grid,
+  .gate-grid,
+  .rag-grid,
+  .qa-grid,
+  .quality-grid,
+  .ppt-grid
+) {
+  display: grid !important;
+  grid-template-columns: minmax(0, 1fr) minmax(min(100%, 320px), 0.42fr) !important;
+  gap: var(--momo-space-4, 16px) !important;
+  max-width: 100%;
+}
+
+@media (max-width: 900px) {
+  body.momo-observability-mode {
+    --obs-title-size: 24px;
+    --obs-value-size: 24px;
+  }
+
+  body.momo-observability-mode :is(
+    .obs-grid,
+    .agent-grid,
+    .biz-hero,
+    .biz-layout,
+    .runtime-grid,
+    .calls-grid,
+    .gov-grid,
+    .gate-grid,
+    .rag-grid,
+    .qa-grid,
+    .quality-grid,
+    .ppt-grid
+  ) {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+@media (max-width: 560px) {
+  body.momo-observability-mode {
+    --obs-title-size: 20px;
+    --obs-value-size: 20px;
+  }
+
+  body.momo-observability-mode :is(.obs-hero, .agent-hero, .biz-command, .runtime-hero, .calls-hero, .gov-hero, .gate-hero, .rag-hero, .qa-hero, .quality-hero, .ppt-hero) {
+    padding: 0.72rem !important;
+  }
+
+  body.momo-observability-mode :is(
+    .obs-command-strip,
+    .agent-command,
+    .biz-signal-grid,
+    .runtime-command,
+    .calls-command,
+    .gov-command,
+    .gate-command,
+    .rag-command,
+    .qa-command,
+    .quality-command,
+    .ppt-command
+  ) {
+    gap: 8px !important;
+    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)) !important;
+  }
+
+  body.momo-observability-mode :is(
+    .obs-signal,
+    .agent-signal,
+    .biz-signal,
+    .runtime-signal,
+    .calls-signal,
+    .gov-signal,
+    .gate-signal,
+    .rag-signal,
+    .qa-signal,
+    .quality-signal,
+    .ppt-signal
+  ) {
+    min-height: auto !important;
+    padding: 0.62rem !important;
+  }
+
+  body.momo-observability-mode :is(
+    .obs-subtitle,
+    .agent-subtitle,
+    .biz-command p,
+    .runtime-subtitle,
+    .calls-subtitle,
+    .gov-subtitle,
+    .gate-subtitle,
+    .rag-subtitle,
+    .qa-subtitle,
+    .quality-subtitle,
+    .ppt-subtitle
+  ) {
+    line-height: 1.55 !important;
+  }
+
+  body.momo-observability-mode :is(.table-responsive, .obs-table-shell, [class$="-table-shell"]) {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}

web/static/css/observability-system.css

@@ -37,7 +37,7 @@
     linear-gradient(180deg, rgba(255, 248, 239, 0.65), rgba(255, 253, 248, 0.96));
   background-size: 18px 18px, auto, auto, auto;
   color: var(--obs-ink);
-  font-family: 'Noto Sans TC', 'Inter', sans-serif;
+  font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif);
 }
 
 .momo-observability-mode .momo-content::before {
@@ -76,16 +76,16 @@
     linear-gradient(135deg, rgba(255, 248, 239, 0.96), rgba(255, 255, 255, 0.76));
   box-shadow: 0 18px 42px rgba(70, 46, 28, 0.08);
   color: var(--obs-ink);
-  font-family: 'Noto Sans TC', 'Inter', sans-serif;
+  font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif);
   font-size: var(--obs-title-size);
-  letter-spacing: -0.045em;
+  letter-spacing: 0;
 }
 
 .momo-observability-mode .container-fluid > h2:first-child small {
   display: block;
   margin-top: 0.3rem;
   color: var(--obs-muted) !important;
-  font-family: 'Noto Sans TC', sans-serif;
+  font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif);
   font-size: 0.88rem;
   font-weight: 500;
   letter-spacing: 0;
@@ -122,7 +122,7 @@
 .momo-observability-mode h3,
 .momo-observability-mode h4,
 .momo-observability-mode h5 {
-  letter-spacing: -0.035em;
+  letter-spacing: 0;
 }
 
 .momo-observability-mode h1,
@@ -132,7 +132,7 @@
 .momo-observability-mode h5,
 .momo-observability-mode h6 {
   color: var(--obs-ink);
-  font-family: 'Noto Sans TC', 'Inter', sans-serif !important;
+  font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif) !important;
   font-weight: 850;
 }
 
@@ -147,10 +147,10 @@
 .momo-observability-mode .quality-title,
 .momo-observability-mode .ppt-title {
   max-width: 780px;
-  font-family: 'Noto Sans TC', 'Inter', sans-serif !important;
+  font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif) !important;
   font-size: clamp(1.9rem, 3.2vw, 2.75rem) !important;
   line-height: 1.12 !important;
-  letter-spacing: -0.045em !important;
+  letter-spacing: 0!important;
   font-weight: 860 !important;
 }
 
@@ -283,7 +283,7 @@
 .momo-observability-mode .ppt-value {
   font-size: clamp(1.55rem, 3vw, 2.25rem) !important;
   line-height: 1.05 !important;
-  letter-spacing: -0.055em !important;
+  letter-spacing: 0!important;
   font-weight: 900 !important;
 }
 
@@ -300,7 +300,7 @@
 .momo-observability-mode [class$="-table-title"] h3 {
   font-size: clamp(1.05rem, 2vw, 1.45rem) !important;
   line-height: 1.25 !important;
-  letter-spacing: -0.035em !important;
+  letter-spacing: 0!important;
 }
 
 .momo-observability-mode code,
@@ -370,7 +370,7 @@
 .momo-observability-mode .btn {
   border-radius: 999px;
   font-weight: 760;
-  letter-spacing: -0.01em;
+  letter-spacing: 0;
   min-height: 2.25rem;
   padding-inline: 0.9rem;
   box-shadow: none;
@@ -565,7 +565,7 @@
 .momo-observability-mode .badge {
   border-radius: 999px;
   font-weight: 850;
-  letter-spacing: -0.01em;
+  letter-spacing: 0;
   padding: 0.36em 0.62em;
 }
 
@@ -935,10 +935,10 @@
 .momo-observability-mode .display-4,
 .momo-observability-mode .display-5,
 .momo-observability-mode .h1 {
-  font-family: 'JetBrains Mono', 'Noto Sans TC', monospace !important;
+  font-family: var(--momo-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
   font-size: var(--obs-value-size) !important;
   font-weight: 850 !important;
-  letter-spacing: -0.055em !important;
+  letter-spacing: 0!important;
 }
 
 .momo-observability-mode .table,