Refine lyrics creation layout and background styling

src/screens/Writing/CreateLyricsWithAi.js

@@ -344,7 +344,8 @@ const CreateLyricsWithAi = () => {
   return (
     <Page
       headerType="NONE"
-      backgroundImg={background.writingMobileBackground}
+      backgroundImg={selectedIndex === MAX_STEP_INDEX ? null : background.writingMobileBackground}
+      backgroundColor="#0F0C19"
     >
       <View
         onLayout={(event) => {

src/screens/Writing/CreatingLyrics.js

@@ -264,14 +264,14 @@ const CreatingLyrics = ({ active, config, selections, onErrorRedirect }) => {
       <View
         style={{
           width: '100%',
-          height: '50%',
+          ...(Platform.OS === 'web' ? { height: '50%' } : { maxWidth: 540, alignSelf: 'center' }),
         }}
       >
         <View
           style={{
             borderRadius: 20,
             overflow: 'hidden',
-            backgroundColor: '#0F0C1933',
+            backgroundColor: Platform.OS === 'web' ? '#0F0C1933' : '#211A30',
           }}
         >
           <BlurView