feat: add passkey-based two-factor authentication

webapp/src/styles/auth.css

@@ -30,14 +30,11 @@
 
 .not-found-page {
   @apply relative grid min-h-full place-items-center overflow-hidden p-6 text-center;
-  background:
-    radial-gradient(circle at 50% 42%, rgba(28, 118, 255, 0.24), transparent 27rem),
-    radial-gradient(circle at 16% 84%, rgba(22, 163, 255, 0.10), transparent 22rem),
-    linear-gradient(180deg, #020b1a 0%, #061328 48%, #0a1730 100%);
+  background: var(--surface);
 }
 
 .not-found-shell {
-  @apply relative z-20 grid w-full max-w-[620px] justify-items-center gap-5 px-4 py-7 text-center;
+  @apply relative z-20 grid w-full max-w-[560px] justify-items-center gap-6 px-4 py-7 text-center;
   background: transparent;
   border: 0;
   box-shadow: none;
@@ -356,7 +353,7 @@
 }
 
 .not-found-logo {
-  @apply h-14 w-[70px] flex-shrink-0 object-contain;
+  @apply h-14 w-14 flex-shrink-0 object-contain;
   filter: drop-shadow(0 8px 18px rgba(43, 102, 217, 0.22));
 }
 
@@ -377,17 +374,16 @@
 
 .not-found-copy {
   @apply grid justify-items-center gap-3;
-  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
 }
 
 .not-found-shell h1 {
   @apply m-0 text-3xl font-extrabold leading-tight;
-  color: #f8fbff;
+  color: var(--text);
 }
 
 .not-found-shell p {
   @apply m-0 max-w-[420px] text-sm leading-relaxed;
-  color: rgba(220, 232, 251, 0.82);
+  color: var(--muted);
 }
 
 .not-found-action {
@@ -396,10 +392,7 @@
 
 @media (max-width: 520px) {
   .not-found-page {
-    background:
-      radial-gradient(circle at 50% 36%, rgba(28, 118, 255, 0.24), transparent 18rem),
-      radial-gradient(circle at 18% 82%, rgba(22, 163, 255, 0.10), transparent 16rem),
-      linear-gradient(180deg, #020b1a 0%, #061328 48%, #0a1730 100%);
+    background: var(--surface);
   }
 
   .not-found-shell {

webapp/src/styles/management.css

@@ -1352,7 +1352,7 @@
 }
 
 .settings-module-head {
-  @apply mb-[5px] flex items-center justify-between gap-3;
+  @apply mb-[10px] flex items-center justify-between gap-3;
 }
 
 .settings-module-head h3 {
@@ -1382,10 +1382,37 @@
   accent-color: var(--primary);
 }
 
+.account-passkey-list,
 .account-passkeys-list {
   @apply mt-3 grid gap-2;
 }
 
+.two-factor-passkey-register-row {
+  @apply flex min-w-0 items-center gap-2;
+}
+
+.two-factor-passkey-register-row .input {
+  @apply min-w-0 flex-1;
+}
+
+.two-factor-passkey-register-row .btn {
+  @apply shrink-0;
+  min-width: 86px;
+}
+
+.two-factor-passkey-list-block {
+  @apply grid gap-2;
+}
+
+.settings-list-label {
+  @apply text-sm font-extrabold;
+  color: var(--muted);
+}
+
+.two-factor-passkey-danger-actions {
+  @apply justify-end pt-1;
+}
+
 .account-passkey-row {
   @apply grid min-w-0 items-center gap-3 rounded-lg border p-3;
   grid-template-columns: minmax(0, 1fr) auto auto;
@@ -1393,6 +1420,17 @@
   background: var(--panel);
 }
 
+.two-factor-passkey-row {
+  grid-template-columns: 2rem minmax(0, 1fr) auto;
+}
+
+.account-passkey-index {
+  @apply inline-grid h-8 w-8 place-items-center rounded-lg text-sm font-extrabold;
+  border: 1px solid var(--line);
+  color: var(--muted);
+  background: color-mix(in srgb, var(--panel) 80%, var(--panel-2));
+}
+
 .account-passkey-main {
   @apply grid min-w-0 gap-1;
 }

webapp/src/styles/overlays.css

@@ -91,7 +91,7 @@
 }
 
 .dialog-extra {
-  @apply mt-2;
+  @apply mt-2 grid gap-2;
 }
 
 .dialog-divider {
@@ -99,6 +99,25 @@
   background: var(--line);
 }
 
+.two-factor-method-switcher {
+  @apply grid gap-2;
+}
+
+.two-factor-method-list {
+  @apply grid gap-2 rounded-lg border p-2;
+  border-color: var(--line);
+  background: color-mix(in srgb, var(--panel) 92%, var(--surface));
+}
+
+.two-factor-method-label {
+  @apply px-1 text-left text-sm font-extrabold;
+  color: var(--muted);
+}
+
+.two-factor-method-option {
+  @apply min-h-11 justify-start text-base;
+}
+
 .import-summary-dialog {
   @apply relative max-w-[520px] pt-4 text-left;
 }

webapp/src/styles/responsive.css

@@ -1143,6 +1143,15 @@
     padding: 10px;
   }
 
+  .two-factor-passkey-row {
+    grid-template-columns: 2rem minmax(0, 1fr);
+  }
+
+  .two-factor-passkey-row .btn {
+    grid-column: 2;
+    justify-self: end;
+  }
+
   .account-passkey-status {
     justify-self: flex-start;
   }
@@ -1152,6 +1161,15 @@
     width: 100%;
   }
 
+  .two-factor-passkey-register-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .two-factor-passkey-register-row .btn {
+    width: 100%;
+  }
+
   .settings-module .totp-grid,
   .settings-submodule .totp-grid {
     gap: 8px;