Improve auth flows

web/app/globals.css

@@ -1076,6 +1076,13 @@ body {
   align-items: center;
   justify-content: center;
   margin-bottom: 0.25rem;
+  overflow: hidden;
+}
+
+.profile-avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .profile-name {
@@ -1105,6 +1112,37 @@ body {
   padding-top: 1rem;
 }
 
+.profile-update-form {
+  width: 100%;
+  display: grid;
+  gap: 0.9rem;
+}
+
+.profile-update-title {
+  margin: 0.25rem 0 0;
+  font-size: 1.1rem;
+  color: #222;
+}
+
+.profile-avatar-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.profile-avatar-upload-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.65rem 1rem;
+  border-radius: 8px;
+  background: #fff3e0;
+  color: #a65c00;
+  font-weight: 600;
+  cursor: pointer;
+}
+
 .profile-field-row {
   display: flex;
   justify-content: space-between;