new: usr: implement the 2FA authentication (TOTP and backup codes) #4

assets/css/homepage/_auth.scss

@@ -207,6 +207,74 @@
     &:active { transform: translateY(0); }
 }
 
+.auth-cancel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    background: linear-gradient(to bottom, #1a1a1a 0%, #2d2d2d 55%, #404040 100%);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 5px;
+    color: #ffffff;
+    font: 700 16px 'Rajdhani', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    padding: 14px;
+    cursor: pointer;
+    margin-top: 6px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
+    transition: all 220ms ease;
+
+    &:hover {
+        background: linear-gradient(to bottom, #2d2d2d 0%, #3d3d3d 55%, #505050 100%);
+        box-shadow: 0 6px 28px rgba(0, 0, 0, 0.6);
+        transform: translateY(-2px);
+    }
+
+    &:active { transform: translateY(0); }
+}
+
+.auth-actions {
+    display: flex;
+    gap: 12px;
+    width: 100%;
+    align-items: flex-start;
+
+    form {
+        flex: 1;
+        display: flex;
+
+        &.auth-form {
+            flex-direction: column;
+            gap: 20px;
+        }
+    }
+
+    button {
+        flex: 1;
+    }
+}
+
+.auth-cancel-form {
+    display: flex;
+    flex: 1;
+
+    .auth-cancel {
+        flex: 1;
+        margin-top: 0;
+    }
+}
+
+.auth-cancel-standalone {
+    margin-top: 12px;
+    width: 100%;
+}
+
+.auth-cancel--block {
+    width: 100%;
+    margin-top: 0;
+}
+
 .auth-switch {
     font: 400 13px 'Rajdhani', sans-serif;
     color: rgba(255, 255, 255, 0.35);
@@ -285,3 +353,78 @@
 .auth-passkey-btn:active {
   transform: translateY(0);
 }
+
+.auth-input--code {
+  font: 700 22px 'Courier New', monospace;
+  letter-spacing: 6px;
+  text-align: center;
+}
+
+.auth-field-hint {
+  font: 400 12px 'Rajdhani', sans-serif;
+  color: rgba(149, 207, 245, 0.45);
+  letter-spacing: 0.3px;
+  margin: 6px 0 0;
+}
+
+.auth-card--wide {
+  max-width: 520px;
+}
+
+.auth-back {
+  margin-top: 20px;
+  text-align: center;
+
+  a {
+    font: 500 13px 'Rajdhani', sans-serif;
+    color: rgba(149, 207, 245, 0.5);
+    text-decoration: none;
+    letter-spacing: 0.5px;
+    transition: color 180ms;
+
+    &:hover { color: rgba(149, 207, 245, 0.9); }
+  }
+}
+
+.twofa-setup {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin-top: 20px;
+
+  &__qr {
+    display: flex;
+    justify-content: center;
+
+    img {
+      border-radius: 8px;
+      border: 2px solid rgba(35, 111, 135, 0.3);
+      background: #fff;
+      padding: 4px;
+    }
+  }
+
+  &__manual {
+    text-align: center;
+  }
+
+  &__manual-label {
+    font: 400 12px 'Rajdhani', sans-serif;
+    color: rgba(149, 207, 245, 0.45);
+    letter-spacing: 0.5px;
+    margin: 0 0 8px;
+  }
+
+  &__secret {
+    display: inline-block;
+    padding: 6px 14px;
+    background: rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(35, 111, 135, 0.3);
+    border-radius: 4px;
+    font: 700 14px 'Courier New', monospace;
+    letter-spacing: 3px;
+    color: #95cff5;
+    word-break: break-all;
+    user-select: all;
+  }
+}