chg: usr: add modern Webauthn authentication #4

assets/css/homepage/_auth.scss

@@ -161,6 +161,12 @@
     letter-spacing: 0.3px;
 }
 
+.auth-below-password {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
 .auth-remember {
     display: flex;
     align-items: center;
@@ -216,4 +222,66 @@
 
         &:hover { color: #c5e8ff; }
     }
-}
+}
+
+.auth-forgot-password {
+  font: 400 13px 'Rajdhani', sans-serif;
+  color: rgba(255, 255, 255, 0.35);
+  text-align: center;
+  letter-spacing: 0.3px;
+
+  a {
+    color: #95cff5;
+    text-decoration: none;
+    font-weight: 600;
+    transition: color 180ms;
+
+    &:hover { color: #c5e8ff; }
+  }
+}
+
+.auth-divider {
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+  color: #999;
+}
+
+.auth-divider::before,
+.auth-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: #ddd;
+}
+
+.auth-divider span {
+  margin: 0 10px;
+  font-size: 14px;
+}
+
+.auth-passkey-btn {
+  width: 100%;
+  padding: 12px 16px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.auth-passkey-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
+}
+
+.auth-passkey-btn:active {
+  transform: translateY(0);
+}