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,18 +105,29 @@ class _RankingPageState extends ConsumerState<RankingPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: Colors.white,
+      body: Container(
-      body: Column(
+        decoration: const BoxDecoration(
-        children: [
+          gradient: LinearGradient(
-          // 顶部标题和Tab栏
+            begin: Alignment.topCenter,
-          _buildHeader(),
+            end: Alignment.bottomCenter,
-          // 筛选栏
+            colors: [
-          _buildFilterBar(),
+              Color(0xFFFFF5E6), // 浅米色
-          // 排行榜列表
+              Color(0xFFEAE0C8), // 浅橙色
-          Expanded(
+            ],
-            child: _buildRankingList(),
           ),
-        ],
+        ),
+        child: Column(
+          children: [
+            // 顶部标题和Tab栏
+            _buildHeader(),
+            // 筛选栏
+            _buildFilterBar(),
+            // 排行榜列表
+            Expanded(
+              child: _buildRankingList(),
+            ),
+          ],
+        ),
       ),
     );
   }
@@ -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(