Add global admin user-view preview

frontend/app/globals.css

@@ -181,6 +181,107 @@ body {
   align-items: center;
 }
 
+.signed-in-context {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.user-view-toggle {
+  min-height: 34px;
+  padding: 7px 12px;
+  border: 1px solid rgba(126, 215, 255, 0.28);
+  border-radius: 999px;
+  background: rgba(14, 165, 233, 0.08);
+  color: #bfeaff;
+  box-shadow: none;
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.user-view-toggle.is-active {
+  border-color: rgba(251, 191, 36, 0.5);
+  background: rgba(245, 158, 11, 0.13);
+  color: #fde68a;
+}
+
+.user-view-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  margin: 14px 0;
+  padding: 12px 16px;
+  border: 1px solid rgba(251, 191, 36, 0.38);
+  border-radius: 10px;
+  background: linear-gradient(90deg, rgba(245, 158, 11, 0.13), rgba(14, 165, 233, 0.06));
+  color: #f8e7b2;
+}
+
+.user-view-banner > div {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+}
+
+.user-view-banner strong {
+  color: #fde68a;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.user-view-banner span {
+  color: var(--muted);
+}
+
+.user-view-banner button {
+  flex: 0 0 auto;
+  padding: 8px 12px;
+  border-color: rgba(251, 191, 36, 0.32);
+  background: rgba(245, 158, 11, 0.12);
+  color: #fde68a;
+  box-shadow: none;
+}
+
+.signed-in-header span {
+  display: block;
+  margin-top: 4px;
+  color: #fde68a;
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+@media (max-width: 720px) {
+  .signed-in-context {
+    margin-left: auto;
+  }
+
+  .user-view-toggle {
+    min-height: 30px;
+    padding: 5px 9px;
+    font-size: 0.64rem;
+  }
+
+  .user-view-banner {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .user-view-banner > div {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .user-view-banner button {
+    width: 100%;
+  }
+}
+
 .avatar-button {
   width: 44px;
   height: 44px;