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

assets/css/passkey.scss

@@ -1,3 +1,88 @@
+.twofa-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 6px;
+  font: 600 13px 'Rajdhani', sans-serif;
+  letter-spacing: 0.5px;
+
+  &--enabled {
+    background: rgba(42, 158, 96, 0.12);
+    border: 1px solid rgba(42, 158, 96, 0.3);
+    color: #5ee89a;
+  }
+
+  &--disabled {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: rgba(255, 255, 255, 0.4);
+  }
+}
+
+.twofa-actions {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+
+  &__form {
+    margin: 0;
+  }
+}
+
+.twofa-backup-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+
+  &__count {
+    font: 500 13px 'Rajdhani', sans-serif;
+    color: rgba(149, 207, 245, 0.55);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+}
+
+.twofa-backup-reveal {
+  background: rgba(246, 125, 82, 0.07);
+  border: 1px solid rgba(246, 125, 82, 0.25);
+  border-radius: 8px;
+  padding: 18px 20px;
+
+  &__warning {
+    font: 600 12px 'Rajdhani', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    color: #f6a060;
+    margin: 0 0 14px;
+    display: flex;
+    align-items: center;
+    gap: 7px;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 8px;
+  }
+}
+
+.twofa-backup-code {
+  display: block;
+  text-align: center;
+  padding: 7px 10px;
+  background: rgba(0, 0, 0, 0.35);
+  border: 1px solid rgba(246, 125, 82, 0.2);
+  border-radius: 4px;
+  font: 700 13px 'Courier New', monospace;
+  letter-spacing: 2px;
+  color: #e0c890;
+  user-select: all;
+}
+
 $primary: #236f87;
 $primary-dark: #1a5a70;
 $danger: #c0392b;
@@ -203,4 +288,4 @@ $bg-hover: rgba(35, 111, 135, 0.15);
     color: #64b5f6;
     border: 1px solid rgba(25, 118, 210, 0.3);
   }
-}
+}