Add performance HUD panel

apps/viewer/src/style.css

@@ -37,6 +37,16 @@ canvas {
   pointer-events: none;
 }
 
+.left-panel-stack {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: min(360px, calc(100vw - 40px));
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
 .marquee-box {
   position: absolute;
   display: none;
@@ -48,8 +58,8 @@ canvas {
 .topbar,
 .details-panel,
 .network-panel,
+.performance-panel,
 .faction-strip {
-  position: absolute;
   backdrop-filter: blur(18px);
   background: var(--panel);
   border: 1px solid var(--panel-border);
@@ -57,9 +67,6 @@ canvas {
 }
 
 .topbar {
-  top: 20px;
-  left: 20px;
-  width: min(360px, calc(100vw - 40px));
   border-radius: 22px;
   padding: 18px 20px;
   pointer-events: auto;
@@ -103,6 +110,7 @@ canvas {
 }
 
 .details-panel {
+  position: absolute;
   top: 110px;
   right: 20px;
   width: min(380px, calc(100vw - 40px));
@@ -115,8 +123,13 @@ canvas {
 }
 
 .network-panel {
-  top: 172px;
-  left: 20px;
+  border-radius: 24px;
+  padding: 18px;
+  color: var(--text);
+  pointer-events: auto;
+}
+
+.performance-panel {
   width: min(360px, calc(100vw - 40px));
   border-radius: 24px;
   padding: 18px;
@@ -131,7 +144,8 @@ canvas {
   text-transform: uppercase;
 }
 
-.network-panel h2 {
+.network-panel h2,
+.performance-panel h2 {
   margin: 0;
   color: var(--accent);
   letter-spacing: 0.16em;
@@ -139,7 +153,8 @@ canvas {
   text-transform: uppercase;
 }
 
-.network-body {
+.network-body,
+.performance-body {
   margin-top: 14px;
   color: var(--muted);
   font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
@@ -178,6 +193,7 @@ canvas {
 }
 
 .faction-strip {
+  position: absolute;
   left: 20px;
   bottom: 20px;
   width: min(920px, calc(100vw - 440px));
@@ -222,9 +238,9 @@ canvas {
 }
 
 @media (max-width: 760px) {
-  .topbar {
-    width: auto;
+  .left-panel-stack {
     right: 20px;
+    width: auto;
   }
 
   .details-panel {
@@ -238,9 +254,10 @@ canvas {
   }
 
   .network-panel {
-    top: 172px;
-    right: 20px;
-    left: 20px;
+    width: auto;
+  }
+
+  .performance-panel {
     width: auto;
   }