Refine viewer system focus and HUD panels

apps/viewer/src/style.css

@@ -47,6 +47,16 @@ canvas {
   gap: 16px;
 }
 
+.right-panel-stack {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: min(380px, calc(100vw - 40px));
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
 .marquee-box {
   position: absolute;
   display: none;
@@ -56,7 +66,7 @@ canvas {
 }
 
 .topbar,
-.details-panel,
+.info-panel,
 .network-panel,
 .performance-panel,
 .faction-strip {
@@ -82,8 +92,8 @@ canvas {
 
 .topbar h1,
 .topbar h2,
-.details-panel h2,
-.details-panel h3,
+.info-panel h2,
+.info-panel h3,
 .faction-card h3 {
   margin: 0;
 }
@@ -109,12 +119,7 @@ canvas {
   white-space: pre-wrap;
 }
 
-.details-panel {
-  position: absolute;
-  top: 110px;
-  right: 20px;
-  width: min(380px, calc(100vw - 40px));
-  bottom: 20px;
+.info-panel {
   border-radius: 24px;
   padding: 18px;
   color: var(--text);
@@ -137,7 +142,7 @@ canvas {
   pointer-events: auto;
 }
 
-.details-panel h2 {
+.info-panel h2 {
   color: var(--accent);
   letter-spacing: 0.16em;
   font-size: 0.72rem;
@@ -168,12 +173,19 @@ canvas {
   font-size: 1.05rem;
 }
 
+.system-title {
+  margin-top: 12px;
+  font-size: 1.05rem;
+}
+
+.system-body,
 .detail-body {
   margin-top: 12px;
   color: var(--muted);
   line-height: 1.55;
 }
 
+.system-body p,
 .detail-body p {
   margin: 0 0 12px;
 }
@@ -185,11 +197,27 @@ canvas {
 }
 
 .error-strip {
-  margin-top: 14px;
-  padding: 12px 14px;
   border-radius: 14px;
+  padding: 12px 14px;
   background: rgba(255, 116, 88, 0.14);
   color: #ffd8cf;
+  pointer-events: auto;
+}
+
+.right-panel-stack .error-strip {
+  margin-top: -4px;
+}
+
+.system-panel-section[hidden] {
+  display: none;
+}
+
+.detail-panel-section[hidden] {
+  display: none;
+}
+
+.error-strip[hidden] {
+  display: none;
 }
 
 .faction-strip {
@@ -243,14 +271,25 @@ canvas {
     width: auto;
   }
 
-  .details-panel {
-    position: absolute;
-    top: auto;
+  .right-panel-stack {
     left: 20px;
     right: 20px;
-    bottom: 148px;
+    top: auto;
     width: auto;
+    bottom: 148px;
     max-height: 38vh;
+    overflow: auto;
+  }
+
+  .info-panel {
+    max-height: none;
+    overflow: visible;
+  }
+
+  .system-panel-section,
+  .detail-panel-section,
+  .error-strip {
+    width: auto;
   }
 
   .network-panel {