body { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f3f4f6; font-family: -apple-system, sans-serif; gap: 20px; }
p { margin: 0; }
.profile { background: white; width: 220px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); overflow: hidden; display: flex; flex-direction: column; }
.profile-picture { width: 100%; height: 220px; object-fit: cover; }
.name { font-size: 18px; font-weight: 700; margin: 12px; color: #111827; }
.mutual-friends-row { display: flex; align-items: center; margin: 0 12px 16px; }
.mutual-friend-picture { height: 24px; width: 24px; object-fit: cover; border-radius: 50%; margin-right: 8px; }
.mutual-friends { color: #6b7280; font-size: 14px; }
.add-friend-button { background-color: #2563eb; color: white; border: none; padding: 10px; margin: 0 12px 12px; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.add-friend-button:hover { background-color: #1d4ed8; }