user picker

client/src/app/home-page.component.scss

@@ -114,6 +114,58 @@
   background: var(--panel-soft-background);
 }
 
+.user-search-panel {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.user-search-shell {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.user-search-results {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.user-search-result {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  width: 100%;
+  padding: 0.9rem 1rem;
+  border: 1px solid var(--surface-border-soft);
+  border-radius: 0.9rem;
+  color: var(--page-text);
+  background: var(--surface-background);
+  text-align: left;
+  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
+}
+
+.user-search-result:hover,
+.user-search-result:focus-visible {
+  border-color: color-mix(in srgb, var(--accent-color) 35%, var(--surface-border));
+  background: var(--surface-hover-background);
+  transform: translateY(-1px);
+}
+
+.user-search-result-copy {
+  display: grid;
+  gap: 0.1rem;
+  min-width: 0;
+}
+
+.user-search-result-action {
+  flex: 0 0 auto;
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--accent-color);
+}
+
 .access-key-card {
   border-radius: 0.9rem;
   border: 1px solid var(--surface-border-soft);