Refine viewer status panel layout

apps/viewer/src/style.css

@@ -51,13 +51,9 @@ canvas {
 .topbar {
   top: 20px;
   left: 20px;
-  right: 20px;
+  width: min(360px, calc(100vw - 40px));
   border-radius: 22px;
   padding: 18px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 20px;
   pointer-events: auto;
 }
 
@@ -70,41 +66,32 @@ canvas {
 }
 
 .topbar h1,
+.topbar h2,
 .details-panel h2,
 .details-panel h3,
 .faction-card h3 {
   margin: 0;
 }
 
-.topbar h1 {
-  font-size: 1.2rem;
+.topbar {
+  display: block;
+  align-items: start;
 }
 
-.topbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+.topbar h2 {
+  color: var(--accent);
+  letter-spacing: 0.16em;
+  font-size: 0.72rem;
+  text-transform: uppercase;
 }
 
-.status-pill,
-.reset-button {
-  border-radius: 999px;
-  border: 1px solid rgba(127, 214, 255, 0.18);
-  background: rgba(12, 25, 46, 0.92);
-  color: var(--text);
-  padding: 11px 16px;
-  font: inherit;
-}
-
-.reset-button {
-  cursor: pointer;
-  pointer-events: auto;
-  transition: transform 120ms ease, border-color 120ms ease;
-}
-
-.reset-button:hover {
-  transform: translateY(-1px);
-  border-color: rgba(127, 214, 255, 0.42);
+.topbar-body {
+  margin-top: 14px;
+  color: var(--muted);
+  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
+  font-size: 0.8rem;
+  line-height: 1.6;
+  white-space: pre-wrap;
 }
 
 .details-panel {
@@ -120,7 +107,7 @@ canvas {
 }
 
 .network-panel {
-  top: 110px;
+  top: 172px;
   left: 20px;
   width: min(360px, calc(100vw - 40px));
   border-radius: 24px;
@@ -228,8 +215,8 @@ canvas {
 
 @media (max-width: 760px) {
   .topbar {
-    flex-direction: column;
-    align-items: flex-start;
+    width: auto;
+    right: 20px;
   }
 
   .details-panel {
@@ -243,7 +230,7 @@ canvas {
   }
 
   .network-panel {
-    top: 110px;
+    top: 172px;
     right: 20px;
     left: 20px;
     width: auto;