Align observability UI with V3 spec

static/css/observability-system.css

@@ -20,13 +20,13 @@
   --obs-amber: #b8792f;
   --obs-red: #b94b45;
   --obs-blue: #4f6f8f;
-  --obs-radius-lg: 24px;
-  --obs-radius-md: 18px;
+  --obs-radius-lg: 8px;
+  --obs-radius-md: 8px;
   --obs-shadow: 0 18px 44px rgba(70, 46, 28, 0.09);
   --obs-dot:
     radial-gradient(circle, rgba(201, 100, 66, 0.18) 1px, transparent 1.3px);
-  --obs-title-size: clamp(1.9rem, 3.2vw, 2.75rem);
-  --obs-value-size: clamp(1.45rem, 2.8vw, 2.25rem);
+  --obs-title-size: 2.25rem;
+  --obs-value-size: 2rem;
 }
 
 .momo-observability-mode .momo-content {
@@ -1081,3 +1081,228 @@
     grid-template-columns: 1fr !important;
   }
 }
+
+/* v3 alignment: the observability cockpit must obey the same production UI
+ * guardrails as the refreshed V3 pages, even when older page-level inline CSS
+ * is still present in individual templates.
+ */
+.momo-observability-mode {
+  --obs-title-size: 2.25rem;
+  --obs-value-size: 2rem;
+  --obs-radius-lg: 8px;
+  --obs-radius-md: 8px;
+  --obs-card: rgba(255, 252, 246, 0.94);
+  --obs-surface-warm: rgba(255, 248, 238, 0.72);
+  --obs-surface-glass: rgba(255, 252, 246, 0.82);
+}
+
+.momo-observability-mode .momo-content {
+  background:
+    var(--obs-dot),
+    linear-gradient(180deg, rgba(255, 248, 239, 0.72), rgba(255, 253, 248, 0.96)) !important;
+  background-size: 18px 18px, auto !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 .quality-hero,
+.momo-observability-mode .ppt-hero {
+  border-radius: 8px !important;
+  background:
+    linear-gradient(135deg, rgba(255, 248, 239, 0.98), rgba(247, 234, 219, 0.88)) !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 .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 .quality-panel,
+.momo-observability-mode .ppt-panel,
+.momo-observability-mode .obs-table-shell,
+.momo-observability-mode [class$="-table-shell"],
+.momo-observability-mode .agent-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-radius: 8px !important;
+}
+
+.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 .quality-panel,
+.momo-observability-mode .ppt-panel,
+.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 .quality-signal,
+.momo-observability-mode .ppt-signal {
+  background:
+    linear-gradient(180deg, rgba(255, 252, 246, 0.96), rgba(255, 248, 241, 0.9)) !important;
+}
+
+.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 .quality-title,
+.momo-observability-mode .ppt-title {
+  font-size: var(--obs-title-size) !important;
+  letter-spacing: 0 !important;
+  line-height: 1.14 !important;
+}
+
+.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 .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-size: var(--obs-value-size) !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 .quality-panel-title,
+.momo-observability-mode .ppt-panel-title,
+.momo-observability-mode [class$="-table-title"] h3,
+.momo-observability-mode .card-title {
+  font-size: 1.1rem !important;
+  letter-spacing: 0 !important;
+}
+
+.momo-observability-mode .btn,
+.momo-observability-mode .form-control,
+.momo-observability-mode .form-select {
+  border-radius: 8px !important;
+}
+
+.momo-observability-mode .table tbody td:first-child,
+.momo-observability-mode table tbody td:first-child {
+  border-radius: 8px 0 0 8px !important;
+}
+
+.momo-observability-mode .table tbody td:last-child,
+.momo-observability-mode table tbody td:last-child {
+  border-radius: 0 8px 8px 0 !important;
+}
+
+@media (max-width: 768px) {
+  .momo-observability-mode {
+    --obs-title-size: 1.75rem;
+    --obs-value-size: 1.55rem;
+  }
+
+  .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 .quality-command,
+  .momo-observability-mode .ppt-command {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+    gap: 0.65rem !important;
+  }
+
+  .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 .quality-hero,
+  .momo-observability-mode .ppt-hero {
+    padding: 1rem !important;
+  }
+
+  .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 .quality-signal,
+  .momo-observability-mode .ppt-signal {
+    min-height: 84px !important;
+    padding: 0.78rem !important;
+  }
+}