style(mobile-app): add gradient background and card background to ranking page

- Change page background from white to gradient (light beige to light orange)
- Change card background to light white (#FFFDF8) for better contrast

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/mobile-app/lib/features/ranking/presentation/pages/ranking_page.dart

@@ -105,8 +105,18 @@ class _RankingPageState extends ConsumerState<RankingPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: Colors.white,
+      body: Container(
-      body: Column(
+        decoration: const BoxDecoration(
+          gradient: LinearGradient(
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+            colors: [
+              Color(0xFFFFF5E6), // 浅米色
+              Color(0xFFEAE0C8), // 浅橙色
+            ],
+          ),
+        ),
+        child: Column(
           children: [
             // 顶部标题和Tab栏
             _buildHeader(),
@@ -118,6 +128,7 @@ class _RankingPageState extends ConsumerState<RankingPage> {
             ),
           ],
         ),
+      ),
     );
   }
 
@@ -319,7 +330,7 @@ class _RankingPageState extends ConsumerState<RankingPage> {
     return Container(
       padding: const EdgeInsets.all(16),
       decoration: BoxDecoration(
-        color: const Color(0x80FFFFFF),
+        color: const Color(0xFFFFFDF8), // 浅白色背景，与页面背景区分
         borderRadius: BorderRadius.circular(12),
       ),
       child: Row(