From 482d5f5637335b7c84b15db3c31536aab9c96125 Mon Sep 17 00:00:00 2001
From: Joseph Doherty <dohejw01@gmail.com>
Date: Mon, 18 May 2026 02:20:09 -0400
Subject: [PATCH] feat: restyle Admin UI with the technical-light design system
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adopt the technical-light design system across the Admin web UI:

- Vendor theme.css + IBM Plex woff2 fonts into wwwroot; include
  theme.css globally after Bootstrap.
- Rebuild MainLayout: top app-bar (brand mark, breadcrumb, connection
  pill) + hairline-ruled side rail with accent-bordered active link.
- Convert all 33 pages to the component catalog — tables to
  panel + data-table (num/mono columns), KPI cards to agg-grid,
  detail blocks to metric-card/kv rows, badges to chips, alerts to
  panel notice, headings to page-title/panel-head, .rise reveals.
- Buttons/forms stay on Bootstrap; theme.css restyles them via
  --bs-* overrides. View-specific layout lives in app.css; all
  colour/type comes from theme.css tokens.

Also fix a pre-existing /fleet 500: the node-state query ordered on
a property of a constructed FleetNodeRow record, which EF Core
cannot translate. Order the join's columns before projecting.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../Components/App.razor                      |   1 +
 .../Components/Layout/MainLayout.razor        |  62 ++-
 .../Components/Pages/Account.razor            | 135 +++----
 .../Components/Pages/AlarmsHistorian.razor    |  68 ++--
 .../Components/Pages/Certificates.razor       | 118 +++---
 .../Components/Pages/Clusters/AclsTab.razor   |  98 ++---
 .../Components/Pages/Clusters/AuditTab.razor  |  39 +-
 .../Pages/Clusters/ClusterDetail.razor        |  37 +-
 .../Pages/Clusters/ClustersList.razor         |  59 +--
 .../Pages/Clusters/DiffSection.razor          |  38 +-
 .../Pages/Clusters/DiffViewer.razor           |   6 +-
 .../Pages/Clusters/DraftEditor.razor          |  22 +-
 .../Pages/Clusters/DriversTab.razor           |  68 ++--
 .../Pages/Clusters/EquipmentTab.razor         |  79 ++--
 .../Pages/Clusters/Generations.razor          |  73 ++--
 .../Pages/Clusters/IdentificationFields.razor |   2 +-
 .../Pages/Clusters/ImportEquipment.razor      |  67 ++--
 .../Pages/Clusters/NamespacesTab.razor        |  39 +-
 .../Pages/Clusters/NewCluster.razor           |   4 +-
 .../Pages/Clusters/RedundancyTab.razor        | 150 +++----
 .../Pages/Clusters/ScriptEditor.razor         |   2 +-
 .../Pages/Clusters/ScriptsTab.razor           |  38 +-
 .../Components/Pages/Clusters/TagsTab.razor   |  87 ++--
 .../Components/Pages/Clusters/UnsTab.razor    | 148 +++----
 .../Pages/Drivers/FocasDetail.razor           | 267 ++++++------
 .../Components/Pages/Fleet.razor              | 128 +++---
 .../Components/Pages/Home.razor               |  93 +++--
 .../Components/Pages/Hosts.razor              | 160 ++++----
 .../Components/Pages/Login.razor              |  52 +--
 .../Pages/Modbus/ModbusAddressEditor.razor    |  16 +-
 .../Pages/Modbus/ModbusAddressPreview.razor   |  67 ++--
 .../Pages/Modbus/ModbusDiagnostics.razor      | 134 ++++---
 .../Pages/Modbus/ModbusOptionsEditor.razor    |  40 +-
 .../Components/Pages/Reservations.razor       |  92 +++--
 .../Components/Pages/RoleGrants.razor         |  67 ++--
 .../ZB.MOM.WW.OtOpcUa.Admin/wwwroot/app.css   | 108 ++++-
 .../wwwroot/fonts/ibm-plex-mono-500.woff2     | Bin 0 -> 14988 bytes
 .../wwwroot/fonts/ibm-plex-sans-400.woff2     | Bin 0 -> 19156 bytes
 .../wwwroot/fonts/ibm-plex-sans-600.woff2     | Bin 0 -> 20356 bytes
 .../ZB.MOM.WW.OtOpcUa.Admin/wwwroot/theme.css | 379 ++++++++++++++++++
 40 files changed, 1837 insertions(+), 1206 deletions(-)
 create mode 100644 src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/fonts/ibm-plex-mono-500.woff2
 create mode 100644 src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/fonts/ibm-plex-sans-400.woff2
 create mode 100644 src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/fonts/ibm-plex-sans-600.woff2
 create mode 100644 src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/theme.css

diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/App.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/App.razor
index 96b0ea4..b77ac80 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/App.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/App.razor
@@ -7,6 +7,7 @@
     <title>OtOpcUa Admin</title>
     <base href="/"/>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="theme.css"/>
     <link rel="stylesheet" href="app.css"/>
     <HeadOutlet/>
 </head>
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Layout/MainLayout.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Layout/MainLayout.razor
index 1007b88..700e89e 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Layout/MainLayout.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Layout/MainLayout.razor
@@ -1,38 +1,58 @@
 @inherits LayoutComponentBase
 
-<div class="d-flex" style="min-height: 100vh;">
-    <nav class="bg-dark text-light p-3" style="width: 220px;">
-        <h5 class="mb-4">OtOpcUa Admin</h5>
-        <ul class="nav flex-column">
-            <li class="nav-item"><a class="nav-link text-light" href="/">Overview</a></li>
-            <li class="nav-item"><a class="nav-link text-light" href="/fleet">Fleet status</a></li>
-            <li class="nav-item"><a class="nav-link text-light" href="/hosts">Host status</a></li>
-            <li class="nav-item"><a class="nav-link text-light" href="/clusters">Clusters</a></li>
-            <li class="nav-item"><a class="nav-link text-light" href="/reservations">Reservations</a></li>
-            <li class="nav-item"><a class="nav-link text-light" href="/certificates">Certificates</a></li>
-            <li class="nav-item"><a class="nav-link text-light" href="/role-grants">Role grants</a></li>
-        </ul>
+<header class="app-bar">
+    <span class="brand"><span class="mark">&#9646;</span> OtOpcUa</span>
+    <span class="crumb">&rsaquo;</span>
+    <span class="crumb">admin console</span>
+    <span class="spacer"></span>
+    <AuthorizeView>
+        <Authorized>
+            <span class="meta">@context.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="mt-5">
+<div class="app-shell">
+    <nav class="side-rail">
+        <div class="rail-eyebrow">Navigation</div>
+        <NavLink class="rail-link" href="/" Match="NavLinkMatch.All">Overview</NavLink>
+        <NavLink class="rail-link" href="/fleet" Match="NavLinkMatch.Prefix">Fleet status</NavLink>
+        <NavLink class="rail-link" href="/hosts" Match="NavLinkMatch.Prefix">Host status</NavLink>
+        <NavLink class="rail-link" href="/clusters" Match="NavLinkMatch.Prefix">Clusters</NavLink>
+        <NavLink class="rail-link" href="/reservations" Match="NavLinkMatch.Prefix">Reservations</NavLink>
+        <NavLink class="rail-link" href="/certificates" Match="NavLinkMatch.Prefix">Certificates</NavLink>
+        <NavLink class="rail-link" href="/role-grants" Match="NavLinkMatch.Prefix">Role grants</NavLink>
+
+        <div class="rail-foot">
             <AuthorizeView>
                 <Authorized>
-                    <div class="small text-light">
-                        Signed in as <a class="text-light" href="/account"><strong>@context.User.Identity?.Name</strong></a>
-                    </div>
-                    <div class="small text-muted">
-                        @string.Join(", ", context.User.Claims.Where(c => c.Type.EndsWith("/role")).Select(c => c.Value))
+                    <div class="rail-eyebrow">Session</div>
+                    <a class="rail-user" href="/account">@context.User.Identity?.Name</a>
+                    <div class="rail-roles">
+                        @string.Join(", ", context.User.Claims
+                            .Where(c => c.Type.EndsWith("/role")).Select(c => c.Value))
                     </div>
                     <form method="post" action="/auth/logout">
-                        <button class="btn btn-sm btn-outline-light mt-2" type="submit">Sign out</button>
+                        <button class="rail-btn" type="submit">Sign out</button>
                     </form>
                 </Authorized>
                 <NotAuthorized>
-                    <a class="btn btn-sm btn-outline-light" href="/login">Sign in</a>
+                    <div class="rail-eyebrow">Session</div>
+                    <a class="rail-btn" href="/login">Sign in</a>
                 </NotAuthorized>
             </AuthorizeView>
         </div>
     </nav>
-    <main class="flex-grow-1 p-4">
+
+    <main class="page">
         @Body
     </main>
 </div>
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Account.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Account.razor
index 16aef4c..30066d1 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Account.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Account.razor
@@ -3,7 +3,7 @@
 @using System.Security.Claims
 @using ZB.MOM.WW.OtOpcUa.Admin.Services
 
-<h1 class="mb-4">My account</h1>
+<h1 class="page-title">My account</h1>
 
 <AuthorizeView>
     <Authorized>
@@ -16,83 +16,74 @@
                 .Where(c => c.Type == "ldap_group").Select(c => c.Value).ToList();
         }
 
-        <div class="row g-4">
-            <div class="col-md-6">
-                <div class="card">
-                    <div class="card-body">
-                        <h5 class="card-title">Identity</h5>
-                        <dl class="row mb-0">
-                            <dt class="col-sm-4">Username</dt><dd class="col-sm-8"><code>@username</code></dd>
-                            <dt class="col-sm-4">Display name</dt><dd class="col-sm-8">@displayName</dd>
-                        </dl>
-                    </div>
-                </div>
+        <section class="card-grid rise" style="animation-delay:.02s">
+            <div class="metric-card">
+                <div class="panel-head">Identity</div>
+                <div class="kv"><span class="k">Username</span><span class="v mono">@username</span></div>
+                <div class="kv"><span class="k">Display name</span><span class="v">@displayName</span></div>
             </div>
 
-            <div class="col-md-6">
-                <div class="card">
-                    <div class="card-body">
-                        <h5 class="card-title">Admin roles</h5>
-                        @if (roles.Count == 0)
-                        {
-                            <p class="text-muted mb-0">No Admin roles mapped — sign-in would have been blocked, so if you're seeing this, the session claim is likely stale.</p>
-                        }
-                        else
-                        {
-                            <div class="mb-2">
-                                @foreach (var r in roles)
-                                {
-                                    <span class="badge bg-primary me-1">@r</span>
-                                }
-                            </div>
-                            <small class="text-muted">LDAP groups: @(ldapGroups.Count == 0 ? "(none surfaced)" : string.Join(", ", ldapGroups))</small>
-                        }
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-12">
-                <div class="card">
-                    <div class="card-body">
-                        <h5 class="card-title">Capabilities</h5>
-                        <p class="text-muted small">
-                            Each Admin role grants a fixed capability set per <code>admin-ui.md</code> §Admin Roles.
-                            Pages below reflect what this session can access; the route's <code>[Authorize]</code> guard
-                            is the ground truth — this table mirrors it for readability.
-                        </p>
-                        <table class="table table-sm align-middle mb-0">
-                            <thead>
-                                <tr>
-                                    <th>Capability</th>
-                                    <th>Required role(s)</th>
-                                    <th class="text-end">You have it?</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                            @foreach (var cap in Capabilities)
+            <div class="metric-card">
+                <div class="panel-head">Admin roles</div>
+                @if (roles.Count == 0)
+                {
+                    <div class="kv"><span class="k">Roles</span><span class="v text-muted">No Admin roles mapped — sign-in would have been blocked, so if you're seeing this, the session claim is likely stale.</span></div>
+                }
+                else
+                {
+                    <div class="kv">
+                        <span class="k">Roles</span>
+                        <span class="v">
+                            @foreach (var r in roles)
                             {
-                                var has = cap.RequiredRoles.Any(r => roles.Contains(r, StringComparer.OrdinalIgnoreCase));
-                                <tr>
-                                    <td>@cap.Name<br /><small class="text-muted">@cap.Description</small></td>
-                                    <td>@string.Join(" or ", cap.RequiredRoles)</td>
-                                    <td class="text-end">
-                                        @if (has)
-                                        {
-                                            <span class="badge bg-success">Yes</span>
-                                        }
-                                        else
-                                        {
-                                            <span class="badge bg-secondary">No</span>
-                                        }
-                                    </td>
-                                </tr>
+                                <span class="chip chip-idle me-1">@r</span>
                             }
-                            </tbody>
-                        </table>
+                        </span>
                     </div>
-                </div>
+                    <div class="kv"><span class="k">LDAP groups</span><span class="v">@(ldapGroups.Count == 0 ? "(none surfaced)" : string.Join(", ", ldapGroups))</span></div>
+                }
             </div>
-        </div>
+        </section>
+
+        <section class="panel rise" style="animation-delay:.08s">
+            <div class="panel-head">Capabilities</div>
+            <p class="px-3 pt-2 text-muted small">
+                Each Admin role grants a fixed capability set per <span class="mono">admin-ui.md</span> §Admin Roles.
+                Pages below reflect what this session can access; the route's <span class="mono">[Authorize]</span> guard
+                is the ground truth — this table mirrors it for readability.
+            </p>
+            <div class="table-wrap">
+                <table class="data-table">
+                    <thead>
+                        <tr>
+                            <th>Capability</th>
+                            <th>Required role(s)</th>
+                            <th class="text-end">You have it?</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    @foreach (var cap in Capabilities)
+                    {
+                        var has = cap.RequiredRoles.Any(r => roles.Contains(r, StringComparer.OrdinalIgnoreCase));
+                        <tr>
+                            <td>@cap.Name<br /><small class="text-muted">@cap.Description</small></td>
+                            <td>@string.Join(" or ", cap.RequiredRoles)</td>
+                            <td class="text-end">
+                                @if (has)
+                                {
+                                    <span class="chip chip-ok">Yes</span>
+                                }
+                                else
+                                {
+                                    <span class="chip chip-idle">No</span>
+                                }
+                            </td>
+                        </tr>
+                    }
+                    </tbody>
+                </table>
+            </div>
+        </section>
 
         <div class="mt-4">
             <form method="post" action="/auth/logout">
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/AlarmsHistorian.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/AlarmsHistorian.razor
index b8dcbfe..c591b86 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/AlarmsHistorian.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/AlarmsHistorian.razor
@@ -3,40 +3,36 @@
 @using ZB.MOM.WW.OtOpcUa.Core.AlarmHistorian
 @inject HistorianDiagnosticsService Diag
 
-<h1>Alarm historian</h1>
+<h1 class="page-title">Alarm historian</h1>
 <p class="text-muted">Local store-and-forward queue that ships alarm events to Aveva Historian via Galaxy.Host.</p>
 
-<div class="card mb-3">
-    <div class="card-body">
-        <div class="row">
-            <div class="col-md-3">
-                <small class="text-muted">Drain state</small>
-                <h4><span class="badge @BadgeFor(_status.DrainState)">@_status.DrainState</span></h4>
-            </div>
-            <div class="col-md-3">
-                <small class="text-muted">Queue depth</small>
-                <h4>@_status.QueueDepth.ToString("N0")</h4>
-            </div>
-            <div class="col-md-3">
-                <small class="text-muted">Dead-letter depth</small>
-                <h4 class="@(_status.DeadLetterDepth > 0 ? "text-warning" : "")">@_status.DeadLetterDepth.ToString("N0")</h4>
-            </div>
-            <div class="col-md-3">
-                <small class="text-muted">Last success</small>
-                <h4>@(_status.LastSuccessUtc?.ToString("u") ?? "—")</h4>
-            </div>
-        </div>
-
-        @if (!string.IsNullOrEmpty(_status.LastError))
-        {
-            <div class="alert alert-warning mt-3 mb-0">
-                <strong>Last error:</strong> @_status.LastError
-            </div>
-        }
+<section class="agg-grid rise" style="animation-delay:.02s">
+    <div class="agg-card">
+        <div class="agg-label">Drain state</div>
+        <div class="agg-value"><span class="chip @BadgeFor(_status.DrainState)">@_status.DrainState</span></div>
     </div>
-</div>
+    <div class="agg-card">
+        <div class="agg-label">Queue depth</div>
+        <div class="agg-value numeric">@_status.QueueDepth.ToString("N0")</div>
+    </div>
+    <div class="agg-card">
+        <div class="agg-label">Dead-letter depth</div>
+        <div class="agg-value numeric">@_status.DeadLetterDepth.ToString("N0")</div>
+    </div>
+    <div class="agg-card">
+        <div class="agg-label">Last success</div>
+        <div class="agg-value">@(_status.LastSuccessUtc?.ToString("u") ?? "—")</div>
+    </div>
+</section>
 
-<div class="d-flex gap-2">
+@if (!string.IsNullOrEmpty(_status.LastError))
+{
+    <section class="panel notice rise" style="animation-delay:.08s">
+        <strong>Last error:</strong> @_status.LastError
+    </section>
+}
+
+<div class="d-flex gap-2 mt-3">
     <button class="btn btn-outline-secondary" @onclick="RefreshAsync">Refresh</button>
     <button class="btn btn-warning" disabled="@(_status.DeadLetterDepth == 0)" @onclick="RetryDeadLetteredAsync">
         Retry dead-lettered (@_status.DeadLetterDepth)
@@ -45,7 +41,7 @@
 
 @if (_retryResult is not null)
 {
-    <div class="alert alert-success mt-3">Requeued @_retryResult row(s) for retry.</div>
+    <section class="panel notice rise" style="animation-delay:.08s">Requeued @_retryResult row(s) for retry.</section>
 }
 
 @code {
@@ -70,10 +66,10 @@
 
     private static string BadgeFor(HistorianDrainState s) => s switch
     {
-        HistorianDrainState.Idle => "bg-success",
-        HistorianDrainState.Draining => "bg-info",
-        HistorianDrainState.BackingOff => "bg-warning text-dark",
-        HistorianDrainState.Disabled => "bg-secondary",
-        _ => "bg-secondary",
+        HistorianDrainState.Idle => "chip-ok",
+        HistorianDrainState.Draining => "chip-idle",
+        HistorianDrainState.BackingOff => "chip-warn",
+        HistorianDrainState.Disabled => "chip-idle",
+        _ => "chip-idle",
     };
 }
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Certificates.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Certificates.razor
index 8a2ee6b..6a45102 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Certificates.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Certificates.razor
@@ -5,11 +5,11 @@
 @inject AuthenticationStateProvider AuthState
 @inject ILogger<Certificates> Log
 
-<h1 class="mb-4">Certificate trust</h1>
+<h1 class="page-title">Certificate trust</h1>
 
-<div class="alert alert-info small mb-4">
-    PKI store root <code>@Certs.PkiStoreRoot</code>. Trusting a rejected cert moves the file into the trusted store — the OPC UA server picks up the change on the next client handshake, so operators should retry the rejected client's connection after trusting.
-</div>
+<section class="panel notice rise" style="animation-delay:.02s">
+    PKI store root <span class="mono">@Certs.PkiStoreRoot</span>. Trusting a rejected cert moves the file into the trusted store — the OPC UA server picks up the change on the next client handshake, so operators should retry the rejected client's connection after trusting.
+</section>
 
 @if (_status is not null)
 {
@@ -19,58 +19,66 @@
     </div>
 }
 
-<h2 class="h4">Rejected (@_rejected.Count)</h2>
-@if (_rejected.Count == 0)
-{
-    <p class="text-muted">No rejected certificates. Clients that fail to handshake with an untrusted cert land here.</p>
-}
-else
-{
-    <table class="table table-sm align-middle">
-        <thead><tr><th>Subject</th><th>Issuer</th><th>Thumbprint</th><th>Valid</th><th class="text-end">Actions</th></tr></thead>
-        <tbody>
-        @foreach (var c in _rejected)
-        {
-            <tr>
-                <td>@c.Subject</td>
-                <td>@c.Issuer</td>
-                <td><code class="small">@c.Thumbprint</code></td>
-                <td class="small">@c.NotBefore.ToString("yyyy-MM-dd") → @c.NotAfter.ToString("yyyy-MM-dd")</td>
-                <td class="text-end">
-                    <button class="btn btn-sm btn-success me-1" @onclick="() => TrustAsync(c)">Trust</button>
-                    <button class="btn btn-sm btn-outline-danger" @onclick="() => DeleteRejectedAsync(c)">Delete</button>
-                </td>
-            </tr>
-        }
-        </tbody>
-    </table>
-}
+<section class="panel rise" style="animation-delay:.08s">
+    <div class="panel-head">Rejected (@_rejected.Count)</div>
+    @if (_rejected.Count == 0)
+    {
+        <p class="px-3 py-2 text-muted">No rejected certificates. Clients that fail to handshake with an untrusted cert land here.</p>
+    }
+    else
+    {
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead><tr><th>Subject</th><th>Issuer</th><th>Thumbprint</th><th>Valid</th><th class="text-end">Actions</th></tr></thead>
+                <tbody>
+                @foreach (var c in _rejected)
+                {
+                    <tr>
+                        <td>@c.Subject</td>
+                        <td>@c.Issuer</td>
+                        <td><span class="mono small">@c.Thumbprint</span></td>
+                        <td class="small">@c.NotBefore.ToString("yyyy-MM-dd") → @c.NotAfter.ToString("yyyy-MM-dd")</td>
+                        <td class="text-end">
+                            <button class="btn btn-sm btn-success me-1" @onclick="() => TrustAsync(c)">Trust</button>
+                            <button class="btn btn-sm btn-outline-danger" @onclick="() => DeleteRejectedAsync(c)">Delete</button>
+                        </td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    }
+</section>
 
-<h2 class="h4 mt-5">Trusted (@_trusted.Count)</h2>
-@if (_trusted.Count == 0)
-{
-    <p class="text-muted">No client certs have been explicitly trusted. The server's own application cert lives in <code>own/</code> and is not listed here.</p>
-}
-else
-{
-    <table class="table table-sm align-middle">
-        <thead><tr><th>Subject</th><th>Issuer</th><th>Thumbprint</th><th>Valid</th><th class="text-end">Actions</th></tr></thead>
-        <tbody>
-        @foreach (var c in _trusted)
-        {
-            <tr>
-                <td>@c.Subject</td>
-                <td>@c.Issuer</td>
-                <td><code class="small">@c.Thumbprint</code></td>
-                <td class="small">@c.NotBefore.ToString("yyyy-MM-dd") → @c.NotAfter.ToString("yyyy-MM-dd")</td>
-                <td class="text-end">
-                    <button class="btn btn-sm btn-outline-danger" @onclick="() => UntrustAsync(c)">Revoke</button>
-                </td>
-            </tr>
-        }
-        </tbody>
-    </table>
-}
+<section class="panel rise" style="animation-delay:.14s">
+    <div class="panel-head">Trusted (@_trusted.Count)</div>
+    @if (_trusted.Count == 0)
+    {
+        <p class="px-3 py-2 text-muted">No client certs have been explicitly trusted. The server's own application cert lives in <span class="mono">own/</span> and is not listed here.</p>
+    }
+    else
+    {
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead><tr><th>Subject</th><th>Issuer</th><th>Thumbprint</th><th>Valid</th><th class="text-end">Actions</th></tr></thead>
+                <tbody>
+                @foreach (var c in _trusted)
+                {
+                    <tr>
+                        <td>@c.Subject</td>
+                        <td>@c.Issuer</td>
+                        <td><span class="mono small">@c.Thumbprint</span></td>
+                        <td class="small">@c.NotBefore.ToString("yyyy-MM-dd") → @c.NotAfter.ToString("yyyy-MM-dd")</td>
+                        <td class="text-end">
+                            <button class="btn btn-sm btn-outline-danger" @onclick="() => UntrustAsync(c)">Revoke</button>
+                        </td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    }
+</section>
 
 @code {
     private IReadOnlyList<CertInfo> _rejected = [];
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/AclsTab.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/AclsTab.razor
index 1185092..f0a4f3f 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/AclsTab.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/AclsTab.razor
@@ -10,7 +10,7 @@
 @implements IAsyncDisposable
 
 <div class="d-flex justify-content-between mb-3">
-    <h4>Access-control grants</h4>
+    <h4 class="panel-head">Access-control grants</h4>
     <button class="btn btn-sm btn-primary" @onclick="() => _showForm = true">Add grant</button>
 </div>
 
@@ -18,27 +18,32 @@
 else if (_acls.Count == 0) { <p class="text-muted">No ACL grants in this draft. Publish will result in a cluster with no external access.</p> }
 else
 {
-    <table class="table table-sm">
-        <thead><tr><th>LDAP group</th><th>Scope</th><th>Scope ID</th><th>Permissions</th><th></th></tr></thead>
-        <tbody>
-        @foreach (var a in _acls)
-        {
-            <tr>
-                <td>@a.LdapGroup</td>
-                <td>@a.ScopeKind</td>
-                <td><code>@(a.ScopeId ?? "-")</code></td>
-                <td><code>@a.PermissionFlags</code></td>
-                <td><button class="btn btn-sm btn-outline-danger" @onclick="() => RevokeAsync(a.NodeAclRowId)">Revoke</button></td>
-            </tr>
-        }
-        </tbody>
-    </table>
+    <section class="panel rise" style="animation-delay:.02s">
+        <div class="panel-head">Grants</div>
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead><tr><th>LDAP group</th><th>Scope</th><th>Scope ID</th><th>Permissions</th><th></th></tr></thead>
+                <tbody>
+                @foreach (var a in _acls)
+                {
+                    <tr>
+                        <td>@a.LdapGroup</td>
+                        <td>@a.ScopeKind</td>
+                        <td><span class="mono">@(a.ScopeId ?? "-")</span></td>
+                        <td><span class="mono">@a.PermissionFlags</span></td>
+                        <td><button class="btn btn-sm btn-outline-danger" @onclick="() => RevokeAsync(a.NodeAclRowId)">Revoke</button></td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    </section>
 }
 
 @* Probe-this-permission — task #196 slice 1 *@
-<div class="card mt-4 mb-3">
-    <div class="card-header">
-        <strong>Probe this permission</strong>
+<section class="panel rise" style="animation-delay:.08s">
+    <div class="panel-head">
+        Probe this permission
         <span class="small text-muted ms-2">
             Ask the trie "if LDAP group X asks for permission Y on node Z, would it be granted?" —
             answers the same way the live server does at request time.
@@ -88,64 +93,67 @@ else
                 <span class="ms-3">
                     @if (_probeResult.Granted)
                     {
-                        <span class="badge bg-success">Granted</span>
+                        <span class="chip chip-ok">Granted</span>
                     }
                     else
                     {
-                        <span class="badge bg-danger">Denied</span>
+                        <span class="chip chip-bad">Denied</span>
                     }
                     <span class="small ms-2">
-                        Required <code>@_probeResult.Required</code>,
-                        Effective <code>@_probeResult.Effective</code>
+                        Required <span class="mono">@_probeResult.Required</span>,
+                        Effective <span class="mono">@_probeResult.Effective</span>
                     </span>
                 </span>
             }
         </div>
         @if (_probeResult is not null && _probeResult.Matches.Count > 0)
         {
-            <table class="table table-sm mt-3 mb-0">
-                <thead><tr><th>LDAP group matched</th><th>Level</th><th>Flags contributed</th></tr></thead>
-                <tbody>
-                @foreach (var m in _probeResult.Matches)
-                {
-                    <tr>
-                        <td><code>@m.LdapGroup</code></td>
-                        <td>@m.Scope</td>
-                        <td><code>@m.PermissionFlags</code></td>
-                    </tr>
-                }
-                </tbody>
-            </table>
+            <div class="table-wrap mt-3">
+                <table class="data-table">
+                    <thead><tr><th>LDAP group matched</th><th>Level</th><th>Flags contributed</th></tr></thead>
+                    <tbody>
+                    @foreach (var m in _probeResult.Matches)
+                    {
+                        <tr>
+                            <td><span class="mono">@m.LdapGroup</span></td>
+                            <td>@m.Scope</td>
+                            <td><span class="mono">@m.PermissionFlags</span></td>
+                        </tr>
+                    }
+                    </tbody>
+                </table>
+            </div>
         }
         else if (_probeResult is not null)
         {
-            <div class="mt-2 small text-muted">No matching grants for this (group, scope) — effective permission is <code>None</code>.</div>
+            <div class="mt-2 small text-muted">No matching grants for this (group, scope) — effective permission is <span class="mono">None</span>.</div>
         }
     </div>
-</div>
+</section>
 
 @if (_showForm)
 {
-    <div class="card">
+    <section class="panel rise" style="animation-delay:.14s">
+        <div class="panel-head">Add grant</div>
         <div class="card-body">
             <div class="row g-3">
                 <div class="col-md-4">
                     <label class="form-label">LDAP group</label>
-                    <input class="form-control" @bind="_group"/>
+                    <input class="form-control form-control-sm" @bind="_group"/>
                 </div>
                 <div class="col-md-4">
                     <label class="form-label">Scope kind</label>
-                    <select class="form-select" @bind="_scopeKind">
+                    <select class="form-select form-select-sm" @bind="_scopeKind">
                         @foreach (var k in Enum.GetValues<NodeAclScopeKind>()) { <option value="@k">@k</option> }
                     </select>
                 </div>
                 <div class="col-md-4">
                     <label class="form-label">Scope ID (empty for Cluster-wide)</label>
-                    <input class="form-control" @bind="_scopeId"/>
+                    <input class="form-control form-control-sm" @bind="_scopeId"/>
                 </div>
                 <div class="col-12">
                     <label class="form-label">Permissions (bundled presets — per-flag editor in v2.1)</label>
-                    <select class="form-select" @bind="_preset">
+                    <select class="form-select form-select-sm" @bind="_preset">
                         <option value="Read">Read (Browse + Read)</option>
                         <option value="WriteOperate">Read + Write Operate</option>
                         <option value="Engineer">Read + Write Tune + Write Configure</option>
@@ -154,13 +162,13 @@ else
                     </select>
                 </div>
             </div>
-            @if (_error is not null) { <div class="alert alert-danger mt-3">@_error</div> }
+            @if (_error is not null) { <section class="panel notice mt-3">@_error</section> }
             <div class="mt-3">
                 <button class="btn btn-sm btn-primary" @onclick="SaveAsync">Save</button>
                 <button class="btn btn-sm btn-secondary ms-2" @onclick="() => _showForm = false">Cancel</button>
             </div>
         </div>
-    </div>
+    </section>
 }
 
 @code {
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/AuditTab.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/AuditTab.razor
index 94b841c..76d1234 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/AuditTab.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/AuditTab.razor
@@ -2,28 +2,33 @@
 @using ZB.MOM.WW.OtOpcUa.Configuration.Entities
 @inject AuditLogService AuditSvc
 
-<h4>Recent audit log</h4>
+<h4 class="panel-head">Recent audit log</h4>
 
 @if (_entries is null) { <p>Loading…</p> }
 else if (_entries.Count == 0) { <p class="text-muted">No audit entries for this cluster yet.</p> }
 else
 {
-    <table class="table table-sm">
-        <thead><tr><th>When</th><th>Principal</th><th>Event</th><th>Node</th><th>Generation</th><th>Details</th></tr></thead>
-        <tbody>
-        @foreach (var a in _entries)
-        {
-            <tr>
-                <td>@a.Timestamp.ToString("u")</td>
-                <td>@a.Principal</td>
-                <td><code>@a.EventType</code></td>
-                <td>@a.NodeId</td>
-                <td>@a.GenerationId</td>
-                <td><small class="text-muted">@a.DetailsJson</small></td>
-            </tr>
-        }
-        </tbody>
-    </table>
+    <section class="panel rise" style="animation-delay:.02s">
+        <div class="panel-head">Entries</div>
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead><tr><th>When</th><th>Principal</th><th>Event</th><th>Node</th><th class="num">Generation</th><th>Details</th></tr></thead>
+                <tbody>
+                @foreach (var a in _entries)
+                {
+                    <tr>
+                        <td>@a.Timestamp.ToString("u")</td>
+                        <td>@a.Principal</td>
+                        <td><span class="mono">@a.EventType</span></td>
+                        <td>@a.NodeId</td>
+                        <td class="num">@a.GenerationId</td>
+                        <td><small class="text-muted">@a.DetailsJson</small></td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    </section>
 }
 
 @code {
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ClusterDetail.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ClusterDetail.razor
index 57ca593..6607eaf 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ClusterDetail.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ClusterDetail.razor
@@ -19,16 +19,16 @@ else
 {
     @if (_liveBanner is not null)
     {
-        <div class="alert alert-info py-2 small">
+        <section class="panel notice rise" style="animation-delay:.02s">
             <strong>Live update:</strong> @_liveBanner
             <button type="button" class="btn-close float-end" @onclick="() => _liveBanner = null"></button>
-        </div>
+        </section>
     }
     <div class="d-flex justify-content-between align-items-center mb-3">
         <div>
-            <h1 class="mb-0">@_cluster.Name</h1>
-            <code class="text-muted">@_cluster.ClusterId</code>
-            @if (!_cluster.Enabled) { <span class="badge bg-secondary ms-2">Disabled</span> }
+            <h1 class="page-title mb-0">@_cluster.Name</h1>
+            <span class="mono text-muted">@_cluster.ClusterId</span>
+            @if (!_cluster.Enabled) { <span class="chip chip-idle ms-2">Disabled</span> }
         </div>
         <div>
             @if (_currentDraft is not null)
@@ -59,16 +59,21 @@ else
 
     @if (_tab == "overview")
     {
-        <dl class="row">
-            <dt class="col-sm-3">Enterprise / Site</dt><dd class="col-sm-9">@_cluster.Enterprise / @_cluster.Site</dd>
-            <dt class="col-sm-3">Redundancy</dt><dd class="col-sm-9">@_cluster.RedundancyMode (@_cluster.NodeCount node@(_cluster.NodeCount == 1 ? "" : "s"))</dd>
-            <dt class="col-sm-3">Current published</dt>
-            <dd class="col-sm-9">
-                @if (_currentPublished is not null) { <span>@_currentPublished.GenerationId (@_currentPublished.PublishedAt?.ToString("u"))</span> }
-                else { <span class="text-muted">none published yet</span> }
-            </dd>
-            <dt class="col-sm-3">Created</dt><dd class="col-sm-9">@_cluster.CreatedAt.ToString("u") by @_cluster.CreatedBy</dd>
-        </dl>
+        <section class="card-grid rise" style="animation-delay:.08s">
+            <div class="metric-card">
+                <div class="panel-head">Cluster details</div>
+                <div class="kv"><span class="k">Enterprise / Site</span><span class="v">@_cluster.Enterprise / @_cluster.Site</span></div>
+                <div class="kv"><span class="k">Redundancy</span><span class="v">@_cluster.RedundancyMode (@_cluster.NodeCount node@(_cluster.NodeCount == 1 ? "" : "s"))</span></div>
+                <div class="kv">
+                    <span class="k">Current published</span>
+                    <span class="v">
+                        @if (_currentPublished is not null) { <span>@_currentPublished.GenerationId (@_currentPublished.PublishedAt?.ToString("u"))</span> }
+                        else { <span class="text-muted">none published yet</span> }
+                    </span>
+                </div>
+                <div class="kv"><span class="k">Created</span><span class="v">@_cluster.CreatedAt.ToString("u") by @_cluster.CreatedBy</span></div>
+            </div>
+        </section>
     }
     else if (_tab == "generations")
     {
@@ -108,7 +113,7 @@ else
     }
     else
     {
-        <p class="text-muted">Open a draft to edit this cluster's content.</p>
+        <section class="panel notice rise" style="animation-delay:.02s">Open a draft to edit this cluster's content.</section>
     }
 }
 
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ClustersList.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ClustersList.razor
index 8448328..2e733e7 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ClustersList.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ClustersList.razor
@@ -4,7 +4,7 @@
 @inject ClusterService ClusterSvc
 
 <div class="d-flex justify-content-between align-items-center mb-4">
-    <h1>Clusters</h1>
+    <h1 class="page-title">Clusters</h1>
     <a href="/clusters/new" class="btn btn-primary">New cluster</a>
 </div>
 
@@ -18,32 +18,37 @@ else if (_clusters.Count == 0)
 }
 else
 {
-    <table class="table table-hover">
-        <thead>
-            <tr>
-                <th>ClusterId</th><th>Name</th><th>Enterprise</th><th>Site</th>
-                <th>RedundancyMode</th><th>NodeCount</th><th>Enabled</th><th></th>
-            </tr>
-        </thead>
-        <tbody>
-        @foreach (var c in _clusters)
-        {
-            <tr>
-                <td><code>@c.ClusterId</code></td>
-                <td>@c.Name</td>
-                <td>@c.Enterprise</td>
-                <td>@c.Site</td>
-                <td>@c.RedundancyMode</td>
-                <td>@c.NodeCount</td>
-                <td>
-                    @if (c.Enabled) { <span class="badge bg-success">Active</span> }
-                    else { <span class="badge bg-secondary">Disabled</span> }
-                </td>
-                <td><a href="/clusters/@c.ClusterId" class="btn btn-sm btn-outline-primary">Open</a></td>
-            </tr>
-        }
-        </tbody>
-    </table>
+    <section class="panel rise" style="animation-delay:.08s">
+        <div class="panel-head">All clusters</div>
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead>
+                    <tr>
+                        <th>ClusterId</th><th>Name</th><th>Enterprise</th><th>Site</th>
+                        <th>RedundancyMode</th><th class="num">NodeCount</th><th>Enabled</th><th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                @foreach (var c in _clusters)
+                {
+                    <tr>
+                        <td><span class="mono">@c.ClusterId</span></td>
+                        <td>@c.Name</td>
+                        <td>@c.Enterprise</td>
+                        <td>@c.Site</td>
+                        <td>@c.RedundancyMode</td>
+                        <td class="num">@c.NodeCount</td>
+                        <td>
+                            @if (c.Enabled) { <span class="chip chip-ok">Active</span> }
+                            else { <span class="chip chip-idle">Disabled</span> }
+                        </td>
+                        <td><a href="/clusters/@c.ClusterId" class="btn btn-sm btn-outline-primary">Open</a></td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    </section>
 }
 
 @code {
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DiffSection.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DiffSection.razor
index bb0207d..1c5dfe0 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DiffSection.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DiffSection.razor
@@ -4,49 +4,49 @@
    output at RowCap rows so a pathological draft (e.g. 20k tags churned) can't freeze the
    Blazor render; overflow banner tells operator how many rows were hidden. *@
 
-<div class="card mb-3">
-    <div class="card-header d-flex justify-content-between align-items-center">
+<section class="panel rise mb-3" style="animation-delay:.02s">
+    <div class="panel-head d-flex justify-content-between align-items-center">
         <div>
             <strong>@Title</strong>
             <small class="text-muted ms-2">@Description</small>
         </div>
         <div>
-            @if (_added > 0) { <span class="badge bg-success me-1">+@_added</span> }
-            @if (_removed > 0) { <span class="badge bg-danger me-1">−@_removed</span> }
-            @if (_modified > 0) { <span class="badge bg-warning text-dark me-1">~@_modified</span> }
-            @if (_total == 0) { <span class="badge bg-secondary">no changes</span> }
+            @if (_added > 0) { <span class="chip chip-ok me-1">+@_added</span> }
+            @if (_removed > 0) { <span class="chip chip-bad me-1">−@_removed</span> }
+            @if (_modified > 0) { <span class="chip chip-warn me-1">~@_modified</span> }
+            @if (_total == 0) { <span class="chip chip-idle">no changes</span> }
         </div>
     </div>
     @if (_total == 0)
     {
-        <div class="card-body text-muted small">No changes in this section.</div>
+        <p class="p-3 text-muted small mb-0">No changes in this section.</p>
     }
     else
     {
         @if (_total > RowCap)
         {
-            <div class="alert alert-warning mb-0 small rounded-0">
-                Showing the first @RowCap of @_total rows — cap protects the browser from megabyte-class
-                diffs. Inspect the remainder via the SQL <code>sp_ComputeGenerationDiff</code> directly.
+            <div class="p-2 small text-muted border-bottom">
+                <span class="s-warn">Showing the first @RowCap of @_total rows</span> — cap protects the browser from megabyte-class
+                diffs. Inspect the remainder via the SQL <span class="mono">sp_ComputeGenerationDiff</span> directly.
             </div>
         }
-        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
-            <table class="table table-sm table-hover mb-0">
-                <thead class="table-light">
+        <div class="table-wrap" style="max-height: 400px; overflow-y: auto;">
+            <table class="data-table">
+                <thead>
                     <tr><th>LogicalId</th><th style="width: 120px;">Change</th></tr>
                 </thead>
                 <tbody>
                 @foreach (var r in _visibleRows)
                 {
                     <tr>
-                        <td><code>@r.LogicalId</code></td>
+                        <td><span class="mono">@r.LogicalId</span></td>
                         <td>
                             @switch (r.ChangeKind)
                             {
-                                case "Added":    <span class="badge bg-success">@r.ChangeKind</span> break;
-                                case "Removed":  <span class="badge bg-danger">@r.ChangeKind</span> break;
-                                case "Modified": <span class="badge bg-warning text-dark">@r.ChangeKind</span> break;
-                                default:         <span class="badge bg-secondary">@r.ChangeKind</span> break;
+                                case "Added":    <span class="chip chip-ok">@r.ChangeKind</span> break;
+                                case "Removed":  <span class="chip chip-bad">@r.ChangeKind</span> break;
+                                case "Modified": <span class="chip chip-warn">@r.ChangeKind</span> break;
+                                default:         <span class="chip chip-idle">@r.ChangeKind</span> break;
                             }
                         </td>
                     </tr>
@@ -55,7 +55,7 @@
             </table>
         </div>
     }
-</div>
+</section>
 
 @code {
     /// <summary>Default row-cap per section — matches task #156's acceptance criterion.</summary>
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DiffViewer.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DiffViewer.razor
index 23d01ba..688975f 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DiffViewer.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DiffViewer.razor
@@ -6,9 +6,9 @@
 
 <div class="d-flex justify-content-between align-items-center mb-3">
     <div>
-        <h1 class="mb-0">Draft diff</h1>
+        <h1 class="page-title mb-0">Draft diff</h1>
         <small class="text-muted">
-            Cluster <code>@ClusterId</code> — from last published (@(_fromLabel)) → to draft @GenerationId
+            Cluster <span class="mono">@ClusterId</span> — from last published (@(_fromLabel)) → to draft @GenerationId
         </small>
     </div>
     <a class="btn btn-outline-secondary" href="/clusters/@ClusterId/draft/@GenerationId">Back to editor</a>
@@ -20,7 +20,7 @@
 }
 else if (_error is not null)
 {
-    <div class="alert alert-danger">@_error</div>
+    <section class="panel notice rise" style="animation-delay:.02s"><span class="s-bad">@_error</span></section>
 }
 else if (_rows.Count == 0)
 {
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DraftEditor.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DraftEditor.razor
index e92f284..277e50e 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DraftEditor.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DraftEditor.razor
@@ -7,8 +7,8 @@
 
 <div class="d-flex justify-content-between align-items-center mb-3">
     <div>
-        <h1 class="mb-0">Draft editor</h1>
-        <small class="text-muted">Cluster <code>@ClusterId</code> · generation @GenerationId</small>
+        <h1 class="page-title mb-0">Draft editor</h1>
+        <small class="text-muted">Cluster <span class="mono">@ClusterId</span> · generation @GenerationId</small>
     </div>
     <div>
         <a class="btn btn-outline-secondary" href="/clusters/@ClusterId">Back to cluster</a>
@@ -36,32 +36,32 @@
         else if (_tab == "scripts") { <ScriptsTab GenerationId="@GenerationId" ClusterId="@ClusterId"/> }
     </div>
     <div class="col-md-4">
-        <div class="card sticky-top">
-            <div class="card-header d-flex justify-content-between align-items-center">
+        <section class="panel rise sticky-top" style="animation-delay:.02s">
+            <div class="panel-head d-flex justify-content-between align-items-center">
                 <strong>Validation</strong>
                 <button class="btn btn-sm btn-outline-secondary" @onclick="RevalidateAsync">Re-run</button>
             </div>
-            <div class="card-body">
+            <div class="p-3">
                 @if (_validating) { <p class="text-muted">Checking…</p> }
-                else if (_errors.Count == 0) { <div class="alert alert-success mb-0">No validation errors — safe to publish.</div> }
+                else if (_errors.Count == 0) { <p class="s-ok mb-0">No validation errors — safe to publish.</p> }
                 else
                 {
-                    <div class="alert alert-danger mb-2">@_errors.Count error@(_errors.Count == 1 ? "" : "s")</div>
+                    <p class="s-bad mb-2">@_errors.Count error@(_errors.Count == 1 ? "" : "s")</p>
                     <ul class="list-unstyled">
                         @foreach (var e in _errors)
                         {
                             <li class="mb-2">
-                                <span class="badge bg-danger me-1">@e.Code</span>
+                                <span class="chip chip-bad me-1">@e.Code</span>
                                 <small>@e.Message</small>
-                                @if (!string.IsNullOrEmpty(e.Context)) { <div class="text-muted"><code>@e.Context</code></div> }
+                                @if (!string.IsNullOrEmpty(e.Context)) { <div class="text-muted"><span class="mono">@e.Context</span></div> }
                             </li>
                         }
                     </ul>
                 }
             </div>
-        </div>
+        </section>
 
-        @if (_publishError is not null) { <div class="alert alert-danger mt-3">@_publishError</div> }
+        @if (_publishError is not null) { <section class="panel notice rise mt-2" style="animation-delay:.08s"><span class="s-bad">@_publishError</span></section> }
     </div>
 </div>
 
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DriversTab.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DriversTab.razor
index ba30127..4e7b2a5 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DriversTab.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/DriversTab.razor
@@ -6,7 +6,7 @@
 @inject NamespaceService NsSvc
 
 <div class="d-flex justify-content-between mb-3">
-    <h4>DriverInstances</h4>
+    <h4 class="panel-head">DriverInstances</h4>
     <button class="btn btn-sm btn-primary" @onclick="() => _showForm = true">Add driver</button>
 </div>
 
@@ -14,43 +14,49 @@
 else if (_drivers.Count == 0) { <p class="text-muted">No drivers configured in this draft.</p> }
 else
 {
-    <table class="table table-sm">
-        <thead><tr><th>DriverInstanceId</th><th>Name</th><th>Type</th><th>Namespace</th></tr></thead>
-        <tbody>
-        @foreach (var d in _drivers)
-        {
-            <tr>
-                <td><code>@d.DriverInstanceId</code></td>
-                <td>@d.Name</td>
-                <td>
-                    @if (string.Equals(d.DriverType, "Focas", StringComparison.OrdinalIgnoreCase))
-                    {
-                        <a href="/drivers/focas/@d.DriverInstanceId">@d.DriverType</a>
-                    }
-                    else
-                    {
-                        @d.DriverType
-                    }
-                </td>
-                <td><code>@d.NamespaceId</code></td>
-            </tr>
-        }
-        </tbody>
-    </table>
+    <section class="panel rise" style="animation-delay:.02s">
+        <div class="panel-head">Configured drivers</div>
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead><tr><th>DriverInstanceId</th><th>Name</th><th>Type</th><th>Namespace</th></tr></thead>
+                <tbody>
+                @foreach (var d in _drivers)
+                {
+                    <tr>
+                        <td><span class="mono">@d.DriverInstanceId</span></td>
+                        <td>@d.Name</td>
+                        <td>
+                            @if (string.Equals(d.DriverType, "Focas", StringComparison.OrdinalIgnoreCase))
+                            {
+                                <a href="/drivers/focas/@d.DriverInstanceId">@d.DriverType</a>
+                            }
+                            else
+                            {
+                                @d.DriverType
+                            }
+                        </td>
+                        <td><span class="mono">@d.NamespaceId</span></td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    </section>
 }
 
 @if (_showForm && _namespaces is not null)
 {
-    <div class="card">
+    <section class="panel rise" style="animation-delay:.08s">
+        <div class="panel-head">Add driver</div>
         <div class="card-body">
             <div class="row g-3">
                 <div class="col-md-3">
                     <label class="form-label">Name</label>
-                    <input class="form-control" @bind="_name"/>
+                    <input class="form-control form-control-sm" @bind="_name"/>
                 </div>
                 <div class="col-md-3">
                     <label class="form-label">DriverType</label>
-                    <select class="form-select" @bind="_type">
+                    <select class="form-select form-select-sm" @bind="_type">
                         <option>Galaxy</option>
                         <option>Modbus</option>
                         <option>AbCip</option>
@@ -63,7 +69,7 @@ else
                 </div>
                 <div class="col-md-6">
                     <label class="form-label">Namespace</label>
-                    <select class="form-select" @bind="_nsId">
+                    <select class="form-select form-select-sm" @bind="_nsId">
                         @foreach (var n in _namespaces) { <option value="@n.NamespaceId">@n.Kind — @n.NamespaceUri</option> }
                     </select>
                 </div>
@@ -78,18 +84,18 @@ else
                     else
                     {
                         <label class="form-label">DriverConfig JSON (schemaless per driver type)</label>
-                        <textarea class="form-control font-monospace" rows="6" @bind="_config"></textarea>
+                        <textarea class="form-control form-control-sm font-monospace" rows="6" @bind="_config"></textarea>
                         <div class="form-text">Phase 1: generic JSON editor — per-driver schema validation arrives in each driver's phase (decision #94).</div>
                     }
                 </div>
             </div>
-            @if (_error is not null) { <div class="alert alert-danger mt-3">@_error</div> }
+            @if (_error is not null) { <section class="panel notice mt-3">@_error</section> }
             <div class="mt-3">
                 <button class="btn btn-sm btn-primary" @onclick="SaveAsync">Save</button>
                 <button class="btn btn-sm btn-secondary ms-2" @onclick="() => _showForm = false">Cancel</button>
             </div>
         </div>
-    </div>
+    </section>
 }
 
 @code {
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/EquipmentTab.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/EquipmentTab.razor
index 109f5b6..f185419 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/EquipmentTab.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/EquipmentTab.razor
@@ -5,7 +5,7 @@
 @inject NavigationManager Nav
 
 <div class="d-flex justify-content-between mb-3">
-    <h4>Equipment (draft gen @GenerationId)</h4>
+    <h4 class="panel-head">Equipment (draft gen @GenerationId)</h4>
     <div>
         <button class="btn btn-outline-primary btn-sm me-2" @onclick="GoImport">Import CSV…</button>
         <button class="btn btn-primary btn-sm" @onclick="StartAdd">Add equipment</button>
@@ -22,72 +22,77 @@ else if (_equipment.Count == 0 && !_showForm)
 }
 else if (_equipment.Count > 0)
 {
-    <table class="table table-sm table-hover">
-        <thead>
-            <tr>
-                <th>EquipmentId</th><th>Name</th><th>MachineCode</th><th>ZTag</th><th>SAPID</th>
-                <th>Manufacturer / Model</th><th>Serial</th><th></th>
-            </tr>
-        </thead>
-        <tbody>
-        @foreach (var e in _equipment)
-        {
-            <tr>
-                <td><code>@e.EquipmentId</code></td>
-                <td>@e.Name</td>
-                <td>@e.MachineCode</td>
-                <td>@e.ZTag</td>
-                <td>@e.SAPID</td>
-                <td>@e.Manufacturer / @e.Model</td>
-                <td>@e.SerialNumber</td>
-                <td>
-                    <button class="btn btn-sm btn-outline-secondary me-1" @onclick="() => StartEdit(e)">Edit</button>
-                    <button class="btn btn-sm btn-outline-danger" @onclick="() => DeleteAsync(e.EquipmentRowId)">Remove</button>
-                </td>
-            </tr>
-        }
-        </tbody>
-    </table>
+    <section class="panel rise" style="animation-delay:.02s">
+        <div class="panel-head">Equipment list</div>
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead>
+                    <tr>
+                        <th>EquipmentId</th><th>Name</th><th>MachineCode</th><th>ZTag</th><th>SAPID</th>
+                        <th>Manufacturer / Model</th><th>Serial</th><th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                @foreach (var e in _equipment)
+                {
+                    <tr>
+                        <td><span class="mono">@e.EquipmentId</span></td>
+                        <td>@e.Name</td>
+                        <td>@e.MachineCode</td>
+                        <td>@e.ZTag</td>
+                        <td>@e.SAPID</td>
+                        <td>@e.Manufacturer / @e.Model</td>
+                        <td>@e.SerialNumber</td>
+                        <td>
+                            <button class="btn btn-sm btn-outline-secondary me-1" @onclick="() => StartEdit(e)">Edit</button>
+                            <button class="btn btn-sm btn-outline-danger" @onclick="() => DeleteAsync(e.EquipmentRowId)">Remove</button>
+                        </td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    </section>
 }
 
 @if (_showForm)
 {
-    <div class="card mt-3">
+    <section class="panel rise mt-3" style="animation-delay:.08s">
+        <div class="panel-head">@(_editMode ? "Edit equipment" : "New equipment")</div>
         <div class="card-body">
-            <h5>@(_editMode ? "Edit equipment" : "New equipment")</h5>
             <EditForm Model="_draft" OnValidSubmit="SaveAsync" FormName="equipment-form">
                 <DataAnnotationsValidator/>
                 <div class="row g-3">
                     <div class="col-md-4">
                         <label class="form-label">Name (UNS segment)</label>
-                        <InputText @bind-Value="_draft.Name" class="form-control"/>
+                        <InputText @bind-Value="_draft.Name" class="form-control form-control-sm"/>
                         <ValidationMessage For="() => _draft.Name"/>
                     </div>
                     <div class="col-md-4">
                         <label class="form-label">MachineCode</label>
-                        <InputText @bind-Value="_draft.MachineCode" class="form-control"/>
+                        <InputText @bind-Value="_draft.MachineCode" class="form-control form-control-sm"/>
                     </div>
                     <div class="col-md-4">
                         <label class="form-label">DriverInstanceId</label>
-                        <InputText @bind-Value="_draft.DriverInstanceId" class="form-control"/>
+                        <InputText @bind-Value="_draft.DriverInstanceId" class="form-control form-control-sm"/>
                     </div>
                     <div class="col-md-4">
                         <label class="form-label">UnsLineId</label>
-                        <InputText @bind-Value="_draft.UnsLineId" class="form-control"/>
+                        <InputText @bind-Value="_draft.UnsLineId" class="form-control form-control-sm"/>
                     </div>
                     <div class="col-md-4">
                         <label class="form-label">ZTag</label>
-                        <InputText @bind-Value="_draft.ZTag" class="form-control"/>
+                        <InputText @bind-Value="_draft.ZTag" class="form-control form-control-sm"/>
                     </div>
                     <div class="col-md-4">
                         <label class="form-label">SAPID</label>
-                        <InputText @bind-Value="_draft.SAPID" class="form-control"/>
+                        <InputText @bind-Value="_draft.SAPID" class="form-control form-control-sm"/>
                     </div>
                 </div>
 
                 <IdentificationFields Equipment="_draft"/>
 
-                @if (_error is not null) { <div class="alert alert-danger mt-3">@_error</div> }
+                @if (_error is not null) { <section class="panel notice mt-3">@_error</section> }
 
                 <div class="mt-3">
                     <button type="submit" class="btn btn-primary btn-sm">Save</button>
@@ -95,7 +100,7 @@ else if (_equipment.Count > 0)
                 </div>
             </EditForm>
         </div>
-    </div>
+    </section>
 }
 
 @code {
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/Generations.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/Generations.razor
index 55a226c..3efc8e6 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/Generations.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/Generations.razor
@@ -4,43 +4,46 @@
 @inject GenerationService GenerationSvc
 @inject NavigationManager Nav
 
-<h4>Generations</h4>
-
 @if (_generations is null) { <p>Loading…</p> }
 else if (_generations.Count == 0) { <p class="text-muted">No generations in this cluster yet.</p> }
 else
 {
-    <table class="table table-sm">
-        <thead>
-            <tr><th>ID</th><th>Status</th><th>Created</th><th>Published</th><th>PublishedBy</th><th>Notes</th><th></th></tr>
-        </thead>
-        <tbody>
-        @foreach (var g in _generations)
-        {
-            <tr>
-                <td><code>@g.GenerationId</code></td>
-                <td>@StatusBadge(g.Status)</td>
-                <td><small>@g.CreatedAt.ToString("u") by @g.CreatedBy</small></td>
-                <td><small>@(g.PublishedAt?.ToString("u") ?? "-")</small></td>
-                <td><small>@g.PublishedBy</small></td>
-                <td><small>@g.Notes</small></td>
-                <td>
-                    @if (g.Status == GenerationStatus.Draft)
-                    {
-                        <a class="btn btn-sm btn-primary" href="/clusters/@ClusterId/draft/@g.GenerationId">Open</a>
-                    }
-                    else if (g.Status is GenerationStatus.Published or GenerationStatus.Superseded)
-                    {
-                        <button class="btn btn-sm btn-outline-warning" @onclick="() => RollbackAsync(g.GenerationId)">Roll back to this</button>
-                    }
-                </td>
-            </tr>
-        }
-        </tbody>
-    </table>
+    <section class="panel rise" style="animation-delay:.08s">
+        <div class="panel-head">Generations</div>
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead>
+                    <tr><th class="num">ID</th><th>Status</th><th>Created</th><th>Published</th><th>PublishedBy</th><th>Notes</th><th></th></tr>
+                </thead>
+                <tbody>
+                @foreach (var g in _generations)
+                {
+                    <tr>
+                        <td class="num mono">@g.GenerationId</td>
+                        <td>@StatusBadge(g.Status)</td>
+                        <td><small>@g.CreatedAt.ToString("u") by @g.CreatedBy</small></td>
+                        <td><small>@(g.PublishedAt?.ToString("u") ?? "-")</small></td>
+                        <td><small>@g.PublishedBy</small></td>
+                        <td><small>@g.Notes</small></td>
+                        <td>
+                            @if (g.Status == GenerationStatus.Draft)
+                            {
+                                <a class="btn btn-sm btn-primary" href="/clusters/@ClusterId/draft/@g.GenerationId">Open</a>
+                            }
+                            else if (g.Status is GenerationStatus.Published or GenerationStatus.Superseded)
+                            {
+                                <button class="btn btn-sm btn-outline-warning" @onclick="() => RollbackAsync(g.GenerationId)">Roll back to this</button>
+                            }
+                        </td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    </section>
 }
 
-@if (_error is not null) { <div class="alert alert-danger">@_error</div> }
+@if (_error is not null) { <section class="panel notice rise" style="animation-delay:.02s">@_error</section> }
 
 @code {
     [Parameter] public string ClusterId { get; set; } = string.Empty;
@@ -65,9 +68,9 @@ else
 
     private static MarkupString StatusBadge(GenerationStatus s) => s switch
     {
-        GenerationStatus.Draft      => new MarkupString("<span class='badge bg-info'>Draft</span>"),
-        GenerationStatus.Published  => new MarkupString("<span class='badge bg-success'>Published</span>"),
-        GenerationStatus.Superseded => new MarkupString("<span class='badge bg-secondary'>Superseded</span>"),
-        _                           => new MarkupString($"<span class='badge bg-light text-dark'>{s}</span>"),
+        GenerationStatus.Draft      => new MarkupString("<span class='chip chip-idle'>Draft</span>"),
+        GenerationStatus.Published  => new MarkupString("<span class='chip chip-ok'>Published</span>"),
+        GenerationStatus.Superseded => new MarkupString("<span class='chip chip-idle'>Superseded</span>"),
+        _                           => new MarkupString($"<span class='chip chip-idle'>{s}</span>"),
     };
 }
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/IdentificationFields.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/IdentificationFields.razor
index 582bfde..268ea6c 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/IdentificationFields.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/IdentificationFields.razor
@@ -4,7 +4,7 @@
    nine decision #139 fields in a consistent 3-column Bootstrap grid. Used by EquipmentTab's
    create + edit forms so the same UI renders regardless of which flow opened it. *@
 
-<h6 class="mt-4">OPC 40010 Identification</h6>
+<div class="panel-head mt-4">OPC 40010 Identification</div>
 <div class="row g-3">
     <div class="col-md-4">
         <label class="form-label">Manufacturer</label>
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ImportEquipment.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ImportEquipment.razor
index b688139..72d1275 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ImportEquipment.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ImportEquipment.razor
@@ -10,37 +10,38 @@
 
 <div class="d-flex justify-content-between align-items-center mb-3">
     <div>
-        <h1 class="mb-0">Equipment CSV import</h1>
-        <small class="text-muted">Cluster <code>@ClusterId</code> · draft generation @GenerationId</small>
+        <h1 class="page-title mb-0">Equipment CSV import</h1>
+        <small class="text-muted">Cluster <span class="mono">@ClusterId</span> · draft generation @GenerationId</small>
     </div>
     <a class="btn btn-outline-secondary" href="/clusters/@ClusterId/draft/@GenerationId">Back to draft</a>
 </div>
 
-<div class="alert alert-info small mb-3">
-    Accepts <code>@EquipmentCsvImporter.VersionMarker</code>-headered CSV per Stream B.3.
+<section class="panel notice rise" style="animation-delay:.02s">
+    Accepts <span class="mono">@EquipmentCsvImporter.VersionMarker</span>-headered CSV per Stream B.3.
     Required columns: @string.Join(", ", EquipmentCsvImporter.RequiredColumns).
     Optional columns cover the OPC 40010 Identification fields. Paste the file contents
     or upload directly — the parser runs client-stream-side and shows a row-level preview
     before anything lands in the draft. ZTag + SAPID uniqueness across the fleet is NOT
     enforced here yet (see task #197); for now the finalise may fail at commit time if a
     reservation conflict exists.
-</div>
+</section>
 
-<div class="alert alert-secondary small mb-3">
+<section class="panel notice rise mt-2" style="animation-delay:.08s">
     <strong>Per-tag addressing for Modbus drivers</strong> isn't part of equipment import —
     tags are configured at the driver-instance level via the
     <a href="/clusters/@ClusterId/draft/@GenerationId">Drivers tab</a>. Use the
     <a href="/modbus/address-preview" target="_blank">address-preview tool</a> to sanity-check
-    grammar strings (<code>40001:F:CDAB</code>, <code>HR1:I</code>, <code>V2000</code> for
+    grammar strings (<span class="mono">40001:F:CDAB</span>, <span class="mono">HR1:I</span>, <span class="mono">V2000</span> for
     DL205 family, etc.) before pasting them into the driver config.
-</div>
+</section>
 
-<div class="card mb-3">
-    <div class="card-body">
+<section class="panel rise mt-2" style="animation-delay:.14s">
+    <div class="panel-head">Import configuration</div>
+    <div class="p-3">
         <div class="row g-3">
             <div class="col-md-5">
                 <label class="form-label">Target driver instance (for every accepted row)</label>
-                <select class="form-select" @bind="_driverInstanceId">
+                <select class="form-select form-select-sm" @bind="_driverInstanceId">
                     <option value="">-- select driver --</option>
                     @if (_drivers is not null)
                     {
@@ -50,7 +51,7 @@
             </div>
             <div class="col-md-5">
                 <label class="form-label">Target UNS line (for every accepted row)</label>
-                <select class="form-select" @bind="_unsLineId">
+                <select class="form-select form-select-sm" @bind="_unsLineId">
                     <option value="">-- select line --</option>
                     @if (_unsLines is not null)
                     {
@@ -64,7 +65,7 @@
         </div>
         <div class="mt-3">
             <label class="form-label">CSV content (paste or uploaded)</label>
-            <textarea class="form-control font-monospace" rows="8" @bind="_csvText"
+            <textarea class="form-control mono" rows="8" @bind="_csvText"
                       placeholder="# OtOpcUaCsv v1&#10;ZTag,MachineCode,SAPID,EquipmentId,…"/>
         </div>
         <div class="mt-3">
@@ -73,28 +74,26 @@
                     disabled="@(_parseResult is null || _parseResult.AcceptedRows.Count == 0 || string.IsNullOrWhiteSpace(_driverInstanceId) || string.IsNullOrWhiteSpace(_unsLineId) || _busy)">
                 Stage + Finalise
             </button>
-            @if (_parseError is not null) { <span class="alert alert-danger ms-3 py-1 px-2 small">@_parseError</span> }
-            @if (_result is not null) { <span class="alert alert-success ms-3 py-1 px-2 small">@_result</span> }
+            @if (_parseError is not null) { <span class="chip chip-bad ms-3">@_parseError</span> }
+            @if (_result is not null) { <span class="chip chip-ok ms-3">@_result</span> }
         </div>
     </div>
-</div>
+</section>
 
 @if (_parseResult is not null)
 {
-    <div class="row g-3">
+    <div class="row g-3 mt-1">
         <div class="col-md-6">
-            <div class="card">
-                <div class="card-header bg-success text-white">
-                    Accepted (@_parseResult.AcceptedRows.Count)
-                </div>
-                <div class="card-body p-0" style="max-height: 400px; overflow-y: auto;">
+            <section class="panel rise" style="animation-delay:.02s">
+                <div class="panel-head"><span class="s-ok">Accepted (@_parseResult.AcceptedRows.Count)</span></div>
+                <div class="table-wrap" style="max-height: 400px; overflow-y: auto;">
                     @if (_parseResult.AcceptedRows.Count == 0)
                     {
                         <p class="text-muted p-3 mb-0">No accepted rows.</p>
                     }
                     else
                     {
-                        <table class="table table-sm table-striped mb-0">
+                        <table class="data-table">
                             <thead>
                                 <tr><th>ZTag</th><th>Machine</th><th>Name</th><th>Line</th></tr>
                             </thead>
@@ -102,7 +101,7 @@
                             @foreach (var r in _parseResult.AcceptedRows)
                             {
                                 <tr>
-                                    <td><code>@r.ZTag</code></td>
+                                    <td><span class="mono">@r.ZTag</span></td>
                                     <td>@r.MachineCode</td>
                                     <td>@r.Name</td>
                                     <td>@r.UnsLineName</td>
@@ -112,35 +111,33 @@
                         </table>
                     }
                 </div>
-            </div>
+            </section>
         </div>
         <div class="col-md-6">
-            <div class="card">
-                <div class="card-header bg-danger text-white">
-                    Rejected (@_parseResult.RejectedRows.Count)
-                </div>
-                <div class="card-body p-0" style="max-height: 400px; overflow-y: auto;">
+            <section class="panel rise" style="animation-delay:.08s">
+                <div class="panel-head"><span class="s-bad">Rejected (@_parseResult.RejectedRows.Count)</span></div>
+                <div class="table-wrap" style="max-height: 400px; overflow-y: auto;">
                     @if (_parseResult.RejectedRows.Count == 0)
                     {
                         <p class="text-muted p-3 mb-0">No rejections.</p>
                     }
                     else
                     {
-                        <table class="table table-sm table-striped mb-0">
-                            <thead><tr><th>Line</th><th>Reason</th></tr></thead>
+                        <table class="data-table">
+                            <thead><tr><th class="num">Line</th><th>Reason</th></tr></thead>
                             <tbody>
                             @foreach (var e in _parseResult.RejectedRows)
                             {
                                 <tr>
-                                    <td>@e.LineNumber</td>
-                                    <td class="small">@e.Reason</td>
+                                    <td class="num">@e.LineNumber</td>
+                                    <td><span class="s-bad">@e.Reason</span></td>
                                 </tr>
                             }
                             </tbody>
                         </table>
                     }
                 </div>
-            </div>
+            </section>
         </div>
     </div>
 }
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/NamespacesTab.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/NamespacesTab.razor
index d3ecd61..1056224 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/NamespacesTab.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/NamespacesTab.razor
@@ -4,7 +4,7 @@
 @inject NamespaceService NsSvc
 
 <div class="d-flex justify-content-between mb-3">
-    <h4>Namespaces</h4>
+    <h4 class="panel-head">Namespaces</h4>
     <button class="btn btn-sm btn-primary" @onclick="() => _showForm = true">Add namespace</button>
 </div>
 
@@ -12,26 +12,37 @@
 else if (_namespaces.Count == 0) { <p class="text-muted">No namespaces defined in this draft.</p> }
 else
 {
-    <table class="table table-sm">
-        <thead><tr><th>NamespaceId</th><th>Kind</th><th>URI</th><th>Enabled</th></tr></thead>
-        <tbody>
-        @foreach (var n in _namespaces)
-        {
-            <tr><td><code>@n.NamespaceId</code></td><td>@n.Kind</td><td>@n.NamespaceUri</td><td>@(n.Enabled ? "yes" : "no")</td></tr>
-        }
-        </tbody>
-    </table>
+    <section class="panel rise" style="animation-delay:.02s">
+        <div class="panel-head">Defined namespaces</div>
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead><tr><th>NamespaceId</th><th>Kind</th><th>URI</th><th>Enabled</th></tr></thead>
+                <tbody>
+                @foreach (var n in _namespaces)
+                {
+                    <tr>
+                        <td><span class="mono">@n.NamespaceId</span></td>
+                        <td>@n.Kind</td>
+                        <td>@n.NamespaceUri</td>
+                        <td>@(n.Enabled ? "yes" : "no")</td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    </section>
 }
 
 @if (_showForm)
 {
-    <div class="card">
+    <section class="panel rise" style="animation-delay:.08s">
+        <div class="panel-head">Add namespace</div>
         <div class="card-body">
             <div class="row g-3">
-                <div class="col-md-6"><label class="form-label">NamespaceUri</label><input class="form-control" @bind="_uri"/></div>
+                <div class="col-md-6"><label class="form-label">NamespaceUri</label><input class="form-control form-control-sm" @bind="_uri"/></div>
                 <div class="col-md-6">
                     <label class="form-label">Kind</label>
-                    <select class="form-select" @bind="_kind">
+                    <select class="form-select form-select-sm" @bind="_kind">
                         <option value="@NamespaceKind.Equipment">Equipment</option>
                         <option value="@NamespaceKind.SystemPlatform">SystemPlatform (Galaxy)</option>
                     </select>
@@ -42,7 +53,7 @@ else
                 <button class="btn btn-sm btn-secondary ms-2" @onclick="() => _showForm = false">Cancel</button>
             </div>
         </div>
-    </div>
+    </section>
 }
 
 @code {
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/NewCluster.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/NewCluster.razor
index 1c2c6f7..bb8c31a 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/NewCluster.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/NewCluster.razor
@@ -7,7 +7,7 @@
 @inject GenerationService GenerationSvc
 @inject NavigationManager Nav
 
-<h1 class="mb-4">New cluster</h1>
+<h1 class="page-title mb-4">New cluster</h1>
 
 <EditForm Model="_input" OnValidSubmit="CreateAsync" FormName="new-cluster">
     <DataAnnotationsValidator/>
@@ -44,7 +44,7 @@
 
     @if (!string.IsNullOrEmpty(_error))
     {
-        <div class="alert alert-danger mt-3">@_error</div>
+        <section class="panel notice mt-3">@_error</section>
     }
 
     <div class="mt-4">
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/RedundancyTab.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/RedundancyTab.razor
index c562415..5b2fa0d 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/RedundancyTab.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/RedundancyTab.razor
@@ -7,18 +7,18 @@
 @inject NavigationManager Nav
 @implements IAsyncDisposable
 
-<h4>Redundancy topology</h4>
+<h4 class="panel-head">Redundancy topology</h4>
 @if (_roleChangedBanner is not null)
 {
-    <div class="alert alert-info small mb-2">@_roleChangedBanner</div>
+    <section class="panel notice rise" style="animation-delay:.02s">@_roleChangedBanner</section>
 }
 <p class="text-muted small">
-    One row per <code>ClusterNode</code> in this cluster. Role, <code>ApplicationUri</code>,
-    and <code>ServiceLevelBase</code> are authored separately; the Admin UI shows them read-only
+    One row per <span class="mono">ClusterNode</span> in this cluster. Role, <span class="mono">ApplicationUri</span>,
+    and <span class="mono">ServiceLevelBase</span> are authored separately; the Admin UI shows them read-only
     here so operators can confirm the published topology without touching it. LastSeen older than
     @((int)ClusterNodeService.StaleThreshold.TotalSeconds)s is flagged Stale — the node has
     stopped heart-beating and is likely down. Role swap goes through the server-side
-    <code>RedundancyCoordinator</code> apply-lease flow, not direct DB edits.
+    <span class="mono">RedundancyCoordinator</span> apply-lease flow, not direct DB edits.
 </p>
 
 @if (_nodes is null)
@@ -27,10 +27,10 @@
 }
 else if (_nodes.Count == 0)
 {
-    <div class="alert alert-warning">
+    <section class="panel notice rise" style="animation-delay:.02s">
         No ClusterNode rows for this cluster. The server process needs at least one entry
-        (with a non-blank <code>ApplicationUri</code>) before it can start up per OPC UA spec.
-    </div>
+        (with a non-blank <span class="mono">ApplicationUri</span>) before it can start up per OPC UA spec.
+    </section>
 }
 else
 {
@@ -39,76 +39,80 @@ else
     var standalone = _nodes.Count(n => n.RedundancyRole == RedundancyRole.Standalone);
     var staleCount = _nodes.Count(ClusterNodeService.IsStale);
 
-    <div class="row g-3 mb-4">
-        <div class="col-md-3"><div class="card"><div class="card-body">
-            <h6 class="text-muted mb-1">Nodes</h6>
-            <div class="fs-3">@_nodes.Count</div>
-        </div></div></div>
-        <div class="col-md-3"><div class="card border-success"><div class="card-body">
-            <h6 class="text-muted mb-1">Primary</h6>
-            <div class="fs-3 text-success">@primaries</div>
-        </div></div></div>
-        <div class="col-md-3"><div class="card border-info"><div class="card-body">
-            <h6 class="text-muted mb-1">Secondary</h6>
-            <div class="fs-3 text-info">@secondaries</div>
-        </div></div></div>
-        <div class="col-md-3"><div class="card @(staleCount > 0 ? "border-warning" : "")"><div class="card-body">
-            <h6 class="text-muted mb-1">Stale</h6>
-            <div class="fs-3 @(staleCount > 0 ? "text-warning" : "")">@staleCount</div>
-        </div></div></div>
-    </div>
+    <section class="agg-grid rise" style="animation-delay:.02s">
+        <div class="agg-card">
+            <div class="agg-label">Nodes</div>
+            <div class="agg-value numeric">@_nodes.Count</div>
+        </div>
+        <div class="agg-card">
+            <div class="agg-label">Primary</div>
+            <div class="agg-value numeric @(primaries > 0 ? "s-ok" : "")">@primaries</div>
+        </div>
+        <div class="agg-card">
+            <div class="agg-label">Secondary</div>
+            <div class="agg-value numeric">@secondaries</div>
+        </div>
+        <div class="agg-card">
+            <div class="agg-label">Stale</div>
+            <div class="agg-value numeric @(staleCount > 0 ? "s-warn" : "")">@staleCount</div>
+        </div>
+    </section>
 
     @if (primaries == 0 && standalone == 0)
     {
-        <div class="alert alert-danger small mb-3">
-            No Primary or Standalone node — the cluster has no authoritative write target. Secondaries
-            stay read-only until one of them gets promoted via <code>RedundancyCoordinator</code>.
-        </div>
+        <section class="panel notice rise" style="animation-delay:.08s">
+            <span class="s-bad">No Primary or Standalone node — the cluster has no authoritative write target. Secondaries
+            stay read-only until one of them gets promoted via <span class="mono">RedundancyCoordinator</span>.</span>
+        </section>
     }
     else if (primaries > 1)
     {
-        <div class="alert alert-danger small mb-3">
-            <strong>Split-brain:</strong> @primaries nodes claim the Primary role. Apply-lease
+        <section class="panel notice rise" style="animation-delay:.08s">
+            <span class="s-bad"><strong>Split-brain:</strong> @primaries nodes claim the Primary role. Apply-lease
             enforcement should have made this impossible at the coordinator level. Investigate
-            immediately — one of the rows was likely hand-edited.
-        </div>
+            immediately — one of the rows was likely hand-edited.</span>
+        </section>
     }
 
-    <table class="table table-sm table-hover align-middle">
-        <thead>
-            <tr>
-                <th>Node</th>
-                <th>Role</th>
-                <th>Host</th>
-                <th class="text-end">OPC UA port</th>
-                <th class="text-end">ServiceLevel base</th>
-                <th>ApplicationUri</th>
-                <th>Enabled</th>
-                <th>Last seen</th>
-            </tr>
-        </thead>
-        <tbody>
-        @foreach (var n in _nodes)
-        {
-            <tr class="@RowClass(n)">
-                <td><code>@n.NodeId</code></td>
-                <td><span class="badge @RoleBadge(n.RedundancyRole)">@n.RedundancyRole</span></td>
-                <td>@n.Host</td>
-                <td class="text-end"><code>@n.OpcUaPort</code></td>
-                <td class="text-end">@n.ServiceLevelBase</td>
-                <td class="small text-break"><code>@n.ApplicationUri</code></td>
-                <td>
-                    @if (n.Enabled) { <span class="badge bg-success">Enabled</span> }
-                    else { <span class="badge bg-secondary">Disabled</span> }
-                </td>
-                <td class="small @(ClusterNodeService.IsStale(n) ? "text-warning fw-bold" : "")">
-                    @(n.LastSeenAt is null ? "never" : FormatAge(n.LastSeenAt.Value))
-                    @if (ClusterNodeService.IsStale(n)) { <span class="badge bg-warning text-dark ms-1">Stale</span> }
-                </td>
-            </tr>
-        }
-        </tbody>
-    </table>
+    <section class="panel rise" style="animation-delay:.14s">
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead>
+                    <tr>
+                        <th>Node</th>
+                        <th>Role</th>
+                        <th>Host</th>
+                        <th class="num">OPC UA port</th>
+                        <th class="num">ServiceLevel base</th>
+                        <th>ApplicationUri</th>
+                        <th>Enabled</th>
+                        <th>Last seen</th>
+                    </tr>
+                </thead>
+                <tbody>
+                @foreach (var n in _nodes)
+                {
+                    <tr>
+                        <td><span class="mono">@n.NodeId</span></td>
+                        <td><span class="chip @RoleBadge(n.RedundancyRole)">@n.RedundancyRole</span></td>
+                        <td>@n.Host</td>
+                        <td class="num mono">@n.OpcUaPort</td>
+                        <td class="num">@n.ServiceLevelBase</td>
+                        <td class="mono">@n.ApplicationUri</td>
+                        <td>
+                            @if (n.Enabled) { <span class="chip chip-ok">Enabled</span> }
+                            else { <span class="chip chip-idle">Disabled</span> }
+                        </td>
+                        <td class="@(ClusterNodeService.IsStale(n) ? "s-warn" : "")">
+                            @(n.LastSeenAt is null ? "never" : FormatAge(n.LastSeenAt.Value))
+                            @if (ClusterNodeService.IsStale(n)) { <span class="chip chip-warn ms-1">Stale</span> }
+                        </td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    </section>
 }
 
 @code {
@@ -158,10 +162,10 @@ else
 
     private static string RoleBadge(RedundancyRole r) => r switch
     {
-        RedundancyRole.Primary    => "bg-success",
-        RedundancyRole.Secondary  => "bg-info",
-        RedundancyRole.Standalone => "bg-primary",
-        _                         => "bg-secondary",
+        RedundancyRole.Primary    => "chip-ok",
+        RedundancyRole.Secondary  => "chip-idle",
+        RedundancyRole.Standalone => "chip-idle",
+        _                         => "chip-idle",
     };
 
     private static string FormatAge(DateTime t)
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ScriptEditor.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ScriptEditor.razor
index 2f4339c..fdf386a 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ScriptEditor.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ScriptEditor.razor
@@ -13,7 +13,7 @@
 *@
 
 <div class="script-editor">
-    <textarea class="form-control font-monospace" rows="14" spellcheck="false"
+    <textarea class="form-control mono" rows="14" spellcheck="false"
               @bind="Source" @bind:event="oninput" id="@_editorId">@Source</textarea>
 </div>
 
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ScriptsTab.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ScriptsTab.razor
index b0d5eb7..10b8920 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ScriptsTab.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/ScriptsTab.razor
@@ -7,7 +7,7 @@
 
 <div class="d-flex justify-content-between align-items-center mb-3">
     <div>
-        <h4 class="mb-0">Scripts</h4>
+        <h4 class="panel-head mb-0">Scripts</h4>
         <small class="text-muted">C# (Roslyn). Used by virtual tags + scripted alarms.</small>
     </div>
     <button class="btn btn-primary" @onclick="StartNew">+ New script</button>
@@ -18,7 +18,7 @@
 @if (_loading) { <p class="text-muted">Loading…</p> }
 else if (_scripts.Count == 0 && _editing is null)
 {
-    <div class="alert alert-info">No scripts yet in this draft.</div>
+    <section class="panel notice rise" style="animation-delay:.02s">No scripts yet in this draft.</section>
 }
 else
 {
@@ -30,7 +30,7 @@ else
                     <button class="list-group-item list-group-item-action @(_editing?.ScriptId == s.ScriptId ? "active" : "")"
                             @onclick="() => Open(s)">
                         <strong>@s.Name</strong>
-                        <div class="small text-muted font-monospace">@s.ScriptId</div>
+                        <div class="small text-muted mono">@s.ScriptId</div>
                     </button>
                 }
             </div>
@@ -38,8 +38,8 @@ else
         <div class="col-md-8">
             @if (_editing is not null)
             {
-                <div class="card">
-                    <div class="card-header d-flex justify-content-between align-items-center">
+                <section class="panel rise" style="animation-delay:.02s">
+                    <div class="panel-head d-flex justify-content-between align-items-center">
                         <strong>@(_isNew ? "New script" : _editing.Name)</strong>
                         <div>
                             @if (!_isNew)
@@ -49,10 +49,10 @@ else
                             <button class="btn btn-sm btn-primary" disabled="@_busy" @onclick="SaveAsync">Save</button>
                         </div>
                     </div>
-                    <div class="card-body">
+                    <div class="p-3">
                         <div class="mb-2">
                             <label class="form-label">Name</label>
-                            <input class="form-control" @bind="_editing.Name"/>
+                            <input class="form-control form-control-sm" @bind="_editing.Name"/>
                         </div>
                         <label class="form-label">Source</label>
                         <ScriptEditor @bind-Source="_editing.SourceCode"/>
@@ -70,7 +70,7 @@ else
                                 else
                                 {
                                     <ul class="mb-1">
-                                        @foreach (var r in _dependencies.Reads) { <li><code>@r</code></li> }
+                                        @foreach (var r in _dependencies.Reads) { <li><span class="mono">@r</span></li> }
                                     </ul>
                                 }
                                 <strong>Inferred writes</strong>
@@ -78,17 +78,17 @@ else
                                 else
                                 {
                                     <ul class="mb-1">
-                                        @foreach (var w in _dependencies.Writes) { <li><code>@w</code></li> }
+                                        @foreach (var w in _dependencies.Writes) { <li><span class="mono">@w</span></li> }
                                     </ul>
                                 }
                                 @if (_dependencies.Rejections.Count > 0)
                                 {
-                                    <div class="alert alert-danger mt-2">
+                                    <section class="panel notice mt-2">
                                         <strong>Non-literal paths rejected:</strong>
                                         <ul class="mb-0">
-                                            @foreach (var r in _dependencies.Rejections) { <li>@r.Message</li> }
+                                            @foreach (var r in _dependencies.Rejections) { <li><span class="s-bad">@r.Message</span></li> }
                                         </ul>
-                                    </div>
+                                    </section>
                                 }
                             </div>
                         }
@@ -96,24 +96,24 @@ else
                         @if (_testResult is not null)
                         {
                             <div class="mt-3 border-top pt-3">
-                                <strong>Harness result:</strong> <span class="badge bg-secondary">@_testResult.Outcome</span>
+                                <strong>Harness result:</strong> <span class="chip chip-idle">@_testResult.Outcome</span>
                                 @if (_testResult.Outcome == ScriptTestOutcome.Success)
                                 {
-                                    <div>Output: <code>@(_testResult.Output?.ToString() ?? "null")</code></div>
+                                    <div>Output: <span class="mono">@(_testResult.Output?.ToString() ?? "null")</span></div>
                                     @if (_testResult.Writes.Count > 0)
                                     {
                                         <div class="mt-1"><strong>Writes:</strong>
                                             <ul class="mb-0">
-                                                @foreach (var kv in _testResult.Writes) { <li><code>@kv.Key</code> = <code>@(kv.Value?.ToString() ?? "null")</code></li> }
+                                                @foreach (var kv in _testResult.Writes) { <li><span class="mono">@kv.Key</span> = <span class="mono">@(kv.Value?.ToString() ?? "null")</span></li> }
                                             </ul>
                                         </div>
                                     }
                                 }
                                 @if (_testResult.Errors.Count > 0)
                                 {
-                                    <div class="alert alert-warning mt-2 mb-0">
-                                        @foreach (var e in _testResult.Errors) { <div>@e</div> }
-                                    </div>
+                                    <section class="panel notice mt-2 mb-0">
+                                        @foreach (var e in _testResult.Errors) { <div><span class="s-warn">@e</span></div> }
+                                    </section>
                                 }
                                 @if (_testResult.LogEvents.Count > 0)
                                 {
@@ -126,7 +126,7 @@ else
                             </div>
                         }
                     </div>
-                </div>
+                </section>
             }
         </div>
     </div>
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/TagsTab.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/TagsTab.razor
index 7a3a1a9..e55ce19 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/TagsTab.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/TagsTab.razor
@@ -15,15 +15,13 @@
     a generic JSON textarea, matching the DriversTab pattern from #147.
 *@
 
-<div class="d-flex justify-content-between mb-3">
-    <h4>Tags (draft gen @GenerationId)</h4>
-    <button class="btn btn-primary btn-sm" @onclick="StartAdd">Add tag</button>
-</div>
-
-<div class="row g-3 mb-3">
-    <div class="col-md-4">
-        <label class="form-label small text-muted">Filter by driver</label>
-        <select class="form-select form-select-sm" @bind="_filterDriverId" @bind:after="ReloadAsync">
+<section class="panel rise" style="animation-delay:.02s">
+    <div class="panel-head d-flex justify-content-between align-items-center">
+        <span>Tags (draft gen @GenerationId)</span>
+        <button class="btn btn-primary btn-sm" @onclick="StartAdd">Add tag</button>
+    </div>
+    <div class="toolbar">
+        <select class="form-select form-select-sm tb-state" @bind="_filterDriverId" @bind:after="ReloadAsync">
             <option value="">— all drivers —</option>
             @if (_drivers is not null)
             {
@@ -33,42 +31,45 @@
                 }
             }
         </select>
+        <span class="spacer"></span>
+        @if (_tags is not null) { <span class="tb-count">@_tags.Count tags</span> }
     </div>
-</div>
-
-@if (_tags is null) { <p>Loading…</p> }
-else if (_tags.Count == 0 && !_showForm) { <p class="text-muted">No tags in this filter.</p> }
-else if (_tags.Count > 0)
-{
-    <table class="table table-sm">
-        <thead>
-            <tr><th>Name</th><th>Driver</th><th>Equipment</th><th>DataType</th><th>Access</th><th>TagConfig</th><th></th></tr>
-        </thead>
-        <tbody>
-        @foreach (var t in _tags)
-        {
-            <tr>
-                <td>@t.Name</td>
-                <td><code>@t.DriverInstanceId</code></td>
-                <td>@(t.EquipmentId ?? "—")</td>
-                <td>@t.DataType</td>
-                <td>@t.AccessLevel</td>
-                <td class="font-monospace small text-truncate" style="max-width:18rem">@t.TagConfig</td>
-                <td>
-                    <button class="btn btn-sm btn-outline-secondary me-1" @onclick="() => StartEdit(t)">Edit</button>
-                    <button class="btn btn-sm btn-outline-danger" @onclick="() => DeleteAsync(t.TagRowId)">Remove</button>
-                </td>
-            </tr>
-        }
-        </tbody>
-    </table>
-}
+    @if (_tags is null) { <p class="p-3">Loading…</p> }
+    else if (_tags.Count == 0 && !_showForm) { <p class="p-3 text-muted">No tags in this filter.</p> }
+    else if (_tags.Count > 0)
+    {
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead>
+                    <tr><th>Name</th><th>Driver</th><th>Equipment</th><th>DataType</th><th>Access</th><th>TagConfig</th><th></th></tr>
+                </thead>
+                <tbody>
+                @foreach (var t in _tags)
+                {
+                    <tr>
+                        <td>@t.Name</td>
+                        <td><span class="mono">@t.DriverInstanceId</span></td>
+                        <td>@(t.EquipmentId ?? "—")</td>
+                        <td>@t.DataType</td>
+                        <td>@t.AccessLevel</td>
+                        <td class="mono" style="max-width:18rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">@t.TagConfig</td>
+                        <td>
+                            <button class="btn btn-sm btn-outline-secondary me-1" @onclick="() => StartEdit(t)">Edit</button>
+                            <button class="btn btn-sm btn-outline-danger" @onclick="() => DeleteAsync(t.TagRowId)">Remove</button>
+                        </td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    }
+</section>
 
 @if (_showForm)
 {
-    <div class="card mt-3">
-        <div class="card-body">
-            <h5>@(_editMode ? "Edit tag" : "New tag")</h5>
+    <section class="panel rise mt-3" style="animation-delay:.08s">
+        <div class="panel-head">@(_editMode ? "Edit tag" : "New tag")</div>
+        <div class="p-3">
             <div class="row g-3">
                 <div class="col-md-4">
                     <label class="form-label">Name</label>
@@ -176,14 +177,14 @@ else if (_tags.Count > 0)
                 }
             }
 
-            @if (_error is not null) { <div class="alert alert-danger mt-3">@_error</div> }
+            @if (_error is not null) { <section class="panel notice mt-3"><span class="s-bad">@_error</span></section> }
 
             <div class="mt-3">
                 <button class="btn btn-sm btn-primary" @onclick="SaveAsync">Save</button>
                 <button class="btn btn-sm btn-secondary ms-2" @onclick="Cancel">Cancel</button>
             </div>
         </div>
-    </div>
+    </section>
 }
 
 @code {
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/UnsTab.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/UnsTab.razor
index d1e0612..bb9b46d 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/UnsTab.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Clusters/UnsTab.razor
@@ -2,100 +2,104 @@
 @using ZB.MOM.WW.OtOpcUa.Configuration.Entities
 @inject UnsService UnsSvc
 
-<div class="alert alert-info small mb-3">
+<section class="panel notice rise" style="animation-delay:.02s">
     Drag any line in the <strong>UNS Lines</strong> table onto an area row in <strong>UNS Areas</strong>
     to re-parent it. A preview modal shows the impact (equipment re-home count) + lets you confirm
     or cancel. If another operator modifies the draft while you're confirming, you'll see a 409
     refresh-required modal instead of clobbering their work.
-</div>
+</section>
 
-<div class="row">
+<div class="row mt-3">
     <div class="col-md-6">
-        <div class="d-flex justify-content-between mb-2">
-            <h4>UNS Areas</h4>
-            <button class="btn btn-sm btn-primary" @onclick="() => _showAreaForm = true">Add area</button>
-        </div>
+        <section class="panel rise" style="animation-delay:.08s">
+            <div class="panel-head d-flex justify-content-between align-items-center">
+                <span>UNS Areas</span>
+                <button class="btn btn-sm btn-primary" @onclick="() => _showAreaForm = true">Add area</button>
+            </div>
 
-        @if (_areas is null) { <p>Loading…</p> }
-        else if (_areas.Count == 0) { <p class="text-muted">No areas yet.</p> }
-        else
-        {
-            <table class="table table-sm">
-                <thead><tr><th>AreaId</th><th>Name</th><th class="small text-muted">(drop target)</th></tr></thead>
-                <tbody>
-                @foreach (var a in _areas)
-                {
-                    <tr class="@(_hoverAreaId == a.UnsAreaId ? "table-primary" : "")"
-                        @ondragover="e => OnAreaDragOver(e, a.UnsAreaId)"
-                        @ondragover:preventDefault
-                        @ondragleave="() => _hoverAreaId = null"
-                        @ondrop="() => OnLineDroppedAsync(a.UnsAreaId)"
-                        @ondrop:preventDefault>
-                        <td><code>@a.UnsAreaId</code></td>
-                        <td>@a.Name</td>
-                        <td class="small text-muted">drop here</td>
-                    </tr>
-                }
-                </tbody>
-            </table>
-        }
+            @if (_areas is null) { <p class="p-3">Loading…</p> }
+            else if (_areas.Count == 0) { <p class="p-3 text-muted">No areas yet.</p> }
+            else
+            {
+                <div class="table-wrap">
+                    <table class="data-table">
+                        <thead><tr><th>AreaId</th><th>Name</th><th class="text-muted">(drop target)</th></tr></thead>
+                        <tbody>
+                        @foreach (var a in _areas)
+                        {
+                            <tr class="@(_hoverAreaId == a.UnsAreaId ? "table-primary" : "")"
+                                @ondragover="e => OnAreaDragOver(e, a.UnsAreaId)"
+                                @ondragover:preventDefault
+                                @ondragleave="() => _hoverAreaId = null"
+                                @ondrop="() => OnLineDroppedAsync(a.UnsAreaId)"
+                                @ondrop:preventDefault>
+                                <td><span class="mono">@a.UnsAreaId</span></td>
+                                <td>@a.Name</td>
+                                <td class="text-muted">drop here</td>
+                            </tr>
+                        }
+                        </tbody>
+                    </table>
+                </div>
+            }
 
-        @if (_showAreaForm)
-        {
-            <div class="card">
-                <div class="card-body">
-                    <div class="mb-2"><label class="form-label">Name (lowercase segment)</label><input class="form-control" @bind="_newAreaName"/></div>
+            @if (_showAreaForm)
+            {
+                <div class="p-3 border-top">
+                    <div class="mb-2"><label class="form-label">Name (lowercase segment)</label><input class="form-control form-control-sm" @bind="_newAreaName"/></div>
                     <button class="btn btn-sm btn-primary" @onclick="AddAreaAsync">Save</button>
                     <button class="btn btn-sm btn-secondary ms-2" @onclick="() => _showAreaForm = false">Cancel</button>
                 </div>
-            </div>
-        }
+            }
+        </section>
     </div>
 
     <div class="col-md-6">
-        <div class="d-flex justify-content-between mb-2">
-            <h4>UNS Lines</h4>
-            <button class="btn btn-sm btn-primary" @onclick="() => _showLineForm = true" disabled="@(_areas is null || _areas.Count == 0)">Add line</button>
-        </div>
+        <section class="panel rise" style="animation-delay:.14s">
+            <div class="panel-head d-flex justify-content-between align-items-center">
+                <span>UNS Lines</span>
+                <button class="btn btn-sm btn-primary" @onclick="() => _showLineForm = true" disabled="@(_areas is null || _areas.Count == 0)">Add line</button>
+            </div>
 
-        @if (_lines is null) { <p>Loading…</p> }
-        else if (_lines.Count == 0) { <p class="text-muted">No lines yet.</p> }
-        else
-        {
-            <table class="table table-sm">
-                <thead><tr><th>LineId</th><th>Area</th><th>Name</th></tr></thead>
-                <tbody>
-                @foreach (var l in _lines)
-                {
-                    <tr draggable="true"
-                        @ondragstart="() => _dragLineId = l.UnsLineId"
-                        @ondragend="() => { _dragLineId = null; _hoverAreaId = null; }"
-                        style="cursor: grab;">
-                        <td><code>@l.UnsLineId</code></td>
-                        <td><code>@l.UnsAreaId</code></td>
-                        <td>@l.Name</td>
-                    </tr>
-                }
-                </tbody>
-            </table>
-        }
+            @if (_lines is null) { <p class="p-3">Loading…</p> }
+            else if (_lines.Count == 0) { <p class="p-3 text-muted">No lines yet.</p> }
+            else
+            {
+                <div class="table-wrap">
+                    <table class="data-table">
+                        <thead><tr><th>LineId</th><th>Area</th><th>Name</th></tr></thead>
+                        <tbody>
+                        @foreach (var l in _lines)
+                        {
+                            <tr draggable="true"
+                                @ondragstart="() => _dragLineId = l.UnsLineId"
+                                @ondragend="() => { _dragLineId = null; _hoverAreaId = null; }"
+                                style="cursor: grab;">
+                                <td><span class="mono">@l.UnsLineId</span></td>
+                                <td><span class="mono">@l.UnsAreaId</span></td>
+                                <td>@l.Name</td>
+                            </tr>
+                        }
+                        </tbody>
+                    </table>
+                </div>
+            }
 
-        @if (_showLineForm && _areas is not null)
-        {
-            <div class="card">
-                <div class="card-body">
+            @if (_showLineForm && _areas is not null)
+            {
+                <div class="p-3 border-top">
                     <div class="mb-2">
                         <label class="form-label">Area</label>
-                        <select class="form-select" @bind="_newLineAreaId">
+                        <select class="form-select form-select-sm" @bind="_newLineAreaId">
                             @foreach (var a in _areas) { <option value="@a.UnsAreaId">@a.Name (@a.UnsAreaId)</option> }
                         </select>
                     </div>
-                    <div class="mb-2"><label class="form-label">Name</label><input class="form-control" @bind="_newLineName"/></div>
+                    <div class="mb-2"><label class="form-label">Name</label><input class="form-control form-control-sm" @bind="_newLineName"/></div>
                     <button class="btn btn-sm btn-primary" @onclick="AddLineAsync">Save</button>
                     <button class="btn btn-sm btn-secondary ms-2" @onclick="() => _showLineForm = false">Cancel</button>
                 </div>
-            </div>
-        }
+            }
+        </section>
     </div>
 </div>
 
@@ -117,11 +121,11 @@
                     </p>
                     @if (_pendingPreview.CascadeWarnings.Count > 0)
                     {
-                        <div class="alert alert-warning small mb-0">
+                        <section class="panel notice small mb-0">
                             <ul class="mb-0">
                                 @foreach (var w in _pendingPreview.CascadeWarnings) { <li>@w</li> }
                             </ul>
-                        </div>
+                        </section>
                     }
                 </div>
                 <div class="modal-footer">
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Drivers/FocasDetail.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Drivers/FocasDetail.razor
index 11ba185..2cd13dd 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Drivers/FocasDetail.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Drivers/FocasDetail.razor
@@ -2,7 +2,7 @@
 @using ZB.MOM.WW.OtOpcUa.Admin.Services
 @inject FocasDriverDetailService DetailSvc
 
-<h1 class="mb-3">FOCAS driver <code>@InstanceId</code></h1>
+<h1 class="page-title">FOCAS driver <span class="mono">@InstanceId</span></h1>
 
 @if (_loading)
 {
@@ -10,178 +10,201 @@
 }
 else if (_detail is null)
 {
-    <div class="alert alert-warning">
-        No FOCAS driver instance with id <code>@InstanceId</code> was found.
+    <section class="panel notice">
+        No FOCAS driver instance with id <span class="mono">@InstanceId</span> was found.
         <div class="small text-muted mt-1">
-            Either the id is wrong, or the instance's <code>DriverType</code> is not "Focas". The list of drivers per cluster draft is on the <a href="/clusters">Clusters</a> page.
+            Either the id is wrong, or the instance's <span class="mono">DriverType</span> is not "Focas". The list of drivers per cluster draft is on the <a href="/clusters">Clusters</a> page.
         </div>
-    </div>
+    </section>
 }
 else
 {
-    <div class="row g-3 mb-4">
-        <div class="col-md-3"><div class="card"><div class="card-body">
-            <h6 class="text-muted mb-1">Name</h6>
-            <div class="fs-5">@_detail.Instance.Name</div>
-        </div></div></div>
-        <div class="col-md-3"><div class="card"><div class="card-body">
-            <h6 class="text-muted mb-1">Cluster</h6>
-            <div class="fs-5"><code>@_detail.Instance.ClusterId</code></div>
-        </div></div></div>
-        <div class="col-md-3"><div class="card"><div class="card-body">
-            <h6 class="text-muted mb-1">Namespace</h6>
-            <div class="fs-5"><code>@_detail.Instance.NamespaceId</code></div>
-        </div></div></div>
-        <div class="col-md-3"><div class="card @(_detail.Instance.Enabled ? "border-success" : "border-secondary")"><div class="card-body">
-            <h6 class="text-muted mb-1">Enabled</h6>
-            <div class="fs-5">@(_detail.Instance.Enabled ? "Yes" : "No")</div>
-        </div></div></div>
-    </div>
+    <section class="agg-grid rise" style="animation-delay:.02s">
+        <div class="agg-card">
+            <div class="agg-label">Name</div>
+            <div class="agg-value">@_detail.Instance.Name</div>
+        </div>
+        <div class="agg-card">
+            <div class="agg-label">Cluster</div>
+            <div class="agg-value mono">@_detail.Instance.ClusterId</div>
+        </div>
+        <div class="agg-card">
+            <div class="agg-label">Namespace</div>
+            <div class="agg-value mono">@_detail.Instance.NamespaceId</div>
+        </div>
+        <div class="agg-card">
+            <div class="agg-label">Enabled</div>
+            <div class="agg-value">@(_detail.Instance.Enabled ? "Yes" : "No")</div>
+        </div>
+    </section>
 
     @if (_detail.ParseError is not null)
     {
-        <div class="alert alert-danger">
+        <section class="panel notice rise" style="animation-delay:.08s">
             <strong>DriverConfig JSON failed to parse:</strong> @_detail.ParseError
             <div class="small text-muted mt-1">
                 Falling back to raw-JSON view below; the per-section tables are hidden because the shape couldn't be projected.
             </div>
-        </div>
+        </section>
     }
     else if (_detail.Config is not null)
     {
-        <h2 class="h5 mt-4">Devices</h2>
         @if (_detail.Config.Devices is null || _detail.Config.Devices.Count == 0)
         {
-            <p class="text-muted">No devices configured.</p>
+            <section class="panel rise" style="animation-delay:.08s">
+                <div class="panel-head">Devices</div>
+                <p class="text-muted" style="padding:.75rem 1rem 0">No devices configured.</p>
+            </section>
         }
         else
         {
-            <table class="table table-sm align-middle">
-                <thead><tr><th>HostAddress</th><th>DeviceName</th><th>Series</th></tr></thead>
-                <tbody>
-                @foreach (var d in _detail.Config.Devices)
-                {
-                    <tr>
-                        <td><code>@d.HostAddress</code></td>
-                        <td>@(d.DeviceName ?? "—")</td>
-                        <td>@(string.IsNullOrEmpty(d.Series) ? "Unknown" : d.Series)</td>
-                    </tr>
-                }
-                </tbody>
-            </table>
+            <section class="panel rise" style="animation-delay:.08s">
+                <div class="panel-head">Devices</div>
+                <div class="table-wrap">
+                    <table class="data-table">
+                        <thead><tr><th>HostAddress</th><th>DeviceName</th><th>Series</th></tr></thead>
+                        <tbody>
+                        @foreach (var d in _detail.Config.Devices)
+                        {
+                            <tr>
+                                <td class="mono">@d.HostAddress</td>
+                                <td>@(d.DeviceName ?? "—")</td>
+                                <td>@(string.IsNullOrEmpty(d.Series) ? "Unknown" : d.Series)</td>
+                            </tr>
+                        }
+                        </tbody>
+                    </table>
+                </div>
+            </section>
         }
 
-        <h2 class="h5 mt-4">Tags</h2>
         @if (_detail.Config.Tags is null || _detail.Config.Tags.Count == 0)
         {
-            <p class="text-muted">No tags configured.</p>
+            <section class="panel rise" style="animation-delay:.14s">
+                <div class="panel-head">Tags</div>
+                <p class="text-muted" style="padding:.75rem 1rem 0">No tags configured.</p>
+            </section>
         }
         else
         {
-            <p class="small text-muted">@_detail.Config.Tags.Count tag(s) configured.</p>
-            <table class="table table-sm align-middle">
-                <thead><tr><th>Name</th><th>Device</th><th>Address</th><th>DataType</th><th>Writable</th></tr></thead>
-                <tbody>
-                @foreach (var t in _detail.Config.Tags)
-                {
-                    <tr>
-                        <td>@t.Name</td>
-                        <td><code class="small">@t.DeviceHostAddress</code></td>
-                        <td><code>@t.Address</code></td>
-                        <td>@t.DataType</td>
-                        <td>@(t.Writable ? "Yes" : "No")</td>
-                    </tr>
-                }
-                </tbody>
-            </table>
+            <section class="panel rise" style="animation-delay:.14s">
+                <div class="panel-head">Tags</div>
+                <div class="toolbar">
+                    <span class="spacer"></span>
+                    <span class="tb-count">@_detail.Config.Tags.Count tag(s)</span>
+                </div>
+                <div class="table-wrap">
+                    <table class="data-table">
+                        <thead><tr><th>Name</th><th>Device</th><th>Address</th><th>DataType</th><th>Writable</th></tr></thead>
+                        <tbody>
+                        @foreach (var t in _detail.Config.Tags)
+                        {
+                            <tr>
+                                <td>@t.Name</td>
+                                <td class="mono">@t.DeviceHostAddress</td>
+                                <td class="mono">@t.Address</td>
+                                <td>@t.DataType</td>
+                                <td>@(t.Writable ? "Yes" : "No")</td>
+                            </tr>
+                        }
+                        </tbody>
+                    </table>
+                </div>
+            </section>
         }
 
-        <h2 class="h5 mt-4">Driver behaviour</h2>
-        <table class="table table-sm align-middle" style="max-width: 640px;">
-            <tbody>
-                <tr>
-                    <th style="width: 30%;">Probe</th>
-                    <td>
+        <section class="card-grid rise" style="animation-delay:.20s">
+            <div class="metric-card">
+                <div class="panel-head">Driver behaviour</div>
+                <div class="kv">
+                    <span class="k">Probe</span>
+                    <span class="v">
                         @if (_detail.Config.Probe is { } probe)
                         {
-                            <span class="badge @(probe.Enabled ? "bg-success" : "bg-secondary")">@(probe.Enabled ? "Enabled" : "Disabled")</span>
+                            <span class="chip @(probe.Enabled ? "chip-ok" : "chip-idle")">@(probe.Enabled ? "Enabled" : "Disabled")</span>
                             <span class="ms-2 small text-muted">Interval: @(probe.Interval ?? "default")</span>
                         }
                         else { <span class="text-muted">default (enabled)</span> }
-                    </td>
-                </tr>
-                <tr>
-                    <th>Alarm projection</th>
-                    <td>
+                    </span>
+                </div>
+                <div class="kv">
+                    <span class="k">Alarm projection</span>
+                    <span class="v">
                         @if (_detail.Config.AlarmProjection is { } ap)
                         {
-                            <span class="badge @(ap.Enabled ? "bg-success" : "bg-secondary")">@(ap.Enabled ? "Enabled" : "Disabled")</span>
+                            <span class="chip @(ap.Enabled ? "chip-ok" : "chip-idle")">@(ap.Enabled ? "Enabled" : "Disabled")</span>
                             <span class="ms-2 small text-muted">PollInterval: @(ap.PollInterval ?? "default")</span>
                         }
                         else { <span class="text-muted">disabled (default)</span> }
-                    </td>
-                </tr>
-                <tr>
-                    <th>Handle recycling</th>
-                    <td>
+                    </span>
+                </div>
+                <div class="kv">
+                    <span class="k">Handle recycling</span>
+                    <span class="v">
                         @if (_detail.Config.HandleRecycle is { } hr)
                         {
-                            <span class="badge @(hr.Enabled ? "bg-warning text-dark" : "bg-secondary")">@(hr.Enabled ? "Enabled" : "Disabled")</span>
+                            <span class="chip @(hr.Enabled ? "chip-warn" : "chip-idle")">@(hr.Enabled ? "Enabled" : "Disabled")</span>
                             <span class="ms-2 small text-muted">Interval: @(hr.Interval ?? "default (01:00:00)")</span>
                         }
                         else { <span class="text-muted">disabled (default)</span> }
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+                    </span>
+                </div>
+            </div>
+        </section>
     }
 
-    <h2 class="h5 mt-4">Host status</h2>
     @if (_detail.HostStatuses.Count == 0)
     {
-        <div class="alert alert-secondary small">
-            No <code>DriverHostStatus</code> rows yet for this instance. The Server publishes its first
+        <section class="panel notice rise" style="animation-delay:.26s">
+            No <span class="mono">DriverHostStatus</span> rows yet for this instance. The Server publishes its first
             tick ~2 s after the driver starts — if this stays empty after a minute, check that the Server is running and the instance is in a published generation.
-        </div>
+        </section>
     }
     else
     {
-        <table class="table table-sm table-hover align-middle">
-            <thead>
-                <tr>
-                    <th>Node</th>
-                    <th>Host</th>
-                    <th>State</th>
-                    <th class="text-end" title="Consecutive failures">Fail#</th>
-                    <th>Breaker last opened</th>
-                    <th>Last recycled</th>
-                    <th>Last seen</th>
-                    <th>Detail</th>
-                </tr>
-            </thead>
-            <tbody>
-            @foreach (var r in _detail.HostStatuses)
-            {
-                <tr class="@(IsStale(r) ? "table-warning" : "")">
-                    <td><code>@r.NodeId</code></td>
-                    <td>@r.HostName</td>
-                    <td><span class="badge @StateBadge(r.State)">@r.State</span></td>
-                    <td class="text-end small">@r.ConsecutiveFailures</td>
-                    <td class="small">@FormatUtc(r.LastCircuitBreakerOpenUtc)</td>
-                    <td class="small">@FormatUtc(r.LastRecycleUtc)</td>
-                    <td class="small @(IsStale(r) ? "text-warning" : "")">@FormatAge(r.LastSeenUtc)</td>
-                    <td class="text-truncate small" style="max-width: 240px;" title="@r.Detail">@r.Detail</td>
-                </tr>
-            }
-            </tbody>
-        </table>
+        <section class="panel rise" style="animation-delay:.26s">
+            <div class="panel-head">Host status</div>
+            <div class="table-wrap">
+                <table class="data-table">
+                    <thead>
+                        <tr>
+                            <th>Node</th>
+                            <th>Host</th>
+                            <th>State</th>
+                            <th class="num" title="Consecutive failures">Fail#</th>
+                            <th>Breaker last opened</th>
+                            <th>Last recycled</th>
+                            <th>Last seen</th>
+                            <th>Detail</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    @foreach (var r in _detail.HostStatuses)
+                    {
+                        <tr>
+                            <td class="mono">@r.NodeId</td>
+                            <td>@r.HostName</td>
+                            <td><span class="chip @StateBadge(r.State)">@r.State</span></td>
+                            <td class="num small">@r.ConsecutiveFailures</td>
+                            <td class="small">@FormatUtc(r.LastCircuitBreakerOpenUtc)</td>
+                            <td class="small">@FormatUtc(r.LastRecycleUtc)</td>
+                            <td class="small @(IsStale(r) ? "s-warn" : "")">@FormatAge(r.LastSeenUtc)</td>
+                            <td class="text-truncate small" style="max-width: 240px;" title="@r.Detail">@r.Detail</td>
+                        </tr>
+                    }
+                    </tbody>
+                </table>
+            </div>
+        </section>
     }
 
-    <h2 class="h5 mt-4">Raw DriverConfig JSON</h2>
-    <pre class="small bg-light border p-3"><code>@_detail.Instance.DriverConfig</code></pre>
+    <section class="panel rise" style="animation-delay:.32s">
+        <div class="panel-head">Raw DriverConfig JSON</div>
+        <pre class="small" style="padding:1rem;margin:0;overflow-x:auto"><code>@_detail.Instance.DriverConfig</code></pre>
+    </section>
 
     <div class="mt-4 small text-muted">
-        Docs: <code>docs/drivers/FOCAS.md</code> (getting started) · <code>docs/v2/focas-deployment.md</code> (NSSM + pipe ACL) · <code>docs/drivers/FOCAS-Test-Fixture.md</code> (test coverage).
+        Docs: <span class="mono">docs/drivers/FOCAS.md</span> (getting started) · <span class="mono">docs/v2/focas-deployment.md</span> (NSSM + pipe ACL) · <span class="mono">docs/drivers/FOCAS-Test-Fixture.md</span> (test coverage).
     </div>
 }
 
@@ -203,11 +226,11 @@ else
 
     private static string StateBadge(string state) => state switch
     {
-        "Running" => "bg-success",
-        "Faulted" => "bg-danger",
-        "Starting" => "bg-info",
-        "Stopped" => "bg-secondary",
-        _ => "bg-secondary",
+        "Running" => "chip-ok",
+        "Faulted" => "chip-bad",
+        "Starting" => "chip-idle",
+        "Stopped" => "chip-idle",
+        _ => "chip-idle",
     };
 
     private static string FormatUtc(DateTime? utc) =>
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Fleet.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Fleet.razor
index 118606d..946f598 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Fleet.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Fleet.razor
@@ -5,7 +5,7 @@
 @inject IServiceScopeFactory ScopeFactory
 @implements IDisposable
 
-<h1 class="mb-4">Fleet status</h1>
+<h1 class="page-title">Fleet status</h1>
 
 <div class="d-flex align-items-center mb-3 gap-2">
     <button class="btn btn-sm btn-outline-primary" @onclick="RefreshAsync" disabled="@_refreshing">
@@ -23,69 +23,66 @@
 }
 else if (_rows.Count == 0)
 {
-    <div class="alert alert-info">
+    <section class="panel notice" style="animation-delay:.02s">
         No node state recorded yet. Nodes publish their state to the central DB on each poll; if
         this list is empty, either no nodes have been registered or the poller hasn't run yet.
-    </div>
+    </section>
 }
 else
 {
-    <div class="row g-3 mb-4">
-        <div class="col-md-3">
-            <div class="card"><div class="card-body">
-                <h6 class="text-muted mb-1">Nodes</h6>
-                <div class="fs-3">@_rows.Count</div>
-            </div></div>
+    <section class="agg-grid rise" style="animation-delay:.02s">
+        <div class="agg-card">
+            <div class="agg-label">Nodes</div>
+            <div class="agg-value numeric">@_rows.Count</div>
         </div>
-        <div class="col-md-3">
-            <div class="card border-success"><div class="card-body">
-                <h6 class="text-muted mb-1">Applied</h6>
-                <div class="fs-3 text-success">@_rows.Count(r => r.Status == "Applied")</div>
-            </div></div>
+        <div class="agg-card">
+            <div class="agg-label">Applied</div>
+            <div class="agg-value numeric">@_rows.Count(r => r.Status == "Applied")</div>
         </div>
-        <div class="col-md-3">
-            <div class="card border-warning"><div class="card-body">
-                <h6 class="text-muted mb-1">Stale</h6>
-                <div class="fs-3 text-warning">@_rows.Count(r => IsStale(r))</div>
-            </div></div>
+        <div class="agg-card caution">
+            <div class="agg-label">Stale</div>
+            <div class="agg-value numeric">@_rows.Count(r => IsStale(r))</div>
         </div>
-        <div class="col-md-3">
-            <div class="card border-danger"><div class="card-body">
-                <h6 class="text-muted mb-1">Failed</h6>
-                <div class="fs-3 text-danger">@_rows.Count(r => r.Status == "Failed")</div>
-            </div></div>
+        <div class="agg-card alert">
+            <div class="agg-label">Failed</div>
+            <div class="agg-value numeric">@_rows.Count(r => r.Status == "Failed")</div>
         </div>
-    </div>
+    </section>
 
-    <table class="table table-hover align-middle">
-        <thead>
-            <tr>
-                <th>Node</th>
-                <th>Cluster</th>
-                <th>Generation</th>
-                <th>Status</th>
-                <th>Last applied</th>
-                <th>Last seen</th>
-                <th>Error</th>
-            </tr>
-        </thead>
-        <tbody>
-        @foreach (var r in _rows)
-        {
-            <tr class="@RowClass(r)">
-                <td><code>@r.NodeId</code></td>
-                <td>@r.ClusterId</td>
-                <td>@(r.GenerationId?.ToString() ?? "—")</td>
-                <td>
-                    <span class="badge @StatusBadge(r.Status)">@(r.Status ?? "—")</span>
-                </td>
-                <td>@FormatAge(r.AppliedAt)</td>
-                <td class="@(IsStale(r) ? "text-warning" : "")">@FormatAge(r.SeenAt)</td>
-                <td class="text-truncate" style="max-width: 320px;" title="@r.Error">@r.Error</td>
-            </tr>
-        }
-        </tbody>
-    </table>
+    <section class="panel rise" style="animation-delay:.08s">
+        <div class="panel-head">Nodes</div>
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead>
+                    <tr>
+                        <th>Node</th>
+                        <th>Cluster</th>
+                        <th class="num">Generation</th>
+                        <th>Status</th>
+                        <th>Last applied</th>
+                        <th>Last seen</th>
+                        <th>Error</th>
+                    </tr>
+                </thead>
+                <tbody>
+                @foreach (var r in _rows)
+                {
+                    <tr>
+                        <td><span class="mono">@r.NodeId</span></td>
+                        <td>@r.ClusterId</td>
+                        <td class="num">@(r.GenerationId?.ToString() ?? "—")</td>
+                        <td>
+                            <span class="chip @StatusBadge(r.Status)">@(r.Status ?? "—")</span>
+                        </td>
+                        <td>@FormatAge(r.AppliedAt)</td>
+                        <td>@FormatAge(r.SeenAt)</td>
+                        <td class="text-truncate" style="max-width: 320px;" title="@r.Error">@r.Error</td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    </section>
 }
 
 @code {
@@ -115,13 +112,16 @@ else
         {
             using var scope = ScopeFactory.CreateScope();
             var db = scope.ServiceProvider.GetRequiredService<OtOpcUaConfigDbContext>();
+            // Order on the join's plain columns before projecting into FleetNodeRow —
+            // EF Core cannot translate OrderBy over a property of a constructed record.
             var rows = await db.ClusterNodeGenerationStates.AsNoTracking()
-                .Join(db.ClusterNodes.AsNoTracking(), s => s.NodeId, n => n.NodeId, (s, n) => new FleetNodeRow(
-                    s.NodeId, n.ClusterId, s.CurrentGenerationId,
-                    s.LastAppliedStatus != null ? s.LastAppliedStatus.ToString() : null,
-                    s.LastAppliedError, s.LastAppliedAt, s.LastSeenAt))
-                .OrderBy(r => r.ClusterId)
-                .ThenBy(r => r.NodeId)
+                .Join(db.ClusterNodes.AsNoTracking(), s => s.NodeId, n => n.NodeId, (s, n) => new { s, n })
+                .OrderBy(x => x.n.ClusterId)
+                .ThenBy(x => x.s.NodeId)
+                .Select(x => new FleetNodeRow(
+                    x.s.NodeId, x.n.ClusterId, x.s.CurrentGenerationId,
+                    x.s.LastAppliedStatus != null ? x.s.LastAppliedStatus.ToString() : null,
+                    x.s.LastAppliedError, x.s.LastAppliedAt, x.s.LastSeenAt))
                 .ToListAsync();
             _rows = rows;
             _lastRefreshUtc = DateTime.UtcNow;
@@ -148,10 +148,10 @@ else
 
     private static string StatusBadge(string? status) => status switch
     {
-        "Applied" => "bg-success",
-        "Failed" => "bg-danger",
-        "Applying" => "bg-info",
-        _ => "bg-secondary",
+        "Applied" => "chip-ok",
+        "Failed" => "chip-bad",
+        "Applying" => "chip-idle",
+        _ => "chip-idle",
     };
 
     private static string FormatAge(DateTime? t)
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Home.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Home.razor
index 6ef2ff7..036637c 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Home.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Home.razor
@@ -5,62 +5,93 @@
 @inject GenerationService GenerationSvc
 @inject NavigationManager Nav
 
-<h1 class="mb-4">Fleet overview</h1>
+<h1 class="page-title">Fleet overview</h1>
 
 @if (_clusters is null)
 {
-    <p>Loading…</p>
+    <section class="panel rise" style="animation-delay:.02s">
+        <div class="panel-head">Loading</div>
+        <div style="padding:1.4rem;color:var(--ink-faint);font-style:italic">Loading fleet&hellip;</div>
+    </section>
 }
 else if (_clusters.Count == 0)
 {
-    <div class="alert alert-info">
+    <section class="panel notice rise" style="animation-delay:.02s">
         No clusters configured yet. <a href="/clusters/new">Create the first cluster</a>.
-    </div>
+    </section>
 }
 else
 {
-    <div class="row g-3 mb-4">
-        <div class="col-md-3">
-            <div class="card"><div class="card-body"><h6 class="text-muted">Clusters</h6><div class="fs-2">@_clusters.Count</div></div></div>
+    <section class="agg-grid rise" style="animation-delay:.02s">
+        <div class="agg-card">
+            <div class="agg-label">Clusters</div>
+            <div class="agg-value numeric">@_clusters.Count</div>
         </div>
-        <div class="col-md-3">
-            <div class="card"><div class="card-body"><h6 class="text-muted">Active drafts</h6><div class="fs-2">@_activeDraftCount</div></div></div>
+        <div class="agg-card">
+            <div class="agg-label">Active drafts</div>
+            <div class="agg-value numeric">@_activeDraftCount</div>
         </div>
-        <div class="col-md-3">
-            <div class="card"><div class="card-body"><h6 class="text-muted">Published generations</h6><div class="fs-2">@_publishedCount</div></div></div>
+        <div class="agg-card">
+            <div class="agg-label">Published generations</div>
+            <div class="agg-value numeric">@_publishedCount</div>
         </div>
-        <div class="col-md-3">
-            <div class="card"><div class="card-body"><h6 class="text-muted">Disabled clusters</h6><div class="fs-2">@_clusters.Count(c => !c.Enabled)</div></div></div>
+        <div class="agg-card @(_disabledCount > 0 ? "caution" : "")">
+            <div class="agg-label">Disabled clusters</div>
+            <div class="agg-value numeric">@_disabledCount</div>
         </div>
-    </div>
+    </section>
 
-    <h4 class="mt-4 mb-3">Clusters</h4>
-    <table class="table table-hover">
-        <thead><tr><th>ClusterId</th><th>Name</th><th>Enterprise / Site</th><th>Redundancy</th><th>Enabled</th><th></th></tr></thead>
-        <tbody>
-        @foreach (var c in _clusters)
-        {
-            <tr style="cursor: pointer;">
-                <td><code>@c.ClusterId</code></td>
-                <td>@c.Name</td>
-                <td>@c.Enterprise / @c.Site</td>
-                <td>@c.RedundancyMode</td>
-                <td>@(c.Enabled ? "Yes" : "No")</td>
-                <td><a href="/clusters/@c.ClusterId" class="btn btn-sm btn-outline-primary">Open</a></td>
-            </tr>
-        }
-        </tbody>
-    </table>
+    <section class="panel rise" style="animation-delay:.08s">
+        <div class="panel-head">Clusters</div>
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead>
+                    <tr>
+                        <th>Cluster ID</th>
+                        <th>Name</th>
+                        <th>Enterprise / Site</th>
+                        <th>Redundancy</th>
+                        <th>State</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                @foreach (var c in _clusters)
+                {
+                    <tr @onclick="@(() => Nav.NavigateTo($"/clusters/{c.ClusterId}"))">
+                        <td class="mono">@c.ClusterId</td>
+                        <td>@c.Name</td>
+                        <td>@c.Enterprise / @c.Site</td>
+                        <td class="mono">@c.RedundancyMode</td>
+                        <td>
+                            @if (c.Enabled)
+                            {
+                                <span class="chip chip-ok">enabled</span>
+                            }
+                            else
+                            {
+                                <span class="chip chip-idle">disabled</span>
+                            }
+                        </td>
+                        <td><a href="/clusters/@c.ClusterId">Open</a></td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    </section>
 }
 
 @code {
     private List<ServerCluster>? _clusters;
     private int _activeDraftCount;
     private int _publishedCount;
+    private int _disabledCount;
 
     protected override async Task OnInitializedAsync()
     {
         _clusters = await ClusterSvc.ListAsync(CancellationToken.None);
+        _disabledCount = _clusters.Count(c => !c.Enabled);
 
         foreach (var c in _clusters)
         {
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Hosts.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Hosts.razor
index 160d2a4..8164187 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Hosts.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Hosts.razor
@@ -8,7 +8,7 @@
 @inject NavigationManager Nav
 @implements IAsyncDisposable
 
-<h1 class="mb-4">Driver host status</h1>
+<h1 class="page-title">Driver host status</h1>
 
 <div class="d-flex align-items-center mb-3 gap-2">
     <button class="btn btn-sm btn-outline-primary" @onclick="RefreshAsync" disabled="@_refreshing">
@@ -20,13 +20,13 @@
     </span>
 </div>
 
-<div class="alert alert-info small mb-4">
+<section class="panel notice rise" style="animation-delay:.02s">
     Each row is one host reported by a driver instance on a server node. Galaxy drivers report
     per-Platform / per-AppEngine entries; Modbus drivers report the PLC endpoint. Rows age out
     of the Server's publisher on every 10-second heartbeat — rows whose LastSeen is older than
     30s are flagged Stale, which usually means the owning Server process has crashed or lost
     its DB connection.
-</div>
+</section>
 
 @if (_rows is null)
 {
@@ -34,91 +34,95 @@
 }
 else if (_rows.Count == 0)
 {
-    <div class="alert alert-secondary">
-        No host-status rows yet. The Server publishes its first tick 2s after startup; if this list stays empty, check that the Server is running and the driver implements <code>IHostConnectivityProbe</code>.
-    </div>
+    <section class="panel notice" style="animation-delay:.08s">
+        No host-status rows yet. The Server publishes its first tick 2s after startup; if this list stays empty, check that the Server is running and the driver implements <span class="mono">IHostConnectivityProbe</span>.
+    </section>
 }
 else
 {
-    <div class="row g-3 mb-4">
-        <div class="col-md-3"><div class="card"><div class="card-body">
-            <h6 class="text-muted mb-1">Hosts</h6>
-            <div class="fs-3">@_rows.Count</div>
-        </div></div></div>
-        <div class="col-md-3"><div class="card border-success"><div class="card-body">
-            <h6 class="text-muted mb-1">Running</h6>
-            <div class="fs-3 text-success">@_rows.Count(r => r.State == DriverHostState.Running && !HostStatusService.IsStale(r))</div>
-        </div></div></div>
-        <div class="col-md-3"><div class="card border-warning"><div class="card-body">
-            <h6 class="text-muted mb-1">Stale</h6>
-            <div class="fs-3 text-warning">@_rows.Count(HostStatusService.IsStale)</div>
-        </div></div></div>
-        <div class="col-md-3"><div class="card border-danger"><div class="card-body">
-            <h6 class="text-muted mb-1">Faulted</h6>
-            <div class="fs-3 text-danger">@_rows.Count(r => r.State == DriverHostState.Faulted)</div>
-        </div></div></div>
-    </div>
+    <section class="agg-grid rise" style="animation-delay:.08s">
+        <div class="agg-card">
+            <div class="agg-label">Hosts</div>
+            <div class="agg-value numeric">@_rows.Count</div>
+        </div>
+        <div class="agg-card">
+            <div class="agg-label">Running</div>
+            <div class="agg-value numeric">@_rows.Count(r => r.State == DriverHostState.Running && !HostStatusService.IsStale(r))</div>
+        </div>
+        <div class="agg-card caution">
+            <div class="agg-label">Stale</div>
+            <div class="agg-value numeric">@_rows.Count(HostStatusService.IsStale)</div>
+        </div>
+        <div class="agg-card alert">
+            <div class="agg-label">Faulted</div>
+            <div class="agg-value numeric">@_rows.Count(r => r.State == DriverHostState.Faulted)</div>
+        </div>
+    </section>
 
     @if (_rows.Any(HostStatusService.IsFlagged))
     {
         var flaggedCount = _rows.Count(HostStatusService.IsFlagged);
-        <div class="alert alert-danger small mb-3">
+        <section class="panel notice rise" style="animation-delay:.14s">
             <strong>@flaggedCount host@(flaggedCount == 1 ? "" : "s")</strong>
             reporting ≥ @HostStatusService.FailureFlagThreshold consecutive failures — circuit breaker
             may trip soon. Inspect the resilience columns below to locate.
-        </div>
+        </section>
     }
 
     @foreach (var cluster in _rows.GroupBy(r => r.ClusterId ?? "(unassigned)").OrderBy(g => g.Key))
     {
-        <h2 class="h5 mt-4">Cluster: <code>@cluster.Key</code></h2>
-        <table class="table table-sm table-hover align-middle">
-            <thead>
-                <tr>
-                    <th>Node</th>
-                    <th>Driver</th>
-                    <th>Host</th>
-                    <th>State</th>
-                    <th class="text-end" title="Consecutive failures — resets when a call succeeds or the breaker closes">Fail#</th>
-                    <th class="text-end" title="In-flight capability calls (bulkhead-depth proxy)">In-flight</th>
-                    <th>Breaker opened</th>
-                    <th>Last transition</th>
-                    <th>Last seen</th>
-                    <th>Detail</th>
-                </tr>
-            </thead>
-            <tbody>
-            @foreach (var r in cluster)
-            {
-                <tr class="@RowClass(r)">
-                    <td><code>@r.NodeId</code></td>
-                    <td><code>@r.DriverInstanceId</code></td>
-                    <td>@r.HostName</td>
-                    <td>
-                        <span class="badge @StateBadge(r.State)">@r.State</span>
-                        @if (HostStatusService.IsStale(r))
-                        {
-                            <span class="badge bg-warning text-dark ms-1">Stale</span>
-                        }
-                        @if (HostStatusService.IsFlagged(r))
-                        {
-                            <span class="badge bg-danger ms-1" title="≥ @HostStatusService.FailureFlagThreshold consecutive failures">Flagged</span>
-                        }
-                    </td>
-                    <td class="text-end small @(HostStatusService.IsFlagged(r) ? "text-danger fw-bold" : "")">
-                        @r.ConsecutiveFailures
-                    </td>
-                    <td class="text-end small">@r.CurrentBulkheadDepth</td>
-                    <td class="small">
-                        @(r.LastCircuitBreakerOpenUtc is null ? "—" : FormatAge(r.LastCircuitBreakerOpenUtc.Value))
-                    </td>
-                    <td class="small">@FormatAge(r.StateChangedUtc)</td>
-                    <td class="small @(HostStatusService.IsStale(r) ? "text-warning" : "")">@FormatAge(r.LastSeenUtc)</td>
-                    <td class="text-truncate small" style="max-width: 240px;" title="@r.Detail">@r.Detail</td>
-                </tr>
-            }
-            </tbody>
-        </table>
+        <section class="panel rise" style="animation-delay:.14s">
+            <div class="panel-head">Cluster: <span class="mono">@cluster.Key</span></div>
+            <div class="table-wrap">
+                <table class="data-table">
+                    <thead>
+                        <tr>
+                            <th>Node</th>
+                            <th>Driver</th>
+                            <th>Host</th>
+                            <th>State</th>
+                            <th class="num" title="Consecutive failures — resets when a call succeeds or the breaker closes">Fail#</th>
+                            <th class="num" title="In-flight capability calls (bulkhead-depth proxy)">In-flight</th>
+                            <th>Breaker opened</th>
+                            <th>Last transition</th>
+                            <th>Last seen</th>
+                            <th>Detail</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    @foreach (var r in cluster)
+                    {
+                        <tr>
+                            <td><span class="mono">@r.NodeId</span></td>
+                            <td><span class="mono">@r.DriverInstanceId</span></td>
+                            <td>@r.HostName</td>
+                            <td>
+                                <span class="chip @StateBadge(r.State)">@r.State</span>
+                                @if (HostStatusService.IsStale(r))
+                                {
+                                    <span class="chip chip-warn ms-1">Stale</span>
+                                }
+                                @if (HostStatusService.IsFlagged(r))
+                                {
+                                    <span class="chip chip-bad ms-1" title="≥ @HostStatusService.FailureFlagThreshold consecutive failures">Flagged</span>
+                                }
+                            </td>
+                            <td class="num small @(HostStatusService.IsFlagged(r) ? "s-bad fw-bold" : "")">
+                                @r.ConsecutiveFailures
+                            </td>
+                            <td class="num small">@r.CurrentBulkheadDepth</td>
+                            <td class="small">
+                                @(r.LastCircuitBreakerOpenUtc is null ? "—" : FormatAge(r.LastCircuitBreakerOpenUtc.Value))
+                            </td>
+                            <td class="small">@FormatAge(r.StateChangedUtc)</td>
+                            <td class="small @(HostStatusService.IsStale(r) ? "s-warn" : "")">@FormatAge(r.LastSeenUtc)</td>
+                            <td class="text-truncate small" style="max-width: 240px;" title="@r.Detail">@r.Detail</td>
+                        </tr>
+                    }
+                    </tbody>
+                </table>
+            </div>
+        </section>
     }
 }
 
@@ -207,10 +211,10 @@ else
 
     private static string StateBadge(DriverHostState s) => s switch
     {
-        DriverHostState.Running => "bg-success",
-        DriverHostState.Stopped => "bg-secondary",
-        DriverHostState.Faulted => "bg-danger",
-        _ => "bg-secondary",
+        DriverHostState.Running => "chip-ok",
+        DriverHostState.Stopped => "chip-idle",
+        DriverHostState.Faulted => "chip-bad",
+        _ => "chip-idle",
     };
 
     private static string FormatAge(DateTime t)
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Login.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Login.razor
index c85f966..83aef58 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Login.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Login.razor
@@ -7,37 +7,37 @@
 @inject ILdapAuthService LdapAuth
 @inject NavigationManager Nav
 
-<div class="row justify-content-center mt-5">
-    <div class="col-md-5">
-        <div class="card">
-            <div class="card-body">
-                <h4 class="mb-4">OtOpcUa Admin — sign in</h4>
+<div class="login-wrap rise" style="animation-delay:.02s">
+    <section class="panel">
+        <div class="panel-head">OtOpcUa Admin &mdash; sign in</div>
+        <div style="padding:1.1rem 1.1rem 1.25rem">
+            <EditForm Model="_input" OnValidSubmit="SignInAsync" FormName="login">
+                <div class="mb-3">
+                    <label class="form-label">Username</label>
+                    <InputText @bind-Value="_input.Username" class="form-control form-control-sm" autocomplete="username"/>
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">Password</label>
+                    <InputText type="password" @bind-Value="_input.Password" class="form-control form-control-sm" autocomplete="current-password"/>
+                </div>
 
-                <EditForm Model="_input" OnValidSubmit="SignInAsync" FormName="login">
-                    <div class="mb-3">
-                        <label class="form-label">Username</label>
-                        <InputText @bind-Value="_input.Username" class="form-control" autocomplete="username"/>
-                    </div>
-                    <div class="mb-3">
-                        <label class="form-label">Password</label>
-                        <InputText type="password" @bind-Value="_input.Password" class="form-control" autocomplete="current-password"/>
-                    </div>
+                @if (_error is not null)
+                {
+                    <div class="panel notice" style="margin-bottom:.85rem">@_error</div>
+                }
 
-                    @if (_error is not null) { <div class="alert alert-danger">@_error</div> }
+                <button class="btn btn-primary w-100" type="submit" disabled="@_busy">
+                    @(_busy ? "Signing in…" : "Sign in")
+                </button>
+            </EditForm>
 
-                    <button class="btn btn-primary w-100" type="submit" disabled="@_busy">
-                        @(_busy ? "Signing in…" : "Sign in")
-                    </button>
-                </EditForm>
-
-                <hr/>
-                <small class="text-muted">
-                    LDAP bind against the configured directory. Dev defaults to GLAuth on
-                    <code>localhost:3893</code>.
-                </small>
+            <div style="margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--rule);
+                        font-size:.78rem;color:var(--ink-faint)">
+                LDAP bind against the configured directory. Dev defaults to GLAuth on
+                <span class="mono">localhost:3893</span>.
             </div>
         </div>
-    </div>
+    </section>
 </div>
 
 @code {
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Modbus/ModbusAddressEditor.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Modbus/ModbusAddressEditor.razor
index 4eba086..3e63981 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Modbus/ModbusAddressEditor.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Modbus/ModbusAddressEditor.razor
@@ -13,7 +13,7 @@
 
 <div class="mb-3">
     <label class="form-label">Address string</label>
-    <input type="text" class="form-control @(IsValid ? "is-valid" : Diagnostic is null ? "" : "is-invalid")"
+    <input type="text" class="form-control form-control-sm @(IsValid ? "is-valid" : Diagnostic is null ? "" : "is-invalid")"
            value="@AddressString"
            @oninput="@OnInputChanged"
            placeholder="e.g. 40001:F:CDAB:5"/>
@@ -21,13 +21,13 @@
     {
         <div class="form-text text-success">
             <strong>Parsed:</strong>
-            Region=<code>@_parsed.Region</code>
-            Offset=<code>@_parsed.Offset</code>
-            Type=<code>@_parsed.DataType</code>
-            @if (_parsed.Bit.HasValue) { <text>Bit=<code>@_parsed.Bit</code></text> }
-            @if (_parsed.ByteOrder != ModbusByteOrder.BigEndian) { <text>Order=<code>@_parsed.ByteOrder</code></text> }
-            @if (_parsed.ArrayCount.HasValue) { <text>Array[<code>@_parsed.ArrayCount</code>]</text> }
-            @if (_parsed.StringLength > 0) { <text>StrLen=<code>@_parsed.StringLength</code></text> }
+            Region=<span class="mono">@_parsed.Region</span>
+            Offset=<span class="mono">@_parsed.Offset</span>
+            Type=<span class="mono">@_parsed.DataType</span>
+            @if (_parsed.Bit.HasValue) { <text>Bit=<span class="mono">@_parsed.Bit</span></text> }
+            @if (_parsed.ByteOrder != ModbusByteOrder.BigEndian) { <text>Order=<span class="mono">@_parsed.ByteOrder</span></text> }
+            @if (_parsed.ArrayCount.HasValue) { <text>Array[<span class="mono">@_parsed.ArrayCount</span>]</text> }
+            @if (_parsed.StringLength > 0) { <text>StrLen=<span class="mono">@_parsed.StringLength</span></text> }
         </div>
     }
     else if (Diagnostic is not null)
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Modbus/ModbusAddressPreview.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Modbus/ModbusAddressPreview.razor
index f6c35d9..4d99d40 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Modbus/ModbusAddressPreview.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Modbus/ModbusAddressPreview.razor
@@ -14,47 +14,52 @@
 
 <PageTitle>Modbus address preview</PageTitle>
 
-<div class="container py-4">
-    <h1>Modbus address preview</h1>
-    <p class="text-muted">
-        Paste an address string and watch the parser break it down field by field. Useful for
-        sanity-checking a tag spreadsheet row before adding it to a driver's <code>DriverConfig</code>.
-        Full grammar: <a href="https://github.com/" target="_blank">docs/v2/modbus-addressing.md</a>.
-    </p>
+<h1 class="page-title">Modbus address preview</h1>
+<p class="text-muted">
+    Paste an address string and watch the parser break it down field by field. Useful for
+    sanity-checking a tag spreadsheet row before adding it to a driver's <span class="mono">DriverConfig</span>.
+    Full grammar: <a href="https://github.com/" target="_blank">docs/v2/modbus-addressing.md</a>.
+</p>
 
-    <div class="row g-3">
-        <div class="col-md-4">
-            <label class="form-label">PLC family hint (drives the family-native branch)</label>
-            <select class="form-select" @bind="_family">
-                @foreach (var f in Enum.GetValues<ModbusFamily>())
-                {
-                    <option value="@f">@f</option>
-                }
-            </select>
-        </div>
-        @if (_family == ModbusFamily.MELSEC)
-        {
+<section class="panel rise" style="animation-delay:.02s">
+    <div class="panel-head">Family</div>
+    <div style="padding:.75rem 1rem">
+        <div class="row g-3">
             <div class="col-md-4">
-                <label class="form-label">MELSEC sub-family</label>
-                <select class="form-select" @bind="_melsecSubFamily">
-                    @foreach (var f in Enum.GetValues<MelsecFamily>())
+                <label class="form-label">PLC family hint (drives the family-native branch)</label>
+                <select class="form-select form-select-sm" @bind="_family">
+                    @foreach (var f in Enum.GetValues<ModbusFamily>())
                     {
                         <option value="@f">@f</option>
                     }
                 </select>
             </div>
-        }
-    </div>
+            @if (_family == ModbusFamily.MELSEC)
+            {
+                <div class="col-md-4">
+                    <label class="form-label">MELSEC sub-family</label>
+                    <select class="form-select form-select-sm" @bind="_melsecSubFamily">
+                        @foreach (var f in Enum.GetValues<MelsecFamily>())
+                        {
+                            <option value="@f">@f</option>
+                        }
+                    </select>
+                </div>
+            }
+        </div>
 
-    <div class="mt-4">
-        <ModbusAddressEditor @bind-AddressString="_address"
-                             Family="_family"
-                             MelsecSubFamily="_melsecSubFamily"/>
+        <div class="mt-3">
+            <ModbusAddressEditor @bind-AddressString="_address"
+                                 Family="_family"
+                                 MelsecSubFamily="_melsecSubFamily"/>
+        </div>
     </div>
+</section>
 
-    <h3 class="mt-5">Quick-reference grammar</h3>
-    <pre class="bg-light p-3 rounded small">@_grammarReference</pre>
-</div>
+<section class="panel rise" style="animation-delay:.08s">
+    <div class="panel-head">Quick-reference grammar</div>
+    <pre class="small" style="padding:1rem;margin:0;overflow-x:auto">@_grammarReference</pre>
+</section>
 
 @code {
     private string? _address;
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Modbus/ModbusDiagnostics.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Modbus/ModbusDiagnostics.razor
index 7a05d59..04a66c5 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Modbus/ModbusDiagnostics.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Modbus/ModbusDiagnostics.razor
@@ -10,76 +10,80 @@
 
 <PageTitle>Modbus diagnostics — @DriverInstanceId</PageTitle>
 
-<div class="container py-4">
-    <h1>Modbus auto-prohibitions</h1>
-    <p class="text-muted">
-        Driver instance <code>@DriverInstanceId</code>. Live snapshot of coalesced ranges
-        the planner has learned to read individually (#148 / #150 / #151 / #152).
-    </p>
+<h1 class="page-title">Modbus auto-prohibitions</h1>
+<p class="text-muted">
+    Driver instance <span class="mono">@DriverInstanceId</span>. Live snapshot of coalesced ranges
+    the planner has learned to read individually (#148 / #150 / #151 / #152).
+</p>
 
-    <div class="mb-3">
-        <button class="btn btn-sm btn-outline-primary" @onclick="LoadAsync" disabled="@_loading">
-            @(_loading ? "Loading…" : "Refresh")
-        </button>
-        @if (_lastRefreshed is not null)
-        {
-            <span class="text-muted ms-3 small">Last refreshed @_lastRefreshed.Value.ToLocalTime().ToString("HH:mm:ss")</span>
-        }
-    </div>
-
-    @if (_error is not null)
+<div class="toolbar" style="margin-bottom:.75rem">
+    <button class="btn btn-sm btn-outline-primary" @onclick="LoadAsync" disabled="@_loading">
+        @(_loading ? "Loading…" : "Refresh")
+    </button>
+    @if (_lastRefreshed is not null)
     {
-        <div class="alert alert-danger">@_error</div>
-    }
-    else if (_response is null)
-    {
-        <p class="text-muted">Click <strong>Refresh</strong> to load.</p>
-    }
-    else if (_response.Count == 0)
-    {
-        <div class="alert alert-success">No auto-prohibitions. The planner is coalescing freely.</div>
-    }
-    else
-    {
-        <table class="table table-sm">
-            <thead>
-                <tr>
-                    <th>Unit</th>
-                    <th>Region</th>
-                    <th>Start</th>
-                    <th>End</th>
-                    <th>Span</th>
-                    <th>Status</th>
-                    <th>Last probed</th>
-                </tr>
-            </thead>
-            <tbody>
-            @foreach (var r in _response.Ranges.OrderBy(r => r.UnitId).ThenBy(r => r.Region).ThenBy(r => r.StartAddress))
-            {
-                <tr>
-                    <td><code>@r.UnitId</code></td>
-                    <td><code>@r.Region</code></td>
-                    <td><code>@r.StartAddress</code></td>
-                    <td><code>@r.EndAddress</code></td>
-                    <td>@(r.EndAddress - r.StartAddress + 1)</td>
-                    <td>
-                        @if (r.BisectionPending)
-                        {
-                            <span class="badge bg-warning text-dark">BISECTING</span>
-                        }
-                        else
-                        {
-                            <span class="badge bg-danger">ISOLATED</span>
-                        }
-                    </td>
-                    <td class="small text-muted">@FormatTimeSince(r.LastProbedUtc)</td>
-                </tr>
-            }
-            </tbody>
-        </table>
+        <span class="text-muted ms-3 small">Last refreshed @_lastRefreshed.Value.ToLocalTime().ToString("HH:mm:ss")</span>
     }
+    <span class="spacer"></span>
 </div>
 
+@if (_error is not null)
+{
+    <section class="panel notice rise" style="animation-delay:.02s">@_error</section>
+}
+else if (_response is null)
+{
+    <p class="text-muted">Click <strong>Refresh</strong> to load.</p>
+}
+else if (_response.Count == 0)
+{
+    <section class="panel notice rise" style="animation-delay:.02s">No auto-prohibitions. The planner is coalescing freely.</section>
+}
+else
+{
+    <section class="panel rise" style="animation-delay:.02s">
+        <div class="panel-head">Prohibited ranges</div>
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead>
+                    <tr>
+                        <th>Unit</th>
+                        <th>Region</th>
+                        <th class="num">Start</th>
+                        <th class="num">End</th>
+                        <th class="num">Span</th>
+                        <th>Status</th>
+                        <th>Last probed</th>
+                    </tr>
+                </thead>
+                <tbody>
+                @foreach (var r in _response.Ranges.OrderBy(r => r.UnitId).ThenBy(r => r.Region).ThenBy(r => r.StartAddress))
+                {
+                    <tr>
+                        <td class="mono">@r.UnitId</td>
+                        <td class="mono">@r.Region</td>
+                        <td class="num mono">@r.StartAddress</td>
+                        <td class="num mono">@r.EndAddress</td>
+                        <td class="num">@(r.EndAddress - r.StartAddress + 1)</td>
+                        <td>
+                            @if (r.BisectionPending)
+                            {
+                                <span class="chip chip-warn">BISECTING</span>
+                            }
+                            else
+                            {
+                                <span class="chip chip-bad">ISOLATED</span>
+                            }
+                        </td>
+                        <td class="small text-muted">@FormatTimeSince(r.LastProbedUtc)</td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    </section>
+}
+
 @code {
     [Parameter] public string DriverInstanceId { get; set; } = string.Empty;
 
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Modbus/ModbusOptionsEditor.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Modbus/ModbusOptionsEditor.razor
index 66ddf2c..4545127 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Modbus/ModbusOptionsEditor.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Modbus/ModbusOptionsEditor.razor
@@ -9,27 +9,27 @@
 
 <div class="modbus-options-editor">
 
-    <h5>Connection</h5>
+    <div class="panel-head">Connection</div>
     <div class="row mb-3">
         <div class="col-sm-6">
             <label class="form-label">Host</label>
-            <input class="form-control" @bind="Model.Host"/>
+            <input class="form-control form-control-sm" @bind="Model.Host"/>
         </div>
         <div class="col-sm-3">
             <label class="form-label">Port</label>
-            <input type="number" class="form-control" @bind="Model.Port"/>
+            <input type="number" class="form-control form-control-sm" @bind="Model.Port"/>
         </div>
         <div class="col-sm-3">
             <label class="form-label">Default UnitId</label>
-            <input type="number" class="form-control" @bind="Model.UnitId"/>
+            <input type="number" class="form-control form-control-sm" @bind="Model.UnitId"/>
         </div>
     </div>
 
-    <h5>Family (#144)</h5>
+    <div class="panel-head">Family (#144)</div>
     <div class="row mb-3">
         <div class="col-sm-6">
             <label class="form-label">PLC family</label>
-            <select class="form-select" @bind="Model.Family">
+            <select class="form-select form-select-sm" @bind="Model.Family">
                 @foreach (var f in Enum.GetValues<ModbusFamily>())
                 {
                     <option value="@f">@f</option>
@@ -40,7 +40,7 @@
         {
             <div class="col-sm-6">
                 <label class="form-label">MELSEC sub-family</label>
-                <select class="form-select" @bind="Model.MelsecSubFamily">
+                <select class="form-select form-select-sm" @bind="Model.MelsecSubFamily">
                     @foreach (var f in Enum.GetValues<MelsecFamily>())
                     {
                         <option value="@f">@f</option>
@@ -50,7 +50,7 @@
         }
     </div>
 
-    <h5>Keep-alive (#139)</h5>
+    <div class="panel-head">Keep-alive (#139)</div>
     <div class="row mb-3">
         <div class="col-sm-3">
             <div class="form-check mt-4">
@@ -60,51 +60,51 @@
         </div>
         <div class="col-sm-3">
             <label class="form-label">Time (s)</label>
-            <input type="number" class="form-control" @bind="Model.KeepAliveTimeSec"/>
+            <input type="number" class="form-control form-control-sm" @bind="Model.KeepAliveTimeSec"/>
         </div>
         <div class="col-sm-3">
             <label class="form-label">Interval (s)</label>
-            <input type="number" class="form-control" @bind="Model.KeepAliveIntervalSec"/>
+            <input type="number" class="form-control form-control-sm" @bind="Model.KeepAliveIntervalSec"/>
         </div>
         <div class="col-sm-3">
             <label class="form-label">Retry count</label>
-            <input type="number" class="form-control" @bind="Model.KeepAliveRetryCount"/>
+            <input type="number" class="form-control form-control-sm" @bind="Model.KeepAliveRetryCount"/>
         </div>
     </div>
 
-    <h5>Reconnect (#139)</h5>
+    <div class="panel-head">Reconnect (#139)</div>
     <div class="row mb-3">
         <div class="col-sm-4">
             <label class="form-label">Initial delay (ms)</label>
-            <input type="number" class="form-control" @bind="Model.ReconnectInitialDelayMs"/>
+            <input type="number" class="form-control form-control-sm" @bind="Model.ReconnectInitialDelayMs"/>
         </div>
         <div class="col-sm-4">
             <label class="form-label">Max delay (ms)</label>
-            <input type="number" class="form-control" @bind="Model.ReconnectMaxDelayMs"/>
+            <input type="number" class="form-control form-control-sm" @bind="Model.ReconnectMaxDelayMs"/>
         </div>
         <div class="col-sm-4">
             <label class="form-label">Backoff multiplier</label>
-            <input type="number" step="0.1" class="form-control" @bind="Model.ReconnectBackoffMultiplier"/>
+            <input type="number" step="0.1" class="form-control form-control-sm" @bind="Model.ReconnectBackoffMultiplier"/>
         </div>
     </div>
 
-    <h5>Protocol (#140)</h5>
+    <div class="panel-head">Protocol (#140)</div>
     <div class="row mb-3">
         <div class="col-sm-3">
             <label class="form-label">Max regs / read</label>
-            <input type="number" class="form-control" @bind="Model.MaxRegistersPerRead"/>
+            <input type="number" class="form-control form-control-sm" @bind="Model.MaxRegistersPerRead"/>
         </div>
         <div class="col-sm-3">
             <label class="form-label">Max regs / write</label>
-            <input type="number" class="form-control" @bind="Model.MaxRegistersPerWrite"/>
+            <input type="number" class="form-control form-control-sm" @bind="Model.MaxRegistersPerWrite"/>
         </div>
         <div class="col-sm-3">
             <label class="form-label">Max coils / read</label>
-            <input type="number" class="form-control" @bind="Model.MaxCoilsPerRead"/>
+            <input type="number" class="form-control form-control-sm" @bind="Model.MaxCoilsPerRead"/>
         </div>
         <div class="col-sm-3">
             <label class="form-label">Max read gap (#143)</label>
-            <input type="number" class="form-control" @bind="Model.MaxReadGap"/>
+            <input type="number" class="form-control form-control-sm" @bind="Model.MaxReadGap"/>
         </div>
     </div>
 
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Reservations.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Reservations.razor
index 4e79ea8..b2c566b 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Reservations.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/Reservations.razor
@@ -5,52 +5,60 @@
 @attribute [Authorize(Policy = "CanPublish")]
 @inject ReservationService ReservationSvc
 
-<h1 class="mb-4">External-ID reservations</h1>
+<h1 class="page-title">External-ID reservations</h1>
 <p class="text-muted">
     Fleet-wide ZTag + SAPID reservation state (decision #124). Releasing a reservation is a
     FleetAdmin-only audit-logged action — only release when the physical asset is permanently
     retired and its ID needs to be reused by a different equipment.
 </p>
 
-<h4 class="mt-4">Active</h4>
-@if (_active is null) { <p>Loading…</p> }
-else if (_active.Count == 0) { <p class="text-muted">No active reservations.</p> }
-else
-{
-    <table class="table table-sm">
-        <thead><tr><th>Kind</th><th>Value</th><th>EquipmentUuid</th><th>Cluster</th><th>First published</th><th>Last published</th><th></th></tr></thead>
-        <tbody>
-        @foreach (var r in _active)
-        {
-            <tr>
-                <td><code>@r.Kind</code></td>
-                <td><code>@r.Value</code></td>
-                <td><code>@r.EquipmentUuid</code></td>
-                <td>@r.ClusterId</td>
-                <td><small>@r.FirstPublishedAt.ToString("u") by @r.FirstPublishedBy</small></td>
-                <td><small>@r.LastPublishedAt.ToString("u")</small></td>
-                <td><button class="btn btn-sm btn-outline-danger" @onclick='() => OpenReleaseDialog(r)'>Release…</button></td>
-            </tr>
-        }
-        </tbody>
-    </table>
-}
+<section class="panel rise" style="animation-delay:.02s">
+    <div class="panel-head">Active</div>
+    @if (_active is null) { <p class="px-3 py-2">Loading…</p> }
+    else if (_active.Count == 0) { <p class="px-3 py-2 text-muted">No active reservations.</p> }
+    else
+    {
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead><tr><th>Kind</th><th>Value</th><th>EquipmentUuid</th><th>Cluster</th><th>First published</th><th>Last published</th><th></th></tr></thead>
+                <tbody>
+                @foreach (var r in _active)
+                {
+                    <tr>
+                        <td><span class="mono">@r.Kind</span></td>
+                        <td><span class="mono">@r.Value</span></td>
+                        <td><span class="mono">@r.EquipmentUuid</span></td>
+                        <td>@r.ClusterId</td>
+                        <td><small>@r.FirstPublishedAt.ToString("u") by @r.FirstPublishedBy</small></td>
+                        <td><small>@r.LastPublishedAt.ToString("u")</small></td>
+                        <td><button class="btn btn-sm btn-outline-danger" @onclick='() => OpenReleaseDialog(r)'>Release…</button></td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    }
+</section>
 
-<h4 class="mt-4">Released (most recent 100)</h4>
-@if (_released is null) { <p>Loading…</p> }
-else if (_released.Count == 0) { <p class="text-muted">No released reservations yet.</p> }
-else
-{
-    <table class="table table-sm">
-        <thead><tr><th>Kind</th><th>Value</th><th>Released at</th><th>By</th><th>Reason</th></tr></thead>
-        <tbody>
-        @foreach (var r in _released)
-        {
-            <tr><td><code>@r.Kind</code></td><td><code>@r.Value</code></td><td>@r.ReleasedAt?.ToString("u")</td><td>@r.ReleasedBy</td><td>@r.ReleaseReason</td></tr>
-        }
-        </tbody>
-    </table>
-}
+<section class="panel rise" style="animation-delay:.08s">
+    <div class="panel-head">Released (most recent 100)</div>
+    @if (_released is null) { <p class="px-3 py-2">Loading…</p> }
+    else if (_released.Count == 0) { <p class="px-3 py-2 text-muted">No released reservations yet.</p> }
+    else
+    {
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead><tr><th>Kind</th><th>Value</th><th>Released at</th><th>By</th><th>Reason</th></tr></thead>
+                <tbody>
+                @foreach (var r in _released)
+                {
+                    <tr><td><span class="mono">@r.Kind</span></td><td><span class="mono">@r.Value</span></td><td>@r.ReleasedAt?.ToString("u")</td><td>@r.ReleasedBy</td><td>@r.ReleaseReason</td></tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    }
+</section>
 
 @if (_releasing is not null)
 {
@@ -58,13 +66,13 @@ else
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title">Release reservation <code>@_releasing.Kind</code> = <code>@_releasing.Value</code></h5>
+                    <h5 class="modal-title">Release reservation <span class="mono">@_releasing.Kind</span> = <span class="mono">@_releasing.Value</span></h5>
                 </div>
                 <div class="modal-body">
                     <p>This makes the (Kind, Value) pair available for a different EquipmentUuid in a future publish. Audit-logged.</p>
                     <label class="form-label">Reason (required)</label>
-                    <textarea class="form-control" rows="3" @bind="_reason"></textarea>
-                    @if (_error is not null) { <div class="alert alert-danger mt-2">@_error</div> }
+                    <textarea class="form-control form-control-sm" rows="3" @bind="_reason"></textarea>
+                    @if (_error is not null) { <section class="panel notice mt-2">@_error</section> }
                 </div>
                 <div class="modal-footer">
                     <button class="btn btn-secondary" @onclick='() => _releasing = null'>Cancel</button>
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/RoleGrants.razor b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/RoleGrants.razor
index e3d4fb4..aa25c3c 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/RoleGrants.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/Components/Pages/RoleGrants.razor
@@ -12,15 +12,15 @@
 @inject NavigationManager Nav
 @implements IAsyncDisposable
 
-<h1 class="mb-4">LDAP group → Admin role grants</h1>
+<h1 class="page-title">LDAP group → Admin role grants</h1>
 
-<div class="alert alert-info small mb-4">
+<section class="panel notice rise" style="animation-delay:.02s">
     Maps LDAP groups to Admin UI roles (ConfigViewer / ConfigEditor / FleetAdmin). Control-plane
-    only — OPC UA data-path authorization reads <code>NodeAcl</code> rows directly and is
+    only — OPC UA data-path authorization reads <span class="mono">NodeAcl</span> rows directly and is
     unaffected by these mappings (see decision #150). A fleet-wide grant applies across every
     cluster; a cluster-scoped grant only binds within the named cluster. The same LDAP group
     may hold different roles on different clusters.
-</div>
+</section>
 
 <div class="d-flex justify-content-end mb-3">
     <button class="btn btn-primary btn-sm" @onclick="StartAdd">Add grant</button>
@@ -37,39 +37,44 @@ else if (_rows.Count == 0)
 }
 else
 {
-    <table class="table table-sm table-hover">
-        <thead>
-            <tr><th>LDAP group</th><th>Role</th><th>Scope</th><th>Created</th><th>Notes</th><th></th></tr>
-        </thead>
-        <tbody>
-        @foreach (var r in _rows)
-        {
-            <tr>
-                <td><code>@r.LdapGroup</code></td>
-                <td><span class="badge bg-secondary">@r.Role</span></td>
-                <td>@(r.IsSystemWide ? "Fleet-wide" : $"Cluster: {r.ClusterId}")</td>
-                <td class="small">@r.CreatedAtUtc.ToString("yyyy-MM-dd")</td>
-                <td class="small text-muted">@r.Notes</td>
-                <td><button class="btn btn-sm btn-outline-danger" @onclick="() => DeleteAsync(r.Id)">Revoke</button></td>
-            </tr>
-        }
-        </tbody>
-    </table>
+    <section class="panel rise" style="animation-delay:.08s">
+        <div class="panel-head">Grants</div>
+        <div class="table-wrap">
+            <table class="data-table">
+                <thead>
+                    <tr><th>LDAP group</th><th>Role</th><th>Scope</th><th>Created</th><th>Notes</th><th></th></tr>
+                </thead>
+                <tbody>
+                @foreach (var r in _rows)
+                {
+                    <tr>
+                        <td><span class="mono">@r.LdapGroup</span></td>
+                        <td><span class="chip chip-idle">@r.Role</span></td>
+                        <td>@(r.IsSystemWide ? "Fleet-wide" : $"Cluster: {r.ClusterId}")</td>
+                        <td class="small">@r.CreatedAtUtc.ToString("yyyy-MM-dd")</td>
+                        <td class="small text-muted">@r.Notes</td>
+                        <td><button class="btn btn-sm btn-outline-danger" @onclick="() => DeleteAsync(r.Id)">Revoke</button></td>
+                    </tr>
+                }
+                </tbody>
+            </table>
+        </div>
+    </section>
 }
 
 @if (_showForm)
 {
-    <div class="card mt-3">
-        <div class="card-body">
-            <h5>New role grant</h5>
+    <section class="panel rise" style="animation-delay:.14s">
+        <div class="panel-head">New role grant</div>
+        <div class="p-3">
             <div class="row g-3">
                 <div class="col-md-4">
                     <label class="form-label">LDAP group (DN)</label>
-                    <input class="form-control" @bind="_group" placeholder="cn=fleet-admin,ou=groups,dc=…"/>
+                    <input class="form-control form-control-sm" @bind="_group" placeholder="cn=fleet-admin,ou=groups,dc=…"/>
                 </div>
                 <div class="col-md-3">
                     <label class="form-label">Role</label>
-                    <select class="form-select" @bind="_role">
+                    <select class="form-select form-select-sm" @bind="_role">
                         @foreach (var r in Enum.GetValues<AdminRole>())
                         {
                             <option value="@r">@r</option>
@@ -84,7 +89,7 @@ else
                 </div>
                 <div class="col-md-3">
                     <label class="form-label">Cluster @(_isSystemWide ? "(disabled)" : "")</label>
-                    <select class="form-select" @bind="_clusterId" disabled="@_isSystemWide">
+                    <select class="form-select form-select-sm" @bind="_clusterId" disabled="@_isSystemWide">
                         <option value="">-- select --</option>
                         @if (_clusters is not null)
                         {
@@ -97,16 +102,16 @@ else
                 </div>
                 <div class="col-12">
                     <label class="form-label">Notes (optional)</label>
-                    <input class="form-control" @bind="_notes"/>
+                    <input class="form-control form-control-sm" @bind="_notes"/>
                 </div>
             </div>
-            @if (_error is not null) { <div class="alert alert-danger mt-3">@_error</div> }
+            @if (_error is not null) { <section class="panel notice mt-3">@_error</section> }
             <div class="mt-3">
                 <button class="btn btn-sm btn-primary" @onclick="SaveAsync">Save</button>
                 <button class="btn btn-sm btn-secondary ms-2" @onclick="() => _showForm = false">Cancel</button>
             </div>
         </div>
-    </div>
+    </section>
 }
 
 @code {
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/app.css b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/app.css
index 3ec2fc2..43c8937 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/app.css
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/app.css
@@ -1,3 +1,105 @@
-/* OtOpcUa Admin — ScadaLink-parity palette. Keep it minimal here; lean on Bootstrap 5. */
-body { background-color: #f5f6fa; }
-.nav-link.active { background-color: rgba(255,255,255,0.1); border-radius: 4px; }
+/* OtOpcUa Admin — view-specific layer over the technical-light theme (theme.css).
+   Tokens live in theme.css; this sheet only carries layout + the side rail. */
+
+/* ── App shell: side rail + page ─────────────────────────────────────────── */
+.app-shell {
+    display: flex;
+    align-items: stretch;
+    min-height: calc(100vh - 3.3rem);
+}
+
+.app-shell .page {
+    flex: 1;
+    min-width: 0;
+}
+
+/* ── Side rail ───────────────────────────────────────────────────────────── */
+.side-rail {
+    width: 218px;
+    flex: 0 0 218px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    padding: 1rem 0.7rem;
+    background: var(--card);
+    border-right: 1px solid var(--rule-strong);
+}
+
+.rail-eyebrow {
+    font-size: 0.68rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    color: var(--ink-faint);
+    padding: 0.3rem 0.6rem;
+}
+
+.rail-link {
+    display: block;
+    padding: 0.4rem 0.6rem;
+    border-radius: 4px;
+    border-left: 2px solid transparent;
+    font-size: 0.86rem;
+    color: var(--ink-soft);
+}
+.rail-link:hover {
+    background: #f3f6fd;
+    color: var(--ink);
+    text-decoration: none;
+}
+.rail-link.active {
+    background: #eef2fc;
+    border-left-color: var(--accent);
+    color: var(--accent-deep);
+    font-weight: 600;
+}
+
+/* ── Session block, pinned to the rail foot ──────────────────────────────── */
+.rail-foot {
+    margin-top: auto;
+    padding-top: 0.6rem;
+    border-top: 1px solid var(--rule);
+}
+.rail-user {
+    display: block;
+    padding: 0 0.6rem;
+    font-weight: 600;
+    font-size: 0.88rem;
+}
+.rail-roles {
+    padding: 0.1rem 0.6rem 0.5rem;
+    font-family: var(--mono);
+    font-size: 0.72rem;
+    color: var(--ink-faint);
+}
+.rail-btn {
+    display: inline-block;
+    margin: 0 0.6rem;
+    padding: 0.3rem 0.7rem;
+    font-size: 0.78rem;
+    font-weight: 600;
+    color: var(--ink-soft);
+    background: var(--card);
+    border: 1px solid var(--rule-strong);
+    border-radius: 4px;
+    cursor: pointer;
+}
+.rail-btn:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+    text-decoration: none;
+}
+
+/* ── Page headings — uppercase eyebrow, calm spacing ─────────────────────── */
+.page-title {
+    font-size: 1.15rem;
+    font-weight: 600;
+    margin: 0 0 1rem;
+    color: var(--ink);
+}
+
+/* ── Login card centring ─────────────────────────────────────────────────── */
+.login-wrap {
+    max-width: 380px;
+    margin: 3.5rem auto 0;
+}
diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/fonts/ibm-plex-mono-500.woff2 b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/fonts/ibm-plex-mono-500.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..99c261038d1394955e815031abc536f4c298c119
GIT binary patch
literal 14988
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
Wm+jZ3c#rX>OWE+pg-nQ{F3fEmM~x%^

literal 0
HcmV?d00001

diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/fonts/ibm-plex-sans-400.woff2 b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/fonts/ibm-plex-sans-400.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..93bcd6430c8ac016e88aa259017395fef162b673
GIT binary patch
literal 19156
zcmV)3K+C^(Pew8T0RR9107}#V5dZ)H0N5Y^07`QJ0RR9100000000000000000000
z0000QMjP{F9EJ=AU;u<{2tEmda}f{<f{p-z@O=w}5&!`<0we>7AOs)<gE|L@84QCm
z8(zjG>=t9U1FU=RejQJa>uyJy62z~Wjj)ooBv$tSXCxg%#^`MT>b+G)Pm%>8BBR(N
z%M#|g6H09}ZQRD$Y4@&28L-ZZ`SHhP;&sR0#g?^oW=_nU=|suXEA8-t!cF7%9PM9O
zl#Txbnal2>uT7XkHgIq2%;{<3fd@!Td1Z8iFP>%cwzVJwDILi7?|{ERHYkUpBO*a4
zdc0^6*tm?5tem_&!S4^gGjrb;7E&Y}67!a_kr~VzjRffaJipC9_q|7kjrs^3781@e
zKQnP*G*%-E6Lpd7$09;qm!DPZB2!(p9JN_hn?vIbfrN;Tt&Ob9J^nX9+iV+P3~PZP
z2!aR-Evbam6@9=_DrsV@Qy1;lF7tnGjjM1K-|2Tq5#4s~BlrxWfMW?Tpy2=ei=EvC
zi&iiVuVCU~p)`%3cads5{s{mG-t_+a0DXFO*8BPj2qY8|LI@#1gd{oQ44YGJUoPzn
z<!&w`MQ4|Hm3=ANbJb;2Uou7KExI*PmJajQnQ;bofxLvgcyS@5f(r^ba7n6%d(Z>X
z@Xo^o-?1VY2(AGBr`Fot&?F>0kxfG9n@lGpQg=IXdtcG%oLJ_rd`n?a`RCTRUsiv2
zJ5YfR)WHPifW8hse{2Mx4mb<`gjr*ml^7oC?|siqux_kju-z1^lz`W3q1ZkTLCBIX
zwBsxIe81`P+nwtP%fp$mT(1L=NQ_DBkHwGPsm;iCVV-pyC;~6Y+FVpuWgUa_D}NUO
z0|d{%d!7Axm$1SLa~xmcUtM53*|AgR@?#m>gF<+O*~jBR)@Y2x8oY*w>c;Z{zVQSW
zEXA8934%1R#W1x1Ytn)+3_k1k|1;IEv~Lv}AjYZ&;$SBGJ^gu(IK~ALKEyTFMLq;x
zKcH1zD3<ieF;EL*JU?aZ7^`9d{A8o~jhD2>m}oQOOs2D;4>F%k5^j`ixD#ZXZW3jC
zrL#(<_2~fZsz2uNDLv-slaN}Y@k-WMhDF1B5oH~r);^HE`-EsOY7c$;gcM!&kljUh
z;Rn%&AAb5_NEoE~o7mDa5}=TqC{(D%aa`l_?Vjh(_d_eEz4W#1jw5}C5P~tnct!}J
z2_cO8{M#a%BDURx@vq2Pp()m2(tZ%8&b(XzcF2JO>pD!`fc|`EIo{k|%fCrV&IXKf
zETSi}RQj_8SPwuk5I7JXJ!Gn>Fw?AsY|sj^YlEC|0rJUjcyL4o90JzLw+wO0X$cu%
zym^GR5<+jcnumb$o|1-Ya7O^91BRpR)?%n@5z23X1^w<@t<@0rSMFcA2xxZ!M(IDa
z|7$F3n}Lo1f(}(>29yqLy)!z~G9hhgOJkx5#T!SU7^4wFMM*}&86Oi7&>aH4`>4YU
zkKA$11#OOb;eZz*pw)I8eYZLUG-<LZL(MVAG!xi#8|j4xsM^^FB@{ZFJeEh5h@{gP
zm!{}<5f1^WctIkgL>BCt2t*0ZX^W*m89}H?LnqO@Ue%YMPIt6@<ty&ewd?K@1q&g#
zLaw*=k$kpm9Cl<bxFD|n2AmikVgOb`=rxT@Y&brbV>fzSbIhf(7}T0*tfsX#>g>@f
zgk7jpdTERQWA!+|F>Cr^rwGtsASYD+$@lBO{YI5~BSS`g#{Aq-eX~RIQSRhgE~G8T
zav-hQo{d@U%{OIH=44tX#Fmknl5uHGGW7{)6)k)h7a%qCv;z4eqhl)Znqw}amo7%2
ze7}bvk5YWiwY0Ui=BgB6+j}{GlL=s|RWijh50YYQauv%k=~n2OV@|3*kl(n$BP2B8
z$01Vj!ibC#7T_-_&SPnFDNXWo^6U&e-~%4WFJ@8}9`HaO#M!&fd(Rn%tF(HnxhNPT
z-p&#{5FjSRd^z)XS1beuupS2$j|iPJ6%I8$U(?JHY@X#pHCrpv27C0kO=-He0s>ZU
zaCeX&Fkm_O+tr_X3>UWKBf!eDmM+Rhmyl%mKY;Xd>WF)g9z>gdWiB;2`(XcxBVCuk
z*!Ezee79+#@M|WKF=vYLxt()1*Y}1`XDY*xtpFJHBwJMOZh<jerQ$~f_i0Vlq%chg
zROZyHE9-?SLYxk8>CfJffTP8cwH{(g3TBC&>0L#SnG+b)7b#vPjw&Q!g-HC81J7}$
zZK&Z1onl0qLcCO52|X}lV!FIZ0>0mtkPH0bo`V-4DTv?YqSj!jVj+g%qFQ(*5=h?C
zpwN3-k$q&EA_U<PDS$^qCF61dfDZtsP2+_SXwAs0(4+{7m{<TZ0077U9trHxv*7|l
zf#M=yx(EQ${LKV#q$dntR1_#xXa@62)h5L>E--Uhh)KcFQ47Qe6%3RCDzrE<Yeo)W
zyqN*HBcS?HFf<Y^v7Wk`u8v3(V9IeA0GkD9AY#dIFH8V|z&bpE&@r+KbW-97=mHS)
zfM)pQAj$8H^#KTAeJNJeS;Mq;24bY>sTFH!#mZI4$;2~D)SlNGBM$X{ArD<;E1`)<
zhXN>pjF2~M?y?I2&{>I;mL1=Y2Y6&#%v2uko?S}&$hF`8wQ|R<XO0&m|IO-839+;p
z0F$vH8E<Z9!W47HvmO?wq}^lo8VuGfUm5^u50`tIiG2Lca{!OMvaMiqjg<n$Dz<up
zywVo3(8{N>mjB=;0(2rfx+G~)(f1a4o(uaRGr!svDKWk)OUII3fF#<XWSgV*4+}vl
zvTlZA3)Co5hfHoD?Aqzc_56JKA&s7gL(QYebDiYFJLsX4lAL+Uk4}&p+x5ix|0sqX
z_WNA^H~#&_)?*DFf+sR$GB<WGz5$2&@$PgwDZN_uvmk2<Xnb%Sa)bVvp^B`3ESnv<
z(Mku()DB<<Xg7)~Ioo=hLiA*XK(71+naT8wVUicfWkb<oRGza)Sw8wEs(2@3wew&5
zZ!NNXlI=5n{Mih=Mhs4vY5bLaV9`i2+SExKU=8AsUMeXWzuc*EkR3n1k770Z2XX>2
zqRSJX&8({%2aiuKc##57=#9WL(qR&HN95a)aK%2i&l$|ig8UGzVKaH=%Dvq|ND<m4
z!^h}&LmmJSaTD)$NS4x?NOb{oSyaTQR<W1W9TD$8=K=PPnQ~IC=q3{lb<Gx|1pGN~
zw3WkM^de%#oSZ2LOG(I>%txnL8!2ZI7B|xdI}6FE*o~e#uvA&>0O&&A(K{Q{q(inZ
zUqg;9zm6z*9r7!fCq<G39Ma2Dp2A^DjMpPWDqE?<N3&pO^igNnP5aj=F*5X-QepOv
zh$>W+b!501i##Ts>;eG(DmWB=ZAgNx^9_pY;VvZ-ew+Dl0`ouTqR#W54_j0tTsxo$
z_P6KOY41+ZX2WkcOmmjtbTI9`4HBy`7a@swQt&)rzoTyMKVt-5^FvL-c$nw*c}E}T
zq$W(sK~^q*{M})m=eev(Du6<9QUT`i#ZLw@dVX6r;`z<&3AU77W-|hx#=M8xhz9|T
zJ$=D*5dO@V*>h=n&*y=T_K%S3ea787+*!^KRJID0Qf6cv)<*1-DP>2a7HK&9(Jcb@
zAjJ^Tn!)GPjfO-WMy-PV^Y0-oTiRPcrR0qXxh+HwhQ2;7c=vK7+5yQh&f2S4?3RpA
zg~PErIo<_5pR<YO+j=(E*C%KPayBqgdw<!c$*dJ>j{jn@gaWM_%HJTjFkT3QeaXuV
z2>Mf}-XU6{SK?{+X1l4D5y=%pc-T1hhmvc38ED#eZow0i&!&xMBe~HTaa2grNF>v+
zmL|f`u%;aG{s%0f7lu;-r}xus%-?HDX)(!!lo6(t2Sv}YqjpD0s<r4W{Ih$fa1CbT
zvO=0LCDg30P*p4iW4MXOvFkcfZw#ZTI9q~LBn&C}yh<~QI>@g1E1zbwULy-|dGOF-
zIC~$MJ3~SFv=cu7Kh;1@W%iH)U?%)Hf@khg-hMzitNG^9(MYwXJnxYL{BZ^L*rKI7
zAIL4I3;-XE7vu)#hpB3~)l!SdtpB}!l=S~|353DNq5`D2p*(mjzJM)M;fh2G>RNnV
zU7^^FvN?0=`W7@iwU)n+wd(7lBTQ~;Q|N&U%!VU8(#M>Zww6Fg$DDb6a~7Op!FQU#
zDJD#7JRBvSlmM^-0Du)hSr_*7{CM}IL?e=`5;4<-*Z}iT?x=}PW_V-93+SZuGz2va
zi&(~zoLy#N-dg9(Ligo<Yhd*ilfnRXJVizNpn`z`V2$QSrp;&oraUvS(h)d0(f8Q^
zO&ZsX$P|+<p^#AJ*s?f8rb&D;B5)fB6^0JShy*4U3N|JVDlQrxI(`%h=+Z<o#0Vz>
zXA&1OS6OZp9#lR}kuG2enaV5`wuqxHr@_^f*W&3ah!rG!Q;MbqW|Yhc^_4BCc#3Kc
z++3J>k!8L`aEl|&63bCFp=pjxE!JRJ3%C9mvcYCNTWlq;Yd4WEH=KP%?3;A*tpmyN
zkB)Hlv(qGgL3H+;^GJVP%P_Tr0P-tx(TrWA5rBfEfe^mm_ssCD%(l8~v$c)P+P1lg
z!N)o$C}g6h=JNobmyhR-3@hLpSY=CD*(N4>TWj<dJNXZ741^UPp?s7{Ldxhdo0F%B
znJCfq77~OWqhNIm84CD$4W0nLo~;~9h&nose_S`31|Gq}ZXPvFalgGP?c-d7r<Pgp
ztz9x0$j$a_j6)l-JPIzimtl~TTmt|`{%p7a0QjqLQnzS~UZ{(Pa=L3PuI#(Kb80L*
zHgM$nA+$Ij!{A<LN}wcu6IK}?m*x-~M--L|NnEc=oyb2dj?1FFxgEqi$vShZXJiWx
z{D5F6th>=L@(9EcYw<fLgNJb`^{);3<QkIUC8PqkYxs1P_OOaZMUKJGU^x_~+w{z|
zUOLFT{(asURDk=!TI<=5LNYU`rRrsHYG=^vj@vlw1@52SCzv{3cwKnurV9d%via^?
z$_?M>uN5s>(Bw9KeIycS0DKne=Bor};i-vHiHt{Pg{3lS#asC+|Jd5Y%0~L6b~Xv4
zjL#b*Tb0`cvk69d3^tw*Nt+mTCl=*Kqvd>M;_mM!r9QHz4C)#kP!7C=$j54BOc{mC
z{!a#$nhmf!y$wOZAz$gSfNeSe4}BRxPOey0EDp=%dn&zir)F|_8~IB8+L;ynxB?K`
zfDr4x{W{eP1E*L+zYs>#adPo&@bwjtnL%+9)`nu)tO=vID-y|AznFT8<Y6kVL6`4O
zujB`Z!)GUO;IT0KvNE(&Js!`N=7yYX(ZVt1KFmMn@BP#z^$qMKKA4*TjOf2zb_peS
z5+ntc5TRli4Unfmp(193)Tp&iyGt&+;;L(|yWyr=ZoA{Id+vMSp+_Ej;%Re1u>L>?
z7)%BRMFAlTP-U|j0F%wZ$^ke4&m{oz0DMdjq>_|>mKKRh#GJAWKS|2N1P~%E!^>nU
zZFqvnDrf;x1tg510h2)<7nqr$V^T15w1vb16%1qmxd0>c$ayJ%nSp#qpfrDmhfzOq
zR~0aiNEOk;n8ljMIfZwc0MY<*d6){gDCDe&n3<<RoYZhti?j|;JKQBbTqbgb%vIj5
z;ku6P28o;8-NJC2z#YEs61qp~J}(b&JjC*dhsWGJLHG1MAJT*X2D$fxnIC1&%QR;E
z&VS@9G8Saa%9uj<U-o`vgM>ICKqw%LpcDL`bP)dx{{Vj(*5~mj@Q3g_@JpoT*R$}A
zcrWgwj2~C_kJgk1x0x{bdrTNUdIW}JXqM}I?4>U0@YWV->F{;uSx#krMy5WhP(b2j
z<En2c%UxYVS5Iu(jM+)kxS+^w4=*1~nceMwv(Zw^tYdf3A%`7t%yB22bjoS%&N%Cw
z^QR~k^)A;Pgd@$f$%W;xn;>V0=9m{J(wl0r#6o6V3&qez(ov!aHBftZvYBE;Xe(Ya
z%f!(IU`bP;3kg6bH?5!@t7ZiyaTC(ac3p{^8Xw9dJSi`*Pc4y%S$hL2)hyRG{K|&H
z&93kvbUo26-RT_a+K2Z}tT~_>TSyJ+XrhbWy;~GpRQEOS0JWxpmTBWfXe(Ya{lp}I
zf-`D^?jNewtHSw`VPNPJh7B39C$2?``lbZb7B~E6S2z$pSEp80Jq9E@aZ}AoEGb4&
zw0DZxmEOKT{p|z4=GUkEE3S3fUbBW8sC8{O^jO<^qIy;?=H*)sR?U^`i*M-r^r~U1
zZi2p5U1MrcHwaDBB4Yw#hlC#bdT_u{j|}4voQS4mMp$53mYfjqyX7uPg_slZV9rm#
zW0bvpk@anC`@{b|?anLrau1}yy2*I51^G{tjHghnM7%O8za>L?-^#d~9E^@wuv7UD
zThy7*3<op~0ffq6_v}yhzWGpnCEw9Csqw#pL(JMJI&exO=y_}wnj+*6y^|}iUXB5|
z%3s91XWaH!x}RN_#Z?WH7jgH08&tlaM(U(Nnxsv-q=))yL@A4r?tZysGMdh2aWXF!
zW=U74d>=XT-KUPJsWo%aEF~6|Hp-8vqfs=w@1Qo;u_hq6kA$ZHvMdIh*(GTv_Y)-x
zOSQEP2_|UbvVSBpzPqT-G*u3+T9O{s>#^-lE|^*rG5|4J@tFtqY!{#!7m|NX6&9ME
zQNuh~4PZ=g*SIsO0Fvs8B4#ADWO|wbty%Ako)!|_h}scHD}W$GL}LAd45C*MfB+B>
zx&sB5<Kc=@)B|cSP{6Dq1%KWtGi7u?m1IAfg-3M!jxkhBT*B`dp<v(;e0;!yj*U-z
zb6Hg_%uC;lTdHfSV8+e=5BSdjCVVsQ8DuE|+c)FB#wsg}d>J4x5d4`E@c&ASf{LED
z*fKD+(O^P3Ap`^+MoEBWv8EXCA;A%WD2R&jFO`W2Y`}$FavScu?>K(?jf)B_#;TBn
z3x{|?gg}5*5W;sq{qh@z!kZp=S}S*Ub`qzY;;BtLFE|iFNOb8l5$;*9f6Rd_7T$uv
z{tz-t2bi!$_A$YUaeuX6FyH)y`P!QKoZI`w3e&ZOsW6<YE(3a|*oxhspK2it(pxmJ
z5-49xILez<pv45a<0+j((ko<=4OD7bT%?P~NU)+DvGj~9qELQkn20839SZ0p%?8fa
z1phxqu472gpzA0&1;YUwHgG#|5CG0RDUsYF!JgaTY==VNfskkedKAzF+Xw6p0}2da
zYd8dKjc7J-hDa22V1r=2MapF{(pV03C%u<@s&{&CAe_J%xO|IAchZZLk-nsk3?q%?
zgZ%6vlg{2_?w&%Klfwb90ZA=Plsp5C(h`ldUIOV0_`vD?MWib!nVpvG{oz6L3$O;v
z2VkxSm;=H8hjysS0sQwP`0t%b2;j3DC!C`vjO7;}z56ifC~)NeKlQ&42;dap2H-B>
zVG}@30zi)WxW&j(!UN~GbI6xsn8^l-k*r9up+-s+D~?%$BsSxWSIDSDg;K)}(1}1n
zMMKBHRA#VpBa#VuCYa<uQw&k*t!j00{Hw1TZ`2#@imN(YRON3UU1pW*xo2J|u+ui%
z?Y6@%d$c-WuYLAAqFxl+9d%O0u$&fpjC5ZAr*%QQb!M7oy4hx!WsbQPnQwuGmRn+}
zW#(zNN{bcNSZS=)HrrsMO}1EXt2S$W^VJvMrAlLxE<+|4F^WYB)sI1?cq$6hXvHx~
zkqNAy`q&wOnmW`H!0tZmKEr+v9DKGt#sydGfM#52=lD;?T?PYw{dGY?2X8WVka4@>
zLxdgtLkFHgcH`F<Ce(-HK;95L%v`}-VQpN&gqW>~#y&j9XCFpsS`n5o`-aVX>acj(
zS$)PZ?Pr;$a9AU{IIMv%;Gq&Inc0@x(8f0M|3nvuwHG^L#c|P)C)Bq9p!FGnFpb4x
zf_>M~kP1L>hQk&1u9B?z=B6msrF&<0YODi*;OhiqlQZna6+{M`)wiI_qpe_vpH7Mh
zc1P?<2AIf1fz7{sE<4)=@q!JahY3$0jvSAx+!!Rr!FPot))+xcf>xlHmX3*!G93aS
zs{!cdAbSQ|odK}@=K$k=&|ARCyMh5w81$8n!+-Ic0UI@vFsg7!XRrWCypIdw00v^v
zbg+(G{K1ndBPdvuz9DOZouI-wd1}5;-iU|7joEO%RuDN#D8T6|nt-pz7*65yYp@dp
zQURmb2#ha<)L^)4L*W!Sdf(v7P`dPWT-I?k`77t|ysJG`-m7z6K7^(qT*_9{eU4hv
zTI+@LR$r_wJ<okv8=Y#eFS6E8+pBGD=O;stqgSK%qrcAFH%~8Je55f$2<}_DS2T^3
z<CvIfwbkr+D!GYuU)EmAd~(*8mWF}KWU1-$o(4VXJs*50*XOMeZ6UjtdHs0sR3)vv
zxqef}j6UQsS=&da2kY%{Hgwf`m9%fY+tO=q2#IB(D1D@r><qt4DZy?dkF^nw|L>S}
zx~9^gr*J@s*fA2<&4u0YnIc9&sz4i}yeBgHWl3xlB@fr);bJ5M5rhLFv1QD!qEPkO
zZH^d!=S7jIjhWa^_f?Nk2gkzdzC;WnhAS?ESX-9=UI0tTiYZ1}C)|B01e834xj4B@
zRFWUOIXUsD)*3PtGK!H?M(N!oq&c2^TWU^5IEkIsG8qvBT`!y)5oyFT)u-P#wtL*7
zbfhv=9*EB9Q85l<!B||vDT&RPUFBmCaz=*Hnyi`vC=#I=U6*9)4sPxCd3Q%C!(R^;
zK@+1CvJxR%0-}s~ly&>8g(^s>NRS5HA`3!Jv-gSjZVA)=4o#4){z10|C|r%SxpO7c
zt+*>rI!e^_v-ZRV=vtZ_b;wnLI+Tzo<fwFglV+~E01*@RVBy4@%|nG<t<Rk~V)<G0
z5y&=)6DDv*bzZ&}Mww-xyO#mQx|_Rwy^WTx;gwdxym!f!SwStd7FSYDbcw%~i7}#7
z$>a<Wnry60P_vsleI0YbzKSk9F5oSB_Gx3LPfcD)gs-<tfXFXHGU@*9{&d2A(E8M4
z-(=C{smg)1II&=<N0+N&Bn>XaSBS^ymX_!VjU&=*3Qe?vW|8wLPapj6S$N;eVPw^S
zVxy~5e~pANJo!2ANzRCmfIlNA>=R{B(v)fuK&IIa%=So(o-K;#kWgG3HwjuI+sN;#
zg3w4-awx#DwB<_FY2jtC@a0#Rh_pxnL$^T&6F8q`z<8Pelqi8Msg3%5ir5Dw6^Z7~
zPioD^iRR2IuHG}}c`+}$P1Gm0H8!*)jpT$srKm!m8zgWx3)50lpF#o7@qw9?OK3y|
zpPq^(5Emlh3y^s#@;=RT(mztR=59s>Wt*5hYe37VAKP?~6Q6wOg05<<1-mBM)=wPD
z%C0v1(o&0!Sr>cUFj@IqMqknJmHWbXe~=G-j($zo=2l$!<HNO8d-yvyKzmn}ea`b1
zcp#w-IU`9vz@-UnKzcN_&M??GzeO{qp#zun-W6hbLN&|=Mfl}On#?w0lY4??c-!=o
zT`X@hXdNN`Ec%SeGQpR`ewCXL$Hdy)7qp5lFaCS4Q;XF{^@ASzY!&+^AUrnpezHD<
zdx4PsV7QjrdDkx<amsyk3662iPBF?Hx6Yqub9CS8uqCn)Qe8sx)UET`JH)69NO&b0
zAF-_*q{W5HQ6SCm84f<F;ZviAub#8rw#=WEV7jnruamJ$i7o@rrNXlk&jJ;7KS48T
zE(&8Ka>I6v($<XQG+hODC{S%dR~j-XDA6RHqH3A+n5#Y-_gAT(-W|Pf$#^KY<0d78
z-u)4`;!%tzFwtR`J`0{WGG>T_E>_o_bchA!o(cbjrsy6d9Y9ehjE=%O4Z0*#P@WhG
zH)PoQji(!sq{0(Et(HWN9Z8<7?|zfmK#X-!|HdE1zwoCd*b3E#Q;yxj_Us9EosiY<
zhz_`0YSa^#q%FG`O`Uh9UUhQD3-4`%IOT4#@${H7`)t!@!R^aiEO(&s`O^E&yUNoM
z*=)&e$8E*A)D2u&Cg~s@HK-XfO#4u>*@`MhEZ*w~qk#+21;cJD&I6|WI4qo5ZXc=Q
zQy#uOTA`hh*mu>b!KbMHT8vDq@q9`S!UoA~a$P)O3w_<1wrJ|G?(T&1!ykCIRXy|h
ztdwL@i>#v;KDUqIkhG+&lvEJ1?2l<Q4O_g+c|A84;{sU`KM34PYpga<w;GjRZemel
zh4Ik_stt)toJEtigc2-uD8y+q^<*Q|2G3-HT~kifqrx0EgR0`@;FVvbai=2V)<-LA
zty!n-8l_j4D(bh|kU$2acUi>NQi?bF<qce<^_vb6J*O7*Y)>$ak!RnF)1I1XuabUf
zX6bswrJbR!5bf#d=KYeFs4)bpwE(?<BbK+Bs(mNynlEAgA{W%p0UZ$}wccA>j|rRI
zAH8n@?qT+)N+EG@D5%%C!Y&|WPpdPSd@7<1&7Cj61vR5y%#C@{dZTY5Rcx}Gc0M=q
z3U9XA0z3z?2!5=ZH#Kg!XlQSp>1QP)+C(VcxaIvc#fLi*H<ufXWI5`iZRToST$2ax
zzLJ3k%T?ej@GL$$;D=A-hHQ1L_#fJ6e<q_-IqR05FZ|EWOdL2IW4@%Eu`4(t?Rbx>
zFEmq)v}e&&+}Z<dO~;_!4EqZW-fyQ)un%QJ><o1QD5<9;on_y;1`h_MP4_UP_6uSE
zzUDX8i_P7jt4L;eRhA*&D;M68s~YE^Okv`{zb_|ls9;!x`4Jh@pGbEX`x6F0D3z`K
zuH3668BqA+B5DI<lHKT9q09G9)FUdD*|}mFY|&ymP%G`jdYAO=3iW_;fz1ZHZ25Ss
z6LNKS*Nq>L^C<FhLD>hC^hW8sC<o>KiXEj71h)gRSLd*^i{JZ8EE5O^*~-%V)i{t5
zHPgZaZJF4f3(u5O>{Tz_$4XS}^7$q!L}fP?Es%-q<Wb@EryC<`JHPSJS&ue~XvU3W
zt6ho;LsdxBxzDXu-A0Ei1VZYog%%~N=UM$ASlxZ8y5h;Ul43cJnD3k%w~~X8Dw^~c
zJmOM>@YgxMqIZj!os_`i_x;74JW{(=K3F0Mtzup|jn9Y}Q-2)UQJ^Z$I`*XX<`~08
zjf&l(RrM?5Tjl53X6{$olZ>sLt>#)gPtU0`8F;E<o}HtT)Tuma2!Fns`5YqbiW55G
zziP&V7x|P|<h3ATPnKF8S-m*XlZ~2clhiqTkzG7@56jwTE>PU*+hgV373&xwMT}m8
z7fgqN;;K(%KP#~)PT3<sO=q!|&y6Mx9(*wr;!H=C4N4~b)g0r+D(!&!l-HH}TO?Ka
zTO9P?<K*uR|Ek>&`S1F?`g-RdRzK5v-|S57_I?(Pw-EB35|y{shgjR36PxAgbdBU|
z^S{<Q4HRvu^A>BN(P{?0x^k?)4g8Wz;-=1FpP~x9)FD<$og5Wd+)z`aU=SV~X-X8s
zW9VyIz=?q&(1`)GylQ}Sy$I6eE*wi#`8gVpQ3(tTya!Y{>&;DO)|>yR%K}xD(hz_I
z-~>Osd1=yQ+2zBFW38<3rph6f;uYv;XqT3jtAUEHlYr_x8Yi8(g+wLB(Lu~)jh@-S
z!0#KS!o#UHGwRgb$rKinT3S|#h&0Q(Qby!0Rv;BB&7>1Sn|IQLD;R{es??@x7c{<i
zJT(3)IzF=sonxCjGiB2AuhtS@mz7ge_}66~RXNQhhKhvh{n?E3Oed6NU0|5`F%*2?
zi@G-VQpnfX<Kh9t29|uLJMo*eRHC<8ti02hyiZ=N_*9j>tZ$Y;u-Ay<Dw#}={NHCF
zNA)?s2-GeQQUJ&`Xnk|kj_OxVr94yvMa^i_oH^9ivAJVgso!6vX$Fc%9T*P9R7#UZ
z0b%9;r@cS{>{Il0yertVBXRZNb9LfahQoCcZ8*k%wX6r-<$#oaJc{8LC$q0I<bEkU
z;%!Hb*&Qlw2~Y`YDaXkQ;ePv6Q!bGKvi;^j<<e;)6BT}r4q_#1^sEL09zvnOIC{vT
zuStP`mXJdxkK1eWo@}OzXsL8?!;dN+EiTwTWyH`&qs4t#{CG4*cnz*Ll%Nt5BIQJ}
zABad?C0hNuwW3nKvVzf8-mN%$b8#8>BEd4c+<*ywcW0WoG8v!4W&JVLp93RWdz0Tc
zz<-sS@<UQ;88wcqod`{wk%E%zefWt<>JW)W@SvvYmjl!$6ptnb&f?JUkoqLy8e`p%
z^BfLf;9RN?R3DG1`PldYZ2rLDuTI6s>JRM8a1HPu!W|<7JK#SO(@0lw=Z9(+UBfNC
z7C!e^ni1{3k6U-YX+6&U#q1@Fo|a-B<l%N+C!@2YWFLX%3$ZL^vx=d)I{rdA1dj$E
zQ_;o$OM1w=P1#PE>iem+K3x(_CcNeT(Gx~wFhAb>NFbnEe={-4^*-xU)f>uE<r}J}
z$PL*<NvUL_?8Z7Tv3tYWzP=5YyF=65OvF+F`i&+L#L6oQs9HN3X4YB40Al7bt+O#p
zeR|N864(Oei-JJ~gYX_T4SsDEz{TofR53|WjH=;c!Dg;K(tper7&P0=KL>1Gk^Vh4
z$DqU}(FK@Ixa*BZ)YvAr*YcNyg1jZp+D?fjI@iYn0N(Vd!7R2j+vz^VL<JpdcQa*W
z#?gd}<zTPv+ZNZPQQCwK>&Fxc#bIyTbx=~AgeZ@J{a~6PEQU>1s?d`R<ihq*J7%a<
zT9f6(k2b@YK(h1e>U%R8*D&M7Ultsnw5HV)>BlDUY|1%yf@aDg$p91+!Qt(nFfg5P
zZ+b_+cOv1auNMa<DT)7I;G#nWI>e4z-jYy=*X^haF2K?mo9cMo!jc?Nk=Z7)msFgZ
z;_$WaLWr)Hv_$#~qm6Bmi0+)xoBSy^Werk=v_W=r%|H7s{9SDLTtaTCEnDCPKJfQ;
zpPiKNZ{N1V6*+~qTd!|!iaVhskiT0V+br0B1BU-^^Y1#6=$~%f`qCJd>Fq99Cp!n^
zuZocxLmn{;eu`1#?g`Z`-wk*~dW)l~T4t1)@>Vq$)<s-Wrt|d>-3O1KfKB+oR$$W~
zPxm!in<Eixb7LR2!$BRdwZ_>H6lGUiDdQbGpntzi*G`H#2m}{lax6HQ2Cg1Whi&d^
z{0JjH=#FD<BMzs<x!i%%=}2vzVF=4mecd!?)A_Oy=gZ=sCf^S<y-FH!niT)g*Yw}m
z9}dRTZd}?O|9PKFE%RT;diFfq+l~$FeXxKychZ&P$0uEx>qnS_@OtzGKKUg1_C)#~
z-qpL?60+TrWuDxRzj$KtgtN9V=|SMr=Q*ZEd5*>ao0vaI+FEVJyZBBUO)huS{l!)h
zuMnKKGWXJv@j-kK3>oE_YCu(`vWSBp-bPAHWB5X6;VPzyUka*;=ke!kD^`_@Shm-K
zbfpL!<5~Xu54S%K{>!x4%{5sy(6f21m!>cG*w|mp{iX?O@^{;l5yuEEKaH1-$<AE#
zwOVASPh+^{@)GP(fTb3i$5f_%|KawH^7ojC)eepXt#(A33_{tI`O^|YqAF0P14<fd
zT%u*jgkYezV@A+v!bI`+Oe<VfMv<K!WVkEkOze@Lr9eQ39nOMb1JBQL=gE;1`HSoi
z9@q%uJp!UG%(%m_3J|C7qpYM6)1i~2snp~ssxxBAtdE>NM8L4#2{W{a)os*~bg)_V
zB@oPPQLFM*u$lE!`gm-*M6F#iAI4Ia{;0n?QnJ4)6TkADC?J~0@D*-4MguF#XRl$u
zs^q&Q?4945i+G&Z&o5=Mmt5IAe8-W`^Zmuk0Jxp(7`Aj>>)(q4nksS_j^}e8u`p5&
zZ)G(iw{q9@-`Bu>BkB2So8jJ}8D9lfRX4P$Hb)}rZB66W>cdbszqzhveT!mr9S<;7
zNTfrtc=b*(d+;|8Z&ek|``aK}T>l{+0Hx)}iY1a5CN_)PJ@)ZDBQmwp9}-UkwXkTa
z*FRYdfBDlfB}+VuJ4U6VD^LafH2@zV1W4>`2i`#*soR^QAAtUX$V-XLr_@~PQ>ML(
zl`fsayiU#INs<RFA0m?!g0Xqj>s;(11)(q&e;t1`tG<hw4S#XBjQ*+n+Cj(FHFeph
z#xqLZ{Y|Du<fG!}9+H(6eBy_Epd@bD%!>~!p%;!k=63AvYWVI(q`fI9WkQuEI-$dP
zz=NxY4SDi^RT{u_+Dco?cfdu3DE-MBPd~jyBLO)w=UpR4k5`S*x}}p$5!A8C922(}
zjaLMeH+@OFIkwp0GDW15i<gl8QCnMZh+Hnm;+#dYz^Du;Xt8ON1Kr{zS~sbF`Jw}c
z7(Qm;efWnN3+L|gih1lG1s!}BzeDgNdtL=bk^Yt_kSzsU6o};S;#`^5{^6IkxxhCY
zQAa7CX*ng&c=&nRvg^aS@M+p9FRONV8WRbU9KO;n4@}Wb33$g)H8Z)9Q?r&Y0v3^G
zZAt=3O9>t~`a3wzgDQk16a|VzZ%#hXt@?n+ZO{7zCBsg+w92Z;B&-#crK?k^;7DH@
zkUIiosJKSKoBXc6XA^&$^ct7VpAzW4uAKFofCrX<beLB`M?hbK2LKkLl{j7_>K2cL
zW>$vl<=sBt1`I+dh>QqoHHiuc<|Z{d%?&1)ok*jNhX8VO$`xo0hc&uOZj@xKJ*uY*
z?+Q&C0}~ze5P-^)-|=`bBgn7`g(?Ky$*YLylDLvjHNABCiWWv8qh-bNQt#cEUGcn@
zF}j!%$&g|qftx+#LMkMYrN&z`_YKyHJ{N@tSCb7u7tYe9Ba7z^^ERGdZ!dnhciya)
zNGUy=hCk#JE2j!oj!FbBcG*kcJJj>FNuV~sCjD{Fi3sm7d8AY~ree?U`Md*ngH}(}
z?`O&CuZYNn2L&~PgF>re@axX9`;T{VIJ+L-FAMSvBA4iW2%UPS+F;XTtXVvxcJgX2
z$-G=fSPyN0;2Gv{A7O@P7Gu++UiKs7RklF4f_8Ym2&FTjl({bewUSyuu^pl;7kYcy
zz*pt{F#g)*>63|p9V*@T4QDa)im#+d94A(FiuC2J1pV_{z^&(wmnh}tJm3XDCTtmq
z5(gZ*GjGei%qAFW`WkjpyW~K*;#cpmkB==Jdz}4r<kH30Zi9Jp+4+3n7J(Q37Ty0R
z7P^<!<zS^@_yP&rpSX1257W99(w(%WU05t^w|vJ)dg{Ef8hAk<S5Cv~o0|SlrT%ca
z{%C~%!%^2`5t+}dfsEz>dYk6*(?5T3VyZSLzIwvM#Hw&k3TpYxZFK)kg{&i2IkVWV
z&0fFZvzFs<wcN{J!k2qAJsx7$hV;pk8`52&DJT;*mV-f~(Vd78ox?4JIKeVJ#~F{f
z&0#QP<o}f3U?=x_8++&uelCSt3&DHGnE7Ic^RS<xayDy8-)%ueYLgANaz`0=zXjc8
zkF64hUlKa(kz9}0j&C&@5B%+rafde-MnkTOCwiEA##`gD5Rz4uj~9W$-v<}AWM2?>
zU|ee~%R7Ip{2*BH`vs#>K3l%;+WP^ceCU~7*W>Hyv-HLLEX(@M(N{Huqnb#+d08aH
zEcLg5g-5SGmk@}&sMw494jBHG^1rN<o?C4i8|u)i&ej?=`W4>#Ljym!w7c10;h76Z
zyd}+G4*VQL7P#uYu)Px<*DO`1wX!#T|5Vj$Vc`)oxh6yU=FgFZ<&`du+Duo^Z~C8O
z^PTnPMsw*sfu|@LG#c?erJS+!1d~+q>C8gj;47gO&kDz^DahNn=}e9(p53~3@;?i@
zZF>it>hHBqQH(ax46#zXh(5MViE%WRl4y0cf<d_V%1V>`yUHU#>%T7bS77B|CIN2t
zSL8fQ*Kxt*^dV;CWHUY2am0^D@seSVEs>TNRdUQe8Put)*3E~C?&=*k%-BR~tx9H{
zU*S8cw?9liY=kmB{yEL)-z)w2^WwNReA2tg8in?V(D%apT(>E?H->zOkZ3TPq~mRx
z6PoE6SWFMfJ!Kj*qyFy38&U>~Y%{tVjrSTi+GBpd&M){fW^hUb6^!)OFTMa0i83%|
z^9(1TW(N!#9cVs!6@xH>qS)W=W-8<;v%T1_&`S(JnSi@6^oF&-VClV|uukRdU1HCp
zkDDF^8q=THf`b;D<>#R7SkCyq(A99-J4+F~<P2bf&(*RQF+Hp6%wdJ{+HQ-XZljwg
zKi;hmmm8O7o=*^)A%)i8Wr^!K3;ZgPI*OI9Its+x0@I-Aq{bl;h1x;Zvipa#PzD{D
zBzCKA!V-hvK<H`e*<(%JNJ&lcTSq8I-YVAmOJ>ugD!A#)_Lsbf^keI8MjPAf>oqHS
zv-fkUEl$?>actlbst2`THRWLyKy5_-T7vEj=zdsYJ%h`@w$Hh2wu8yKdY0_|iZ+>m
zS81x`39O%biwco-=46CJil*j>At^Jdkb>%ktpj<q3~C;e&6@7>xU)WB)R=Tqp~AR3
zZhP$OWpN#3d=Z~PpZ?n3tXr~bq*7G&_U|}}R#EBDnALCcK7M^Rn>(JKp>~So%bp>~
z6~+Ev{eM+Ss}QXkzwp|USn1L;BfIdgYf2TMPE}<C0p&o^jnC`YTpyFb^l_;lA5-N%
z{w#6UY_U2l6-8jLcn!u4&)(B1y?v4^x9F5r4q%AAkWC=0-|N;oWJAq%KsBvEu~w(Q
zWQMFdaoM8^{M$CBz#=you%v)#dmCSMxlEi@g71QgYz6qRB5<7BNz0*ia?P41>m?OM
z;0o~?tdJLV&Zsc!m$CyUv(>R`QftXjY@V74mkELmp|*(Hn!<eQxO*$ibL-fSudxIf
z#u33%kG(9asbfLVN{~$D9LE@FTz&D4ZT<a69q3^a;@<(^5#r1qf8fU_Pb3d+ChW+R
z2CC<eIU{pN?ff?L<umrxW@qibP5~&|Cn;(xiAZXterxv-kwh{?jU7cwmHl5HU|LG8
zjQl%p&DALv;i~z=0t02w_eDtmeh(#BVFK-2Y9aMonzxg9h2EmAg+zAEG>u|nGp=yd
z$il6(IA2M;7%5XfS&l9+Ixfpc7pprR_x;<+9daq$&@uOo>XvDBN2$w5MA9;<@fnH4
zbOv@5WW9wet@Z>Vvt%}eLDrH}nh|KUZdpUttx5_&so3J2Gb`DbhhlB3a(*ePGf6q5
znbdFX9>Qyp{Vc$2D)G#E`wUc)hxT-xJ$FyQ?@UFU<uO6zsyTj3-PL@wn~B_hw8mi~
z!8!;rFnkzn<H00i84wHXD-PICT(SYI64x;SWbIN{%q$%_(Uc6DoJ+O?kUEg+3~2*t
z+A&!ZSp!)vlWnrEp)0{+(@<;3HK`%)SL%2j=DJJ2)t&ksub~GW-|8;?mQJ(ynN>Qb
zmr3tRe``DI!p+HVEux0+M0e@8x|7$q1sy-=F8!8HJcEu`d5d?i!#M~FbcX?jb@-Dx
z`2PX&LkB?+6zFyV=`q5wJO~POyFfjV+My8C>j({k9_tR$z@Mn2*WnWcJ=P6CuTe)g
zh?j4J0ZXPmaj#rx3_Qped)3C`gYm%Y|Dk<j-`Wn-S?>H;cYJRE+XArZm6weh{&U=5
zBX0nwhJfNyCw}TJjZBk^<)@jW_}r97N$O|%WiZ>U`M`Y6+;)-AY1<SND5T_ZUJ0?}
z{V%36$aU?f&&ae}rZ$;pKL(5L{(0bXQ1|ftN33oM#@CD?Gw!l^Pb%;OE_2)m*{!s0
zz6V*KaDb;G({{ehW2K0Nc~+4hbnKRt(|H=R8P+iFa?nM=)O*4ZH@bk{HO>(qu9`>u
zOf4cv?r6UPy{g0#uXAH%#{hB(prkyLFpw))IL!y%HWmq+pF1VyalEc-tWkf<)=9(?
zA9nL(r{59>%rjng3G`*(;12EGIo+cb?iZg_*3|y+yi03xzj@iO>$TqaU~7AgEb86O
zqEf_z%S|){W4-}rUcUkH$pC0i_ivyU6f_0UTSQ;EDs_5dxYk~Ds^c<MNQkbW3249v
zi5N@VT8U1HtGg7D;E(G{zs(3oAq&WuoFNv2WQICEO>!|RDgSby{#)QyImez#oYoqe
zs9TwUF2EPO%ekULH4cfak!gOCi<I!GI!k4pL_C|gCxDXB0wDCAHCHgu$hjfQQ}tU!
z#NH^}hMgdSjH@|AY~jI~Ra9r@Xw}Q6mig3-RsGh8W?Fe-oW~+>(-S9XUeT_Zm1yy^
zv8k&L$w3`0fqStqOH6ND?za;#5cfNy0~qUhC9NB7ewf<O`|{oAnu=DoK7NsL?0e&T
zgxE8nmA}$Q7t!eP{iuf?k@<ppPENHMi|tb%OSGc2pE0+maK1!hyf0n%vMcf327idO
zJXMyfC?8foS!jHcpW^FI&&kGCM)6%|N`!<3>+z4ovpEmeNE4>V#Qx1$nO@n^8LeFS
z+I~=oypivU5X@_-;>ba@umAymuL?9GG6rWUcC(NI{LxgFA_Bpx*_a88-j*hmP#3;~
zag+3oIOL+7AI*u<>;?V&D4$2W<!$q|t+tLpw?o_l19c9Y91=?`gPpmpVq%jx-dt5$
zDMKl{HOFPSAT&X=a%#@K31OYJG|v^@tdNAJQ&y>6>a!ecZ6#~9`n^r@xq5!#31I2S
z#!1=uMcu(C&E2^1g_GHg$%jK_5L2Y1$*XBdS{>bhK?_ks3bdF=+o%9;tgRejx-@69
zZe<2_LZk_!3GNu2FxeHbnQJ-P+}xI3ln2WX(eyTg3qICxKrT(>FPXH=HZ2^44e<tD
zVY`+qLY<)450FyOctZn!+*q1V;M#aap%3a#Km%qJ!`w9sU~Fdomx6S7pF&QgsWuAN
zi6N2*5R?jtS7DqBTAy;_{iwk7Ad<xJDQ1#ntRWwZl@);J&)rwcO@4!ohGj&ySb^x5
z-IbR1!|hdUg3hj4O8_81I~L`)9?5GaGcu58lcw|+lV70rO}~6NJ0^Q3%)*!u98gQL
zR^|fjs(i)03}QV`y_6$cSes6%;VHn>bnhW-%RXBNi^P_F_yGv0&m0>8YEdYn;c=G8
zgn%4Q;t1K?7cb*UWN~c$FV?gSuiAsE$&6LhTnb;?i<CHvGYcxS4G7sm3NNd4&%&<k
z2M#P1Uw}le^i-?b^Ws9bh8FFx=mZhfA`<!+CUZ>2Jvkwf3Zs=vSXf;ZB0EOuZCO$7
zvsL9*gGY(t&IM0nv)H0&#qV^Mf+3-Lm2f9_G}%uB!4m|BM(_q4385BPu%_piFeUk9
zol$|@Cha9_9y<a<Yk;p?<!SfOJBLNpFc8j*S~)rExDaI9h!@LxayG_Yi!JTqswm4<
z#f;R4a}uH<F*Tt#rp>KCVAR-Alv<Du6AG`a*+`lsrjS}egx(;SWN+3s?`9gFc~~YL
z+-@gMtsED&<pu7=0@Xorm&5KLacrb`v25oI=dj;A%EgFaFe%RV=I$rr0d?})Y&19=
z+Q>~*EzFmw>(tbg0yP!{y{r!ik~N#aM&JvbA_^?9r~VcoOAeGgI~g!;A<u|snHRG4
z^)~8>xaj!Bl{vfu2dY{dgeg{ZN`Zq5<bo06%n&z`0a6@+CRGB?!%a{e!(br{1Ibj3
zysq3lI5Mk`*vUL%AhG;WxC8*g3lCxE-wt=mlELdVu1JWD3TD9lv?6-NBD5Ymde1Q#
zvaNt{hTkt<(hzHf-L4A0FvTRzELrx&rsavP*m6Ls1bKE($O9Gk_WK0~^goyb^r`xO
z;;*h4xwqrqp8JP-teD`H5n$wKNdD4DpQ4X`IbfwU0s5!6k>b{iMQ;_=bAm3X_#Qt;
zEShD(w`RS};S3BouvA|=)6^3CI(u2$-UmaOOtMdBgtt8p7DBzrf3c$(EH&ok7q@U`
zoHpG`D^9i`aS~}=qh3tU1`9PxGLKJK`a8g<0>C55V;c}r#*GvPxF_2<YM85eab^Mp
zu)}iC;r4hh%^7yGh#FA|MBRw5u*DWzM2HYIBSgbVs@%&gQG8Jy(ZJ&>K!>WX&=D|F
zS!X-jOGA(IBBI6dV~U+XF*S-@7vi_>C70vt);rPEZgj4=5?8~@B9ge^0N|K?=3PH|
z$+0%8PY(u2gE=SN>gwiK^x<g28CDKMZqu_e*pDaLLyFvX2Wa}On5u`}c>4)z+lyyl
z^&wyItA+*?C^QOscM?P<Z&g)GhKuDlZCpNX?Rqx5BQRaKT!b2G!x;`RrUQqxb5`xj
zzxcI|#-S#5yXR76S|pzUSllnpcMyP{-N5%+mcA??Cig*-^WkzZM|P-F+)Ih2F8wRn
zD+XXf<Ojxk8FB8Gn^goDc%e-`E~qb6#&=RikUEQuzw||xhgNSE&s#2wQ*pll-opJd
zU;)S=w8EiO@$d1~;eH`8H)ix&DddW&gAmNQeC$>p<NZRy%}a~E(PP$0(Gfg3mdE7T
zcjd?x{7MO14jJ<s$R&3S#<C1eVrh|7gM+dA%b$WEH>L>wpm^fmUQuAeOdqt-u+cMP
zLBd9!HSgbqy^mLj`vY+>7RbKfnuAQ{SYXIifIC2lQ;&ilE*h?J{63DWjN>pq$1z?k
zyN>=Aw7C8e+Zc|v(&fnZ42^2gB};jPj!3v*W_Ay;tU7C$oXG=(4(j=ir0I>TuHi<!
ztzvw==~-@LQ<8di9EpmysrAzvWs>{YPm|aQ{FYL3Pj`uVAWx1wb}>kmA74-Ym6l7c
zROD4J0M0lY!L!LY^2y5?E{z&mPZpI_JXH*|sw1d~R@Bn7Vo-dR+m}})0?GPKi3gH$
z+~Xf7yt_~@^c|i3cx6;S@6ZYR>b&d$<=t;h(r!_ig5sHOyZ#LI+S&6c;>(9ERcaf~
zX~r#>LlObfpjQr<thn6Fp1uDvkVRU*H`DIpy}VDK8|Ys+hhC<jzaUp$5J47B4;kYB
z*)&Um!3$7yl&Mo&0cGk{od;0xC!2U<jm{{NGt!5GbSo3phd_dtQRJ@_lw>7};Tf8D
zIKWs;CbKz2W+j3I-<gO%IY6El=9S+nR!jkgd<38diAQBgd4tD1X(=)ghM!<HuS8zB
z<ZBSO-SDiBYxY8Gq$yp$=A}L~tShXrb47B3fCStYk-Q_Jmazj&alF%?7n%rfQl!&6
zGHsRFqsWT2Efhvu6^HahwobO9TOeCw@IylwltCvH0CV11-d%1Sk3exbA=7cXwuzyF
zQB9NF3y{dbl7d(f=Sf`)pxP}ejZ^%?2X8v+oYR59$-}AYiObR!Ws}e6N5(>B47YBo
z(J~Qeglq;40R`vn#rG|M_p04uYn?yb0L|em{pJK<9KLZIo<R0Ja=K#J_G74RDGAG}
zS+g?1fC>}QGKgk|&r>U_U~ITP?D8Hm6fTWLG7S@U2cdEw!<|u4R`m~d!&y_mV`c!X
zfI?0m9>)zEBQsnfu;A{ywW3-&n^mCz<c>2t2O}~}22m(zaYN*{BU5#Ox0aao)KQqK
zK`i8xDLJbgdFraVrV$aV<EB^*Af@Qyk(^Po&sNCJjB|%%gqktS5A5*;djof<Y3$07
zf(R5b2DpZGY~lf4VjH{I$03ezjMrOg?lK~q3v>PsqHF-R01p910PKtm08~H;kN}2&
z>i|A84gdfE0DuVWxB+G^<U13>|0$?TiUdPk#|F0W5F_kh4+j{J8s&J~3eY%`z%6M$
zl_1n7_5Xl43SFRxF~GHGozT8gv`O~>co}Wen;PY!cM1DA#1W41dLocZ>d3dts)AwS
zy?$MAG98$j>4B$`+|Z=hAI}>l0$Jp6hDhK|%u6wWd>g~8ArOd#Ur<`_YLIJYrjqZL
zg6dnt-<LK+k$RJeBKilg3sfE=WApQ@qTPQP6a2Sr>+D)2#hdOMuK3>jU7WfnnwTcj
zUv7L8<0a15RRWg*pbB60+?pet(`|YxN-7g7BaR0Oz~Q@zS980$sis7BfD`{!^{$R;
zaZ16;DSa>}!AINThoAJFMN4fd;;wT?8*O{QxQjDlC7n6a#!Ycd1gS%s6#rPZAZzEn
zVwl?;iXaKTpV3|Bm%_?#9q@L(Qr3VPQAPSu)man}pRL`<Y?p4hUP5XLiFb8_)2*4z
zgLs-Zi&Mu9ajR$sSKvCh+QmWRTDPmWo$7p>WAS?A`UN?Df0^FAlZq$Cs;^sf_Pd(g
zhc&OfxmFKSFC%nwXZL+VEuEZm9uo+rRx2*O7xCOZ|23y5G%wiTkJry3#<)mfp9?ex
z8R`QLPjWbUs#wO7S&{>^w8a_FF>s}zd@Vm)8o*wKTCsYV%8Q$YN^I<A%i)SQv8uDG
z-gc@1PClDura`$oLkhR?o011P;)CB1|H*Hx+ISa|c?i|<uqL!u-#r9sN4S**8G~#c
zBG`*%2-RI&VX|rJN#e}-B3?G<W)=qxf@<ucBxeg2D=<yVz2+L+0hk(AT?yNKHl?OI
zr?s|{m3XiL05X31=V9VY3b}<QsCWXhNg5M?8tC{d#EdUl3I$}7R4z1$BnFF=9b>oc
zRngbZq)7nNW^S)#0Z6!wIOiIXfF%IpLi-uXS<3hr7y9W@3DQW>bmP^YUgnZcx2snL
zXe}HohY?4Hg3*=jtYNg1Pa2+UHchA5G#lB-5(GWTH)9(Gre5cC-8wY<;>|2n!IL@s
z2E8#x4bYm6@h4D3U^CL>!x?0d@gzt*z?745OB6_4|75rV->%JHyIE~0e%L8Vp5%CB
z;OJm4kl_j7$5_Su=aRn21u6Fugk|(li|Z;Rb;aJpHDx(ACYFtbv`QE#jP4)o3ii$i
zV;<}b97YJs_!DhO_m26VIuJ%hy^IIYh#E*en%0peg0Y?`UKyH>gp`zkM&R)MlV&4}
zv-}Q+?#hvFI&2?L!$f1~ei&FAXaE%!rd34Z)LqI2j7RW6R>|{Eotk=83xMX~4YUIw
z%3KlikUJyMj$-eAIyZMvs!ZRvf_ux#-r_N6o7FgNe3K(8H)$fPo=zi`=S0YB4?Hf|
zuyiJpt4Lxi|0~>XlB<!hY&Cd5X}}ALK$@Lx!LDMTI@xM#N3>+Luk*>L^>scuwZ6`$
ztk&20WY(mhcNlw`{{JBR_+%%2oli!sUlilA5%1JtlmH`R$`t8fviqhX95=M>|6W~i
z{>8g~hj|c{Ngp8dIK->fhLEq^eKK72bw1^^ydV*_IevC{{^N^fUb@83^ZSLC;UunO
zHb-*nthiV5pXfT?1|E~;087EyoeH!t;Fn<vvg&aaJ)WSO2R*rWVE|}up<Cd~d=ejq
z1FY9CvN`~32-sBiBI9go|2>0<K^YBb(k5w<yz*i~y9WEhL)az-WkU#hf%M=z^Z&ja
zBmC*R)>JCS??7M{?6Y(a+;1N#?tU!}VI>hNZx0yV2I5}?Zer_j{Q&p=gvWmuWyjc8
zI>dB@=@`>%C2mHfFa=C8(}0Oh`NhtJt$;8>RBr$^!{4@0GF6up35K|ijR~I)wW+<2
zFXAD`Q=^_4f6$wag`_|-xGH7Lj^<udX^!L;V@4yjw0!~QsqJcb(dq1biv1kQ!T<<t
zAt13h90fE507%1K&TWI3;rKdiqLaf+jwN|`hzy6-aL?7{=DsLry;uh8#cC!7$VRL<
z<8u?(#nlGZQ?(3dpxN$0=T^R)Y>E>cj`4~qwp(*J$*q7avZ&L`4QbX-*{nz*<#90Y
zZm+$Fm@dto`Wu3~-&2Hzck$ti_f+sd0|<b6^64o2M*i@Z>i7cS@Aqv404(i~zBo3m
z-&yqbQUt7l0R$}R{tmEW$HG7cxE0d*HM1JsLIQl-|7E*vfi*Ja55aa!Tc0RbdX`^6
zMOd%T<fnuaQF&lW!OBRrTV<r~g(=OM)a2KHNs%I+cPk~|5)Odf@{3bG5#$nS$8+g)
z1??2pW(9>A5`7_#j{g!_$B=H4j--|R)*eEAi}dZ1EgZvkH$eV1<lMEgn;;&eh->EB
zRGb<qn$1AaAr}7dMWT(dP1t;TUjKCuL}jg5b3z>ygZ;a-XI|kKKiI{m>~M7tn`(Rv
zdOxdC^_vFfF5#W2FgXoKsZ%5&MW9GSA}RHkddVmExg=S-uA5Jv3KB!II46dT!+43(
z+*z-+nngv^sJm2~gsu`Y=n$HFl%0djOv=m<m}{baq|YkdJx0;?LxvW84#sdWe_rJB
zA%Rq6l?3~5(nwegf?Fr7=?u*j(gL#f%2OLbSsBHdUQ|HAK3jegrJkAh5xsBYIE2R_
z74r62b=JmHOQapo5CjqA?PDrJPvuGiNK-k?5Ktn_8T1rld)(F;>B<-4x9gKBvjoP1
zOfDJVx+6|LMS86=$-FZ>>LKxQxnc}Nj%0pmeXb*<voCJ8f6;;_IItg6VUK>UM7Yj%
zFmup|dR)USY{vO!<tVSp<@t=<+z|5*(*XozHDsVEMS%d;g2Il8fPmF1;LySVaFw6)
zHN@ScH4N94HJsj(HG;p|H410BYgE2MG}m{)9U6wDR+!)`>y@z@6zc|7D)qY3{_bj6
zSp-YgSAqeeB}!4rY`AnKs?`gU#>}Eor4m+|%&e((P3cCGj*2#&Bg>8~_aoWW{Z;1a
zf}8Z0=H1k_F>2Hraj3>}3N%UYtEQnxrXdGym4B@YDN3bEq%-X>tOJ8t5AAe0iGE=i
zfVl#L&NGzN01^yvMzQ+pr@sN>f`fPo5+zBN@>Dl_Hj_+QvgOE?Ctm>tAHI4}^5ZW+
zpdc#2)HKhB^Z#;hVg6#!hlrRHXD(d1apysTL5?2+cG@MHz$Tt}yf9I;`rmGQoN&@1
zhi$OYDuk6}SlGfvDpX7;!hukLuE;ABOfuCJ(=6BIpHLAEIH;nO;Cg4S_v}dCq>h_t
zwS)c*9sWbJz!8HCQE9MhRa(?|qn1^@IyW^KYM91k!*C;vGTKNhjIqOHUB<E*Z=4SM
zv^%ZT7G<`Yr930yHM6!S-tk^k@st#_<=1GoZMN%l&2<Ca@Ycex;De7og^f6fi+G4n
zKuAQ)i8B|j+_>}TvoF3z!n51%m|?mYx7?2x?;eCCB_pTc!&eVVe*6Up6htMMnueB6
zI#&o&#|=`e@zX5glFA0PcA0uv>#o(ZI;s^3+V6CVT0^R}>H{<+l{5q=H-t&1n9DRX
z&D?IlkO@XiGR0h`nK8Jd#<Xf1lfP&TF&%Xflguz=(9BmFdKy#a?{QaNQr6gDUQ&Oh
z#r9^dRP|4S6wHQHWx4rdBJwUAgqaSvPz$5weM_YHZ??@Xi;New;HDCL^ITgiY*nzj
zMn)k-+rio9bJ--d9khK1;lM)rap4pC+CxcYp%8HZsqEv4Rjs4MuxjEPQfeyFy#}!l
zNe57>C)qzHOroLakIMv8ALFCzB2>VbNEEy)rbuEioyQeZ<+IaTb<yawgmSW8F<l(p
zedLk}x+xb<a#9N^WLj*D_#k}hVo@r|(WJdXHmlmAPo~I;IpTMvR(wZ5K+8Aau_l(-
jClU!+V``ZQrX`L~9TRCRMy7`5qbR8cnum}gU}_A_G7zvM

literal 0
HcmV?d00001

diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/fonts/ibm-plex-sans-600.woff2 b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/fonts/ibm-plex-sans-600.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..0ac91d60f7561d6d8adb2b1d329e47bafd6a3279
GIT binary patch
literal 20356
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%0DDx4q@qn(zDT
z5@c#`l<U}GpuicPoBLRSQYSpqI9J;v135cA7|&hCfC9q)j@{}6rIH5Gz`22%-Xt?%
zermG@o@4^R=BYt2XW2{6WvQKXn#&@*KII2$ORcjqP^3v!!3j*LP=tP5-`r4*I+(K6
zHGn1_r?hjF*F&=0U_$F?NAi|Rr|Dzh^mFGl<krz@@C>TNv@*)uzoYrq%ac{4TY530
zj$KvP6`Rp3>Yg1<WVJ}rrcjEHy-^sII#vI_nX{dhDs=Bz&AW?=xjFyj-55`FvpG-q
z!n}^C2fDd>%#`NuobqBfPl}_Pb$v?h_BNKA%*?VXU5~1SEH_b`WW1G9e$dV%kG~l=
z*PYxQ-cw@>M^l=z-(+SJEdXX6Z?4!KEVb+|wt7d=8Mm}bJFfe-t30w(Rn1_iY^)2+
zy&qmo_Q<dN8jp4#4Aoz6rN4N9FM&8ipMU-UTjd3>NT^T>%zFEUv%|R|3Yh)BPvw`Y
zF9*q^(qJ<6G6x==^r@>2z2ptU`D8rW`GJxIt??~7aP&UHN3FJz1Q4Sefhx2bEQzUk
zNsjRcg@+J?t=s_^s(!{8fdY=WlLy%r&|KvDQ)!)d2_k^;UEsc7r94*9eA+9*%qT|N
z#c_K9SP!T02uP_sprvXIyroHnjU$+r`3|swQzrks{Uv9?LE-XfHYW9>KC;?eWBJwO
zna}M;buy$r))KNKdnMyfd13Bbop7@Ha{o@Z)UWil!YzJ!8cExS6jolU{q!^_wRUMZ
z2##P>kKhT_QEbT?H*IuF5Dg5fULPW0%4tcAS@vob0x>asNTpSuPvCpX3&Se(;Dcbe
zms(C07l$|-bl^U4B84kFbWr+Qr9=oH@^3|XZ!@opnGG^?3zggAs~efMsn~D36T)qH
zRTj5N%mhYEjYZwX!$736q&)#mmM5+mzK7CIwkL%%NF9Ped7oc-jKrv2+h6#FU%rY3
z9UMnhL(Bh@XD2`Ho45{Zk*?3$Tj<l-LlZQU79Q%#5et0;VGVZqj@XB&OwSJtx|xSQ
zWy4t}E{Kt?0G@glp0geLmdCJV@=@nt=z<VV$Ja_{jFK1QNo4GwS?<1Gx|s~mE#)qX
zu{=cemTeDLf@$XRzWWaB2GzF3t<sy9o4bin;j(Cwg(mjv5L_(^Atwetsi$`*P)>i*
zdrz{JdnQ<k&1}ue=4ukx6T=Ub5`+nF9LX^lrCm1HJxTiir`-T3^^aATtu?Z4bVUb%
zZenhnFsBe{NrJ@w`+$vlKM<Hme0dpFnhzSZi6;uSr_kh(J)njHPHIG&V)g!#^F(&-
zxK;S+5>8Aj0}h)|nX}<^ONNEyNT49+aSjk7f&>5w0F-)JdxUPO(;l9dg+R%@gc3&z
zblb2jz6FK_k+hDdvrhcNs=78Gw%zD4x%jd0fCt|uql-Q==G!$saK&{8>Qv)rby|5-
zY;&ROoNScU(FJUrNEPX}D2`&3_Y9U+4#^Mz_*gz$o$1uD0(zcnvvxpp#TKYyCsyn}
z1YohD2n=kQZzqhc00N$Hd1uDYDtL^oB?#NU;5gwl^i=F$O85$3>bw1MRRXrxHFs&B
zeo%T2#QS*6AfQhR{zlBA<VfC+D1AFF(Fl}vjbZDg*h1d(p)+I20+e&oi65orNfq0r
z;y*byDGu}8iGl4{eOR+iZ|4UJfF5tTrT9-sZ7m9EtRQ|l_dZ+%P7DHJT6?yi>*+s1
zeiAiH4du=oMpY>l=^i@%Kzs~VYq#YI&AT{t%EAW{IT#AwrgyA1E~9bTK1&&(PL0ss
zO?n)-ud*meMY@QgM1Ty$EZ7$XWxq1QdhKNpeB_Wg>&cW}x@5D!elk-<oWYn=ViJHc
z!dB*mx6XEU+f~JtWn=Cd=Yvu6=}@pLGRY1c#j=6QO3M={<D_3JT;d)6UlyhGH{i$A
zU9S$Z@AAYco&UEpIskwRpad`nKq}^2fGdD&fLnl{0BFe;+Gpa@==xgKSQ1bFiTlo7
z&FnI1KE3HX7FC~>U*SBukaXW1-(q}khu}{RA<nngZb0+(cdq{{+~Dh!Tyt<ct{PAM
zu8WMuV5Z74sWWZWxS=jBJB`fk`KA>WT~0eUkt#DsB5jiDCEm_s=}-TtL3B%IPxS@b
z7bs=JBtqu)l~`v8XPrw49v4kG5-mHrC8%kq5p46?L=q6qDmKaa7MxZ^>(UDYtDddA
z^a`s>MpGWPpxwi}+|c2h9ufs$CL|+?U2aVTh|y(enm7S~Jx6KSlODFOn8xX=HMX)b
zl-<)SpKgh#qS#Z+R-2ZZI8$%e(pE9yW|bv$cY2pN;0SlEL#sVy>Qs7quAW(4J4gY3
zxwO91>5xiM`l;u(yq&I8q5VK<h&oOMjJ6n??)MF}=~N7mKEVk*#-(QVJkFZNf3^{U
z?h%rJ_0DIoIt9R$19sGSX(9l|)XCoXGEj4ruYgGF((B;gt7})ci1#`}N-bl&ozJy;
zC$kwcmv^@Fgh6Znz~M#Q<SQjr{feMwxS{;bbAELSaswyERi_9I{5-*Wb|;JZcBZi=
zAVxeH;fB5<acSN?R}0t!$W7g%!lW)YF#R*KJIl1QICr@$n)PRL8nz6rN-C&_ULb8;
zW-FXfYIuUW8FIjoBff(jf_d;w^|xf`czTdsOE_l}_D+bm@H!H%b+K-)ZCo=G!{=sX
z<oH@N77b)Q1o5*YTehV|3%MZuOb_{Hak$`!nrXgpY>mzJNUb_oVUjYbP(rrwIR}cW
zyd<P*slAk&7m9$2nwaEzcH9@`l`2Q1@V|6M#yuLma0_i;jH>|0RbfsOv<6G$Jw;x^
zF{K?{OQoq{6xumYvVk0A9>>5*Vu#;x&Tv_&!TL5?gT&_EEI|auJ&|zG0w~K-R)7FZ
zLIaDoO*YU5zOA->+u6v>*CvgB46a3$$Q5z&YKHS61`_~y0sL}I20r7}PcbiX;q2di
zQIxfEz_G9@r@_mndEMidVFf3J6fWPZ*)fD;riA@)B%8!t){fnYIjX|;L<hWixtq+X
z$wU}d@fOND*0(HW{s^HdVgsS9SnR<w#*@QoN!!`2$l>Ez*>j4G{bOy5Eqm;2jOqP_
zal>xLzAAj1VwZ#QbbJEdcV?`ghkw&+WOOd^6~`E14*~$=Kw<o*S)G`Z^9~B)(q_M|
z5MD6MyAPLo`qU8}9|Kb?I<UF@5O$_QqK*ps4b?Gq?oZUORksR1;rohYrHrIXjyWqx
zk@OWzT<paoJ`P|{lhcQI47eixwA)do&Ao=X@HEbsZAnq9yJ6D_(;GNOApu2|3APGC
zG<%Ey**2g{OC@ZVtq3v%&8rt#cmy_E0jbKAkmX9%1~tJZIzBSF`TUW|&FPO!ZZ`h`
zre-6P8|9~URHH_n)Tom>sZmo6x?8)r#d<!fz8UI~$<64eZ9j-=PpSq{8t7n)Frxs%
zh=L{*6ckiY(asR6o#ooXPl6{G29|!HB*^&MlO_TRp(_Z1D(>_u9j2Mw49&>o=JPr8
z(75@W7+B*nMVm~D_{shvD<aM($Al+W;!Wc+fW=7e%>uX};1^hGJm$_EuFv{$@zhKt
zy;!`#QPDjB{QnR7QYO4Zjo^lHT*m+AICJIz>sT)l9RjWhwrMsXI0H1r7YR;rm(k7;
zFZIu4*7U^{n^ll~JXM$KRVpI%N>(1H;;dSN(*2qgg+4z`*~_I|;vYllcN=|`d>6Oe
z%F(V?%8-&MmhA{9d-F2!C1<vMQ4qqCeH8BGm|ReUOpYQh_4#t2)`oYPl%R<wG-Hkx
z;W>-em2&GxH_4TF!#N!wB1OaDk24)3j_){yS-~VE^)TU`2Lyx(D5?0d{=^=6Wn`rW
z_%~kD<-uugSmV4=eUa#g&&RdX!{mf6+4lnQeMR<Z0VXAd_FGF$aZ)f$aDo#IoM7Of
z7UQxYAo=GY5s?Lwj|`G`Af9ed-pQY^r{wq7)tmj8Yjy<SWbLx;YF*xaQ?2$<#RME}
zs~~Q8CS{*acnWCHJhfV{2;bIQ&DrW!Pr{#Ut`)cSEdatmKr`W8duwswo8Z63r=J0D
zKjQ5L;N35d7XG;T4_kW;0z*)MK$joi!GKe4izqjHB6dz0Os=tj@7sCCTE$VF<kfJv
zC@Zp}GNcD}Ss5x6vo@2LB&qv2U&<pdSZiyh#`2;&YI)AHGcAz&6=Md|X3nZn5H&A#
zS;&pC@biJAR#MgiZK{K>b`f`gOTm9Km9rVLQCwN+YP}PRLz_ks`KOf}2Ur;Lb5&OO
zrtH?d+DY3!x|&T^LkX%QXLaH}0uN}w0tpZcjUlq{h&s*RCP+z<#B7#o#@<B3Ry0$>
zWVe9qh_p1gJx4}`L6e*l%#`kM76<8B&bX|_+cu3j9G<dr%=9EqUb?$XsS}*mJSo?K
zG||QpmtQFyaoLBnt3z?$-p;BNpP?pCVx>r|<s41HlS{1iFI{$v$VTp5kq`!9xhkw8
z0?HgUI2LeXrb=wfKwsy+@#>lNGKTlpUqodTUjOn{o-ilmtbD{3>LiJGWNp3F#F^e)
zxB)vvA<uR$@|y<0|Ah<`XiP!2HY>1>I;m(9859KtMO-wt03=p0K!8G>v|-8R0vN#V
zk5lnb(H<lmO)w)-{4%AryfiSU8)>@IrZYjhkfjep`ZFY#G6l@(PiGy`dXlzW*==Kj
z_M3CtRwn~t0gQxNSS1H)PzU9q6VNvS{06Pz2n>c|D4W`X3B(a}J4|cwhN%UC3`RR#
z`8Wt*C=~K31_6T&KqDO=aJnZ<4iTXuha#~x=UiYrlt?UdsCb;Csub>U2wdvb9d{O=
z>1l-=+`Te#PkyG?<qg^4YqH7;TorX^8$T@zS5Iuq#>Ii_=4`ENgM<dUxk8zfR?=Qe
z)VnMSO?~HW)Gm-nv9lk`f{~{vc=r!b>;fMUB|$V$PPOIKK3onRXJ_a}#eoRHM*rBL
zmh-(3soUGWiZU2Tf<2Itm6KOce5B{fDynMgFKOpx*U{C}H!w6ZHW3O(qOo`)$*>$B
zfbqrg{GZvhY-~%COin>bMNLCXN6&ySgft9x+ap7;EsTPg2yg_H+H0TVPB`SSO*UJD
zv6_vLNQyK)^dgh$Ksey(>6yu<nqj&^%Pcn`Ea5_om9965mx{eo#=^|%m?_peXkvJn
zgloP^Kl{~he({Ijt@NiC{_>B1{q3rO1{-2f;xN=OBaAfMDx>T&O}){^8fT1J6;3;)
zk8S$eZjOG5$8-Hvz1*MRSp!}S1?2xWnrnxh>RfVJfh%e(h!C&6@%Cj2vXO&0a`W;F
z3X6(sm6RrGYjDu8jA!iY*>cxwc?G|+PThL-8#HWGRo%Er(`MbNY2Ko{tz|63HD1do
z0=}3Xx2SBONbFkX$<qi;vg{M+r(AD_wXj)Ckyu-?I`=hLTogz{Q;(J^?sh><U8$j|
zM@vQbiEY9$iuB5m_sO7!N=*?r?WsDiz#;fS<}LF18ykY0@#AgWBA6(vzRaOE@vlQ=
zAoxBkdaPB57BU3bhHe;=`G>Gn{9$*itfs%l4ON$xC+arY-^4hvR+}k;0jUP}RUK+B
zOng8b%6*R0ISluvEKPJJH~{Tl*F>KbviSZyBc+tj%r1lfBlm5Z=!u#}DxTWYz>;!Y
z#o|A2(xXV?mmXMevV{<}vaEh-xu$BvR7XmY%p==oO$G>Q){L_~;Yi&F0!uiM;ZJ_+
zfd!cjWcs^5dSy#Li?mcq$xRwq)ArKJTtAd!I_5@RZIll_hF#(LOf2_dC5C=v*|(fq
n-kMzHZ`lu?NsQVlln-3W0;g7TMV2$mW$?Rj%04FK9A*~)Ny{s7

literal 0
HcmV?d00001

diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/theme.css b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/theme.css
new file mode 100644
index 0000000..72513c4
--- /dev/null
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.Admin/wwwroot/theme.css
@@ -0,0 +1,379 @@
+/* ============================================================================
+   Technical-Light design system — portable theme layer
+   ----------------------------------------------------------------------------
+   A refined technical-light aesthetic: warm-neutral paper, hairline rules,
+   IBM Plex type, monospace tabular numerics, status carried by colour. Built
+   to layer over Bootstrap 5 via --bs-* overrides, but every rule below works
+   standalone — Bootstrap is optional.
+
+   HOW TO ADOPT
+   1. Serve the three IBM Plex woff2 files (shipped in fonts/) and fix the
+      @font-face url() paths below to wherever you serve them.
+   2. Include this file once, globally. Add view-specific rules in a separate
+      stylesheet — never edit the token block per-view.
+   3. Status is colour, not iconography. Use the .s-* / .chip-* / .kv .v.*
+      helpers; do not hand-pick hex values in feature CSS.
+   ========================================================================= */
+
+/* ── Vendored fonts (embedded woff2, no network/CDN fetch) ───────────────────
+   Adjust these url()s to your asset route. If you cannot vendor the fonts the
+   --sans / --mono fallback stacks below degrade gracefully to system fonts. */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal; font-weight: 400; font-display: swap;
+  src: url('fonts/ibm-plex-sans-400.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal; font-weight: 600; font-display: swap;
+  src: url('fonts/ibm-plex-sans-600.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal; font-weight: 500; font-display: swap;
+  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
+}
+
+/* ── Design tokens ───────────────────────────────────────────────────────────
+   The single source of truth. Re-theme by editing only this block. */
+:root {
+  /* Surfaces & ink */
+  --paper:        #f4f4f1;   /* page background — warm off-white, never pure */
+  --card:         #ffffff;   /* raised surfaces: cards, bars, table heads     */
+  --ink:          #1b1d21;   /* primary text                                  */
+  --ink-soft:     #5a6066;   /* secondary text, labels                        */
+  --ink-faint:    #8b9097;   /* tertiary text, captions, units                */
+  --rule:         #e4e4df;   /* hairline borders / row dividers               */
+  --rule-strong:  #d2d2cb;   /* emphasised hairlines: bar underline, pills    */
+
+  /* Accent */
+  --accent:       #2f5fd0;   /* links, sort arrows, primary actions           */
+  --accent-deep:  #1e3f99;   /* hover / pressed accent, raw-value emphasis     */
+
+  /* Status — foreground */
+  --ok:           #2f9e44;
+  --warn:         #e8920c;
+  --bad:          #e03131;
+  --idle:         #868e96;
+
+  /* Status — tinted backgrounds (pair with the matching foreground) */
+  --ok-bg:        #e9f6ec;
+  --warn-bg:      #fdf1dd;
+  --bad-bg:       #fceaea;
+  --idle-bg:      #eef0f2;
+
+  /* Type stacks — Plex first, graceful system fallback */
+  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
+  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
+
+  /* Bootstrap 5 overrides — harmless if Bootstrap is absent */
+  --bs-body-bg:          var(--paper);
+  --bs-body-color:       var(--ink);
+  --bs-body-font-family: var(--sans);
+  --bs-body-font-size:   0.9rem;
+  --bs-primary:          var(--accent);
+  --bs-border-color:     var(--rule);
+  --bs-emphasis-color:   var(--ink);
+}
+
+/* ── Base ────────────────────────────────────────────────────────────────────
+   The faint top-right radial is the one deliberate flourish — a soft sheen,
+   not a gradient wash. Keep it subtle. */
+body {
+  background:
+    radial-gradient(1200px 480px at 88% -8%, #ffffff 0%, rgba(255,255,255,0) 70%),
+    var(--paper);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 0.9rem;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Any numeric / fixed-width text. Tabular figures so columns of digits align. */
+.numeric,
+.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
+
+a { color: var(--accent); text-decoration: none; }
+a:hover { color: var(--accent-deep); text-decoration: underline; }
+
+/* ── App chrome: top bar ─────────────────────────────────────────────────────
+   One bar across the top: brand, breadcrumb crumbs, a flex spacer, then meta
+   text and any status pill pushed hard right. */
+.app-bar {
+  display: flex;
+  align-items: baseline;
+  gap: 1rem;
+  padding: 0.85rem 1.25rem;
+  background: var(--card);
+  border-bottom: 1px solid var(--rule-strong);
+}
+.app-bar .brand {
+  font-weight: 600;
+  font-size: 1.05rem;
+  letter-spacing: 0.02em;
+}
+.app-bar .brand .mark { color: var(--accent); }   /* the one accent glyph     */
+.app-bar .crumb { color: var(--ink-faint); font-size: 0.85rem; }
+.app-bar .spacer { flex: 1; }                       /* pushes meta/pill right  */
+.app-bar .meta {
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  color: var(--ink-soft);
+}
+
+/* ── Connection / liveness pill ──────────────────────────────────────────────
+   A rounded pill with a dot, driven entirely by data-state. Use for any
+   live-link health indicator (websocket, SSE, polling). */
+.conn-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.74rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  border: 1px solid var(--rule-strong);
+  color: var(--ink-soft);
+  background: var(--card);
+}
+.conn-pill .dot {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: var(--idle);
+}
+.conn-pill[data-state="connected"]      { color: var(--ok);   border-color: #bfe3c6; background: var(--ok-bg); }
+.conn-pill[data-state="connected"] .dot { background: var(--ok); }
+.conn-pill[data-state="connecting"]      { color: var(--warn); border-color: #f0d9ab; background: var(--warn-bg); }
+.conn-pill[data-state="connecting"] .dot { background: var(--warn); animation: pulse 1.1s ease-in-out infinite; }
+.conn-pill[data-state="disconnected"]      { color: var(--bad); border-color: #f0c0c0; background: var(--bad-bg); }
+.conn-pill[data-state="disconnected"] .dot { background: var(--bad); }
+
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
+
+/* ── Status text helpers ─────────────────────────────────────────────────────
+   Recolour a value in place — counts, ratios, error totals. */
+.s-ok   { color: var(--ok); }
+.s-warn { color: var(--warn); }
+.s-bad  { color: var(--bad); }
+.s-idle { color: var(--idle); }
+
+/* ── State chip ──────────────────────────────────────────────────────────────
+   Compact rectangular badge for an enumerated state (bound/recovering/…).
+   Squarer than the pill; use the pill for liveness, the chip for state. */
+.chip {
+  display: inline-block;
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.15rem 0.5rem;
+  border-radius: 4px;
+  border: 1px solid transparent;
+}
+.chip-ok   { color: var(--ok);       background: var(--ok-bg);   border-color: #c6e6cd; }
+.chip-warn { color: #b56a00;         background: var(--warn-bg); border-color: #efd6a6; }
+.chip-bad  { color: var(--bad);      background: var(--bad-bg);  border-color: #eec3c3; }
+.chip-idle { color: var(--ink-soft); background: var(--idle-bg); border-color: var(--rule-strong); }
+
+/* ── Panel — the base raised surface ─────────────────────────────────────────
+   A white card with a hairline border and 8px radius. .panel-head is the
+   uppercase eyebrow label that sits on top. */
+.panel {
+  background: var(--card);
+  border: 1px solid var(--rule);
+  border-radius: 8px;
+}
+.panel-head {
+  font-size: 0.74rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--ink-faint);
+  padding: 0.6rem 0.9rem;
+  border-bottom: 1px solid var(--rule);
+}
+
+/* ── Page wrapper ────────────────────────────────────────────────────────────
+   Centred, capped width, even gutter. */
+.page { padding: 1.25rem; max-width: 1680px; margin: 0 auto; }
+
+/* ── Reveal-on-paint ─────────────────────────────────────────────────────────
+   Add .rise to top-level sections; stagger with inline animation-delay
+   (.02s, .08s, .14s …) so panels settle in sequence, not all at once. */
+@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+.rise { animation: rise 0.4s ease both; }
+
+/* ════════════════════════════════════════════════════════════════════════════
+   COMPONENT LIBRARY
+   Generic, reusable pieces. View-specific layout belongs in a separate sheet.
+   ════════════════════════════════════════════════════════════════════════════ */
+
+/* ── KPI / aggregate cards ───────────────────────────────────────────────────
+   A responsive strip of headline numbers. .agg-card.alert / .caution tint the
+   whole card when a watched metric goes non-zero. */
+.agg-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+@media (max-width: 1100px) { .agg-grid { grid-template-columns: repeat(3, 1fr); } }
+@media (max-width: 620px)  { .agg-grid { grid-template-columns: repeat(2, 1fr); } }
+
+.agg-card {
+  background: var(--card);
+  border: 1px solid var(--rule);
+  border-radius: 8px;
+  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);
+}
+.agg-value {
+  margin-top: 0.25rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.1;
+  display: flex;
+  align-items: baseline;
+  gap: 0.35rem;
+}
+.agg-sub {                       /* trailing "/ 54", "ms" etc. — quieter */
+  font-size: 0.85rem;
+  font-weight: 400;
+  color: var(--ink-faint);
+}
+.agg-card.alert   { border-color: #eec3c3; background: var(--bad-bg); }
+.agg-card.alert   .agg-value { color: var(--bad); }
+.agg-card.caution { border-color: #efd6a6; background: var(--warn-bg); }
+.agg-card.caution .agg-value { color: #b56a00; }
+
+/* ── Metric card + key/value rows ────────────────────────────────────────────
+   A .panel-head over a stack of .kv rows: label left, monospace value right.
+   Zebra striping on even rows. .v.warn / .v.bad / .v.ok recolour a value. */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
+  gap: 0.85rem;
+  margin-bottom: 1rem;
+}
+.metric-card {
+  background: var(--card);
+  border: 1px solid var(--rule);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.metric-card .panel-head { margin: 0; }
+
+.kv {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 1rem;
+  padding: 0.32rem 0.9rem;
+  font-size: 0.85rem;
+}
+.kv:nth-child(even) { background: #fbfbf9; }
+.kv .k { color: var(--ink-soft); }
+.kv .v {
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.kv .v.warn { color: var(--warn); }
+.kv .v.bad  { color: var(--bad); }
+.kv .v.ok   { color: var(--ok); }
+
+/* ── Toolbar ─────────────────────────────────────────────────────────────────
+   Filter/search row that sits inside a .panel above a table. */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.6rem 0.9rem;
+  border-bottom: 1px solid var(--rule);
+}
+.toolbar .spacer { flex: 1; }
+.tb-search { max-width: 280px; }
+.tb-state  { max-width: 150px; }
+.tb-check {
+  display: flex; align-items: center; gap: 0.35rem;
+  font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap;
+  user-select: none;
+}
+.tb-count { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); }
+
+/* ── Data table ──────────────────────────────────────────────────────────────
+   Dense, hairline-ruled table. Uppercase sticky head on a faint fill; numeric
+   columns get .num (right-aligned, monospace). Rows are clickable by default —
+   drop the cursor/hover rules if yours are not. */
+.table-wrap { overflow-x: auto; }
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+.data-table th,
+.data-table td {
+  padding: 0.45rem 0.8rem;
+  text-align: left;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--rule);
+}
+.data-table th {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ink-faint);
+  background: #fbfbf9;
+  position: sticky;
+  top: 0;
+}
+.data-table th.num,
+.data-table td.num { text-align: right; font-family: var(--mono); }
+
+.data-table th.sortable { cursor: pointer; user-select: none; }
+.data-table th.sortable:hover { color: var(--ink); }
+.data-table th.sorted-asc::after  { content: ' \2191'; color: var(--accent); }
+.data-table th.sorted-desc::after { content: ' \2193'; color: var(--accent); }
+
+.data-table tbody tr { cursor: pointer; transition: background 0.08s; }
+.data-table tbody tr:hover { background: #f3f6fd; }
+.data-table tbody tr:last-child td { border-bottom: none; }
+
+.empty-row {
+  text-align: center !important;
+  color: var(--ink-faint);
+  padding: 1.6rem !important;
+  font-style: italic;
+}
+
+/* ── Direction / category tag ────────────────────────────────────────────────
+   Tiny inline tag for a per-row category (e.g. read vs write). */
+.dir-tag {
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.1rem 0.4rem;
+  border-radius: 3px;
+}
+.dir-read  { color: var(--accent-deep); background: #e7ecfb; }
+.dir-write { color: #8a5a00;            background: var(--warn-bg); }
+
+/* ── Inline notice ───────────────────────────────────────────────────────────
+   A .panel with a warning tint — for "this thing is gone / degraded" banners. */
+.notice {
+  padding: 0.85rem 1.1rem;
+  margin-bottom: 1rem;
+  color: #b56a00;
+  background: var(--warn-bg);
+  border-color: #efd6a6;
+}