From b31ff0fda97accd6f995ffecb1cba98d5811fc2d Mon Sep 17 00:00:00 2001
From: ocx-test <ocx-test@example.test>
Date: Sun, 4 Oct 2026 07:03:38 +0200
Subject: [PATCH 1/4] feat(gui): establish auth-inspired workspace redesign

---
 gui/src/styles/ocx-system.css               |  48 +++--
 gui/src/styles/provider-workspace-shell.css | 197 ++++++++++++++------
 gui/src/styles/workspace-orbit.css          |   3 +-
 3 files changed, 170 insertions(+), 78 deletions(-)

diff --git a/gui/src/styles/ocx-system.css b/gui/src/styles/ocx-system.css
index 325f482c..6503caef 100644
--- a/gui/src/styles/ocx-system.css
+++ b/gui/src/styles/ocx-system.css
@@ -6,13 +6,23 @@
 
 :root,
 :root[data-style] {
-  --workspace-measure: 1400px;
-  --page-gutter: clamp(var(--space-4), 3vw, var(--space-12));
-  --section-gap: var(--space-6);
-  --card-radius: var(--radius-group);
-  --card-border: var(--border-soft);
+  /* Auth-inspired semantic aliases. The underlying Signaal palette stays canonical. */
+  --surface-canvas: var(--bg);
+  --surface-paper: var(--surface);
+  --surface-raised: var(--raised);
+  --text-primary: var(--text);
+  --text-secondary: var(--muted);
+  --border-subtle: var(--border-soft);
+  --interactive-accent: var(--accent-blue);
+
+  --workspace-measure: 1480px;
+  --page-gutter: clamp(var(--space-4), 3.5vw, var(--space-12));
+  --section-gap: var(--space-8);
+  --card-radius: var(--radius-lg);
+  --card-border: var(--border-subtle);
   --card-shadow: none;
-  --card-shadow-raised: none;
+  --card-shadow-raised: 0 12px 34px
+    color-mix(in srgb, var(--text) 7%, transparent);
   --focus-ring: 0 0 0 3px var(--accent-soft);
 
   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
@@ -32,8 +42,8 @@
   position: sticky;
   top: 0;
   z-index: var(--z-sticky);
-  background: color-mix(in srgb, var(--surface) 96%, transparent);
-  border-bottom: 1px solid var(--border-soft);
+  background: var(--surface-paper);
+  border-bottom: 1px solid var(--border-subtle);
 }
 .ocx-workspace .brand .name {
   font-weight: var(--weight-semibold);
@@ -168,8 +178,9 @@
    --------------------------------------------------------------------------- */
 .ocx-workspace .page-head {
   align-items: flex-start;
-  gap: 24px;
-  margin-bottom: 24px;
+  gap: var(--space-8);
+  margin-bottom: var(--space-8);
+  padding-top: var(--space-2);
 }
 .ocx-workspace .page-head > div:first-child {
   min-width: 0;
@@ -178,18 +189,20 @@
   gap: 6px;
 }
 .ocx-workspace .page-head h2 {
-  font-size: var(--text-title);
+  max-width: 18ch;
+  font-size: clamp(1.9rem, 3vw, 2.8rem);
   font-weight: var(--weight-semibold);
-  letter-spacing: var(--tracking-tight);
-  line-height: var(--leading-tight);
+  letter-spacing: -0.035em;
+  line-height: 1.02;
+  text-wrap: balance;
 }
 .ocx-workspace .page-head p,
 .ocx-workspace .page-head .page-sub {
   margin: 0;
-  color: var(--muted);
-  font-size: var(--text-control);
-  line-height: var(--leading-body);
-  max-width: 64ch;
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+  line-height: 1.6;
+  max-width: 62ch;
 }
 .ocx-workspace .page-head-actions {
   flex-shrink: 0;
@@ -254,6 +267,7 @@
    --------------------------------------------------------------------------- */
 .ocx-workspace .panel,
 .ocx-workspace .card {
+  background: var(--surface-paper);
   border-color: var(--card-border);
   border-radius: var(--card-radius);
   box-shadow: var(--card-shadow);
diff --git a/gui/src/styles/provider-workspace-shell.css b/gui/src/styles/provider-workspace-shell.css
index a74cdb70..95affda7 100644
--- a/gui/src/styles/provider-workspace-shell.css
+++ b/gui/src/styles/provider-workspace-shell.css
@@ -2,7 +2,7 @@
    Shell-owned pws-* names only; the rail row keeps its verbatim source class names. */
 
 .main-inner:has(.pws-shell-container) {
-  max-width: 1440px;
+  max-width: var(--workspace-measure);
 }
 
 .pws-shell-container {
@@ -14,8 +14,8 @@
 
 .pws-root {
   display: grid;
-  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
-  gap: var(--space-4);
+  grid-template-columns: minmax(250px, 292px) minmax(0, 1fr);
+  gap: var(--space-8);
   width: 100%;
   max-width: 100%;
   min-height: calc(var(--space-16) * 7 + var(--space-8));
@@ -27,11 +27,16 @@
   flex-direction: column;
   gap: var(--space-3);
   min-width: 0;
-  padding: var(--space-3);
-  background: var(--surface);
-  border: 1px solid var(--card-border);
-  border-radius: var(--card-radius);
-  box-shadow: var(--card-shadow);
+  align-self: start;
+  position: sticky;
+  top: calc(var(--workspace-header) + var(--space-6));
+  max-height: calc(100dvh - var(--workspace-header) - var(--space-12));
+  padding: 0 var(--space-5) 0 0;
+  background: transparent;
+  border: 0;
+  border-right: 1px solid var(--border-subtle);
+  border-radius: 0;
+  box-shadow: none;
 }
 
 .pws-search-row {
@@ -61,6 +66,9 @@
 .pws-search-wrap .pws-search-input {
   width: 100%;
   padding-left: 40px;
+  min-height: 40px;
+  background: var(--surface-paper);
+  border-color: var(--border-subtle);
 }
 
 .pws-filter-wrap {
@@ -69,7 +77,7 @@
 
 .pws-filter-btn {
   appearance: none;
-  background: var(--surface);
+  background: var(--surface-paper);
   border: 1px solid var(--border-soft);
   border-radius: var(--radius-sm);
   padding: 0;
@@ -107,10 +115,10 @@
   top: calc(100% + var(--space-1-5));
   z-index: 30;
   min-width: calc(var(--space-16) * 3 + var(--space-10));
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  box-shadow: var(--shadow);
+  background: var(--surface-paper);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--card-shadow-raised);
   padding: calc(var(--space-2) + var(--space-0-5));
   display: flex;
   flex-direction: column;
@@ -253,19 +261,12 @@
 }
 
 .providers-workspace-rail-row--selected {
-  background: var(--raised);
-  box-shadow: none;
+  background: var(--surface-paper);
+  box-shadow: inset 0 0 0 1px var(--border-subtle);
 }
 
 .providers-workspace-rail-row--selected::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 8px;
-  bottom: 8px;
-  width: 2px;
-  border-radius: 2px;
-  background: var(--text);
+  content: none;
 }
 
 /* WP4: hover accelerator for deleting a provider.
@@ -297,7 +298,9 @@
   cursor: pointer;
   opacity: 0;
   pointer-events: none;
-  transition: opacity var(--motion-fast), background var(--motion-fast);
+  transition:
+    opacity var(--motion-fast),
+    background var(--motion-fast);
 }
 
 .pws-rail-row-wrap:hover .pws-rail-row-remove,
@@ -307,7 +310,9 @@
 }
 
 /* Keep it legible above the selected row's tinted background. */
-.pws-rail-row-wrap:hover .providers-workspace-rail-row--selected ~ .pws-rail-row-remove {
+.pws-rail-row-wrap:hover
+  .providers-workspace-rail-row--selected
+  ~ .pws-rail-row-remove {
   background: var(--raised);
 }
 
@@ -460,7 +465,7 @@
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
-  padding: 0 var(--space-2);
+  padding: 0;
 }
 
 .pws-detail-placeholder {
@@ -535,18 +540,18 @@
 
   .pws-rail {
     --pws-rail-row-height: var(--control-touch);
+    position: static;
+    max-height: calc(var(--space-16) * 5);
     border-right: none;
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--border-subtle);
     padding-right: 0;
-    padding-bottom: var(--space-3);
-    max-height: calc(var(--space-16) * 5);
+    padding-bottom: var(--space-4);
     overflow-y: auto;
   }
 
   .pws-main {
     padding: var(--space-2) 0 0;
   }
-
 }
 
 @media (max-width: 768px) {
@@ -555,11 +560,12 @@
     min-height: auto;
   }
   .pws-rail {
+    position: static;
+    max-height: calc(var(--space-16) * 5);
     border-right: none;
     padding-right: 0;
-    border-bottom: 1px solid var(--border);
-    padding-bottom: var(--space-3);
-    max-height: calc(var(--space-16) * 5);
+    border-bottom: 1px solid var(--border-subtle);
+    padding-bottom: var(--space-4);
     overflow-y: auto;
   }
   .pws-main {
@@ -776,7 +782,11 @@
   gap: 0;
   width: 100%;
   min-width: 0;
-  max-width: 960px;
+  max-width: 1080px;
+  padding: var(--space-8);
+  background: var(--surface-paper);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
 }
 
 .pws-detail-icon {
@@ -800,21 +810,22 @@
 }
 
 .pws-detail-title {
-  font-size: 1.15rem;
+  font-size: clamp(1.55rem, 2.2vw, 2rem);
   font-weight: var(--weight-semibold);
+  letter-spacing: -0.03em;
   margin: 0;
-  line-height: 1.3;
+  line-height: 1.08;
 }
 
 /* Tabs */
 .pws-detail-tabs {
   display: flex;
-  gap: 0;
+  gap: var(--space-1);
   overflow-x: auto;
   scrollbar-width: thin;
-  border-bottom: 1px solid var(--border);
-  margin-bottom: var(--space-4);
-  margin-top: var(--space-2);
+  border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: var(--space-6);
+  margin-top: var(--space-4);
 }
 
 .pws-detail-tab {
@@ -822,14 +833,16 @@
   background: none;
   border: none;
   border-bottom: 2px solid transparent;
-  padding: var(--space-2) calc(var(--space-3) + var(--space-0-5));
+  padding: var(--space-2) var(--space-3);
   font: inherit;
   font-size: 0.82rem;
   font-weight: 500;
   color: var(--muted);
   cursor: pointer;
   position: relative;
-  transition: color 0.15s, border-color 0.15s;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
 }
 
 .pws-detail-tab:hover {
@@ -838,15 +851,20 @@
 
 .pws-detail-tab--active {
   color: var(--text);
-  border-bottom-color: transparent;
+  border-bottom-color: var(--text);
 }
 
 .pws-detail-tab--active::after {
   content: none;
 }
 
-.pws-detail-tab:focus-visible { outline: var(--space-0-5) solid var(--accent-ring); outline-offset: calc(-1 * var(--space-0-5)); }
-.pws-detail-panel:focus { outline: none; }
+.pws-detail-tab:focus-visible {
+  outline: var(--space-0-5) solid var(--accent-ring);
+  outline-offset: calc(-1 * var(--space-0-5));
+}
+.pws-detail-panel:focus {
+  outline: none;
+}
 
 /* Section blocks */
 .pws-section {
@@ -1015,10 +1033,15 @@
   align-items: center;
   gap: calc(var(--space-2) + var(--space-0-5));
   max-width: 100%;
-  padding: var(--space-2) calc(var(--space-2) + var(--space-0-5)) var(--space-2) var(--space-3);
+  padding: var(--space-2) calc(var(--space-2) + var(--space-0-5)) var(--space-2)
+    var(--space-3);
   border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
   border-radius: var(--radius-sm);
-  background: color-mix(in oklab, var(--surface, var(--panel)) 92%, var(--text) 4%);
+  background: color-mix(
+    in oklab,
+    var(--surface, var(--panel)) 92%,
+    var(--text) 4%
+  );
 }
 
 .pws-model-chip-off {
@@ -1055,7 +1078,14 @@
 }
 
 .pws-model-id {
-  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-family: var(
+    --mono,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Consolas,
+    monospace
+  );
   font-size: var(--text-label);
   font-weight: var(--weight-semibold);
   line-height: 1.35;
@@ -1138,19 +1168,59 @@
   font-size: 0.75rem;
   margin-top: var(--space-2);
 }
-.pws-model-table { width: 100%; border-collapse: collapse; font-size: var(--text-label); }
-.pws-model-table th { text-align: left; font-weight: var(--weight-semibold); padding: var(--space-1-5) var(--space-2); border-bottom: 1px solid var(--border); }
-.pws-model-table td { padding: var(--space-1-5) var(--space-2); border-bottom: 1px solid var(--border-soft); }
-.pws-model-table .num { text-align: right; font-variant-numeric: tabular-nums; }
-.pws-model-table .mono { font-family: var(--font-mono, monospace); font-size: 0.78rem; }
-.pws-model-row:hover { background: var(--raised); }
-.pws-share-bar { height: var(--space-1-5); background: var(--border-soft); border-radius: var(--radius-2xs); min-width: calc(var(--space-12) + var(--space-3)); }
-.pws-share-bar-fill { height: 100%; background: var(--green); border-radius: var(--radius-2xs); }
-.pws-model-detail { background: var(--raised); }
-.pws-model-detail td { padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6); }
-.pws-model-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-6); font-size: var(--text-label); }
+.pws-model-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-label);
+}
+.pws-model-table th {
+  text-align: left;
+  font-weight: var(--weight-semibold);
+  padding: var(--space-1-5) var(--space-2);
+  border-bottom: 1px solid var(--border);
+}
+.pws-model-table td {
+  padding: var(--space-1-5) var(--space-2);
+  border-bottom: 1px solid var(--border-soft);
+}
+.pws-model-table .num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.pws-model-table .mono {
+  font-family: var(--font-mono, monospace);
+  font-size: 0.78rem;
+}
+.pws-model-row:hover {
+  background: var(--raised);
+}
+.pws-share-bar {
+  height: var(--space-1-5);
+  background: var(--border-soft);
+  border-radius: var(--radius-2xs);
+  min-width: calc(var(--space-12) + var(--space-3));
+}
+.pws-share-bar-fill {
+  height: 100%;
+  background: var(--green);
+  border-radius: var(--radius-2xs);
+}
+.pws-model-detail {
+  background: var(--raised);
+}
+.pws-model-detail td {
+  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6);
+}
+.pws-model-detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-2) var(--space-6);
+  font-size: var(--text-label);
+}
 @media (max-width: 600px) {
-  .pws-usage-metrics-3 { grid-template-columns: 1fr; }
+  .pws-usage-metrics-3 {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 640px) {
@@ -1165,3 +1235,10 @@
     transform: none;
   }
 }
+
+@container provider-workspace (max-width: 680px) {
+  .pws-detail {
+    padding: var(--space-5) var(--space-4);
+    border-radius: var(--radius-lg);
+  }
+}
diff --git a/gui/src/styles/workspace-orbit.css b/gui/src/styles/workspace-orbit.css
index 3b35de38..d68c2114 100644
--- a/gui/src/styles/workspace-orbit.css
+++ b/gui/src/styles/workspace-orbit.css
@@ -99,7 +99,8 @@
 }
 .ocx-workspace .main-inner {
   max-width: var(--workspace-measure);
-  padding: var(--section-gap) var(--page-gutter) var(--space-16);
+  margin-inline: auto;
+  padding: var(--space-10) var(--page-gutter) var(--space-16);
 }
 .ocx-workspace .main-inner.main-inner--combos {
   min-height: calc(100dvh - var(--workspace-header));

From c2b7b626e2fa0f82a26049cfa250c3d49b02e2b6 Mon Sep 17 00:00:00 2001
From: ocx-test <ocx-test@example.test>
Date: Sun, 4 Oct 2026 07:05:33 +0200
Subject: [PATCH 2/4] style(gui): unify provider surfaces and grouped rows

---
 .../styles/provider-overview-dashboard.css    |  67 +--
 .../styles/provider-workspace-settings.css    | 411 ++++++++++++++----
 2 files changed, 366 insertions(+), 112 deletions(-)

diff --git a/gui/src/styles/provider-overview-dashboard.css b/gui/src/styles/provider-overview-dashboard.css
index e598e840..0e21da08 100644
--- a/gui/src/styles/provider-overview-dashboard.css
+++ b/gui/src/styles/provider-overview-dashboard.css
@@ -3,7 +3,7 @@
 .pws-dashboard {
   display: flex;
   flex-direction: column;
-  gap: var(--space-4);
+  gap: var(--space-6);
   padding: var(--space-1) 0;
   max-width: 100%;
   overflow-x: clip;
@@ -40,9 +40,10 @@
 .pws-dashboard-stats {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  border: 1px solid var(--border);
+  gap: 1px;
+  border: 1px solid var(--border-subtle);
   border-radius: var(--radius-lg);
-  background: var(--surface);
+  background: var(--border-subtle);
   overflow: hidden;
 }
 
@@ -54,13 +55,14 @@
 .pws-dashboard-stat {
   display: flex;
   flex-direction: column;
-  gap: var(--space-0-5);
-  padding: var(--space-2) var(--space-3);
+  gap: var(--space-1);
+  padding: var(--space-4);
   min-width: 0;
+  background: var(--surface-paper);
 }
 
 .pws-dashboard-stat + .pws-dashboard-stat {
-  border-left: 1px solid var(--border-soft);
+  border-left: 0;
 }
 
 .pws-dashboard-stat-count {
@@ -119,22 +121,23 @@
 .pws-dashboard-group {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  border: none;
+  gap: 0;
+  border-top: 1px solid var(--border-subtle);
   background: transparent;
   overflow: visible;
 }
 
 .pws-dashboard-group .pws-dashboard-row {
-  border-radius: var(--card-radius);
-  padding: 12px;
-  border: 1px solid var(--card-border);
-  background: var(--surface);
-  box-shadow: var(--card-shadow);
+  border-radius: 0;
+  padding: var(--space-3) var(--space-2);
+  border: 0;
+  border-bottom: 1px solid var(--border-subtle);
+  background: transparent;
+  box-shadow: none;
 }
 
 .pws-dashboard-group .pws-dashboard-row:last-child {
-  border-bottom: 1px solid var(--card-border);
+  border-bottom: 1px solid var(--border-subtle);
 }
 
 .pws-dashboard-status {
@@ -145,10 +148,18 @@
   white-space: nowrap;
 }
 
-.pws-dashboard-status--ready { color: var(--muted); }
-.pws-dashboard-status--warn { color: var(--amber); }
-.pws-dashboard-status--cool { color: var(--amber); }
-.pws-dashboard-status--off { color: var(--faint); }
+.pws-dashboard-status--ready {
+  color: var(--muted);
+}
+.pws-dashboard-status--warn {
+  color: var(--amber);
+}
+.pws-dashboard-status--cool {
+  color: var(--amber);
+}
+.pws-dashboard-status--off {
+  color: var(--faint);
+}
 
 .pws-dashboard-row--attention {
   border-color: color-mix(in srgb, var(--amber) 40%, var(--border));
@@ -175,7 +186,8 @@
 .pws-dashboard-rows {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 0;
+  border-top: 1px solid var(--border-subtle);
 }
 
 .pws-dashboard-row {
@@ -183,11 +195,12 @@
   grid-template-columns: var(--icon-lg) minmax(0, 1fr) auto auto;
   align-items: center;
   gap: var(--space-2);
-  padding: 12px;
-  border-radius: var(--card-radius);
-  border: 1px solid var(--card-border);
-  background: var(--surface);
-  box-shadow: var(--card-shadow);
+  padding: var(--space-3) var(--space-2);
+  border-radius: 0;
+  border: 0;
+  border-bottom: 1px solid var(--border-subtle);
+  background: transparent;
+  box-shadow: none;
   width: 100%;
   color: inherit;
   font: inherit;
@@ -223,9 +236,9 @@
 }
 
 .pws-dashboard-row:hover {
-  background: var(--raised);
-  border-color: var(--border);
-  box-shadow: var(--card-shadow-raised);
+  background: var(--surface-raised);
+  border-color: var(--border-subtle);
+  box-shadow: none;
 }
 
 .pws-dashboard-row:active {
diff --git a/gui/src/styles/provider-workspace-settings.css b/gui/src/styles/provider-workspace-settings.css
index 397e1cba..170e5372 100644
--- a/gui/src/styles/provider-workspace-settings.css
+++ b/gui/src/styles/provider-workspace-settings.css
@@ -2,100 +2,288 @@
 
 /* ── ProviderAuthPanel ─────────────────────────────────────── */
 
-.pwi-auth-section { display: flex; flex-direction: column; gap: var(--space-3); }
-.pwi-auth-body { display: flex; flex-direction: column; gap: calc(var(--space-2) + var(--space-0-5)); }
+.pwi-auth-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+.pwi-auth-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
 
-.pwi-auth-status-row { display: flex; align-items: center; gap: var(--space-2); }
+.pwi-auth-status-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
 .pwi-auth-dot {
-  width: var(--space-2); height: var(--space-2); border-radius: var(--radius-round); flex-shrink: 0;
+  width: var(--space-2);
+  height: var(--space-2);
+  border-radius: var(--radius-round);
+  flex-shrink: 0;
+  background: var(--muted);
+}
+.pwi-auth-dot--ok {
+  background: var(--green);
+}
+.pwi-auth-dot--off {
   background: var(--muted);
 }
-.pwi-auth-dot--ok   { background: var(--green); }
-.pwi-auth-dot--off  { background: var(--muted); }
-.pwi-auth-dot--warn { background: var(--amber); }
-.pwi-auth-status-text { font-size: var(--text-control); color: var(--text); }
+.pwi-auth-dot--warn {
+  background: var(--amber);
+}
+.pwi-auth-status-text {
+  font-size: var(--text-control);
+  color: var(--text);
+}
 
 .pwi-auth-state {
-  display: flex; align-items: center; gap: var(--space-2);
-  min-height: calc(var(--space-8) + var(--space-1)); padding: var(--space-2) calc(var(--space-2) + var(--space-0-5));
-  font-size: var(--text-label); color: var(--muted);
-  background: var(--raised); border-radius: var(--radius-xs);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: var(--control-touch);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-label);
+  color: var(--text-secondary);
+  background: var(--surface-paper);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+}
+.pwi-auth-state--error {
+  color: var(--red);
+  background: color-mix(in srgb, var(--red) 7%, var(--surface-paper));
+  border-color: color-mix(in srgb, var(--red) 25%, var(--border-subtle));
+  justify-content: space-between;
+}
+.pwi-auth-state--empty {
+  justify-content: center;
 }
-.pwi-auth-state--error { color: var(--red); background: var(--red-soft); justify-content: space-between; }
-.pwi-auth-state--empty { justify-content: center; }
 
-.pwi-auth-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
+.pwi-auth-actions {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
 
-.pwi-auth-wait { display: flex; flex-direction: column; gap: var(--space-1-5); }
-.pwi-auth-wait-title { font-size: var(--text-control); font-weight: var(--weight-semibold); color: var(--text); }
-.pwi-auth-wait-copy  { font-size: var(--text-label); color: var(--muted); line-height: 1.45; }
-.pwi-device-code-wrap { display: flex; align-items: center; gap: calc(var(--space-2) + var(--space-0-5)); flex-wrap: wrap; padding: var(--space-3); margin: var(--space-1-5) 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
-.pwi-device-code { font-size: var(--text-title); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); color: var(--text); user-select: all; }
-.pwi-auth-row-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-0-5); }
-.pwi-auth-row-secondary { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-label); color: var(--muted); }
+.pwi-auth-wait {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1-5);
+}
+.pwi-auth-wait-title {
+  font-size: var(--text-control);
+  font-weight: var(--weight-semibold);
+  color: var(--text);
+}
+.pwi-auth-wait-copy {
+  font-size: var(--text-label);
+  color: var(--muted);
+  line-height: 1.45;
+}
+.pwi-device-code-wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  padding: var(--space-4);
+  margin: var(--space-2) 0;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--surface-paper);
+}
+.pwi-device-code {
+  font-size: var(--text-title);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-wide);
+  color: var(--text);
+  user-select: all;
+}
+.pwi-auth-row-copy {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-0-5);
+}
+.pwi-auth-row-secondary {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--text-label);
+  color: var(--muted);
+}
 
-.pwi-auth-list { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
+.pwi-auth-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-top: 1px solid var(--border-subtle);
+}
 .pwi-auth-row {
-  display: flex; align-items: center; gap: var(--space-2);
-  padding: var(--space-1-5) var(--space-2); border-radius: var(--radius-xs);
-  transition: background var(--motion-fast);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: var(--control-touch);
+  padding: var(--space-3) var(--space-2);
+  border-bottom: 1px solid var(--border-subtle);
+  border-radius: 0;
+  transition: background var(--motion-fast) var(--ease-out);
+}
+.pwi-auth-row:hover {
+  background: var(--surface-raised);
+}
+.pwi-auth-row--active {
+  background: var(--surface-raised);
+  box-shadow: inset 2px 0 0 var(--text-primary);
 }
-.pwi-auth-row:hover { background: var(--hover); }
-.pwi-auth-row--active { background: var(--accent-soft); }
 
 /* One account entry: the row itself plus (optionally) that account's own rate-limit bars. */
-.pwi-auth-acct { display: flex; flex-direction: column; gap: var(--space-0-5); border-radius: var(--radius-xs); }
-.pwi-auth-acct--active { background: var(--accent-soft); }
-.pwi-auth-acct--active .pwi-auth-row--active { background: none; }
-.pwi-auth-acct-quota { padding: 0 var(--space-2) var(--space-2) calc(var(--space-6) + var(--space-0-5)); }
-.pwi-auth-acct-quota-stale { margin: var(--space-1) 0 0; font-size: var(--text-caption); }
-.pwi-auth-row-main  {
-  appearance: none; flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2);
-  padding: var(--space-0-5); border: 0; background: transparent; color: inherit; text-align: left;
-  cursor: pointer; border-radius: var(--radius-2xs);
-}
-.pwi-auth-row-main:disabled { cursor: default; opacity: 0.72; }
+.pwi-auth-acct {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.pwi-auth-acct--active {
+  background: var(--surface-raised);
+}
+.pwi-auth-acct--active .pwi-auth-row--active {
+  background: transparent;
+}
+.pwi-auth-acct-quota {
+  padding: 0 var(--space-2) var(--space-2)
+    calc(var(--space-6) + var(--space-0-5));
+}
+.pwi-auth-acct-quota-stale {
+  margin: var(--space-1) 0 0;
+  font-size: var(--text-caption);
+}
+.pwi-auth-row-main {
+  appearance: none;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-0-5);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--radius-2xs);
+}
+.pwi-auth-row-main:disabled {
+  cursor: default;
+  opacity: 0.72;
+}
 .pwi-auth-row-main:focus-visible,
-.pwi-auth-row-remove:focus-visible { outline: var(--space-0-5) solid var(--accent-ring); outline-offset: var(--space-0-5); }
-.pwi-auth-row-label  { font-size: var(--text-control); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pwi-auth-row-remove:focus-visible {
+  outline: var(--space-0-5) solid var(--accent-ring);
+  outline-offset: var(--space-0-5);
+}
+.pwi-auth-row-label {
+  font-size: var(--text-control);
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .pwi-auth-row-remove {
-  background: none; border: none; cursor: pointer; padding: var(--space-0-5);
-  color: var(--muted); border-radius: var(--radius-2xs);
-  transition: color var(--motion-fast), background var(--motion-fast);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--space-0-5);
+  color: var(--muted);
+  border-radius: var(--radius-2xs);
+  transition:
+    color var(--motion-fast),
+    background var(--motion-fast);
+}
+.pwi-auth-row-remove:hover {
+  color: var(--red);
+  background: var(--red-soft);
 }
-.pwi-auth-row-remove:hover { color: var(--red); background: var(--red-soft); }
 
 .pwi-auth-add-key {
-  font-size: var(--text-label); color: var(--accent); background: none; border: none;
-  cursor: pointer; padding: var(--space-1) 0; text-align: left;
+  font-size: var(--text-label);
+  color: var(--accent);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--space-1) 0;
+  text-align: left;
+}
+.pwi-auth-add-key:hover {
+  text-decoration: underline;
+}
+.pwi-auth-add {
+  margin-top: var(--space-2);
 }
-.pwi-auth-add-key:hover { text-decoration: underline; }
-.pwi-auth-add { margin-top: var(--space-2); }
-
-.pwi-auth-hint { margin: 0; }
 
-.pwi-auth-row .badge { gap: var(--space-1); }
+.pwi-auth-hint {
+  margin: 0;
+}
 
+.pwi-auth-row .badge {
+  gap: var(--space-1);
+}
 
 /* ── ProviderSettings ──────────────────────────────────────── */
 
-.pwi-settings-form { display: flex; flex-direction: column; gap: calc(var(--space-3) + var(--space-0-5)); position: relative; }
+.pwi-settings-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  position: relative;
+}
 
-.pwi-settings-field { display: flex; flex-direction: column; gap: var(--space-1); }
+.pwi-settings-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
 .pwi-settings-label {
-  font-size: var(--text-label); font-weight: 500; color: var(--muted);
+  font-size: var(--text-label);
+  font-weight: 500;
+  color: var(--muted);
   letter-spacing: 0.01em;
 }
 .pwi-settings-textarea {
-  width: 100%; min-height: calc(var(--space-12) + var(--space-3)); padding: var(--space-2) calc(var(--space-2) + var(--space-0-5));
-  font: inherit; font-size: var(--text-control); color: var(--text);
-  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs);
-  resize: vertical; transition: border-color var(--motion-fast);
+  width: 100%;
+  min-height: calc(var(--space-12) + var(--space-3));
+  padding: var(--space-3);
+  font: inherit;
+  font-size: var(--text-control);
+  color: var(--text);
+  background: var(--surface-paper);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  resize: vertical;
+  transition:
+    border-color var(--motion-fast),
+    box-shadow var(--motion-fast);
+}
+.pwi-settings-textarea:focus {
+  border-color: var(--accent-ring);
+  outline: none;
+}
+.pwi-settings-hint {
+  font-size: var(--text-caption);
+  color: var(--muted);
+  line-height: 1.4;
 }
-.pwi-settings-textarea:focus { border-color: var(--accent-ring); outline: none; }
-.pwi-settings-hint { font-size: var(--text-caption); color: var(--muted); line-height: 1.4; }
 
-.pwi-fallback-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-1-5); }
+.pwi-fallback-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin-top: var(--space-1-5);
+}
 .pwi-fallback-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
@@ -104,50 +292,99 @@
 }
 
 .pwi-settings-sticky-bar {
-  position: sticky; bottom: 0; z-index: 2;
-  display: flex; align-items: center; gap: var(--space-2);
-  padding: calc(var(--space-2) + var(--space-0-5)) 0; background: var(--bg);
-  border-top: 1px solid var(--border-soft);
+  position: sticky;
+  bottom: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) 0;
+  background: var(--surface-paper);
+  border-top: 1px solid var(--border-subtle);
+}
+.pwi-settings-sticky-bar-actions {
+  display: flex;
+  gap: var(--space-2);
+  margin-left: auto;
 }
-.pwi-settings-sticky-bar-actions { display: flex; gap: var(--space-2); margin-left: auto; }
 
 .pwi-settings-msg {
-  font-size: var(--text-label); padding: var(--space-1-5) calc(var(--space-2) + var(--space-0-5)); border-radius: var(--radius-xs);
+  font-size: var(--text-label);
+  padding: var(--space-1-5) calc(var(--space-2) + var(--space-0-5));
+  border-radius: var(--radius-xs);
   line-height: 1.4;
 }
-.pwi-settings-msg--ok  { background: var(--green-soft); color: var(--green); }
-.pwi-settings-msg--err { background: var(--red-soft); color: var(--red); }
+.pwi-settings-msg--ok {
+  background: var(--green-soft);
+  color: var(--green);
+}
+.pwi-settings-msg--err {
+  background: var(--red-soft);
+  color: var(--red);
+}
 
-.pwi-settings-dirty { font-size: var(--text-caption); color: var(--amber); }
+.pwi-settings-dirty {
+  font-size: var(--text-caption);
+  color: var(--amber);
+}
 
 /* ── ProviderJsonEditor ────────────────────────────────────── */
 
-.pwi-json-panel { display: flex; flex-direction: column; gap: var(--space-2); }
+.pwi-json-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
 .pwi-json-panel-header {
-  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
 }
 .pwi-json-panel-title {
-  font-size: var(--text-control); font-weight: var(--weight-semibold); color: var(--text);
+  font-size: var(--text-control);
+  font-weight: var(--weight-semibold);
+  color: var(--text);
+}
+.pwi-json-panel-actions {
+  display: flex;
+  gap: var(--space-1-5);
 }
-.pwi-json-panel-actions { display: flex; gap: var(--space-1-5); }
 .pwi-json-panel-desc {
-  font-size: var(--text-caption); color: var(--muted); line-height: 1.4;
+  font-size: var(--text-caption);
+  color: var(--muted);
+  line-height: 1.4;
 }
 .pwi-json-textarea {
-  width: 100%; min-height: calc(var(--space-16) * 2 + var(--space-12) + var(--space-1)); padding: calc(var(--space-2) + var(--space-0-5)) var(--space-3);
-  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, monospace;
-  font-size: var(--text-label); line-height: 1.5; tab-size: 2;
-  color: var(--text); background: var(--raised); border: 1px solid var(--border);
-  border-radius: var(--radius-xs); resize: vertical;
+  width: 100%;
+  min-height: calc(var(--space-16) * 2 + var(--space-12) + var(--space-1));
+  padding: var(--space-3);
+  font-family: var(--font-code);
+  font-size: var(--text-label);
+  line-height: 1.55;
+  tab-size: 2;
+  color: var(--text);
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  resize: vertical;
   transition: border-color var(--motion-fast);
 }
-.pwi-json-textarea:focus { border-color: var(--accent-ring); outline: none; }
+.pwi-json-textarea:focus {
+  border-color: var(--accent-ring);
+  outline: none;
+}
 
 /* ── ProviderDialogs (only if absent globally) ─────────────── */
 
 .dialog-backdrop {
-  position: fixed; inset: 0; z-index: 900;
-  background: color-mix(in srgb, var(--text) 45%, transparent); display: flex; align-items: center; justify-content: center;
+  position: fixed;
+  inset: 0;
+  z-index: 900;
+  background: color-mix(in srgb, var(--text) 45%, transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .dialog {
   background: var(--surface);
@@ -164,4 +401,8 @@
   gap: var(--space-4);
   animation: ocx-modal-spring var(--motion-slow) var(--ease-spring) both;
 }
-.dialog-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
+.dialog-actions {
+  display: flex;
+  gap: var(--space-2);
+  justify-content: flex-end;
+}

From f523a21ebf555963f599e32f41c36d5df5779a41 Mon Sep 17 00:00:00 2001
From: ocx-test <ocx-test@example.test>
Date: Sun, 4 Oct 2026 07:07:03 +0200
Subject: [PATCH 3/4] style(gui): redesign model catalog and inspector

---
 gui/src/styles-models-workspace.css | 14 ++++--
 gui/src/styles/model-catalog.css    | 76 ++++++++++++++---------------
 2 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/gui/src/styles-models-workspace.css b/gui/src/styles-models-workspace.css
index 83e37223..7d716569 100644
--- a/gui/src/styles-models-workspace.css
+++ b/gui/src/styles-models-workspace.css
@@ -6,7 +6,7 @@
    ============================================================================ */
 
 .main-inner:has(.models-workspace-shell) {
-  max-width: 1200px;
+  max-width: var(--workspace-measure);
 }
 
 .models-workspace-shell {
@@ -30,7 +30,7 @@
 .models-workspace-main {
   display: flex;
   flex-direction: column;
-  gap: var(--space-3);
+  gap: var(--space-5);
   min-width: 0;
 }
 
@@ -141,16 +141,22 @@
 .models-provider-list {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
+  gap: 0;
+  border-top: 1px solid var(--border-subtle);
 }
 
 .models-provider-card {
   margin-bottom: 0;
   overflow: hidden;
+  border: 0;
+  border-bottom: 1px solid var(--border-subtle);
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
 }
 
 .models-provider-body {
-  padding: var(--space-3) var(--space-4);
+  padding: 0 0 var(--space-4);
 }
 
 .models-provider-body > .input {
diff --git a/gui/src/styles/model-catalog.css b/gui/src/styles/model-catalog.css
index 52db0def..5b60fa51 100644
--- a/gui/src/styles/model-catalog.css
+++ b/gui/src/styles/model-catalog.css
@@ -1,6 +1,6 @@
 .models-workspace-root {
-  grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 400px);
-  gap: 32px;
+  grid-template-columns: minmax(0, 1fr) clamp(340px, 25vw, 420px);
+  gap: var(--space-8);
   align-items: start;
   min-height: max(400px, calc(100dvh - 330px));
 }
@@ -36,8 +36,12 @@
 .models-catalog-toolbar {
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin: 24px 0 20px;
+  gap: var(--space-3);
+  margin: var(--space-6) 0 var(--space-4);
+  padding: var(--space-3);
+  background: var(--surface-paper);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
 }
 .models-search-field {
   flex: 1;
@@ -66,11 +70,11 @@
 .models-catalog-columns {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 140px 84px 88px;
-  gap: 12px;
+  gap: var(--space-3);
   color: var(--muted);
   font-size: var(--text-caption);
-  padding: 0 12px 12px;
-  border-bottom: 1px solid var(--border-soft);
+  padding: 0 var(--space-3) var(--space-2);
+  border-bottom: 1px solid var(--border-subtle);
 }
 .models-catalog-columns > :last-child {
   text-align: right;
@@ -79,14 +83,14 @@
   gap: 0;
 }
 .models-provider-list {
-  gap: 12px;
+  gap: 0;
 }
 .models-provider-card {
   overflow: visible;
 }
 .models-provider-card .models-provider-head {
-  min-height: 48px;
-  padding: 0 10px;
+  min-height: var(--control-touch);
+  padding: var(--space-2) var(--space-2);
   border: 0;
   background: transparent;
   align-items: center;
@@ -135,13 +139,14 @@
   display: flex;
   align-items: center;
   position: relative;
-  gap: 16px;
-  padding: 0 12px 0 0;
-  border-radius: 6px;
+  gap: var(--space-4);
+  padding: 0 var(--space-3) 0 0;
+  border-bottom: 1px solid var(--border-subtle);
+  border-radius: 0;
   min-height: 56px;
 }
 .models-catalog-row + .models-catalog-row {
-  margin-top: 2px;
+  margin-top: 0;
 }
 @media (hover: hover) and (pointer: fine) {
   .models-catalog-row:hover {
@@ -149,17 +154,11 @@
   }
 }
 .models-catalog-row.is-selected {
-  background: var(--raised);
+  background: var(--surface-raised);
+  box-shadow: inset 2px 0 0 var(--text-primary);
 }
 .models-catalog-row.is-selected::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 12px;
-  bottom: 12px;
-  width: 2px;
-  background: var(--text);
-  border-radius: 2px;
+  content: none;
 }
 .models-workspace-shell .switch {
   position: relative;
@@ -257,23 +256,24 @@
 }
 .model-inspector {
   position: sticky;
-  top: calc(var(--workspace-header) + 24px);
+  top: calc(var(--workspace-header) + var(--space-6));
   align-self: start;
   min-width: 0;
-  border-radius: 0;
-  border-left: 1px solid var(--border-soft);
-  background: transparent;
-  padding: 0 0 24px 28px;
+  padding: var(--space-6);
+  background: var(--surface-paper);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: none;
 }
 .model-inspector-empty {
   min-height: 220px;
 }
 .model-inspector h3 {
   margin: 0;
-  font-size: 24px;
-  font-weight: 650;
-  line-height: 1.35;
-  letter-spacing: -0.025em;
+  font-size: clamp(1.45rem, 2vw, 1.9rem);
+  font-weight: var(--weight-semibold);
+  line-height: 1.08;
+  letter-spacing: -0.03em;
   overflow-wrap: anywhere;
 }
 .model-inspector-empty p,
@@ -343,10 +343,10 @@
 .model-inspector-identifier {
   position: relative;
   overflow: hidden;
-  background: var(--rail);
-  border: 1px solid var(--border-soft);
-  border-radius: 8px;
-  padding: 4px 12px 12px;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--space-2) var(--space-3) var(--space-3);
 }
 .model-inspector-identifier::after {
   content: "";
@@ -408,8 +408,8 @@
   color: var(--red);
 }
 .models-advanced {
-  border-top: 1px solid var(--border-soft);
-  margin-top: 24px;
+  border-top: 1px solid var(--border-subtle);
+  margin-top: var(--space-6);
 }
 .models-advanced
   > [data-slot="accordion-item"]

From a472fd36159b8119f110991a1c80246ffcca2190 Mon Sep 17 00:00:00 2001
From: ocx-test <ocx-test@example.test>
Date: Sun, 4 Oct 2026 07:09:04 +0200
Subject: [PATCH 4/4] style(gui): unify logs and traffic observability surfaces

---
 gui/src/styles/pages-observe.css | 39 ++++++++++++++++++++++++++++----
 gui/src/styles/traffic-rail.css  | 33 ++++++++++++++++++---------
 2 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/gui/src/styles/pages-observe.css b/gui/src/styles/pages-observe.css
index 86d8b8a5..d0647131 100644
--- a/gui/src/styles/pages-observe.css
+++ b/gui/src/styles/pages-observe.css
@@ -143,9 +143,13 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
+  gap: var(--space-2);
+  margin-bottom: var(--space-4);
+  padding: var(--space-3);
   font-family: var(--font-ui);
+  background: var(--surface-paper);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
 }
 
 .verkeer-filters .usage-segmented {
@@ -175,6 +179,7 @@
 
 .verkeer-disclosure {
   margin-top: var(--section-gap);
+  border-top: 1px solid var(--border-subtle);
 }
 
 .verkeer-disclosure .ocx-group-body {
@@ -207,6 +212,10 @@
    --------------------------------------------------------------------------- */
 .logs-page .logs-toolbar {
   font-family: var(--font-ui);
+  padding: var(--space-3);
+  background: var(--surface-paper);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
 }
 
 .logs-page .tbl tbody tr {
@@ -214,11 +223,33 @@
 }
 
 .logs-page .tbl tbody tr:hover td {
-  background: var(--hover);
+  background: var(--surface-raised);
 }
 
 .logs-page .tbl tbody tr:active td {
-  background: var(--raised);
+  background: var(--surface-raised);
+}
+
+.verkeer-page .tbl-wrap,
+.logs-page .logs-table-wrap {
+  background: var(--surface-paper);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  overflow: auto;
+}
+
+.verkeer-page .tbl,
+.logs-page .logs-table {
+  margin: 0;
+}
+
+.verkeer-page .tbl tbody td,
+.logs-page .tbl tbody td {
+  border-bottom-color: var(--border-subtle);
+}
+
+.logs-page .logs-table-wrap {
+  margin-top: var(--space-4);
 }
 
 /* ---------------------------------------------------------------------------
diff --git a/gui/src/styles/traffic-rail.css b/gui/src/styles/traffic-rail.css
index e99897cb..7da0e47a 100644
--- a/gui/src/styles/traffic-rail.css
+++ b/gui/src/styles/traffic-rail.css
@@ -1,26 +1,33 @@
+.verkeer-page .rail {
+  overflow: hidden;
+  background: var(--surface-paper);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+}
+
 /* Verkeer request rail — column grid (Signaal v2/v3 tokens) */
 .traffic-entry {
-  border-bottom: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border-subtle);
 }
 .traffic-entry-head {
   display: grid;
-  grid-template-columns: 7.5ch minmax(10rem, 1.6fr) minmax(
-      5rem,
-      0.8fr
-    ) auto auto auto;
+  grid-template-columns:
+    7.5ch minmax(10rem, 1.6fr) minmax(5rem, 0.8fr)
+    auto auto auto;
   gap: var(--space-2) var(--space-3);
   align-items: baseline;
-  padding: var(--space-2);
+  min-height: var(--control-touch);
+  padding: var(--space-3) var(--space-2);
   font-family: var(--font-ui);
   font-size: var(--text-caption);
   color: var(--text);
-  border-radius: var(--radius-xs);
+  border-radius: 0;
 }
 .traffic-entry-head:hover {
-  background: var(--hover);
+  background: var(--surface-raised);
 }
 .traffic-entry-head:active {
-  background: var(--raised);
+  background: var(--surface-raised);
   transform: scale(0.995);
 }
 .traffic-entry-head--button {
@@ -52,12 +59,16 @@
   font-variant-numeric: tabular-nums;
 }
 .traffic-detail {
-  padding: 0 var(--space-2) var(--space-3);
+  margin: 0 var(--space-2) var(--space-3);
+  padding: var(--space-3);
   color: var(--muted);
   font-family: var(--font-code);
   font-size: var(--text-caption);
   display: grid;
   gap: var(--space-1);
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
 }
 .traffic-status {
   justify-self: end;
@@ -82,7 +93,7 @@
 }
 .traffic-entry--head {
   color: var(--muted);
-  border-bottom: 1px solid var(--border-soft);
+  border-bottom: 1px solid var(--border-subtle);
 }
 .traffic-entry--head .traffic-entry-head {
   font-family: var(--font-ui);