minor asthetic improvements

Co-authored-by: Copilot <copilot@github.com>

lib/main.dart

@@ -107,10 +107,29 @@ class _MainPageState extends State<MainPage> {
             ),
             Expanded(
               flex: 1,
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(12, 0, 12, 12),
                 child: Container(
                   width: double.infinity,
                   padding: const EdgeInsets.symmetric(horizontal: 16),
-                color: Colors.black87,
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(20),
+                    gradient: LinearGradient(
+                      begin: Alignment.topLeft,
+                      end: Alignment.bottomRight,
+                      colors: [
+                        Colors.lightBlue.shade50,
+                        Colors.lightBlue.shade100,
+                      ],
+                    ),
+                    boxShadow: const [
+                      BoxShadow(
+                        color: Color(0x22000000),
+                        blurRadius: 14,
+                        offset: Offset(0, 6),
+                      ),
+                    ],
+                  ),
                   child: Row(
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: [
@@ -126,12 +145,13 @@ class _MainPageState extends State<MainPage> {
                       const SizedBox(width: 16),
                       Text(
                         _audio.isPlaying ? 'Playing' : 'Stopped',
-                      style: const TextStyle(color: Colors.white),
+                        style: const TextStyle(color: Colors.black87),
                       ),
                     ],
                   ),
                 ),
               ),
+            ),
           ],
         ),
       ),