feat(monitor/frontend): ethos-aligned base styles (zero rounding, density, tabular nums)

PROJECTS/advanced/monitor-the-situation-dashboard/frontend/index.html

@@ -22,8 +22,9 @@
     />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
     />
+    <meta name="color-scheme" content="dark" />
     <title>Monitor The Situation Dashboard</title>
     <meta
       name="description"

PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/styles.scss

@@ -11,19 +11,46 @@
 @use 'styles/tokens' as *;
 @use 'styles/fonts' as *;
 
+// Ethos-aligned base for the dashboard surface. Auth pages override
+// with their own per-module styles (template residue — left alone).
+html, body {
+  background: var(--bg);
+  color: var(--fg-1);
+  font-family: var(--font-sans);
+  font-size: var(--type-body);
+  line-height: var(--line-height-tight);
+  font-feature-settings: "tnum" 1, "ss01" 1;   // tabular numbers everywhere
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--fg-4);
+}
+::-webkit-scrollbar-track {
+  background: var(--bg);
+}
+
 #root {
   min-height: 100vh;
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
-  background: $bg-default;
+  background: var(--bg);
 }
 
 .app {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background: $bg-default;
+  background: var(--bg);
-  color: $text-default;
+  color: var(--fg-1);
-  font-family: $font-sans;
+  font-family: var(--font-sans);
 }