photo ui update

src/App.css

@@ -1308,13 +1308,20 @@
 }
 
 .settings-profile-name {
-    margin: 0 0 0.3rem;
+    margin: 0 0 0.15rem;
     font-size: 1.0625rem;
     font-weight: 700;
     color: #1a1a1a;
     font-family: "Sniglet", system-ui;
 }
 
+.settings-profile-email {
+    margin: 0;
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    font-family: "Sniglet", system-ui;
+}
+
 .settings-profile-badge {
     display: inline-block;
     padding: 0.15rem 0.5rem;
@@ -1360,8 +1367,7 @@
     position: relative;
     width: 80px;
     height: 80px;
-    margin: 0 auto 0.5rem;
-    cursor: pointer;
+    margin: 0 auto 0.75rem;
     border-radius: 50%;
     overflow: hidden;
 }
@@ -1387,30 +1393,44 @@
     font-family: "Sniglet", system-ui;
 }
 
-.edit-modal-avatar-overlay {
-    position: absolute;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.35);
+.edit-modal-photo-actions {
     display: flex;
-    align-items: center;
     justify-content: center;
-    color: #fff;
-    border-radius: 50%;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.edit-modal-change-photo,
+.edit-modal-remove-photo {
+    flex: 1;
+    max-width: 130px;
+    padding: 0.45rem 0.75rem;
+    border-radius: 8px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: "Sniglet", system-ui;
+    transition: background 0.15s;
+}
+
+.edit-modal-change-photo {
+    background: var(--color-accent-light, #dcfce7);
+    border: 1.5px solid var(--color-primary, #22c55e);
+    color: var(--color-primary, #22c55e);
+}
+
+.edit-modal-change-photo:hover {
+    background: #bbf7d0;
 }
 
 .edit-modal-remove-photo {
-    display: block;
-    margin: 0 auto 0.5rem;
-    background: none;
-    border: none;
+    background: #fef2f2;
+    border: 1.5px solid #fca5a5;
     color: #ef4444;
-    font-size: 0.75rem;
-    cursor: pointer;
-    padding: 0.25rem 0.5rem;
 }
 
 .edit-modal-remove-photo:hover {
-    text-decoration: underline;
+    background: #fee2e2;
 }
 
 .edit-modal-save {
@@ -1653,7 +1673,8 @@
     width: 100%;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
+    gap: 0.5rem;
     padding: 0.875rem 1.125rem;
     margin-bottom: 0.75rem;
     font-size: 0.9375rem;