refactor(ui): the settings family migrates; two colour bugs and a dead class

SettingsView and UserManagementView had near-identical button vocabularies —
btn-delete, btn-cancel-delete, btn-confirm-delete, btn-toggle/-open/-close —
defined separately in each. Parallel duplication (#2278's shape), and it had
already diverged twice:

- .btn-confirm-delete used --color-danger in UserManagement and
  --color-action-destructive in Settings. Those are different colours on
  purpose: the house style keeps error (something went wrong) distinct from
  destructive (something is about to). A delete confirmation is destructive.
  UserManagement was showing the error colour for a button nothing had failed
  in yet.

- .btn-remove-slot's hover reached for --color-danger for the same reason, and
  is the same correction. It turned out to be dead anyway — style rules only,
  no template reference anywhere in the app — so it is gone.

.btn-danger-outline was defined TWICE inside SettingsView, at 0.4rem 0.9rem and
0.45rem 1rem. One file, one class, two geometries, ~1200 lines apart. That is
the clearest single argument for this whole task that I have found: the drift
does not need two files, only enough distance that nobody sees both at once.

The registration toggle keeps .btn-toggle-close, and only that. It is bound
dynamically (:class="registrationOpen ? … : …"), so a name-based scan reads it
as unused — checked before deleting. .btn-toggle-open went, because btn-primary
now says the same thing; the close state stays because it must NOT read as the
primary action it sits on.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UaYUaouG9jjhATyuxCKrQs

frontend/src/views/UserManagementView.vue

@@ -167,7 +167,7 @@ function formatDate(iso: string): string {
           </p>
         </div>
         <button
-          class="btn-toggle"
+          class="btn-primary btn-toggle"
           :class="registrationOpen ? 'btn-toggle-close' : 'btn-toggle-open'"
           @click="toggleRegistration"
           :disabled="toggling"
@@ -190,7 +190,7 @@ function formatDate(iso: string): string {
         />
         <button
           type="submit"
-          class="btn-invite"
+          class="btn-primary"
           :disabled="sendingInvite || !inviteEmail.trim()"
         >
           {{ sendingInvite ? "Sending..." : "Send Invite" }}
@@ -216,7 +216,7 @@ function formatDate(iso: string): string {
               <td class="hide-mobile cell-date">{{ formatDate(inv.expires_at) }}</td>
               <td class="cell-actions">
                 <button
-                  class="btn-delete"
+                  class="btn-ghost btn-compact"
                   @click="revokeInvitation(inv.id)"
                   :disabled="revokingId !== null"
                 >
@@ -262,17 +262,17 @@ function formatDate(iso: string): string {
               </template>
               <template v-else-if="confirmDeleteId === u.id">
                 <button
-                  class="btn-confirm-delete"
+                  class="btn-danger btn-compact"
                   @click="confirmDelete(u.id)"
                   :disabled="deleting !== null"
                 >
                   {{ deleting === u.id ? "Deleting..." : "Confirm" }}
                 </button>
-                <button class="btn-cancel-delete" @click="cancelDelete">Cancel</button>
+                <button class="btn-ghost btn-compact" @click="cancelDelete">Cancel</button>
               </template>
               <template v-else>
                 <button
-                  class="btn-delete"
+                  class="btn-ghost btn-compact"
                   @click="confirmDelete(u.id)"
                   :disabled="deleting !== null"
                 >
@@ -328,24 +328,6 @@ function formatDate(iso: string): string {
   outline: none;
   border-color: var(--color-primary);
 }
-.btn-invite {
-  padding: 0.45rem 1rem;
-  background: var(--color-action-primary);
-  color: var(--fs-text-on-action);
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.9rem;
-  font-weight: var(--fs-weight-medium);
-  white-space: nowrap;
-}
-.btn-invite:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-.btn-invite:hover:not(:disabled) {
-  opacity: 0.9;
-}
 .invite-list {
   margin-top: 1rem;
 }
@@ -380,26 +362,8 @@ function formatDate(iso: string): string {
   font-size: 0.8rem;
   color: var(--color-text-muted);
 }
-.btn-toggle {
-  padding: 0.45rem 1rem;
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.9rem;
-  font-weight: var(--fs-weight-medium);
-  white-space: nowrap;
-}
-.btn-toggle:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-.btn-toggle-open {
-  background: var(--color-action-primary);
-  color: var(--fs-text-on-action);
-}
-.btn-toggle-open:hover:not(:disabled) {
-  opacity: 0.9;
-}
+/* The one genuine override: 'close registration' must NOT read as the
+   primary action it sits on. Scoped, so it beats the shared variant. */
 .btn-toggle-close {
   background: var(--color-bg-secondary);
   color: var(--color-text);
@@ -478,54 +442,6 @@ function formatDate(iso: string): string {
   font-size: 0.8rem;
   color: var(--color-text-muted);
 }
-.btn-delete {
-  padding: 0.25rem 0.6rem;
-  background: transparent;
-  color: var(--color-text-muted);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.8rem;
-}
-.btn-delete:hover:not(:disabled) {
-  border-color: var(--color-danger);
-  color: var(--color-danger);
-}
-.btn-delete:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-.btn-confirm-delete {
-  padding: 0.25rem 0.6rem;
-  background: var(--color-danger);
-  color: var(--fs-text-on-action);
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.8rem;
-  font-weight: var(--fs-weight-medium);
-  margin-right: 0.25rem;
-}
-.btn-confirm-delete:hover:not(:disabled) {
-  filter: brightness(0.9);
-}
-.btn-confirm-delete:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-.btn-cancel-delete {
-  padding: 0.25rem 0.6rem;
-  background: transparent;
-  color: var(--color-text-muted);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.8rem;
-}
-.btn-cancel-delete:hover {
-  color: var(--color-text);
-  border-color: var(--color-text-muted);
-}
 
 @media (max-width: 768px) {
   .registration-row {