fix: align RBAC user management styling with mock design

- Split pane: card layout with border, border-radius, box-shadow
  matching mock's bordered panel look
- List pane: bg-surface background, padded header with border-bottom
- Entity items: border-bottom separators instead of gap spacing,
  flex-start alignment for multi-line content
- Detail pane: bg-surface background, 20px padding, right border-radius
- User meta line: show email + group path (like mock's "email · group")
- Create form: raised background with bottom border

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/pages/Admin/UsersTab.tsx

@@ -307,7 +307,11 @@ export default function UsersTab() {
                     <Badge label={user.provider} variant="outlined" />
                   )}
                 </div>
-                {user.email && <div className={styles.entityMeta}>{user.email}</div>}
+                <div className={styles.entityMeta}>
+                  {user.email || user.userId}
+                  {user.directGroups.length > 0 && ` · ${user.directGroups.map((g) => g.name).join(', ')}`}
+                  {user.directGroups.length === 0 && ' · no groups'}
+                </div>
                 {(user.directRoles.length > 0 || user.directGroups.length > 0) && (
                   <div className={styles.entityTags}>
                     {user.directRoles.map((r) => (