diff --git a/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/App.razor b/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/App.razor
index 6b932d9..a01fb1b 100644
--- a/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/App.razor
+++ b/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/App.razor
@@ -6,7 +6,7 @@
     <base href="/" />
     <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" />
     <link rel="stylesheet" href="/css/theme.css" />
-    <link rel="stylesheet" href="/css/dashboard.css" />
+    <link rel="stylesheet" href="/css/site.css" />
     <HeadOutlet @rendermode="InteractiveServer" />
 </head>
 <body class="dashboard-body">
diff --git a/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Layout/DashboardLayout.razor b/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Layout/DashboardLayout.razor
deleted file mode 100644
index 8675a69..0000000
--- a/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Layout/DashboardLayout.razor
+++ /dev/null
@@ -1,68 +0,0 @@
-@inherits LayoutComponentBase
-
-<header class="app-bar">
-    <a class="brand" href="/"><span class="mark">&#9646;</span> MXAccess Gateway</a>
-    <span class="crumb">&rsaquo;</span>
-    <span class="crumb">gateway dashboard</span>
-    <span class="spacer"></span>
-    <AuthorizeView>
-        <Authorized Context="authState">
-            <span class="meta">@authState.User.Identity?.Name</span>
-            <span class="conn-pill" data-state="connected">
-                <span class="dot"></span><span>signed in</span>
-            </span>
-        </Authorized>
-        <NotAuthorized>
-            <span class="conn-pill" data-state="disconnected">
-                <span class="dot"></span><span>signed out</span>
-            </span>
-        </NotAuthorized>
-    </AuthorizeView>
-</header>
-
-<div class="app-shell">
-    <nav class="side-rail">
-        <div class="rail-eyebrow">Overview</div>
-        <NavLink class="rail-link" href="/" Match="NavLinkMatch.All">Dashboard</NavLink>
-
-        <div class="rail-eyebrow">Runtime</div>
-        <NavLink class="rail-link" href="/sessions" Match="NavLinkMatch.Prefix">Sessions</NavLink>
-        <NavLink class="rail-link" href="/workers" Match="NavLinkMatch.Prefix">Workers</NavLink>
-        <NavLink class="rail-link" href="/events" Match="NavLinkMatch.Prefix">Events</NavLink>
-        <NavLink class="rail-link" href="/alarms" Match="NavLinkMatch.Prefix">Alarms</NavLink>
-
-        <div class="rail-eyebrow">Galaxy</div>
-        <NavLink class="rail-link" href="/galaxy" Match="NavLinkMatch.Prefix">Repository</NavLink>
-        <NavLink class="rail-link" href="/browse" Match="NavLinkMatch.Prefix">Browse</NavLink>
-
-        <div class="rail-eyebrow">Admin</div>
-        <NavLink class="rail-link" href="/apikeys" Match="NavLinkMatch.Prefix">API keys</NavLink>
-        <NavLink class="rail-link" href="/settings" Match="NavLinkMatch.Prefix">Settings</NavLink>
-
-        <div class="rail-foot">
-            <AuthorizeView>
-                <Authorized Context="authState">
-                    <div class="rail-eyebrow">Session</div>
-                    <div class="rail-user">@authState.User.Identity?.Name</div>
-                    <div class="rail-roles">
-                        @string.Join(", ", authState.User.Claims
-                            .Where(c => c.Type == System.Security.Claims.ClaimTypes.Role)
-                            .Select(c => c.Value))
-                    </div>
-                    <form method="post" action="/logout">
-                        <AntiforgeryToken />
-                        <button class="rail-btn" type="submit">Sign out</button>
-                    </form>
-                </Authorized>
-                <NotAuthorized>
-                    <div class="rail-eyebrow">Session</div>
-                    <a class="rail-btn" href="/login">Sign in</a>
-                </NotAuthorized>
-            </AuthorizeView>
-        </div>
-    </nav>
-
-    <main class="page">
-        @Body
-    </main>
-</div>
diff --git a/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Layout/MainLayout.razor b/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Layout/MainLayout.razor
new file mode 100644
index 0000000..81532ee
--- /dev/null
+++ b/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Layout/MainLayout.razor
@@ -0,0 +1,83 @@
+@inherits LayoutComponentBase
+
+<header class="app-bar">
+    <a class="brand" href="/"><span class="mark">&#9646;</span> MXAccess Gateway</a>
+    <span class="crumb">&rsaquo;</span>
+    <span class="crumb">gateway dashboard</span>
+    <span class="spacer"></span>
+    <AuthorizeView>
+        <Authorized Context="authState">
+            <span class="meta">@authState.User.Identity?.Name</span>
+            <span class="conn-pill" data-state="connected">
+                <span class="dot"></span><span>signed in</span>
+            </span>
+        </Authorized>
+        <NotAuthorized>
+            <span class="conn-pill" data-state="disconnected">
+                <span class="dot"></span><span>signed out</span>
+            </span>
+        </NotAuthorized>
+    </AuthorizeView>
+</header>
+
+@* Hamburger toggle: visible only on viewports <lg. Bootstrap collapse JS lives
+   in bootstrap.bundle.min.js (loaded in App.razor). The app-bar above stays
+   full-width; the hamburger only collapses the side rail. *@
+<button class="btn btn-outline-secondary btn-sm d-lg-none m-2 align-self-start"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#sidebar-collapse"
+        aria-controls="sidebar-collapse"
+        aria-expanded="false"
+        aria-label="Toggle navigation">
+    &#9776;
+</button>
+
+<div class="app-shell">
+    <div class="collapse d-lg-block" id="sidebar-collapse">
+        <nav class="side-rail">
+            <div class="rail-eyebrow">Overview</div>
+            <NavLink class="rail-link" href="/" Match="NavLinkMatch.All">Dashboard</NavLink>
+
+            <div class="rail-eyebrow">Runtime</div>
+            <NavLink class="rail-link" href="/sessions" Match="NavLinkMatch.Prefix">Sessions</NavLink>
+            <NavLink class="rail-link" href="/workers" Match="NavLinkMatch.Prefix">Workers</NavLink>
+            <NavLink class="rail-link" href="/events" Match="NavLinkMatch.Prefix">Events</NavLink>
+            <NavLink class="rail-link" href="/alarms" Match="NavLinkMatch.Prefix">Alarms</NavLink>
+
+            <div class="rail-eyebrow">Galaxy</div>
+            <NavLink class="rail-link" href="/galaxy" Match="NavLinkMatch.Prefix">Repository</NavLink>
+            <NavLink class="rail-link" href="/browse" Match="NavLinkMatch.Prefix">Browse</NavLink>
+
+            <div class="rail-eyebrow">Admin</div>
+            <NavLink class="rail-link" href="/apikeys" Match="NavLinkMatch.Prefix">API keys</NavLink>
+            <NavLink class="rail-link" href="/settings" Match="NavLinkMatch.Prefix">Settings</NavLink>
+
+            <div class="rail-foot">
+                <AuthorizeView>
+                    <Authorized Context="authState">
+                        <div class="rail-eyebrow">Session</div>
+                        <div class="rail-user">@authState.User.Identity?.Name</div>
+                        <div class="rail-roles">
+                            @string.Join(", ", authState.User.Claims
+                                .Where(c => c.Type == System.Security.Claims.ClaimTypes.Role)
+                                .Select(c => c.Value))
+                        </div>
+                        <form method="post" action="/logout">
+                            <AntiforgeryToken />
+                            <button class="rail-btn" type="submit">Sign out</button>
+                        </form>
+                    </Authorized>
+                    <NotAuthorized>
+                        <div class="rail-eyebrow">Session</div>
+                        <a class="rail-btn" href="/login">Sign in</a>
+                    </NotAuthorized>
+                </AuthorizeView>
+            </div>
+        </nav>
+    </div>
+
+    <main class="page">
+        @Body
+    </main>
+</div>
diff --git a/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Pages/ApiKeysPage.razor b/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Pages/ApiKeysPage.razor
index 901b563..e51d4a0 100644
--- a/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Pages/ApiKeysPage.razor
+++ b/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Pages/ApiKeysPage.razor
@@ -55,80 +55,91 @@ else
             <div class="modal fade show api-key-create-modal" role="dialog" aria-modal="true" aria-labelledby="createApiKeyTitle">
                 <div class="modal-dialog modal-xl modal-dialog-scrollable">
                     <div class="modal-content">
-                        <EditForm Model="@CreateModel" OnSubmit="@CreateApiKeyAsync">
-                            <div class="modal-header">
-                                <h2 class="modal-title h5" id="createApiKeyTitle">Create API Key</h2>
-                                <button type="button" class="btn-close" aria-label="Close" @onclick="CloseCreateDialog"></button>
-                            </div>
-                            <div class="modal-body">
-                                <div class="api-key-management-grid">
-                                    <div class="mb-3">
-                                        <label for="keyId" class="form-label">Key ID</label>
-                                        <input id="keyId" class="form-control" @bind="CreateModel.KeyId" @bind:event="oninput" />
-                                    </div>
-                                    <div class="mb-3">
-                                        <label for="displayName" class="form-label">Display Name</label>
-                                        <input id="displayName" class="form-control" @bind="CreateModel.DisplayName" @bind:event="oninput" />
-                                    </div>
-                                </div>
-                                <fieldset class="mb-3">
-                                    <legend class="form-label">Scopes</legend>
-                                    <div class="scope-grid">
-                                        @foreach (string scope in AvailableScopes)
-                                        {
+                        @* Master SiteForm pattern: card-wrapped body with stacked
+                           subsections (h6 text-muted border-bottom). Modal chrome
+                           is kept (close button), but the form-internal layout
+                           now matches ScadaLink's admin forms — form-control-sm,
+                           form-label small, mb-2/mb-3 row wrappers, Save/Cancel
+                           inline at the bottom of the card-body (no modal-footer). *@
+                        <div class="modal-header">
+                            <h2 class="modal-title h5" id="createApiKeyTitle">Create API Key</h2>
+                            <button type="button" class="btn-close" aria-label="Close" @onclick="CloseCreateDialog"></button>
+                        </div>
+                        <div class="modal-body">
+                            <EditForm Model="@CreateModel" OnSubmit="@CreateApiKeyAsync">
+                                <div class="card mb-3">
+                                    <div class="card-body">
+                                        <h6 class="card-title">Create API Key</h6>
+                                        <div class="mb-2">
+                                            <label for="keyId" class="form-label small">Key ID</label>
+                                            <input id="keyId" class="form-control form-control-sm" @bind="CreateModel.KeyId" @bind:event="oninput" />
+                                        </div>
+                                        <div class="mb-3">
+                                            <label for="displayName" class="form-label small">Display Name</label>
+                                            <input id="displayName" class="form-control form-control-sm" @bind="CreateModel.DisplayName" @bind:event="oninput" />
+                                        </div>
+
+                                        <h6 class="text-muted border-bottom pb-1">Scopes</h6>
+                                        <div class="mb-3">
+                                            <div class="scope-grid">
+                                                @foreach (string scope in AvailableScopes)
+                                                {
+                                                    <label class="form-check">
+                                                        <input class="form-check-input" type="checkbox"
+                                                               checked="@IsScopeSelected(scope)"
+                                                               @onchange="eventArgs => SetScope(scope, eventArgs)" />
+                                                        <span class="form-check-label">@scope</span>
+                                                    </label>
+                                                }
+                                            </div>
+                                        </div>
+
+                                        <h6 class="text-muted border-bottom pb-1">Constraints</h6>
+                                        <div class="mb-2">
+                                            <label for="readSubtrees" class="form-label small">Read subtrees</label>
+                                            <textarea id="readSubtrees" class="form-control form-control-sm" rows="2" @bind="CreateModel.ReadSubtrees" @bind:event="oninput"></textarea>
+                                        </div>
+                                        <div class="mb-2">
+                                            <label for="writeSubtrees" class="form-label small">Write subtrees</label>
+                                            <textarea id="writeSubtrees" class="form-control form-control-sm" rows="2" @bind="CreateModel.WriteSubtrees" @bind:event="oninput"></textarea>
+                                        </div>
+                                        <div class="mb-2">
+                                            <label for="readTagGlobs" class="form-label small">Read tag globs</label>
+                                            <textarea id="readTagGlobs" class="form-control form-control-sm" rows="2" @bind="CreateModel.ReadTagGlobs" @bind:event="oninput"></textarea>
+                                        </div>
+                                        <div class="mb-2">
+                                            <label for="writeTagGlobs" class="form-label small">Write tag globs</label>
+                                            <textarea id="writeTagGlobs" class="form-control form-control-sm" rows="2" @bind="CreateModel.WriteTagGlobs" @bind:event="oninput"></textarea>
+                                        </div>
+                                        <div class="mb-2">
+                                            <label for="browseSubtrees" class="form-label small">Browse subtrees</label>
+                                            <textarea id="browseSubtrees" class="form-control form-control-sm" rows="2" @bind="CreateModel.BrowseSubtrees" @bind:event="oninput"></textarea>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label for="maxWriteClassification" class="form-label small">Max write classification</label>
+                                            <input id="maxWriteClassification" class="form-control form-control-sm" @bind="CreateModel.MaxWriteClassification" @bind:event="oninput" />
+                                        </div>
+
+                                        <h6 class="text-muted border-bottom pb-1">Filters</h6>
+                                        <div class="mb-3 d-flex flex-wrap gap-3">
                                             <label class="form-check">
-                                                <input class="form-check-input" type="checkbox"
-                                                       checked="@IsScopeSelected(scope)"
-                                                       @onchange="eventArgs => SetScope(scope, eventArgs)" />
-                                                <span class="form-check-label">@scope</span>
+                                                <InputCheckbox class="form-check-input" @bind-Value="CreateModel.ReadAlarmOnly" />
+                                                <span class="form-check-label">Read alarm only</span>
                                             </label>
-                                        }
-                                    </div>
-                                </fieldset>
-                                <div class="api-key-management-grid">
-                                    <div class="mb-3">
-                                        <label for="readSubtrees" class="form-label">Read subtrees</label>
-                                        <textarea id="readSubtrees" class="form-control" rows="2" @bind="CreateModel.ReadSubtrees" @bind:event="oninput"></textarea>
-                                    </div>
-                                    <div class="mb-3">
-                                        <label for="writeSubtrees" class="form-label">Write subtrees</label>
-                                        <textarea id="writeSubtrees" class="form-control" rows="2" @bind="CreateModel.WriteSubtrees" @bind:event="oninput"></textarea>
-                                    </div>
-                                    <div class="mb-3">
-                                        <label for="readTagGlobs" class="form-label">Read tag globs</label>
-                                        <textarea id="readTagGlobs" class="form-control" rows="2" @bind="CreateModel.ReadTagGlobs" @bind:event="oninput"></textarea>
-                                    </div>
-                                    <div class="mb-3">
-                                        <label for="writeTagGlobs" class="form-label">Write tag globs</label>
-                                        <textarea id="writeTagGlobs" class="form-control" rows="2" @bind="CreateModel.WriteTagGlobs" @bind:event="oninput"></textarea>
-                                    </div>
-                                    <div class="mb-3">
-                                        <label for="browseSubtrees" class="form-label">Browse subtrees</label>
-                                        <textarea id="browseSubtrees" class="form-control" rows="2" @bind="CreateModel.BrowseSubtrees" @bind:event="oninput"></textarea>
-                                    </div>
-                                    <div class="mb-3">
-                                        <label for="maxWriteClassification" class="form-label">Max write classification</label>
-                                        <input id="maxWriteClassification" class="form-control" @bind="CreateModel.MaxWriteClassification" @bind:event="oninput" />
+                                            <label class="form-check">
+                                                <InputCheckbox class="form-check-input" @bind-Value="CreateModel.ReadHistorizedOnly" />
+                                                <span class="form-check-label">Read historized only</span>
+                                            </label>
+                                        </div>
+
+                                        <div class="mt-3">
+                                            <button type="submit" class="btn btn-success btn-sm me-1" disabled="@IsBusy">Save</button>
+                                            <button type="button" class="btn btn-outline-secondary btn-sm" disabled="@IsBusy" @onclick="CloseCreateDialog">Cancel</button>
+                                        </div>
                                     </div>
                                 </div>
-                                <div class="d-flex flex-wrap gap-3">
-                                    <label class="form-check">
-                                        <InputCheckbox class="form-check-input" @bind-Value="CreateModel.ReadAlarmOnly" />
-                                        <span class="form-check-label">Read alarm only</span>
-                                    </label>
-                                    <label class="form-check">
-                                        <InputCheckbox class="form-check-input" @bind-Value="CreateModel.ReadHistorizedOnly" />
-                                        <span class="form-check-label">Read historized only</span>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="modal-footer">
-                                <button type="button" class="btn btn-outline-secondary" disabled="@IsBusy" @onclick="CloseCreateDialog">
-                                    Cancel
-                                </button>
-                                <button type="submit" class="btn btn-primary" disabled="@IsBusy">Create Key</button>
-                            </div>
-                        </EditForm>
+                            </EditForm>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Routes.razor b/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Routes.razor
index 26437ec..d68962b 100644
--- a/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Routes.razor
+++ b/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Routes.razor
@@ -1,10 +1,10 @@
 <Router AppAssembly="@typeof(Routes).Assembly">
     <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(DashboardLayout)" />
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
         <FocusOnNavigate RouteData="@routeData" Selector="h1" />
     </Found>
     <NotFound>
-        <LayoutView Layout="@typeof(DashboardLayout)">
+        <LayoutView Layout="@typeof(MainLayout)">
             <PageTitle>Dashboard - Not Found</PageTitle>
             <section class="dashboard-section">
                 <h1 class="h4 mb-3">Not Found</h1>
diff --git a/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Shared/MetricCard.razor b/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Shared/MetricCard.razor
index f3069b5..0dfee47 100644
--- a/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Shared/MetricCard.razor
+++ b/src/ZB.MOM.WW.MxGateway.Server/Dashboard/Components/Shared/MetricCard.razor
@@ -1,10 +1,10 @@
-<div class="card metric-card h-100@(Wide ? " metric-card-wide" : string.Empty)">
+<div class="card agg-card h-100@(Wide ? " agg-card-wide" : string.Empty)">
     <div class="card-body">
-        <div class="metric-label">@Label</div>
-        <div class="metric-value">@Value</div>
+        <div class="agg-label">@Label</div>
+        <div class="agg-value">@Value</div>
         @if (!string.IsNullOrWhiteSpace(Detail))
         {
-            <div class="metric-detail">@Detail</div>
+            <div class="agg-sub">@Detail</div>
         }
     </div>
 </div>
diff --git a/src/ZB.MOM.WW.MxGateway.Server/Dashboard/DashboardEndpointRouteBuilderExtensions.cs b/src/ZB.MOM.WW.MxGateway.Server/Dashboard/DashboardEndpointRouteBuilderExtensions.cs
index b1e02f3..9776351 100644
--- a/src/ZB.MOM.WW.MxGateway.Server/Dashboard/DashboardEndpointRouteBuilderExtensions.cs
+++ b/src/ZB.MOM.WW.MxGateway.Server/Dashboard/DashboardEndpointRouteBuilderExtensions.cs
@@ -205,7 +205,7 @@ public static class DashboardEndpointRouteBuilderExtensions
                 <title>{HtmlEncoder.Default.Encode(title)}</title>
                 <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" />
                 <link rel="stylesheet" href="/css/theme.css" />
-                <link rel="stylesheet" href="/css/dashboard.css" />
+                <link rel="stylesheet" href="/css/site.css" />
             </head>
             <body class="dashboard-body">
                 <header class="app-bar">
diff --git a/src/ZB.MOM.WW.MxGateway.Server/wwwroot/css/dashboard.css b/src/ZB.MOM.WW.MxGateway.Server/wwwroot/css/site.css
similarity index 92%
rename from src/ZB.MOM.WW.MxGateway.Server/wwwroot/css/dashboard.css
rename to src/ZB.MOM.WW.MxGateway.Server/wwwroot/css/site.css
index b255318..1c5d799 100644
--- a/src/ZB.MOM.WW.MxGateway.Server/wwwroot/css/dashboard.css
+++ b/src/ZB.MOM.WW.MxGateway.Server/wwwroot/css/site.css
@@ -16,7 +16,8 @@ body.dashboard-body { min-height: 100vh; }
 .app-bar .brand:hover { text-decoration: none; }
 
 /* ── App shell ───────────────────────────────────────────────────────────────
-   Two-column layout: fixed-width side rail (218px) + flexible main column. */
+   Two-column layout: fixed-width side rail (220px) + flexible main column.
+   Becomes single-column under <lg viewports — see media queries below. */
 .app-shell {
   display: flex;
   align-items: stretch;
@@ -28,8 +29,8 @@ body.dashboard-body { min-height: 100vh; }
    Left-rail navigation with eyebrow section headings, a footer session
    block, and active-route accent. */
 .side-rail {
-  width: 218px;
-  flex: 0 0 218px;
+  width: 220px;
+  flex: 0 0 220px;
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
@@ -38,6 +39,32 @@ body.dashboard-body { min-height: 100vh; }
   border-right: 1px solid var(--rule-strong);
 }
 
+/* Sidebar collapse wrapper: on lg+ it stays sticky to the viewport so the rail
+   remains visible when main content scrolls past 100vh (matches master). On
+   <lg viewports the Bootstrap .collapse class drives show/hide and the rail
+   spans full width — see the max-width media query below. */
+@media (min-width: 992px) {
+  #sidebar-collapse {
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    align-self: flex-start;
+    z-index: 1020;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .app-shell { flex-direction: column; }
+  #sidebar-collapse { width: 100%; }
+  .side-rail {
+    width: 100%;
+    flex: 0 0 auto;
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--rule-strong);
+  }
+}
+
 .rail-eyebrow {
   font-size: 0.68rem;
   font-weight: 600;
@@ -127,9 +154,10 @@ body.dashboard-body { min-height: 100vh; }
   color: var(--ink-faint);
 }
 
-/* ── KPI / metric cards ──────────────────────────────────────────────────────
-   The MetricCard component renders .metric-card with label/value/detail; this
-   is the technical-light aggregate card — uppercase eyebrow, big mono number. */
+/* ── KPI / aggregate cards ───────────────────────────────────────────────────
+   The MetricCard component renders .agg-card with label/value/sub; this is
+   the technical-light aggregate card — uppercase eyebrow, big mono number.
+   Class names align with master (ScadaLink CentralUI) for consistency. */
 .metric-grid {
   display: grid;
   gap: 0.75rem;
@@ -140,23 +168,23 @@ body.dashboard-body { min-height: 100vh; }
 }
 .metric-grid.compact { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
 
-.metric-card {
+.agg-card {
   background: var(--card);
   border: 1px solid var(--rule);
   border-radius: 8px;
   box-shadow: none;
 }
-.metric-card .card-body { padding: 0.7rem 0.9rem; }
-.metric-label {
+.agg-card .card-body { padding: 0.7rem 0.9rem; }
+.agg-label {
   font-size: 0.68rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.07em;
   color: var(--ink-faint);
 }
-.metric-card-wide { grid-column: span 2; }
+.agg-card-wide { grid-column: span 2; }
 
-.metric-value {
+.agg-value {
   margin-top: 0.25rem;
   font-family: var(--mono);
   font-variant-numeric: tabular-nums;
@@ -167,7 +195,7 @@ body.dashboard-body { min-height: 100vh; }
   /* break-word, not anywhere: keep date/number tokens whole, wrap at spaces. */
   overflow-wrap: break-word;
 }
-.metric-detail {
+.agg-sub {
   margin-top: 0.15rem;
   font-size: 0.78rem;
   color: var(--ink-faint);
