對齊 AI 觀測台 V3 視覺規範

static/css/observability-system.css

@@ -1306,3 +1306,457 @@
     padding: 0.78rem !important;
   }
 }
+
+/* v3.2 strict alignment: keep all AI observability pages on the production
+ * design spec even when older inline template CSS appears later in the DOM.
+ */
+.momo-observability-mode {
+  --obs-ink: var(--momo-text-primary, #2a2520);
+  --obs-muted: var(--momo-text-secondary, #6b6155);
+  --obs-paper: var(--momo-bg-surface, #faf6ec);
+  --obs-card: var(--momo-bg-elevated, #fdfaf2);
+  --obs-accent: var(--momo-page-accent, var(--momo-warm-saffron, #b8792f));
+  --obs-accent-soft: var(--momo-page-accent-soft, rgba(184, 121, 47, 0.13));
+  --obs-line: var(--momo-border, rgba(42, 37, 32, 0.16));
+  --obs-green: var(--momo-success, #5a7a3f);
+  --obs-amber: var(--momo-warning, #b8792f);
+  --obs-red: var(--momo-danger, #a84428);
+  --obs-blue: var(--momo-info, #4a6b85);
+  --obs-radius-lg: 8px;
+  --obs-radius-md: 8px;
+  --obs-shadow: var(--momo-shadow-soft, 0 2px 6px rgba(42, 37, 32, 0.06));
+  --obs-title-size: 1.8rem;
+  --obs-value-size: 1.85rem;
+  --obs-surface-warm: var(--momo-bg-paper, #f5efe2);
+  --obs-surface-glass: var(--momo-bg-elevated, #fdfaf2);
+}
+
+.momo-observability-mode .momo-content {
+  background-color: var(--momo-bg-body, #f0ebe1) !important;
+  background-image: var(--obs-dot) !important;
+  background-size: 18px 18px !important;
+  color: var(--obs-ink);
+  font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif) !important;
+  overflow-x: clip;
+}
+
+.momo-observability-mode .momo-content::before,
+.momo-observability-mode .obs-hero::after,
+.momo-observability-mode .agent-hero::after,
+.momo-observability-mode .biz-command::after,
+.momo-observability-mode .runtime-hero::after,
+.momo-observability-mode .calls-hero::after,
+.momo-observability-mode .gov-hero::after,
+.momo-observability-mode .gate-hero::after,
+.momo-observability-mode .rag-hero::after,
+.momo-observability-mode .qa-hero::after,
+.momo-observability-mode .quality-hero::after,
+.momo-observability-mode .ppt-hero::after,
+.momo-observability-mode .obs-panel::after,
+.momo-observability-mode .agent-panel::after,
+.momo-observability-mode .biz-panel::after,
+.momo-observability-mode .runtime-panel::after,
+.momo-observability-mode .calls-panel::after,
+.momo-observability-mode .gov-panel::after,
+.momo-observability-mode .gate-panel::after,
+.momo-observability-mode .rag-panel::after,
+.momo-observability-mode .qa-panel::after,
+.momo-observability-mode .quality-panel::after,
+.momo-observability-mode .ppt-panel::after {
+  display: none !important;
+}
+
+.momo-observability-mode .container-fluid > h2:first-child,
+.momo-observability-mode .obs-hero,
+.momo-observability-mode .agent-hero,
+.momo-observability-mode .biz-command,
+.momo-observability-mode .runtime-hero,
+.momo-observability-mode .calls-hero,
+.momo-observability-mode .gov-hero,
+.momo-observability-mode .gate-hero,
+.momo-observability-mode .rag-hero,
+.momo-observability-mode .qa-hero,
+.momo-observability-mode .quality-hero,
+.momo-observability-mode .ppt-hero {
+  border: 1px solid var(--obs-line) !important;
+  border-radius: 8px !important;
+  background-color: var(--momo-bg-surface, #faf6ec) !important;
+  background-image: var(--obs-dot) !important;
+  background-size: 16px 16px !important;
+  box-shadow: var(--obs-shadow) !important;
+  color: var(--obs-ink) !important;
+  padding: 1rem 1.2rem !important;
+}
+
+.momo-observability-mode .card,
+.momo-observability-mode .obs-signal,
+.momo-observability-mode .agent-signal,
+.momo-observability-mode .biz-signal,
+.momo-observability-mode .runtime-signal,
+.momo-observability-mode .calls-signal,
+.momo-observability-mode .gov-signal,
+.momo-observability-mode .gate-signal,
+.momo-observability-mode .rag-signal,
+.momo-observability-mode .qa-signal,
+.momo-observability-mode .quality-signal,
+.momo-observability-mode .ppt-signal,
+.momo-observability-mode .obs-panel,
+.momo-observability-mode .agent-panel,
+.momo-observability-mode .biz-panel,
+.momo-observability-mode .runtime-panel,
+.momo-observability-mode .calls-panel,
+.momo-observability-mode .gov-panel,
+.momo-observability-mode .gate-panel,
+.momo-observability-mode .rag-panel,
+.momo-observability-mode .qa-panel,
+.momo-observability-mode .quality-panel,
+.momo-observability-mode .ppt-panel,
+.momo-observability-mode .obs-table-shell,
+.momo-observability-mode .agent-table-shell,
+.momo-observability-mode .biz-table-shell,
+.momo-observability-mode .runtime-table-shell,
+.momo-observability-mode .calls-table-shell,
+.momo-observability-mode .gov-table-shell,
+.momo-observability-mode .gate-table-shell,
+.momo-observability-mode .rag-table-shell,
+.momo-observability-mode .qa-table-shell,
+.momo-observability-mode .quality-table-shell,
+.momo-observability-mode .ppt-table-shell,
+.momo-observability-mode .agent-card,
+.momo-observability-mode .caller-card,
+.momo-observability-mode .rec-card,
+.momo-observability-mode .fix-card,
+.momo-observability-mode .root-card,
+.momo-observability-mode .episode-card,
+.momo-observability-mode .biz-decision-card,
+.momo-observability-mode .obs-route-card,
+.momo-observability-mode [class$="-mini"],
+.momo-observability-mode .strategy-card,
+.momo-observability-mode .episode-text,
+.momo-observability-mode .similar-box,
+.momo-observability-mode .host-lane,
+.momo-observability-mode .list-group-item,
+.momo-observability-mode .dropdown-menu,
+.momo-observability-mode .modal-content,
+.momo-observability-mode .alert,
+.momo-observability-mode .obs-chart-frame,
+.momo-observability-mode .chart-frame,
+.momo-observability-mode .chart-container,
+.momo-observability-mode .obs-modal-preview,
+.momo-observability-mode .table-responsive {
+  border-color: var(--obs-line) !important;
+  border-radius: 8px !important;
+  background-color: var(--obs-card) !important;
+  background-image: none !important;
+  box-shadow: var(--obs-shadow) !important;
+  backdrop-filter: none !important;
+}
+
+.momo-observability-mode .obs-table-shell,
+.momo-observability-mode .agent-table-shell,
+.momo-observability-mode .biz-table-shell,
+.momo-observability-mode .runtime-table-shell,
+.momo-observability-mode .calls-table-shell,
+.momo-observability-mode .gov-table-shell,
+.momo-observability-mode .gate-table-shell,
+.momo-observability-mode .rag-table-shell,
+.momo-observability-mode .qa-table-shell,
+.momo-observability-mode .quality-table-shell,
+.momo-observability-mode .ppt-table-shell,
+.momo-observability-mode .obs-chart-frame,
+.momo-observability-mode .chart-frame,
+.momo-observability-mode .chart-container,
+.momo-observability-mode .obs-modal-preview {
+  background-color: var(--momo-bg-surface, #faf6ec) !important;
+  background-image: var(--obs-dot) !important;
+  background-size: 14px 14px !important;
+}
+
+.momo-observability-mode h1,
+.momo-observability-mode h2,
+.momo-observability-mode h3,
+.momo-observability-mode h4,
+.momo-observability-mode h5,
+.momo-observability-mode h6,
+.momo-observability-mode .obs-title,
+.momo-observability-mode .agent-title,
+.momo-observability-mode .biz-command h1,
+.momo-observability-mode .runtime-title,
+.momo-observability-mode .calls-title,
+.momo-observability-mode .gov-title,
+.momo-observability-mode .gate-title,
+.momo-observability-mode .rag-title,
+.momo-observability-mode .qa-title,
+.momo-observability-mode .quality-title,
+.momo-observability-mode .ppt-title {
+  color: var(--obs-ink) !important;
+  font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif) !important;
+  letter-spacing: 0 !important;
+  text-wrap: pretty;
+}
+
+.momo-observability-mode .obs-title,
+.momo-observability-mode .agent-title,
+.momo-observability-mode .biz-command h1,
+.momo-observability-mode .runtime-title,
+.momo-observability-mode .calls-title,
+.momo-observability-mode .gov-title,
+.momo-observability-mode .gate-title,
+.momo-observability-mode .rag-title,
+.momo-observability-mode .qa-title,
+.momo-observability-mode .quality-title,
+.momo-observability-mode .ppt-title {
+  font-size: var(--obs-title-size) !important;
+  font-weight: 800 !important;
+  line-height: 1.2 !important;
+  max-width: 820px;
+}
+
+.momo-observability-mode .obs-signal-value,
+.momo-observability-mode .obs-value,
+.momo-observability-mode .agent-value,
+.momo-observability-mode .biz-value,
+.momo-observability-mode .biz-signal .value,
+.momo-observability-mode .runtime-value,
+.momo-observability-mode .calls-value,
+.momo-observability-mode .gov-value,
+.momo-observability-mode .gate-value,
+.momo-observability-mode .rag-value,
+.momo-observability-mode .qa-value,
+.momo-observability-mode .quality-value,
+.momo-observability-mode .ppt-value,
+.momo-observability-mode .display-4,
+.momo-observability-mode .display-5,
+.momo-observability-mode .h1,
+.momo-observability-mode [class$="-mini"] strong {
+  font-family: var(--momo-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
+  font-size: var(--obs-value-size) !important;
+  font-weight: 800 !important;
+  letter-spacing: 0 !important;
+  line-height: 1.12 !important;
+  font-variant-numeric: tabular-nums;
+}
+
+.momo-observability-mode .obs-kicker,
+.momo-observability-mode .agent-kicker,
+.momo-observability-mode .biz-kicker,
+.momo-observability-mode .runtime-kicker,
+.momo-observability-mode .calls-kicker,
+.momo-observability-mode .gov-kicker,
+.momo-observability-mode .gate-kicker,
+.momo-observability-mode .rag-kicker,
+.momo-observability-mode .qa-kicker,
+.momo-observability-mode .quality-kicker,
+.momo-observability-mode .ppt-kicker,
+.momo-observability-mode [class$="-label"],
+.momo-observability-mode .obs-signal-label,
+.momo-observability-mode .obs-section-eyebrow,
+.momo-observability-mode .obs-route-code {
+  color: color-mix(in srgb, var(--obs-accent) 72%, var(--obs-muted)) !important;
+  font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif) !important;
+  font-size: 0.78rem !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.06em !important;
+  text-transform: uppercase;
+}
+
+.momo-observability-mode .obs-subtitle,
+.momo-observability-mode .agent-subtitle,
+.momo-observability-mode .biz-command p,
+.momo-observability-mode .runtime-subtitle,
+.momo-observability-mode .calls-subtitle,
+.momo-observability-mode .gov-subtitle,
+.momo-observability-mode .gate-subtitle,
+.momo-observability-mode .rag-subtitle,
+.momo-observability-mode .qa-subtitle,
+.momo-observability-mode .quality-subtitle,
+.momo-observability-mode .ppt-subtitle,
+.momo-observability-mode .obs-signal-note,
+.momo-observability-mode .qa-note,
+.momo-observability-mode .text-muted {
+  color: var(--obs-muted) !important;
+  font-size: 0.92rem !important;
+  line-height: 1.55 !important;
+  letter-spacing: 0 !important;
+}
+
+.momo-observability-mode .obs-panel-title,
+.momo-observability-mode .agent-panel-title,
+.momo-observability-mode .biz-panel-title,
+.momo-observability-mode .biz-panel-head h3,
+.momo-observability-mode .runtime-panel-title,
+.momo-observability-mode .calls-panel-title,
+.momo-observability-mode .gov-panel-title,
+.momo-observability-mode .gate-panel-title,
+.momo-observability-mode .rag-panel-title,
+.momo-observability-mode .qa-panel-title,
+.momo-observability-mode .quality-panel-title,
+.momo-observability-mode .ppt-panel-title,
+.momo-observability-mode [class$="-table-title"] h3,
+.momo-observability-mode .card-title {
+  font-size: 1rem !important;
+  font-weight: 700 !important;
+  letter-spacing: 0 !important;
+  line-height: 1.4 !important;
+}
+
+.momo-observability-mode .obs-command-strip,
+.momo-observability-mode .agent-command,
+.momo-observability-mode .biz-signal-grid,
+.momo-observability-mode .runtime-command,
+.momo-observability-mode .calls-command,
+.momo-observability-mode .gov-command,
+.momo-observability-mode .gate-command,
+.momo-observability-mode .rag-command,
+.momo-observability-mode .qa-command,
+.momo-observability-mode .quality-command,
+.momo-observability-mode .ppt-command {
+  display: grid !important;
+  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+  gap: 0.75rem !important;
+}
+
+.momo-observability-mode .obs-grid,
+.momo-observability-mode .agent-grid,
+.momo-observability-mode .biz-layout,
+.momo-observability-mode .runtime-grid,
+.momo-observability-mode .runtime-main,
+.momo-observability-mode .calls-grid,
+.momo-observability-mode .gov-grid,
+.momo-observability-mode .gate-grid,
+.momo-observability-mode .rag-grid,
+.momo-observability-mode .qa-grid,
+.momo-observability-mode .quality-grid,
+.momo-observability-mode .ppt-grid {
+  display: grid !important;
+  gap: 1rem !important;
+}
+
+.momo-observability-mode .btn,
+.momo-observability-mode .form-control,
+.momo-observability-mode .form-select {
+  border-radius: 8px !important;
+  font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif) !important;
+  letter-spacing: 0 !important;
+}
+
+.momo-observability-mode .btn-primary,
+.momo-observability-mode .btn-warning,
+.momo-observability-mode .btn-danger,
+.momo-observability-mode .btn-success,
+.momo-observability-mode .progress-bar,
+.momo-observability-mode .agent-meter span,
+.momo-observability-mode .caller-meter span {
+  background-color: var(--obs-accent) !important;
+  background-image: none !important;
+  color: var(--momo-page-inverse, #fff8ef) !important;
+}
+
+.momo-observability-mode .btn-outline-primary,
+.momo-observability-mode .btn-outline-secondary,
+.momo-observability-mode .btn-outline-info,
+.momo-observability-mode .btn-outline-warning,
+.momo-observability-mode .btn-outline-danger,
+.momo-observability-mode .btn-outline-success {
+  background-color: var(--momo-bg-surface, #faf6ec) !important;
+  background-image: none !important;
+  border-color: var(--obs-line) !important;
+  color: var(--obs-ink) !important;
+}
+
+.momo-observability-mode .table thead th,
+.momo-observability-mode table thead th {
+  background-color: var(--momo-bg-paper, #f5efe2) !important;
+  color: var(--obs-muted) !important;
+  font-family: var(--momo-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
+  font-size: 0.82rem !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.05em !important;
+}
+
+.momo-observability-mode .table tbody td,
+.momo-observability-mode table tbody td {
+  background-color: var(--momo-bg-elevated, #fdfaf2) !important;
+  color: var(--obs-ink) !important;
+}
+
+.momo-observability-mode .table tbody tr:hover td,
+.momo-observability-mode table tbody tr:hover td {
+  background-color: color-mix(in srgb, var(--obs-accent) 7%, var(--momo-bg-elevated, #fdfaf2)) !important;
+}
+
+@media (max-width: 1180px) {
+  .momo-observability-mode .obs-command-strip,
+  .momo-observability-mode .agent-command,
+  .momo-observability-mode .biz-signal-grid,
+  .momo-observability-mode .runtime-command,
+  .momo-observability-mode .calls-command,
+  .momo-observability-mode .gov-command,
+  .momo-observability-mode .gate-command,
+  .momo-observability-mode .rag-command,
+  .momo-observability-mode .qa-command,
+  .momo-observability-mode .quality-command,
+  .momo-observability-mode .ppt-command,
+  .momo-observability-mode [class$="-mini-grid"] {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+
+  .momo-observability-mode .obs-grid,
+  .momo-observability-mode .agent-grid,
+  .momo-observability-mode .biz-layout,
+  .momo-observability-mode .biz-hero,
+  .momo-observability-mode .runtime-grid,
+  .momo-observability-mode .runtime-main,
+  .momo-observability-mode .calls-grid,
+  .momo-observability-mode .gov-grid,
+  .momo-observability-mode .gate-grid,
+  .momo-observability-mode .rag-grid,
+  .momo-observability-mode .qa-grid,
+  .momo-observability-mode .quality-grid,
+  .momo-observability-mode .ppt-grid {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+@media (max-width: 560px) {
+  .momo-observability-mode {
+    --obs-title-size: 1.55rem;
+    --obs-value-size: 1.35rem;
+  }
+
+  .momo-observability-mode .container-fluid,
+  .momo-observability-mode .momo-content {
+    padding-left: 0.75rem !important;
+    padding-right: 0.75rem !important;
+  }
+
+  .momo-observability-mode .container-fluid > h2:first-child,
+  .momo-observability-mode .obs-hero,
+  .momo-observability-mode .agent-hero,
+  .momo-observability-mode .biz-command,
+  .momo-observability-mode .runtime-hero,
+  .momo-observability-mode .calls-hero,
+  .momo-observability-mode .gov-hero,
+  .momo-observability-mode .gate-hero,
+  .momo-observability-mode .rag-hero,
+  .momo-observability-mode .qa-hero,
+  .momo-observability-mode .quality-hero,
+  .momo-observability-mode .ppt-hero {
+    padding: 0.9rem !important;
+  }
+
+  .momo-observability-mode .obs-command-strip,
+  .momo-observability-mode .agent-command,
+  .momo-observability-mode .biz-signal-grid,
+  .momo-observability-mode .runtime-command,
+  .momo-observability-mode .calls-command,
+  .momo-observability-mode .gov-command,
+  .momo-observability-mode .gate-command,
+  .momo-observability-mode .rag-command,
+  .momo-observability-mode .qa-command,
+  .momo-observability-mode .quality-command,
+  .momo-observability-mode .ppt-command,
+  .momo-observability-mode [class$="-mini-grid"] {
+    grid-template-columns: 1fr !important;
+  }
+}

web/static/css/observability-system.css

@@ -1306,3 +1306,457 @@
     padding: 0.78rem !important;
   }
 }
+
+/* v3.2 strict alignment: keep all AI observability pages on the production
+ * design spec even when older inline template CSS appears later in the DOM.
+ */
+.momo-observability-mode {
+  --obs-ink: var(--momo-text-primary, #2a2520);
+  --obs-muted: var(--momo-text-secondary, #6b6155);
+  --obs-paper: var(--momo-bg-surface, #faf6ec);
+  --obs-card: var(--momo-bg-elevated, #fdfaf2);
+  --obs-accent: var(--momo-page-accent, var(--momo-warm-saffron, #b8792f));
+  --obs-accent-soft: var(--momo-page-accent-soft, rgba(184, 121, 47, 0.13));
+  --obs-line: var(--momo-border, rgba(42, 37, 32, 0.16));
+  --obs-green: var(--momo-success, #5a7a3f);
+  --obs-amber: var(--momo-warning, #b8792f);
+  --obs-red: var(--momo-danger, #a84428);
+  --obs-blue: var(--momo-info, #4a6b85);
+  --obs-radius-lg: 8px;
+  --obs-radius-md: 8px;
+  --obs-shadow: var(--momo-shadow-soft, 0 2px 6px rgba(42, 37, 32, 0.06));
+  --obs-title-size: 1.8rem;
+  --obs-value-size: 1.85rem;
+  --obs-surface-warm: var(--momo-bg-paper, #f5efe2);
+  --obs-surface-glass: var(--momo-bg-elevated, #fdfaf2);
+}
+
+.momo-observability-mode .momo-content {
+  background-color: var(--momo-bg-body, #f0ebe1) !important;
+  background-image: var(--obs-dot) !important;
+  background-size: 18px 18px !important;
+  color: var(--obs-ink);
+  font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif) !important;
+  overflow-x: clip;
+}
+
+.momo-observability-mode .momo-content::before,
+.momo-observability-mode .obs-hero::after,
+.momo-observability-mode .agent-hero::after,
+.momo-observability-mode .biz-command::after,
+.momo-observability-mode .runtime-hero::after,
+.momo-observability-mode .calls-hero::after,
+.momo-observability-mode .gov-hero::after,
+.momo-observability-mode .gate-hero::after,
+.momo-observability-mode .rag-hero::after,
+.momo-observability-mode .qa-hero::after,
+.momo-observability-mode .quality-hero::after,
+.momo-observability-mode .ppt-hero::after,
+.momo-observability-mode .obs-panel::after,
+.momo-observability-mode .agent-panel::after,
+.momo-observability-mode .biz-panel::after,
+.momo-observability-mode .runtime-panel::after,
+.momo-observability-mode .calls-panel::after,
+.momo-observability-mode .gov-panel::after,
+.momo-observability-mode .gate-panel::after,
+.momo-observability-mode .rag-panel::after,
+.momo-observability-mode .qa-panel::after,
+.momo-observability-mode .quality-panel::after,
+.momo-observability-mode .ppt-panel::after {
+  display: none !important;
+}
+
+.momo-observability-mode .container-fluid > h2:first-child,
+.momo-observability-mode .obs-hero,
+.momo-observability-mode .agent-hero,
+.momo-observability-mode .biz-command,
+.momo-observability-mode .runtime-hero,
+.momo-observability-mode .calls-hero,
+.momo-observability-mode .gov-hero,
+.momo-observability-mode .gate-hero,
+.momo-observability-mode .rag-hero,
+.momo-observability-mode .qa-hero,
+.momo-observability-mode .quality-hero,
+.momo-observability-mode .ppt-hero {
+  border: 1px solid var(--obs-line) !important;
+  border-radius: 8px !important;
+  background-color: var(--momo-bg-surface, #faf6ec) !important;
+  background-image: var(--obs-dot) !important;
+  background-size: 16px 16px !important;
+  box-shadow: var(--obs-shadow) !important;
+  color: var(--obs-ink) !important;
+  padding: 1rem 1.2rem !important;
+}
+
+.momo-observability-mode .card,
+.momo-observability-mode .obs-signal,
+.momo-observability-mode .agent-signal,
+.momo-observability-mode .biz-signal,
+.momo-observability-mode .runtime-signal,
+.momo-observability-mode .calls-signal,
+.momo-observability-mode .gov-signal,
+.momo-observability-mode .gate-signal,
+.momo-observability-mode .rag-signal,
+.momo-observability-mode .qa-signal,
+.momo-observability-mode .quality-signal,
+.momo-observability-mode .ppt-signal,
+.momo-observability-mode .obs-panel,
+.momo-observability-mode .agent-panel,
+.momo-observability-mode .biz-panel,
+.momo-observability-mode .runtime-panel,
+.momo-observability-mode .calls-panel,
+.momo-observability-mode .gov-panel,
+.momo-observability-mode .gate-panel,
+.momo-observability-mode .rag-panel,
+.momo-observability-mode .qa-panel,
+.momo-observability-mode .quality-panel,
+.momo-observability-mode .ppt-panel,
+.momo-observability-mode .obs-table-shell,
+.momo-observability-mode .agent-table-shell,
+.momo-observability-mode .biz-table-shell,
+.momo-observability-mode .runtime-table-shell,
+.momo-observability-mode .calls-table-shell,
+.momo-observability-mode .gov-table-shell,
+.momo-observability-mode .gate-table-shell,
+.momo-observability-mode .rag-table-shell,
+.momo-observability-mode .qa-table-shell,
+.momo-observability-mode .quality-table-shell,
+.momo-observability-mode .ppt-table-shell,
+.momo-observability-mode .agent-card,
+.momo-observability-mode .caller-card,
+.momo-observability-mode .rec-card,
+.momo-observability-mode .fix-card,
+.momo-observability-mode .root-card,
+.momo-observability-mode .episode-card,
+.momo-observability-mode .biz-decision-card,
+.momo-observability-mode .obs-route-card,
+.momo-observability-mode [class$="-mini"],
+.momo-observability-mode .strategy-card,
+.momo-observability-mode .episode-text,
+.momo-observability-mode .similar-box,
+.momo-observability-mode .host-lane,
+.momo-observability-mode .list-group-item,
+.momo-observability-mode .dropdown-menu,
+.momo-observability-mode .modal-content,
+.momo-observability-mode .alert,
+.momo-observability-mode .obs-chart-frame,
+.momo-observability-mode .chart-frame,
+.momo-observability-mode .chart-container,
+.momo-observability-mode .obs-modal-preview,
+.momo-observability-mode .table-responsive {
+  border-color: var(--obs-line) !important;
+  border-radius: 8px !important;
+  background-color: var(--obs-card) !important;
+  background-image: none !important;
+  box-shadow: var(--obs-shadow) !important;
+  backdrop-filter: none !important;
+}
+
+.momo-observability-mode .obs-table-shell,
+.momo-observability-mode .agent-table-shell,
+.momo-observability-mode .biz-table-shell,
+.momo-observability-mode .runtime-table-shell,
+.momo-observability-mode .calls-table-shell,
+.momo-observability-mode .gov-table-shell,
+.momo-observability-mode .gate-table-shell,
+.momo-observability-mode .rag-table-shell,
+.momo-observability-mode .qa-table-shell,
+.momo-observability-mode .quality-table-shell,
+.momo-observability-mode .ppt-table-shell,
+.momo-observability-mode .obs-chart-frame,
+.momo-observability-mode .chart-frame,
+.momo-observability-mode .chart-container,
+.momo-observability-mode .obs-modal-preview {
+  background-color: var(--momo-bg-surface, #faf6ec) !important;
+  background-image: var(--obs-dot) !important;
+  background-size: 14px 14px !important;
+}
+
+.momo-observability-mode h1,
+.momo-observability-mode h2,
+.momo-observability-mode h3,
+.momo-observability-mode h4,
+.momo-observability-mode h5,
+.momo-observability-mode h6,
+.momo-observability-mode .obs-title,
+.momo-observability-mode .agent-title,
+.momo-observability-mode .biz-command h1,
+.momo-observability-mode .runtime-title,
+.momo-observability-mode .calls-title,
+.momo-observability-mode .gov-title,
+.momo-observability-mode .gate-title,
+.momo-observability-mode .rag-title,
+.momo-observability-mode .qa-title,
+.momo-observability-mode .quality-title,
+.momo-observability-mode .ppt-title {
+  color: var(--obs-ink) !important;
+  font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif) !important;
+  letter-spacing: 0 !important;
+  text-wrap: pretty;
+}
+
+.momo-observability-mode .obs-title,
+.momo-observability-mode .agent-title,
+.momo-observability-mode .biz-command h1,
+.momo-observability-mode .runtime-title,
+.momo-observability-mode .calls-title,
+.momo-observability-mode .gov-title,
+.momo-observability-mode .gate-title,
+.momo-observability-mode .rag-title,
+.momo-observability-mode .qa-title,
+.momo-observability-mode .quality-title,
+.momo-observability-mode .ppt-title {
+  font-size: var(--obs-title-size) !important;
+  font-weight: 800 !important;
+  line-height: 1.2 !important;
+  max-width: 820px;
+}
+
+.momo-observability-mode .obs-signal-value,
+.momo-observability-mode .obs-value,
+.momo-observability-mode .agent-value,
+.momo-observability-mode .biz-value,
+.momo-observability-mode .biz-signal .value,
+.momo-observability-mode .runtime-value,
+.momo-observability-mode .calls-value,
+.momo-observability-mode .gov-value,
+.momo-observability-mode .gate-value,
+.momo-observability-mode .rag-value,
+.momo-observability-mode .qa-value,
+.momo-observability-mode .quality-value,
+.momo-observability-mode .ppt-value,
+.momo-observability-mode .display-4,
+.momo-observability-mode .display-5,
+.momo-observability-mode .h1,
+.momo-observability-mode [class$="-mini"] strong {
+  font-family: var(--momo-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
+  font-size: var(--obs-value-size) !important;
+  font-weight: 800 !important;
+  letter-spacing: 0 !important;
+  line-height: 1.12 !important;
+  font-variant-numeric: tabular-nums;
+}
+
+.momo-observability-mode .obs-kicker,
+.momo-observability-mode .agent-kicker,
+.momo-observability-mode .biz-kicker,
+.momo-observability-mode .runtime-kicker,
+.momo-observability-mode .calls-kicker,
+.momo-observability-mode .gov-kicker,
+.momo-observability-mode .gate-kicker,
+.momo-observability-mode .rag-kicker,
+.momo-observability-mode .qa-kicker,
+.momo-observability-mode .quality-kicker,
+.momo-observability-mode .ppt-kicker,
+.momo-observability-mode [class$="-label"],
+.momo-observability-mode .obs-signal-label,
+.momo-observability-mode .obs-section-eyebrow,
+.momo-observability-mode .obs-route-code {
+  color: color-mix(in srgb, var(--obs-accent) 72%, var(--obs-muted)) !important;
+  font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif) !important;
+  font-size: 0.78rem !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.06em !important;
+  text-transform: uppercase;
+}
+
+.momo-observability-mode .obs-subtitle,
+.momo-observability-mode .agent-subtitle,
+.momo-observability-mode .biz-command p,
+.momo-observability-mode .runtime-subtitle,
+.momo-observability-mode .calls-subtitle,
+.momo-observability-mode .gov-subtitle,
+.momo-observability-mode .gate-subtitle,
+.momo-observability-mode .rag-subtitle,
+.momo-observability-mode .qa-subtitle,
+.momo-observability-mode .quality-subtitle,
+.momo-observability-mode .ppt-subtitle,
+.momo-observability-mode .obs-signal-note,
+.momo-observability-mode .qa-note,
+.momo-observability-mode .text-muted {
+  color: var(--obs-muted) !important;
+  font-size: 0.92rem !important;
+  line-height: 1.55 !important;
+  letter-spacing: 0 !important;
+}
+
+.momo-observability-mode .obs-panel-title,
+.momo-observability-mode .agent-panel-title,
+.momo-observability-mode .biz-panel-title,
+.momo-observability-mode .biz-panel-head h3,
+.momo-observability-mode .runtime-panel-title,
+.momo-observability-mode .calls-panel-title,
+.momo-observability-mode .gov-panel-title,
+.momo-observability-mode .gate-panel-title,
+.momo-observability-mode .rag-panel-title,
+.momo-observability-mode .qa-panel-title,
+.momo-observability-mode .quality-panel-title,
+.momo-observability-mode .ppt-panel-title,
+.momo-observability-mode [class$="-table-title"] h3,
+.momo-observability-mode .card-title {
+  font-size: 1rem !important;
+  font-weight: 700 !important;
+  letter-spacing: 0 !important;
+  line-height: 1.4 !important;
+}
+
+.momo-observability-mode .obs-command-strip,
+.momo-observability-mode .agent-command,
+.momo-observability-mode .biz-signal-grid,
+.momo-observability-mode .runtime-command,
+.momo-observability-mode .calls-command,
+.momo-observability-mode .gov-command,
+.momo-observability-mode .gate-command,
+.momo-observability-mode .rag-command,
+.momo-observability-mode .qa-command,
+.momo-observability-mode .quality-command,
+.momo-observability-mode .ppt-command {
+  display: grid !important;
+  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+  gap: 0.75rem !important;
+}
+
+.momo-observability-mode .obs-grid,
+.momo-observability-mode .agent-grid,
+.momo-observability-mode .biz-layout,
+.momo-observability-mode .runtime-grid,
+.momo-observability-mode .runtime-main,
+.momo-observability-mode .calls-grid,
+.momo-observability-mode .gov-grid,
+.momo-observability-mode .gate-grid,
+.momo-observability-mode .rag-grid,
+.momo-observability-mode .qa-grid,
+.momo-observability-mode .quality-grid,
+.momo-observability-mode .ppt-grid {
+  display: grid !important;
+  gap: 1rem !important;
+}
+
+.momo-observability-mode .btn,
+.momo-observability-mode .form-control,
+.momo-observability-mode .form-select {
+  border-radius: 8px !important;
+  font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif) !important;
+  letter-spacing: 0 !important;
+}
+
+.momo-observability-mode .btn-primary,
+.momo-observability-mode .btn-warning,
+.momo-observability-mode .btn-danger,
+.momo-observability-mode .btn-success,
+.momo-observability-mode .progress-bar,
+.momo-observability-mode .agent-meter span,
+.momo-observability-mode .caller-meter span {
+  background-color: var(--obs-accent) !important;
+  background-image: none !important;
+  color: var(--momo-page-inverse, #fff8ef) !important;
+}
+
+.momo-observability-mode .btn-outline-primary,
+.momo-observability-mode .btn-outline-secondary,
+.momo-observability-mode .btn-outline-info,
+.momo-observability-mode .btn-outline-warning,
+.momo-observability-mode .btn-outline-danger,
+.momo-observability-mode .btn-outline-success {
+  background-color: var(--momo-bg-surface, #faf6ec) !important;
+  background-image: none !important;
+  border-color: var(--obs-line) !important;
+  color: var(--obs-ink) !important;
+}
+
+.momo-observability-mode .table thead th,
+.momo-observability-mode table thead th {
+  background-color: var(--momo-bg-paper, #f5efe2) !important;
+  color: var(--obs-muted) !important;
+  font-family: var(--momo-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
+  font-size: 0.82rem !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.05em !important;
+}
+
+.momo-observability-mode .table tbody td,
+.momo-observability-mode table tbody td {
+  background-color: var(--momo-bg-elevated, #fdfaf2) !important;
+  color: var(--obs-ink) !important;
+}
+
+.momo-observability-mode .table tbody tr:hover td,
+.momo-observability-mode table tbody tr:hover td {
+  background-color: color-mix(in srgb, var(--obs-accent) 7%, var(--momo-bg-elevated, #fdfaf2)) !important;
+}
+
+@media (max-width: 1180px) {
+  .momo-observability-mode .obs-command-strip,
+  .momo-observability-mode .agent-command,
+  .momo-observability-mode .biz-signal-grid,
+  .momo-observability-mode .runtime-command,
+  .momo-observability-mode .calls-command,
+  .momo-observability-mode .gov-command,
+  .momo-observability-mode .gate-command,
+  .momo-observability-mode .rag-command,
+  .momo-observability-mode .qa-command,
+  .momo-observability-mode .quality-command,
+  .momo-observability-mode .ppt-command,
+  .momo-observability-mode [class$="-mini-grid"] {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+
+  .momo-observability-mode .obs-grid,
+  .momo-observability-mode .agent-grid,
+  .momo-observability-mode .biz-layout,
+  .momo-observability-mode .biz-hero,
+  .momo-observability-mode .runtime-grid,
+  .momo-observability-mode .runtime-main,
+  .momo-observability-mode .calls-grid,
+  .momo-observability-mode .gov-grid,
+  .momo-observability-mode .gate-grid,
+  .momo-observability-mode .rag-grid,
+  .momo-observability-mode .qa-grid,
+  .momo-observability-mode .quality-grid,
+  .momo-observability-mode .ppt-grid {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+@media (max-width: 560px) {
+  .momo-observability-mode {
+    --obs-title-size: 1.55rem;
+    --obs-value-size: 1.35rem;
+  }
+
+  .momo-observability-mode .container-fluid,
+  .momo-observability-mode .momo-content {
+    padding-left: 0.75rem !important;
+    padding-right: 0.75rem !important;
+  }
+
+  .momo-observability-mode .container-fluid > h2:first-child,
+  .momo-observability-mode .obs-hero,
+  .momo-observability-mode .agent-hero,
+  .momo-observability-mode .biz-command,
+  .momo-observability-mode .runtime-hero,
+  .momo-observability-mode .calls-hero,
+  .momo-observability-mode .gov-hero,
+  .momo-observability-mode .gate-hero,
+  .momo-observability-mode .rag-hero,
+  .momo-observability-mode .qa-hero,
+  .momo-observability-mode .quality-hero,
+  .momo-observability-mode .ppt-hero {
+    padding: 0.9rem !important;
+  }
+
+  .momo-observability-mode .obs-command-strip,
+  .momo-observability-mode .agent-command,
+  .momo-observability-mode .biz-signal-grid,
+  .momo-observability-mode .runtime-command,
+  .momo-observability-mode .calls-command,
+  .momo-observability-mode .gov-command,
+  .momo-observability-mode .gate-command,
+  .momo-observability-mode .rag-command,
+  .momo-observability-mode .qa-command,
+  .momo-observability-mode .quality-command,
+  .momo-observability-mode .ppt-command,
+  .momo-observability-mode [class$="-mini-grid"] {
+    grid-template-columns: 1fr !important;
+  }
+}