style: match albedo panel composition

src/styles.css

@@ -89,62 +89,56 @@ button:hover:not(:disabled) {
 }
 .app-shell {
   min-height: 100vh;
-  background: linear-gradient(
+  background: var(--ed-bg);
-    135deg,
-    var(--ed-bg),
-    color-mix(in srgb, var(--ed-bg) 90%, var(--ed-accent))
-  );
 }
 .app-bar {
-  height: 54px;
+  height: 42px;
   display: flex;
   align-items: center;
-  gap: 24px;
+  gap: 28px;
-  padding: 0 18px;
+  padding: 0 16px;
   border-bottom: 1px solid var(--ui-divider);
-  background: var(--ed-panel);
+  background: var(--ed-bg);
 }
 .brand {
   display: flex;
   align-items: center;
   gap: 9px;
-  min-width: 170px;
+  min-width: 188px;
-  font: 600 18px var(--font-display);
+  color: var(--ed-accent);
-  letter-spacing: 0.12em;
+  font: 600 15px var(--font-data);
+  letter-spacing: 0.22em;
 }
 .brand-mark {
-  display: grid;
+  color: var(--ed-accent);
-  place-items: center;
+  font-size: 16px;
-  width: 26px;
-  height: 26px;
-  color: var(--ed-bg);
-  background: var(--ed-accent);
-  font-weight: 700;
 }
 .top-nav {
   display: flex;
   align-self: stretch;
-  gap: 4px;
+  gap: 24px;
 }
 .nav-item {
   position: relative;
-  padding: 0 14px;
+  padding: 0;
   border: 0;
   border-radius: 0;
   color: var(--ed-dim);
   background: transparent;
-  font: 600 13px var(--font-display);
+  font: 10px var(--font-data);
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
 }
 .nav-item:hover,
 .nav-item.active {
   color: var(--ed-fg);
-  background: var(--ui-surface);
+  background: transparent;
 }
 .nav-item.active::after {
   position: absolute;
-  right: 10px;
+  right: 0;
   bottom: 0;
-  left: 10px;
+  left: 0;
   height: 2px;
   background: var(--ed-accent);
   content: '';
@@ -176,8 +170,9 @@ button:hover:not(:disabled) {
 }
 .workspace {
   display: grid;
-  grid-template-columns: 220px 1fr;
+  grid-template-columns: 214px 1fr;
-  min-height: calc(100vh - 54px);
+  min-height: calc(100vh - 42px);
+  border-top: 1px solid var(--ui-divider);
 }
 .side-panel {
   border-right: 1px solid var(--ui-divider);
@@ -187,12 +182,13 @@ button:hover:not(:disabled) {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 34px;
+  min-height: 32px;
   padding: 0 10px;
   border-bottom: 1px solid var(--ui-divider);
   color: var(--ed-fg);
-  font: 600 13px var(--font-display);
+  font: 10px var(--font-data);
-  letter-spacing: 0.04em;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
 }
 .panel-kicker,
 .micro {
@@ -202,7 +198,7 @@ button:hover:not(:disabled) {
 }
 .server-card,
 .side-section {
-  padding: 16px 12px;
+  padding: 12px 10px;
   border-bottom: 1px solid var(--ui-divider);
 }
 .server-status {
@@ -260,7 +256,7 @@ label {
 }
 .content-area {
   min-width: 0;
-  padding: 16px;
+  padding: 8px;
 }
 .content-heading {
   display: flex;
@@ -269,21 +265,24 @@ label {
   margin-bottom: 12px;
 }
 .content-heading h1 {
-  margin: 4px 0 0;
+  margin: 3px 0 0;
-  font: 600 24px var(--font-display);
+  color: var(--ed-fg);
+  font: 600 18px var(--font-display);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 .dashboard-grid {
   display: grid;
-  grid-template-columns: 1.25fr 1fr 1fr;
+  grid-template-columns: 1.3fr 1fr 1fr;
-  grid-template-rows: minmax(280px, 1fr) 180px;
+  grid-template-rows: minmax(250px, 1fr) 190px;
-  gap: 10px;
+  gap: 7px;
-  min-height: calc(100vh - 110px);
+  min-height: calc(100vh - 96px);
 }
 .panel {
   min-width: 0;
   border: 1px solid var(--ui-line-soft);
   border-radius: var(--panel-radius);
-  background: var(--ed-panel);
+  background: var(--ed-bg);
 }
 .preview-panel {
   grid-column: span 2;
@@ -296,11 +295,7 @@ label {
   place-content: center;
   min-height: 220px;
   border-bottom: 1px solid var(--ui-divider);
-  background: radial-gradient(
+  background: color-mix(in srgb, var(--ed-accent) 3%, var(--ed-bg));
-    circle,
-    color-mix(in srgb, var(--ed-accent) 10%, var(--ed-panel)),
-    var(--ed-bg) 70%
-  );
   text-align: center;
 }
 .offline-mark {